From a29de454130437088371d1be8085ba750ee7a46f Mon Sep 17 00:00:00 2001
From: manu jasan <manujasan23@gmail.com>
Date: Sat, 24 Aug 2024 18:19:35 +0530
Subject: [PATCH 1/2] feat: ability to switch chains in the swap component

---
 src/components/Swap/Layout.tsx | 19 ++++++++-----------
 src/components/Swap/index.tsx  | 10 +++++++++-
 src/wagmi.ts                   | 16 ++++++++++++++--
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/Swap/Layout.tsx b/src/components/Swap/Layout.tsx
index 9f2eb9a..e5e8a3f 100644
--- a/src/components/Swap/Layout.tsx
+++ b/src/components/Swap/Layout.tsx
@@ -62,6 +62,8 @@ interface SwapLayoutProps {
   sendDisabled: boolean;
   isSending: boolean;
   sendButtonText: string;
+  switchToRightChain: () => any;
+  isSwitchingChainsPending: boolean;
 }
 
 const SwapLayout: React.FC<SwapLayoutProps> = ({
@@ -93,6 +95,8 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
   sendDisabled,
   isSending,
   sendButtonText,
+  switchToRightChain,
+  isSwitchingChainsPending,
 }) => {
   const [sourceTokenOpen, setSourceTokenOpen] = useState(false);
   const [destinationTokenOpen, setDestinationTokenOpen] = useState(false);
@@ -366,19 +370,12 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
               </Button>
             </div>
           ) : (
-            <Button
-              variant="outline"
-              disabled={true}
-              // disabled={
-              //   isLoading && pendingChainId === sourceTokenSelected.chain_id
-              // }
-            >
-              {/* {isLoading && pendingChainId === sourceTokenSelected.chain_id ? (
+            <Button variant="outline" onClick={switchToRightChain}>
+              {isSwitchingChainsPending ? (
                 <Loader2 className="h-4 w-4 mr-2 animate-spin" />
               ) : (
-                <RefreshCcw className="h-4 w-4 mr-2" />
-              )} */}
-              Switch Network
+                "Switch Network"
+              )}
             </Button>
           )}
         </div>
diff --git a/src/components/Swap/index.tsx b/src/components/Swap/index.tsx
index e02f445..ab99d1c 100644
--- a/src/components/Swap/index.tsx
+++ b/src/components/Swap/index.tsx
@@ -12,7 +12,7 @@ import { computeSendType, sendTypeDetails } from "./hooks/computeSendType";
 import useSwapErrors from "./hooks/useSwapErrors";
 import useTokenSelection from "./hooks/useTokenSelection";
 import { formatAddress } from "@/lib/utils";
-import { useAccount } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
 import { useZetaChainClient } from "@/providers/UniversalKitProvider";
 import { useBitcoinWallet } from "@/index";
 
@@ -30,6 +30,7 @@ export const Swap: React.FC<SwapProps> = ({
   config,
 }) => {
   const { address, chainId } = useAccount();
+  const { switchChain, isPending: isSwitchingChainsPending } = useSwitchChain();
   const { address: bitcoin } = useBitcoinWallet();
   const client = useZetaChainClient();
 
@@ -80,6 +81,11 @@ export const Swap: React.FC<SwapProps> = ({
     client
   );
 
+  const switchToRightChain = () => {
+    sourceTokenSelected &&
+      switchChain({ chainId: Number(sourceTokenSelected.chain_id) });
+  };
+
   const { isAmountGTFee, isAmountLTBalance } = useAmountValidation(
     sourceTokenSelected,
     destinationTokenSelected,
@@ -195,6 +201,8 @@ export const Swap: React.FC<SwapProps> = ({
         sendDisabled={sendDisabled}
         isSending={isSending}
         sendButtonText={sendButtonText}
+        switchToRightChain={switchToRightChain}
+        isSwitchingChainsPending={isSwitchingChainsPending}
       />
     </div>
   );
diff --git a/src/wagmi.ts b/src/wagmi.ts
index 4de3975..2eabb97 100644
--- a/src/wagmi.ts
+++ b/src/wagmi.ts
@@ -1,9 +1,21 @@
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
-import { bscTestnet, sepolia, zetachainAthensTestnet } from "wagmi/chains";
+import {
+  bscTestnet,
+  sepolia,
+  zetachainAthensTestnet,
+  baseSepolia,
+  polygonAmoy,
+} from "wagmi/chains";
 
 export const config = getDefaultConfig({
   appName: "RainbowKit demo",
   projectId: "YOUR_PROJECT_ID",
-  chains: [sepolia, bscTestnet, zetachainAthensTestnet],
+  chains: [
+    sepolia,
+    bscTestnet,
+    zetachainAthensTestnet,
+    baseSepolia,
+    polygonAmoy,
+  ],
   ssr: false,
 });

From 39c787765c86888ca404bb8c9e0c27fbf496cb8a Mon Sep 17 00:00:00 2001
From: manu jasan <manujasan23@gmail.com>
Date: Sun, 8 Sep 2024 23:36:04 +0530
Subject: [PATCH 2/2] fix: while switching chains, add chain name to loader and
 disable button

---
 src/components/Swap/Layout.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Swap/Layout.tsx b/src/components/Swap/Layout.tsx
index e5e8a3f..0e53140 100644
--- a/src/components/Swap/Layout.tsx
+++ b/src/components/Swap/Layout.tsx
@@ -370,9 +370,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
               </Button>
             </div>
           ) : (
-            <Button variant="outline" onClick={switchToRightChain}>
+            <Button
+              variant="outline"
+              onClick={switchToRightChain}
+              disabled={isSwitchingChainsPending}
+            >
               {isSwitchingChainsPending ? (
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  <span>Switching to {sourceTokenSelected.chain_name}</span>
+                </>
               ) : (
                 "Switch Network"
               )}