@b3dotfun/sdk 0.0.49-alpha.1 → 0.0.49-alpha.10

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/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.js

@@ -460,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)
@@ -497,6 +505,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         return { text: "Buy", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
+        isSameChainSameToken,
         isLoadingAnyspendQuote,
         recipientAddress,
         isCreatingOrder,
@@ -713,7 +722,7 @@ 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

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

@@ -196,7 +196,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     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, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(PanelView.MAIN);
-                }, disableUrlParamManagement: true })) }) }));
+                }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
     // Loading view
     const loadingView = (_jsx("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: _jsx("div", { className: "text-as-primary", children: "Loading order details..." }) }));
     // Panel views

package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js

@@ -22,32 +22,38 @@ export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false,
                                 (() => {
                                     const calculatePriceImpact = (inputUsd, outputUsd) => {
                                         if (!inputUsd || !outputUsd) {
-                                            return { percentage: "0.00", isNegative: false };
+                                            return { percentage: "0.00", percentageNum: 0, isNegative: false };
                                         }
                                         const input = Number(inputUsd);
                                         const output = Number(outputUsd);
                                         // Handle edge cases
                                         if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
-                                            return { percentage: "0.00", isNegative: false };
+                                            return { percentage: "0.00", percentageNum: 0, isNegative: false };
                                         }
                                         const percentageValue = ((output - input) / input) * 100;
                                         // Handle the -0.00% case
                                         if (percentageValue > -0.005 && percentageValue < 0) {
-                                            return { percentage: "0.00", isNegative: false };
+                                            return { percentage: "0.00", percentageNum: 0, isNegative: false };
                                         }
                                         return {
                                             percentage: Math.abs(percentageValue).toFixed(2),
+                                            percentageNum: Math.abs(percentageValue),
                                             isNegative: percentageValue < 0,
                                         };
                                     };
-                                    const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
-                                    // Parse the percentage as a number for comparison
-                                    const percentageNum = parseFloat(percentage);
-                                    // Don't show if less than 1%
-                                    if (percentageNum < 1) {
+                                    const { percentage, percentageNum, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
+                                    // Get the fee percentage if available
+                                    const feePercent = anyspendQuote.data.fee?.finalFeeBps ? anyspendQuote.data.fee.finalFeeBps / 100 : 0;
+                                    // Calculate actual slippage (price impact minus fee)
+                                    const actualSlippage = percentageNum - feePercent;
+                                    // Show warning based on actual slippage, not total impact
+                                    const yellowThreshold = 1; // 1% actual slippage
+                                    const redThreshold = 2; // 2% actual slippage
+                                    // Don't show if actual slippage is less than yellow threshold
+                                    if (actualSlippage < yellowThreshold) {
                                         return null;
                                     }
                                     // Using inline style to ensure color displays
-                                    return (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
+                                    return (_jsxs("span", { className: "ml-2", style: { color: actualSlippage >= redThreshold ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
                                 })()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
 }

package/dist/esm/anyspend/react/components/common/FeeDetailPanel.js

@@ -67,7 +67,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }) {
                                     if (!showAllFeeTiers && currentTierIndex !== -1 && idx > currentTierIndex) {
                                         return null;
                                     }
-                                    return (_jsxs("div", { className: cn("flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors", isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60"), children: [_jsx("span", { children: tier.label }), _jsxs("span", { children: ["CC Fee + ", tier.fee] })] }, idx));
+                                    return (_jsxs("div", { className: cn("flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors", isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60"), children: [_jsx("span", { children: tier.label }), _jsxs("span", { children: ["Credit Card Fee + ", tier.fee] })] }, idx));
                                 })
                                 : CRYPTO_FEE_TIERS.map((tier, idx) => {
                                     const isCurrentTier = currentCryptoTier?.label === tier.label;
@@ -109,5 +109,5 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }) {
                                             return (_jsxs("button", { onClick: () => setShowAllDiscountTiers(!showAllDiscountTiers), className: "text-as-primary/60 hover:text-as-primary mt-2 flex w-full items-center justify-center gap-1 text-xs transition-colors", children: [_jsx("span", { children: showAllDiscountTiers ? "Show less" : "Show all tiers" }), _jsx(ChevronDown, { className: cn("h-3.5 w-3.5 transition-transform", showAllDiscountTiers && "rotate-180") })] }));
                                         }
                                         return null;
-                                    })()] })) })] })), transactionAmountUsd && (_jsx("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-secondary", children: "Transaction" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", transactionAmountUsd.toFixed(2)] })] }), isStripeFee && currentFiatTier && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-secondary", children: currentFiatTier.label }), _jsxs("span", { className: "text-as-primary", children: ["CC Fee + ", currentFiatTier.fee] })] })), !isStripeFee && currentCryptoTier && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-as-secondary", children: ["Base Fee (", bpsToPercent(currentCryptoTier.bps), "%)"] }), _jsxs("span", { className: "text-as-primary font-medium", children: ["$", ((transactionAmountUsd * currentCryptoTier.bps) / 10000).toFixed(2)] })] }), hasWhaleDiscount && currentWhaleTier && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-green-600", children: ["Discount (", currentWhaleTier.discountPercent, "% off)"] }), _jsxs("span", { className: "font-medium text-green-600", children: ["-$", ((transactionAmountUsd * baseFee * currentWhaleTier.discountPercent) / 100 / 10000).toFixed(2)] })] })), hasPartnerDiscount && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-green-600", children: ["Partner Discount (", partnerDiscountPercent, "% off)"] }), _jsxs("span", { className: "font-medium text-green-600", children: ["-$", ((transactionAmountUsd * baseFee * partnerDiscountPercent) / 100 / 10000).toFixed(2)] })] })), _jsx("div", { className: "border-as-border-secondary border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Fee" }), _jsxs("span", { className: "text-as-brand font-semibold", children: ["$", ((transactionAmountUsd * fee.finalFeeBps) / 10000).toFixed(2)] })] }) })] }))] }) })), _jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: ["Back to ", isStripeFee ? "Payment" : "Swap"] })] }) }));
+                                    })()] })) })] })), transactionAmountUsd && (_jsx("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-secondary", children: "Transaction" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", transactionAmountUsd.toFixed(2)] })] }), isStripeFee && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-as-secondary", children: ["Credit Card Fee (", fee.stripeFeeBps ? `${bpsToPercent(fee.stripeFeeBps)}%` : "0%", " + $", fee.stripeFeeUsd?.toFixed(2) || "0.00", ")"] }), _jsxs("span", { className: "text-as-primary font-medium", children: ["$", ((transactionAmountUsd * (fee.stripeFeeBps || 0)) / 10000 + (fee.stripeFeeUsd || 0)).toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-as-secondary", children: ["AnySpend Fee (", fee.anyspendFeeBps ? `${bpsToPercent(fee.anyspendFeeBps)}%` : "0%", fee.anyspendFeeUsd && fee.anyspendFeeUsd > 0 ? ` + $${fee.anyspendFeeUsd.toFixed(2)}` : "", ")"] }), _jsxs("span", { className: "text-as-primary font-medium", children: ["$", ((transactionAmountUsd * (fee.anyspendFeeBps || 0)) / 10000 + (fee.anyspendFeeUsd || 0)).toFixed(2)] })] }), _jsx("div", { className: "border-as-border-secondary border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Fee" }), _jsxs("span", { className: "text-as-brand font-semibold", children: ["$", ((transactionAmountUsd * (fee.finalFeeBps || 0)) / 10000 + (fee.finalFeeUsd || 0)).toFixed(2)] })] }) })] })), !isStripeFee && currentCryptoTier && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-as-secondary", children: ["Base Fee (", bpsToPercent(currentCryptoTier.bps), "%)"] }), _jsxs("span", { className: "text-as-primary font-medium", children: ["$", ((transactionAmountUsd * currentCryptoTier.bps) / 10000).toFixed(2)] })] }), hasWhaleDiscount && currentWhaleTier && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-green-600", children: ["Discount (", currentWhaleTier.discountPercent, "% off)"] }), _jsxs("span", { className: "font-medium text-green-600", children: ["-$", ((transactionAmountUsd * baseFee * currentWhaleTier.discountPercent) / 100 / 10000).toFixed(2)] })] })), hasPartnerDiscount && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-green-600", children: ["Partner Discount (", partnerDiscountPercent, "% off)"] }), _jsxs("span", { className: "font-medium text-green-600", children: ["-$", ((transactionAmountUsd * baseFee * partnerDiscountPercent) / 100 / 10000).toFixed(2)] })] })), _jsx("div", { className: "border-as-border-secondary border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Fee" }), _jsxs("span", { className: "text-as-brand font-semibold", children: ["$", ((transactionAmountUsd * fee.finalFeeBps) / 10000).toFixed(2)] })] }) })] }))] }) })), _jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: ["Back to ", isStripeFee ? "Payment" : "Swap"] })] }) }));
 }

