@b3dotfun/sdk 0.1.69-alpha.14 → 0.1.69-alpha.16

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -205,5 +205,9 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: {
+                successTitle: "Payment Successful",
+                successDescription: "Your payment has been processed successfully.",
+                ...content,
+            }, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
 }

package/dist/cjs/anyspend/react/components/checkout/CryptoPayPanel.js

@@ -13,7 +13,6 @@ const chain_1 = require("../../../../anyspend/utils/chain");
 const token_1 = require("../../../../anyspend/utils/token");
 const react_1 = require("../../../../global-account/react");
 const react_2 = require("../../../../global-account/react");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const number_1 = require("../../../../shared/utils/number");
 const cn_1 = require("../../../../shared/utils/cn");
 const lucide_react_1 = require("lucide-react");
@@ -21,8 +20,10 @@ const qrcode_react_1 = require("qrcode.react");
 const viem_1 = require("viem");
 const react_3 = require("motion/react");
 const react_4 = require("react");
+const react_5 = require("thirdweb/react");
 const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
 const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
+const CryptoPaymentMethod_1 = require("../common/CryptoPaymentMethod");
 function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, senderAddress, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = (0, react_4.useRef)(onError);
@@ -35,11 +36,10 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(destinationTokenChainId);
     const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(null);
     const [copied, setCopied] = (0, react_4.useState)(false);
