@b3dotfun/sdk 0.0.33-alpha.5 → 0.0.33-alpha.6

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

@@ -0,0 +1,12 @@
+import { components } from "../../../../anyspend/types/api";
+interface InsufficientDepositPaymentProps {
+    order: components["schemas"]["Order"];
+    srcToken: components["schemas"]["Token"];
+    depositDeficit: bigint;
+    phantomWalletAddress: string | null;
+    txLoading: boolean;
+    isSwitchingOrExecuting: boolean;
+    onPayment: () => Promise<void>;
+}
+export declare function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWalletAddress, txLoading, isSwitchingOrExecuting, onPayment, }: InsufficientDepositPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsufficientDepositPayment = InsufficientDepositPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const react_1 = require("../../../../global-account/react");
+const utils_1 = require("../../../../shared/utils");
+const chains_1 = require("viem/chains");
+const number_1 = require("../../../../shared/utils/number");
+const react_2 = require("@web3icons/react");
+const lucide_react_1 = require("lucide-react");
+const react_3 = require("motion/react");
+const qrcode_react_1 = require("qrcode.react");
+const sonner_1 = require("sonner");
+function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWalletAddress, txLoading, isSwitchingOrExecuting, onPayment, }) {
+    const depositDeficitAmount = (0, number_1.formatUnits)(depositDeficit.toString(), srcToken.decimals);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "insufficient-deposit-payment relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "insufficient-deposit-payment-text text-as-primary/50", children: "Please send remaining" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: depositDeficitAmount, onCopy: () => {
+                                    sonner_1.toast.success("Copied to clipboard");
+                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [depositDeficitAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                    sonner_1.toast.success("Copied to clipboard");
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "payment-buttons mt-4 flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                                        ? "Pay from Phantom Wallet"
+                                        : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsx)("div", { children: "Or" }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "qr-code flex flex-col items-center rounded-lg pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) })] })] }));
+}

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

@@ -27,6 +27,7 @@ const wagmi_1 = require("wagmi");
 const Accordion_1 = require("./Accordion");
 const ConnectWalletPayment_1 = __importDefault(require("./ConnectWalletPayment"));
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+const InsufficientDepositPayment_1 = require("./InsufficientDepositPayment");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentVendorUI_1 = __importDefault(require("./PaymentVendorUI"));
 const TransferCryptoDetails_1 = require("./TransferCryptoDetails");
@@ -159,22 +160,37 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
             : undefined;
         return roundTokenAmount(formattedSrcAmount);
     }, [order.srcAmount, srcToken]);
