@b3dotfun/sdk 0.0.49 → 0.0.50-alpha.1

package/dist/cjs/bondkit/components/TradingView.js

@@ -4,17 +4,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
+const config_1 = require("../config");
 const cdn_loader_1 = require("./utils/cdn-loader");
 const format_1 = require("./utils/format");
 // TradingView will be available on window after loading from CDN
 // Datafeed will be implemented inline
 // Mock loading overlay - replace with your actual loading component
 const GifLoadingOverlay = ({ className }) => ((0, jsx_runtime_1.jsx)("div", { className: `absolute inset-0 flex items-center justify-center bg-white/50 backdrop-blur-sm ${className || ""}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-secondary-grey h-8 w-8 animate-spin" }) }));
-const TradingView = ({ className, tokenAddress, tokenSymbol }) => {
+const TradingView = ({ className, tokenAddress, tokenSymbol, chainId = 8453 }) => {
     // Use token info for the current trade
     const currentTrade = {
         product_id: tokenAddress && tokenSymbol ? `${tokenSymbol}-${tokenAddress}` : "BONDKIT",
     };
+    // Get chart API endpoint from config
+    const config = (0, config_1.getConfig)(chainId);
+    const chartApiUrl = `${config.chartApiEndpoint}/udf`;
     const [tradingViewDefaultInterval, setTradingViewDefaultInterval] = (0, react_1.useState)("60");
     const [tradingViewTimezone, setTradingViewTimezone] = (0, react_1.useState)("");
     const chartContainerRef = (0, react_1.useRef)(null);
@@ -126,7 +130,7 @@ const TradingView = ({ className, tokenAddress, tokenSymbol }) => {
                 unsubscribeBars: () => { },
             };
         };
-        const datafeed = createUDFDatafeed("https://b3-udf-worker.sean-430.workers.dev/bondkit/udf");
+        const datafeed = createUDFDatafeed(chartApiUrl);
         // Calculate timeframe for last 2 days
         const currentTime = Math.floor(Date.now() / 1000);
         const twoDaysAgo = currentTime - 2 * 24 * 60 * 60; // 2 days in seconds
@@ -246,7 +250,14 @@ const TradingView = ({ className, tokenAddress, tokenSymbol }) => {
                 tvWidgetRef.current = null;
             }
         };
-    }, [librariesLoaded, currentTrade?.product_id, tradingViewDefaultInterval, tradingViewTimezone]);
+    }, [
+        librariesLoaded,
+        currentTrade?.product_id,
+        tradingViewDefaultInterval,
+        tradingViewTimezone,
+        chartApiUrl,
+        chainId,
+    ]);
     (0, react_1.useEffect)(() => {
         if (chartLoaded &&
             currentTrade?.product_id &&

package/dist/cjs/bondkit/components/index.d.ts

@@ -1,5 +1,5 @@
+export * from "./config/cdn";
 export { default as TradingView } from "./TradingView";
 export type { TradingViewProps } from "./types";
 export * from "./utils/cdn-loader";
 export * from "./utils/format";
-export * from "./config/cdn";

package/dist/cjs/bondkit/components/index.js

@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TradingView = void 0;
+__exportStar(require("./config/cdn"), exports);
 var TradingView_1 = require("./TradingView");
 Object.defineProperty(exports, "TradingView", { enumerable: true, get: function () { return __importDefault(TradingView_1).default; } });
 __exportStar(require("./utils/cdn-loader"), exports);
 __exportStar(require("./utils/format"), exports);
-__exportStar(require("./config/cdn"), exports);

package/dist/cjs/bondkit/components/types.d.ts

@@ -5,4 +5,5 @@ export interface TradingViewProps {
     className?: string;
     tokenAddress?: string;
     tokenSymbol?: string;
+    chainId?: number;
 }

package/dist/cjs/bondkit/config.d.ts

@@ -5,6 +5,7 @@ export interface Config {
     rpcUrl: string;
     factoryAddress: Address;
     apiEndpoint: string;
+    chartApiEndpoint: string;
 }
 export type SupportedChainId = typeof base.id;
 export declare const getConfig: (chainId: number, rpcUrl?: string) => Config;

package/dist/cjs/bondkit/config.js

@@ -8,6 +8,7 @@ const baseMainnetConfig = {
     rpcUrl: constants_1.BaseMainnetRpcUrl,
     factoryAddress: constants_1.BaseBondkitTokenFactoryContractAddress,
     apiEndpoint: "https://api.b3.fun/bondkit-tokens",
+    chartApiEndpoint: "https://bondkit-chart-api.b3.fun",
 };
 const getConfig = (chainId, rpcUrl) => {
     if (chainId === chains_1.base.id) {

package/dist/cjs/bondkit/index.d.ts

@@ -5,4 +5,4 @@ export * from "./constants";
 export * from "./types";
 export * from "./abis";
 export { BondkitSwapService } from "./swapService";
-export { default as TradingView } from "./components/TradingView";
+export * from "./components";

package/dist/cjs/bondkit/index.js

@@ -13,11 +13,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TradingView = exports.BondkitSwapService = void 0;
+exports.BondkitSwapService = void 0;
 // Core exports
 __exportStar(require("./bondkitToken"), exports);
 __exportStar(require("./bondkitTokenFactory"), exports);
@@ -32,5 +29,4 @@ __exportStar(require("./abis"), exports);
 var swapService_1 = require("./swapService");
 Object.defineProperty(exports, "BondkitSwapService", { enumerable: true, get: function () { return swapService_1.BondkitSwapService; } });
 // Components
-var TradingView_1 = require("./components/TradingView");
-Object.defineProperty(exports, "TradingView", { enumerable: true, get: function () { return __importDefault(TradingView_1).default; } });
+__exportStar(require("./components"), exports);

package/dist/cjs/bondkit/types.d.ts

@@ -86,3 +86,18 @@ export interface SwapQuote {
     executionPrice: string;
     fee: string;
 }
+export interface MarketCapDataPoint {
+    time: string;
+    value: string;
+}
+export interface TokenInfo {
+    contractAddress: string;
+    chainId: number;
+    name: string;
+    symbol: string;
+    found: boolean;
+}
+export interface MarketCapChartResponse {
+    tokenInfo: TokenInfo;
+    data: MarketCapDataPoint[];
+}

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -1,5 +1,5 @@
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
-import "@reservoir0x/relay-kit-ui/styles.css";
+import "@relayprotocol/relay-kit-ui/styles.css";
 import { Account } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
 import { B3ContextType } from "./types";

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

@@ -7,7 +7,7 @@ const react_1 = require("../../../../global-account/react");
 const useWagmiConfig_1 = require("../../../../global-account/react/hooks/useWagmiConfig");
 const analytics_1 = require("../../../../global-account/utils/analytics");
 const debug_1 = require("../../../../shared/utils/debug");
-require("@reservoir0x/relay-kit-ui/styles.css");
+require("@relayprotocol/relay-kit-ui/styles.css");
 const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
 const sonner_1 = require("sonner");

package/dist/cjs/global-account/react/components/B3Provider/RelayKitProviderWrapper.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelayKitProviderWrapper = RelayKitProviderWrapper;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
-const relay_sdk_1 = require("@reservoir0x/relay-sdk");
+const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
+const relay_sdk_1 = require("@relayprotocol/relay-sdk");
 const react_1 = require("react");
 function RelayKitProviderWrapper({ children, simDuneApiKey, }) {
     const [relayChains, setRelayChains] = (0, react_1.useState)([]);

package/dist/cjs/global-account/react/components/ui/tooltip.js

@@ -45,6 +45,6 @@ const Tooltip = TooltipPrimitive.Root;
 exports.Tooltip = Tooltip;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 exports.TooltipTrigger = TooltipTrigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, cn_1.cn)("bg-b3-react-popover text-b3-react-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className), ...props })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, cn_1.cn)("bg-b3-react-popover text-b3-react-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className), ...props }) })));
 exports.TooltipContent = TooltipContent;
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -41,6 +41,17 @@ function useAuthentication(partnerId) {
     const activeWagmiAccount = (0, wagmi_1.useAccount)();
     const { switchAccount } = (0, wagmi_1.useSwitchAccount)();
     debug("@@activeWagmiAccount", activeWagmiAccount);
+    // Check localStorage version and clear if not found or mismatched
+    (0, react_2.useEffect)(() => {
+        if (typeof localStorage !== "undefined") {
+            const version = localStorage.getItem("version");
+            if (version !== "1") {
+                debug("@@localStorage:clearing due to version mismatch", { version });
+                localStorage.clear();
+                localStorage.setItem("version", "1");
+            }
+        }
+    }, []);
     const wallet = (0, wallets_1.ecosystemWallet)(constants_1.ecosystemWalletId, {
         partnerId: partnerId,
     });

package/dist/cjs/shared/generated/chain-networks.json

@@ -65,7 +65,7 @@
   {
     "_id": "66f2044afe5a3ac32a1de9ff",
     "id": 8453,
-    "name": "Base Mainnet",
+    "name": "Base",
     "rpcUrls": {
       "default": {
         "http": "https://base-rpc.publicnode.com",
@@ -524,7 +524,7 @@
     "testnet": true,
     "badge": "https://cdn.b3.fun/b4-logo.png",
     "color": "#3368ef",
-    "enabledFeatures": ["explorer"]
+    "enabledFeatures": ["explorer", "basement"]
   },
   {
     "_id": "684afdec4a478ffb44a4f83f",
@@ -620,7 +620,7 @@
     "enabledFeatures": ["explorer"]
   },
   {
-    "_id": "68a351c603e65c07b7645581",
+    "_id": "68aefec4130155af4cf50711",
     "id": 1448000,
     "name": "XRPLT",
     "rpcUrls": {
@@ -631,21 +631,54 @@
       "backups": []
     },
     "icon": {
-      "url": "https://cdn.b3.fun/xrpl_logo.svg",
+      "url": "https://cdn.b3.fun/xrpl-black.svg",
       "width": 32,
       "height": 32,
       "format": "svg"
     },
     "blockExplorers": {
-      "default": "https://xrplt.explorer.caldera.xyz/",
+      "default": "https://xrplt.explorer.caldera.xyz",
       "explorerTitle": "XRPLT Explorer"
     },
     "nativeCurrency": {
       "name": "XRP",
       "symbol": "XRP",
-      "decimals": 18
+      "decimals": 6
     },
     "testnet": true,
-    "enabledFeatures": ["xcade", "explorer"]
+    "badge": "https://cdn.b3.fun/xrpl-black.svg",
+    "color": "#000000",
+    "enabledFeatures": ["basement", "explorer"]
+  },
+  {
+    "_id": "68eabd8a234b8958b152d6e0",
+    "id": 2741,
+    "name": "Abstract",
+    "rpcUrls": {
+      "default": {
+        "http": "https://cosmopolitan-nameless-mountain.abstract-mainnet.quiknode.pro/863853304b986b582bdacf625ce3350397c560f8/",
+        "ws": "wss://cosmopolitan-nameless-mountain.abstract-mainnet.quiknode.pro/863853304b986b582bdacf625ce3350397c560f8/"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://assets.relay.link/icons/square/2741/light.png",
+      "width": 261,
+      "height": 261,
+      "format": "png"
+    },
+    "blockExplorers": {
+      "default": "https://abscan.org",
+      "explorerTitle": "Abscan"
+    },
+    "nativeCurrency": {
+      "name": "ETH",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "testnet": false,
+    "badge": "https://assets.relay.link/icons/square/2741/light.png",
+    "color": "#6eb998",
+    "enabledFeatures": ["basement"]
   }
 ]

package/dist/esm/anyspend/constants/index.d.ts

@@ -6,6 +6,7 @@ export declare const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;
 export declare const SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL";
 export declare const SOLANA_TOKEN_2022_PROGRAM_ID = "TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb";
 export declare const B3_TOKEN: components["schemas"]["Token"];
+export declare const ANYSPEND_TOKEN: components["schemas"]["Token"];
 export declare const USDC_BASE: components["schemas"]["Token"];
 export declare const ETH_BASE: components["schemas"]["Token"];
 export declare const NFT_CONTRACTS: components["schemas"]["NftContract"][];

package/dist/esm/anyspend/constants/index.js

@@ -6,7 +6,7 @@ export const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;
 export const SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL";
 export const SOLANA_TOKEN_2022_PROGRAM_ID = "TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb";
 export const B3_TOKEN = {
-    chainId: 8453,
+    chainId: base.id,
     address: "0xb3b32f9f8827d4634fe7d973fa1034ec9fddb3b3",
     decimals: 18,
     name: "B3",
@@ -15,6 +15,16 @@ export const B3_TOKEN = {
         logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/35690.png",
     },
 };
+export const ANYSPEND_TOKEN = {
+    chainId: base.id,
+    address: "0xc17dda248e2d50fc006d8febb5a406dd31972712",
+    decimals: 18,
+    name: "Anyspend",
+    symbol: "ANY",
+    metadata: {
+        logoURI: "https://cdn.b3.fun/anyspend_64x64.png",
+    },
+};
 export const USDC_BASE = {
     symbol: "USDC",
     chainId: base.id,

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

@@ -14,7 +14,8 @@ export declare enum PanelView {
     RECIPIENT_SELECTION = 5,
     CRYPTO_PAYMENT_METHOD = 6,
     FIAT_PAYMENT_METHOD = 7,
-    POINTS_DETAIL = 8
+    POINTS_DETAIL = 8,
+    FEE_DETAIL = 9
 }
 export declare function AnySpend(props: {
     mode?: "page" | "modal";

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

@@ -22,6 +22,7 @@ import { OrderHistory } from "./common/OrderHistory.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
+import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TabSection } from "./common/TabSection.js";
 export var PanelView;
@@ -35,6 +36,7 @@ export var PanelView;
     PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 6] = "CRYPTO_PAYMENT_METHOD";
     PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 7] = "FIAT_PAYMENT_METHOD";
     PanelView[PanelView["POINTS_DETAIL"] = 8] = "POINTS_DETAIL";
+    PanelView[PanelView["FEE_DETAIL"] = 9] = "FEE_DETAIL";
 })(PanelView || (PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props) {
@@ -458,10 +460,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             toast.error("Failed to create order: " + error.message);
         },
     });
+    // Check if it's a same-chain same-token swap
+    const isSameChainSameToken = useMemo(() => {
+        return (activeTab === "crypto" &&
+            selectedSrcChainId === selectedDstChainId &&
+            selectedSrcToken.address.toLowerCase() === selectedDstToken.address.toLowerCase());
+    }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = useMemo(() => {
         if (activeInputAmountInWei === "0")
             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 };
         if (isLoadingAnyspendQuote)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (!recipientAddress)
@@ -495,6 +505,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         return { text: "Buy", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
+        isSameChainSameToken,
         isLoadingAnyspendQuote,
         recipientAddress,
         isCreatingOrder,
@@ -711,12 +722,12 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
                     setOrderId(undefined);
                     navigateBack();
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
                                 // Map panel index to navigation with direction
                                 const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
                                 if (panelsWithForwardNav.includes(panelIndex)) {
@@ -725,7 +736,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                                 else {
                                     setActivePanel(panelIndex);
                                 }
-                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -744,10 +755,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), _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.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), _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.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
@@ -776,6 +787,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             navigateBack(); // Go back to main panel to show updated pricing
         }, srcAmountOnRamp: srcAmountOnRamp }));
     const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
+    const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp), onBack: navigateBack })) : null;
     // Add tabs to the main component when no order is loaded
     return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
                 "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
@@ -806,5 +818,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
                 ] }) }) }));
 }

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Badge, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
+import { Badge, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TextShimmer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
 import { cn, formatUsername } from "../../../shared/utils/index.js";
 import { shortenAddress } from "../../../shared/utils/formatAddress.js";
 import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
 import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js";
 import invariant from "invariant";
-import { ChevronRight, ChevronRightCircle, Loader2 } from "lucide-react";
+import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -16,6 +16,7 @@ import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext.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 { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
@@ -34,7 +35,7 @@ var PanelView;
     PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 6] = "FIAT_PAYMENT_METHOD";
     PanelView[PanelView["POINTS_DETAIL"] = 7] = "POINTS_DETAIL";
 })(PanelView || (PanelView = {}));
-function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, recipientAddress, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
+function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, recipientAddress, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, onrampVendor, }) {
     switch (orderType) {
         case "mint_nft": {
             invariant(contractType, "Contract type is required");
@@ -49,6 +50,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 contractAddress: contractAddress,
                 tokenId: tokenId,
                 contractType: contractType,
+                onrampVendor,
             };
         }
         case "join_tournament": {
@@ -61,6 +63,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 recipientAddress,
                 price: dstAmount,
                 contractAddress: contractAddress,
+                onrampVendor,
             };
         }
         case "fund_tournament": {
@@ -73,6 +76,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 recipientAddress,
                 fundAmount: dstAmount,
                 contractAddress: contractAddress,
+                onrampVendor,
             };
         }
         case "custom": {
@@ -89,6 +93,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                     to: contractAddress,
                     spenderAddress: spenderAddress,
                 },
+                onrampVendor,
             };
         }
         default: {
@@ -186,6 +191,7 @@ 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,
         });
     }, [
         activeTab,
@@ -201,6 +207,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         spenderAddress,
         srcChainId,
         srcToken,
+        selectedFiatPaymentMethod,
     ]);
     const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(getRelayQuoteRequest);
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
@@ -473,7 +480,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), renderPointsBadge()] }), _jsxs("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] })] }), _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", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" }), 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 }) })] }) }))] }), renderPointsBadge()] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                                            10000).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: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -485,7 +493,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), renderPointsBadge()] }), _jsxs("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] })] }), _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", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", 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 }) })] }) }))] }), renderPointsBadge()] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary 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: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",