@b3dotfun/sdk 0.0.40-alpha.10 → 0.0.40-alpha.12

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -14,6 +14,7 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -224,6 +225,7 @@ function AnySpendDepositHypeInner({
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
                 anyspendQuote={anyspendQuote}
+                onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               />
             </motion.div>
           )}
@@ -264,6 +266,7 @@ function AnySpendDepositHypeInner({
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           )}
         </div>
@@ -449,6 +452,13 @@ function AnySpendDepositHypeInner({
     />
   );
 
+  const pointsDetailView = (
+    <PointsDetailPanel
+      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  );
+
   // If showing token selection, render with panel transitions
   return (
     <StyleRoot>
@@ -498,6 +508,9 @@ function AnySpendDepositHypeInner({
             <div key="loading-view" className={cn(mode === "page" && "p-6")}>
               {loadingView}
             </div>,
+            <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
+              {pointsDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

package/src/anyspend/react/components/common/ConnectWalletPayment.tsx

@@ -2,12 +2,11 @@
 
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { ShinyButton, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { ShinyButton, useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
@@ -41,7 +40,11 @@ export default function ConnectWalletPayment({
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
-  const { address: connectedAddress } = useAccount();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+  const connectedEvmAddress =
+    cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
 
   const srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
@@ -97,7 +100,7 @@ export default function ConnectWalletPayment({
           Connected to:{" "}
           {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
             ? centerTruncate(phantomWalletAddress, 6)
-            : centerTruncate(connectedAddress || "")}
+            : centerTruncate(connectedEvmAddress || "")}
         </span>
 
         <PaymentMethodSwitch currentMethod={cryptoPaymentMethod} onMethodChange={onPaymentMethodChange} />

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -3,11 +3,14 @@
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
+import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 
 export enum CryptoPaymentMethodType {
@@ -38,13 +41,69 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
-  const { address, isConnected, connector } = useAccount();
+  const {
+    wallet: globalWallet,
+    connectedEOAWallet: connectedEOAWallet,
+    connectedSmartWallet: connectedSmartWallet,
+  } = useAccountWallet();
+  const { connector, address, isConnected: wagmiWalletIsConnected } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
   const [showWalletModal, setShowWalletModal] = useState(false);
 
+  const setActiveWallet = useSetActiveWallet();
+  const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
+
+  const isConnected = !!connectedEOAWallet;
+  const globalAddress = connectedSmartWallet?.getAccount()?.address;
+
+  // Helper function to check if two addresses are the same
+  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
+    if (!addr1 || !addr2) return false;
+    return addr1.toLowerCase() === addr2.toLowerCase();
+  };
+
+  // Check if connectedEOAWallet and wagmi wallet represent the same wallet
+  const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
+  const wagmiAddress = address;
+  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
+
+  // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
+  const shouldShowConnectedEOA = !!connectedEOAWallet;
+  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
+    const walletMap: Record<string, WalletId> = {
+      MetaMask: "io.metamask",
+      "Coinbase Wallet": "com.coinbase.wallet",
+      Rainbow: "me.rainbow",
+      WalletConnect: "walletConnect",
+      Phantom: "app.phantom",
+    };
+    return walletMap[connectorName] || null;
+  };
+
+  // Create thirdweb wallet from wagmi connector
+  const createThirdwebWalletFromConnector = async (connectorName: string) => {
+    const walletId = getThirdwebWalletId(connectorName);
+    if (!walletId) {
+      console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
+      return null;
+    }
+
+    try {
+      const thirdwebWallet = createWallet(walletId);
+      // Connect the wallet to sync with the existing wagmi connection
+      await thirdwebWallet.connect({ client });
+      return thirdwebWallet;
+    } catch (error) {
+      console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
+      return null;
+    }
+  };
+
   // Define available wallet connectors
   const availableConnectors = connectors.filter(connector =>
     ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
@@ -202,16 +261,77 @@ export function CryptoPaymentMethod({
           </button>
 
           {/* Installed Wallets Section */}
-          {(isConnected || globalAddress) && (
+          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
                 {/* Current Connected Wallet */}
-                {isConnected && (
+
+                {shouldShowConnectedEOA && (
                   <button
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      setActiveWallet(connectedEOAWallet);
+                      toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                    }}
+                    className={cn(
+                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                        ? "connected-wallet border-as-brand bg-as-brand/5"
+                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
+                          <Wallet className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">
+                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
+                          </span>
+                          <span className="text-as-primary/60 text-sm">
+                            {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                        <button
+                          onClick={e => {
+                            e.stopPropagation();
+                            disconnect();
+                            toast.success("Wallet disconnected");
+                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            }
+                          }}
+                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </button>
+                )}
+
+                {shouldShowWagmiWallet && (
+                  <button
+                    onClick={async () => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+
+                      // Create thirdweb wallet from wagmi connector
+                      if (connector?.name) {
+                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
+                        if (thirdwebWallet) {
+                          setActiveWallet(thirdwebWallet);
+                        }
+                      }
+
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -28,6 +28,8 @@ interface CryptoReceiveSectionProps {
   // custom dst token data
   dstTokenSymbol?: string;
   dstTokenLogoURI?: string;
+  // Points navigation
+  onShowPointsDetail?: () => void;
 }
 
 export function CryptoReceiveSection({
@@ -45,6 +47,7 @@ export function CryptoReceiveSection({
   anyspendQuote,
   dstTokenSymbol,
   dstTokenLogoURI,
+  onShowPointsDetail,
 }: CryptoReceiveSectionProps) {
   const featureFlags = useFeatureFlags();
 
@@ -103,7 +106,7 @@ export function CryptoReceiveSection({
           setToken={setSelectedDstToken || (() => {})}
         />
       )}
-      <div className="text-as-primary/50 flex h-5 items-center justify-between text-sm">
+      <div className="text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm">
         <div className="flex items-center gap-2">
           {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
             style: "currency",
@@ -161,9 +164,14 @@ export function CryptoReceiveSection({
             })()}
         </div>
         {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
-          <div key={`points-${anyspendQuote.data.pointsAmount}`} className="flex items-center gap-1">
-            <span className="text-as-brand font-medium">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
-          </div>
+          <button
+            key={`points-${anyspendQuote.data.pointsAmount}`}
+            className="bg-as-brand hover:scale-102 active:scale-98 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+            onClick={() => onShowPointsDetail?.()}
+          >
+            <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+            <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
+          </button>
         )}
       </div>
     </motion.div>

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -223,10 +223,9 @@ export const OrderDetails = memo(function OrderDetails({
   // Read crypto payment method from URL parameters
   const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
   const effectiveCryptoPaymentMethod =
-    cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
-
-  // Use selectedCryptoPaymentMethod for OrderStatus if provided, otherwise fall back to effective method
-  const orderStatusPaymentMethod = selectedCryptoPaymentMethod || effectiveCryptoPaymentMethod;
+    selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE
+      ? selectedCryptoPaymentMethod
+      : cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
@@ -575,7 +574,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (refundTxs.length > 0) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -653,7 +652,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (executeTx) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -780,7 +779,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -909,7 +908,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (depositTxs?.length || waitingForDeposit) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -1008,7 +1007,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   return (
     <>
-      <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+      <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
       {statusDisplay === "processing" && (
         <>
           {order.onrampMetadata ? (

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -28,6 +28,7 @@ export function PanelOnramp({
   dstTokenSymbol,
   hideDstToken = false,
   anyspendQuote,
+  onShowPointsDetail,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -44,6 +45,7 @@ export function PanelOnramp({
   dstTokenSymbol?: string;
   hideDstToken?: boolean;
   anyspendQuote?: GetQuoteResponse;
+  onShowPointsDetail?: () => void;
 }) {
   const featureFlags = useFeatureFlags();
   // Get geo-based onramp options to access fee information
@@ -258,9 +260,14 @@ export function PanelOnramp({
                 })()}
               </span>
               {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
-                <span key={`points-${anyspendQuote.data.pointsAmount}`} className="text-as-brand text-sm font-medium">
-                  +{anyspendQuote.data.pointsAmount.toLocaleString()} pts
-                </span>
+                <button
+                  key={`points-${anyspendQuote.data.pointsAmount}`}
+                  className="bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+                  onClick={() => onShowPointsDetail?.()}
+                >
+                  <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+                  <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
+                </button>
               )}
             </div>
             <span className="text-as-primary font-semibold">

package/src/anyspend/react/components/common/PointsDetailPanel.tsx

@@ -0,0 +1,55 @@
+import { Button, ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ArrowDown } from "lucide-react";
+import Link from "next/link";
+
+interface PointsDetailPanelProps {
+  pointsAmount?: number;
+  onBack: () => void;
+}
+
+export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
+  return (
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
+      <div className="flex w-full items-center justify-between">
+        <Button
+          variant="ghost"
+          onClick={onBack}
+          className="text-as-primary/70 hover:text-as-primary flex items-center gap-2"
+        >
+          <ArrowDown className="h-4 w-4 rotate-90" />
+          Back
+        </Button>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 text-center">
+        <h3 className="text-as-primary text-xl font-bold">Earn Points with Every Swap</h3>
+        <p className="text-as-primary/70 text-balance text-sm leading-relaxed">
+          You'll earn <span className="text-as-brand font-semibold">+{pointsAmount.toLocaleString()} points</span>{" "}
+          towards the{" "}
+          <Link href="https://anyspend.com/points" target="_blank" className="text-as-brand underline">
+            next AnySpend airdrop
+          </Link>{" "}
+          when you complete this transaction.
+        </p>
+        <div className="bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left">
+          <h4 className="text-as-primary mb-2 font-semibold">How it works:</h4>
+          <ul className="text-as-primary/70 space-y-1 text-sm">
+            <li>• Points are earned based on transaction volume</li>
+            <li>• Higher volume = more points</li>
+            <li>• Points contribute to future airdrops</li>
+            <li>• Keep swapping to maximize your rewards</li>
+          </ul>
+        </div>
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          onClick={onBack}
+          className={cn("as-main-button !bg-as-brand relative w-full")}
+          textClassName={cn("text-white")}
+        >
+          Back to Swap
+        </ShinyButton>
+      </div>
+    </div>
+  );
+}

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -31,6 +31,7 @@ export enum PanelView {
   RECIPIENT_SELECTION,
   ORDER_DETAILS,
   LOADING,
+  POINTS_DETAIL,
 }
 
 interface UseAnyspendFlowProps {

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

@@ -6,10 +6,11 @@ import invariant from "invariant";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { prepareTransaction, sendTransaction as twSendTransaction } from "thirdweb";
+import { useActiveWallet } from "thirdweb/react";
+import { isAddress } from "viem";
 import { useSwitchChain, useWalletClient } from "wagmi";
 import { useB3 } from "../components";
 import { useAccountWallet } from "./useAccountWallet";
-import { isAddress } from "viem";
 
 export interface UnifiedTransactionParams {
   to: string;
@@ -29,46 +30,53 @@ export function useUnifiedChainSwitchAndExecute() {
   const { data: walletClient } = useWalletClient();
   const { switchChainAsync } = useSwitchChain();
   const [isSwitchingOrExecuting, setIsSwitchingOrExecuting] = useState(false);
+  const activeWallet = useActiveWallet();
 
-  const { isActiveSmartWallet, isActiveEOAWallet } = useAccountWallet();
+  const { isActiveSmartWallet, isActiveEOAWallet, connectedEOAWallet } = 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) {
+      if (!connectedEOAWallet) {
         toast.error("Please connect your wallet");
         return;
       }
 
-      const providerId = walletClient.chain.id;
-      const onCorrectChain = providerId === targetChainId;
+      // Get target chain configuration once
+      const targetChain = supportedChains.find(chain => chain.id === targetChainId);
+      if (!targetChain) {
+        toast.error(`Chain ${targetChainId} is not supported`);
+        return;
+      }
+
+      const currentChainId = activeWallet?.getChain()?.id;
+      const onCorrectChain = currentChainId === targetChainId;
 
       // Helper function to execute the transaction
       const executeTransaction = async (): Promise<string> => {
-        const signer = walletClient.account;
+        const signer = activeWallet?.getAccount();
         if (!signer) {
           throw new Error("No account connected");
         }
 
-        // Get the target chain configuration instead of using potentially stale walletClient.chain
-        const targetChain = supportedChains.find(chain => chain.id === targetChainId);
-        if (!targetChain) {
-          throw new Error(`Chain ${targetChainId} is not supported`);
+        // Coinbase Smart Wallet specific chain switching (different behavior from other wallets)
+        const walletChain = connectedEOAWallet.getChain();
+        if (walletChain?.id !== targetChainId) {
+          activeWallet?.switchChain(getThirdwebChain(targetChainId));
         }
 
         invariant(isAddress(params.to), "params.to is not a valid address");
 
-        const hash = await walletClient.sendTransaction({
-          account: signer,
-          chain: targetChain,
+        const result = await signer.sendTransaction({
+          chainId: targetChainId,
           to: params.to,
           data: params.data as `0x${string}`,
           value: params.value,
         });
 
-        toast.success(`Transaction sent: ${hash.slice(0, 10)}...`);
-        return hash;
+        toast.success(`Transaction sent: ${result.transactionHash.slice(0, 10)}...`);
+        return result.transactionHash;
       };
 
       try {
@@ -80,12 +88,6 @@ export function useUnifiedChainSwitchAndExecute() {
 
         const switchingToastId = 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);