@b3dotfun/sdk 0.0.65-alpha.2 → 0.0.65-alpha.4

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

@@ -1,257 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { B3_TOKEN } from "../../../anyspend/index.js";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "../../../global-account/react/index.js";
-import { cn } from "../../../shared/utils/cn.js";
-import invariant from "invariant";
-import { motion } from "motion/react";
-import { useEffect, useMemo, useRef } from "react";
-import { toast } from "sonner";
-import { useSetActiveWallet } from "thirdweb/react";
 import { base } from "viem/chains";
-import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
-import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
-import { CryptoPaySection } from "./common/CryptoPaySection.js";
-import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
-import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
-import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
-import { OrderDetails } from "./common/OrderDetails.js";
-import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
-import { RecipientSelection } from "./common/RecipientSelection.js";
-import { ArrowDown, Loader2 } from "lucide-react";
-import { PanelOnramp } from "./common/PanelOnramp.js";
-const SLIPPAGE_PERCENT = 3;
+import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
 export const HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
     LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
 };
-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, onTokenSelect, customUsdInputValues, preferEoa, }) {
-    // Use shared flow hook
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
-        paymentType,
-        recipientAddress,
-        loadOrder,
-        isDepositMode: true,
-        onTransactionSuccess: onSuccess,
-        sourceTokenAddress,
-        sourceTokenChainId,
-        slippage: SLIPPAGE_PERCENT,
-        disableUrlParamManagement: true,
-    });
-    const { connectedEOAWallet: connectedEOAWallet } = useAccountWallet();
-    const setActiveWallet = useSetActiveWallet();
-    const appliedPreferEoa = useRef(false);
-    useEffect(() => {
-        if (preferEoa && !appliedPreferEoa.current) {
-            if (connectedEOAWallet) {
-                appliedPreferEoa.current = true;
-                setActiveWallet(connectedEOAWallet);
-            }
-        }
-    }, [preferEoa, connectedEOAWallet, setActiveWallet]);
-    // Button state logic
-    const btnInfo = 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 (effectiveCryptoPaymentMethod === 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.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,
-        effectiveCryptoPaymentMethod,
-        isLoadingAnyspendQuote,
-        isCreatingOrder,
-        isCreatingOnrampOrder,
-        selectedRecipientAddress,
-        anyspendQuote,
-        dstAmount,
-        paymentType,
-        selectedFiatPaymentMethod,
-    ]);
-    const onMainButtonClick = async () => {
-        if (btnInfo.disable)
-            return;
-        if (!selectedRecipientAddress) {
-            setActivePanel(PanelView.RECIPIENT_SELECTION);
-            return;
-        }
-        if (paymentType === "crypto") {
-            if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
-                setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
-                return;
-            }
-            await handleCryptoOrder();
-        }
-        else if (paymentType === "fiat") {
-            if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-                setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
-                return;
-            }
-            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, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, 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), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _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: selectedRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), setRecipientAddress: setSelectedRecipientAddress, recipientAddressFromProps: recipientAddress, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                setIsSrcInputDirty(false);
-                                setSrcAmount(value);
-                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }) }), _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"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
-    // Handle crypto order creation
-    const handleCryptoOrder = async () => {
-        try {
-            invariant(anyspendQuote, "Relay price is not found");
-            invariant(selectedRecipientAddress, "Recipient address is not found");
-            const srcAmountBigInt = BigInt(activeInputAmountInWei);
-            createOrder({
-                recipientAddress: selectedRecipientAddress,
-                orderType: "hype_duel",
-                srcChain: selectedSrcChainId,
-                dstChain: base.id,
-                srcToken: selectedSrcToken,
-                dstToken: B3_TOKEN,
-                srcAmount: srcAmountBigInt.toString(),
-                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-                creatorAddress: globalAddress,
-            });
-        }
-        catch (err) {
-            console.error(err);
-            toast.error("Failed to create order: " + err.message);
-        }
-    };
-    // Handle fiat order creation
-    const handleFiatOrder = async () => {
-        try {
-            invariant(anyspendQuote, "Relay price is not found");
-            invariant(selectedRecipientAddress, "Recipient address is not found");
-            if (!srcAmount || parseFloat(srcAmount) <= 0) {
-                toast.error("Please enter a valid amount");
-                return;
-            }
-            // Determine vendor and payment method string
-            let vendor;
-            let paymentMethodString = "";
-            if (selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY) {
-                if (coinbaseAvailablePaymentMethods.length === 0) {
-                    toast.error("Coinbase Pay not available");
-                    return;
-                }
-                vendor = "coinbase";
-                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
-            }
-            else if (selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    toast.error("Stripe not available");
-                    return;
-                }
-                vendor = "stripe-web2";
-                paymentMethodString = "";
-            }
-            else {
-                toast.error("Please select a payment method");
-                return;
-            }
-            createOnrampOrder({
-                recipientAddress: selectedRecipientAddress,
-                orderType: "hype_duel",
-                dstChain: base.id,
-                dstToken: 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);
-            toast.error("Failed to create order: " + err.message);
-        }
+export function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
+    if (!recipientAddress)
+        return null;
+    const header = () => (_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" }) }) }));
+    // Create a modified B3_TOKEN with HYPE branding
+    const hypeToken = {
+        ...B3_TOKEN,
+        symbol: HYPE_TOKEN_DETAILS.SYMBOL,
+        metadata: {
+            ...B3_TOKEN.metadata,
+            logoURI: HYPE_TOKEN_DETAILS.LOGO_URI,
+        },
     };
-    // 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 && (_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, points: oat.data.points || undefined })) }) }));
-    // Loading view
-    const loadingView = (_jsx("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: _jsx("div", { className: "text-as-primary", children: "Loading order details..." }) }));
-    // Panel views
-    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: selectedRecipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
-            setSelectedRecipientAddress(address);
-            setActivePanel(PanelView.MAIN);
-        } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedCryptoPaymentMethod(method);
-            setActivePanel(PanelView.MAIN);
-        } }));
-    const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedFiatPaymentMethod(method);
-            setActivePanel(PanelView.MAIN);
-        }, srcAmountOnRamp: srcAmount }));
-    const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
-    const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: paymentType === "fiat"
-            ? parseFloat(srcAmount)
-            : anyspendQuote.data.currencyIn?.amountUsd
-                ? Number(anyspendQuote.data.currencyIn.amountUsd)
-                : undefined, onBack: () => setActivePanel(PanelView.MAIN) })) : null;
-    // 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
-                    ? oat
-                        ? PanelView.ORDER_DETAILS
-                        : PanelView.LOADING
-                    : activePanel === PanelView.ORDER_DETAILS
-                        ? PanelView.MAIN
-                        : activePanel, className: 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: [
-                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-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: 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"),
-                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
-                ] }) }) }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
 }

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

@@ -3,6 +3,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint";

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

@@ -4,6 +4,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit.js";
 export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
 export { AnySpendCustom } from "./AnySpendCustom.js";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
+export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype.js";
 export * from "./AnySpendFingerprintWrapper.js";
 export { AnySpendNFT } from "./AnySpendNFT.js";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";