-    const { address: walletAddress } = (0, react_1.useAccountWallet)();
-    const effectiveAddress = senderAddress || walletAddress;
-    const { partnerId } = (0, react_1.useB3Config)();
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const { address: walletAddress, connectedEOAWallet } = (0, react_1.useAccountWallet)();
+    const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+    const effectiveAddress = connectedAddress || senderAddress;
+    const { connect: openConnectModal } = (0, react_5.useConnectModal)();
     const { data: dstTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
     // Default to destination token data once available
     (0, react_4.useEffect)(() => {
@@ -169,9 +169,8 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     /* ------------------------------------------------------------------ */
     const [walletOrderId, setWalletOrderId] = (0, react_4.useState)();
     const [isSendingDeposit, setIsSendingDeposit] = (0, react_4.useState)(false);
-    const [depositRejected, setDepositRejected] = (0, react_4.useState)(false);
     const depositSentRef = (0, react_4.useRef)(false);
-    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    const { switchChainAndExecuteWithEOA } = (0, react_1.useUnifiedChainSwitchAndExecute)();
     const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = (0, useAnyspendCreateOrder_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             const id = data.data?.id;
@@ -186,7 +185,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     const { orderAndTransactions: walletOat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(walletOrderId);
     // Auto-send deposit tx once swap order is ready
     (0, react_4.useEffect)(() => {
-        if (!walletOat?.data?.order || depositSentRef.current || depositRejected)
+        if (!walletOat?.data?.order || depositSentRef.current)
             return;
         const order = walletOat.data.order;
         if (order.status !== "scanning_deposit_transaction")
@@ -198,8 +197,9 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             try {
                 setIsSendingDeposit(true);
                 const amount = BigInt(order.srcAmount);
+                let txHash;
                 if ((0, token_1.isNativeToken)(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.globalAddress,
                         value: amount,
                     });
@@ -210,12 +210,18 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                         functionName: "transfer",
                         args: [order.globalAddress, amount],
                     });
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.srcTokenAddress,
                         data,
                         value: BigInt(0),
                     });
                 }
+                if (!txHash) {
+                    // User cancelled or tx failed — reset so they can retry
+                    depositSentRef.current = false;
+                    setWalletOrderId(undefined);
+                    return;
+                }
                 // Deposit sent — notify parent to transition to order lifecycle tracking
                 if (walletOrderId) {
                     onOrderCreatedRef.current?.(walletOrderId);
@@ -223,10 +229,8 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             }
             catch (error) {
                 depositSentRef.current = false;
-                const isUserRejection = error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
-                if (isUserRejection) {
-                    setDepositRejected(true);
-                }
+                // Reset order so user can retry
+                setWalletOrderId(undefined);
                 onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
             }
             finally {
@@ -234,7 +238,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             }
         };
         sendDeposit();
-    }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+    }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
     (0, useOnOrderSuccess_1.useOnOrderSuccess)({
         orderData: walletOat,
         orderId: walletOrderId,
@@ -242,9 +246,10 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
     });
     const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
     const handleWalletPay = (0, react_4.useCallback)(() => {
-        if (!selectedSrcToken || !walletAddress)
+        if (!selectedSrcToken || !connectedAddress)
             return;
         depositSentRef.current = false;
+        setWalletOrderId(undefined);
         createSwapOrder({
             recipientAddress,
             orderType: "swap",
@@ -259,7 +264,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
         });
     }, [
         selectedSrcToken,
-        walletAddress,
+        connectedAddress,
         effectiveAddress,
         recipientAddress,
         selectedSrcChainId,
@@ -291,13 +296,28 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const handleConnectWallet = () => {
-        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
-        setB3ModalOpen(true);
+    const [shouldAutoPay, setShouldAutoPay] = (0, react_4.useState)(false);
+    const handleConnectWallet = async () => {
+        try {
+            const wallet = await openConnectModal(CryptoPaymentMethod_1.connectModalConfig);
+            if (wallet) {
+                setShouldAutoPay(true);
+            }
+        }
+        catch (error) {
+            console.error("Failed to connect wallet:", error);
+        }
     };
+    // Auto-trigger payment after wallet connect
+    (0, react_4.useEffect)(() => {
+        if (shouldAutoPay && connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoadingAnyspendQuote) {
+            setShouldAutoPay(false);
+            handleWalletPay();
+        }
+    }, [shouldAutoPay, connectedAddress, selectedSrcToken, hasEnoughBalance, isLoadingAnyspendQuote, handleWalletPay]);
     const isLoading = isLoadingAnyspendQuote;
     const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
     const chainName = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
     const chainLogoUrl = anyspend_1.ALL_CHAINS[selectedSrcChainId]?.logoUrl;
     // Collapse QR on mobile when a wallet connector is available
@@ -316,7 +336,7 @@ function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destination
                                 name: token.name,
                                 symbol: token.symbol,
                             });
-                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_3.motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_3.motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: (0, cn_1.cn)(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_3.motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), (0, jsx_runtime_1.jsx)(react_3.AnimatePresence, { children: connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_3.motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !connectedAddress ? ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: (0, cn_1.cn)("w-full", classes?.payButton), textClassName: (0, cn_1.cn)(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,6 +5,14 @@ export declare enum CryptoPaymentMethodType {
     GLOBAL_WALLET = "global_wallet",
     TRANSFER_CRYPTO = "transfer_crypto"
 }
+export declare const recommendWallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+export declare const connectModalConfig: {
+    client: import("thirdweb").ThirdwebClient;
+    setActive: false;
+    size: "compact";
+    showThirdwebBranding: boolean;
+    wallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+};
 interface CryptoPaymentMethodProps {
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoPaymentMethodType = void 0;
+exports.connectModalConfig = exports.recommendWallets = exports.CryptoPaymentMethodType = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
@@ -19,12 +19,19 @@ var CryptoPaymentMethodType;
     CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
-const recommendWallets = [
+exports.recommendWallets = [
     (0, wallets_1.createWallet)("io.metamask"),
     (0, wallets_1.createWallet)("com.coinbase.wallet"),
     (0, wallets_1.createWallet)("me.rainbow"),
     (0, wallets_1.createWallet)("io.rabby"),
 ];
+exports.connectModalConfig = {
+    client: thirdweb_1.client,
+    setActive: false,
+    size: "compact",
+    showThirdwebBranding: false,
+    wallets: exports.recommendWallets,
+};
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, classes, }) {
     const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
     const { disconnect } = (0, react_2.useDisconnect)();
@@ -44,13 +51,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             if (connectedEOAWallet) {
                 disconnect(connectedEOAWallet);
             }
-            const wallet = await openConnectModal({
-                client: thirdweb_1.client,
-                setActive: false,
-                size: "compact",
-                showThirdwebBranding: false,
-                wallets: recommendWallets,
-            });
+            const wallet = await openConnectModal(exports.connectModalConfig);
             if (wallet) {
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

package/dist/cjs/global-account/react/components/LinkAccount/LinkedAccountItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
 const lucide_react_1 = require("lucide-react");
 // Helper function to check if a string is a wallet address and format it
@@ -32,7 +33,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
             react_1.toast.error("Failed to copy address");
         }
     };
-    const displayImageUrl = profileData?.avatar || profile.imageUrl;
+    const displayImageUrl = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile.imageUrl);
     const displayName = profileData?.name || displayTitle;
     return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [displayImageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: displayImageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
                                                     ? "font-mono text-sm" // Use monospace font for addresses

package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ens_normalize_1 = require("@adraffy/ens-normalize");
 const app_1 = __importDefault(require("../../../../global-account/app"));
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
@@ -30,8 +31,7 @@ const SettingsProfileCard = () => {
     const [editedUsername, setEditedUsername] = (0, react_2.useState)("");
     const [isSaving, setIsSaving] = (0, react_2.useState)(false);
     const inputRef = (0, react_2.useRef)(null);
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
+    const avatarSrc = (0, profileDisplay_1.validateImageUrl)(user?.avatar) || (0, profileDisplay_1.validateImageUrl)(profile?.avatar);
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "");
     // Focus input when entering edit mode

package/dist/cjs/global-account/react/components/Send/Send.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const ChainTokenIcon_1 = require("../../../../anyspend/react/components/common/ChainTokenIcon");
 const react_1 = require("../../../../global-account/react");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const number_1 = require("../../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
@@ -20,7 +21,8 @@ const button_1 = require("../ui/button");
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }) {
     const { data: profileData } = (0, react_1.useProfile)({ address });
-    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+    const validatedAvatar = (0, profileDisplay_1.validateImageUrl)(profileData?.avatar);
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [validatedAvatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedAvatar, alt: profileData?.name || address, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
 }
 function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { address } = (0, react_1.useAccountWallet)();
@@ -45,6 +47,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { data: validatedProfileData } = (0, react_1.useProfile)({
         address: showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) ? recipientAddress : undefined,
     });
+    const validatedRecipientAvatar = (0, profileDisplay_1.validateImageUrl)(validatedProfileData?.avatar);
     // Address validation
     const handleRecipientAddressChange = (value) => {
         setRecipientAddress(value);
@@ -185,7 +188,7 @@ function Send({ recipientAddress: initialRecipient, onSuccess }) {
                 return "Send";
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { handleBack: handleBack, title: getStepTitle() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => ((0, jsx_runtime_1.jsx)(RecentAddressItem, { address: recent.address, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { handleBack: handleBack, title: getStepTitle() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedRecipientAvatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedRecipientAvatar, alt: validatedProfileData?.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => ((0, jsx_runtime_1.jsx)(RecentAddressItem, { address: recent.address, onClick: () => {
                                                 // Just fill the input and show validation - don't auto-proceed
                                                 handleRecipientAddressChange(recent.address);
                                             } }, index))) })] }))] })), step === "token" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col p-5", children: isLoadingBalance ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-xl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: simBalance.balances.map(token => ((0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {

