@b3dotfun/sdk 0.0.79-alpha.1 → 0.0.79-alpha.2

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

@@ -26,6 +26,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```
  */
 import { USDC_BASE } from "../../../anyspend/constants/index.js";
+import { formatUnits } from "../../../shared/utils/number.js";
 import { useMemo } from "react";
 import { encodeFunctionData } from "viem";
 import { AnySpendCustom } from "./AnySpendCustom.js";
@@ -55,6 +56,12 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
             return "0";
         }
     }, [pricePerPack, packAmount]);
+    // Calculate fiat amount (totalAmount in USD, assuming USDC with 6 decimals)
+    const srcFiatAmount = useMemo(() => {
+        if (!totalAmount || totalAmount === "0")
+            return "0";
+        return formatUnits(totalAmount, USDC_BASE.decimals);
+    }, [totalAmount]);
     // Encode the buyPacksFor function call
     const encodedData = useMemo(() => {
         try {
@@ -77,5 +84,5 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
             pricePerPack,
             vendingMachineId,
             packType,
-        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient }));
+        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount }));
 }

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

@@ -21,4 +21,6 @@ export declare function AnySpendCustom(props: {
     onSuccess?: (txHash?: string) => void;
     showRecipient?: boolean;
     onShowPointsDetail?: () => void;
+    /** Fiat amount in USD for fiat payments */
+    srcFiatAmount?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -13,7 +13,6 @@ import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { base } from "viem/chains";
-import { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
@@ -108,9 +107,8 @@ export function AnySpendCustom(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomInner, { ...props }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, }) {
+function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, }) {
     const hasMounted = useHasMounted();
-    const featureFlags = useFeatureFlags();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Auto-set active wallet from wagmi
@@ -243,9 +241,29 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
     }, [activeTab, anyspendQuote?.data]);
     const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
-    const srcFiatAmount = useMemo(() => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcFiatAmount);
+    // Calculate fiat amount for geo check (regardless of activeTab) to determine tab availability
+    const srcFiatAmountForGeoCheck = useMemo(() => {
+        // Use prop if provided
+        if (srcFiatAmountProps) {
+            return srcFiatAmountProps;
+        }
+        // Fallback to dstAmount if destination token is USDC
+        if (dstAmount && dstToken.address.toLowerCase() === USDC_BASE.address.toLowerCase()) {
+            return formatUnits(dstAmount, USDC_BASE.decimals);
+        }
+        // Use srcAmount if available (from quote)
+        if (srcAmount) {
+            return formatUnits(srcAmount.toString(), USDC_BASE.decimals);
+        }
+        return "0";
+    }, [srcAmount, srcFiatAmountProps, dstAmount, dstToken.address]);
+    const srcFiatAmount = useMemo(() => {
+        if (activeTab !== "fiat")
+            return "0";
+        return srcFiatAmountForGeoCheck;
+    }, [activeTab, srcFiatAmountForGeoCheck]);
+    // Get geo data and onramp options (use srcFiatAmountForGeoCheck to check availability regardless of activeTab)
+    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = useGeoOnrampOptions(srcFiatAmountForGeoCheck);
     useEffect(() => {
         if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
             console.log("Calling onSuccess");
@@ -340,9 +358,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 invariant((activeTab === "fiat" ? base.id : srcChainId) === base.id, "Selected src chain is not base");
                 // Get the current geo data from the hook
                 const currentGeoData = geoData;
+                // Use total amount from quote (includes fees) for onramp, fallback to srcFiatAmount
+                const onrampAmount = anyspendQuote?.data?.currencyIn?.amountUsd
+                    ? anyspendQuote.data.currencyIn.amountUsd.toString()
+                    : srcFiatAmount;
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: srcFiatAmount,
+                    srcFiatAmount: onrampAmount,
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,
@@ -412,12 +434,22 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 vendor = "coinbase";
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
             }
-            else if (paymentMethod === FiatPaymentMethod.STRIPE) {
+            else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe Web2 embedded payment
                 if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    toast.error("Stripe not available");
+                    toast.error("Stripe embedded payment not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod.STRIPE) {
+                // Stripe redirect (one-click buy URL)
+                if (!stripeOnrampSupport) {
+                    toast.error("Stripe redirect payment not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe";
                 paymentMethodString = "";
             }
             else {
@@ -464,7 +496,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const loadingView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [_jsxs(Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [_jsx(Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [_jsx("div", { className: "size-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "size-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => (_jsxs("div", { className: "flex w-full justify-between", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full" }), mode === "page" && _jsx("div", { className: "h-12" })] }));
     // Render points badge if conditions are met
     const renderPointsBadge = () => {
-        if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+        if (anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
             return (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => {
                     onShowPointsDetail?.();
                     setActivePanel(PanelView.POINTS_DETAIL);
@@ -511,8 +543,16 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
-                                                                    1e6).toFixed(2), " ", "fee"] }))] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? (_jsx("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : (_jsx("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : (_jsxs(_Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), _jsx("span", { className: "text-as-tertiarry text-base", children: "+" })] })) }))] }), (() => {
+                                                            if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount) {
+                                                                const fee = (Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
+                                                                    1e6;
+                                                                if (fee > 0) {
+                                                                    return _jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", fee.toFixed(2), " fee"] });
+                                                                }
+                                                            }
+                                                            return null;
+                                                        })()] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -6,7 +6,7 @@ import { getIpfsUrl } from "../../../shared/utils/ipfs.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
 import { MoreVertical } from "lucide-react";
 import { AnimatePresence } from "motion/react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { b3 } from "viem/chains";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 // ABI for contractURI and uri functions
@@ -28,16 +28,16 @@ const CONTRACT_URI_ABI = [
 ];
 export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, }) {
     const [imageUrlWithFallback, setFallbackImageUrl] = useState(nftContract.imageUrl);
-    const [isLoadingFallback, setIsLoadingFallback] = useState(false);
+    const hasFetchedRef = useRef(false);
     // Fetch contract metadata when imageUrl is empty
     useEffect(() => {
         async function fetchContractMetadata() {
             // fetch image Uri if not provided
-            if (nftContract.imageUrl || isLoadingFallback) {
+            if (nftContract.imageUrl || hasFetchedRef.current) {
                 return;
             }
+            hasFetchedRef.current = true;
             try {
-                setIsLoadingFallback(true);
                 // Use the chainIdToPublicClient utility function
                 const publicClient = chainIdToPublicClient(nftContract.chainId);
                 let metadataURI;
@@ -74,15 +74,12 @@ export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftCo
             catch (error) {
                 console.error("Error fetching contract metadata:", error);
             }
-            finally {
-                setIsLoadingFallback(false);
-            }
         }
         fetchContractMetadata();
-    }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId, isLoadingFallback]);
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+    }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
+    const header = useCallback(({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice,
-                                        }), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] }));
+                                        }), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] })), [imageUrlWithFallback, nftContract]);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
             type: "mint_nft",
             nftContract: nftContract,

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

@@ -5,11 +5,9 @@ import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
-import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { PointsBadge } from "./PointsBadge.js";
 export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effectiveRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
-    const featureFlags = useFeatureFlags();
     return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && 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" }) }))] }), effectiveRecipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || "") }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && (_jsx("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
@@ -55,5 +53,5 @@ export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false,
                                     }
                                     // Using inline style to ensure color displays
                                     return (_jsxs("span", { className: "ml-2", style: { color: actualSlippage >= redThreshold ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                })()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
+                                })()] }), anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
 }

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

@@ -1,7 +1,8 @@
 export declare enum FiatPaymentMethod {
     NONE = "none",
     COINBASE_PAY = "coinbase_pay",
-    STRIPE = "stripe"
+    STRIPE = "stripe",// Stripe redirect (one-click buy URL)
+    STRIPE_WEB2 = "stripe_web2"
 }
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;

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

@@ -8,26 +8,30 @@ export var FiatPaymentMethod;
     FiatPaymentMethod["NONE"] = "none";
     FiatPaymentMethod["COINBASE_PAY"] = "coinbase_pay";
     FiatPaymentMethod["STRIPE"] = "stripe";
+    FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (FiatPaymentMethod = {}));
 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 +46,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 - primary option
+    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: "Credit/Debit Card",
+            description: "Pay via 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 - secondary option
+    if (stripeWeb2Support && stripeWeb2Support.isSupport) {
+        const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
+        availablePaymentMethods.push({
+            id: FiatPaymentMethod.STRIPE_WEB2,
+            name: "Quick Pay",
+            description: "Credit or debit card",
+            badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+            badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
@@ -63,5 +79,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 { 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) {
@@ -79,9 +81,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
                             .filter(v => !isNaN(Number(v)))
                             .map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between 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) {