@b3dotfun/sdk 0.0.33 → 0.0.34-alpha.0

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

@@ -1,12 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, DEPOSIT_HYPE_ACTION, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
-import { useColorMode } from "@chakra-ui/react";
 import { createAssociatedTokenAccountInstruction, createTransferCheckedInstruction, getAssociatedTokenAddressSync, } from "@solana/spl-token";
 import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
@@ -22,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";
@@ -48,6 +48,9 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstT
             }
             actionText = order.metadata.action || `executed contract`;
             return `Successfully ${actionText}`;
+        case "hype_duel":
+            actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
+            return `Successfully ${actionText} to ${recipient}`;
         default:
             throw new Error("Invalid order type");
     }
@@ -124,9 +127,12 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
+export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
+    // Get theme from B3Provider context
+    const { theme } = useB3();
+    const colorMode = theme || "light";
     // Read crypto payment method from URL parameters
     const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod");
     const effectiveCryptoPaymentMethod = cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
@@ -143,7 +149,6 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const [showQRCode, setShowQRCode] = useState(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
     const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
-    const { colorMode } = useColorMode();
     const roundedUpSrcAmount = useMemo(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
         // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -152,22 +157,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);
@@ -176,12 +196,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
@@ -254,12 +276,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 {
@@ -392,8 +408,8 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             }
         }
     };
-    if (refundTxs) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "refund-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+    if (refundTxs.length > 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "refund-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { className: "pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTx => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
@@ -402,11 +418,13 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                             : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "execute-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "execute-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { className: "pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, _jsx(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, tx: relayTx, delay: 0.5, isProcessing: false }), _jsx(TransactionDetails, { title: order.type === "swap"
+                                            : null, relayTxs
+                                            ? relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, tx: relayTx, delay: 0.5, isProcessing: false }, relayTx.txHash)))
+                                            : null, _jsx(TransactionDetails, { title: order.type === "swap"
                                                 ? "Processed Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minted NFT"
@@ -423,40 +441,27 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                     centerTruncate,
                                 }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
-    if (relayTx && relayTx.status === "success") {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "more-details", children: [_jsx(AccordionTrigger, { children: "More Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+    if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
+        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "more-details", children: [_jsx(AccordionTrigger, { children: "More Details" }), _jsx(AccordionContent, { className: "pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, order.srcChain === order.dstChain ? (_jsx(TransactionDetails, { title: order.type === "swap"
-                                                ? "Processed Swap"
+                                            : null, relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && (_jsx(TransactionDetails, { title: order.type === "swap"
+                                                ? "Processing Swap"
                                                 : order.type === "mint_nft"
-                                                    ? "Minted NFT"
+                                                    ? "Minting NFT"
                                                     : order.type === "join_tournament"
-                                                        ? "Joined Tournament"
+                                                        ? "Joining Tournament"
                                                         : order.type === "fund_tournament"
-                                                            ? "Funded Tournament"
-                                                            : "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 })) : (_jsxs(_Fragment, { children: [_jsx(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 }), _jsx(TransactionDetails, { title: order.type === "swap"
-                                                        ? "Processing Swap"
-                                                        : order.type === "mint_nft"
-                                                            ? "Minting NFT"
-                                                            : order.type === "join_tournament"
-                                                                ? "Joining Tournament"
-                                                                : order.type === "fund_tournament"
-                                                                    ? "Funding Tournament"
-                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, relayTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
-                                    order,
-                                    tournament,
-                                    formattedActualDstAmount,
-                                    dstToken,
-                                    recipientName,
-                                    centerTruncate,
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                                            ? "Funding Tournament"
+                                                            : order.type === "hype_duel"
+                                                                ? "Depositing Hype Duel"
+                                                                : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: null, delay: 1 }))] }) })] }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
     if (depositTxs?.length || waitingForDeposit) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "deposit-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+        return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "deposit-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { className: "pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Received payment`
                                                 : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === "swap"
                                                 ? "Processing Swap"
@@ -468,7 +473,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/esm/anyspend/react/components/common/OrderStatus.js

@@ -29,10 +29,10 @@ export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaym
             return _jsx(StepProgress, { steps: paymentSteps, currentStepIndex: 0 });
         }
     }
-    if (["relay", "sending_token_from_vault"].includes(order.status)) {
+    if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
         return _jsx(StepProgress, { steps: paymentSteps, currentStepIndex: 1 });
     }
