@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-alpha.0

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
@@ -20,9 +20,9 @@ import { ErrorSection } from "./common/ErrorSection.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
-import { OrderStatus } from "./common/OrderStatus.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
+import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TabSection } from "./common/TabSection.js";
 export var PanelView;
@@ -35,13 +35,14 @@ export var PanelView;
     PanelView[PanelView["RECIPIENT_SELECTION"] = 5] = "RECIPIENT_SELECTION";
     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 = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -320,8 +321,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             srcTokenAddress: selectedSrcToken.address,
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
             type: "swap",
-            tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXPECTED_OUTPUT",
+            tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
             amount: activeInputAmountInWei,
+            recipientAddress,
         }
         : {
             srcChain: base.id,
@@ -331,6 +333,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             type: "swap",
             tradeType: "EXACT_INPUT",
             amount: srcAmountOnrampInWei,
+            recipientAddress,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
     // Load custom recipients from local storage on mount
@@ -383,6 +386,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             }
         }
     }, [anyspendQuote, isSrcInputDirty]);
+    useEffect(() => {
+        if (oat?.data?.order.status === "executed") {
+            console.log("Calling onSuccess");
+            const txHash = oat?.data?.executeTx?.txHash;
+            onSuccess?.(txHash);
+        }
+    }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -652,12 +662,12 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), 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 && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
-                            setOrderId(undefined);
-                            setActivePanel(PanelView.MAIN);
-                            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: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_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: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), _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: () => {
+    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: () => {
+                    setOrderId(undefined);
+                    setActivePanel(PanelView.MAIN);
+                    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: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), 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: setActivePanel, _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: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _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;
                             }
@@ -679,7 +689,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         }, 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: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _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", getAnyspendQuoteError && "mt-0"), 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: 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: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _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", getAnyspendQuoteError && "mt-0"), 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: 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);
             setActivePanel(PanelView.ORDER_DETAILS);
@@ -707,6 +717,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             setSelectedFiatPaymentMethod(method);
             setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
         }, srcAmountOnRamp: srcAmountOnRamp }));
+    const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
     // 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
@@ -730,5 +741,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
                     _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"),
                 ] }) }) }));
 }

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