package/dist/esm/anyspend/react/components/common/OrderDetails.d.ts

@@ -12,6 +12,7 @@ interface OrderDetailsProps {
     onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
     onBack?: () => void;
     disableUrlParamManagement?: boolean;
+    points?: number | undefined;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;
 export declare const OrderDetailsLoadingView: import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -125,7 +125,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, }) {
+export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     // Get theme from B3Provider context
@@ -411,7 +411,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         }
     };
     if (refundTxs.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTx => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
@@ -420,7 +420,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                             : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
@@ -445,7 +445,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                 }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
@@ -464,7 +464,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
     if (depositTxs?.length || waitingForDeposit) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Received payment`
                                                 : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === "swap"
                                                 ? "Processing Swap"
@@ -491,7 +491,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                         ? centerTruncate(phantomWalletAddress, 6)
                                                         : centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        _jsx(motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })), _jsxs("button", { className: "order-details-cancel-btn flex w-full items-center justify-center gap-2", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        _jsx(motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), _jsxs("button", { className: "order-details-cancel-btn flex w-full items-center justify-center gap-2", onClick: handleBack, children: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));

package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.d.ts

@@ -13,6 +13,7 @@ interface OrderDetailsCollapsibleProps {
     className?: string;
     showTotal?: boolean;
     totalAmount?: string;
+    points?: number;
 }
 export declare const OrderDetailsCollapsible: import("react").NamedExoticComponent<OrderDetailsCollapsibleProps>;
 export {};

package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "../../../../anyspend/index.js";
 import { CopyToClipboard } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
+import { formatNumber } from "../../../../shared/utils/formatNumber.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { ChevronDown, Copy } from "lucide-react";
 import { motion } from "motion/react";
 import { memo, useState } from "react";
 import { toast } from "sonner";
 import { b3 } from "viem/chains";
-export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, }) {
+export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, points, }) {
     const [showOrderDetails, setShowOrderDetails] = useState(true);
     // Calculate expected amount if not provided
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -33,5 +34,5 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const FeatureFlagsContext = createContext(undefined);
 const defaultFeatureFlags = {
-    showPoints: false,
+    showPoints: true,
 };
 export function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }) {
     return _jsx(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });