@b3dotfun/sdk 0.0.79 → 0.0.80-alpha.1

package/src/anyspend/react/components/common/FiatPaymentMethod.tsx

@@ -7,9 +7,18 @@ import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
 export enum FiatPaymentMethod {
   NONE = "none",
   COINBASE_PAY = "coinbase_pay",
-  STRIPE = "stripe",
+  STRIPE = "stripe", // Stripe redirect (one-click buy URL)
+  STRIPE_WEB2 = "stripe_web2", // Stripe embedded payment
 }
 
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, { icon: string; label: string } | null> = {
+  [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+  [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+  [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+  [FiatPaymentMethod.NONE]: null,
+};
+
 interface FiatPaymentMethodProps {
   selectedPaymentMethod: FiatPaymentMethod;
   setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
@@ -25,30 +34,34 @@ export function FiatPaymentMethodComponent({
   onSelectPaymentMethod,
   srcAmountOnRamp,
 }: FiatPaymentMethodProps) {
+  // Load geo-based onramp options like in PanelOnramp
+  const {
+    coinbaseAvailablePaymentMethods,
+    stripeOnrampSupport,
+    stripeWeb2Support,
+    isLoading: isLoadingGeoOnramp,
+  } = useGeoOnrampOptions(srcAmountOnRamp);
+
   // Helper function to get fees from API data
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): string | null => {
     switch (paymentMethod) {
       case FiatPaymentMethod.COINBASE_PAY:
         // Coinbase doesn't provide fee info in API, return null
         return null;
-      case FiatPaymentMethod.STRIPE:
-        // Get fee from Stripe API response
+      case FiatPaymentMethod.STRIPE_WEB2:
+        // Get fee from Stripe Web2 API response
         if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
           return stripeWeb2Support.formattedFeeUsd;
         }
         return null;
+      case FiatPaymentMethod.STRIPE:
+        // Stripe redirect doesn't have fee info from API
+        return null;
       default:
         return null; // No fee when no payment method selected
     }
   };
 
-  // Load geo-based onramp options like in PanelOnramp
-  const {
-    coinbaseAvailablePaymentMethods,
-    stripeWeb2Support,
-    isLoading: isLoadingGeoOnramp,
-  } = useGeoOnrampOptions(srcAmountOnRamp);
-
   // Generate payment methods based on geo availability (like in PanelOnrampPayment)
   const availablePaymentMethods = [];
 
@@ -65,15 +78,28 @@ export function FiatPaymentMethodComponent({
     });
   }
 
-  // Add Stripe if available
-  if (stripeWeb2Support && stripeWeb2Support.isSupport) {
-    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
+  // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
+  if (stripeOnrampSupport) {
+    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
     availablePaymentMethods.push({
       id: FiatPaymentMethod.STRIPE,
-      name: "Stripe",
-      description: "Credit or debit card payment",
-      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : "Standard Fee",
-      badgeColor: "bg-yellow-100 text-yellow-800",
+      name: "Pay via Stripe",
+      description: "Redirects to Stripe checkout",
+      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+      badgeColor: "bg-gray-100 text-gray-800",
+      available: true,
+    });
+  }
+
+  // Add Stripe Web2 (embedded) if available - embedded card form
+  if (stripeWeb2Support && stripeWeb2Support.isSupport) {
+    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
+    availablePaymentMethods.push({
+      id: FiatPaymentMethod.STRIPE_WEB2,
+      name: "Pay with Card",
+      description: "Fast checkout",
+      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+      badgeColor: "bg-gray-100 text-gray-800",
       available: true,
     });
   }
@@ -144,16 +170,22 @@ export function FiatPaymentMethodComponent({
               >
                 {/* Icon - matching PanelOnramp style */}
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white">
-                  {method.id === FiatPaymentMethod.COINBASE_PAY ? "C" : "S"}
+                  {method.id === FiatPaymentMethod.COINBASE_PAY
+                    ? "C"
+                    : method.id === FiatPaymentMethod.STRIPE || method.id === FiatPaymentMethod.STRIPE_WEB2
+                      ? "S"
+                      : "?"}
                 </div>
 
                 {/* Content */}
                 <div className="flex flex-1 flex-col items-start text-left">
                   <div className="flex items-center gap-2">
                     <span className="text-as-primary text-base font-semibold">{method.name}</span>
-                    <span className={cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor)}>
-                      {method.badge}
-                    </span>
+                    {method.badge && (
+                      <span className={cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor)}>
+                        {method.badge}
+                      </span>
+                    )}
                   </div>
                   <span className="text-as-primary/60 text-sm">{method.description}</span>
                 </div>

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -8,8 +8,7 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 
-import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
 
@@ -54,8 +53,6 @@ export function PanelOnramp({
   onShowFeeDetail?: () => void;
   customUsdInputValues?: string[];
 }) {
-  const featureFlags = useFeatureFlags();
-
   // Helper function to get fees from anyspend quote
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): number | null => {
     // Try to get fee from anyspend quote first (most accurate)
@@ -84,11 +81,16 @@ export function PanelOnramp({
   const getTotalAmount = (paymentMethod: FiatPaymentMethod): number => {
     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
@@ -139,32 +141,28 @@ export function PanelOnramp({
             className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
             onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
           >
-            {selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Stripe
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
+            {(() => {
+              const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+              if (config) {
+                return (
+                  <>
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                        <span className="text-xs font-bold text-white">{config.icon}</span>
+                      </div>
+                      {config.label}
+                    </div>
+                    <ChevronRight className="h-4 w-4" />
+                  </>
+                );
+              }
+              return (
+                <>
+                  Select payment method
+                  <ChevronRight className="h-4 w-4" />
+                </>
+              );
+            })()}
           </button>
         </div>
 
@@ -279,15 +277,13 @@ export function PanelOnramp({
                   <Info className="h-4 w-4" />
                 </button>
               )}
-              {featureFlags.showPoints &&
-                anyspendQuote?.data?.pointsAmount &&
-                anyspendQuote?.data?.pointsAmount > 0 && (
-                  <PointsBadge
-                    pointsAmount={anyspendQuote.data.pointsAmount}
-                    pointsMultiplier={anyspendQuote.data.pointsMultiplier}
-                    onClick={() => onShowPointsDetail?.()}
-                  />
-                )}
+              {anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && (
+                <PointsBadge
+                  pointsAmount={anyspendQuote.data.pointsAmount}
+                  pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+                  onClick={() => onShowPointsDetail?.()}
+                />
+              )}
             </div>
             <div className="flex flex-col items-end gap-0.5">
               <span className="text-as-primary font-semibold">

package/src/anyspend/react/components/common/PanelOnrampPayment.tsx

@@ -65,6 +65,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     geoData,
     coinbaseOnrampOptions,
     coinbaseAvailablePaymentMethods,
+    stripeOnrampSupport,
     stripeWeb2Support,
     isLoading: isLoadingGeoOnramp,
   } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -201,16 +202,18 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                 >
                   ${parseFloat(srcAmountOnRamp).toFixed(2)}
                 </p>
-                {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
-                  <p className="text-b3-react-foreground/60 text-xs">
-                    incl. $
-                    {(
-                      (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
-                      10000
-                    ).toFixed(2)}{" "}
-                    fee
-                  </p>
-                )}
+                {anyspendQuote?.data?.fee?.type === "standard_fee" &&
+                  anyspendQuote.data.currencyIn?.amountUsd &&
+                  anyspendQuote.data.fee.finalFeeBps > 0 && (
+                    <p className="text-b3-react-foreground/60 text-xs">
+                      incl. $
+                      {(
+                        (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                        10000
+                      ).toFixed(2)}{" "}
+                      fee
+                    </p>
+                  )}
               </div>
             </div>
           </div>
@@ -311,7 +314,37 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                 );
               })()}
 
-            {/* Stripe Option - Show if supported */}
+            {/* Stripe Redirect Option - Primary option */}
+            {stripeOnrampSupport && (
+              <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"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
+                    <img
+                      src="https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg"
+                      alt="Stripe"
+                      className="h-5"
+                    />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-b3-react-foreground text-lg font-semibold">Credit/Debit Card</h4>
+                    <p className="text-b3-react-foreground/60 text-sm">Pay via Stripe checkout</p>
+                    {stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (
+                      <div className="mt-1">
+                        <span className="text-xs text-gray-500">
+                          ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />
+              </button>
+            )}
+
+            {/* Stripe Web2 Option - Embedded payment (secondary) */}
             {stripeWeb2Support.isSupport && (
               <button
                 onClick={() => handlePaymentMethodClick("stripe-web2")}
@@ -326,11 +359,15 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                     />
                   </div>
                   <div className="flex flex-col items-start text-left">
-                    <h4 className="text-b3-react-foreground text-lg font-semibold">Stripe</h4>
-                    <p className="text-b3-react-foreground/60 text-sm">Credit or debit card payment</p>
-                    <div className="mt-1 flex items-center gap-1">
-                      <span className="text-xs font-medium text-orange-600">Fee Applied</span>
-                    </div>
+                    <h4 className="text-b3-react-foreground text-lg font-semibold">Quick Pay</h4>
+                    <p className="text-b3-react-foreground/60 text-sm">Credit or debit card</p>
+                    {stripeWeb2Support.formattedFeeUsd && (
+                      <div className="mt-1">
+                        <span className="text-xs text-gray-500">
+                          ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
+                        </span>
+                      </div>
+                    )}
                   </div>
                 </div>
                 <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />

package/src/anyspend/react/hooks/useGeoOnrampOptions.ts

@@ -20,7 +20,7 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
   const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
   const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } =
     useCoinbaseOnrampOptions(geoData?.country, visitorData);
-  const { stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(
+  const { stripeOnrampSupport, stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(
     srcFiatAmount,
     visitorData,
   );
@@ -43,8 +43,10 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
       geoData,
       coinbaseOnrampOptions,
       coinbaseAvailablePaymentMethods,
+      stripeOnrampSupport,
       stripeWeb2Support,
-      isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || stripeWeb2Support,
+      isOnrampSupported:
+        coinbaseAvailablePaymentMethods.length > 0 || stripeOnrampSupport || stripeWeb2Support.isSupport,
       isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport || isLoadingVisitorData,
       isLoadingGeo,
       isLoadingCoinbaseOnrampOptions,
@@ -57,6 +59,7 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
       geoData,
       coinbaseOnrampOptions,
       coinbaseAvailablePaymentMethods,
+      stripeOnrampSupport,
       stripeWeb2Support,
       isLoadingGeo,
       isLoadingCoinbaseOnrampOptions,

package/src/anyspend/react/hooks/useStripeSupport.ts

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

package/src/global-account/react/components/IPFSMediaRenderer/IPFSMediaRenderer.tsx

@@ -1,13 +1,10 @@
 "use client";
 
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { client as defaultClient } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import type { ThirdwebClient } from "thirdweb";
 import { MediaRenderer } from "thirdweb/react";
 
-// Primary IPFS gateway URL - matches our allowed list in profileDisplay.ts
-// Note: MediaRenderer expects the base gateway URL without /ipfs path
-// const IPFS_GATEWAY_URL = "https://cloudflare-ipfs.com";
-
 interface IPFSMediaRendererProps {
   /** The source URL - can be IPFS URL (ipfs://...) or HTTP URL */
   src: string | null | undefined;
@@ -66,12 +63,13 @@ export function IPFSMediaRenderer({
     );
   }
 
-  // Convert IPFS URLs to HTTP gateway URLs if needed
-  // This handles both ipfs:// URLs and existing HTTP gateway URLs
+  // Convert IPFS URLs to HTTP gateway URLs using our preferred gateway
+  // This avoids Thirdweb's default cloudflare-ipfs.com which can be unreliable
+  const resolvedSrc = src.startsWith("ipfs://") ? getIpfsUrl(src) : src;
 
   return (
     <MediaRenderer
-      src={src}
+      src={resolvedSrc}
       client={client}
       alt={alt}
       className={className}

package/src/shared/utils/ipfs.ts

@@ -3,23 +3,23 @@
  * 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)
 ] as const;
 
 /**
  * Converts an IPFS URL to a gateway URL
  * @param ipfsUrl - URL in format ipfs://CID/path or just the CID
- * @param gatewayIndex - Optional index to specify which gateway to use (0: Cloudflare, 1: ipfs.io)
+ * @param gatewayIndex - Optional index to specify which gateway to use (0: dweb.link, 1: w3s.link, etc.)
  * @returns HTTP URL using the specified IPFS gateway
  * @example
- * // returns 'https://cloudflare-ipfs.com/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://dweb.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png')
- * // returns 'https://ipfs.io/ipfs/QmUbJ4p.../2.png'
+ * // returns 'https://w3s.link/ipfs/QmUbJ4p.../2.png'
  * getIpfsUrl('ipfs://QmUbJ4pnHMNXGeWWhBFFSEqCGuc6cEtDyz35wQfv7k2TXy/2.png', 1)
  */
 export function getIpfsUrl(ipfsUrl: string, gatewayIndex = 0): string {