@@ -199,7 +199,6 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
         args: [recipientAddress, parseEther(b3Amount), BigInt(minTokensOut)],
     });
     return (_jsx(AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: parseEther(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
-            type: "custom",
             action: "BondKit Buy",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -390,7 +390,6 @@ export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAd
     // AnySpend flow for when user needs to swap to B3
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
-            type: "custom",
             action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
         }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
 }

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

@@ -20,4 +20,5 @@ export declare function AnySpendCustom(props: {
     }) => React.JSX.Element;
     onSuccess?: (txHash?: string) => void;
     showRecipient?: boolean;
+    onShowPointsDetail?: () => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -13,13 +13,15 @@ import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 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 { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
-import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus.js";
 import { OrderToken } from "./common/OrderToken.js";
+import { PointsBadge } from "./common/PointsBadge.js";
+import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 var PanelView;
 (function (PanelView) {
@@ -30,8 +32,9 @@ var PanelView;
     PanelView[PanelView["RECIPIENT_SELECTION"] = 4] = "RECIPIENT_SELECTION";
     PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 5] = "CRYPTO_PAYMENT_METHOD";
     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, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
+function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, recipientAddress, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
     switch (orderType) {
         case "mint_nft": {
             invariant(contractType, "Contract type is required");
@@ -41,6 +44,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 srcTokenAddress: srcToken.address,
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
+                recipientAddress,
                 price: dstAmount,
                 contractAddress: contractAddress,
                 tokenId: tokenId,
@@ -54,6 +58,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 srcTokenAddress: srcToken.address,
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
+                recipientAddress,
                 price: dstAmount,
                 contractAddress: contractAddress,
             };
@@ -65,6 +70,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 srcTokenAddress: srcToken.address,
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
+                recipientAddress,
                 fundAmount: dstAmount,
                 contractAddress: contractAddress,
             };
@@ -76,6 +82,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 srcTokenAddress: srcToken.address,
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
+                recipientAddress,
                 payload: {
                     amount: dstAmount,
                     data: encodedData,
@@ -93,8 +100,9 @@ export function AnySpendCustom(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomInner, { ...props }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
+function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, }) {
     const hasMounted = useHasMounted();
+    const featureFlags = useFeatureFlags();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
@@ -169,10 +177,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
             dstChainId: dstChainId,
             dstToken: dstToken,
+            recipientAddress,
             dstAmount: dstAmount,
             contractAddress: contractAddress,
-            tokenId: metadata.type === "mint_nft" ? metadata.nftContract.tokenId : undefined,
-            contractType: metadata.type === "mint_nft" ? metadata.nftContract.type : undefined,
+            tokenId: orderType === "mint_nft" ? metadata?.nftContract?.tokenId : undefined,
+            contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
         });
@@ -185,8 +194,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         encodedData,
         metadata?.nftContract?.tokenId,
         metadata?.nftContract?.type,
-        metadata?.type,
         orderType,
+        recipientAddress,
         spenderAddress,
         srcChainId,
         srcToken,
@@ -262,7 +271,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
                 creatorAddress: currentWallet?.wallet?.address,
-                nft: metadata.type === "mint_nft"
+                nft: orderType === "mint_nft"
                     ? metadata.nftContract.type === "erc1155"
                         ? {
                             type: "erc1155",
@@ -283,7 +292,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                             imageUrl: metadata.nftContract.imageUrl,
                         }
                     : undefined,
-                tournament: metadata.type === "join_tournament" || metadata.type === "fund_tournament"
+                tournament: orderType === "join_tournament" || orderType === "fund_tournament"
                     ? {
                         ...metadata.tournament,
                         contractAddress: contractAddress,
@@ -291,13 +300,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                     }
                     : undefined,
                 // only populate payload for custom tx
-                payload: metadata.type === "custom"
+                payload: orderType === "custom"
                     ? {
                         amount: dstAmount,
                         data: encodedData,
                         spenderAddress: spenderAddress,
                         to: contractAddress,
-                        action: metadata.action,
                     }
                     : undefined,
             };
@@ -413,15 +421,25 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _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: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
-                            setOrderId(undefined);
-                            setActivePanel(PanelView.CONFIRM_ORDER);
-                            // Remove orderId from URL when canceling
-                            const params = new URLSearchParams(searchParams.toString());
-                            params.delete("orderId");
-                            router.push(`${window.location.pathname}?${params.toString()}`);
-                        } })] })), mode === "page" && _jsx("div", { className: "h-12" })] }));
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), 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: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+                    setOrderId(undefined);
+                    setActivePanel(PanelView.CONFIRM_ORDER);
+                    // Remove orderId from URL when canceling
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.delete("orderId");
+                    router.push(`${window.location.pathname}?${params.toString()}`);
+                } })), mode === "page" && _jsx("div", { className: "h-12" })] }));
     const loadingView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [_jsxs(Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [_jsx(Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [_jsx("div", { className: "size-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "size-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => (_jsxs("div", { className: "flex w-full justify-between", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full" }), mode === "page" && _jsx("div", { className: "h-12" })] }));
+    // Render points badge if conditions are met
+    const renderPointsBadge = () => {
+        if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+            return (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => {
+                    onShowPointsDetail?.();
+                    setActivePanel(PanelView.POINTS_DETAIL);
+                } }));
+        }
+        return null;
+    };
     // Confirm order view.
     const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                         setActiveTab("crypto");
@@ -446,7 +464,7 @@ 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("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), _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 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: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -458,7 +476,7 @@ 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("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), _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 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: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -485,6 +503,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedFiatPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             }, srcAmountOnRamp: srcFiatAmount }) }));
+    // Points detail view
+    const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views
     return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
                 ? oat
@@ -504,5 +524,6 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 _jsx("div", { className: "w-full", children: recipientSelectionView }, "recipient-selection-view"),
                 _jsx("div", { className: "w-full", children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
                 _jsx("div", { className: "w-full", children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                _jsx("div", { className: "w-full", children: pointsDetailView }, "points-detail-view"),
             ] }) }));
 }

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

