@b3dotfun/sdk 0.0.65-test.5 → 0.0.66

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

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../anyspend/utils");
 const react_1 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
+const number_1 = require("../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
@@ -30,13 +31,13 @@ function AnySpendCustomExactIn(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomExactInInner, { ...props }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, header, }) {
-    const actionLabel = customExactInConfig.action ?? "Custom Execution";
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, }) {
+    const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     const DESTINATION_TOKEN_DETAILS = {
         SYMBOL: destinationToken.symbol ?? "TOKEN",
         LOGO_URI: destinationToken.metadata?.logoURI ?? "",
     };
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -48,7 +49,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         destinationTokenChainId: destinationChainId,
         slippage: SLIPPAGE_PERCENT,
         disableUrlParamManagement: true,
-        orderType: "custom_exact_in",
+        orderType,
     });
     const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
     const setActiveWallet = (0, react_4.useSetActiveWallet)();
@@ -64,6 +65,13 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
     const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
     const buildCustomPayload = (_recipient) => {
+        if (!customExactInConfig) {
+            // For hype_duel or other simple order types
+            return {
+                expectedDstAmount: expectedDstAmountRaw,
+            };
+        }
+        // For custom_exact_in with custom config
         return {
             amount: expectedDstAmountRaw,
             expectedDstAmount: expectedDstAmountRaw,
@@ -88,16 +96,36 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             return { text: "Select recipient", disable: false, error: false, loading: false };
         if (!anyspendQuote || !anyspendQuote.success)
             return { text: "Get quote error", disable: true, error: true, loading: false };
+        // Check minimum destination amount if specified
+        // Check minimum destination amount if specified
+        if (minDestinationAmount &&
+            anyspendQuote.data?.currencyOut?.amount &&
+            anyspendQuote.data.currencyOut.currency &&
+            anyspendQuote.data.currencyOut.currency.decimals != null) {
+            const rawAmountInWei = BigInt(anyspendQuote.data.currencyOut.amount);
+            const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+            const actualAmount = parseFloat((0, number_1.formatUnits)(rawAmountInWei.toString(), decimals));
+            if (actualAmount < minDestinationAmount) {
+                return {
+                    text: `Minimum ${minDestinationAmount} ${DESTINATION_TOKEN_DETAILS.SYMBOL} deposit`,
+                    disable: true,
+                    error: true,
+                    loading: false,
+                };
+            }
+        }
         if (paymentType === "crypto") {
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             if (!hasEnoughBalance &&
                 !isBalanceLoading &&
-                selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
+                effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
                 return { text: "Insufficient balance", disable: true, error: true, loading: false };
             }
-            return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
+            // Use different text based on order type
+            const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
+            return { text: buttonText, disable: false, error: false, loading: false };
         }
         if (paymentType === "fiat") {
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
@@ -114,11 +142,14 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         selectedRecipientOrDefault,
         anyspendQuote,
         paymentType,
-        selectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
         hasEnoughBalance,
         isBalanceLoading,
         actionLabel,
+        minDestinationAmount,
+        DESTINATION_TOKEN_DETAILS.SYMBOL,
+        orderType,
     ]);
     const onMainButtonClick = async () => {
         if (btnInfo.disable)
@@ -128,7 +159,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             return;
         }
         if (paymentType === "crypto") {
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                 setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD);
                 return;
             }
@@ -143,7 +174,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
@@ -155,7 +186,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             const payload = buildCustomPayload(selectedRecipientOrDefault);
             createOrder({
                 recipientAddress: selectedRecipientOrDefault,
-                orderType: "custom_exact_in",
+                orderType,
                 srcChain: selectedSrcChainId,
                 dstChain: selectedDstChainId,
                 srcToken: selectedSrcToken,
@@ -203,7 +234,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             const payload = buildCustomPayload(selectedRecipientOrDefault);
             createOnrampOrder({
                 recipientAddress: selectedRecipientOrDefault,
-                orderType: "custom_exact_in",
+                orderType,
                 dstChain: selectedDstChainId,
                 dstToken: selectedDstToken,
                 srcFiatAmount: srcAmount,
@@ -223,7 +254,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             sonner_1.toast.error("Failed to create order: " + err.message);
         }
     };
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.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" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.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" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
@@ -232,7 +263,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             setSelectedRecipientAddress(address);
             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
         } }));
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
         } }));

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

