@b3dotfun/sdk 0.0.49-alpha.0 → 0.0.49-alpha.2

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

@@ -125,7 +125,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, }) {
+export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     // Get theme from B3Provider context
@@ -411,7 +411,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         }
     };
     if (refundTxs.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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)))
@@ -420,7 +420,7 @@ 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 order-details-close-btn 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(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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)))
@@ -445,7 +445,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                 }), _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 order-details-close-btn 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 (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content 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
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content 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)))
@@ -464,7 +464,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     // 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(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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"
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content 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"
@@ -491,7 +491,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                         ? centerTruncate(phantomWalletAddress, 6)
                                                         : centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", 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" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        _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: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets 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" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })), _jsxs("button", { className: "order-details-cancel-btn flex w-full items-center justify-center gap-2", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        _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: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets 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" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), _jsxs("button", { className: "order-details-cancel-btn flex w-full items-center justify-center gap-2", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));

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

@@ -13,6 +13,7 @@ interface OrderDetailsCollapsibleProps {
     className?: string;
     showTotal?: boolean;
     totalAmount?: string;
+    points?: number;
 }
 export declare const OrderDetailsCollapsible: import("react").NamedExoticComponent<OrderDetailsCollapsibleProps>;
 export {};

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "../../../../anyspend/index.js";
 import { CopyToClipboard } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
@@ -10,7 +10,7 @@ import { motion } from "motion/react";
 import { memo, useState } from "react";
 import { toast } from "sonner";
 import { b3 } from "viem/chains";
-export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, }) {
+export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, points, }) {
     const [showOrderDetails, setShowOrderDetails] = useState(true);
     // Calculate expected amount if not provided
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -33,5 +33,5 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points && points > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", points, " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

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

@@ -1,7 +1,7 @@
 import { components } from "../../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../../anyspend/types/api_req_res";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, onShowPointsDetail, customUsdInputValues, }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, onShowPointsDetail, onShowFeeDetail, customUsdInputValues, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
     selectedPaymentMethod?: FiatPaymentMethod;
@@ -18,5 +18,6 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
     hideDstToken?: boolean;
     anyspendQuote?: GetQuoteResponse;
     onShowPointsDetail?: () => void;
+    onShowFeeDetail?: () => void;
     customUsdInputValues?: string[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,44 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
+import { useCoinbaseOnrampOptions } from "../../../../anyspend/react/index.js";
 import { ALL_CHAINS } from "../../../../anyspend/utils/chain.js";
 import { Input, useGetGeo, useProfile } from "../../../../global-account/react/index.js";
 import { cn, formatUsername } from "../../../../shared/utils/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
-import { ChevronRight, Wallet } from "lucide-react";
+import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
 import { PointsBadge } from "./PointsBadge.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, onShowFeeDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
     const featureFlags = useFeatureFlags();
-    // Get geo-based onramp options to access fee information
-    const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
-    // Helper function to get fees from API data
+    // Helper function to get fees from anyspend quote
     const getFeeFromApi = (paymentMethod) => {
+        // Try to get fee from anyspend quote first (most accurate)
+        if (anyspendQuote?.data?.fee) {
+            const fee = anyspendQuote.data.fee;
+            if (fee.type === "stripeweb2_fee") {
+                // Calculate total fee in USD from originalAmount - finalAmount
+                const originalAmount = Number(fee.originalAmount) / 1e6; // Convert from wei to USD
+                const finalAmount = Number(fee.finalAmount) / 1e6;
+                return originalAmount - finalAmount;
+            }
+        }
+        // Fallback to payment method defaults
         switch (paymentMethod) {
             case FiatPaymentMethod.COINBASE_PAY:
-                // Coinbase doesn't provide fee info in API, return 0
-                return 0;
+                return 0; // Coinbase has no additional fees
             case FiatPaymentMethod.STRIPE:
-                // Get fee from Stripe API response
-                if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
-                    return parseFloat(stripeWeb2Support.formattedFeeUsd) || 0;
-                }
-                return null;
+                return null; // No quote available yet
             default:
-                return null; // No fee when no payment method selected
+                return null;
         }
     };
     // Helper function to get total amount from API (for Stripe) or calculate it (for others)
     const getTotalAmount = (paymentMethod) => {
         const baseAmount = parseFloat(srcAmountOnRamp) || 5;
-        const fee = getFeeFromApi(paymentMethod);
-        if (paymentMethod === FiatPaymentMethod.STRIPE && stripeWeb2Support && "formattedTotalUsd" in stripeWeb2Support) {
-            // Use the total from Stripe API if available
-            return parseFloat(stripeWeb2Support.formattedTotalUsd) || baseAmount;
+        // Try to get from anyspend quote first (most accurate)
+        if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee") {
+            return Number(anyspendQuote.data.fee.originalAmount) / 1e6; // Convert from wei to USD
         }
+        const fee = getFeeFromApi(paymentMethod);
         // For Coinbase or when fee is available, calculate manually
         if (fee !== null) {
             return baseAmount + fee;
@@ -75,10 +79,21 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
                             .filter(v => !isNaN(Number(v)))
                             .map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: (() => {
-                                                const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
-                                                return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
-                                            })() }), featureFlags.showPoints &&
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) })), featureFlags.showPoints &&
                                             anyspendQuote?.data?.pointsAmount &&
