fix: assure correct chain

Tarnadas · Tarnadas · commit 31d7692fddf7 · 2025-10-23T11:24:54.000+02:00
diff --git a/app/app/components/FeeWithdrawalModal.tsx b/app/app/components/FeeWithdrawalModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useAccount, useWalletClient } from "wagmi";
+import { useAccount, useWalletClient, useChainId, useSwitchChain } from "wagmi";
 import { BrowserProvider } from "ethers";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
@@ -10,6 +10,7 @@ import {
   getClientHolding,
 } from "../utils/orderly";
 import { cleanMultisigAddress } from "../utils/multisig";
+import { getChainById } from "../../../config";
 
 interface FeeWithdrawalModalProps {
   isOpen: boolean;
@@ -28,6 +29,8 @@ export function FeeWithdrawalModal({
 }: FeeWithdrawalModalProps) {
   const { address } = useAccount();
   const { data: walletClient } = useWalletClient();
+  const chainId = useChainId();
+  const { switchChain } = useSwitchChain();
   const [isProcessing, setIsProcessing] = useState(false);
   const [amount, setAmount] = useState("");
   const [usdcBalance, setUsdcBalance] = useState<number | null>(null);
@@ -37,6 +40,9 @@ export function FeeWithdrawalModal({
   const accountId = getAccountId(cleanAddress, brokerId);
   const [orderlyKey, setOrderlyKey] = useState<Uint8Array | null>(null);
 
+  const isOnCorrectChain = chainId === multisigChainId;
+  const requiredChain = getChainById(multisigChainId);
+
   useEffect(() => {
     if (isOpen) {
       const savedKey = loadOrderlyKey(accountId);
@@ -76,12 +82,28 @@ export function FeeWithdrawalModal({
     }
   };
 
+  const handleSwitchChain = async () => {
+    try {
+      await switchChain({ chainId: multisigChainId });
+    } catch (error) {
+      console.error("Failed to switch chain:", error);
+      toast.error("Please switch to the required network in your wallet");
+    }
+  };
+
   const handleWithdraw = async () => {
     if (!walletClient || !accountId || !orderlyKey || !address) {
       toast.error("Missing required data for withdrawal");
       return;
     }
 
+    if (!isOnCorrectChain) {
+      toast.error(
+        `Please switch to ${requiredChain?.name || "the correct network"} to withdraw`
+      );
+      return;
+    }
+
     if (!amount.trim() || parseFloat(amount) <= 0) {
       toast.error("Please enter valid amount");
       return;
@@ -212,31 +234,49 @@ export function FeeWithdrawalModal({
             />
           </div>
 
-          <div className="bg-warning/10 rounded-lg p-3">
-            <div className="flex items-start gap-2">
-              <div className="i-mdi:shield-check text-warning w-4 h-4 mt-0.5 flex-shrink-0"></div>
-              <div>
-                <p className="text-xs text-warning font-medium mb-1">
-                  Multisig Approval Required
-                </p>
-                <p className="text-xs text-gray-400">
-                  This transaction will be submitted to your Safe wallet and
-                  requires approval from the required number of signers.
-                </p>
+          {!isOnCorrectChain && (
+            <div className="bg-warning/10 border border-warning/20 rounded-lg p-3">
+              <div className="flex items-start gap-2">
+                <div className="i-mdi:alert text-warning w-5 h-5 mt-0.5 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <p className="text-xs text-warning font-medium mb-1">
+                    Wrong Network
+                  </p>
+                  <p className="text-xs text-gray-400">
+                    Please switch to{" "}
+                    <span className="font-semibold text-white">
+                      {requiredChain?.name || `Chain ID ${multisigChainId}`}
+                    </span>{" "}
+                    where your multisig delegate signer link was established.
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
+          )}
 
-          <Button
-            onClick={handleFullWithdrawal}
-            variant="primary"
-            className="w-full"
-            isLoading={isProcessing}
-            loadingText="Processing..."
-            disabled={!amount.trim() || !orderlyKey}
-          >
-            Withdraw Fees
-          </Button>
+          {isOnCorrectChain ? (
+            <Button
+              onClick={handleFullWithdrawal}
+              variant="primary"
+              className="w-full"
+              isLoading={isProcessing}
+              loadingText="Processing..."
+              disabled={!amount.trim() || !orderlyKey}
+            >
+              Withdraw Fees
+            </Button>
+          ) : (
+            <Button
+              onClick={handleSwitchChain}
+              variant="primary"
+              className="w-full"
+            >
+              <div className="flex items-center justify-center gap-2">
+                <div className="i-mdi:swap-horizontal w-4 h-4"></div>
+                Switch to {requiredChain?.name || "Correct Network"}
+              </div>
+            </Button>
+          )}
         </div>
       </div>
     </div>
diff --git a/app/app/components/GraduationForm.tsx b/app/app/components/GraduationForm.tsx
@@ -1255,9 +1255,6 @@ export function GraduationForm({
                           brokerId: graduationStatus.brokerId,
                           onSuccess: () => {
                             setMultisigHasKey(true);
-                            toast.success(
-                              "Orderly key created! You can now withdraw fees."
-                            );
                           },
                           onCancel: () => {},
                         })
diff --git a/app/app/components/OrderlyKeyLoginModal.tsx b/app/app/components/OrderlyKeyLoginModal.tsx
@@ -13,6 +13,7 @@ import { getCurrentEnvironment } from "../utils/config";
 import { get } from "../utils/apiClient";
 import { useAuth } from "../context/useAuth";
 import { cleanMultisigAddress } from "../utils/multisig";
+import { getChainById } from "../../../config";
 
 interface OrderlyKeyLoginModalProps {
   isOpen: boolean;
@@ -38,6 +39,7 @@ export default function OrderlyKeyLoginModal({
   const { token } = useAuth();
   const [isCreating, setIsCreating] = useState(false);
   const [multisigAddress, setMultisigAddress] = useState<string | undefined>();
+  const [multisigChainId, setMultisigChainId] = useState<number | undefined>();
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
 
   const isMainnet = getCurrentEnvironment() === "mainnet";
@@ -60,13 +62,16 @@ export default function OrderlyKeyLoginModal({
         const data = await get<{
           isMultisig?: boolean;
           multisigAddress?: string;
+          multisigChainId?: number | null;
         }>("/api/graduation/graduation-status", token, {
           showToastOnError: false,
         });
         if (data.isMultisig && data.multisigAddress) {
           setMultisigAddress(data.multisigAddress);
+          setMultisigChainId(data.multisigChainId || undefined);
         } else {
           setMultisigAddress(undefined);
+          setMultisigChainId(undefined);
         }
       } catch (error) {
         console.error("Failed to fetch graduation status:", error);
@@ -86,12 +91,20 @@ export default function OrderlyKeyLoginModal({
     accountId ||
     (cleanAddress && brokerId ? getAccountId(cleanAddress, brokerId) : "");
 
+  const requiredChainId =
+    isMultisig && multisigChainId ? multisigChainId : null;
+  const isOnCorrectChain = requiredChainId
+    ? chainId === requiredChainId
+    : isSupportedChain;
+  const requiredChain = requiredChainId ? getChainById(requiredChainId) : null;
+
   const handleSwitchChain = async () => {
     try {
-      await switchChain({ chainId: defaultChainId });
+      const targetChainId = requiredChainId || defaultChainId;
+      await switchChain({ chainId: targetChainId });
     } catch (error) {
       console.error("Failed to switch chain:", error);
-      toast.error("Please switch to a supported network in your wallet");
+      toast.error("Please switch to the required network in your wallet");
     }
   };
 
@@ -101,8 +114,12 @@ export default function OrderlyKeyLoginModal({
       return;
     }
 
-    if (!isSupportedChain) {
-      toast.error("Please switch to a supported network");
+    if (!isOnCorrectChain) {
+      toast.error(
+        isMultisig
+          ? "Please switch to the network where your multisig delegate signer link was established"
+          : "Please switch to a supported network"
+      );
       return;
     }
 
@@ -119,8 +136,6 @@ export default function OrderlyKeyLoginModal({
 
       let orderlyKey: Uint8Array;
 
-      console.log("isMultisig", isMultisig);
-
       if (isMultisig) {
         orderlyKey = await addDelegateOrderlyKey(
           signer,
@@ -201,12 +216,22 @@ export default function OrderlyKeyLoginModal({
                 <div className="mt-3 bg-info/10 rounded-lg p-3 border border-info/20">
                   <div className="flex items-start gap-2">
                     <div className="i-mdi:information-outline text-info w-4 h-4 mt-0.5 flex-shrink-0"></div>
-                    <p className="text-xs text-gray-400 text-left">
-                      Creating delegate key for multisig wallet:{" "}
-                      <span className="font-mono text-primary-light">
-                        {multisigAddress}
-                      </span>
-                    </p>
+                    <div className="text-xs text-gray-400 text-left">
+                      <p className="mb-1">
+                        Creating delegate key for multisig wallet:{" "}
+                        <span className="font-mono text-primary-light">
+                          {multisigAddress}
+                        </span>
+                      </p>
+                      {requiredChain && (
+                        <p className="text-info">
+                          Required network:{" "}
+                          <span className="font-semibold">
+                            {requiredChain.name}
+                          </span>
+                        </p>
+                      )}
+                    </div>
                   </div>
                 </div>
               )}
@@ -246,14 +271,17 @@ export default function OrderlyKeyLoginModal({
               </p>
             </div>
 
-            {!isSupportedChain && (
+            {!isOnCorrectChain && (
               <div className="bg-warning/10 border border-warning/20 rounded-lg p-3 mb-4">
                 <div className="flex items-start gap-2">
                   <div className="i-mdi:alert text-warning w-5 h-5 mt-0.5 flex-shrink-0"></div>
                   <div className="flex-1">
                     <p className="text-warning text-sm">
-                      Please switch to a supported network to create your
-                      Orderly key.
+                      {isMultisig && requiredChain
+                        ? `Please switch to ${requiredChain.name} where your multisig delegate signer link was established.`
+                        : isMultisig && requiredChainId
+                          ? `Please switch to the network where your multisig delegate signer link was established (Chain ID: ${requiredChainId}).`
+                          : "Please switch to a supported network to create your Orderly key."}
                     </p>
                   </div>
                 </div>
@@ -268,7 +296,7 @@ export default function OrderlyKeyLoginModal({
               >
                 Cancel
               </Button>
-              {isSupportedChain ? (
+              {isOnCorrectChain ? (
                 <Button
                   variant="primary"
                   onClick={handleCreateKey}
diff --git a/app/app/components/SafeInstructions.tsx b/app/app/components/SafeInstructions.tsx
@@ -207,6 +207,26 @@ export default function SafeInstructionsModal({
           <div className="flex-1 overflow-y-auto px-8">
             {activeTab === "safe" && (
               <div className="space-y-4 mb-8">
+                <div className="bg-info/10 border border-info/20 rounded-lg p-4 mb-4">
+                  <div className="flex items-start gap-3">
+                    <div className="i-mdi:information-outline text-info w-5 h-5 mt-0.5 flex-shrink-0"></div>
+                    <div>
+                      <h4 className="font-semibold text-info mb-2">
+                        Important: Match Your Safe's Network
+                      </h4>
+                      <p className="text-sm text-gray-300">
+                        Use the network selector above to choose the chain where
+                        your Safe wallet is deployed. Currently selected:{" "}
+                        <span className="font-semibold text-white">
+                          {chain?.name}
+                        </span>
+                        . If your Safe is on a different chain, switch using the
+                        network selector at the top before proceeding.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
                 <p className="text-gray-300">
                   Visit{" "}
                   <a