package/dist/cjs/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
 const profileApi_1 = require("../../utils/profileApi");
+const profileDisplay_1 = require("../../utils/profileDisplay");
 const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
 const input_1 = require("../ui/input");
 /**
@@ -159,5 +160,5 @@ function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, placeholder
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: (0, profileDisplay_1.validateImageUrl)(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
 }

package/dist/esm/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -202,5 +202,9 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: {
+                successTitle: "Payment Successful",
+                successDescription: "Your payment has been processed successfully.",
+                ...content,
+            }, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
 }

package/dist/esm/anyspend/react/components/checkout/CryptoPayPanel.js

@@ -8,9 +8,8 @@ import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSu
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "../../../../anyspend/index.js";
 import { getPaymentUrl } from "../../../../anyspend/utils/chain.js";
 import { isNativeToken } from "../../../../anyspend/utils/token.js";
-import { useAccountWallet, useB3Config, useIsMobile, useModalStore, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { useAccountWallet, useIsMobile, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { ShinyButton, TextShimmer } from "../../../../global-account/react/index.js";
-import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { Check, ChevronDown, ChevronsUpDown, Copy, Loader2, QrCode } from "lucide-react";
@@ -18,8 +17,10 @@ import { QRCodeSVG } from "qrcode.react";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConnectModal } from "thirdweb/react";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "../common/ChainTokenIcon.js";
+import { connectModalConfig } from "../common/CryptoPaymentMethod.js";
 export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, senderAddress, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = useRef(onError);
@@ -32,11 +33,10 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(destinationTokenChainId);
     const [selectedSrcToken, setSelectedSrcToken] = useState(null);
     const [copied, setCopied] = useState(false);
-    const { address: walletAddress } = useAccountWallet();
-    const effectiveAddress = senderAddress || walletAddress;
-    const { partnerId } = useB3Config();
-    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const { address: walletAddress, connectedEOAWallet } = useAccountWallet();
+    const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+    const effectiveAddress = connectedAddress || senderAddress;
+    const { connect: openConnectModal } = useConnectModal();
     const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     // Default to destination token data once available
     useEffect(() => {
@@ -166,9 +166,8 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     /* ------------------------------------------------------------------ */
     const [walletOrderId, setWalletOrderId] = useState();
     const [isSendingDeposit, setIsSendingDeposit] = useState(false);
