@b3dotfun/sdk 0.1.1-test.0 → 0.1.1

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -61,7 +61,7 @@ function AnySpend(props) {
 function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
-    const { partnerId } = (0, react_2.useB3)();
+    const { partnerId } = (0, react_2.useB3Config)();
     const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
@@ -831,7 +831,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     navigateBack();
                     // Reset payment methods when going back
                     resetPaymentMethods();
-                }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel })) }) }));
+                }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs

package/dist/cjs/anyspend/react/components/AnySpendDeposit.d.ts

@@ -35,10 +35,10 @@ export interface AnySpendDepositProps {
     sourceTokenAddress?: string;
     /** Source chain ID to pre-select. If not provided, shows chain selection */
     sourceTokenChainId?: number;
-    /** The destination token to receive */
-    destinationToken: components["schemas"]["Token"];
+    /** The destination token address */
+    destinationTokenAddress: string;
     /** The destination chain ID */
-    destinationChainId: number;
+    destinationTokenChainId: number;
     /** Callback when deposit succeeds */
     onSuccess?: (amount: string) => void;
     /** Callback for opening a custom modal (e.g., for special token handling) */
@@ -89,6 +89,11 @@ export interface AnySpendDepositProps {
     customRecipientLabel?: string;
     /** Custom label for the return home button (overrides "Return to Home" / "Close") */
     returnHomeLabel?: string;
+    /** Whether the deposit requires a custom function (uses AnySpendCustomExactIn).
+     * When false, uses simple swap flow (AnySpend).
+     * Defaults to false.
+     */
+    isCustomDeposit?: boolean;
 }
 /**
  * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
@@ -97,8 +102,8 @@ export interface AnySpendDepositProps {
  * // Simple deposit with chain selection
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  *
@@ -106,8 +111,8 @@ export interface AnySpendDepositProps {
  * // Skip chain selection by providing sourceTokenChainId
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   sourceTokenChainId={base.id}
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
@@ -116,8 +121,8 @@ export interface AnySpendDepositProps {
  * // Deposit with custom contract
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   depositContractConfig={{
  *     contractAddress: "0x...",
  *     functionName: "depositFor",
@@ -125,4 +130,4 @@ export interface AnySpendDepositProps {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/anyspend/react/components/AnySpendDeposit.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendDeposit = AnySpendDeposit;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
 const react_2 = require("@web3icons/react");
@@ -70,8 +69,8 @@ function ChainIcon({ chainId, className }) {
  * // Simple deposit with chain selection
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  *
@@ -79,8 +78,8 @@ function ChainIcon({ chainId, className }) {
  * // Skip chain selection by providing sourceTokenChainId
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   sourceTokenChainId={base.id}
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
@@ -89,8 +88,8 @@ function ChainIcon({ chainId, className }) {
  * // Deposit with custom contract
  * <AnySpendDeposit
  *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
+ *   destinationTokenAddress="0x..."
+ *   destinationTokenChainId={base.id}
  *   depositContractConfig={{
  *     contractAddress: "0x...",
  *     functionName: "depositFor",
@@ -98,7 +97,7 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }) {
+function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, }) {
     const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
     const eoaAddress = connectedEOAWallet?.getAccount()?.address;
     // Determine if we should show chain selection
@@ -106,6 +105,17 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     const [step, setStep] = (0, react_3.useState)(shouldShowChainSelection ? "select-chain" : "deposit");
     const [selectedChainId, setSelectedChainId] = (0, react_3.useState)(initialSourceChainId);
     const [paymentType, setPaymentType] = (0, react_3.useState)(initialPaymentType ?? "crypto");
+    // Fetch destination token data
+    const { data: destinationTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    // Construct full destination token object
+    const destinationToken = (0, react_3.useMemo)(() => ({
+        address: destinationTokenAddress,
+        chainId: destinationTokenChainId,
+        symbol: destinationTokenData?.symbol ?? "",
+        name: destinationTokenData?.name ?? "",
+        decimals: destinationTokenData?.decimals ?? 18,
+        metadata: { logoURI: destinationTokenData?.logoURI },
+    }), [destinationTokenAddress, destinationTokenChainId, destinationTokenData]);
     // Fetch balances for EOA wallet
     const { data: balanceData, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(shouldShowChainSelection ? eoaAddress : undefined, supportedChains.map(c => c.id));
     // Group balances by chain and calculate total USD value per chain
@@ -148,7 +158,7 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     }, [chainBalances]);
     if (!recipientAddress)
         return null;
-    const tokenSymbol = destinationToken.symbol ?? "TOKEN";
+    const tokenSymbol = destinationToken.symbol || "TOKEN";
     // Determine order type based on config
     const effectiveOrderType = orderType ?? (depositContractConfig ? "custom_exact_in" : "swap");
     // Default header if not provided
@@ -177,14 +187,12 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     };
     // Chain selection view
     if (step === "select-chain") {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [(0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "mt-2" })] })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [(0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, className: "mt-2" })] })] }));
     }
     // QR Deposit view
     if (step === "qr-deposit") {
-        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
+        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
     }
-    // Check if destination is Hyperliquid
-    const isHyperliquidDeposit = destinationChainId === anyspend_1.HYPERLIQUID_CHAIN_ID;
     // Deposit view
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isHyperliquidDeposit ? ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationToken.address, destinationTokenChainId: destinationChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "px-4 pb-4" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, className: "px-4 pb-4" })] }));
 }

package/dist/cjs/anyspend/react/components/QRDeposit.js

@@ -11,8 +11,10 @@ const qrcode_react_1 = require("qrcode.react");
 const react_2 = require("react");
 const useAnyspendOrderAndTransactions_1 = require("../hooks/useAnyspendOrderAndTransactions");
 const useCreateDepositFirstOrder_1 = require("../hooks/useCreateDepositFirstOrder");
+const useWatchTransfer_1 = require("../hooks/useWatchTransfer");
 const ChainTokenIcon_1 = require("./common/ChainTokenIcon");
 const OrderDetails_1 = require("./common/OrderDetails");
+const TransferResultScreen_1 = require("./common/TransferResultScreen");
 const WarningText_1 = require("./common/WarningText");
 // Default source token: ETH on Base
 const DEFAULT_ETH_ON_BASE = {
@@ -45,9 +47,24 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
     const [globalAddress, setGlobalAddress] = (0, react_2.useState)();
     const orderCreatedRef = (0, react_2.useRef)(false);
     const onSuccessCalled = (0, react_2.useRef)(false);
+    const [transferResult, setTransferResult] = (0, react_2.useState)(null);
     // Source token/chain as state (can be changed by user)
     const [sourceChainId, setSourceChainId] = (0, react_2.useState)(sourceChainIdProp ?? 8453);
     const [sourceToken, setSourceToken] = (0, react_2.useState)(sourceTokenProp ?? DEFAULT_ETH_ON_BASE);
+    // Check if this is a pure transfer (same chain and token)
+    const isPureTransfer = (0, anyspend_1.isSameChainAndToken)(sourceChainId, sourceToken.address, destinationChainId, destinationToken.address);
+    // Watch for pure transfers (same chain and token)
+    const { isWatching: isWatchingTransfer } = (0, useWatchTransfer_1.useWatchTransfer)({
+        address: recipientAddress,
+        chainId: sourceChainId,
+        tokenAddress: sourceToken.address,
+        tokenDecimals: sourceToken.decimals,
+        enabled: isPureTransfer && !transferResult,
+        onTransferDetected: result => {
+            setTransferResult(result);
+            onSuccess?.();
+        },
+    });
     // Handle token selection from TokenSelector
     const handleTokenSelect = (newToken) => {
         const token = {
@@ -62,6 +79,7 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
         setOrderId(undefined);
         setGlobalAddress(undefined);
         orderCreatedRef.current = false;
+        setTransferResult(null);
         // Update token and chain
         setSourceChainId(newToken.chainId);
         setSourceToken(token);
@@ -82,10 +100,12 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
     });
     // Fetch order status
     const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
-    // Create order on mount
+    // Create order on mount (skip for pure transfers)
     (0, react_2.useEffect)(() => {
         if (orderCreatedRef.current)
             return;
+        if (isPureTransfer)
+            return; // Skip order creation for pure transfers
         orderCreatedRef.current = true;
         createOrder({
             recipientAddress,
@@ -105,6 +125,7 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
         creatorAddress,
         depositContractConfig,
         createOrder,
+        isPureTransfer,
     ]);
     // Call onSuccess when order is executed
     (0, react_2.useEffect)(() => {
@@ -118,7 +139,8 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
     (0, react_2.useEffect)(() => {
         onSuccessCalled.current = false;
     }, [orderId]);
-    const displayAddress = globalAddress || recipientAddress;
+    // For pure transfers, always use recipient address; for orders, use global address
+    const displayAddress = isPureTransfer ? recipientAddress : globalAddress || recipientAddress;
     const handleCopyAddress = async () => {
         if (displayAddress) {
             await navigator.clipboard.writeText(displayAddress);
@@ -134,13 +156,17 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
         setCopied(false);
         onClose?.();
     };
+    // Show transfer result screen for completed pure transfers
+    if (isPureTransfer && transferResult) {
+        return ((0, jsx_runtime_1.jsx)(TransferResultScreen_1.TransferResultScreen, { mode: mode, transferResult: transferResult, token: sourceToken, chainId: sourceChainId, recipientAddress: recipientAddress, onBack: onBack, onClose: onClose }));
+    }
     // Show order details if order has deposits or is being processed
     if (oat?.data && oat.data.depositTxs && oat.data.depositTxs.length > 0) {
         return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-order-details-content relative flex flex-col gap-4", children: (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: handleBack }) }) }));
     }
-    // Show loading state while creating order (but not if we already have an orderId)
-    if (isCreatingOrder && !orderId) {
+    // Show loading state while creating order (but not if we already have an orderId or for pure transfers)
+    if (isCreatingOrder && !orderId && !isPureTransfer) {
         return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-qr-loading-text text-as-secondary text-sm", children: "Creating deposit order..." })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-deposit-content flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleBack, className: "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-5" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-token-selector flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { chainIdsFilter: (0, anyspend_1.getAvailableChainIds)("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", role: "combobox", className: "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId }), (0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-deposit-content flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleBack, className: "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-5" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-token-selector flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { chainIdsFilter: (0, anyspend_1.getAvailableChainIds)("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", role: "combobox", className: "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId }), (0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), isPureTransfer && isWatchingTransfer && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-blue-500", children: "Watching for incoming transfer..." })] })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
 }

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

@@ -33,12 +33,16 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Use custom hook to determine wallet display logic
     const { shouldShowConnectedEOA } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
+    // Get modal store to block parent modal closing while connect modal is open
+    const setClosable = (0, react_1.useModalStore)(state => state.setClosable);
     // Handle wallet connection using thirdweb modal
     const handleConnectWallet = async () => {
+        // Block parent B3 modal from closing while thirdweb connect modal is open
+        setClosable(false);
         try {
             // Disconnect current wallet before connecting a new one
             if (connectedEOAWallet) {
-                await disconnect(connectedEOAWallet);
+                disconnect(connectedEOAWallet);
             }
             const wallet = await openConnectModal({
                 client: thirdweb_1.client,
@@ -48,7 +52,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                 wallets: recommendWallets,
             });
             if (wallet) {
-                // setActiveWallet(wallet);
                 setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 react_1.toast.success("Wallet connected");
@@ -68,6 +71,10 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                 }
             }
         }
+        finally {
+            // Always re-enable parent modal closing when connect modal closes
+            setClosable(true);
+        }
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                         react_1.toast.success("Multiple test 1");

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

@@ -141,7 +141,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
     // Get theme from B3Provider context
-    const { theme } = (0, react_1.useB3)();
+    const { theme } = (0, react_1.useB3Config)();
     const colorMode = theme || "light";
     // Read crypto payment method from URL parameters
     const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod");

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

@@ -16,7 +16,7 @@ const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
 const HowItWorks_1 = __importDefault(require("./HowItWorks"));
 const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
 function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
-    const { theme, stripePublishableKey } = (0, react_2.useB3)();
+    const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = (0, react_1.useStripeClientSecret)(stripePaymentIntentId);
     if (isLoadingStripeClientSecret) {

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

@@ -0,0 +1,22 @@
+import { components } from "../../../../anyspend/types/api";
+import { TransferResult } from "../../hooks/useWatchTransfer";
+export interface TransferResultScreenProps {
+    mode?: "modal" | "page";
+    /** The transfer result containing amount info */
+    transferResult: TransferResult;
+    /** The token that was transferred */
+    token: components["schemas"]["Token"];
+    /** The chain ID where the transfer happened */
+    chainId: number;
+    /** The recipient address */
+    recipientAddress: string;
+    /** Callback when back/close button is clicked */
+    onBack?: () => void;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * A component for displaying the result of a pure transfer (same chain, same token).
+ * Shows the transferred amount with success styling.
+ */
+export declare function TransferResultScreen({ mode, transferResult, token, chainId, recipientAddress, onBack, onClose, }: TransferResultScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransferResultScreen = TransferResultScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const cn_1 = require("../../../../shared/utils/cn");
+const lucide_react_1 = require("lucide-react");
+const ChainTokenIcon_1 = require("./ChainTokenIcon");
+/**
+ * A component for displaying the result of a pure transfer (same chain, same token).
+ * Shows the transferred amount with success styling.
+ */
+function TransferResultScreen({ mode = "modal", transferResult, token, chainId, recipientAddress, onBack, onClose, }) {
+    const chain = anyspend_1.ALL_CHAINS[chainId];
+    const handleClose = () => {
+        if (onClose) {
+            onClose();
+        }
+        else if (onBack) {
+            onBack();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-transfer-result font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-result-content flex flex-col items-center gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-success-icon bg-as-success-secondary flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-as-content-icon-success h-10 w-10" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-success-message flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "Transfer Received!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-center text-sm", children: "Your transfer has been successfully received." })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-amount border-as-border-secondary bg-as-surface-secondary flex w-full flex-col items-center gap-3 rounded-xl border p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: chain?.logoUrl, tokenUrl: token.metadata?.logoURI, className: "h-10 min-h-10 w-10 min-w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: [transferResult.formattedAmount, " ", token.symbol] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-sm", children: ["on ", chain?.name ?? "Unknown Chain"] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-recipient flex w-full flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary text-xs", children: "Received at" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary break-all font-mono text-sm", children: recipientAddress })] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "anyspend-transfer-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-medium text-white transition-all hover:opacity-90", children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }) }));
+}

package/dist/cjs/anyspend/react/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";
+export * from "./useWatchTransfer";

package/dist/cjs/anyspend/react/hooks/index.js

@@ -31,3 +31,4 @@ __exportStar(require("./useRecipientAddressState"), exports);
 __exportStar(require("./useSigMint"), exports);
 __exportStar(require("./useStripeClientSecret"), exports);
 __exportStar(require("./useStripeSupport"), exports);
+__exportStar(require("./useWatchTransfer"), exports);

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -17,7 +17,7 @@ const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId
  */
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
-    const { partnerId } = (0, react_1.useB3)();
+    const { partnerId } = (0, react_1.useB3Config)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOrder.js

@@ -15,7 +15,7 @@ const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId
  */
 function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
-    const { partnerId } = (0, react_1.useB3)();
+    const { partnerId } = (0, react_1.useB3Config)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data

package/dist/cjs/anyspend/react/hooks/useCreateDepositFirstOrder.js

@@ -12,7 +12,7 @@ const react_2 = require("react");
  * This order type doesn't require srcAmount - the user deposits tokens after the order is created.
  */
 function useCreateDepositFirstOrder({ onSuccess, onError } = {}) {
-    const { partnerId } = (0, react_1.useB3)();
+    const { partnerId } = (0, react_1.useB3Config)();
     const { data: fpData } = (0, fingerprintjs_pro_react_1.useVisitorData)({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
         requestId: fpData.requestId,

package/dist/cjs/anyspend/react/hooks/useValidatedClientReferenceId.js

@@ -9,7 +9,7 @@ const react_2 = require("react");
  * Gets the createClientReferenceId function from B3 context and validates the result
  */
 function useValidatedClientReferenceId() {
-    const { createClientReferenceId } = (0, react_1.useB3)();
+    const { createClientReferenceId } = (0, react_1.useB3Config)();
     const createValidatedClientReferenceId = (0, react_2.useCallback)(async (params) => {
         // If no function provided, return undefined
         if (!createClientReferenceId) {

package/dist/cjs/anyspend/react/hooks/useWatchTransfer.d.ts

@@ -0,0 +1,41 @@
+export interface TransferResult {
+    amount: string;
+    formattedAmount: string;
+    txHash?: string;
+    timestamp: number;
+}
+export interface UseWatchTransferProps {
+    /** Address to watch for incoming transfers */
+    address: string;
+    /** Chain ID to watch on */
+    chainId: number;
+    /** Token address (use zero address for native token) */
+    tokenAddress: string;
+    /** Token decimals */
+    tokenDecimals: number;
+    /** Whether watching is enabled */
+    enabled?: boolean;
+    /** Callback when a transfer is detected */
+    onTransferDetected?: (result: TransferResult) => void;
+}
+/**
+ * Hook to watch for incoming transfers to an address by monitoring balance changes.
+ * When a transfer is detected (balance increases), it captures the amount and notifies.
+ */
+export declare function useWatchTransfer({ address, chainId, tokenAddress, tokenDecimals, enabled, onTransferDetected, }: UseWatchTransferProps): {
+    /** Whether currently watching for transfers */
+    isWatching: boolean;
+    /** The detected transfer result, if any */
+    transferResult: TransferResult | null;
+    /** Whether a transfer has been detected */
+    hasTransfer: boolean;
+    /** Reset and start watching again */
+    reset: () => void;
+    /** Manually refetch balance */
+    refetchBalance: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<{
+        decimals: number;
+        formatted: string;
+        symbol: string;
+        value: bigint;
+    }, import("viem").GetBalanceErrorType>>;
+};