From c9d963d955f27ceba8a9c20fe35e4b5756487af2 Mon Sep 17 00:00:00 2001
From: snoopy1412 <snoopy1412.su@gmail.com>
Date: Tue, 24 Sep 2024 12:51:18 +0800
Subject: [PATCH] Refactor Migration component to conditionally show start
 modal based on chain ID

---
 src/components/migration/index.tsx     | 17 +++++++++++++++--
 src/components/migration/migration.tsx |  9 +++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/migration/index.tsx b/src/components/migration/index.tsx
index e29e8b2..a8ddb78 100644
--- a/src/components/migration/index.tsx
+++ b/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 }));
diff --git a/src/components/migration/migration.tsx b/src/components/migration/migration.tsx
index 92ba7d8..9541c97 100644
--- a/src/components/migration/migration.tsx
+++ b/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}