@b3dotfun/sdk 0.0.88-alpha.9 → 0.0.89-alpha.0

package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts

@@ -61,5 +61,9 @@ export interface AnySpendCollectorClubPurchaseProps {
      * The partner ID
      */
     packType: string;
+    /**
+     * Force fiat payment
+     */
+    forceFiatPayment?: boolean;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -48,7 +48,7 @@ const BUY_PACKS_FOR_ABI = {
     stateMutability: "nonpayable",
     type: "function",
 };
-function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, }) {
+function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, }) {
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = (0, react_1.useMemo)(() => {
         try {
@@ -87,5 +87,5 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
             pricePerPack,
             vendingMachineId,
             packType,
-        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount }));
+        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment }));
 }

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

@@ -11,6 +11,7 @@ export declare function AnySpendCustom(props: {
     dstChainId: number;
     dstToken: components["schemas"]["Token"];
     dstAmount: string;
+    forceFiatPayment?: boolean;
     contractAddress: string;
     encodedData: string;
     metadata: any;

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

@@ -146,7 +146,7 @@ function AnySpendCustom(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomInner, { ...props }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, }) {
+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, forceFiatPayment, }) {
     const hasMounted = (0, react_2.useHasMounted)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
@@ -545,7 +545,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         return null;
     };
     // Confirm order view.
-    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [!forceFiatPayment && ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                         setActiveTab("crypto");
                                         // Reset payment methods when switching tabs
                                         resetPaymentMethods();
@@ -555,7 +555,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                         // Reset payment methods when switching tabs
                                         resetPaymentMethods();
                                         setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
-                                    }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
+                                    }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) })), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -477,6 +477,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     vendingMachineId: string;
     /** The pack type */
     packType: string;
+    /** Active tab */
+    activeTab?: "crypto" | "fiat";
+    /** Force fiat payment */
+    forceFiatPayment?: boolean;
 }
 /**
  * Union type of all possible modal content types

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

@@ -61,5 +61,9 @@ export interface AnySpendCollectorClubPurchaseProps {
      * The partner ID
      */
     packType: string;
+    /**
+     * Force fiat payment
+     */
+    forceFiatPayment?: boolean;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -45,7 +45,7 @@ const BUY_PACKS_FOR_ABI = {
     stateMutability: "nonpayable",
     type: "function",
 };
-export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, }) {
+export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, }) {
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = useMemo(() => {
         try {
@@ -84,5 +84,5 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
             pricePerPack,
             vendingMachineId,
             packType,
-        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount }));
+        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment }));
 }

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

@@ -11,6 +11,7 @@ export declare function AnySpendCustom(props: {
     dstChainId: number;
     dstToken: components["schemas"]["Token"];
     dstAmount: string;
+    forceFiatPayment?: boolean;
     contractAddress: string;
     encodedData: string;
     metadata: any;

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

@@ -107,7 +107,7 @@ 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, srcFiatAmount: srcFiatAmountProps, }) {
+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, forceFiatPayment, }) {
     const hasMounted = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
@@ -506,7 +506,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         return null;
     };
     // Confirm order view.
-    const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+    const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [!forceFiatPayment && (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                         setActiveTab("crypto");
                                         // Reset payment methods when switching tabs
                                         resetPaymentMethods();
@@ -516,7 +516,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                         // Reset payment methods when switching tabs
                                         resetPaymentMethods();
                                         setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-                                    }, children: "Pay with fiat" })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                    }, children: "Pay with fiat" })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) })), _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",

package/dist/esm/global-account/react/stores/useModalStore.d.ts

@@ -477,6 +477,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     vendingMachineId: string;
     /** The pack type */
     packType: string;
+    /** Active tab */
+    activeTab?: "crypto" | "fiat";
+    /** Force fiat payment */
+    forceFiatPayment?: boolean;
 }
 /**
  * Union type of all possible modal content types

package/dist/types/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts

@@ -61,5 +61,9 @@ export interface AnySpendCollectorClubPurchaseProps {
      * The partner ID
      */
     packType: string;