-                                            anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
+                                            anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
+                                            // For fiat payments, show the fee from the payment method
+                                            const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
+                                            if (fiatFee !== null && fiatFee > 0) {
+                                                return _jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", fiatFee.toFixed(2), " fee"] });
+                                            }
+                                            // For crypto payments (standard_fee), calculate from the quote
+                                            if (anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd) {
+                                                const cryptoFee = (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) / 10000;
+                                                if (cryptoFee > 0) {
+                                                    return _jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", cryptoFee.toFixed(2), " fee"] });
+                                                }
+                                            }
+                                            return null;
+                                        })()] })] }) })] })] }));
 }

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

@@ -92,7 +92,8 @@ function PanelOnrampPaymentInner(props) {
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("p", { className: "text-b3-react-foreground/60 text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                            10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
                                     (() => {
                                         const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
                                         const hasApplePay = coinbaseAvailablePaymentMethods.some(m => m.id === "APPLE_PAY");

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, ShinyButton } from "../../../../global-account/react/index.js";
+import { ShinyButton } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
-import { ArrowDown } from "lucide-react";
 import Link from "next/link";
 export function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [_jsx("div", { className: "flex w-full items-center justify-between", children: _jsxs(Button, { variant: "ghost", onClick: onBack, className: "text-as-primary/70 hover:text-as-primary flex items-center gap-2", children: [_jsx(ArrowDown, { className: "h-4 w-4 rotate-90" }), "Back"] }) }), _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { children: "\u2022 Higher volume = more points" }), _jsx("li", { children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] })] }));
+    return (_jsx("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { children: "\u2022 Higher volume = more points" }), _jsx("li", { children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
 }

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

@@ -8,7 +8,8 @@ export declare enum PanelView {
     RECIPIENT_SELECTION = 3,
     ORDER_DETAILS = 4,
     LOADING = 5,
-    POINTS_DETAIL = 6
+    POINTS_DETAIL = 6,
+    FEE_DETAIL = 7
 }
 interface UseAnyspendFlowProps {
     paymentType?: "crypto" | "fiat";
@@ -144,6 +145,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
             userBalance?: string;
             pointsAmount?: number;
             pointsMultiplier?: number;
+            fee: components["schemas"]["Fee"];
         };
         statusCode: number;
     } | undefined;

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

@@ -19,6 +19,7 @@ export var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 5] = "LOADING";
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
+    PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(PanelView || (PanelView = {}));
 export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
     const searchParams = useSearchParamsSSR();

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

@@ -13,6 +13,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -21,6 +22,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "swap";
         payload: import("../..").components["schemas"]["SwapPayload"];
@@ -39,6 +41,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -47,6 +50,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -65,6 +69,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -73,6 +78,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "custom";
         payload: import("../..").components["schemas"]["CustomPayload"];
@@ -91,6 +97,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -99,6 +106,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];
@@ -117,6 +125,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -125,6 +134,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "join_tournament";
         payload: import("../..").components["schemas"]["JoinTournamentPayload"];
@@ -143,6 +153,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -151,6 +162,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "fund_tournament";
         payload: import("../..").components["schemas"]["FundTournamentPayload"];
@@ -172,6 +184,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -180,6 +193,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "swap";
         payload: import("../..").components["schemas"]["SwapPayload"];
@@ -198,6 +212,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -206,6 +221,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -224,6 +240,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -232,6 +249,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "custom";
         payload: import("../..").components["schemas"]["CustomPayload"];
@@ -250,6 +268,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -258,6 +277,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];
@@ -276,6 +296,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -284,6 +305,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "join_tournament";
         payload: import("../..").components["schemas"]["JoinTournamentPayload"];
@@ -302,6 +324,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         createdAt: number;
         expiredAt: number;
         filledAt: number | null;
+        receivedDepositAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
@@ -310,6 +333,7 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         settlement: {
             actualDstAmount: string | null;
         } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "fund_tournament";
         payload: import("../..").components["schemas"]["FundTournamentPayload"];