+    // Calculate deposit amounts - moved here to be used in useCallback hooks
+    const depositedAmount = (0, react_4.useMemo)(() => {
+        return depositTxs ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0)) : BigInt(0);
+    }, [depositTxs]);
+    const depositDeficit = (0, react_4.useMemo)(() => {
+        return BigInt(order.srcAmount) - depositedAmount;
+    }, [order.srcAmount, depositedAmount]);
+    const depositEnoughAmount = (0, react_4.useMemo)(() => {
+        return depositDeficit <= BigInt(0);
+    }, [depositDeficit]);
+    const formattedDepositDeficit = (0, react_4.useMemo)(() => {
+        return (0, number_1.formatTokenAmount)(BigInt(depositDeficit), srcToken.decimals);
+    }, [depositDeficit, srcToken.decimals]);
     // Unified payment handler for both EOA and AA wallets
     const handleUnifiedPaymentProcess = (0, react_4.useCallback)(async () => {
         let txData;
         let value;
         let to;
+        // Use the existing depositDeficit calculation to determine amount to send
+        const amountToSend = depositDeficit > BigInt(0) ? depositDeficit : BigInt(order.srcAmount);
         if ((0, anyspend_1.isNativeToken)(order.srcTokenAddress)) {
             // Native token transfer
             to = order.globalAddress;
-            value = BigInt(order.srcAmount);
+            value = amountToSend;
         }
         else {
             // ERC20 token transfer - encode the transfer function call using proper ABI
             txData = (0, viem_1.encodeFunctionData)({
                 abi: viem_1.erc20Abi,
                 functionName: "transfer",
-                args: [order.globalAddress, BigInt(order.srcAmount)],
+                args: [order.globalAddress, amountToSend],
             });
             to = order.srcTokenAddress;
             value = BigInt(0);
@@ -183,12 +199,14 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         if (txHash) {
             setTxHash(txHash);
         }
-    }, [order, switchChainAndExecuteWithEOA]);
+    }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
     // Main payment handler that triggers chain switch and payment
     const handlePayment = async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
         if (order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID) {
-            await initiatePhantomTransfer(order.srcAmount, order.srcTokenAddress, order.globalAddress);
+            // Use the existing depositDeficit calculation to determine amount to send
+            const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+            await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
         }
         else {
             // Use unified payment process for both EOA and AA wallets
@@ -261,12 +279,6 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
     const formattedActualDstAmount = actualDstAmount
         ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
-    const depositedAmount = depositTxs
-        ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
-        : BigInt(0);
-    const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
-    const depositEnoughAmount = depositDeficit <= BigInt(0);
-    const formattedDepositDeficit = (0, number_1.formatTokenAmount)(BigInt(depositDeficit), srcToken.decimals);
     const { text: statusText, status: statusDisplay } = (0, anyspend_1.getStatusDisplay)(order);
     const initiatePhantomTransfer = async (amountLamports, tokenAddress, recipientAddress) => {
         try {
@@ -475,7 +487,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                                             ? "Funding Tournament"
                                                             : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Waiting for payment`
-                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) })] }));
+                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && ((0, jsx_runtime_1.jsx)(InsufficientDepositPayment_1.InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                 // Transfer Crypto Payment Method - Show new card-based UI

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

@@ -0,0 +1,12 @@
+import { components } from "../../../../anyspend/types/api";
+interface InsufficientDepositPaymentProps {
+    order: components["schemas"]["Order"];
+    srcToken: components["schemas"]["Token"];
+    depositDeficit: bigint;
+    phantomWalletAddress: string | null;
+    txLoading: boolean;
+    isSwitchingOrExecuting: boolean;
+    onPayment: () => Promise<void>;
+}
+export declare function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWalletAddress, txLoading, isSwitchingOrExecuting, onPayment, }: InsufficientDepositPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
+import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "../../../../global-account/react/index.js";
+import { cn } from "../../../../shared/utils/index.js";
+import { b3 } from "viem/chains";
+import { formatUnits } from "../../../../shared/utils/number.js";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
+import { ChevronRight, Copy, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { QRCodeSVG } from "qrcode.react";
+import { toast } from "sonner";
+export function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWalletAddress, txLoading, isSwitchingOrExecuting, onPayment, }) {
+    const depositDeficitAmount = formatUnits(depositDeficit.toString(), srcToken.decimals);
+    return (_jsxs("div", { className: "insufficient-deposit-payment relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "insufficient-deposit-payment-text text-as-primary/50", children: "Please send remaining" }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: depositDeficitAmount, onCopy: () => {
+                                    toast.success("Copied to clipboard");
+                                }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("strong", { className: "border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [depositDeficitAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                    toast.success("Copied to clipboard");
+                }, children: _jsxs("div", { className: "payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [_jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), _jsx(Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs("div", { className: "payment-buttons mt-4 flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                                        ? "Pay from Phantom Wallet"
+                                        : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsx("div", { children: "Or" }), _jsx(motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: _jsxs("div", { className: "qr-code flex flex-col items-center rounded-lg pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) })] })] }));
+}

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

@@ -21,6 +21,7 @@ import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";
 import ConnectWalletPayment from "./ConnectWalletPayment.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+import { InsufficientDepositPayment } from "./InsufficientDepositPayment.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
 import PaymentVendorUI from "./PaymentVendorUI.js";
 import { TransferCryptoDetails } from "./TransferCryptoDetails.js";
@@ -153,22 +154,37 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             : undefined;
         return roundTokenAmount(formattedSrcAmount);
     }, [order.srcAmount, srcToken]);
+    // Calculate deposit amounts - moved here to be used in useCallback hooks
+    const depositedAmount = useMemo(() => {
+        return depositTxs ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0)) : BigInt(0);
+    }, [depositTxs]);
+    const depositDeficit = useMemo(() => {
+        return BigInt(order.srcAmount) - depositedAmount;
+    }, [order.srcAmount, depositedAmount]);
+    const depositEnoughAmount = useMemo(() => {
+        return depositDeficit <= BigInt(0);
+    }, [depositDeficit]);
+    const formattedDepositDeficit = useMemo(() => {
+        return formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
+    }, [depositDeficit, srcToken.decimals]);
     // Unified payment handler for both EOA and AA wallets
     const handleUnifiedPaymentProcess = useCallback(async () => {
         let txData;
         let value;
         let to;
+        // Use the existing depositDeficit calculation to determine amount to send
+        const amountToSend = depositDeficit > BigInt(0) ? depositDeficit : BigInt(order.srcAmount);
         if (isNativeToken(order.srcTokenAddress)) {
             // Native token transfer
             to = order.globalAddress;
-            value = BigInt(order.srcAmount);
+            value = amountToSend;
         }
         else {
             // ERC20 token transfer - encode the transfer function call using proper ABI
             txData = encodeFunctionData({
                 abi: erc20Abi,
                 functionName: "transfer",
-                args: [order.globalAddress, BigInt(order.srcAmount)],
+                args: [order.globalAddress, amountToSend],
             });
             to = order.srcTokenAddress;
             value = BigInt(0);
@@ -177,12 +193,14 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         if (txHash) {
             setTxHash(txHash);
         }
-    }, [order, switchChainAndExecuteWithEOA]);
+    }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
     // Main payment handler that triggers chain switch and payment
     const handlePayment = async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
         if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
-            await initiatePhantomTransfer(order.srcAmount, order.srcTokenAddress, order.globalAddress);
+            // Use the existing depositDeficit calculation to determine amount to send
+            const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+            await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
         }
         else {
             // Use unified payment process for both EOA and AA wallets
@@ -255,12 +273,6 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const formattedActualDstAmount = actualDstAmount
         ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
-    const depositedAmount = depositTxs
-        ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
-        : BigInt(0);
-    const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
-    const depositEnoughAmount = depositDeficit <= BigInt(0);
-    const formattedDepositDeficit = formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
     const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
     const initiatePhantomTransfer = async (amountLamports, tokenAddress, recipientAddress) => {
         try {
@@ -469,7 +481,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                             ? "Funding Tournament"
                                                             : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Waiting for payment`
-                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) })] }));
+                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && (_jsx(InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
     }
     return (_jsxs(_Fragment, { children: [statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                 // Transfer Crypto Payment Method - Show new card-based UI

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

@@ -0,0 +1,12 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+interface InsufficientDepositPaymentProps {
+    order: components["schemas"]["Order"];
+    srcToken: components["schemas"]["Token"];
+    depositDeficit: bigint;
+    phantomWalletAddress: string | null;
+    txLoading: boolean;
+    isSwitchingOrExecuting: boolean;
+    onPayment: () => Promise<void>;
+}
+export declare function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWalletAddress, txLoading, isSwitchingOrExecuting, onPayment, }: InsufficientDepositPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

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

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

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  ALL_CHAINS,
+  getChainName,
+  getPaymentUrl,
+  RELAY_ETH_ADDRESS,
+  RELAY_SOLANA_MAINNET_CHAIN_ID,
+} from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { b3 } from "viem/chains";
+
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
+import { ChevronRight, Copy, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { QRCodeSVG } from "qrcode.react";
+import { toast } from "sonner";
+
+interface InsufficientDepositPaymentProps {
+  order: components["schemas"]["Order"];
+  srcToken: components["schemas"]["Token"];
+  depositDeficit: bigint;
+  phantomWalletAddress: string | null;
+  txLoading: boolean;
+  isSwitchingOrExecuting: boolean;
+  onPayment: () => Promise<void>;
+}
+
+export function InsufficientDepositPayment({
+  order,
+  srcToken,
+  depositDeficit,
+  phantomWalletAddress,
+  txLoading,
+  isSwitchingOrExecuting,
+  onPayment,
+}: InsufficientDepositPaymentProps) {
+  const depositDeficitAmount = formatUnits(depositDeficit.toString(), srcToken.decimals);
+  return (
+    <div className="insufficient-deposit-payment relative flex w-full flex-1 flex-col">
+      <div className="flex flex-col gap-1">
+        <span className="insufficient-deposit-payment-text text-as-primary/50">Please send remaining</span>
+        <div className="flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0">
+          <CopyToClipboard
+            text={depositDeficitAmount}
+            onCopy={() => {
+              toast.success("Copied to clipboard");
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <strong className="border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl">
+                {depositDeficitAmount} {srcToken.symbol}
+              </strong>
+              <Copy className="text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" />
+            </div>
+          </CopyToClipboard>
+
+          <Badge variant="outline" className="flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm">
+            on {getChainName(order.srcChain)}
+            <img
+              src={ALL_CHAINS[order.srcChain].logoUrl}
+              alt={getChainName(order.srcChain)}
+              className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
+            />
+          </Badge>
+        </div>
+        <span className={"text-as-primary/50 mb-1 mt-2"}> to the address:</span>
+      </div>
+      <CopyToClipboard
+        text={order.globalAddress}
+        onCopy={() => {
+          toast.success("Copied to clipboard");
+        }}
+      >
+        <div className="payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200">
+          <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+            {order.globalAddress}
+          </div>
+          <Copy className="group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" />
+        </div>
+      </CopyToClipboard>
+
+      <div className="payment-buttons mt-4 flex w-full flex-col items-center gap-2">
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          textColor="text-white"
+          className="flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0"
+          disabled={txLoading || isSwitchingOrExecuting}
+          onClick={onPayment}
+        >
+          {txLoading ? (
+            <>
+              Transaction Pending
+              <Loader2 className="ml-2 h-5 w-5 animate-spin" />
+            </>
+          ) : (
+            <>
+              <span className="whitespace-nowrap pl-4 text-lg md:text-sm">
+                {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                  ? "Pay from Phantom Wallet"
+                  : "Pay from Connected Wallet"}
+              </span>
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </ShinyButton>
+
+        <div>Or</div>
+
+        <motion.div
+          initial={{ opacity: 0, filter: "blur(10px)" }}
+          animate={{ opacity: 1, filter: "blur(0px)" }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+          className="flex w-full items-center justify-evenly gap-4"
+        >
+          <div className="qr-code flex flex-col items-center rounded-lg pb-3">
+            <QRCodeSVG
+              value={getPaymentUrl(
+                order.globalAddress,
+                BigInt(depositDeficit),
+                order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
+                order.srcChain,
+                srcToken?.decimals,
+              )}
+              className="max-w-[200px]"
+            />
+            <div className="mt-3 flex items-center justify-center gap-2 text-sm">
+              <span className="label-style text-as-brand/70 text-sm">Scan with</span>
+              <TextLoop interval={3}>
+                <WalletMetamask className="h-5 w-5" variant="branded" />
+                <WalletCoinbase className="h-5 w-5" variant="branded" />
+                <WalletPhantom className="h-5 w-5" variant="branded" />
+                <WalletTrust className="h-5 w-5" variant="branded" />
+              </TextLoop>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

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

@@ -51,6 +51,7 @@ import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
 import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { InsufficientDepositPayment } from "./InsufficientDepositPayment";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import PaymentVendorUI from "./PaymentVendorUI";
 import { TransferCryptoDetails } from "./TransferCryptoDetails";
@@ -248,22 +249,42 @@ export const OrderDetails = memo(function OrderDetails({
     return roundTokenAmount(formattedSrcAmount);
   }, [order.srcAmount, srcToken]);
 
+  // Calculate deposit amounts - moved here to be used in useCallback hooks
+  const depositedAmount = useMemo(() => {
+    return depositTxs ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0)) : BigInt(0);
+  }, [depositTxs]);
+
+  const depositDeficit = useMemo(() => {
+    return BigInt(order.srcAmount) - depositedAmount;
+  }, [order.srcAmount, depositedAmount]);
+
+  const depositEnoughAmount = useMemo(() => {
+    return depositDeficit <= BigInt(0);
+  }, [depositDeficit]);
+
+  const formattedDepositDeficit = useMemo(() => {
+    return formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
+  }, [depositDeficit, srcToken.decimals]);
+
   // Unified payment handler for both EOA and AA wallets
   const handleUnifiedPaymentProcess = useCallback(async () => {
     let txData: `0x${string}` | undefined;
     let value: bigint;
     let to: `0x${string}`;
 
+    // Use the existing depositDeficit calculation to determine amount to send
+    const amountToSend = depositDeficit > BigInt(0) ? depositDeficit : BigInt(order.srcAmount);
+
     if (isNativeToken(order.srcTokenAddress)) {
       // Native token transfer
       to = order.globalAddress as `0x${string}`;
-      value = BigInt(order.srcAmount);
+      value = amountToSend;
     } else {
       // ERC20 token transfer - encode the transfer function call using proper ABI
       txData = encodeFunctionData({
         abi: erc20Abi,
         functionName: "transfer",
-        args: [order.globalAddress as `0x${string}`, BigInt(order.srcAmount)],
+        args: [order.globalAddress as `0x${string}`, amountToSend],
       });
       to = order.srcTokenAddress as `0x${string}`;
       value = BigInt(0);
@@ -274,13 +295,15 @@ export const OrderDetails = memo(function OrderDetails({
     if (txHash) {
       setTxHash(txHash as `0x${string}`);
     }
-  }, [order, switchChainAndExecuteWithEOA]);
+  }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
 
   // Main payment handler that triggers chain switch and payment
   const handlePayment = async () => {
     console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
     if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
-      await initiatePhantomTransfer(order.srcAmount, order.srcTokenAddress, order.globalAddress);
+      // Use the existing depositDeficit calculation to determine amount to send
+      const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+      await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
     } else {
       // Use unified payment process for both EOA and AA wallets
       await handleUnifiedPaymentProcess();
@@ -364,13 +387,6 @@ export const OrderDetails = memo(function OrderDetails({
     ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
     : undefined;
 
-  const depositedAmount = depositTxs
-    ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
-    : BigInt(0);
-  const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
-  const depositEnoughAmount = depositDeficit <= BigInt(0);
-  const formattedDepositDeficit = formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
-
   const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
 
   const initiatePhantomTransfer = async (amountLamports: string, tokenAddress: string, recipientAddress: string) => {
@@ -962,6 +978,19 @@ export const OrderDetails = memo(function OrderDetails({
           </AccordionItem>
         </Accordion>
 
+        {/* Show payment UI when deposit is not enough and order is not expired */}
+        {!depositEnoughAmount && order.status !== "expired" && (
+          <InsufficientDepositPayment
+            order={order}
+            srcToken={srcToken}
+            depositDeficit={depositDeficit}
+            phantomWalletAddress={phantomWalletAddress}
+            txLoading={txLoading}
+            isSwitchingOrExecuting={isSwitchingOrExecuting}
+            onPayment={handlePayment}
+          />
+        )}
+
         {/* <DelayedSupportMessage /> */}
       </>
     );