@b3dotfun/sdk 0.0.79 → 0.0.80-alpha.0

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

@@ -29,11 +29,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * ```
  */
 const constants_1 = require("../../../anyspend/constants");
+const number_1 = require("../../../shared/utils/number");
 const react_1 = require("react");
 const viem_1 = require("viem");
 const AnySpendCustom_1 = require("./AnySpendCustom");
 // Collector Club Shop contract on Base
-const CC_SHOP_ADDRESS = "0x4eE0190e37E8A13740c4777D1c9de65E79D8f751";
+const CC_SHOP_ADDRESS = "0x23887D10c81118A9a2E3Af59C423e2f4ee4Cc7Cf";
 const BASE_CHAIN_ID = 8453;
 // ABI for buyPacksFor function only
 const BUY_PACKS_FOR_ABI = {
@@ -58,6 +59,12 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
             return "0";
         }
     }, [pricePerPack, packAmount]);
+    // Calculate fiat amount (totalAmount in USD, assuming USDC with 6 decimals)
+    const srcFiatAmount = (0, react_1.useMemo)(() => {
+        if (!totalAmount || totalAmount === "0")
+            return "0";
+        return (0, number_1.formatUnits)(totalAmount, constants_1.USDC_BASE.decimals);
+    }, [totalAmount]);
     // Encode the buyPacksFor function call
     const encodedData = (0, react_1.useMemo)(() => {
         try {
@@ -80,5 +87,5 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
             pricePerPack,
             vendingMachineId,
             packType,
-        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient }));
+        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount }));
 }

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

@@ -52,7 +52,6 @@ const lucide_react_1 = require("lucide-react");
 const react_4 = require("motion/react");
 const react_5 = __importStar(require("react"));
 const chains_1 = require("viem/chains");
-const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
 const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
@@ -147,9 +146,8 @@ function AnySpendCustom(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.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 = (0, react_2.useHasMounted)();
-    const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Auto-set active wallet from wagmi
@@ -282,9 +280,29 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
     }, [activeTab, anyspendQuote?.data]);
     const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
-    const srcFiatAmount = (0, react_5.useMemo)(() => (activeTab === "fiat" && srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcFiatAmount);
+    // Calculate fiat amount for geo check (regardless of activeTab) to determine tab availability
+    const srcFiatAmountForGeoCheck = (0, react_5.useMemo)(() => {
+        // Use prop if provided
+        if (srcFiatAmountProps) {
+            return srcFiatAmountProps;
+        }
+        // Fallback to dstAmount if destination token is USDC
+        if (dstAmount && dstToken.address.toLowerCase() === constants_1.USDC_BASE.address.toLowerCase()) {
+            return (0, number_1.formatUnits)(dstAmount, constants_1.USDC_BASE.decimals);
+        }
+        // Use srcAmount if available (from quote)
+        if (srcAmount) {
+            return (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals);
+        }
+        return "0";
+    }, [srcAmount, srcFiatAmountProps, dstAmount, dstToken.address]);
+    const srcFiatAmount = (0, react_5.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 } = (0, react_1.useGeoOnrampOptions)(srcFiatAmountForGeoCheck);
     (0, react_5.useEffect)(() => {
         if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
             console.log("Calling onSuccess");
@@ -379,9 +397,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 (0, invariant_1.default)((activeTab === "fiat" ? chains_1.base.id : srcChainId) === chains_1.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,
@@ -451,12 +473,22 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 vendor = "coinbase";
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
             }
-            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
+            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe Web2 embedded payment
                 if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    react_3.toast.error("Stripe not available");
+                    react_3.toast.error("Stripe embedded payment not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
+                // Stripe redirect (one-click buy URL)
+                if (!stripeOnrampSupport) {
+                    react_3.toast.error("Stripe redirect payment not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe";
                 paymentMethodString = "";
             }
             else {
@@ -503,7 +535,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const loadingView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => {
                     onShowPointsDetail?.();
                     setActivePanel(PanelView.POINTS_DETAIL);
@@ -550,8 +582,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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
-                                                                    1e6).toFixed(2), " ", "fee"] }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_4.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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", fee.toFixed(2), " fee"] });
+                                                                }
+                                                            }
+                                                            return null;
+                                                        })()] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -31,16 +31,16 @@ const CONTRACT_URI_ABI = [
 ];
 function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, }) {
     const [imageUrlWithFallback, setFallbackImageUrl] = (0, react_3.useState)(nftContract.imageUrl);
-    const [isLoadingFallback, setIsLoadingFallback] = (0, react_3.useState)(false);
+    const hasFetchedRef = (0, react_3.useRef)(false);
     // Fetch contract metadata when imageUrl is empty
     (0, react_3.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 = (0, anyspend_1.chainIdToPublicClient)(nftContract.chainId);
                 let metadataURI;
@@ -77,15 +77,12 @@ function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract,
             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, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && ((0, jsx_runtime_1.jsx)("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+    }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
+    const header = (0, react_3.useCallback)(({ anyspendPrice, isLoadingAnyspendPrice, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && ((0, jsx_runtime_1.jsx)("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice,
-                                        }), children: (0, number_1.formatDisplayNumber)(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-[36px] w-full" })) })] })] })] }));
+                                        }), children: (0, number_1.formatDisplayNumber)(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-[36px] w-full" })) })] })] })] })), [imageUrlWithFallback, nftContract]);
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.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/cjs/anyspend/react/components/common/CryptoReceiveSection.js

@@ -8,11 +8,9 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("motion/react");
-const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const PointsBadge_1 = require("./PointsBadge");
 function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effectiveRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
-    const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(effectiveRecipientAddress || "") }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.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) && ((0, jsx_runtime_1.jsx)("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
@@ -58,5 +56,5 @@ function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effect
                                     }
                                     // Using inline style to ensure color displays
                                     return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: actualSlippage >= redThreshold ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                })()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
+                                })()] }), anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
 }

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

@@ -12,26 +12,30 @@ var FiatPaymentMethod;
     FiatPaymentMethod["NONE"] = "none";
     FiatPaymentMethod["COINBASE_PAY"] = "coinbase_pay";
     FiatPaymentMethod["STRIPE"] = "stripe";
+    FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (exports.FiatPaymentMethod = FiatPaymentMethod = {}));
 function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
+    // Load geo-based onramp options like in PanelOnramp
+    const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.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, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Generate payment methods based on geo availability (like in PanelOnrampPayment)
     const availablePaymentMethods = [];
     // Add Coinbase Pay if available
@@ -46,15 +50,27 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
             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,
         });
     }
@@ -67,5 +83,9 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
                             onSelectPaymentMethod(method.id);
                         }, className: (0, cn_1.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: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-start text-left", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-base font-semibold", children: method.name }), (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor), children: method.badge })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: method.description })] }), selectedPaymentMethod === method.id && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-as-brand h-5 w-5" })] }, method.id)))) })] }) }));
+                            : "hover:border-as-brand/50 hover:bg-as-brand/5"), children: [(0, jsx_runtime_1.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"
+                                        : "?" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-start text-left", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-base font-semibold", children: method.name }), method.badge && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor), children: method.badge }))] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: method.description })] }), selectedPaymentMethod === method.id && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-as-brand h-5 w-5" })] }, method.id)))) })] }) }));
 }

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

@@ -9,13 +9,11 @@ const utils_1 = require("../../../../shared/utils");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("react");
-const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
 const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
 const PointsBadge_1 = require("./PointsBadge");
 const ONE_CHAR_WIDTH = 30;
 function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, onShowFeeDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
-    const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     // Helper function to get fees from anyspend quote
     const getFeeFromApi = (paymentMethod) => {
         // Try to get fee from anyspend quote first (most accurate)
@@ -41,10 +39,14 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     // 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) {
@@ -82,9 +84,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
                             .filter(v => !isNaN(Number(v)))
                             .map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), featureFlags.showPoints &&
-                                            anyspendQuote?.data?.pointsAmount &&
-                                            anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
                                             // For fiat payments, show the fee from the payment method
                                             const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
                                             if (fiatFee !== null && fiatFee > 0) {

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

@@ -18,7 +18,7 @@ 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, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
@@ -97,7 +97,9 @@ function PanelOnrampPaymentInner(props) {
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" &&
+                                                    anyspendQuote.data.currencyIn?.amountUsd &&
+                                                    anyspendQuote.data.fee.finalFeeBps > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
                                                             10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
                                     (() => {
                                         const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
@@ -108,5 +110,5 @@ function PanelOnrampPaymentInner(props) {
                                 (() => {
                                     const method = coinbaseAvailablePaymentMethods[0];
                                     return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), (0, jsx_runtime_1.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"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
-                                })(), stripeWeb2Support.isSupport && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+                                })(), stripeOnrampSupport && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
 }

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

@@ -16,7 +16,7 @@ function useGeoOnrampOptions(srcFiatAmount) {
     // Use existing hooks
     const { geoData, loading: isLoadingGeo, error: geoError } = (0, useGetGeo_1.useGetGeo)();
     const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } = (0, useCoinbaseOnrampOptions_1.useCoinbaseOnrampOptions)(geoData?.country, visitorData);
-    const { stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = (0, useStripeSupport_1.useStripeSupport)(srcFiatAmount, visitorData);
+    const { stripeOnrampSupport, stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = (0, useStripeSupport_1.useStripeSupport)(srcFiatAmount, visitorData);
     // Calculate available payment methods based on the amount
     const coinbaseAvailablePaymentMethods = (0, react_1.useMemo)(() => {
         if (!coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits || !srcFiatAmount)
@@ -34,8 +34,9 @@ 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,
@@ -47,6 +48,7 @@ function useGeoOnrampOptions(srcFiatAmount) {
         geoData,
         coinbaseOnrampOptions,
         coinbaseAvailablePaymentMethods,
+        stripeOnrampSupport,
         stripeWeb2Support,
         isLoadingGeo,
         isLoadingCoinbaseOnrampOptions,

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IPFSMediaRenderer = IPFSMediaRenderer;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ipfs_1 = require("../../../../shared/utils/ipfs");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const react_1 = require("thirdweb/react");
 /**
@@ -28,7 +29,8 @@ function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.
     if (!src) {
         return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(react_1.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://") ? (0, ipfs_1.getIpfsUrl)(src) : src;
+    return ((0, jsx_runtime_1.jsx)(react_1.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/cjs/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/cjs/shared/utils/ipfs.js

@@ -6,22 +6,22 @@ exports.getIpfsUrl = getIpfsUrl;
  * 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)
  */
 function getIpfsUrl(ipfsUrl, gatewayIndex = 0) {