@b3dotfun/sdk 0.0.79 → 0.0.80-alpha.1

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

@@ -8,26 +8,37 @@ export var FiatPaymentMethod;
     FiatPaymentMethod["NONE"] = "none";
     FiatPaymentMethod["COINBASE_PAY"] = "coinbase_pay";
     FiatPaymentMethod["STRIPE"] = "stripe";
+    FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (FiatPaymentMethod = {}));
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY = {
+    [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+    [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+    [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+    [FiatPaymentMethod.NONE]: null,
+};
 export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
+    // Load geo-based onramp options like in PanelOnramp
+    const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(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 null
                 return null;
-            case FiatPaymentMethod.STRIPE:
-                // Get fee from Stripe API response
+            case FiatPaymentMethod.STRIPE_WEB2:
+                // Get fee from Stripe Web2 API response
                 if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
                     return stripeWeb2Support.formattedFeeUsd;
                 }
                 return null;
+            case FiatPaymentMethod.STRIPE:
+                // Stripe redirect doesn't have fee info from API
+                return null;
             default:
                 return null; // No fee when no payment method selected
         }
     };
-    // Load geo-based onramp options like in PanelOnramp
-    const { coinbaseAvailablePaymentMethods, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
     // Generate payment methods based on geo availability (like in PanelOnrampPayment)
     const availablePaymentMethods = [];
     // Add Coinbase Pay if available
@@ -42,15 +53,27 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
             available: true,
         });
     }
-    // Add Stripe if available
-    if (stripeWeb2Support && stripeWeb2Support.isSupport) {
-        const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
+    // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
+    if (stripeOnrampSupport) {
+        const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,
-            name: "Stripe",
-            description: "Credit or debit card payment",
-            badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : "Standard Fee",
-            badgeColor: "bg-yellow-100 text-yellow-800",
+            name: "Pay via Stripe",
+            description: "Redirects to Stripe checkout",
+            badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+            badgeColor: "bg-gray-100 text-gray-800",
+            available: true,
+        });
+    }
+    // Add Stripe Web2 (embedded) if available - embedded card form
+    if (stripeWeb2Support && stripeWeb2Support.isSupport) {
+        const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
+        availablePaymentMethods.push({
+            id: FiatPaymentMethod.STRIPE_WEB2,
+            name: "Pay with Card",
+            description: "Fast checkout",
+            badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+            badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
@@ -63,5 +86,9 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
                             onSelectPaymentMethod(method.id);
                         }, className: cn("fiat-payment-method-item bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200", selectedPaymentMethod === method.id
                             ? "border-as-brand bg-as-brand/10"
-                            : "hover:border-as-brand/50 hover:bg-as-brand/5"), children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white", children: method.id === FiatPaymentMethod.COINBASE_PAY ? "C" : "S" }), _jsxs("div", { className: "flex flex-1 flex-col items-start text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-primary text-base font-semibold", children: method.name }), _jsx("span", { className: cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor), children: method.badge })] }), _jsx("span", { className: "text-as-primary/60 text-sm", children: method.description })] }), selectedPaymentMethod === method.id && _jsx(ChevronRight, { className: "text-as-brand h-5 w-5" })] }, method.id)))) })] }) }));
+                            : "hover:border-as-brand/50 hover:bg-as-brand/5"), children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white", children: method.id === FiatPaymentMethod.COINBASE_PAY
+                                    ? "C"
+                                    : method.id === FiatPaymentMethod.STRIPE || method.id === FiatPaymentMethod.STRIPE_WEB2
+                                        ? "S"
+                                        : "?" }), _jsxs("div", { className: "flex flex-1 flex-col items-start text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-primary text-base font-semibold", children: method.name }), method.badge && (_jsx("span", { className: cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor), children: method.badge }))] }), _jsx("span", { className: "text-as-primary/60 text-sm", children: method.description })] }), selectedPaymentMethod === method.id && _jsx(ChevronRight, { className: "text-as-brand h-5 w-5" })] }, method.id)))) })] }) }));
 }

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

