Refactor Migration component to conditionally show start modal based …

…on chain ID

src/components/migration/index.tsx

@@ -1,9 +1,22 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { MigrationStartModal } from "./start";
 import { MigrationModal } from "./migration";
+import { useChainId } from "wagmi";
+import { ChainID } from "@/types";
+
+const NETWORKS_REQUIRING_MIGRATION = [ChainID.CRAB, ChainID.KOI];
 
 export function Migration() {
-  const [modals, setModals] = useState({ start: true, migration: false });
+  const [modals, setModals] = useState({ start: false, migration: false });
+  const chainId = useChainId();
+
+  useEffect(() => {
+    if (!chainId) return;
+
+    if (NETWORKS_REQUIRING_MIGRATION.includes(chainId)) {
+      setModals({ start: true, migration: false });
+    }
+  }, [chainId]);
 
   const handleNext = () => setModals({ start: false, migration: true });
   const handleClose = (modal: keyof typeof modals) => setModals((prev) => ({ ...prev, [modal]: false }));

src/components/migration/migration.tsx

@@ -22,7 +22,7 @@ interface Props {
 export function MigrationModal({ isOpen, maskClosable = true, onClose = () => undefined }: PropsWithChildren<Props>) {
   const [step1Busy, setStep1Busy] = useState(false);
   const { activeChain } = useApp();
-  const { stakedRing, stakedDeposit, stakedDeposits, isLedgersInitialized } = useStaking();
+  const { stakedRing, stakedDeposit, stakedDeposits, isLedgersInitialized, isDepositsInitialized } = useStaking();
   const nodeRef = useRef<HTMLDivElement | null>(null);
 
   const total = stakedRing + stakedDeposit;
@@ -52,7 +52,7 @@ export function MigrationModal({ isOpen, maskClosable = true, onClose = () => un
     }
   }, [activeChain, stakedRing, stakedDeposits]);
 
-  const isLoading = !isLedgersInitialized;
+  const isLoading = !isLedgersInitialized || !isDepositsInitialized;
 
   return (
     <>
@@ -96,10 +96,7 @@ export function MigrationModal({ isOpen, maskClosable = true, onClose = () => un
                   </div>
                 </div>
 
-                <div
-                  className="mt-5 flex w-full flex-col gap-5"
-                  style={{ pointerEvents: isLedgersInitialized ? "auto" : "none" }}
-                >
+                <div className="mt-5 flex w-full flex-col gap-5" style={{ pointerEvents: isLoading ? "auto" : "none" }}>
                   <EnsureMatchNetworkButton
                     className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
                     onClick={handleUnbond}