feat: ability to switch chains in the swap component

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);
@@ -368,17 +372,17 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
           ) : (
             <Button
               variant="outline"
-              disabled={true}
-              // disabled={
-              //   isLoading && pendingChainId === sourceTokenSelected.chain_id
-              // }
+              onClick={switchToRightChain}
+              disabled={isSwitchingChainsPending}
             >
-              {/* {isLoading && pendingChainId === sourceTokenSelected.chain_id ? (
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              {isSwitchingChainsPending ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  <span>Switching to {sourceTokenSelected.chain_name}</span>
+                </>
               ) : (
-                <RefreshCcw className="h-4 w-4 mr-2" />
-              )} */}
-              Switch Network
+                "Switch Network"
+              )}
             </Button>
           )}
         </div>

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>
   );

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,
 });