@@ -6,13 +6,11 @@ import { cn, formatUsername } from "../../../../shared/utils/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
-import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
-import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
 import { PointsBadge } from "./PointsBadge.js";
 const ONE_CHAR_WIDTH = 30;
 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();
     // Helper function to get fees from anyspend quote
     const getFeeFromApi = (paymentMethod) => {
         // Try to get fee from anyspend quote first (most accurate)
@@ -38,10 +36,14 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     // Helper function to get total amount from API (for Stripe) or calculate it (for others)
     const getTotalAmount = (paymentMethod) => {
         const baseAmount = parseFloat(srcAmountOnRamp) || 5;
-        // Try to get from anyspend quote first (most accurate)
+        // For stripeweb2_fee, use the originalAmount
         if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee") {
             return Number(anyspendQuote.data.fee.originalAmount) / 1e6; // Convert from wei to USD
         }
+        // Use currencyIn.amountUsd from quote when available (includes fees, most accurate for custom orders)
+        if (anyspendQuote?.data?.currencyIn?.amountUsd) {
+            return Number(anyspendQuote.data.currencyIn.amountUsd);
+        }
         const fee = getFeeFromApi(paymentMethod);
         // For Coinbase or when fee is available, calculate manually
         if (fee !== null) {
@@ -73,15 +75,19 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "panel-onramp 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(fiatPaymentMethodIndex), 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 border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return (_jsxs("div", { className: "panel-onramp 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(fiatPaymentMethodIndex), children: (() => {
+                                    const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+                                    if (config) {
+                                        return (_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: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+                                    }
+                                    return (_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 border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .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 gap-4", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("div", { className: "flex items-center gap-1", children: [_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("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)] }), (() => {
+                                : "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 gap-4", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("div", { className: "flex items-center gap-1", children: [_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" }) })), anyspendQuote?.data?.pointsAmount && 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) {

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

@@ -12,7 +12,7 @@ export function PanelOnrampPayment(props) {
 }
 function PanelOnrampPaymentInner(props) {
     const { srcAmountOnRamp, recipientAddress, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
@@ -91,7 +91,9 @@ 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("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) /
+                                                    : "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 &&
+                                                    anyspendQuote.data.fee.finalFeeBps > 0 && (_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");
@@ -102,5 +104,5 @@ function PanelOnrampPaymentInner(props) {
                                 (() => {
                                     const method = coinbaseAvailablePaymentMethods[0];
                                     return (_jsxs("button", { onClick: () => handlePaymentMethodClick("coinbase", method.id), disabled: isCreatingOrder, className: "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), _jsxs("p", { className: "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
-                                })(), stripeWeb2Support.isSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), _jsxs(Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+                                })(), stripeOnrampSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), _jsxs(Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
 }

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

@@ -30,6 +30,7 @@ export declare function useGeoOnrampOptions(srcFiatAmount: string): {
         min?: string;
         max?: string;
     }[];
+    stripeOnrampSupport: boolean;
     stripeWeb2Support: {
         isSupport: false;
     } | {
@@ -38,14 +39,7 @@ export declare function useGeoOnrampOptions(srcFiatAmount: string): {
         formattedOnrampUsd: string;
         formattedFeeUsd: string;
     };
-    isOnrampSupported: true | {
-        isSupport: false;
-    } | {
-        isSupport: true;
-        formattedTotalUsd: string;
-        formattedOnrampUsd: string;
-        formattedFeeUsd: string;
-    };
+    isOnrampSupported: boolean;
     isLoading: boolean | undefined;
     isLoadingGeo: boolean;
     isLoadingCoinbaseOnrampOptions: boolean;

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

@@ -13,7 +13,7 @@ export function useGeoOnrampOptions(srcFiatAmount) {
     // Use existing hooks
     const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
     const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } = useCoinbaseOnrampOptions(geoData?.country, visitorData);
-    const { stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(srcFiatAmount, visitorData);
+    const { stripeOnrampSupport, stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(srcFiatAmount, visitorData);
     // Calculate available payment methods based on the amount
     const coinbaseAvailablePaymentMethods = useMemo(() => {
         if (!coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits || !srcFiatAmount)
@@ -31,8 +31,9 @@ export function useGeoOnrampOptions(srcFiatAmount) {
         geoData,
         coinbaseOnrampOptions,
         coinbaseAvailablePaymentMethods,
+        stripeOnrampSupport,
         stripeWeb2Support,
-        isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || stripeWeb2Support,
+        isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || stripeOnrampSupport || stripeWeb2Support.isSupport,
         isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport || isLoadingVisitorData,
         isLoadingGeo,
         isLoadingCoinbaseOnrampOptions,
@@ -44,6 +45,7 @@ export function useGeoOnrampOptions(srcFiatAmount) {
         geoData,
         coinbaseOnrampOptions,
         coinbaseAvailablePaymentMethods,
+        stripeOnrampSupport,
         stripeWeb2Support,
         isLoadingGeo,
         isLoadingCoinbaseOnrampOptions,

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

@@ -1,5 +1,6 @@
 import { VisitorData } from "../../../anyspend/types/fingerprint";
 export declare function useStripeSupport(usdAmount?: string, visitorData?: VisitorData, isLoadingVisitorData?: boolean): {
+    stripeOnrampSupport: boolean;
     stripeWeb2Support: {
         isSupport: false;
     } | {

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

@@ -8,6 +8,7 @@ export function useStripeSupport(usdAmount, visitorData, isLoadingVisitorData) {
         enabled: !isLoadingVisitorData,
     });
     return useMemo(() => ({
+        stripeOnrampSupport: data?.stripeOnramp || false,
         stripeWeb2Support: data?.stripeWeb2 || { isSupport: false },
         isLoadingStripeSupport: isLoading,
         stripeSupportError: error,

package/dist/esm/global-account/react/components/IPFSMediaRenderer/IPFSMediaRenderer.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
 import { client as defaultClient } from "../../../../shared/utils/thirdweb.js";
 import { MediaRenderer } from "thirdweb/react";
 /**
@@ -25,7 +26,8 @@ export function IPFSMediaRenderer({ src, alt = "Media", className, client = defa
     if (!src) {
         return (_jsx("div", { className: className, style: style, "aria-label": alt, children: _jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
     }
-    // Convert IPFS URLs to HTTP gateway URLs if needed
-    // This handles both ipfs:// URLs and existing HTTP gateway URLs
-    return (_jsx(MediaRenderer, { src: src, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
+    // Convert IPFS URLs to HTTP gateway URLs using our preferred gateway
+    // This avoids Thirdweb's default cloudflare-ipfs.com which can be unreliable
+    const resolvedSrc = src.startsWith("ipfs://") ? getIpfsUrl(src) : src;
+    return (_jsx(MediaRenderer, { src: resolvedSrc, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
 }

package/dist/esm/shared/utils/ipfs.d.ts

@@ -1,12 +1,12 @@
 /**
  * Converts an IPFS URL to a gateway URL
  * @param ipfsUrl - URL in format ipfs://CID/path or just the CID
- * @param gatewayIndex - Optional index to specify which gateway to use (0: Cloudflare, 1: ipfs.io)
+ * @param gatewayIndex - Optional index to specify which gateway to use (0: dweb.link, 1: w3s.link, etc.)
  * @returns HTTP URL using the specified IPFS gateway
  * @example
- * // returns 'https://cloudflare-ipfs.com/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://dweb.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png')
- * // returns 'https://ipfs.io/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://w3s.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png', 1)
  */
 export declare function getIpfsUrl(ipfsUrl: string, gatewayIndex?: number): string;

package/dist/esm/shared/utils/ipfs.js

@@ -3,22 +3,22 @@
  * These gateways must match the allowed list in profileDisplay.ts validateImageUrl()
  */
 const IPFS_GATEWAYS = [
-    "https://cloudflare-ipfs.com/ipfs", // Primary gateway - fast and reliable
+    "https://dweb.link/ipfs", // Primary gateway - Protocol Labs maintained
+    "https://w3s.link/ipfs", // web3.storage gateway - reliable
+    "https://nftstorage.link/ipfs", // NFT.storage gateway
+    "https://gateway.pinata.cloud/ipfs", // Pinata gateway
     "https://ipfs.io/ipfs", // Fallback gateway
-    "https://gateway.pinata.cloud/ipfs", // Additional option
-    "https://dweb.link/ipfs", // Additional option
-    "https://nftstorage.link/ipfs", // Additional option
-    "https://w3s.link/ipfs", // Additional option
+    "https://cloudflare-ipfs.com/ipfs", // Cloudflare gateway (can be slow/unreliable)
 ];
 /**
  * Converts an IPFS URL to a gateway URL
  * @param ipfsUrl - URL in format ipfs://CID/path or just the CID
- * @param gatewayIndex - Optional index to specify which gateway to use (0: Cloudflare, 1: ipfs.io)
+ * @param gatewayIndex - Optional index to specify which gateway to use (0: dweb.link, 1: w3s.link, etc.)
  * @returns HTTP URL using the specified IPFS gateway
  * @example
- * // returns 'https://cloudflare-ipfs.com/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://dweb.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png')
- * // returns 'https://ipfs.io/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://w3s.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png', 1)
  */
 export function getIpfsUrl(ipfsUrl, gatewayIndex = 0) {