@@ -0,0 +1,11 @@
+import { components } from "../../../anyspend/types/api";
+export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    depositContractAddress: string;
+    token: components["schemas"]["Token"];
+    onSuccess?: (amount: string) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendDepositUpside = AnySpendDepositUpside;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../anyspend/utils");
+const chains_1 = require("viem/chains");
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
+    {
+        inputs: [
+            {
+                internalType: "address",
+                name: "user",
+                type: "address",
+            },
+            {
+                internalType: "uint256",
+                name: "amount",
+                type: "uint256",
+            },
+        ],
+        name: "depositFor",
+        outputs: [],
+        stateMutability: "nonpayable",
+        type: "function",
+    },
+]);
+function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }) {
+    if (!recipientAddress)
+        return null;
+    const header = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: (0, jsx_runtime_1.jsx)("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Deposit ", token.symbol] }) }) }) }));
+    const customExactInConfig = {
+        functionAbi: DEPOSIT_FOR_FUNCTION_ABI,
+        functionName: "depositFor",
+        functionArgs: [(0, utils_1.normalizeAddress)(recipientAddress), "{{amount_out}}"],
+        to: depositContractAddress,
+        spenderAddress: depositContractAddress,
+        action: `deposit ${token.symbol}`,
+    };
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: chains_1.base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+}

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

@@ -22,4 +22,4 @@ export interface AnySpendDepositHypeProps {
     customUsdInputValues?: string[];
     preferEoa?: boolean;
 }
-export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,264 +1,27 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HYPE_TOKEN_DETAILS = void 0;
 exports.AnySpendDepositHype = AnySpendDepositHype;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
-const cn_1 = require("../../../shared/utils/cn");
-const invariant_1 = __importDefault(require("invariant"));
-const react_2 = require("motion/react");
-const react_3 = require("react");
-const sonner_1 = require("sonner");
-const react_4 = require("thirdweb/react");
 const chains_1 = require("viem/chains");
-const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
-const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
-const CryptoPaySection_1 = require("./common/CryptoPaySection");
-const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
-const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
-const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
-const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
-const OrderDetails_1 = require("./common/OrderDetails");
-const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
-const RecipientSelection_1 = require("./common/RecipientSelection");
-const lucide_react_1 = require("lucide-react");
-const PanelOnramp_1 = require("./common/PanelOnramp");
-const SLIPPAGE_PERCENT = 3;
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
 exports.HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
     LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
 };
