@b3dotfun/sdk 0.0.48 → 0.0.49-alpha.1

package/dist/cjs/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/cjs/anyspend/react/components/common/PanelOnramp.js

@@ -14,34 +14,38 @@ const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
 const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
 const PointsBadge_1 = require("./PointsBadge");
-function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
+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 = (0, FeatureFlagsContext_1.useFeatureFlags)();
-    // Get geo-based onramp options to access fee information
-    const { stripeWeb2Support } = (0, react_1.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_1.FiatPaymentMethod.COINBASE_PAY:
-                // Coinbase doesn't provide fee info in API, return 0
-                return 0;
+                return 0; // Coinbase has no additional fees
             case FiatPaymentMethod_1.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_1.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;
@@ -78,10 +82,21 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
                             .filter(v => !isNaN(Number(v)))
                             .map(value => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: (() => {
-                                                const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.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 && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), featureFlags.showPoints &&
                                             anyspendQuote?.data?.pointsAmount &&
-                                            anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
+                                            anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
+                                            // For fiat payments, show the fee from the payment method
+                                            const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+                                            if (fiatFee !== null && fiatFee > 0) {
+                                                return (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", cryptoFee.toFixed(2), " fee"] });
+                                                }
+                                            }
+                                            return null;
+                                        })()] })] }) })] })] }));
 }

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

@@ -98,7 +98,8 @@ function PanelOnrampPaymentInner(props) {
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.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/cjs/anyspend/react/components/common/PointsDetailPanel.js

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

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

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenBalance = TokenBalance;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const token_1 = require("../../../../anyspend/utils/token");
 const react_1 = require("../../../../global-account/react");
 const viem_1 = require("viem");
 function TokenBalance({ token, walletAddress, onChangeInput, }) {
@@ -12,9 +14,24 @@ function TokenBalance({ token, walletAddress, onChangeInput, }) {
     const handlePercentageClick = (percentage) => {
         if (!rawBalance)
             return;
-        // Calculate the amount based on percentage of balance
-        // Multiply first, then divide to avoid BigInt truncation
-        const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / BigInt(100);
+        let amount;
+        if (percentage === 100) {
+            // For MAX button on native tokens, reserve gas for the transaction
+            if ((0, token_1.isNativeToken)(token.address)) {
+                const gasReserve = (0, chain_1.getNativeRequired)(token.chainId);
+                // Ensure we don't go negative
+                amount = rawBalance > gasReserve ? rawBalance - gasReserve : BigInt(0);
+            }
+            else {
+                // For ERC20 tokens, use full balance
+                amount = rawBalance;
+            }
+        }
+        else {
+            // Calculate the amount based on percentage of balance
+            // Multiply first, then divide to avoid BigInt truncation
+            amount = (rawBalance * BigInt(percentage)) / BigInt(100);
+        }
         onChangeInput((0, viem_1.formatUnits)(amount, token.decimals));
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-7 items-center justify-end gap-1", children: !isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 inline-flex rounded-lg text-sm", children: rawBalance ? `Balance: ${formattedBalance}` : `Balance: 0` }), !!rawBalance && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handlePercentageClick(100), className: "text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex cursor-pointer rounded-lg px-2 py-1 text-xs transition-colors", children: "MAX" }) }))] })) }, `balance-${token.address}-${token.chainId}`));

package/dist/cjs/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/cjs/anyspend/react/hooks/useAnyspendFlow.js

@@ -23,6 +23,7 @@ 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 || (exports.PanelView = PanelView = {}));
 function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();

package/dist/cjs/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"];