-    const [depositRejected, setDepositRejected] = useState(false);
     const depositSentRef = useRef(false);
-    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    const { switchChainAndExecuteWithEOA } = useUnifiedChainSwitchAndExecute();
     const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             const id = data.data?.id;
@@ -183,7 +182,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     const { orderAndTransactions: walletOat } = useAnyspendOrderAndTransactions(walletOrderId);
     // Auto-send deposit tx once swap order is ready
     useEffect(() => {
-        if (!walletOat?.data?.order || depositSentRef.current || depositRejected)
+        if (!walletOat?.data?.order || depositSentRef.current)
             return;
         const order = walletOat.data.order;
         if (order.status !== "scanning_deposit_transaction")
@@ -195,8 +194,9 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             try {
                 setIsSendingDeposit(true);
                 const amount = BigInt(order.srcAmount);
+                let txHash;
                 if (isNativeToken(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.globalAddress,
                         value: amount,
                     });
@@ -207,12 +207,18 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
                         functionName: "transfer",
                         args: [order.globalAddress, amount],
                     });
-                    await switchChainAndExecute(order.srcChain, {
+                    txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
                         to: order.srcTokenAddress,
                         data,
                         value: BigInt(0),
                     });
                 }
+                if (!txHash) {
+                    // User cancelled or tx failed — reset so they can retry
+                    depositSentRef.current = false;
+                    setWalletOrderId(undefined);
+                    return;
+                }
                 // Deposit sent — notify parent to transition to order lifecycle tracking
                 if (walletOrderId) {
                     onOrderCreatedRef.current?.(walletOrderId);
@@ -220,10 +226,8 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             }
             catch (error) {
                 depositSentRef.current = false;
-                const isUserRejection = error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
-                if (isUserRejection) {
-                    setDepositRejected(true);
-                }
+                // Reset order so user can retry
+                setWalletOrderId(undefined);
                 onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
             }
             finally {
@@ -231,7 +235,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             }
         };
         sendDeposit();
