@b3dotfun/sdk 0.0.79 → 0.0.80-alpha.1

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) {

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

@@ -355,18 +355,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isBalanceLoading,
     });
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
             case FiatPaymentMethod.COINBASE_PAY:
                 return "coinbase";
             case FiatPaymentMethod.STRIPE:
-                // Determine if it's stripe onramp or stripe-web2 based on support
-                if (stripeWeb2Support?.isSupport) {
-                    return "stripe-web2";
-                }
-                return undefined;
+                // Stripe redirect flow (one-click URL)
+                return stripeOnrampSupport ? "stripe" : undefined;
+            case FiatPaymentMethod.STRIPE_WEB2:
+                // Stripe embedded payment form
+                return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
             default:
                 return undefined;
         }
@@ -511,7 +511,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = useMemo(() => {
-        if (activeInputAmountInWei === "0")
+        // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+        const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+        if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isSameChainSameToken)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
@@ -562,6 +564,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
+        srcAmountOnRamp,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -676,11 +679,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    toast.error("Stripe not available");
+                // Stripe redirect flow (one-click URL)
+                if (!stripeOnrampSupport) {
+                    toast.error("Credit/Debit Card not available");
+                    return;
+                }
+                vendor = "stripe";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe embedded payment form
+                if (!stripeWeb2Support.isSupport) {
+                    toast.error("Pay with Card not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe-web2";
                 paymentMethodString = "";
             }
             else {

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

@@ -26,11 +26,12 @@ 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";
 // 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 = {
@@ -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,14 +13,13 @@ 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";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { OrderToken } from "./common/OrderToken.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
@@ -199,7 +197,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
-            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
+                ? "stripe"
+                : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
+                    ? "stripe-web2"
+                    : undefined,
         });
     }, [
         activeTab,
@@ -243,9 +245,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 +362,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 +438,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 = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                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 = "stripe";
                 paymentMethodString = "";
             }
             else {
@@ -464,7 +500,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);
@@ -507,12 +543,26 @@ 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, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                                        const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                                                        if (config) {
+                                                            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                        }
+                                                        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                    })() })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
                                                 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)",
@@ -539,11 +589,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
+    // Stable callback for fiat payment method selection
+    const handleFiatPaymentMethodSelect = useCallback((method) => {
+        setSelectedFiatPaymentMethod(method);
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
+    // Stable callback for navigating back to confirm order
+    const handleBackToConfirmOrder = useCallback(() => {
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
-                setSelectedFiatPaymentMethod(method);
-                setActivePanel(PanelView.CONFIRM_ORDER);
-            }, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
     const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views

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,8 +1,13 @@
 export declare enum FiatPaymentMethod {
     NONE = "none",
     COINBASE_PAY = "coinbase_pay",
-    STRIPE = "stripe"
+    STRIPE = "stripe",// Stripe redirect (one-click buy URL)
+    STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;