@b3dotfun/sdk 0.0.67-alpha.0 → 0.0.67-alpha.1

package/dist/types/anyspend/react/hooks/useRecipientAddressState.d.ts

@@ -0,0 +1,52 @@
+interface UseRecipientAddressStateProps {
+    /** Fixed recipient address from props (highest priority) */
+    recipientAddressFromProps?: string;
+    /** Connected wallet address from payment method */
+    walletAddress?: string;
+    /** Global account address */
+    globalAddress?: string;
+}
+interface UseRecipientAddressStateResult {
+    /** User explicitly selected recipient address (undefined means no explicit selection) */
+    selectedRecipientAddress: string | undefined;
+    /** Function to update the user-selected recipient address */
+    setSelectedRecipientAddress: (address: string | undefined) => void;
+    /** Effective recipient address (follows priority: props > user selection > wallet/global) */
+    effectiveRecipientAddress: string | undefined;
+    /** Reset recipient address state */
+    resetRecipientAddress: () => void;
+}
+/**
+ * Custom hook to manage recipient address state with automatic priority handling:
+ *
+ * **Priority System:**
+ * 1. `recipientAddressFromProps` - Fixed recipient from component props (highest priority)
+ * 2. `selectedRecipientAddress` - User's explicit manual selection
+ * 3. `walletAddress` or `globalAddress` - Auto-selected fallback
+ *
+ * **Key Features:**
+ * - Automatically manages recipient address based on priority
+ * - Preserves user's manual selections
+ * - Updates automatically when wallet/global address changes (if no manual selection)
+ * - Derived value approach - no useEffect needed, no stale state bugs
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedRecipientAddress,
+ *   setSelectedRecipientAddress,
+ *   effectiveRecipientAddress,
+ *   resetRecipientAddress
+ * } = useRecipientAddressState({
+ *   recipientAddressFromProps,
+ *   walletAddress,
+ *   globalAddress,
+ * });
+ *
+ * // Use effectiveRecipientAddress for display and operations
+ * // Use setSelectedRecipientAddress when user explicitly selects
+ * // Call resetRecipientAddress when switching tabs or going back
+ * ```
+ */
+export declare function useRecipientAddressState({ recipientAddressFromProps, walletAddress, globalAddress, }?: UseRecipientAddressStateProps): UseRecipientAddressStateResult;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.67-alpha.0",
+  "version": "0.0.67-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -33,7 +33,9 @@ import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
+import { useConnectedWalletDisplay } from "../hooks/useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
+import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoPaySection } from "./common/CryptoPaySection";
@@ -444,16 +446,29 @@ function AnySpendInner({
   //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
   // );
 
-  // State for recipient selection
-  const [recipientAddress, setRecipientAddress] = useState<string | undefined>();
-
   const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
-  const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
-  const recipientName = recipientProfile.data?.name;
 
   // Auto-set active wallet from wagmi
   useAutoSetActiveWalletFromWagmi();
 
+  // Get wallet address based on selected payment method
+  const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
+
+  // Recipient address state with dual-state system (auto + explicit user selection)
+  // The hook automatically manages priority: props > user selection > wallet/global
+  const {
+    setSelectedRecipientAddress,
+    effectiveRecipientAddress,
+    // resetRecipientAddress, // Not used yet, but available for future use
+  } = useRecipientAddressState({
+    recipientAddressFromProps,
+    walletAddress,
+    globalAddress,
+  });
+
+  const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+  const recipientName = recipientProfile.data?.name;
+
   // Check token balance for crypto payments
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalanceDirect({
     token: selectedSrcToken,
@@ -515,7 +530,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
           amount: activeInputAmountInWei,
-          recipientAddress,
+          recipientAddress: effectiveRecipientAddress,
         }
       : {
           srcChain: base.id,
@@ -525,7 +540,7 @@ function AnySpendInner({
           type: "swap",
           tradeType: "EXACT_INPUT",
           amount: srcAmountOnrampInWei,
-          recipientAddress,
+          recipientAddress: effectiveRecipientAddress,
           onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         },
   );
@@ -546,15 +561,15 @@ function AnySpendInner({
         setCustomRecipients(parsedRecipients);
 
         // If no wallet is connected and no recipient is selected, select the first recipient
-        if (!globalAddress && !recipientAddress && parsedRecipients.length > 0) {
-          setRecipientAddress(parsedRecipients[0].address);
+        if (!globalAddress && !effectiveRecipientAddress && parsedRecipients.length > 0) {
+          setSelectedRecipientAddress(parsedRecipients[0].address);
         }
       }
     } catch (err) {
       console.error("Error loading recipients from local storage:", err);
     }
     // Only run this effect once on mount
-  }, [globalAddress, recipientAddress, customRecipients.length]);
+  }, [globalAddress, effectiveRecipientAddress, customRecipients.length, setSelectedRecipientAddress]);
 
   // Update dependent amount when relay price changes
   useEffect(() => {
@@ -666,7 +681,7 @@ function AnySpendInner({
 
     if (activeTab === "fiat") {
       // For fiat: check recipient first, then payment method
-      if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
 
       // If no fiat payment method selected, show "Select payment method"
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
@@ -685,7 +700,7 @@ function AnySpendInner({
       }
 
       // Check recipient after payment method
-      if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
 
       // If payment method selected, show appropriate action
       if (
@@ -704,7 +719,7 @@ function AnySpendInner({
     activeInputAmountInWei,
     isSameChainSameToken,
     isLoadingAnyspendQuote,
-    recipientAddress,
+    effectiveRecipientAddress,
     isCreatingOrder,
     isCreatingOnrampOrder,
     anyspendQuote,
@@ -722,12 +737,12 @@ function AnySpendInner({
 
       if (activeTab === "fiat") {
         // For fiat: check recipient first
-        if (!recipientAddress) {
+        if (!effectiveRecipientAddress) {
           navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
           return;
         }
 
-        invariant(recipientAddress, "Recipient address is not found");
+        invariant(effectiveRecipientAddress, "Recipient address is not found");
 
         // If no fiat payment method selected, show payment method selection
         if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
@@ -750,12 +765,12 @@ function AnySpendInner({
         }
 
         // Check recipient after payment method
-        if (!recipientAddress) {
+        if (!effectiveRecipientAddress) {
           navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
           return;
         }
 
-        invariant(recipientAddress, "Recipient address is not found");
+        invariant(effectiveRecipientAddress, "Recipient address is not found");
 
         // If payment method is selected, create order with payment method info
         if (
@@ -788,7 +803,7 @@ function AnySpendInner({
   const handleCryptoSwap = async (method: CryptoPaymentMethodType) => {
     try {
       invariant(anyspendQuote, "Relay price is not found");
-      invariant(recipientAddress, "Recipient address is not found");
+      invariant(effectiveRecipientAddress, "Recipient address is not found");
 
       // Debug: Check payment method values
       console.log("handleCryptoSwap - method parameter:", method);
@@ -797,7 +812,7 @@ function AnySpendInner({
       const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
 
       createOrder({
-        recipientAddress,
+        recipientAddress: effectiveRecipientAddress,
         orderType: "swap",
         srcChain: selectedSrcChainId,
         dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -819,7 +834,7 @@ function AnySpendInner({
   const handleFiatOrder = async (paymentMethod: FiatPaymentMethod) => {
     try {
       invariant(anyspendQuote, "Relay price is not found");
-      invariant(recipientAddress, "Recipient address is not found");
+      invariant(effectiveRecipientAddress, "Recipient address is not found");
 
       if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
         toast.error("Please enter a valid amount");
@@ -862,7 +877,7 @@ function AnySpendInner({
       };
 
       createOnrampOrder({
-        recipientAddress,
+        recipientAddress: effectiveRecipientAddress,
         orderType: "swap",
         dstChain: getDstToken().chainId,
         dstToken: getDstToken(),
@@ -1059,7 +1074,7 @@ function AnySpendInner({
                   setActivePanel(panelIndex);
                 }
               }}
-              _recipientAddress={recipientAddress}
+              _recipientAddress={effectiveRecipientAddress}
               destinationToken={selectedDstToken}
               destinationChainId={selectedDstChainId}
               destinationAmount={dstAmount}
@@ -1118,12 +1133,9 @@ function AnySpendInner({
           <CryptoReceiveSection
             isDepositMode={false}
             isBuyMode={isBuyMode}
-            selectedRecipientAddress={recipientAddress}
+            effectiveRecipientAddress={effectiveRecipientAddress}
             recipientName={recipientName || undefined}
             onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
-            setRecipientAddress={setRecipientAddress}
-            recipientAddressFromProps={recipientAddressFromProps}
-            globalAddress={globalAddress}
             dstAmount={dstAmount}
             dstToken={selectedDstToken}
             selectedDstChainId={selectedDstChainId}
@@ -1137,7 +1149,6 @@ function AnySpendInner({
             anyspendQuote={anyspendQuote}
             onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
             onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
           />
         )}
       </div>
@@ -1165,7 +1176,7 @@ function AnySpendInner({
           </div>
         </ShinyButton>
 
-        {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
+        {!hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (
           <Button
             variant="link"
             onClick={onClickHistory}
@@ -1182,7 +1193,7 @@ function AnySpendInner({
     <PanelOnrampPayment
       srcAmountOnRamp={srcAmountOnRamp}
       recipientName={recipientName || undefined}
-      recipientAddress={recipientAddress}
+      recipientAddress={effectiveRecipientAddress}
       isBuyMode={isBuyMode}
       destinationTokenChainId={destinationTokenChainId}
       destinationTokenAddress={destinationTokenAddress}
@@ -1213,10 +1224,11 @@ function AnySpendInner({
 
   const recipientSelectionView = (
     <RecipientSelection
-      initialValue={recipientAddress || ""}
+      initialValue={effectiveRecipientAddress || ""}
       onBack={navigateBack}
       onConfirm={address => {
-        setRecipientAddress(address);
+        // User manually selected a recipient
+        setSelectedRecipientAddress(address);
         navigateBack();
       }}
     />

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

@@ -46,6 +46,7 @@ import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
+import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
@@ -261,11 +262,12 @@ function AnySpendCustomInner({
   // Get current user's wallet
   const currentWallet = useAccountWallet();
 
-  // Add state for custom recipient
-  const [customRecipientAddress, setCustomRecipientAddress] = useState<string | undefined>(recipientAddressProps);
-
-  // Update recipient logic to use custom recipient
-  const recipientAddress = customRecipientAddress || currentWallet.address;
+  // Recipient address state with dual-state system (auto + explicit user selection)
+  // The hook automatically manages priority: props > user selection > global address
+  const { setSelectedRecipientAddress, effectiveRecipientAddress: recipientAddress } = useRecipientAddressState({
+    recipientAddressFromProps: recipientAddressProps,
+    globalAddress: currentWallet.address,
+  });
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
 
@@ -1230,12 +1232,13 @@ function AnySpendCustomInner({
   const recipientSelectionView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <RecipientSelection
-        initialValue={customRecipientAddress || ""}
+        initialValue={recipientAddress || ""}
         title="Add recipient address or ENS"
         description="Send tokens to another address"
         onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
         onConfirm={address => {
-          setCustomRecipientAddress(address);
+          // User manually selected a recipient
+          setSelectedRecipientAddress(address);
           setActivePanel(PanelView.CONFIRM_ORDER);
         }}
       />

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

@@ -364,7 +364,7 @@ function AnySpendCustomExactInInner({
             <CryptoReceiveSection
               isDepositMode={false}
               isBuyMode={true}
-              selectedRecipientAddress={selectedRecipientOrDefault}
+              effectiveRecipientAddress={selectedRecipientOrDefault}
               recipientName={recipientName || undefined}
               onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
               dstAmount={dstAmount}

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

@@ -4,7 +4,7 @@ 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 { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
@@ -127,13 +127,6 @@ export function CryptoPaymentMethod({
       description: "Connect using WalletConnect protocol",
       connector: availableConnectors.find(c => c.name === "WalletConnect"),
     },
-    {
-      id: "phantom",
-      name: "Phantom",
-      icon: <WalletPhantom size={48} />,
-      description: "Connect using Phantom wallet",
-      connector: availableConnectors.find(c => c.name === "Phantom"),
-    },
   ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
 
   // Reset modal state when closing

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

@@ -4,11 +4,8 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect } from "react";
 import { components } from "../../../types/api";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
-import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
-import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { PointsBadge } from "./PointsBadge";
 
@@ -16,12 +13,9 @@ interface CryptoReceiveSectionProps {
   isDepositMode?: boolean;
   isBuyMode?: boolean;
   // Recipient data
-  selectedRecipientAddress?: string;
+  effectiveRecipientAddress?: string;
   recipientName?: string;
   onSelectRecipient: () => void;
-  setRecipientAddress?: (address: string | undefined) => void;
-  recipientAddressFromProps?: string;
-  globalAddress?: string;
   // Token data
   dstAmount: string;
   dstToken: components["schemas"]["Token"];
@@ -40,19 +34,14 @@ interface CryptoReceiveSectionProps {
   onShowPointsDetail?: () => void;
   // Fee detail navigation
   onShowFeeDetail?: () => void;
-  // Payment method for wallet tracking
-  selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }
 
 export function CryptoReceiveSection({
   isDepositMode = false,
   isBuyMode = false,
-  selectedRecipientAddress,
+  effectiveRecipientAddress,
   recipientName,
   onSelectRecipient,
-  setRecipientAddress,
-  recipientAddressFromProps,
-  globalAddress,
   dstAmount,
   dstToken,
   selectedDstChainId,
@@ -65,20 +54,9 @@ export function CryptoReceiveSection({
   dstTokenLogoURI,
   onShowPointsDetail,
   onShowFeeDetail,
-  selectedCryptoPaymentMethod,
 }: CryptoReceiveSectionProps) {
   const featureFlags = useFeatureFlags();
 
-  // Get wallet address based on selected payment method
-  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
-
-  // Set default recipient address when wallet changes
-  useEffect(() => {
-    if (setRecipientAddress) {
-      setRecipientAddress(recipientAddressFromProps || walletAddress || globalAddress);
-    }
-  }, [recipientAddressFromProps, walletAddress, globalAddress, setRecipientAddress]);
-
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -95,14 +73,14 @@ export function CryptoReceiveSection({
             </button>
           )}
         </div>
-        {selectedRecipientAddress ? (
+        {effectiveRecipientAddress ? (
           <button
             className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
             onClick={onSelectRecipient}
           >
             <>
               <span className="text-as-tertiarry flex items-center gap-1 text-sm">
-                {recipientName ? formatUsername(recipientName) : shortenAddress(selectedRecipientAddress || "")}
+                {recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || "")}
               </span>
               <ChevronRight className="h-4 w-4" />
             </>
@@ -131,7 +109,7 @@ export function CryptoReceiveSection({
       ) : (
         // Token selection for regular swap mode
         <OrderTokenAmount
-          address={selectedRecipientAddress}
+          address={effectiveRecipientAddress}
           context="to"
           inputValue={dstAmount}
           onChangeInput={onChangeDstAmount || (() => {})}

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
+export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";

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

@@ -26,6 +26,7 @@ import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMe
 import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
+import { useRecipientAddressState } from "./useRecipientAddressState";
 
 export enum PanelView {
   MAIN,
@@ -105,22 +106,22 @@ export function useAnyspendFlow({
 
   const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
 
-  // Recipient state
+  // Recipient state with dual-state system (auto + explicit user selection)
   const { address: globalAddress } = useAccountWallet();
   const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
-  const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(recipientAddress);
-  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) {
-      setSelectedRecipientAddress(globalAddress);
-    }
-  }, [selectedRecipientAddress, globalAddress]);
+  // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
+  const { setSelectedRecipientAddress, effectiveRecipientAddress } = useRecipientAddressState({
+    recipientAddressFromProps: recipientAddress,
+    walletAddress,
+    globalAddress,
+  });
+
+  const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+  const recipientName = recipientProfile.data?.name;
 
   // Check token balance for crypto payments
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
@@ -208,7 +209,7 @@ export function useAnyspendFlow({
     dstTokenAddress: selectedDstToken.address,
     type: orderType,
     amount: activeInputAmountInWei,
-    recipientAddress: selectedRecipientAddress,
+    recipientAddress: effectiveRecipientAddress,
     onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
   });
 
@@ -333,7 +334,7 @@ export function useAnyspendFlow({
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
     // Recipient
-    selectedRecipientAddress,
+    selectedRecipientAddress: effectiveRecipientAddress,
     setSelectedRecipientAddress,
     recipientName,
     globalAddress,

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

@@ -20,6 +20,8 @@ export function useConnectedWalletDisplay(
   const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
   const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = useAccount();
 
+  const globalWalletAddress = 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;
@@ -28,7 +30,8 @@ export function useConnectedWalletDisplay(
 
   // Check if connectedEOAWallet and wagmi wallet represent the same wallet
   const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
+  const isWalletDuplicated =
+    isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
 
   // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
   const shouldShowConnectedEOA = !!connectedEOAWallet;

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

@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+interface UseRecipientAddressStateProps {
+  /** Fixed recipient address from props (highest priority) */
+  recipientAddressFromProps?: string;
+  /** Connected wallet address from payment method */
+  walletAddress?: string;
+  /** Global account address */
+  globalAddress?: string;
+}
+
+interface UseRecipientAddressStateResult {
+  /** User explicitly selected recipient address (undefined means no explicit selection) */
+  selectedRecipientAddress: string | undefined;
+  /** Function to update the user-selected recipient address */
+  setSelectedRecipientAddress: (address: string | undefined) => void;
+  /** Effective recipient address (follows priority: props > user selection > wallet/global) */
+  effectiveRecipientAddress: string | undefined;
+  /** Reset recipient address state */
+  resetRecipientAddress: () => void;
+}
+
+/**
+ * Custom hook to manage recipient address state with automatic priority handling:
+ *
+ * **Priority System:**
+ * 1. `recipientAddressFromProps` - Fixed recipient from component props (highest priority)
+ * 2. `selectedRecipientAddress` - User's explicit manual selection
+ * 3. `walletAddress` or `globalAddress` - Auto-selected fallback
+ *
+ * **Key Features:**
+ * - Automatically manages recipient address based on priority
+ * - Preserves user's manual selections
+ * - Updates automatically when wallet/global address changes (if no manual selection)
+ * - Derived value approach - no useEffect needed, no stale state bugs
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedRecipientAddress,
+ *   setSelectedRecipientAddress,
+ *   effectiveRecipientAddress,
+ *   resetRecipientAddress
+ * } = useRecipientAddressState({
+ *   recipientAddressFromProps,
+ *   walletAddress,
+ *   globalAddress,
+ * });
+ *
+ * // Use effectiveRecipientAddress for display and operations
+ * // Use setSelectedRecipientAddress when user explicitly selects
+ * // Call resetRecipientAddress when switching tabs or going back
+ * ```
+ */
+export function useRecipientAddressState({
+  recipientAddressFromProps,
+  walletAddress,
+  globalAddress,
+}: UseRecipientAddressStateProps = {}): UseRecipientAddressStateResult {
+  // selectedRecipientAddress: explicitly selected by user (undefined means no explicit selection)
+  const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(undefined);
+
+  // The effective recipient address, derived on each render, respecting priority.
+  const effectiveRecipientAddress =
+    recipientAddressFromProps || selectedRecipientAddress || walletAddress || globalAddress;
+
+  // Helper function to reset user's manual selection.
+  const resetRecipientAddress = () => {
+    setSelectedRecipientAddress(undefined);
+  };
+
+  return {
+    selectedRecipientAddress,
+    setSelectedRecipientAddress,
+    effectiveRecipientAddress,
+    resetRecipientAddress,
+  };
+}