-function AnySpendDepositHype(props) {
-    const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendDepositHypeInner, { ...props }) }));
-}
-function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
-    // Use shared flow hook
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
-        paymentType,
-        recipientAddress,
-        loadOrder,
-        isDepositMode: true,
-        onTransactionSuccess: onSuccess,
-        sourceTokenAddress,
-        sourceTokenChainId,
-        slippage: SLIPPAGE_PERCENT,
-        disableUrlParamManagement: true,
-    });
-    const { connectedEOAWallet: connectedEOAWallet } = (0, react_1.useAccountWallet)();
-    const setActiveWallet = (0, react_4.useSetActiveWallet)();
-    const appliedPreferEoa = (0, react_3.useRef)(false);
-    (0, react_3.useEffect)(() => {
-        if (preferEoa && !appliedPreferEoa.current) {
-            if (connectedEOAWallet) {
-                appliedPreferEoa.current = true;
-                setActiveWallet(connectedEOAWallet);
-            }
-        }
-    }, [preferEoa, connectedEOAWallet, setActiveWallet]);
-    // Button state logic
-    const btnInfo = (0, react_3.useMemo)(() => {
-        if (activeInputAmountInWei === "0")
-            return { text: "Enter an amount", disable: true, error: false, loading: false };
-        if (isLoadingAnyspendQuote)
-            return { text: "Loading quote...", disable: true, error: false, loading: true };
-        if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false, loading: true };
-        if (!selectedRecipientAddress)
-            return { text: "Select recipient", disable: false, error: false, loading: false };
-        if (!anyspendQuote || !anyspendQuote.success)
-            return { text: "Get quote error", disable: true, error: true, loading: false };
-        if (!dstAmount)
-            return { text: "No quote available", disable: true, error: true, loading: false };
-        // Check minimum deposit amount (10 HYPE)
-        // Use the raw amount from the quote instead of the formatted display string
-        if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
-            const rawAmountInWei = anyspendQuote.data.currencyOut.amount;
-            const decimals = anyspendQuote.data.currencyOut.currency.decimals;
-            const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
-            if (actualAmount < 10) {
-                return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
-            }
-        }
-        if (paymentType === "crypto") {
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                return { text: "Choose payment method", disable: false, error: false, loading: false };
-            }
-            return { text: "Continue to deposit", disable: false, error: false, loading: false };
-        }
-        if (paymentType === "fiat") {
-            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false, loading: false };
-            }
-            return { text: "Buy", disable: false, error: false, loading: false };
-        }
-        return { text: "Continue to deposit", disable: false, error: false, loading: false };
-    }, [
-        activeInputAmountInWei,
-        isLoadingAnyspendQuote,
-        isCreatingOrder,
-        isCreatingOnrampOrder,
-        selectedRecipientAddress,
-        anyspendQuote,
-        dstAmount,
-        paymentType,
-        selectedCryptoPaymentMethod,
-        selectedFiatPaymentMethod,
-    ]);
-    const onMainButtonClick = async () => {
-        if (btnInfo.disable)
-            return;
-        if (!selectedRecipientAddress) {
-            setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION);
-            return;
-        }
-        if (paymentType === "crypto") {
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD);
-                return;
-            }
-            await handleCryptoOrder();
-        }
-        else if (paymentType === "fiat") {
-            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD);
-                return;
-            }
-            await handleFiatOrder();
-        }
-    };
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), setRecipientAddress: setSelectedRecipientAddress, recipientAddressFromProps: recipientAddress, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                setIsSrcInputDirty(false);
-                                setSrcAmount(value);
-                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
-    // Handle crypto order creation
-    const handleCryptoOrder = async () => {
-        try {
-            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(selectedRecipientAddress, "Recipient address is not found");
-            const srcAmountBigInt = BigInt(activeInputAmountInWei);
-            createOrder({
-                recipientAddress: selectedRecipientAddress,
-                orderType: "hype_duel",
-                srcChain: selectedSrcChainId,
-                dstChain: chains_1.base.id,
-                srcToken: selectedSrcToken,
-                dstToken: anyspend_1.B3_TOKEN,
-                srcAmount: srcAmountBigInt.toString(),
-                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-                creatorAddress: globalAddress,
-            });
-        }
-        catch (err) {
-            console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
-        }
-    };
-    // Handle fiat order creation
-    const handleFiatOrder = async () => {
-        try {
-            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(selectedRecipientAddress, "Recipient address is not found");
-            if (!srcAmount || parseFloat(srcAmount) <= 0) {
-                sonner_1.toast.error("Please enter a valid amount");
-                return;
-            }
-            // Determine vendor and payment method string
-            let vendor;
-            let paymentMethodString = "";
-            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
-                if (coinbaseAvailablePaymentMethods.length === 0) {
-                    sonner_1.toast.error("Coinbase Pay not available");
-                    return;
-                }
-                vendor = "coinbase";
-                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
-            }
-            else if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    sonner_1.toast.error("Stripe not available");
-                    return;
-                }
-                vendor = "stripe-web2";
-                paymentMethodString = "";
-            }
-            else {
-                sonner_1.toast.error("Please select a payment method");
-                return;
-            }
-            createOnrampOrder({
-                recipientAddress: selectedRecipientAddress,
-                orderType: "hype_duel",
-                dstChain: chains_1.base.id,
-                dstToken: anyspend_1.B3_TOKEN,
-                srcFiatAmount: srcAmount,
-                onramp: {
-                    vendor: vendor,
-                    paymentMethod: paymentMethodString,
-                    country: geoData?.country || "US",
-                    redirectUrl: window.location.origin,
-                },
-                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-                creatorAddress: globalAddress,
-            });
-        }
-        catch (err) {
-            console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
-        }
+function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
+    if (!recipientAddress)
+        return null;
+    const header = () => ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }));
+    // Create a modified B3_TOKEN with HYPE branding
+    const hypeToken = {
+        ...anyspend_1.B3_TOKEN,
+        symbol: exports.HYPE_TOKEN_DETAILS.SYMBOL,
+        metadata: {
+            ...anyspend_1.B3_TOKEN.metadata,
+            logoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI,
+        },
     };