+    /**
+     * Force fiat payment
+     */
+    forceFiatPayment?: boolean;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,7 @@ export declare function AnySpendCustom(props: {
     dstChainId: number;
     dstToken: components["schemas"]["Token"];
     dstAmount: string;
+    forceFiatPayment?: boolean;
     contractAddress: string;
     encodedData: string;
     metadata: any;

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -477,6 +477,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     vendingMachineId: string;
     /** The pack type */
     packType: string;
+    /** Active tab */
+    activeTab?: "crypto" | "fiat";
+    /** Force fiat payment */
+    forceFiatPayment?: boolean;
 }
 /**
  * Union type of all possible modal content types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.88-alpha.9",
+  "version": "0.0.89-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -109,6 +109,10 @@ export interface AnySpendCollectorClubPurchaseProps {
    * The partner ID
    */
   packType: string;
+  /**
+   * Force fiat payment
+   */
+  forceFiatPayment?: boolean;
 }
 
 export function AnySpendCollectorClubPurchase({
@@ -126,6 +130,7 @@ export function AnySpendCollectorClubPurchase({
   showRecipient = true,
   vendingMachineId,
   packType,
+  forceFiatPayment,
 }: AnySpendCollectorClubPurchaseProps) {
   // Calculate total amount needed (pricePerPack * packAmount)
   const totalAmount = useMemo(() => {
@@ -193,6 +198,7 @@ export function AnySpendCollectorClubPurchase({
       onSuccess={onSuccess}
       showRecipient={showRecipient}
       srcFiatAmount={srcFiatAmount}
+      forceFiatPayment={forceFiatPayment}
     />
   );
 }

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

@@ -174,6 +174,7 @@ export function AnySpendCustom(props: {
   dstChainId: number;
   dstToken: components["schemas"]["Token"];
   dstAmount: string;
+  forceFiatPayment?: boolean;
   contractAddress: string;
   encodedData: string;
   metadata: any;
@@ -217,6 +218,7 @@ function AnySpendCustomInner({
   showRecipient = true,
   onShowPointsDetail,
   srcFiatAmount: srcFiatAmountProps,
+  forceFiatPayment,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -241,6 +243,7 @@ function AnySpendCustomInner({
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
   srcFiatAmount?: string;
+  forceFiatPayment?: boolean;
 }) {
   const hasMounted = useHasMounted();
 
@@ -861,65 +864,67 @@ function AnySpendCustomInner({
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
         className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
       >
-        <div className="w-full">
-          <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
-            <div
-              className={cn(
-                "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
-                "h-full w-1/2",
-                activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
-              )}
-              style={{ willChange: "transform" }}
-            />
-            <button
-              className={cn(
-                "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
-              )}
-              onClick={() => {
-                setActiveTab("crypto");
-                // Reset payment methods when switching tabs
-                resetPaymentMethods();
-                setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-              }}
-            >
-              Pay with crypto
-            </button>
-            {isOnrampSupported ? (
+        {!forceFiatPayment && (
+          <div className="w-full">
+            <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
+              <div
+                className={cn(
+                  "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
+                  "h-full w-1/2",
+                  activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
+                )}
+                style={{ willChange: "transform" }}
+              />
               <button
                 className={cn(
                   "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                  activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+                  activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
                 )}
                 onClick={() => {
-                  setActiveTab("fiat");
+                  setActiveTab("crypto");
                   // Reset payment methods when switching tabs
                   resetPaymentMethods();
                   setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                 }}
               >
-                Pay with fiat
+                Pay with crypto
               </button>
-            ) : (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    className={cn(
-                      "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                      "text-as-primary/50 cursor-not-allowed bg-transparent",
-                    )}
-                    disabled
-                  >
-                    Pay with fiat
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <span className="text-as-primary w-[140px]">Fiat payments are not supported for this amount</span>
-                </TooltipContent>
-              </Tooltip>
-            )}
+              {isOnrampSupported ? (
+                <button
+                  className={cn(
+                    "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+                    activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+                  )}
+                  onClick={() => {
+                    setActiveTab("fiat");
+                    // Reset payment methods when switching tabs
+                    resetPaymentMethods();
+                    setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                  }}
+                >
+                  Pay with fiat
+                </button>
+              ) : (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className={cn(
+                        "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+                        "text-as-primary/50 cursor-not-allowed bg-transparent",
+                      )}
+                      disabled
+                    >
+                      Pay with fiat
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <span className="text-as-primary w-[140px]">Fiat payments are not supported for this amount</span>
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
           </div>
-        </div>
+        )}
 
         {/* Warning */}
         {/* {srcChainId === base.id || dstChainId === base.id || activeTab === "fiat" ? (

package/src/global-account/react/stores/useModalStore.ts

@@ -505,6 +505,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
   vendingMachineId: string;
   /** The pack type */
   packType: string;
+  /** Active tab */
+  activeTab?: "crypto" | "fiat";
+  /** Force fiat payment */
+  forceFiatPayment?: boolean;
 }
 
 /**