@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.2

package/src/anyspend/react/components/AnySpend.tsx

@@ -148,6 +148,8 @@ export function AnySpend(props: {
   theme?: AnySpendTheme;
   /** When true, shows a KYC gate before Stripe Web2 (credit card) payments. Default false. */
   kycEnabled?: boolean;
+  /** Whether to show the "Pay with Fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
+  showFiatOption?: boolean;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -184,6 +186,7 @@ function AnySpendInner({
   callbackMetadata,
   senderAddress,
   kycEnabled = false,
+  showFiatOption = true,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -211,6 +214,7 @@ function AnySpendInner({
   content?: AnySpendContent;
   theme?: AnySpendTheme;
   kycEnabled?: boolean;
+  showFiatOption?: boolean;
 }) {
   const { slots, content } = useAnySpendCustomization();
   const searchParams = useSearchParamsSSR();
@@ -253,6 +257,7 @@ function AnySpendInner({
   const previousPanel = useRef<PanelView>(PanelView.MAIN);
 
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(() => {
+    if (!showFiatOption) return "crypto";
     if (typeof window !== "undefined") {
       const stored = sessionStorage.getItem("anyspend_active_tab") as "crypto" | "fiat" | null;
       if (stored === "crypto" || stored === "fiat") return stored;
@@ -261,8 +266,13 @@ function AnySpendInner({
   });
 
   useEffect(() => {
+    if (!showFiatOption && activeTab === "fiat") setActiveTab("crypto");
+  }, [showFiatOption, activeTab]);
+
+  useEffect(() => {
+    if (!showFiatOption) return;
     sessionStorage.setItem("anyspend_active_tab", activeTab);
-  }, [activeTab]);
+  }, [activeTab, showFiatOption]);
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
   const [directTransferTxHash, setDirectTransferTxHash] = useState<string | undefined>();
@@ -1312,17 +1322,19 @@ function AnySpendInner({
         )}
 
         {/* Tab section */}
-        <TabSection
-          activeTab={activeTab}
-          setActiveTab={tab => {
-            setActiveTab(tab);
-            // Reset payment methods when switching tabs
-            resetPaymentMethods();
-            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-          }}
-          setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
-          setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
-        />
+        {showFiatOption && (
+          <TabSection
+            activeTab={activeTab}
+            setActiveTab={tab => {
+              setActiveTab(tab);
+              // Reset payment methods when switching tabs
+              resetPaymentMethods();
+              setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+            }}
+            setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
+            setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
+          />
+        )}
 
         <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
           {/* Send section */}

package/src/anyspend/react/components/AnySpendBondKit.tsx

@@ -42,6 +42,7 @@ export function AnySpendBondKit({
   slots,
   content,
   theme,
+  showFiatOption,
 }: AnySpendBondKitProps & {
   slots?: AnySpendSlots;
   content?: AnySpendContent;
@@ -382,6 +383,7 @@ export function AnySpendBondKit({
       slots={slots}
       content={content}
       theme={theme}
+      showFiatOption={showFiatOption}
     />
   );
 }

package/src/anyspend/react/components/AnySpendBuySpin.tsx

@@ -135,6 +135,7 @@ export function AnySpendBuySpin({
   slots,
   content,
   theme,
+  showFiatOption,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -148,6 +149,7 @@ export function AnySpendBuySpin({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  showFiatOption?: boolean;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -695,6 +697,7 @@ export function AnySpendBuySpin({
       slots={slots}
       content={content}
       theme={theme}
+      showFiatOption={showFiatOption}
     />
   );
 }

package/src/anyspend/react/components/AnySpendCollectorClubPurchase.tsx

@@ -119,6 +119,10 @@ export interface AnySpendCollectorClubPurchaseProps {
    * Force fiat payment
    */
   forceFiatPayment?: boolean;
+  /**
+   * Whether to show the "Pay with fiat" tab. Defaults to true.
+   */
+  showFiatOption?: boolean;
   /**
    * Optional discount code to apply to the purchase.
    * When provided, validates on-chain and adjusts the price accordingly.
@@ -146,6 +150,7 @@ export function AnySpendCollectorClubPurchase({
   vendingMachineId,
   packType,
   forceFiatPayment,
+  showFiatOption = true,
   discountCode,
   slots,
   content,
@@ -398,6 +403,7 @@ export function AnySpendCollectorClubPurchase({
       showRecipient={showRecipient}
       srcFiatAmount={srcFiatAmount}
       forceFiatPayment={forceFiatPayment}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -178,6 +178,8 @@ export function AnySpendCustom(props: {
   dstToken: components["schemas"]["Token"];
   dstAmount: string;
   forceFiatPayment?: boolean;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
+  showFiatOption?: boolean;
   contractAddress: string;
   encodedData: string;
   metadata: any;
@@ -232,6 +234,7 @@ function AnySpendCustomInner({
   onShowPointsDetail,
   srcFiatAmount: srcFiatAmountProps,
   forceFiatPayment,
+  showFiatOption = true,
   senderAddress,
 }: {
   loadOrder?: string;
@@ -258,6 +261,7 @@ function AnySpendCustomInner({
   onShowPointsDetail?: () => void;
   srcFiatAmount?: string;
   forceFiatPayment?: boolean;
+  showFiatOption?: boolean;
   senderAddress?: string;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
@@ -271,7 +275,13 @@ function AnySpendCustomInner({
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );
-  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(forceFiatPayment ? "fiat" : activeTabProps);
+  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(
+    !showFiatOption ? "crypto" : forceFiatPayment ? "fiat" : activeTabProps,
+  );
+
+  useEffect(() => {
+    if (!showFiatOption && activeTab === "fiat") setActiveTab("crypto");
+  }, [showFiatOption, activeTab]);
 
   // Payment method state with dual-state system (auto + explicit user selection)
   // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
@@ -867,7 +877,7 @@ function AnySpendCustomInner({
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
         className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
       >
-        {!forceFiatPayment && (
+        {!forceFiatPayment && showFiatOption && (
           <div className="w-full">
             <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
               <div

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -96,6 +96,8 @@ export interface AnySpendCustomExactInProps {
   content?: AnySpendContent;
   /** Structured color/theme configuration */
   theme?: AnySpendTheme;
+  /** Whether to show fiat payment option. Defaults to true. When false, paymentType is forced to "crypto". */
+  showFiatOption?: boolean;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -137,8 +139,10 @@ function AnySpendCustomExactInInner({
   allowDirectTransfer = false,
   callbackMetadata,
   senderAddress,
+  showFiatOption = true,
 }: AnySpendCustomExactInProps) {
   const { slots, content } = useAnySpendCustomization();
+  const effectivePaymentType = showFiatOption ? paymentType : "crypto";
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
@@ -191,7 +195,7 @@ function AnySpendCustomExactInInner({
     createOnrampOrder,
     isCreatingOnrampOrder,
   } = useAnyspendFlow({
-    paymentType,
+    paymentType: effectivePaymentType,
     recipientAddress,
     loadOrder,
     onTransactionSuccess: onSuccess,
@@ -213,11 +217,17 @@ function AnySpendCustomExactInInner({
   // Check if source and destination are the same token on the same chain
   const isSameChainSameToken = useMemo(() => {
     return (
-      paymentType === "crypto" &&
+      effectivePaymentType === "crypto" &&
       selectedSrcChainId === selectedDstChainId &&
       selectedSrcToken?.address?.toLowerCase() === selectedDstToken?.address?.toLowerCase()
     );
-  }, [paymentType, selectedSrcChainId, selectedDstChainId, selectedSrcToken?.address, selectedDstToken?.address]);
+  }, [
+    effectivePaymentType,
+    selectedSrcChainId,
+    selectedDstChainId,
+    selectedSrcToken?.address,
+    selectedDstToken?.address,
+  ]);
 
   // Check if this is a direct transfer
   const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
@@ -322,7 +332,7 @@ function AnySpendCustomExactInInner({
       }
     }
 
-    if (paymentType === "crypto") {
+    if (effectivePaymentType === "crypto") {
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
@@ -342,7 +352,7 @@ function AnySpendCustomExactInInner({
       return { text: buttonText, disable: false, error: false, loading: false };
     }
 
-    if (paymentType === "fiat") {
+    if (effectivePaymentType === "fiat") {
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
         return { text: "Select payment method", disable: false, error: false, loading: false };
       }
@@ -358,7 +368,7 @@ function AnySpendCustomExactInInner({
     isSwitchingOrExecuting,
     selectedRecipientOrDefault,
     anyspendQuote,
-    paymentType,
+    effectivePaymentType,
     effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     hasEnoughBalance,
@@ -386,13 +396,13 @@ function AnySpendCustomExactInInner({
       return;
     }
 
-    if (paymentType === "crypto") {
+    if (effectivePaymentType === "crypto") {
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
         return;
       }
       await handleCryptoOrder();
-    } else if (paymentType === "fiat") {
+    } else if (effectivePaymentType === "fiat") {
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
         setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
         return;
@@ -423,7 +433,7 @@ function AnySpendCustomExactInInner({
 
       <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
         <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
-          {paymentType === "crypto" ? (
+          {effectivePaymentType === "crypto" ? (
             <CryptoPaySection
               selectedSrcChainId={selectedSrcChainId}
               setSelectedSrcChainId={setSelectedSrcChainId}
@@ -469,7 +479,10 @@ function AnySpendCustomExactInInner({
           )}
 
           <div
-            className={cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden")}
+            className={cn(
+              "relative -my-1 flex h-0 items-center justify-center",
+              effectivePaymentType === "fiat" && "hidden",
+            )}
           >
             <Button
               variant="ghost"
@@ -484,7 +497,7 @@ function AnySpendCustomExactInInner({
             </Button>
           </div>
 
-          {paymentType === "crypto" && (
+          {effectivePaymentType === "crypto" && (
             <CryptoReceiveSection
               isDepositMode={false}
               isBuyMode={false}
@@ -551,7 +564,7 @@ function AnySpendCustomExactInInner({
       </motion.div>
 
       {/* Gas indicator - show when source chain has gas data, hide for direct transfers */}
-      {gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && (
+      {gasPriceData && !isLoadingGas && effectivePaymentType === "crypto" && !isDirectTransfer && (
         <GasIndicator gasPrice={gasPriceData} className={classes?.gasIndicator || "mt-2 w-full"} />
       )}
 
@@ -735,7 +748,9 @@ function AnySpendCustomExactInInner({
             relayTxs={oat.data.relayTxs}
             executeTx={oat.data.executeTx}
             refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod}
+            cryptoPaymentMethod={
+              effectivePaymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod
+            }
             selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
             onPaymentMethodChange={setSelectedCryptoPaymentMethod}
             onBack={() => {
@@ -806,7 +821,7 @@ function AnySpendCustomExactInInner({
     <FeeDetailPanel
       fee={anyspendQuote.data.fee}
       transactionAmountUsd={
-        paymentType === "fiat"
+        effectivePaymentType === "fiat"
           ? parseFloat(srcAmount)
           : anyspendQuote.data.currencyIn?.amountUsd
             ? Number(anyspendQuote.data.currencyIn.amountUsd)

package/src/anyspend/react/components/AnySpendDeposit.tsx

@@ -11,7 +11,7 @@ import {
   NetworkPolygonPos,
 } from "@web3icons/react";
 import { ChevronRight } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AnySpend } from "./AnySpend";
 import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 import { ChainWarningText } from "./common/WarningText";
@@ -95,6 +95,8 @@ export interface AnySpendDepositProps {
   depositContractConfig?: DepositContractConfig;
   /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
   showChainSelection?: boolean;
+  /** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
+  showFiatOption?: boolean;
   /** Custom list of supported chains. If not provided, uses default chains */
   supportedChains?: ChainConfig[];
   /** Minimum pool size for filtering tokens (default: 1,000,000) */
@@ -248,6 +250,7 @@ export function AnySpendDeposit({
   orderType,
   depositContractConfig,
   showChainSelection,
+  showFiatOption = true,
   supportedChains = DEFAULT_SUPPORTED_CHAINS,
   minPoolSize = DEFAULT_MIN_POOL_SIZE,
   topChainsCount = 3,
@@ -270,12 +273,20 @@ export function AnySpendDeposit({
   const { connectedEOAWallet } = useAccountWallet();
   const eoaAddress = connectedEOAWallet?.getAccount()?.address;
 
+  const effectiveInitialPaymentType = !showFiatOption && initialPaymentType === "fiat" ? "crypto" : initialPaymentType;
+
   // Determine if we should show chain selection
-  const shouldShowChainSelection = showChainSelection ?? (!initialSourceChainId && !initialPaymentType);
+  const shouldShowChainSelection = showChainSelection ?? (!initialSourceChainId && !effectiveInitialPaymentType);
 
   const [step, setStep] = useState<DepositStep>(shouldShowChainSelection ? "select-chain" : "deposit");
   const [selectedChainId, setSelectedChainId] = useState<number | undefined>(initialSourceChainId);
-  const [paymentType, setPaymentType] = useState<"crypto" | "fiat">(initialPaymentType ?? "crypto");
+  const [paymentType, setPaymentType] = useState<"crypto" | "fiat">(effectiveInitialPaymentType ?? "crypto");
+
+  useEffect(() => {
+    if (!showFiatOption && paymentType === "fiat") {
+      setPaymentType("crypto");
+    }
+  }, [showFiatOption, paymentType]);
 
   // Fetch destination token data
   const { data: destinationTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
@@ -585,39 +596,43 @@ export function AnySpendDeposit({
             </button>
 
             {/* Fund with Fiat */}
-            <button
-              onClick={handleSelectFiat}
-              className={
-                depositClasses?.fiatButton ||
-                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
-              }
-            >
-              <div
-                className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+            {showFiatOption && (
+              <button
+                onClick={handleSelectFiat}
+                className={
+                  depositClasses?.fiatButton ||
+                  "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+                }
               >
-                <CreditCardIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
-                <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
-                  <span
-                    className={
-                      depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
-                    }
-                  >
-                    Fund with Fiat
-                  </span>
-                  <p
-                    className={
-                      depositClasses?.optionDescription ||
-                      "anyspend-deposit-option-description text-as-secondary text-xs"
-                    }
-                  >
-                    Pay with card or bank transfer
-                  </p>
+                <div
+                  className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+                >
+                  <CreditCardIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
+                  <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
+                    <span
+                      className={
+                        depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
+                      }
+                    >
+                      Fund with Fiat
+                    </span>
+                    <p
+                      className={
+                        depositClasses?.optionDescription ||
+                        "anyspend-deposit-option-description text-as-secondary text-xs"
+                      }
+                    >
+                      Pay with card or bank transfer
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <ChevronRight
-                className={depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"}
-              />
-            </button>
+                <ChevronRight
+                  className={
+                    depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"
+                  }
+                />
+              </button>
+            )}
           </div>
 
           {/* Chain-specific warning */}
@@ -716,6 +731,7 @@ export function AnySpendDeposit({
             destinationTokenAmount={destinationTokenAmount}
             callbackMetadata={callbackMetadata}
             senderAddress={senderAddress}
+            showFiatOption={showFiatOption}
             slots={slots}
             content={content}
             theme={theme}
@@ -744,6 +760,7 @@ export function AnySpendDeposit({
             destinationTokenAmount={destinationTokenAmount}
             callbackMetadata={callbackMetadata}
             senderAddress={senderAddress}
+            showFiatOption={showFiatOption}
             slots={slots}
             content={content}
             theme={theme}

package/src/anyspend/react/components/AnySpendDepositUpside.tsx

@@ -35,6 +35,7 @@ export function AnySpendDepositUpside({
   token,
   onSuccess,
   senderAddress,
+  showFiatOption,
   slots,
   content,
   theme,
@@ -49,6 +50,7 @@ export function AnySpendDepositUpside({
   onSuccess?: (amount: string) => void;
   /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
   senderAddress?: string;
+  showFiatOption?: boolean;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
@@ -87,6 +89,7 @@ export function AnySpendDepositUpside({
       header={header}
       onSuccess={onSuccess}
       senderAddress={senderAddress}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -8,7 +8,7 @@ import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/uti
 import { MoreVertical } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { GetQuoteResponse } from "../../types/api_req_res";
 import { AnySpendCustom } from "./AnySpendCustom";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
@@ -42,6 +42,7 @@ export function AnySpendNFT({
   slots,
   content,
   theme,
+  showFiatOption = true,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -54,6 +55,8 @@ export function AnySpendNFT({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+  showFiatOption?: boolean;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const hasFetchedRef = useRef(false);
@@ -164,6 +167,7 @@ export function AnySpendNFT({
       loadOrder={loadOrder}
       mode={mode}
       activeTab="fiat"
+      showFiatOption={showFiatOption}
       recipientAddress={recipientAddress}
       orderType={"mint_nft"}
       dstChainId={nftContract.chainId}
@@ -215,7 +219,7 @@ function DropdownMenu({ nftContract }: { nftContract: components["schemas"]["Nft
           </div>
 
           <div className="hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2">
-            <img src={chain?.logoUrl} className={cn("h-5 w-5", nftContract.chainId !== b3.id && "rounded-full")} />
+            <img src={chain?.logoUrl} className={cn("h-5 w-5", nftContract.chainId !== b3Viem.id && "rounded-full")} />
             <span className="text-sm">
               Minted on <span className="font-semibold">{chain ? getChainName(nftContract.chainId) : "Unknown"}</span>
             </span>

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import {
   Button,
   GlareCardRounded,
@@ -54,6 +54,7 @@ export function AnySpendStakeB3({
   slots,
   content,
   theme,
+  showFiatOption,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -65,6 +66,7 @@ export function AnySpendStakeB3({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  showFiatOption?: boolean;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -474,7 +476,7 @@ export function AnySpendStakeB3({
           >
             <div className="mb-6">
               <a
-                href={`https://basescan.org/tx/${stakingTxHash}`}
+                href={getExplorerTxUrl(base.id, stakingTxHash)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors"
@@ -521,6 +523,7 @@ export function AnySpendStakeB3({
       slots={slots}
       content={content}
       theme={theme}
+      showFiatOption={showFiatOption}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeB3ExactIn.tsx

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import {
   Button,
@@ -56,6 +56,7 @@ export function AnySpendStakeB3ExactIn({
   stakeAmount,
   onSuccess,
   senderAddress,
+  showFiatOption,
   slots,
   content,
   theme,
@@ -69,6 +70,7 @@ export function AnySpendStakeB3ExactIn({
   onSuccess?: (amount: string) => void;
   /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
   senderAddress?: string;
+  showFiatOption?: boolean;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
@@ -492,7 +494,7 @@ export function AnySpendStakeB3ExactIn({
           >
             <div className="mb-6">
               <a
-                href={`https://basescan.org/tx/${stakingTxHash}`}
+                href={getExplorerTxUrl(base.id, stakingTxHash)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors"
@@ -529,6 +531,7 @@ export function AnySpendStakeB3ExactIn({
       header={header}
       onSuccess={onSuccess}
       senderAddress={senderAddress}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

package/src/anyspend/react/components/AnySpendStakeUpside.tsx

@@ -30,6 +30,7 @@ export function AnySpendStakeUpside({
   slots,
   content,
   theme,
+  showFiatOption = true,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -44,6 +45,8 @@ export function AnySpendStakeUpside({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+  showFiatOption?: boolean;
 }) {
   const header = () => (
     <>
@@ -90,6 +93,7 @@ export function AnySpendStakeUpside({
       onSuccess={onSuccess}
       showRecipient={true}
       activeTab={activeTab}
+      showFiatOption={showFiatOption}
       senderAddress={senderAddress}
       slots={slots}
       content={content}

package/src/anyspend/react/components/AnySpendStakeUpsideExactIn.tsx

@@ -28,6 +28,7 @@ export function AnySpendStakeUpsideExactIn({
   token,
   onSuccess,
   senderAddress,
+  showFiatOption,
   slots,
   content,
   theme,
@@ -43,6 +44,7 @@ export function AnySpendStakeUpsideExactIn({
   onSuccess?: (amount: string) => void;
   /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
   senderAddress?: string;
+  showFiatOption?: boolean;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
@@ -82,6 +84,7 @@ export function AnySpendStakeUpsideExactIn({
       header={header}
       onSuccess={onSuccess}
       senderAddress={senderAddress}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}