-    }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+    }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
     useOnOrderSuccess({
         orderData: walletOat,
         orderId: walletOrderId,
@@ -239,9 +243,10 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
     });
     const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
     const handleWalletPay = useCallback(() => {
-        if (!selectedSrcToken || !walletAddress)
+        if (!selectedSrcToken || !connectedAddress)
             return;
         depositSentRef.current = false;
+        setWalletOrderId(undefined);
         createSwapOrder({
             recipientAddress,
             orderType: "swap",
@@ -256,7 +261,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
         });
     }, [
         selectedSrcToken,
-        walletAddress,
+        connectedAddress,
         effectiveAddress,
         recipientAddress,
         selectedSrcChainId,
@@ -288,13 +293,28 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const handleConnectWallet = () => {
-        setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
-        setB3ModalOpen(true);
+    const [shouldAutoPay, setShouldAutoPay] = useState(false);
+    const handleConnectWallet = async () => {
+        try {
+            const wallet = await openConnectModal(connectModalConfig);
+            if (wallet) {
+                setShouldAutoPay(true);
+            }
+        }
+        catch (error) {
+            console.error("Failed to connect wallet:", error);
+        }
     };
+    // Auto-trigger payment after wallet connect
+    useEffect(() => {
+        if (shouldAutoPay && connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoadingAnyspendQuote) {
+            setShouldAutoPay(false);
+            handleWalletPay();
+        }
+    }, [shouldAutoPay, connectedAddress, selectedSrcToken, hasEnoughBalance, isLoadingAnyspendQuote, handleWalletPay]);
     const isLoading = isLoadingAnyspendQuote;
     const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
     const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
     const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
     // Collapse QR on mobile when a wallet connector is available
@@ -313,7 +333,7 @@ export function CryptoPayPanel({ recipientAddress, destinationTokenAddress, dest
                                 name: token.name,
                                 symbol: token.symbol,
                             });
-                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: cn("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: cn("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: cn("w-full", classes?.payButton), textClassName: cn(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
+                        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: cn("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronsUpDown, { className: "h-4 w-4 text-gray-400" })] }) })] }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !connectedAddress ? (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleConnectWallet, className: cn("w-full", classes?.payButton), textClassName: "text-white", children: "Connect Wallet to Pay" })) : (_jsx(ShinyButton, { accentColor: themeColor || "hsl(var(--as-brand))", onClick: handleWalletPay, disabled: !canPay, className: cn("w-full", classes?.payButton), textClassName: cn(!canPay ? "text-as-secondary" : "text-white"), children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingSwapOrder
                             ? "Creating order..."
                             : isSendingDeposit
                                 ? "Confirm in wallet..."

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,6 +5,14 @@ export declare enum CryptoPaymentMethodType {
     GLOBAL_WALLET = "global_wallet",
     TRANSFER_CRYPTO = "transfer_crypto"
 }
+export declare const recommendWallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+export declare const connectModalConfig: {
+    client: import("thirdweb").ThirdwebClient;
+    setActive: false;
+    size: "compact";
+    showThirdwebBranding: boolean;
+    wallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+};
 interface CryptoPaymentMethodProps {
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -15,12 +15,19 @@ export var CryptoPaymentMethodType;
     CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
-const recommendWallets = [
+export const recommendWallets = [
     createWallet("io.metamask"),
     createWallet("com.coinbase.wallet"),
     createWallet("me.rainbow"),
     createWallet("io.rabby"),
 ];
+export const connectModalConfig = {
+    client,
+    setActive: false,
+    size: "compact",
+    showThirdwebBranding: false,
+    wallets: recommendWallets,
+};
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, classes, }) {
     const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
     const { disconnect } = useDisconnect();
@@ -40,13 +47,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
             if (connectedEOAWallet) {
                 disconnect(connectedEOAWallet);
             }
-            const wallet = await openConnectModal({
-                client,
-                setActive: false,
-                size: "compact",
-                showThirdwebBranding: false,
-                wallets: recommendWallets,
-            });
+            const wallet = await openConnectModal(connectModalConfig);
             if (wallet) {
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

package/dist/esm/global-account/react/components/LinkAccount/LinkedAccountItem.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, toast, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { truncateAddress } from "../../../../shared/utils/truncateAddress.js";
 import { Copy, Loader2, UnlinkIcon } from "lucide-react";
 // Helper function to check if a string is a wallet address and format it
@@ -30,7 +31,7 @@ const LinkedAccountItem = ({ profile, profileToUnlink, unlinkingAccountId, isUnl
             toast.error("Failed to copy address");
         }
     };
-    const displayImageUrl = profileData?.avatar || profile.imageUrl;
+    const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
     const displayName = profileData?.name || displayTitle;
     return (_jsxs("div", { className: "linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors", children: [_jsxs("div", { className: "linked-account-info flex items-center gap-3", children: [displayImageUrl ? (_jsx("img", { src: displayImageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : (_jsx("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { className: "linked-account-details", children: [_jsxs("div", { className: "linked-account-title-row flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
                                                     ? "font-mono text-sm" // Use monospace font for addresses

package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "../../../../global-account/app.js";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -25,8 +26,7 @@ const SettingsProfileCard = () => {
     const [editedUsername, setEditedUsername] = useState("");
     const [isSaving, setIsSaving] = useState(false);
     const inputRef = useRef(null);
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
+    const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
     // Focus input when entering edit mode

package/dist/esm/global-account/react/components/Send/Send.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
 import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
 import { toast, useAccountWallet, useAnalytics, useModalStore, useProfile, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -14,7 +15,8 @@ import { Button } from "../ui/button.js";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }) {
     const { data: profileData } = useProfile({ address });
-    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? (_jsx("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+    const validatedAvatar = validateImageUrl(profileData?.avatar);
+    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [validatedAvatar ? (_jsx("img", { src: validatedAvatar, alt: profileData?.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
 }
 export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { address } = useAccountWallet();
@@ -39,6 +41,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { data: validatedProfileData } = useProfile({
         address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
     });
+    const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
     // Address validation
     const handleRecipientAddressChange = (value) => {
         setRecipientAddress(value);
@@ -179,7 +182,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
                 return "Send";
         }
     };
-    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? (_jsx("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
+    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedRecipientAvatar ? (_jsx("img", { src: validatedRecipientAvatar, alt: validatedProfileData?.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
                                                 // Just fill the input and show validation - don't auto-proceed
                                                 handleRecipientAddressChange(recent.address);
                                             } }, index))) })] }))] })), step === "token" && (_jsx("div", { className: "flex flex-col p-5", children: isLoadingBalance ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => (_jsxs("div", { className: "flex items-center justify-between rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), _jsxs("div", { children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: simBalance.balances.map(token => (_jsxs("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {

package/dist/esm/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js

@@ -4,6 +4,7 @@ import { cn } from "../../../../shared/utils/index.js";
 import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi.js";
+import { validateImageUrl } from "../../utils/profileDisplay.js";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
 import { Input } from "../ui/input.js";
 /**
@@ -156,5 +157,5 @@ export function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, plac
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: cn("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && (_jsx("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_jsx("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: _jsx("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_jsxs("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_jsx("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
+    return (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: cn("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && (_jsx("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_jsx("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: _jsx("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: validateImageUrl(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_jsxs("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_jsx("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
 }

package/dist/types/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,6 +5,14 @@ export declare enum CryptoPaymentMethodType {
     GLOBAL_WALLET = "global_wallet",
     TRANSFER_CRYPTO = "transfer_crypto"
 }
+export declare const recommendWallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+export declare const connectModalConfig: {
+    client: import("thirdweb").ThirdwebClient;
+    setActive: false;
+    size: "compact";
+    showThirdwebBranding: boolean;
+    wallets: (import("thirdweb/wallets").Wallet<"io.metamask"> | import("thirdweb/wallets").Wallet<"com.coinbase.wallet"> | import("thirdweb/wallets").Wallet<"me.rainbow"> | import("thirdweb/wallets").Wallet<"io.rabby">)[];
+};
 interface CryptoPaymentMethodProps {
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;

package/package.json

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

package/src/anyspend/react/components/checkout/AnySpendCheckout.tsx

@@ -377,7 +377,15 @@ export function AnySpendCheckout({
 
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprint}>
-      <AnySpendCustomizationProvider slots={slots} content={content} theme={theme}>
+      <AnySpendCustomizationProvider
+        slots={slots}
+        content={{
+          successTitle: "Payment Successful",
+          successDescription: "Your payment has been processed successfully.",
+          ...content,
+        }}
+        theme={theme}
+      >
         <CheckoutLayout
           mode={mode}
           paymentPanel={

package/src/anyspend/react/components/checkout/CryptoPayPanel.tsx

@@ -11,15 +11,12 @@ import { getPaymentUrl } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
 import {
   useAccountWallet,
-  useB3Config,
   useIsMobile,
-  useModalStore,
   useSimTokenBalance,
   useTokenData,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { ShinyButton, TextShimmer } from "@b3dotfun/sdk/global-account/react";
-import { thirdwebB3Chain } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { Check, ChevronDown, ChevronsUpDown, Copy, Loader2, QrCode } from "lucide-react";
@@ -27,8 +24,10 @@ import { QRCodeSVG } from "qrcode.react";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConnectModal } from "thirdweb/react";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "../common/ChainTokenIcon";
+import { connectModalConfig } from "../common/CryptoPaymentMethod";
 import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CryptoPayPanelProps {
@@ -76,11 +75,10 @@ export function CryptoPayPanel({
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"] | null>(null);
   const [copied, setCopied] = useState(false);
 
-  const { address: walletAddress } = useAccountWallet();
-  const effectiveAddress = senderAddress || walletAddress;
-  const { partnerId } = useB3Config();
-  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { address: walletAddress, connectedEOAWallet } = useAccountWallet();
+  const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+  const effectiveAddress = connectedAddress || senderAddress;
+  const { connect: openConnectModal } = useConnectModal();
 
   const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
 
@@ -235,9 +233,8 @@ export function CryptoPayPanel({
   /* ------------------------------------------------------------------ */
   const [walletOrderId, setWalletOrderId] = useState<string | undefined>();
   const [isSendingDeposit, setIsSendingDeposit] = useState(false);
-  const [depositRejected, setDepositRejected] = useState(false);
   const depositSentRef = useRef(false);
-  const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+  const { switchChainAndExecuteWithEOA } = useUnifiedChainSwitchAndExecute();
 
   const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = useAnyspendCreateOrder({
     onSuccess: data => {
@@ -254,7 +251,7 @@ export function CryptoPayPanel({
 
   // Auto-send deposit tx once swap order is ready
   useEffect(() => {
-    if (!walletOat?.data?.order || depositSentRef.current || depositRejected) return;
+    if (!walletOat?.data?.order || depositSentRef.current) return;
     const order = walletOat.data.order;
     if (order.status !== "scanning_deposit_transaction") return;
     if (walletOat.data.depositTxs?.length) return;
@@ -264,8 +261,9 @@ export function CryptoPayPanel({
       try {
         setIsSendingDeposit(true);
         const amount = BigInt(order.srcAmount);
+        let txHash: string | undefined;
         if (isNativeToken(order.srcTokenAddress)) {
-          await switchChainAndExecute(order.srcChain, {
+          txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
             to: order.globalAddress as `0x${string}`,
             value: amount,
           });
@@ -275,30 +273,33 @@ export function CryptoPayPanel({
             functionName: "transfer",
             args: [order.globalAddress as `0x${string}`, amount],
           });
-          await switchChainAndExecute(order.srcChain, {
+          txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
             to: order.srcTokenAddress as `0x${string}`,
             data,
             value: BigInt(0),
           });
         }
+        if (!txHash) {
+          // User cancelled or tx failed — reset so they can retry
+          depositSentRef.current = false;
+          setWalletOrderId(undefined);
+          return;
+        }
         // Deposit sent — notify parent to transition to order lifecycle tracking
         if (walletOrderId) {
           onOrderCreatedRef.current?.(walletOrderId);
         }
       } catch (error: any) {
         depositSentRef.current = false;
-        const isUserRejection =
-          error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
-        if (isUserRejection) {
-          setDepositRejected(true);
-        }
+        // Reset order so user can retry
+        setWalletOrderId(undefined);
         onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
       } finally {
         setIsSendingDeposit(false);
       }
     };
     sendDeposit();
-  }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+  }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
 
   useOnOrderSuccess({
     orderData: walletOat,
@@ -309,8 +310,9 @@ export function CryptoPayPanel({
   const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
 
   const handleWalletPay = useCallback(() => {
-    if (!selectedSrcToken || !walletAddress) return;
+    if (!selectedSrcToken || !connectedAddress) return;
     depositSentRef.current = false;
+    setWalletOrderId(undefined);
     createSwapOrder({
       recipientAddress,
       orderType: "swap",
@@ -325,7 +327,7 @@ export function CryptoPayPanel({
     });
   }, [
     selectedSrcToken,
-    walletAddress,
+    connectedAddress,
     effectiveAddress,
     recipientAddress,
     selectedSrcChainId,
@@ -360,14 +362,30 @@ export function CryptoPayPanel({
     }
   };
 
-  const handleConnectWallet = () => {
-    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
-    setB3ModalOpen(true);
+  const [shouldAutoPay, setShouldAutoPay] = useState(false);
+
+  const handleConnectWallet = async () => {
+    try {
+      const wallet = await openConnectModal(connectModalConfig);
+      if (wallet) {
+        setShouldAutoPay(true);
+      }
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+    }
   };
 
+  // Auto-trigger payment after wallet connect
+  useEffect(() => {
+    if (shouldAutoPay && connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoadingAnyspendQuote) {
+      setShouldAutoPay(false);
+      handleWalletPay();
+    }
+  }, [shouldAutoPay, connectedAddress, selectedSrcToken, hasEnoughBalance, isLoadingAnyspendQuote, handleWalletPay]);
+
   const isLoading = isLoadingAnyspendQuote;
   const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-  const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+  const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
 
   const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
   const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
@@ -478,7 +496,7 @@ export function CryptoPayPanel({
 
       {/* ---- Insufficient balance warning ---- */}
       <AnimatePresence>
-        {walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (
+        {connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (
           <motion.p
             key="balance-warning"
             initial={{ opacity: 0, height: 0 }}
@@ -493,7 +511,7 @@ export function CryptoPayPanel({
       </AnimatePresence>
 
       {/* ---- Wallet Pay Button ---- */}
-      {!walletAddress ? (
+      {!connectedAddress ? (
         <ShinyButton
           accentColor={themeColor || "hsl(var(--as-brand))"}
           onClick={handleConnectWallet}

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

@@ -17,13 +17,21 @@ export enum CryptoPaymentMethodType {
   TRANSFER_CRYPTO = "transfer_crypto",
 }
 
-const recommendWallets = [
+export const recommendWallets = [
   createWallet("io.metamask"),
   createWallet("com.coinbase.wallet"),
   createWallet("me.rainbow"),
   createWallet("io.rabby"),
 ];
 
+export const connectModalConfig = {
+  client,
+  setActive: false as const,
+  size: "compact" as const,
+  showThirdwebBranding: false,
+  wallets: recommendWallets,
+};
+
 interface CryptoPaymentMethodProps {
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
@@ -65,13 +73,7 @@ export function CryptoPaymentMethod({
         disconnect(connectedEOAWallet);
       }
 
-      const wallet = await openConnectModal({
-        client,
-        setActive: false,
-        size: "compact",
-        showThirdwebBranding: false,
-        wallets: recommendWallets,
-      });
+      const wallet = await openConnectModal(connectModalConfig);
 
       if (wallet) {
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

package/src/global-account/react/components/LinkAccount/LinkedAccountItem.tsx

@@ -1,4 +1,5 @@
 import { Button, toast, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
 import { Copy, Loader2, UnlinkIcon } from "lucide-react";
 
@@ -55,7 +56,7 @@ const LinkedAccountItem = ({
     }
   };
 
-  const displayImageUrl = profileData?.avatar || profile.imageUrl;
+  const displayImageUrl = validateImageUrl(profileData?.avatar) || validateImageUrl(profile.imageUrl);
   const displayName = profileData?.name || displayTitle;
 
   return (

package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx

@@ -1,6 +1,7 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -29,8 +30,7 @@ const SettingsProfileCard = () => {
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // IPFSMediaRenderer will handle IPFS URL conversion and validation
-  const avatarSrc = user?.avatar || profile?.avatar;
+  const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
 
   // Get current username - prioritize user.username, fallback to profile data
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");

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

@@ -9,6 +9,7 @@ import {
   useSimBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -32,6 +33,7 @@ type SendStep = "recipient" | "token" | "amount" | "confirm" | "success";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }: { address: string; onClick: () => void }) {
   const { data: profileData } = useProfile({ address });
+  const validatedAvatar = validateImageUrl(profileData?.avatar);
 
   return (
     <button
@@ -39,8 +41,8 @@ function RecentAddressItem({ address, onClick }: { address: string; onClick: ()
       className="flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]"
     >
       {/* Avatar */}
-      {profileData?.avatar ? (
-        <img src={profileData.avatar} alt={profileData.name || address} className="h-10 w-10 rounded-full" />
+      {validatedAvatar ? (
+        <img src={validatedAvatar} alt={profileData?.name || address} className="h-10 w-10 rounded-full" />
       ) : (
         <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
           <Wallet className="h-5 w-5 text-[#a0a0ab]" />
@@ -84,6 +86,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
   const { data: validatedProfileData } = useProfile({
     address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
   });
+  const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
 
   // Address validation
   const handleRecipientAddressChange = (value: string) => {
@@ -290,10 +293,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   className="dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]"
                 >
                   {/* Avatar */}
-                  {validatedProfileData?.avatar ? (
+                  {validatedRecipientAvatar ? (
                     <img
-                      src={validatedProfileData.avatar}
-                      alt={validatedProfileData.name || recipientAddress}
+                      src={validatedRecipientAvatar}
+                      alt={validatedProfileData?.name || recipientAddress}
                       className="h-10 w-10 rounded-full"
                     />
                   ) : (

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

@@ -5,6 +5,7 @@ import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { CombinedProfile, Profile } from "../../hooks/useProfile";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
+import { validateImageUrl } from "../../utils/profileDisplay";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 import { Input } from "../ui/input";
 
@@ -283,7 +284,7 @@ export function SingleUserSearchSelector({
               {/* Avatar */}
               <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
                 <IPFSMediaRenderer
-                  src={searchResult.avatar}
+                  src={validateImageUrl(searchResult.avatar) ?? undefined}
                   alt={getDisplayName(searchResult)}
                   className="h-full w-full rounded-full object-cover"
                 />