-    if (!isComplete && displayStatus !== "failure") {
+    if (selectedCryptoPaymentMethod === "transfer_crypto" && order.status === "scanning_deposit_transaction") {
         return null;
     }
     return (_jsx("div", { className: "flex items-center justify-center gap-2", children: isComplete ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`, children: _jsx(Check, { className: "text-as-content-icon-success h-6 w-6" }) }), _jsx("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), _jsx("div", { className: "text-as-tertiarry mt-1 text-center", children: description })] })) : (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base", children: _jsx(X, { className: "text-as-content-icon-error h-5 w-5" }) }), _jsx("div", { className: "font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold", children: text }), _jsx("div", { className: "text-as-tertiarry text-center", style: { whiteSpace: "normal" }, children: description })] })) }));

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -15,7 +15,7 @@ interface UseAnyspendFlowProps {
     loadOrder?: string;
     isDepositMode?: boolean;
     onOrderSuccess?: (orderId: string) => void;
-    onTransactionSuccess?: () => void;
+    onTransactionSuccess?: (amount?: string) => void;
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
     slippage?: number;
@@ -31,10 +31,10 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
         message: string;
         data: {
             order: components["schemas"]["Order"];
-            depositTxs: components["schemas"]["DepositTx"][] | null;
-            relayTx: components["schemas"]["RelayTx"] | null;
+            depositTxs: components["schemas"]["DepositTx"][];
+            relayTxs: components["schemas"]["RelayTx"][];
             executeTx: components["schemas"]["ExecuteTx"] | null;
-            refundTxs: components["schemas"]["RefundTx"][] | null;
+            refundTxs: components["schemas"]["RefundTx"][];
         };
         statusCode: number;
     } | undefined;

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js

@@ -186,9 +186,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     useEffect(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Order executed successfully");
-            onTransactionSuccess?.();
+            // just get the payload.amount if available from custompayload
+            const amount = oat.data.order.payload?.amount;
+            onTransactionSuccess?.(amount);
         }
-    }, [oat?.data?.order.status, onTransactionSuccess]);
+    }, [oat?.data?.order.status, oat?.data?.order.payload, onTransactionSuccess]);
     return {
         // State
         activePanel,

package/dist/esm/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts

@@ -4,10 +4,10 @@ export declare function useAnyspendOrderAndTransactions(orderId: string | undefi
         message: string;
         data: {
             order: import("../..").components["schemas"]["Order"];
-            depositTxs: import("../..").components["schemas"]["DepositTx"][] | null;
-            relayTx: import("../..").components["schemas"]["RelayTx"] | null;
+            depositTxs: import("../..").components["schemas"]["DepositTx"][];
+            relayTxs: import("../..").components["schemas"]["RelayTx"][];
             executeTx: import("../..").components["schemas"]["ExecuteTx"] | null;
-            refundTxs: import("../..").components["schemas"]["RefundTx"][] | null;
+            refundTxs: import("../..").components["schemas"]["RefundTx"][];
         };
         statusCode: number;
     } | undefined;
@@ -18,10 +18,10 @@ export declare function useAnyspendOrderAndTransactions(orderId: string | undefi
         message: string;
         data: {
             order: import("../..").components["schemas"]["Order"];
-            depositTxs: import("../..").components["schemas"]["DepositTx"][] | null;
-            relayTx: import("../..").components["schemas"]["RelayTx"] | null;
+            depositTxs: import("../..").components["schemas"]["DepositTx"][];
+            relayTxs: import("../..").components["schemas"]["RelayTx"][];
             executeTx: import("../..").components["schemas"]["ExecuteTx"] | null;
-            refundTxs: import("../..").components["schemas"]["RefundTx"][] | null;
+            refundTxs: import("../..").components["schemas"]["RefundTx"][];
         };
         statusCode: number;
     }, Error>>;

package/dist/esm/anyspend/react/hooks/useAnyspendOrderHistory.d.ts

@@ -8,7 +8,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -30,7 +30,29 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+    } & {
+        type: "hype_duel";
+        payload: import("../..").components["schemas"]["HypeDuelPayload"];
+        metadata: import("../..").components["schemas"]["HypeDuelMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -52,7 +74,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -74,7 +96,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -96,7 +118,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -121,7 +143,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -143,7 +165,29 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+    } & {
+        type: "hype_duel";
+        payload: import("../..").components["schemas"]["HypeDuelPayload"];
+        metadata: import("../..").components["schemas"]["HypeDuelMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -165,7 +209,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -187,7 +231,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
@@ -209,7 +253,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         srcTokenAddress: string;
         dstTokenAddress: string;
         srcAmount: string;
-        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executed" | "refunding" | "refunded" | "failure";
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;

package/dist/esm/anyspend/react/hooks/useAnyspendQuote.js

@@ -11,7 +11,7 @@ export function useAnyspendQuote(req) {
             req.dstChain &&
             req.srcTokenAddress &&
             req.dstTokenAddress &&
-            BigInt(req.type === "swap"
+            BigInt(req.type === "swap" || req.type === "hype_duel"
                 ? req.amount
                 : req.type === "mint_nft"
                     ? req.price