@b3dotfun/sdk 0.0.23 → 0.0.24

package/src/global-account/react/components/SendETHButton/SendETHButton.tsx

@@ -0,0 +1,37 @@
+import { Button, useUnifiedChainSwitchAndExecute } from "@b3dotfun/sdk/global-account/react";
+import type { JSX } from "react";
+import { useCallback } from "react";
+
+interface SendETHButtonProps {
+  chainId: number;
+  to: `0x${string}`;
+  value: bigint;
+  className?: string;
+  children?: string | JSX.Element;
+  onSuccess?: (tx: `0x${string}`) => void;
+  onError?: (error: Error) => void;
+}
+
+export function SendETHButton({ chainId, to, value, className, children, onSuccess, onError }: SendETHButtonProps) {
+  const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+
+  const handleSendETH = useCallback(async () => {
+    try {
+      const tx = await switchChainAndExecute(chainId, { to: to as `0x${string}`, value });
+      if (tx) {
+        onSuccess?.(tx as `0x${string}`);
+      }
+    } catch (error) {
+      onError?.(error as Error);
+      throw error;
+    }
+  }, [switchChainAndExecute, chainId, to, value, onSuccess, onError]);
+
+  const buttonText = isSwitchingOrExecuting ? "Sending..." : String(children);
+
+  return (
+    <Button onClick={handleSendETH} disabled={isSwitchingOrExecuting} className={className}>
+      {buttonText}
+    </Button>
+  );
+}

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -79,17 +79,15 @@ export function SignIn(props: SignInWithB3Props) {
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
         {globalAddress ? (
           <>
-            <MenuButton className="bg-theme-on-surface-2 group flex h-10 items-center gap-1 rounded-xl px-3">
+            <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3">
               {!!wallet.meta?.icon && (
                 <img
                   src={wallet.meta.icon}
                   alt={wallet.meta.icon}
-                  className="bg-theme-primary h-6 w-6 rounded-full object-cover opacity-100"
+                  className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
                 />
               )}
-              <div className="text-body-1m text-theme-secondary">
-                {ensName ? ensName : truncateAddress(globalAddress)}
-              </div>
+              <div className="text-as-primary">{ensName ? ensName : truncateAddress(globalAddress)}</div>
             </MenuButton>
             <Transition
               enter="duration-200 ease-out"
@@ -100,7 +98,7 @@ export function SignIn(props: SignInWithB3Props) {
               leaveTo="scale-95 opacity-0"
             >
               <MenuItems
-                className="b3-root shadow-depth-1 absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
+                className="b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
                 modal={false}
                 // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
                 anchor={isMobile ? "top end" : undefined}
@@ -110,46 +108,47 @@ export function SignIn(props: SignInWithB3Props) {
                     <div
                       className={cn(
                         "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
-                        "hover:bg-theme-on-surface-2",
                       )}
                       onClick={() => handleSetActiveAccount(connectedEOAWallet?.id)}
                     >
                       <div className="flex items-center">
                         <img
-                          className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                          className="bg-b3-react-primary h-16 w-16 rounded-full opacity-100"
                           src={eoaWalletIcon}
                           alt={connectedEOAWallet?.id}
                         />
                         <div className="ml-4 grow">
-                          {ensName && <div className="text-title-1s">{ensName}</div>}
-                          <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
-                          <div className="text-body-1m text-theme-secondary">{walletInfo?.name}</div>
+                          {ensName && <div>{ensName}</div>}
+                          <div>{truncateAddress(globalAddress)}</div>
+                          <div>{walletInfo?.name}</div>
                         </div>
                       </div>
-                      {isActiveEOAWallet && <Icon className="fill-theme-primary" name="check" />}
+                      {isActiveEOAWallet && <Icon className="fill-b3-react-primary" name="check" />}
                     </div>
                   ) : (
                     connectedSmartWallet && (
                       <div
                         className={cn(
                           "mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3",
-                          isActiveSmartWallet ? "bg-theme-n-8" : "bg-b3-react-background hover:bg-theme-on-surface-2",
+                          isActiveSmartWallet
+                            ? "bg-b3-react-background"
+                            : "bg-b3-react-background hover:bg-b3-react-background",
                         )}
                         onClick={() => handleSetActiveAccount(connectedSmartWallet?.id)}
                       >
                         <div className="flex items-center">
                           <img
-                            className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                            className="bg-b3-react-primary h-16 w-16 rounded-full opacity-100"
                             src={smartWalletIcon}
                             alt={connectedSmartWallet?.id}
                           />
-                          <div className="pl-4.5 grow">
-                            {ensName && <div className="text-title-1s">{ensName}</div>}
-                            <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
-                            <div className="text-body-1m text-theme-secondary">Smart wallet</div>
+                          <div className="grow pl-4">
+                            {ensName && <div>{ensName}</div>}
+                            <div>{truncateAddress(globalAddress)}</div>
+                            <div>Smart wallet</div>
                           </div>
                         </div>
-                        {isActiveSmartWallet && <Icon className="fill-theme-primary" name="check" />}
+                        {isActiveSmartWallet && <Icon className="fill-b3-react-primary" name="check" />}
                       </div>
                     )
                   )}
@@ -159,12 +158,12 @@ export function SignIn(props: SignInWithB3Props) {
                   </div>
 
                   <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
-                    <div className="hover:bg-theme-on-surface-2 group flex h-12 items-center rounded-xl px-4 transition-colors">
+                    <div className="hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors">
                       <Icon
-                        className="fill-theme-secondary group-hover:fill-theme-primary mr-4 shrink-0 transition-colors"
+                        className="fill-b3-react-background group-hover:fill-b3-react-primary mr-4 shrink-0 transition-colors"
                         name="logout"
                       />
-                      <div className="text-base-1s text-theme-secondary group-hover:text-theme-primary mr-auto transition-colors">
+                      <div className="text-b3-react-background group-hover:text-b3-react-primary mr-auto transition-colors">
                         Disconnect
                       </div>
                     </div>

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -196,14 +196,14 @@ export function SignInWithB3Flow({
       debug("Authenticating with B3 via SIWE");
       setIsConnected(true);
       if (loginWithSiwe) {
-        debug("@@setIsAuthenticating:true:1");
+        debug("setIsAuthenticating:true:1");
         setIsAuthenticating(true);
         const userAuth = await authenticate(account, partnerId);
         setUser(userAuth.user);
       }
       debug("handleLoginSuccess:account", account);
       onLoginSuccess?.(account);
-      debug("@@setIsAuthenticating:false:1");
+      debug("setIsAuthenticating:false:1");
       setIsAuthenticating(false);
     },
     [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected],

package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -46,7 +46,7 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
         await logout();
         setIsAuthenticated(false);
       } finally {
-        debug("@@setIsAuthenticating:false:7");
+        debug("setIsAuthenticating:false:7");
         setIsAuthenticating(false);
       }
     }

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -114,7 +114,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
         onConnect={async wallet => {
           try {
             setIsAuthenticating(true);
-            debug("@@setIsAuthenticating:true:6");
+            debug("setIsAuthenticating:true:6");
 
             const account = wallet.getAccount();
             if (!account) throw new Error("No account found");
@@ -128,7 +128,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
             await logout();
             setIsAuthenticated(false);
           } finally {
-            debug("@@setIsAuthenticating:false:6");
+            debug("setIsAuthenticating:false:6");
             setIsAuthenticating(false);
           }
         }}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -53,7 +53,7 @@ export function LoginStepCustom({
   const handleConnect = async (strategy: AllowedStrategy) => {
     try {
       setIsLoading(true);
-      debug("@@setIsAuthenticating:true:3");
+      debug("setIsAuthenticating:true:3");
       setIsAuthenticating(true);
       const options = getConnectOptionsFromStrategy(strategy);
       let connectResult: Wallet | null;
@@ -86,7 +86,7 @@ export function LoginStepCustom({
       setIsAuthenticated(false);
     } finally {
       setIsLoading(false);
-      debug("@@setIsAuthenticating:false:3");
+      debug("setIsAuthenticating:false:3");
       setIsAuthenticating(false);
     }
   };

package/src/global-account/react/components/index.ts

@@ -29,6 +29,12 @@ export { AccountAssets } from "./AccountAssets/AccountAssets";
 // MintButton Components
 export { MintButton } from "./MintButton/MintButton";
 
+// SendETHButton Components
+export { SendETHButton } from "./SendETHButton/SendETHButton";
+
+// SendERC20Button Components
+export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
+
 // Transak Components
 export { TransakModal } from "./Transak/TransakModal";
 

package/src/global-account/react/components/ui/scroll-area.tsx

@@ -26,8 +26,8 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
       className,
     )}
     {...props}

package/src/global-account/react/components/ui/tooltip.tsx

@@ -14,7 +14,7 @@ const TooltipTrigger: React.ForwardRefExoticComponent<
 > = TooltipPrimitive.Trigger;
 
 const TooltipContent: React.ForwardRefExoticComponent<
-  Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>
+  TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>
 > = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>

package/src/global-account/react/hooks/index.ts

@@ -6,7 +6,7 @@ export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
 export { useBestTransactionPath } from "./useBestTransactionPath";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
-export { useClaim } from "./useClaim";
+export * from "./useClaim";
 export { useConnect } from "./useConnect";
 export { useExchangeRate } from "./useExchangeRate";
 export { useGetAllTWSigners, type TWSignerWithMetadata } from "./useGetAllTWSigners";
@@ -38,4 +38,5 @@ export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
+export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -1,10 +1,13 @@
 import { useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect, useMemo, useState } from "react";
 import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 import { socialIcons } from "thirdweb/wallets/in-app";
 
+const debug = debugB3React("useAccountWallet");
+
 function useLastAuthProvider(): string | null {
   const [lastAuthProvider, setLastAuthProvider] = useState<string | null>(null);
 
@@ -43,7 +46,6 @@ export function useAccountWallet(): {
   const { account } = useB3();
 
   const activeWallet = useActiveWallet();
-
   const connectedWallets = useConnectedWallets();
 
   const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
@@ -51,6 +53,13 @@ export function useAccountWallet(): {
   const isActiveSmartWallet = activeWallet?.id === connectedSmartWallet?.id;
   const isActiveEOAWallet = activeWallet?.id === connectedEOAWallet?.id;
 
+  debug("activeWallet", activeWallet);
+  debug("connectedWallets", connectedWallets);
+  debug("connectedSmartWallet", connectedSmartWallet);
+  debug("connectedEOAWallet", connectedEOAWallet);
+  debug("isActiveSmartWallet", isActiveSmartWallet);
+  debug("isActiveEOAWallet", isActiveEOAWallet);
+
   const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
 
   // If not EOA sign in, then we need to show the smart wallet icon

package/src/global-account/react/hooks/useAuthentication.ts

@@ -44,7 +44,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           return;
         }
-        debug("@@setIsAuthenticating:true:4");
+        debug("setIsAuthenticating:true:4");
         setIsAuthenticating(true);
         const account = await wallet.getAccount();
         if (!account) {
@@ -68,7 +68,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
       } catch (error) {
         debug("Auto-connect authentication failed", { error });
         setIsAuthenticated(false);
-        debug("@@setIsAuthenticating:false:4");
+        debug("setIsAuthenticating:false:4");
         setUser();
       }
     },
@@ -82,13 +82,13 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
       // Only set isAuthenticating to false if we're not authenticated
       // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
       const timeout = setTimeout(() => {
-        debug("@@setIsAuthenticating:false:5a");
+        debug("setIsAuthenticating:false:5a");
         setIsAuthenticating(false);
         setIsConnecting(false);
       }, 100); // Add a small delay to prevent quick flickers
       return () => clearTimeout(timeout);
     } else {
-      debug("@@setIsAuthenticating:false:5b");
+      debug("setIsAuthenticating:false:5b");
       setIsAuthenticating(false);
       setIsConnecting(false);
     }

package/src/global-account/react/hooks/useChainSwitchWithAction.ts

@@ -3,7 +3,6 @@ import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported
 import invariant from "invariant";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
-import { WalletClient } from "viem";
 import { useSwitchChain, useWalletClient } from "wagmi";
 
 export function useChainSwitchWithAction() {
@@ -24,7 +23,7 @@ export function useChainSwitchWithAction() {
   }, []);
 
   const switchChainAndExecute = useCallback(
-    async (targetChainId: number, action: (client: WalletClient) => Promise<void>) => {
+    async (targetChainId: number, action: () => Promise<void>) => {
       if (!walletClient) {
         toast.error("Please connect your wallet");
         return;
@@ -34,7 +33,7 @@ export function useChainSwitchWithAction() {
       const onCorrectChain = providerId === targetChainId;
 
       if (onCorrectChain) {
-        return run(() => action(walletClient));
+        return run(() => action());
       }
 
       toast.info(`Switching to ${getChainName(targetChainId)}…`);
@@ -62,7 +61,7 @@ export function useChainSwitchWithAction() {
             },
           },
         });
-        await run(() => action(walletClient));
+        await run(() => action());
       } catch (e: any) {
         if (e?.code === -32603 || e?.message?.includes("f is not a function")) {
           // This is a workaround for a bug in the wallet provider.

package/src/global-account/react/hooks/useFirstEOA.tsx

@@ -1,8 +1,11 @@
 import { useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect, useState } from "react";
 import { useConnectedWallets, useWalletInfo } from "thirdweb/react";
 import { Wallet } from "thirdweb/wallets";
 
+const debug = debugB3React("useFirstEOA");
+
 export default function useFirstEOA() {
   const wallets = useConnectedWallets();
   const isConnected = useAuthStore(state => state.isConnected);
@@ -10,26 +13,26 @@ export default function useFirstEOA() {
   const [address, setAddress] = useState<string | undefined>(undefined);
   const walletInfo = useWalletInfo(firstEOA?.id);
 
-  console.log("@@wallets", wallets);
-  console.log("@@wallets:isConnected", isConnected);
+  debug("Wallets", wallets);
+  debug("Is connected", isConnected);
 
   useEffect(() => {
     const autoSelectFirstEOAWallet = async () => {
       // Only proceed if auto-selection is enabled and user is authenticated
       if (!isConnected) {
-        console.log("@@wallets:not connected");
+        debug("Not connected");
         return;
       }
 
       // Find the first EOA wallet (excluding ecosystem wallets)
       const isEOAWallet = (wallet: Wallet) => !wallet.id.startsWith("ecosystem.");
       const firstEOAWallet = wallets.find(isEOAWallet);
-      console.log("@@wallets:firstEOAWallet", firstEOAWallet);
+      debug("First EOA wallet", firstEOAWallet);
 
-      const account = await firstEOAWallet?.getAccount();
-      console.log("@@wallets:account", account);
+      const account = firstEOAWallet?.getAccount();
+      debug("Account", account);
       setFirstEOA(firstEOAWallet);
-      console.log("@@wallets:address", account?.address);
+      debug("Address", account?.address);
       setAddress(account?.address);
     };
 

package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts

@@ -0,0 +1,186 @@
+import { getChainName, getNativeToken } from "@b3dotfun/sdk/anyspend";
+import app from "@b3dotfun/sdk/global-account/app";
+import { getThirdwebChain, supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import invariant from "invariant";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { prepareTransaction, sendTransaction as twSendTransaction } from "thirdweb";
+import { useSwitchChain, useWalletClient } from "wagmi";
+import { useB3 } from "../components";
+import { useAccountWallet } from "./useAccountWallet";
+
+export interface UnifiedTransactionParams {
+  to: string;
+  data?: string;
+  value: bigint;
+}
+
+export function useUnifiedChainSwitchAndExecute() {
+  const { data: walletClient } = useWalletClient();
+  const { switchChainAsync } = useSwitchChain();
+  const [isSwitchingOrExecuting, setIsSwitchingOrExecuting] = useState(false);
+
+  const { isActiveSmartWallet, isActiveEOAWallet } = useAccountWallet();
+  const { account: aaAccount } = useB3();
+
+  // Handle EOA wallet chain switch and execute transaction
+  const handleEOASwitchChainAndSendTransaction = useCallback(
+    async (targetChainId: number, params: UnifiedTransactionParams): Promise<string | undefined> => {
+      if (!walletClient) {
+        toast.error("Please connect your wallet");
+        return;
+      }
+
+      const providerId = walletClient.chain.id;
+      const onCorrectChain = providerId === targetChainId;
+
+      // Helper function to execute the transaction
+      const executeTransaction = async (): Promise<string> => {
+        const signer = walletClient.account;
+        if (!signer) {
+          throw new Error("No account connected");
+        }
+
+        const hash = await walletClient.sendTransaction({
+          account: signer,
+          chain: walletClient.chain,
+          to: params.to,
+          data: params.data as `0x${string}`,
+          value: params.value,
+        });
+
+        toast.success(`Transaction sent: ${hash.slice(0, 10)}...`);
+        return hash;
+      };
+
+      try {
+        setIsSwitchingOrExecuting(true);
+
+        if (onCorrectChain) {
+          return await executeTransaction();
+        }
+
+        toast.info(`Switching to ${getChainName(targetChainId)}…`);
+
+        const targetChain = supportedChains.find(chain => chain.id === targetChainId);
+        if (!targetChain) {
+          toast.error(`Chain ${targetChainId} is not supported`);
+          return;
+        }
+
+        const blockExplorerUrl = targetChain.blockExplorers?.default.url;
+        invariant(blockExplorerUrl, "Block explorer URL is required");
+        const nativeCurrency = getNativeToken(targetChainId);
+
+        await switchChainAsync({
+          chainId: targetChainId,
+          addEthereumChainParameter: {
+            chainName: targetChain.name,
+            rpcUrls: [targetChain.rpcUrls.default.http[0]],
+            blockExplorerUrls: [blockExplorerUrl],
+            nativeCurrency: {
+              name: nativeCurrency.name,
+              symbol: nativeCurrency.symbol,
+              decimals: nativeCurrency.decimals,
+            },
+          },
+        });
+
+        return await executeTransaction();
+      } catch (e: any) {
+        if (e?.code === -32603 || e?.message?.includes("f is not a function")) {
+          // This is a workaround for a bug in the wallet provider.
+          toast(`Switched to ${getChainName(targetChainId)}. Executing…`);
+          return await handleEOASwitchChainAndSendTransaction(targetChainId, params);
+        } else {
+          console.error(e);
+          toast.error(e?.message ?? "Unexpected error");
+          return undefined;
+        }
+      } finally {
+        setIsSwitchingOrExecuting(false);
+      }
+    },
+    [walletClient, switchChainAsync],
+  );
+
+  // Handle AA wallet transaction (no chain switch needed for AA)
+  const handleAASendTransaction = useCallback(
+    async (targetChainId: number, params: UnifiedTransactionParams): Promise<string | undefined> => {
+      if (!aaAccount) {
+        toast.error("Smart wallet not connected");
+        return;
+      }
+
+      try {
+        setIsSwitchingOrExecuting(true);
+
+        const chain = getThirdwebChain(targetChainId);
+
+        toast.info("Preparing transaction…");
+        const transaction = prepareTransaction({
+          client,
+          chain,
+          to: params.to,
+          data: params.data as `0x${string}`,
+          value: params.value,
+        });
+
+        // Check if we can use global-accounts-intents, if yes, create an intent.
+        try {
+          await app.service("global-accounts-intents").create({
+            partnerId: String(
+              process.env.PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID || process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID,
+            ),
+            chainId: targetChainId,
+            to: params.to,
+            data: params.data || "0x",
+            value: params.value.toString(),
+          });
+        } catch (err: any) {
+          console.error(err);
+        }
+
+        toast.info("Sending transaction…");
+        const sendTxResponse = await twSendTransaction({
+          account: aaAccount,
+          transaction,
+        });
+
+        toast.success("Transaction sent successfully");
+        return sendTxResponse.transactionHash;
+      } catch (err: any) {
+        console.error(err);
+        toast.error(err?.message ?? "Transaction failed");
+        return undefined;
+      } finally {
+        setIsSwitchingOrExecuting(false);
+      }
+    },
+    [aaAccount],
+  );
+
+  // Unified switch chain and execute function
+  const switchChainAndExecute = useCallback(
+    async (targetChainId: number, params: UnifiedTransactionParams): Promise<string | undefined> => {
+      // Check which wallet type is active
+      if (isActiveSmartWallet) {
+        return handleAASendTransaction(targetChainId, params);
+      } else if (isActiveEOAWallet) {
+        return handleEOASwitchChainAndSendTransaction(targetChainId, params);
+      } else {
+        toast.error("No wallet connected");
+        return undefined;
+      }
+    },
+    [isActiveSmartWallet, isActiveEOAWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction],
+  );
+
+  return {
+    switchChainAndExecute,
+    isSwitchingOrExecuting,
+    isActiveSmartWallet,
+    isActiveEOAWallet,
+  };
+}

package/src/shared/constants/chains/supported.ts

@@ -66,3 +66,14 @@ export const b3Testnet = _b3Testnet;
 const _baseMainnet = supportedChains.find(chain => chain.id === 8453);
 invariant(_baseMainnet, "Base mainnet chain not found in supported chains");
 export const baseMainnet = _baseMainnet;
+
+/**
+ * Get a Thirdweb chain by chain ID from supportedChainsTW
+ */
+export function getThirdwebChain(chainId: number): ThirdwebChain {
+  const chain = supportedChainsTW.find(c => c.id === chainId);
+  if (!chain) {
+    throw new Error(`Chain ${chainId} is not supported`);
+  }
+  return chain;
+}

package/src/shared/generated/chain-networks.json

@@ -127,7 +127,7 @@
     "name": "Ethereum",
     "rpcUrls": {
       "default": {
-        "http": "https://cloudflare-eth.com",
+        "http": "https://eth.llamarpc.com",
         "ws": "wss://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"
       },
       "backups": []

package/src/styles/index.css

@@ -299,3 +299,30 @@ Dark version
   letter-spacing: 0.05em;
   font-family: "SFCompact", sans-serif;
 }
+
+/* Radix UI Accordion animations */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}