-    // Order details view
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.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" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
-                    setOrderId(undefined);
-                    setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
-                }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
-    // Loading view
-    const loadingView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: "Loading order details..." }) }));
-    // Panel views
-    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: selectedRecipientAddress || "", onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onConfirm: address => {
-            setSelectedRecipientAddress(address);
-            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
-        } }));
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedCryptoPaymentMethod(method);
-            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
-        } }));
-    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedFiatPaymentMethod(method);
-            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
-        }, srcAmountOnRamp: srcAmount }));
-    const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) }));
-    const feeDetailView = anyspendQuote?.data?.fee ? ((0, jsx_runtime_1.jsx)(FeeDetailPanel_1.FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: paymentType === "fiat"
-            ? parseFloat(srcAmount)
-            : anyspendQuote.data.currencyIn?.amountUsd
-                ? Number(anyspendQuote.data.currencyIn.amountUsd)
-                : undefined, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) })) : null;
-    // If showing token selection, render with panel transitions
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.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: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
-                    ? oat
-                        ? useAnyspendFlow_1.PanelView.ORDER_DETAILS
-                        : useAnyspendFlow_1.PanelView.LOADING
-                    : activePanel === useAnyspendFlow_1.PanelView.ORDER_DETAILS
-                        ? useAnyspendFlow_1.PanelView.MAIN
-                        : activePanel, className: (0, cn_1.cn)("rounded-2xl", {
-                    "mt-0": mode === "modal",
-                }), variants: {
-                    enter: { x: 300, opacity: 0 },
-                    center: { x: 0, opacity: 1 },
-                    exit: { x: -300, opacity: 0 },
-                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: mainView }, "main-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
-                ] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: chains_1.base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
 }

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,6 +5,12 @@ export declare enum CryptoPaymentMethodType {
     TRANSFER_CRYPTO = "transfer_crypto"
 }
 interface CryptoPaymentMethodProps {
+    globalAddress?: string;
+    globalWallet?: {
+        meta?: {
+            icon?: string;
+        };
+    };
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
     isCreatingOrder: boolean;

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -5,7 +5,6 @@ exports.CryptoPaymentMethodType = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
-const useAccountWallet_1 = require("../../../../global-account/react/hooks/useAccountWallet");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
@@ -26,7 +25,7 @@ var CryptoPaymentMethodType;
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = (0, react_1.useAccountWallet)();
+    const { wallet: globalWallet, connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet, } = (0, react_1.useAccountWallet)();
     const { connector, address } = (0, wagmi_1.useAccount)();
     const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
@@ -36,7 +35,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const { data: eoaWalletInfo } = (0, react_4.useWalletInfo)(connectedEOAWallet?.id);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
-    const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Use custom hook to determine wallet display logic
     const { shouldShowConnectedEOA, shouldShowWagmiWallet } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
     // Map wagmi connector names to thirdweb wallet IDs
@@ -162,7 +160,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                                     setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     if (connectedEOAWallet) {
@@ -204,7 +202,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                     sonner_1.toast.success("Selected B3 Account");
                                                 }, className: (0, cn_1.cn)("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
                                                     ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletImage ? ((0, jsx_runtime_1.jsx)("img", { src: walletImage, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                                                     // Always show wallet selection modal first
                                                     setShowWalletModal(true);
                                                 }, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {

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

@@ -62,7 +62,7 @@ function FeeDetailPanel({ fee, transactionAmountUsd, onBack }) {
     // State for expanding tier lists
     const [showAllFeeTiers, setShowAllFeeTiers] = (0, react_2.useState)(false);
     const [showAllDiscountTiers, setShowAllDiscountTiers] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
                                 ? FIAT_FEE_TIERS.map((tier, idx) => {
                                     const isCurrentTier = currentFiatTier?.label === tier.label;
                                     const currentTierIndex = FIAT_FEE_TIERS.findIndex(t => t.label === currentFiatTier?.label);