@b3dotfun/sdk 0.0.62-alpha.2 → 0.0.62-alpha.3

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

@@ -31,22 +31,17 @@ import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 
-import {
-  createAssociatedTokenAccountInstruction,
-  createTransferCheckedInstruction,
-  getAssociatedTokenAddressSync,
-} from "@solana/spl-token";
-import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { CheckIcon, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw } from "lucide-react";
 import { motion } from "motion/react";
 import { QRCodeSVG } from "qrcode.react";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
 import { toast } from "sonner";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
+import { usePhantomTransfer } from "../../hooks/usePhantomTransfer";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
 import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
@@ -250,6 +245,11 @@ export const OrderDetails = memo(function OrderDetails({
   const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } =
     useUnifiedChainSwitchAndExecute();
 
+  // Track if auto-payment was attempted to avoid re-triggering
+  const autoPaymentAttempted = useRef(false);
+  // Track if component is ready for auto-payment (all data loaded)
+  const [isComponentReady, setIsComponentReady] = useState(false);
+
   const roundedUpSrcAmount = useMemo(() => {
     // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
     // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -314,18 +314,25 @@ export const OrderDetails = memo(function OrderDetails({
     }
   }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
 
+  // Use Phantom transfer hook for Solana payments
+  const { initiateTransfer: initiatePhantomTransfer, getConnectedAddress: getPhantomAddress } = usePhantomTransfer();
+
   // Main payment handler that triggers chain switch and payment
-  const handlePayment = async () => {
+  const handlePayment = useCallback(async () => {
     console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
     if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
       // Use the existing depositDeficit calculation to determine amount to send
       const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
-      await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
+      await initiatePhantomTransfer({
+        amountLamports: amountToSend,
+        tokenAddress: order.srcTokenAddress,
+        recipientAddress: order.globalAddress,
+      });
     } else {
       // Use unified payment process for both EOA and AA wallets
       await handleUnifiedPaymentProcess();
     }
-  };
+  }, [order, walletClient?.chain?.id, depositDeficit, handleUnifiedPaymentProcess, initiatePhantomTransfer]);
 
   // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
   const setWaitingForDeposit = useCallback(() => {
@@ -368,17 +375,57 @@ export const OrderDetails = memo(function OrderDetails({
     }
   }, [setWaitingForDeposit, txSuccess]);
 
-  const isPhantomMobile = useMemo(() => navigator.userAgent.includes("Phantom"), []);
-  const isPhantomBrowser = useMemo(() => (window as any).phantom?.solana?.isPhantom, []);
-
   // Get connected Phantom wallet address if available
-  const phantomWalletAddress = useMemo(() => {
-    const phantom = (window as any).phantom?.solana;
-    if (phantom?.isConnected && phantom?.publicKey) {
-      return phantom.publicKey.toString();
+  const phantomWalletAddress = useMemo(() => getPhantomAddress(), [getPhantomAddress]);
+
+  // Calculate status display before using it
+  const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
+
+  // Memoize the payable state calculation to avoid recalculating on every render
+  const isPayableState = useMemo(() => {
+    const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
+
+    return (
+      refundTxs.length === 0 &&
+      !executeTx &&
+      !(relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) &&
+      !depositTxs?.length &&
+      !waitingForDeposit &&
+      statusDisplay === "processing" &&
+      !order.onrampMetadata &&
+      (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+        effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET)
+    );
+  }, [
+    refundTxs.length,
+    executeTx,
+    relayTxs,
+    depositTxs?.length,
+    statusDisplay,
+    order.onrampMetadata,
+    effectiveCryptoPaymentMethod,
+  ]);
+
+  // Mark component as ready once all critical data is available
+  // This ensures we don't trigger payment before the component has fully initialized
+  useEffect(() => {
+    if (!isComponentReady && srcToken && dstToken && statusDisplay) {
+      setIsComponentReady(true);
     }
-    return null;
-  }, []);
+  }, [isComponentReady, srcToken, dstToken, statusDisplay]);
+
+  // Auto-trigger payment when component is ready and order is in payable state
+  // This effect only runs when isPayableState or isComponentReady changes
+  useEffect(() => {
+    // Only trigger payment if:
+    // 1. We haven't attempted payment yet
+    // 2. Component is fully ready (all data loaded)
+    // 3. Order is in a payable state
+    if (!autoPaymentAttempted.current && isComponentReady && isPayableState) {
+      autoPaymentAttempted.current = true;
+      handlePayment();
+    }
+  }, [isPayableState, isComponentReady, handlePayment]);
 
   if (!srcToken || !dstToken) {
     return <div>Loading...</div>;
@@ -398,175 +445,6 @@ export const OrderDetails = memo(function OrderDetails({
     ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
     : undefined;
 
-  const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
-
-  const initiatePhantomTransfer = async (amountLamports: string, tokenAddress: string, recipientAddress: string) => {
-    try {
-      if (!isPhantomBrowser && !isPhantomMobile) {
-        toast.error("Phantom wallet not installed. Please install Phantom wallet to continue.");
-        return;
-      }
-
-      // Step 2: Ensure Phantom is connected/unlocked
-      const phantom = (window as any).phantom?.solana;
-      if (!phantom) {
-        toast.error("Phantom wallet not accessible");
-        return;
-      }
-
-      // Connect and unlock wallet if needed
-      let publicKey;
-      try {
-        const connection = await phantom.connect();
-        publicKey = connection.publicKey;
-      } catch (connectError) {
-        toast.error("Failed to connect to Phantom wallet");
-        return;
-      }
-
-      // Step 3: Create transaction with priority fees
-      const connection = new Connection("https://mainnet.helius-rpc.com/?api-key=efafd9b3-1807-4cf8-8aa4-3d984f56d8fb");
-
-      const fromPubkey = new PublicKey(publicKey.toString());
-      const toPubkey = new PublicKey(recipientAddress);
-      const amount = BigInt(amountLamports);
-
-      // Step 4: Get recent priority fees to determine optimal pricing
-      let priorityFee = 10000; // Default fallback (10,000 micro-lamports)
-      try {
-        const recentFees = await connection.getRecentPrioritizationFees({
-          lockedWritableAccounts: [fromPubkey],
-        });
-
-        if (recentFees && recentFees.length > 0) {
-          // Use 75th percentile of recent fees for good priority
-          const sortedFees = recentFees.map(fee => fee.prioritizationFee).sort((a, b) => a - b);
-          const percentile75Index = Math.floor(sortedFees.length * 0.75);
-          priorityFee = Math.max(sortedFees[percentile75Index] || 10000, 10000);
-        }
-      } catch (feeError) {
-        console.warn("Failed to fetch recent priority fees, using default:", feeError);
-      }
-
-      let transaction: any;
-
-      // Check if this is native SOL transfer
-      if (tokenAddress === "11111111111111111111111111111111") {
-        // Native SOL transfer with priority fees
-        const computeUnitLimit = 1000; // SOL transfer + compute budget instructions need ~600-800 CU
-        const computeUnitPrice = Math.min(priorityFee, 100000); // Cap at 100k micro-lamports for safety
-
-        transaction = new Transaction()
-          .add(
-            // Set compute unit limit first (must come before other instructions)
-            ComputeBudgetProgram.setComputeUnitLimit({
-              units: computeUnitLimit,
-            }),
-          )
-          .add(
-            // Set priority fee
-            ComputeBudgetProgram.setComputeUnitPrice({
-              microLamports: computeUnitPrice,
-            }),
-          )
-          .add(
-            // Actual transfer instruction
-            SystemProgram.transfer({
-              fromPubkey,
-              toPubkey,
-              lamports: Number(amount),
-            }),
-          );
-
-        console.log(`Using priority fee: ${computeUnitPrice} micro-lamports per CU, limit: ${computeUnitLimit} CU`);
-      } else {
-        // SPL Token transfer with priority fees
-        const mintPubkey = new PublicKey(tokenAddress);
-
-        // Get associated token accounts
-        const fromTokenAccount = getAssociatedTokenAddressSync(mintPubkey, fromPubkey);
-        const toTokenAccount = getAssociatedTokenAddressSync(mintPubkey, toPubkey);
-
-        // Check if destination token account exists
-        const toTokenAccountInfo = await connection.getAccountInfo(toTokenAccount);
-        const needsDestinationAccount = !toTokenAccountInfo;
-
-        // Get mint info to determine decimals
-        const mintInfo = await connection.getParsedAccountInfo(mintPubkey);
-        const decimals = (mintInfo.value?.data as any)?.parsed?.info?.decimals || 9;
-
-        // SPL transfers need more compute units than SOL transfers
-        // Add extra CU if we need to create destination account
-        const computeUnitLimit = needsDestinationAccount ? 40000 : 20000;
-        const computeUnitPrice = Math.min(priorityFee, 100000);
-
-        // Create transfer instruction
-        const transferInstruction = createTransferCheckedInstruction(
-          fromTokenAccount,
-          mintPubkey,
-          toTokenAccount,
-          fromPubkey,
-          Number(amount),
-          decimals,
-        );
-
-        transaction = new Transaction()
-          .add(
-            ComputeBudgetProgram.setComputeUnitLimit({
-              units: computeUnitLimit,
-            }),
-          )
-          .add(
-            ComputeBudgetProgram.setComputeUnitPrice({
-              microLamports: computeUnitPrice,
-            }),
-          );
-
-        // Add create destination account instruction if needed
-        if (needsDestinationAccount) {
-          transaction.add(
-            createAssociatedTokenAccountInstruction(
-              fromPubkey, // payer
-              toTokenAccount, // ata
-              toPubkey, // owner
-              mintPubkey, // mint
-            ),
-          );
-        }
-
-        // Add the transfer instruction
-        transaction.add(transferInstruction);
-
-        console.log(
-          `SPL Token transfer: ${computeUnitPrice} micro-lamports per CU, limit: ${computeUnitLimit} CU, creating destination: ${needsDestinationAccount}`,
-        );
-      }
-
-      // Step 5: Get latest blockhash and simulate transaction to verify
-      const { blockhash } = await connection.getLatestBlockhash("confirmed");
-      transaction.recentBlockhash = blockhash;
-      transaction.feePayer = fromPubkey;
-
-      // Step 6: Sign and send transaction with priority fees
-      const signedTransaction = await phantom.signAndSendTransaction(transaction);
-
-      toast.success(`Transaction successful! Signature: ${signedTransaction.signature}`);
-      console.log("Transaction sent with priority fees. Signature:", signedTransaction.signature);
-    } catch (error: unknown) {
-      console.error("Transfer error:", error);
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      if (errorMessage.includes("User rejected")) {
-        toast.error("Transaction was cancelled by user");
-      } else if (errorMessage.includes("insufficient")) {
-        toast.error("Insufficient balance for this transaction");
-      } else if (errorMessage.includes("blockhash not found")) {
-        toast.error("Network congestion detected. Please try again in a moment.");
-      } else {
-        toast.error(`Transfer failed: ${errorMessage}`);
-      }
-    }
-  };
-
   if (refundTxs.length > 0) {
     return (
       <>

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

@@ -3,10 +3,13 @@
 import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
+import { formatUnits } from "viem";
 
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { Button } from "@b3dotfun/sdk/global-account/react";
+import { getNativeRequired } from "@b3dotfun/sdk/anyspend/utils/chain";
+import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
+import { Button, useTokenBalance } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
@@ -28,6 +31,7 @@ export function OrderTokenAmount({
   amountClassName,
   tokenSelectClassName,
   onTokenSelect,
+  walletAddress,
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -45,25 +49,57 @@ export function OrderTokenAmount({
   amountClassName?: string;
   tokenSelectClassName?: string;
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  walletAddress?: string | undefined;
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
+  // Track if initial balance has been set
+  const initialBalanceSetRef = useRef(false);
+
+  // Only get token balance when context is "from" (for setting max amount)
+  const { rawBalance } = useTokenBalance({
+    token,
+    address: context === "from" && walletAddress ? walletAddress : undefined,
+  });
+
+  // Reset balance ref when token address or chain changes
+  useEffect(() => {
+    initialBalanceSetRef.current = false;
+  }, [token.address, token.chainId]);
 
   useEffect(() => {
-    // Only trigger when token actually changes
-    if (prevTokenRef.current !== token.address) {
-      console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
-
-      // For "from" context, reset to default value when token changes
-      if (context === "from") {
-        // Reset input to default for new token
-        onChangeInput("0.01");
+    // Only handle "from" context
+    if (context !== "from") return;
+
+    // Check if token changed or if this is the initial load with balance
+    const isTokenChanged = prevTokenRef.current !== token.address;
+    const isInitialLoad = !initialBalanceSetRef.current && rawBalance;
+
+    if ((isTokenChanged || isInitialLoad) && rawBalance) {
+      console.log(
+        `Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}, Initial: ${isInitialLoad}`,
+      );
+
+      // Calculate max amount with gas reserve for native tokens
+      let maxAmount: bigint;
+
+      if (isNativeToken(token.address)) {
+        const gasReserve = getNativeRequired(token.chainId);
+        // Ensure we don't go negative
+        maxAmount = rawBalance > gasReserve ? rawBalance - gasReserve : BigInt(0);
+      } else {
+        // For ERC20 tokens, use full balance
+        maxAmount = rawBalance;
       }
 
-      // Update ref to current token
+      // Set the max amount as input value
+      onChangeInput(formatUnits(maxAmount, token.decimals));
+
+      // Update refs
       prevTokenRef.current = token.address;
+      initialBalanceSetRef.current = true;
     }
-  }, [token.address, chainId, context, onChangeInput]);
+  }, [token.address, token.chainId, token.decimals, chainId, context, onChangeInput, rawBalance]);
 
   const handleTokenSelect = (newToken: any) => {
     const token: components["schemas"]["Token"] = {
@@ -97,13 +133,8 @@ export function OrderTokenAmount({
     // Set the chain ID first
     setChainId(newToken.chainId);
 
-    // Then set the new token
+    // Then set the new token - the useEffect will handle setting the max balance
     setToken(token);
-
-    // If this is the source token, reset the amount immediately
-    if (context === "from") {
-      onChangeInput("0.01");
-    }
   };
 
   return (

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

@@ -116,6 +116,7 @@ export function CryptoPaySection({
       </div>
       <OrderTokenAmount
         address={connectedAddress}
+        walletAddress={connectedAddress}
         context="from"
         inputValue={srcAmount}
         onChangeInput={value => {

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

@@ -1,7 +1,7 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { getNativeRequired } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
-import { useTokenBalance } from "@b3dotfun/sdk/global-account/react";
+import { useTokenBalanceDirect } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits } from "viem";
 
 export function TokenBalance({
@@ -13,7 +13,7 @@ export function TokenBalance({
   walletAddress: string | undefined;
   onChangeInput: (value: string) => void;
 }) {
-  const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
+  const { rawBalance, formattedBalance, isLoading } = useTokenBalanceDirect({
     token,
     address: walletAddress,
   });

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

@@ -23,6 +23,8 @@ import { useAccount } from "wagmi";
 import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
+import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
+import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
 
 export enum PanelView {
   MAIN,
@@ -92,6 +94,9 @@ export function useAnyspendFlow({
   const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
 
+  // Auto-set active wallet from wagmi
+  useAutoSetActiveWalletFromWagmi();
+
   // Set default recipient address when wallet changes
   useEffect(() => {
     if (!selectedRecipientAddress && globalAddress) {
@@ -116,16 +121,14 @@ export function useAnyspendFlow({
     }
   }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, paymentType]);
 
-  // Auto-set crypto payment method based on balance
-  useEffect(() => {
-    if (paymentType === "crypto" && !isBalanceLoading) {
-      if (hasEnoughBalance) {
-        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-      } else {
-        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-      }
-    }
-  }, [paymentType, hasEnoughBalance, isBalanceLoading]);
+  // Auto-select crypto payment method based on available wallets and balance
+  useAutoSelectCryptoPaymentMethod({
+    paymentType,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    hasEnoughBalance,
+    isBalanceLoading,
+  });
 
   // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
   useEffect(() => {

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

@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
+
+interface UseAutoSelectCryptoPaymentMethodParams {
+  /** Current payment type (crypto or fiat) */
+  paymentType?: "crypto" | "fiat";
+  /** Currently selected payment method */
+  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+  /** Function to update the selected payment method */
+  setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  /** Whether user has enough balance to pay */
+  hasEnoughBalance: boolean;
+  /** Whether balance is still loading */
+  isBalanceLoading: boolean;
+}
+
+/**
+ * Custom hook to automatically select appropriate crypto payment method
+ * based on available wallets and balance.
+ *
+ * Auto-selection logic:
+ * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
+ * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
+ * - If only Global wallet available → GLOBAL_WALLET
+ * - If no wallets → remains NONE
+ */
+export function useAutoSelectCryptoPaymentMethod({
+  paymentType = "crypto",
+  selectedCryptoPaymentMethod,
+  setSelectedCryptoPaymentMethod,
+  hasEnoughBalance,
+  isBalanceLoading,
+}: UseAutoSelectCryptoPaymentMethodParams) {
+  // Get suggested payment method based on available wallets
+  const { suggestedPaymentMethod } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
+
+  useEffect(() => {
+    // Only auto-select when on crypto payment type and payment method is NONE
+    if (paymentType !== "crypto" || selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+      return;
+    }
+
+    // If we have a suggested payment method (wallet is connected), use it
+    if (suggestedPaymentMethod !== CryptoPaymentMethodType.NONE) {
+      // If we have balance info and enough balance, use CONNECT_WALLET
+      // Otherwise, default to TRANSFER_CRYPTO if balance is insufficient
+      if (!isBalanceLoading) {
+        if (hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+        } else if (!hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+          // Wallet connected but insufficient balance - suggest transfer
+          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+        } else {
+          // Use suggested method (e.g., GLOBAL_WALLET)
+          setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+        }
+      } else {
+        // Balance still loading, use suggested method
+        setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+      }
+    }
+  }, [
+    paymentType,
+    selectedCryptoPaymentMethod,
+    suggestedPaymentMethod,
+    hasEnoughBalance,
+    isBalanceLoading,
+    setSelectedCryptoPaymentMethod,
+  ]);
+}

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

@@ -0,0 +1,80 @@
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { useCallback, useEffect, useRef } from "react";
+import { useSetActiveWallet } from "thirdweb/react";
+import { WalletId, createWallet } from "thirdweb/wallets";
+import { useAccount } from "wagmi";
+
+/**
+ * Hook that automatically sets the active thirdweb wallet when a wagmi wallet connects.
+ *
+ * This is useful for syncing wagmi wallet connections with thirdweb's wallet system,
+ * ensuring that when users connect via wagmi, the active wallet is properly set.
+ *
+ * Place this hook in components that stay mounted throughout the user flow
+ * (not in components that unmount during navigation).
+ */
+export function useAutoSetActiveWalletFromWagmi() {
+  const { address: wagmiAddress, connector: wagmiConnector } = useAccount();
+  const setActiveWallet = useSetActiveWallet();
+  const prevWagmiAddress = useRef<string | undefined>(undefined);
+
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = useCallback((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 = useCallback(
+    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);
+        await thirdwebWallet.connect({ client });
+        return thirdwebWallet;
+      } catch (error) {
+        console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
+        return null;
+      }
+    },
+    [getThirdwebWalletId],
+  );
+
+  // Listen for wagmi wallet connections and automatically set active wallet
+  useEffect(() => {
+    const isNewConnection = wagmiAddress && wagmiAddress !== prevWagmiAddress.current;
+
+    if (isNewConnection && wagmiConnector?.name) {
+      prevWagmiAddress.current = wagmiAddress;
+
+      const setupThirdwebWallet = async () => {
+        try {
+          const thirdwebWallet = await createThirdwebWalletFromConnector(wagmiConnector.name);
+          if (thirdwebWallet) {
+            setActiveWallet(thirdwebWallet);
+            console.log(`Auto-set active wallet for ${wagmiConnector.name}`);
+          }
+        } catch (error) {
+          console.error("Failed to auto-set active wallet:", error);
+        }
+      };
+
+      setupThirdwebWallet();
+    }
+
+    if (!wagmiAddress) {
+      prevWagmiAddress.current = undefined;
+    }
+  }, [wagmiAddress, wagmiConnector?.name, setActiveWallet, createThirdwebWalletFromConnector]);
+}