@b3dotfun/sdk 0.0.65-alpha.2 → 0.0.65-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +37 -6
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +14 -251
- package/dist/cjs/anyspend/react/components/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/components/index.js +4 -1
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +37 -6
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +15 -249
- package/dist/esm/anyspend/react/components/index.d.ts +1 -0
- package/dist/esm/anyspend/react/components/index.js +1 -0
- package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
- package/dist/types/anyspend/react/components/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +46 -6
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +36 -527
- package/src/anyspend/react/components/index.ts +1 -0
|
@@ -1,257 +1,23 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { B3_TOKEN } from "../../../anyspend/index.js";
|
|
3
|
-
import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "../../../global-account/react/index.js";
|
|
4
|
-
import { cn } from "../../../shared/utils/cn.js";
|
|
5
|
-
import invariant from "invariant";
|
|
6
|
-
import { motion } from "motion/react";
|
|
7
|
-
import { useEffect, useMemo, useRef } from "react";
|
|
8
|
-
import { toast } from "sonner";
|
|
9
|
-
import { useSetActiveWallet } from "thirdweb/react";
|
|
10
3
|
import { base } from "viem/chains";
|
|
11
|
-
import {
|
|
12
|
-
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
|
|
13
|
-
import { CryptoPaySection } from "./common/CryptoPaySection.js";
|
|
14
|
-
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
|
|
15
|
-
import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
|
|
16
|
-
import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
|
|
17
|
-
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
|
|
18
|
-
import { OrderDetails } from "./common/OrderDetails.js";
|
|
19
|
-
import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
|
|
20
|
-
import { RecipientSelection } from "./common/RecipientSelection.js";
|
|
21
|
-
import { ArrowDown, Loader2 } from "lucide-react";
|
|
22
|
-
import { PanelOnramp } from "./common/PanelOnramp.js";
|
|
23
|
-
const SLIPPAGE_PERCENT = 3;
|
|
4
|
+
import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
|
|
24
5
|
export const HYPE_TOKEN_DETAILS = {
|
|
25
6
|
SYMBOL: "HYPE",
|
|
26
7
|
LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
|
|
27
8
|
};
|
|
28
|
-
export function AnySpendDepositHype(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
sourceTokenAddress,
|
|
41
|
-
sourceTokenChainId,
|
|
42
|
-
slippage: SLIPPAGE_PERCENT,
|
|
43
|
-
disableUrlParamManagement: true,
|
|
44
|
-
});
|
|
45
|
-
const { connectedEOAWallet: connectedEOAWallet } = useAccountWallet();
|
|
46
|
-
const setActiveWallet = useSetActiveWallet();
|
|
47
|
-
const appliedPreferEoa = useRef(false);
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
if (preferEoa && !appliedPreferEoa.current) {
|
|
50
|
-
if (connectedEOAWallet) {
|
|
51
|
-
appliedPreferEoa.current = true;
|
|
52
|
-
setActiveWallet(connectedEOAWallet);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}, [preferEoa, connectedEOAWallet, setActiveWallet]);
|
|
56
|
-
// Button state logic
|
|
57
|
-
const btnInfo = useMemo(() => {
|
|
58
|
-
if (activeInputAmountInWei === "0")
|
|
59
|
-
return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
60
|
-
if (isLoadingAnyspendQuote)
|
|
61
|
-
return { text: "Loading quote...", disable: true, error: false, loading: true };
|
|
62
|
-
if (isCreatingOrder || isCreatingOnrampOrder)
|
|
63
|
-
return { text: "Creating order...", disable: true, error: false, loading: true };
|
|
64
|
-
if (!selectedRecipientAddress)
|
|
65
|
-
return { text: "Select recipient", disable: false, error: false, loading: false };
|
|
66
|
-
if (!anyspendQuote || !anyspendQuote.success)
|
|
67
|
-
return { text: "Get quote error", disable: true, error: true, loading: false };
|
|
68
|
-
if (!dstAmount)
|
|
69
|
-
return { text: "No quote available", disable: true, error: true, loading: false };
|
|
70
|
-
// Check minimum deposit amount (10 HYPE)
|
|
71
|
-
// Use the raw amount from the quote instead of the formatted display string
|
|
72
|
-
if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
|
|
73
|
-
const rawAmountInWei = anyspendQuote.data.currencyOut.amount;
|
|
74
|
-
const decimals = anyspendQuote.data.currencyOut.currency.decimals;
|
|
75
|
-
const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
|
|
76
|
-
if (actualAmount < 10) {
|
|
77
|
-
return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
if (paymentType === "crypto") {
|
|
81
|
-
if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
82
|
-
return { text: "Choose payment method", disable: false, error: false, loading: false };
|
|
83
|
-
}
|
|
84
|
-
return { text: "Continue to deposit", disable: false, error: false, loading: false };
|
|
85
|
-
}
|
|
86
|
-
if (paymentType === "fiat") {
|
|
87
|
-
if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
|
|
88
|
-
return { text: "Select payment method", disable: false, error: false, loading: false };
|
|
89
|
-
}
|
|
90
|
-
return { text: "Buy", disable: false, error: false, loading: false };
|
|
91
|
-
}
|
|
92
|
-
return { text: "Continue to deposit", disable: false, error: false, loading: false };
|
|
93
|
-
}, [
|
|
94
|
-
activeInputAmountInWei,
|
|
95
|
-
effectiveCryptoPaymentMethod,
|
|
96
|
-
isLoadingAnyspendQuote,
|
|
97
|
-
isCreatingOrder,
|
|
98
|
-
isCreatingOnrampOrder,
|
|
99
|
-
selectedRecipientAddress,
|
|
100
|
-
anyspendQuote,
|
|
101
|
-
dstAmount,
|
|
102
|
-
paymentType,
|
|
103
|
-
selectedFiatPaymentMethod,
|
|
104
|
-
]);
|
|
105
|
-
const onMainButtonClick = async () => {
|
|
106
|
-
if (btnInfo.disable)
|
|
107
|
-
return;
|
|
108
|
-
if (!selectedRecipientAddress) {
|
|
109
|
-
setActivePanel(PanelView.RECIPIENT_SELECTION);
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
if (paymentType === "crypto") {
|
|
113
|
-
if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
114
|
-
setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
await handleCryptoOrder();
|
|
118
|
-
}
|
|
119
|
-
else if (paymentType === "fiat") {
|
|
120
|
-
if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
|
|
121
|
-
setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
await handleFiatOrder();
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
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 => {
|
|
128
|
-
setIsSrcInputDirty(false);
|
|
129
|
-
setSrcAmount(value);
|
|
130
|
-
}, 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] }));
|
|
131
|
-
// Handle crypto order creation
|
|
132
|
-
const handleCryptoOrder = async () => {
|
|
133
|
-
try {
|
|
134
|
-
invariant(anyspendQuote, "Relay price is not found");
|
|
135
|
-
invariant(selectedRecipientAddress, "Recipient address is not found");
|
|
136
|
-
const srcAmountBigInt = BigInt(activeInputAmountInWei);
|
|
137
|
-
createOrder({
|
|
138
|
-
recipientAddress: selectedRecipientAddress,
|
|
139
|
-
orderType: "hype_duel",
|
|
140
|
-
srcChain: selectedSrcChainId,
|
|
141
|
-
dstChain: base.id,
|
|
142
|
-
srcToken: selectedSrcToken,
|
|
143
|
-
dstToken: B3_TOKEN,
|
|
144
|
-
srcAmount: srcAmountBigInt.toString(),
|
|
145
|
-
expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
|
|
146
|
-
creatorAddress: globalAddress,
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
catch (err) {
|
|
150
|
-
console.error(err);
|
|
151
|
-
toast.error("Failed to create order: " + err.message);
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
// Handle fiat order creation
|
|
155
|
-
const handleFiatOrder = async () => {
|
|
156
|
-
try {
|
|
157
|
-
invariant(anyspendQuote, "Relay price is not found");
|
|
158
|
-
invariant(selectedRecipientAddress, "Recipient address is not found");
|
|
159
|
-
if (!srcAmount || parseFloat(srcAmount) <= 0) {
|
|
160
|
-
toast.error("Please enter a valid amount");
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
// Determine vendor and payment method string
|
|
164
|
-
let vendor;
|
|
165
|
-
let paymentMethodString = "";
|
|
166
|
-
if (selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY) {
|
|
167
|
-
if (coinbaseAvailablePaymentMethods.length === 0) {
|
|
168
|
-
toast.error("Coinbase Pay not available");
|
|
169
|
-
return;
|
|
170
|
-
}
|
|
171
|
-
vendor = "coinbase";
|
|
172
|
-
paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
|
|
173
|
-
}
|
|
174
|
-
else if (selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE) {
|
|
175
|
-
if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
|
|
176
|
-
toast.error("Stripe not available");
|
|
177
|
-
return;
|
|
178
|
-
}
|
|
179
|
-
vendor = "stripe-web2";
|
|
180
|
-
paymentMethodString = "";
|
|
181
|
-
}
|
|
182
|
-
else {
|
|
183
|
-
toast.error("Please select a payment method");
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
createOnrampOrder({
|
|
187
|
-
recipientAddress: selectedRecipientAddress,
|
|
188
|
-
orderType: "hype_duel",
|
|
189
|
-
dstChain: base.id,
|
|
190
|
-
dstToken: B3_TOKEN,
|
|
191
|
-
srcFiatAmount: srcAmount,
|
|
192
|
-
onramp: {
|
|
193
|
-
vendor: vendor,
|
|
194
|
-
paymentMethod: paymentMethodString,
|
|
195
|
-
country: geoData?.country || "US",
|
|
196
|
-
redirectUrl: window.location.origin,
|
|
197
|
-
},
|
|
198
|
-
expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
|
|
199
|
-
creatorAddress: globalAddress,
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
catch (err) {
|
|
203
|
-
console.error(err);
|
|
204
|
-
toast.error("Failed to create order: " + err.message);
|
|
205
|
-
}
|
|
9
|
+
export function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
|
|
10
|
+
if (!recipientAddress)
|
|
11
|
+
return null;
|
|
12
|
+
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" }) }) }));
|
|
13
|
+
// Create a modified B3_TOKEN with HYPE branding
|
|
14
|
+
const hypeToken = {
|
|
15
|
+
...B3_TOKEN,
|
|
16
|
+
symbol: HYPE_TOKEN_DETAILS.SYMBOL,
|
|
17
|
+
metadata: {
|
|
18
|
+
...B3_TOKEN.metadata,
|
|
19
|
+
logoURI: HYPE_TOKEN_DETAILS.LOGO_URI,
|
|
20
|
+
},
|
|
206
21
|
};
|
|
207
|
-
|
|
208
|
-
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: () => {
|
|
209
|
-
setOrderId(undefined);
|
|
210
|
-
setActivePanel(PanelView.MAIN);
|
|
211
|
-
}, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
|
|
212
|
-
// Loading view
|
|
213
|
-
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..." }) }));
|
|
214
|
-
// Panel views
|
|
215
|
-
const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: selectedRecipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
|
|
216
|
-
setSelectedRecipientAddress(address);
|
|
217
|
-
setActivePanel(PanelView.MAIN);
|
|
218
|
-
} }));
|
|
219
|
-
const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
|
|
220
|
-
setSelectedCryptoPaymentMethod(method);
|
|
221
|
-
setActivePanel(PanelView.MAIN);
|
|
222
|
-
} }));
|
|
223
|
-
const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
|
|
224
|
-
setSelectedFiatPaymentMethod(method);
|
|
225
|
-
setActivePanel(PanelView.MAIN);
|
|
226
|
-
}, srcAmountOnRamp: srcAmount }));
|
|
227
|
-
const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
|
|
228
|
-
const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: paymentType === "fiat"
|
|
229
|
-
? parseFloat(srcAmount)
|
|
230
|
-
: anyspendQuote.data.currencyIn?.amountUsd
|
|
231
|
-
? Number(anyspendQuote.data.currencyIn.amountUsd)
|
|
232
|
-
: undefined, onBack: () => setActivePanel(PanelView.MAIN) })) : null;
|
|
233
|
-
// If showing token selection, render with panel transitions
|
|
234
|
-
return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
235
|
-
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
|
|
236
|
-
? oat
|
|
237
|
-
? PanelView.ORDER_DETAILS
|
|
238
|
-
: PanelView.LOADING
|
|
239
|
-
: activePanel === PanelView.ORDER_DETAILS
|
|
240
|
-
? PanelView.MAIN
|
|
241
|
-
: activePanel, className: cn("rounded-2xl", {
|
|
242
|
-
"mt-0": mode === "modal",
|
|
243
|
-
}), variants: {
|
|
244
|
-
enter: { x: 300, opacity: 0 },
|
|
245
|
-
center: { x: 0, opacity: 1 },
|
|
246
|
-
exit: { x: -300, opacity: 0 },
|
|
247
|
-
}, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
|
|
248
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-view"),
|
|
249
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
250
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
251
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
|
|
252
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
|
|
253
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
|
|
254
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
|
|
255
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
|
|
256
|
-
] }) }) }));
|
|
22
|
+
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 }));
|
|
257
23
|
}
|
|
@@ -3,6 +3,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit";
|
|
|
3
3
|
export { AnySpendBuySpin } from "./AnySpendBuySpin";
|
|
4
4
|
export { AnySpendCustom } from "./AnySpendCustom";
|
|
5
5
|
export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
|
|
6
|
+
export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
|
|
6
7
|
export * from "./AnySpendFingerprintWrapper";
|
|
7
8
|
export { AnySpendNFT } from "./AnySpendNFT";
|
|
8
9
|
export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
|
|
@@ -4,6 +4,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit.js";
|
|
|
4
4
|
export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
|
|
5
5
|
export { AnySpendCustom } from "./AnySpendCustom.js";
|
|
6
6
|
export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
|
|
7
|
+
export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype.js";
|
|
7
8
|
export * from "./AnySpendFingerprintWrapper.js";
|
|
8
9
|
export { AnySpendNFT } from "./AnySpendNFT.js";
|
|
9
10
|
export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
|
|
@@ -24,7 +24,9 @@ export interface AnySpendCustomExactInProps {
|
|
|
24
24
|
}) => void;
|
|
25
25
|
customUsdInputValues?: string[];
|
|
26
26
|
preferEoa?: boolean;
|
|
27
|
-
customExactInConfig
|
|
27
|
+
customExactInConfig?: CustomExactInConfig;
|
|
28
|
+
orderType?: "hype_duel" | "custom_exact_in";
|
|
29
|
+
minDestinationAmount?: number;
|
|
28
30
|
header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
|
|
29
31
|
anyspendPrice: GetQuoteResponse | undefined;
|
|
30
32
|
isLoadingAnyspendPrice: boolean;
|
|
@@ -22,4 +22,4 @@ export interface AnySpendDepositHypeProps {
|
|
|
22
22
|
customUsdInputValues?: string[];
|
|
23
23
|
preferEoa?: boolean;
|
|
24
24
|
}
|
|
25
|
-
export declare function AnySpendDepositHype(
|
|
25
|
+
export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -3,6 +3,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit";
|
|
|
3
3
|
export { AnySpendBuySpin } from "./AnySpendBuySpin";
|
|
4
4
|
export { AnySpendCustom } from "./AnySpendCustom";
|
|
5
5
|
export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
|
|
6
|
+
export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
|
|
6
7
|
export * from "./AnySpendFingerprintWrapper";
|
|
7
8
|
export { AnySpendNFT } from "./AnySpendNFT";
|
|
8
9
|
export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
|
package/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
|
|
|
3
3
|
import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
|
|
4
4
|
import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
|
|
5
5
|
import { cn } from "@b3dotfun/sdk/shared/utils/cn";
|
|
6
|
+
import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
|
|
6
7
|
import invariant from "invariant";
|
|
7
8
|
import { ArrowDown, Loader2 } from "lucide-react";
|
|
8
9
|
import { motion } from "motion/react";
|
|
@@ -46,7 +47,9 @@ export interface AnySpendCustomExactInProps {
|
|
|
46
47
|
onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
|
|
47
48
|
customUsdInputValues?: string[];
|
|
48
49
|
preferEoa?: boolean;
|
|
49
|
-
customExactInConfig
|
|
50
|
+
customExactInConfig?: CustomExactInConfig;
|
|
51
|
+
orderType?: "hype_duel" | "custom_exact_in";
|
|
52
|
+
minDestinationAmount?: number;
|
|
50
53
|
header?: ({
|
|
51
54
|
anyspendPrice,
|
|
52
55
|
isLoadingAnyspendPrice,
|
|
@@ -81,9 +84,11 @@ function AnySpendCustomExactInInner({
|
|
|
81
84
|
customUsdInputValues,
|
|
82
85
|
preferEoa,
|
|
83
86
|
customExactInConfig,
|
|
87
|
+
orderType = "custom_exact_in",
|
|
88
|
+
minDestinationAmount,
|
|
84
89
|
header,
|
|
85
90
|
}: AnySpendCustomExactInProps) {
|
|
86
|
-
const actionLabel = customExactInConfig
|
|
91
|
+
const actionLabel = customExactInConfig?.action ?? "Custom Execution";
|
|
87
92
|
|
|
88
93
|
const DESTINATION_TOKEN_DETAILS = {
|
|
89
94
|
SYMBOL: destinationToken.symbol ?? "TOKEN",
|
|
@@ -140,7 +145,7 @@ function AnySpendCustomExactInInner({
|
|
|
140
145
|
destinationTokenChainId: destinationChainId,
|
|
141
146
|
slippage: SLIPPAGE_PERCENT,
|
|
142
147
|
disableUrlParamManagement: true,
|
|
143
|
-
orderType
|
|
148
|
+
orderType,
|
|
144
149
|
});
|
|
145
150
|
|
|
146
151
|
const { connectedEOAWallet } = useAccountWallet();
|
|
@@ -161,6 +166,14 @@ function AnySpendCustomExactInInner({
|
|
|
161
166
|
const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
|
|
162
167
|
|
|
163
168
|
const buildCustomPayload = (_recipient: string | undefined) => {
|
|
169
|
+
if (!customExactInConfig) {
|
|
170
|
+
// For hype_duel or other simple order types
|
|
171
|
+
return {
|
|
172
|
+
expectedDstAmount: expectedDstAmountRaw,
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// For custom_exact_in with custom config
|
|
164
177
|
return {
|
|
165
178
|
amount: expectedDstAmountRaw,
|
|
166
179
|
expectedDstAmount: expectedDstAmountRaw,
|
|
@@ -184,6 +197,28 @@ function AnySpendCustomExactInInner({
|
|
|
184
197
|
if (!anyspendQuote || !anyspendQuote.success)
|
|
185
198
|
return { text: "Get quote error", disable: true, error: true, loading: false };
|
|
186
199
|
|
|
200
|
+
// Check minimum destination amount if specified
|
|
201
|
+
// Check minimum destination amount if specified
|
|
202
|
+
if (
|
|
203
|
+
minDestinationAmount &&
|
|
204
|
+
anyspendQuote.data?.currencyOut?.amount &&
|
|
205
|
+
anyspendQuote.data.currencyOut.currency &&
|
|
206
|
+
anyspendQuote.data.currencyOut.currency.decimals != null
|
|
207
|
+
) {
|
|
208
|
+
const rawAmountInWei = BigInt(anyspendQuote.data.currencyOut.amount);
|
|
209
|
+
const decimals = anyspendQuote.data.currencyOut.currency.decimals;
|
|
210
|
+
const actualAmount = parseFloat(formatUnits(rawAmountInWei.toString(), decimals));
|
|
211
|
+
|
|
212
|
+
if (actualAmount < minDestinationAmount) {
|
|
213
|
+
return {
|
|
214
|
+
text: `Minimum ${minDestinationAmount} ${DESTINATION_TOKEN_DETAILS.SYMBOL} deposit`,
|
|
215
|
+
disable: true,
|
|
216
|
+
error: true,
|
|
217
|
+
loading: false,
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
187
222
|
if (paymentType === "crypto") {
|
|
188
223
|
if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
189
224
|
return { text: "Choose payment method", disable: false, error: false, loading: false };
|
|
@@ -195,7 +230,9 @@ function AnySpendCustomExactInInner({
|
|
|
195
230
|
) {
|
|
196
231
|
return { text: "Insufficient balance", disable: true, error: true, loading: false };
|
|
197
232
|
}
|
|
198
|
-
|
|
233
|
+
// Use different text based on order type
|
|
234
|
+
const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
|
|
235
|
+
return { text: buttonText, disable: false, error: false, loading: false };
|
|
199
236
|
}
|
|
200
237
|
|
|
201
238
|
if (paymentType === "fiat") {
|
|
@@ -219,6 +256,9 @@ function AnySpendCustomExactInInner({
|
|
|
219
256
|
hasEnoughBalance,
|
|
220
257
|
isBalanceLoading,
|
|
221
258
|
actionLabel,
|
|
259
|
+
minDestinationAmount,
|
|
260
|
+
DESTINATION_TOKEN_DETAILS.SYMBOL,
|
|
261
|
+
orderType,
|
|
222
262
|
]);
|
|
223
263
|
|
|
224
264
|
const onMainButtonClick = async () => {
|
|
@@ -384,7 +424,7 @@ function AnySpendCustomExactInInner({
|
|
|
384
424
|
|
|
385
425
|
createOrder({
|
|
386
426
|
recipientAddress: selectedRecipientOrDefault,
|
|
387
|
-
orderType
|
|
427
|
+
orderType,
|
|
388
428
|
srcChain: selectedSrcChainId,
|
|
389
429
|
dstChain: selectedDstChainId,
|
|
390
430
|
srcToken: selectedSrcToken,
|
|
@@ -435,7 +475,7 @@ function AnySpendCustomExactInInner({
|
|
|
435
475
|
|
|
436
476
|
createOnrampOrder({
|
|
437
477
|
recipientAddress: selectedRecipientOrDefault,
|
|
438
|
-
orderType
|
|
478
|
+
orderType,
|
|
439
479
|
dstChain: selectedDstChainId,
|
|
440
480
|
dstToken: selectedDstToken,
|
|
441
481
|
srcFiatAmount: srcAmount,
|