chores:cleanup and refactor

advanced/dapps/chain-abstraction-demo/app/hooks/useGiftDonut.tsx

@@ -1,16 +1,13 @@
 "use client";
 import { config } from "@/config";
-import { tokenAddresses, usdcTokenAddresses } from "@/consts/tokens";
+import { tokenAddresses } from "@/consts/tokens";
 import { Network, Token } from "@/data/EIP155Data";
-import { useAppKitAccount, useAppKitNetwork } from "@reown/appkit/react";
+import {  useAppKitNetwork } from "@reown/appkit/react";
 import { erc20Abi, Hex } from "viem";
-import { useAccount, useSwitchChain } from "wagmi";
 import { getAccount, getWalletClient } from "wagmi/actions";
 
 export default function useGiftDonut() {
-  const { status } = useAccount();
-  const { address, status: walletStatus } = useAppKitAccount();
-  const { chains, switchChain } = useSwitchChain();
+  const { chainId, switchNetwork } = useAppKitNetwork();
 
   const giftDonutAsync = async (
     to: Hex,
@@ -33,9 +30,14 @@ export default function useGiftDonut() {
 
       if (connectedChainId !== network.chainId) {
         console.log("need switching network");
-        switchChain({ chainId: network.chainId });
+        switchNetwork(network.chain);
         console.log("switched network");
       }
+      // wait for network switch
+      while (chainId !== network.chainId)
+      {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+      }
 
       const tokenName = token.name;
       const tokenChainMapping = tokenAddresses[tokenName];

advanced/dapps/chain-abstraction-demo/components/ConnectWalletButton.tsx

@@ -8,7 +8,8 @@ export function ConnectWalletButton() {
   return (
     <Button
       type="button"
-      className="w-full bg-gray-700 hover:bg-gray-600 text-white"
+      style={{background: "var(--foreground-foreground-secondary, hsla(0, 0%, 16%, 1))" }}
+      className="w-full text-primary rounded-full"
       size="lg"
       onClick={() => open({ view: "Connect" })}
     >

advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutReceipentAddressView.tsx

@@ -48,7 +48,9 @@ function GiftDonutForm({
     const to = recipientAddress as `0x${string}`;
     const token = giftDonutModalManager.getToken();
     const network = giftDonutModalManager.getNetwork();
+    onClose()
     giftDonutAsync(to, donutCount, token, network);
+
   };
   return (
     <div

advanced/dapps/chain-abstraction-demo/data/EIP155Data.ts

@@ -1,7 +1,10 @@
+import { AppKitNetwork, arbitrum, base, optimism } from "@reown/appkit/networks";
+
 export interface Network {
   name: string;
   icon: string;
   chainId: number;
+  chain: AppKitNetwork;
 }
 
 export interface Token {
@@ -15,16 +18,19 @@ export const supportedNetworks: Network[] = [
     name: "Arbitrum",
     icon: "/chain-logos/arbitrum.png",
     chainId: 42161,
+    chain:arbitrum
   },
   {
     name: "Base",
     icon: "/chain-logos/base.webp",
     chainId: 8542,
+    chain:base
   },
   {
     name: "Optimism",
     icon: "/chain-logos/eip155-10.png",
     chainId: 10,
+    chain:optimism
   },
 ];
 

advanced/dapps/chain-abstraction-demo/package.json

@@ -20,7 +20,6 @@
     "@reown/appkit": "1.6.2",
     "@reown/appkit-adapter-wagmi": "1.6.2",
     "@tanstack/react-query": "5.59.19",
-    "@web3modal/wagmi": "5.1.11",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "0.439.0",
@@ -47,4 +46,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}