@@ -1,8 +1,9 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, }: {
+export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress?: string;
     nftContract: components["schemas"]["NftContract"];
     onSuccess?: (txHash?: string) => void;
+    onShowPointsDetail?: () => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -26,7 +26,7 @@ const CONTRACT_URI_ABI = [
         type: "function",
     },
 ];
-export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, }) {
+export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, }) {
     const [imageUrlWithFallback, setFallbackImageUrl] = useState(nftContract.imageUrl);
     const [isLoadingFallback, setIsLoadingFallback] = useState(false);
     // Fetch contract metadata when imageUrl is empty
@@ -86,7 +86,7 @@ export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftCo
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
             type: "mint_nft",
             nftContract: nftContract,
-        }, header: header, onSuccess: onSuccess }));
+        }, header: header, onSuccess: onSuccess, onShowPointsDetail: onShowPointsDetail }));
 }
 function DropdownMenu({ nftContract }) {
     const [open, setOpen] = useState(false);

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

@@ -258,7 +258,6 @@ export function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, s
     }
     const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: base.id, dstToken: B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
-            type: "custom",
             action: "stake B3",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -1,3 +1,4 @@
+import { components } from "../../../anyspend/types/api";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -11,5 +12,12 @@ export interface AnySpendDepositHypeProps {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     mainFooter?: React.ReactNode;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
 export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
@@ -15,7 +15,7 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
 import { ErrorSection } from "./common/ErrorSection.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
-import { OrderStatus } from "./common/OrderStatus.js";
+import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { ArrowDown } from "lucide-react";
 import { PanelOnramp } from "./common/PanelOnramp.js";
@@ -28,7 +28,7 @@ export function AnySpendDepositHype(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendDepositHypeInner, { ...props }) }));
 }
-function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, }) {
+function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, }) {
     // Use shared flow hook
     const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
@@ -112,10 +112,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_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: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), 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: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
-                            }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _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.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), 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: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _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.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), 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: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {
@@ -193,10 +193,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
         }
     };
     // Order details view
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _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, onBack: () => {
-                            setOrderId(undefined);
-                            setActivePanel(PanelView.MAIN);
-                        }, disableUrlParamManagement: true })] })) }) }));
+    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 })) }) }));
     // 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
@@ -212,6 +212,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             setSelectedFiatPaymentMethod(method);
             setActivePanel(PanelView.MAIN);
         }, srcAmountOnRamp: srcAmount }));
+    const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
     // If showing token selection, render with panel transitions
     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
@@ -233,5 +234,6 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                 ] }) }) }));
 }

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

@@ -66,8 +66,7 @@ export function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData
     }
     const encodedData = generateEncodedDataForSignatureMint(signatureData);
     const price = parseEther(signatureData.payload.price?.toString() || "0");
-    return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address, encodedData: encodedData, metadata: {
-            type: "custom",
+    return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address || "", encodedData: encodedData, metadata: {
             action: "Signature Mint",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -12,6 +12,7 @@ interface ConnectWalletPaymentProps {
     tournament?: Tournament;
     nft?: NFT;
     cryptoPaymentMethod: CryptoPaymentMethodType;
+    onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
-export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
+export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, onPaymentMethodChange, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,21 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
-import { ShinyButton, useProfile } from "../../../../global-account/react/index.js";
+import { ShinyButton, useAccountWallet, useProfile } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
-export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }) {
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch.js";
+export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, onPaymentMethodChange, }) {
     const profile = useProfile({ address: order.recipientAddress });
     const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
-    const { address: connectedAddress } = useAccount();
+    const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+    const connectedEvmAddress = cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+        ? connectedSmartWallet?.getAccount()?.address
+        : connectedEOAWallet?.getAccount()?.address;
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -31,5 +34,5 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
                                         ? "Pay from Global Account"
                                         : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                             ? centerTruncate(phantomWalletAddress, 6)
-                            : centerTruncate(connectedAddress || "")] }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
+                            : centerTruncate(connectedEvmAddress || "")] }), _jsx(PaymentMethodSwitch, { currentMethod: cryptoPaymentMethod, onMethodChange: onPaymentMethodChange }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
 }

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

@@ -11,6 +11,9 @@ interface CryptoPaySectionProps {
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
     onSelectCryptoPaymentMethod: () => void;
     anyspendQuote?: any;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
-export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
 export {};