@b3dotfun/sdk 0.0.16 → 0.0.17-alpha.0

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

@@ -1,14 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCoinbaseOnrampOptions } from "../../../../anyspend/react/index.js";
-import { Input, useGetGeo } from "../../../../global-account/react/index.js";
-import { AnimatePresence, motion } from "motion/react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
+import { ALL_CHAINS } from "../../../../anyspend/utils/chain.js";
+import { Input, useGetGeo, useProfile } from "../../../../global-account/react/index.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
-import { PaymentOptions } from "./PaymentOptions.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
+import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, }) {
+    // Get geo-based onramp options to access fee information
+    const { stripeWeb2Support } = useGeoOnrampOptions(true, srcAmountOnRamp);
+    // Helper function to get fees from API data
+    const getFeeFromApi = (paymentMethod) => {
+        switch (paymentMethod) {
+            case FiatPaymentMethod.COINBASE_PAY:
+                // Coinbase doesn't provide fee info in API, return 0
+                return 0;
+            case FiatPaymentMethod.STRIPE:
+                // Get fee from Stripe API response
+                if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
+                    return parseFloat(stripeWeb2Support.formattedFeeUsd) || 0;
+                }
+                return null;
+            default:
+                return null; // No fee when no payment method selected
+        }
+    };
+    // 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;
+        }
+        // For Coinbase or when fee is available, calculate manually
+        if (fee !== null) {
+            return baseAmount + fee;
+        }
+        // No fee available, return base amount
+        return baseAmount;
+    };
     // Get geo data for onramp availability
     const { geoData } = useGetGeo();
     const { coinbaseOnrampOptions } = useCoinbaseOnrampOptions(true, geoData?.country || "US");
+    // Get recipient profile for displaying name
+    const recipientProfile = useProfile({ address: _recipientAddress });
+    const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
     const amountInputRef = useRef(null);
     const handleAmountChange = (e) => {
         // Only allow numbers and decimal points
@@ -26,14 +65,13 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "bg-as-on-surface-1 relative flex w-full flex-col gap-4 rounded-2xl p-4 pb-6", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-primary/50 flex items-center text-sm", children: "Buy" }), _jsx(PaymentOptions, {})] }), _jsxs("div", { className: "hover:bg-as-brand/30 hover:border-as-brand border-as-stroke relative flex w-full flex-col items-center justify-center rounded-lg border transition-all duration-200", children: [parseFloat(srcAmountOnRamp) >
-                        (coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max
-                            ? parseFloat(coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000")
-                            : 25000) ? (_jsxs("p", { className: "label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent", children: ["Maximum amount is $", coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max ||
-                                "25,000"] })) : (_jsx("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), _jsxs("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [_jsx("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
-                                    width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-                                    minWidth: srcAmountOnRamp ? `auto` : "105px",
-                                } }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { animate: { opacity: !srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0 ? 1 : 0 }, exit: { opacity: 0 }, transition: { duration: 0.5, ease: "easeInOut" }, className: "border-b3-react-foreground/10 absolute bottom-3 left-1 h-1 w-[90%] rounded-full border-t-2 border-dashed bg-transparent" }) })] })] }), _jsx("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `rounded-lg border px-4 py-3 ${srcAmountOnRamp === value
-                        ? "border-as-brand bg-as-brand/30"
-                        : "border-as-stroke hover:border-as-brand hover:bg-as-brand/30"} transition-all duration-200`, children: ["$", value] }, value))) })] }));
+    return (_jsxs("div", { className: "bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(7), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+                                        width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
+                                    } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "25", "100"].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 && (_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(5), children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" }), _jsx("span", { className: "text-sm", children: recipientName || shortenAddress(_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", " ", 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: _jsx("div", { className: "flex items-center justify-between", children: (() => {
+                                const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
+                                const fee = getFeeFromApi(currentPaymentMethod);
+                                return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));
+                            })() }) })] })] }));
 }

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

@@ -5,7 +5,6 @@ import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 export function PanelOnrampPayment(props) {
@@ -14,17 +13,7 @@ export function PanelOnrampPayment(props) {
 }
 function PanelOnrampPaymentInner(props) {
     const { srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
-    // Use a stable amount for geo onramp options to prevent unnecessary refetches
-    const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-    const hasInitialized = useRef(false);
-    // Only update the stable amount on first render or when explicitly needed
-    useEffect(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { USDC_BASE } from "../../../../anyspend/index.js";
 import { STRIPE_CONFIG } from "../../../../anyspend/constants/index.js";
-import { useStripeClientSecret } from "../../../../anyspend/react/index.js";
-import { ShinyButton, useB3, useModalStore } from "../../../../global-account/react/index.js";
+import { OrderDetailsCollapsible, useStripeClientSecret } from "../../../../anyspend/react/index.js";
+import { ShinyButton, useB3, useModalStore, useProfile } from "../../../../global-account/react/index.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { formatStripeAmount } from "../../../../shared/utils/payment.utils.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
-import { HelpCircle, Info, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 import HowItWorks from "./HowItWorks.js";
@@ -125,6 +125,8 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             window.history.replaceState({}, "", url.toString());
         }
     }, [setB3ModalOpen]);
+    const profile = useProfile({ address: order.recipientAddress });
+    const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
     if (!stripeReady) {
         return _jsx(StripeLoadingState, {});
     }
@@ -152,12 +154,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             description: "After payment confirmation, your order will be processed and completed automatically",
         },
     ];
-    return (_jsxs("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [_jsxs("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [_jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "text-as-brand h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }) }), _jsxs("div", { children: [_jsx("div", { className: "text-as-primary text-sm font-medium", children: "Secured by Stripe" }), _jsx("div", { className: "text-as-primary/50 text-xs", children: "End-to-end encrypted payment" })] })] }), _jsxs("button", { type: "button", onClick: () => setShowHowItWorks(true), className: "text-as-primary/60 hover:text-as-primary flex items-center gap-1 text-xs transition-colors", children: [_jsx(HelpCircle, { className: "h-4 w-4" }), _jsx("span", { children: "How it works" })] })] }), amount && (_jsxs("div", { className: "border-as-stroke border-t pt-4", children: [_jsx("div", { className: "text-as-primary/50 mb-3 text-sm", children: "Payment Breakdown" }), (() => {
-                                        const originalAmount = Number(order.srcAmount) / 10 ** USDC_BASE.decimals;
-                                        const finalAmount = Number(amount);
-                                        const calculatedFee = finalAmount - originalAmount;
-                                        return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-as-primary/60", children: "Amount" }), _jsxs("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-as-primary/60", children: "Processing fee" }), _jsx(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: _jsx(Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), _jsxs("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), _jsx("div", { className: "border-as-stroke border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), _jsxs("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && (_jsx(AddressElement, { options: {
+    return (_jsxs("div", { className: "relative mt-1 flex w-full flex-1 flex-col items-center justify-center", children: [_jsxs("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: order.metadata.dstToken, tournament: order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined, nft: order.type === "mint_nft" ? order.metadata.nft : undefined, recipientName: recipientName, formattedExpectedDstAmount: formatTokenAmount(BigInt(order.srcAmount), order.metadata.dstToken.decimals), showTotal: true, totalAmount: amount ? `$${Number(amount).toFixed(2)}` : undefined }), _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && (_jsx(AddressElement, { options: {
                                     mode: "billing",
                                     fields: {
                                         phone: "always",
@@ -174,8 +171,3 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                     },
                                 } }))] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
 }
-// Add tooltip component
-function Tooltip({ children, content }) {
-    const [isVisible, setIsVisible] = useState(false);
-    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), className: "cursor-help", children: children }), isVisible && (_jsx("div", { className: "absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2", children: _jsxs("div", { className: "bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg", children: [_jsx("div", { className: "whitespace-pre-line", children: content }), _jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: _jsx("div", { className: "border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent" }) })] }) }))] }));
-}

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

@@ -0,0 +1,11 @@
+export interface Step {
+    id: string | number;
+    title: string;
+    description?: string;
+}
+export interface StepProgressProps {
+    steps: Step[];
+    currentStepIndex: number;
+    className?: string;
+}
+export declare function StepProgress({ steps, currentStepIndex, className }: StepProgressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { CheckIcon } from "lucide-react";
+export function StepProgress({ steps, currentStepIndex, className = "" }) {
+    const currentStep = steps[currentStepIndex];
+    return (_jsxs("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [_jsx("div", { className: "flex items-center gap-2", children: steps.map((step, index) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center", children: _jsx(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `relative flex h-10 w-10 items-center justify-center rounded-full ${index < currentStepIndex
+                                    ? "bg-as-success-secondary" // Completed step
+                                    : index === currentStepIndex
+                                        ? "border-as-border-secondary border-[3px]" // Current step
+                                        : "border-as-border-secondary border-[3px]" // Future step
+                                } `, children: index < currentStepIndex ? (
+                                // Completed step - show check icon
+                                _jsx(CheckIcon, { className: "text-as-content-icon-success h-6 w-6" })) : index === currentStepIndex ? (
+                                // Current step - show spinning border and step number
+                                _jsxs(_Fragment, { children: [_jsx("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), _jsx("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
+                                // Future step - show step number with disabled styling
+                                _jsx("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) }) }, step.id), index < steps.length - 1 && (_jsx("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => (_jsx("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && _jsx("p", { className: "text-as-primary/50 mt-1 text-sm", children: currentStep.description })] }))] }));
+}

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

@@ -0,0 +1,16 @@
+import { components } from "../../../../anyspend/types/api";
+type Order = components["schemas"]["Order"];
+type Token = components["schemas"]["Token"];
+type Tournament = components["schemas"]["Tournament"];
+type NFT = components["schemas"]["NFT"];
+interface TransferCryptoDetailsProps {
+    order: Order;
+    srcToken: Token;
+    dstToken: Token;
+    tournament?: Tournament;
+    nft?: NFT;
+    onBack: () => void;
+    recipientName?: string;
+}
+export declare const TransferCryptoDetails: import("react").NamedExoticComponent<TransferCryptoDetailsProps>;
+export {};

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS } from "../../../../anyspend/index.js";
+import { CopyToClipboard, ShinyButton, TextLoop } from "../../../../global-account/react/index.js";
+import { cn } from "../../../../shared/utils/index.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
+import { ChevronLeft, Copy } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { b3 } from "viem/chains";
+import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
+export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, }) {
+    const [timeLeft, setTimeLeft] = useState(0);
+    useEffect(() => {
+        const calculateTimeLeft = () => {
+            if (!order.expiredAt)
+                return 0;
+            const now = Date.now();
+            const expiredAt = new Date(order.expiredAt).getTime();
+            const diff = Math.max(0, Math.floor((expiredAt - now) / 1000));
+            return diff;
+        };
+        // Set initial time
+        setTimeLeft(calculateTimeLeft());
+        const timer = setInterval(() => {
+            setTimeLeft(calculateTimeLeft());
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [order.expiredAt]);
+    const formatTime = (seconds) => {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+    };
+    const totalTime = useMemo(() => {
+        if (!order.expiredAt)
+            return 15 * 60; // fallback to 15 minutes
+        const now = Date.now();
+        const expiredAt = new Date(order.expiredAt).getTime();
+        const createdAt = order.createdAt ? new Date(order.createdAt).getTime() : now;
+        return Math.max(0, Math.floor((expiredAt - createdAt) / 1000));
+    }, [order.expiredAt, order.createdAt]);
+    const roundedUpSrcAmount = useMemo(() => {
+        // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
+        // Use 21 significant digits (max allowed by Intl.NumberFormat)
+        const formattedSrcAmount = srcToken
+            ? formatTokenAmount(BigInt(order.srcAmount), srcToken.decimals, 21, false)
+            : undefined;
+        // Simple function to round up the amount (you may need to implement this based on your utils)
+        return formattedSrcAmount;
+    }, [order.srcAmount, srcToken]);
+    const expectedDstAmount = order.type === "mint_nft" ||
+        order.type === "join_tournament" ||
+        order.type === "fund_tournament" ||
+        order.type === "custom"
+        ? "0"
+        : order.payload.expectedDstAmount.toString();
+    const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
+    const handleCopyAddress = () => {
+        navigator.clipboard.writeText(order.globalAddress);
+        toast.success("Deposit address copied to clipboard");
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: _jsx(ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Transfer crypto" }), _jsxs("div", { className: "relative flex h-11 w-11 items-center justify-center", children: [_jsxs("svg", { className: "h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [_jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "text-gray-200" }), _jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
+                                            transition: "stroke-dashoffset 1s linear",
+                                        } })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "w-full", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
+                                                toast.success("Amount copied to clipboard");
+                                            }, children: _jsxs("div", { className: "flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "w-full", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _jsxs("div", { className: "border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [_jsx("div", { className: "border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress), className: "bg-as-surface-secondary max-h-48 max-w-48" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "text-as-brand/70 text-sm font-medium", 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: "flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "place-self-end", children: _jsx(Copy, { className: "group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsx("div", { className: "flex flex-col gap-3", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }) })] }));
+});

package/dist/esm/anyspend/react/components/index.d.ts

@@ -10,11 +10,14 @@ export { AnySpendTournament } from "./AnySpendTournament";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
 export { OrderDetails } from "./common/OrderDetails";
+export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
 export { OrderHistory } from "./common/OrderHistory";
 export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";
+export { TransferCryptoDetails } from "./common/TransferCryptoDetails";
 export { WebviewOnrampOrderStatus } from "./webview/WebviewOnrampOrderStatus";
 export { WebviewOnrampPayment } from "./webview/WebviewOnrampPayment";

package/dist/esm/anyspend/react/components/index.js

@@ -12,11 +12,14 @@ export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon.js";
 export { OrderDetails } from "./common/OrderDetails.js";
+export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible.js";
 export { OrderHistory } from "./common/OrderHistory.js";
 export { OrderHistoryItem } from "./common/OrderHistoryItem.js";
 export { OrderStatus } from "./common/OrderStatus.js";
 export { OrderToken } from "./common/OrderToken.js";
 export { OrderTokenAmount } from "./common/OrderTokenAmount.js";
+export { StepProgress } from "./common/StepProgress.js";
 export { TokenBalance } from "./common/TokenBalance.js";
+export { TransferCryptoDetails } from "./common/TransferCryptoDetails.js";
 export { WebviewOnrampOrderStatus } from "./webview/WebviewOnrampOrderStatus.js";
 export { WebviewOnrampPayment } from "./webview/WebviewOnrampPayment.js";

package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -85,18 +85,9 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
                             } }) })), error && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _jsx("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
 }
 function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
-    const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-    const hasInitialized = useRef(false);
     const [createdOrder, setCreatedOrder] = useState(null);
     const orderCreationAttempted = useRef(false);
-    // Only update the stable amount on first render or when explicitly needed
-    useEffect(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, stableAmountForGeo);
+    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, srcAmountOnRamp);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             setCreatedOrder(data.data);

package/dist/esm/anyspend/utils/format.d.ts

@@ -2,5 +2,6 @@ import { components } from "../../anyspend/types/api";
 export declare const getStatusDisplay: (order: components["schemas"]["Order"]) => {
     text: string;
     status: "processing" | "success" | "failure";
+    description?: string;
 };
 export declare const getErrorDisplay: (errorDetails: string) => string;

package/dist/esm/anyspend/utils/format.js

@@ -9,31 +9,44 @@ export const getStatusDisplay = (order) => {
             return {
                 text: "Awaiting Payment",
                 status: "processing",
+                description: "Complete your payment securely with Stripe to move forward",
             };
         case "expired":
-            return { text: "Order Expired", status: "failure" };
+            return {
+                text: "Order Expired",
+                status: "failure",
+                description: "This order is no longer valid because the order expired.",
+            };
         case "sending_token_from_vault":
             return { text: "Sending Token", status: "processing" };
         case "relay":
-            return { text: "Executing Order", status: "processing" };
+            return {
+                text: "Executing Order",
+                status: "processing",
+                description: "It will take approximately one minute to complete.",
+            };
         case "executed": {
-            const text = order.type === "swap"
-                ? "Swap Complete"
+            const { text, description } = order.type === "swap"
+                ? { text: "Swap Complete", description: "Your swap has been completed successfully." }
                 : order.type === "mint_nft"
-                    ? "NFT Minted"
+                    ? { text: "NFT Minted", description: "Your NFT has been minted" }
                     : order.type === "join_tournament"
-                        ? "Tournament Joined"
+                        ? { text: "Tournament Joined", description: "You have joined the tournament" }
                         : order.type === "fund_tournament"
-                            ? "Tournament Funded"
-                            : "Order Complete";
-            return { text, status: "success" };
+                            ? { text: "Tournament Funded", description: "You have funded the tournament" }
+                            : { text: "Order Complete", description: "Your order has been completed" };
+            return { text, status: "success", description };
         }
         case "refunding":
             return { text: "Order Refunding", status: "processing" };
         case "refunded":
             return { text: "Order Refunded", status: "failure" };
         case "failure":
-            return { text: "Order Failure", status: "failure" };
+            return {
+                text: "Order Failure",
+                status: "failure",
+                description: "This order has failed. Please try again or contact support.",
+            };
         default:
             throw new Error("Invalid order status");
     }

package/dist/esm/anyspend/utils/number.d.ts

@@ -11,3 +11,10 @@ export declare function escapeRegExp(string: string): string;
  * For example, roundUpUSDCBaseAmountToNearest("2663988") = "2670000"
  */
 export declare function roundUpUSDCBaseAmountToNearest(value: string): string;
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export declare function roundUpUsdAmountToNearest(value: string): string;

package/dist/esm/anyspend/utils/number.js

@@ -77,3 +77,20 @@ export function roundUpUSDCBaseAmountToNearest(value) {
     const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
     return res;
 }
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export function roundUpUsdAmountToNearest(value) {
+    const divisor = new Big(0.01); // Round to nearest 0.01 USD
+    const srcAmountBig = new Big(value);
+    const remainder = srcAmountBig.mod(divisor);
+    // If remainder is already 0 (exactly divisible by 0.01), return the original amount
+    if (remainder.eq(0)) {
+        return value;
+    }
+    const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
+    return res;
+}