@b3dotfun/sdk 0.0.65 → 0.0.66-alpha.0
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/AnySpend.js +38 -24
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +22 -9
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +44 -13
- package/dist/cjs/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
- package/dist/cjs/anyspend/react/components/AnySpendDepositUpside.js +41 -0
- 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/common/OrderTokenAmount.js +2 -10
- package/dist/cjs/anyspend/react/components/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/components/index.js +4 -1
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +16 -10
- package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
- package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
- package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
- package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.js +51 -0
- package/dist/cjs/global-account/react/components/B3DynamicModal.js +3 -0
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +6 -14
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +21 -1
- package/dist/esm/anyspend/react/components/AnySpend.js +38 -24
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +22 -9
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +44 -13
- package/dist/esm/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
- package/dist/esm/anyspend/react/components/AnySpendDepositUpside.js +38 -0
- 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/common/OrderTokenAmount.js +2 -10
- package/dist/esm/anyspend/react/components/index.d.ts +1 -0
- package/dist/esm/anyspend/react/components/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +16 -10
- package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
- package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
- package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
- package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.js +48 -0
- package/dist/esm/global-account/react/components/B3DynamicModal.js +3 -0
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +6 -14
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +21 -1
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
- package/dist/types/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
- package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
- package/dist/types/anyspend/react/components/index.d.ts +1 -0
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
- package/dist/types/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
- package/dist/types/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +21 -1
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +50 -29
- package/src/anyspend/react/components/AnySpendCustom.tsx +28 -15
- package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +54 -13
- package/src/anyspend/react/components/AnySpendDepositUpside.tsx +81 -0
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +36 -526
- package/src/anyspend/react/components/common/OrderTokenAmount.tsx +2 -13
- package/src/anyspend/react/components/index.ts +1 -0
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +24 -12
- package/src/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.ts +20 -12
- package/src/anyspend/react/hooks/useCryptoPaymentMethodState.ts +71 -0
- package/src/global-account/react/components/B3DynamicModal.tsx +3 -0
- package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +6 -12
- package/src/global-account/react/stores/useModalStore.ts +22 -0
- package/src/styles/index.css +8 -0
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { normalizeAddress } from "../../../anyspend/utils/index.js";
|
|
3
3
|
import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "../../../global-account/react/index.js";
|
|
4
4
|
import { cn } from "../../../shared/utils/cn.js";
|
|
5
|
+
import { formatUnits } from "../../../shared/utils/number.js";
|
|
5
6
|
import invariant from "invariant";
|
|
6
7
|
import { ArrowDown, Loader2 } from "lucide-react";
|
|
7
8
|
import { motion } from "motion/react";
|
|
@@ -24,13 +25,13 @@ export function AnySpendCustomExactIn(props) {
|
|
|
24
25
|
const fingerprintConfig = getFingerprintConfig();
|
|
25
26
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
|
|
26
27
|
}
|
|
27
|
-
function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, header, }) {
|
|
28
|
-
const actionLabel = customExactInConfig
|
|
28
|
+
function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, }) {
|
|
29
|
+
const actionLabel = customExactInConfig?.action ?? "Custom Execution";
|
|
29
30
|
const DESTINATION_TOKEN_DETAILS = {
|
|
30
31
|
SYMBOL: destinationToken.symbol ?? "TOKEN",
|
|
31
32
|
LOGO_URI: destinationToken.metadata?.logoURI ?? "",
|
|
32
33
|
};
|
|
33
|
-
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, } = useAnyspendFlow({
|
|
34
|
+
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, } = useAnyspendFlow({
|
|
34
35
|
paymentType,
|
|
35
36
|
recipientAddress,
|
|
36
37
|
loadOrder,
|
|
@@ -42,7 +43,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
42
43
|
destinationTokenChainId: destinationChainId,
|
|
43
44
|
slippage: SLIPPAGE_PERCENT,
|
|
44
45
|
disableUrlParamManagement: true,
|
|
45
|
-
orderType
|
|
46
|
+
orderType,
|
|
46
47
|
});
|
|
47
48
|
const { connectedEOAWallet } = useAccountWallet();
|
|
48
49
|
const setActiveWallet = useSetActiveWallet();
|
|
@@ -58,6 +59,13 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
58
59
|
const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
|
|
59
60
|
const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
|
|
60
61
|
const buildCustomPayload = (_recipient) => {
|
|
62
|
+
if (!customExactInConfig) {
|
|
63
|
+
// For hype_duel or other simple order types
|
|
64
|
+
return {
|
|
65
|
+
expectedDstAmount: expectedDstAmountRaw,
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
// For custom_exact_in with custom config
|
|
61
69
|
return {
|
|
62
70
|
amount: expectedDstAmountRaw,
|
|
63
71
|
expectedDstAmount: expectedDstAmountRaw,
|
|
@@ -82,16 +90,36 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
82
90
|
return { text: "Select recipient", disable: false, error: false, loading: false };
|
|
83
91
|
if (!anyspendQuote || !anyspendQuote.success)
|
|
84
92
|
return { text: "Get quote error", disable: true, error: true, loading: false };
|
|
93
|
+
// Check minimum destination amount if specified
|
|
94
|
+
// Check minimum destination amount if specified
|
|
95
|
+
if (minDestinationAmount &&
|
|
96
|
+
anyspendQuote.data?.currencyOut?.amount &&
|
|
97
|
+
anyspendQuote.data.currencyOut.currency &&
|
|
98
|
+
anyspendQuote.data.currencyOut.currency.decimals != null) {
|
|
99
|
+
const rawAmountInWei = BigInt(anyspendQuote.data.currencyOut.amount);
|
|
100
|
+
const decimals = anyspendQuote.data.currencyOut.currency.decimals;
|
|
101
|
+
const actualAmount = parseFloat(formatUnits(rawAmountInWei.toString(), decimals));
|
|
102
|
+
if (actualAmount < minDestinationAmount) {
|
|
103
|
+
return {
|
|
104
|
+
text: `Minimum ${minDestinationAmount} ${DESTINATION_TOKEN_DETAILS.SYMBOL} deposit`,
|
|
105
|
+
disable: true,
|
|
106
|
+
error: true,
|
|
107
|
+
loading: false,
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
}
|
|
85
111
|
if (paymentType === "crypto") {
|
|
86
|
-
if (
|
|
112
|
+
if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
87
113
|
return { text: "Choose payment method", disable: false, error: false, loading: false };
|
|
88
114
|
}
|
|
89
115
|
if (!hasEnoughBalance &&
|
|
90
116
|
!isBalanceLoading &&
|
|
91
|
-
|
|
117
|
+
effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
92
118
|
return { text: "Insufficient balance", disable: true, error: true, loading: false };
|
|
93
119
|
}
|
|
94
|
-
|
|
120
|
+
// Use different text based on order type
|
|
121
|
+
const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
|
|
122
|
+
return { text: buttonText, disable: false, error: false, loading: false };
|
|
95
123
|
}
|
|
96
124
|
if (paymentType === "fiat") {
|
|
97
125
|
if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
|
|
@@ -108,11 +136,14 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
108
136
|
selectedRecipientOrDefault,
|
|
109
137
|
anyspendQuote,
|
|
110
138
|
paymentType,
|
|
111
|
-
|
|
139
|
+
effectiveCryptoPaymentMethod,
|
|
112
140
|
selectedFiatPaymentMethod,
|
|
113
141
|
hasEnoughBalance,
|
|
114
142
|
isBalanceLoading,
|
|
115
143
|
actionLabel,
|
|
144
|
+
minDestinationAmount,
|
|
145
|
+
DESTINATION_TOKEN_DETAILS.SYMBOL,
|
|
146
|
+
orderType,
|
|
116
147
|
]);
|
|
117
148
|
const onMainButtonClick = async () => {
|
|
118
149
|
if (btnInfo.disable)
|
|
@@ -122,7 +153,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
122
153
|
return;
|
|
123
154
|
}
|
|
124
155
|
if (paymentType === "crypto") {
|
|
125
|
-
if (
|
|
156
|
+
if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
126
157
|
setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
|
|
127
158
|
return;
|
|
128
159
|
}
|
|
@@ -137,7 +168,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
137
168
|
}
|
|
138
169
|
};
|
|
139
170
|
const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
|
|
140
|
-
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _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:
|
|
171
|
+
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _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: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_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: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(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 => {
|
|
141
172
|
setIsSrcInputDirty(false);
|
|
142
173
|
setSrcAmount(value);
|
|
143
174
|
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _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] }));
|
|
@@ -149,7 +180,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
149
180
|
const payload = buildCustomPayload(selectedRecipientOrDefault);
|
|
150
181
|
createOrder({
|
|
151
182
|
recipientAddress: selectedRecipientOrDefault,
|
|
152
|
-
orderType
|
|
183
|
+
orderType,
|
|
153
184
|
srcChain: selectedSrcChainId,
|
|
154
185
|
dstChain: selectedDstChainId,
|
|
155
186
|
srcToken: selectedSrcToken,
|
|
@@ -197,7 +228,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
197
228
|
const payload = buildCustomPayload(selectedRecipientOrDefault);
|
|
198
229
|
createOnrampOrder({
|
|
199
230
|
recipientAddress: selectedRecipientOrDefault,
|
|
200
|
-
orderType
|
|
231
|
+
orderType,
|
|
201
232
|
dstChain: selectedDstChainId,
|
|
202
233
|
dstToken: selectedDstToken,
|
|
203
234
|
srcFiatAmount: srcAmount,
|
|
@@ -217,7 +248,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
217
248
|
toast.error("Failed to create order: " + err.message);
|
|
218
249
|
}
|
|
219
250
|
};
|
|
220
|
-
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 :
|
|
251
|
+
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 : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
|
|
221
252
|
setOrderId(undefined);
|
|
222
253
|
setActivePanel(PanelView.MAIN);
|
|
223
254
|
}, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { components } from "../../../anyspend/types/api";
|
|
2
|
+
export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }: {
|
|
3
|
+
loadOrder?: string;
|
|
4
|
+
mode?: "modal" | "page";
|
|
5
|
+
recipientAddress: string;
|
|
6
|
+
sourceTokenAddress?: string;
|
|
7
|
+
sourceTokenChainId?: number;
|
|
8
|
+
depositContractAddress: string;
|
|
9
|
+
token: components["schemas"]["Token"];
|
|
10
|
+
onSuccess?: (amount: string) => void;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { normalizeAddress } from "../../../anyspend/utils/index.js";
|
|
3
|
+
import { base } from "viem/chains";
|
|
4
|
+
import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
|
|
5
|
+
const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
|
|
6
|
+
{
|
|
7
|
+
inputs: [
|
|
8
|
+
{
|
|
9
|
+
internalType: "address",
|
|
10
|
+
name: "user",
|
|
11
|
+
type: "address",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
internalType: "uint256",
|
|
15
|
+
name: "amount",
|
|
16
|
+
type: "uint256",
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
name: "depositFor",
|
|
20
|
+
outputs: [],
|
|
21
|
+
stateMutability: "nonpayable",
|
|
22
|
+
type: "function",
|
|
23
|
+
},
|
|
24
|
+
]);
|
|
25
|
+
export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }) {
|
|
26
|
+
if (!recipientAddress)
|
|
27
|
+
return null;
|
|
28
|
+
const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Deposit ", token.symbol] }) }) }) }));
|
|
29
|
+
const customExactInConfig = {
|
|
30
|
+
functionAbi: DEPOSIT_FOR_FUNCTION_ABI,
|
|
31
|
+
functionName: "depositFor",
|
|
32
|
+
functionArgs: [normalizeAddress(recipientAddress), "{{amount_out}}"],
|
|
33
|
+
to: depositContractAddress,
|
|
34
|
+
spenderAddress: depositContractAddress,
|
|
35
|
+
action: `deposit ${token.symbol}`,
|
|
36
|
+
};
|
|
37
|
+
return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
|
|
38
|
+
}
|
|
@@ -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;
|
|
@@ -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 (selectedCryptoPaymentMethod === 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
|
-
isLoadingAnyspendQuote,
|
|
96
|
-
isCreatingOrder,
|
|
97
|
-
isCreatingOnrampOrder,
|
|
98
|
-
selectedRecipientAddress,
|
|
99
|
-
anyspendQuote,
|
|
100
|
-
dstAmount,
|
|
101
|
-
paymentType,
|
|
102
|
-
selectedCryptoPaymentMethod,
|
|
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 (selectedCryptoPaymentMethod === 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: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), 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
|
}
|
|
@@ -14,26 +14,19 @@ import { ChainTokenIcon } from "./ChainTokenIcon.js";
|
|
|
14
14
|
export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, walletAddress, }) {
|
|
15
15
|
// Track previous token to detect changes
|
|
16
16
|
const prevTokenRef = useRef(token.address);
|
|
17
|
-
// Track if initial balance has been set
|
|
18
|
-
const initialBalanceSetRef = useRef(false);
|
|
19
17
|
// Only get token balance when context is "from" (for setting max amount)
|
|
20
18
|
const { rawBalance } = useTokenBalance({
|
|
21
19
|
token,
|
|
22
20
|
address: context === "from" && walletAddress ? walletAddress : undefined,
|
|
23
21
|
});
|
|
24
|
-
// Reset balance ref when token address or chain changes
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
initialBalanceSetRef.current = false;
|
|
27
|
-
}, [token.address, token.chainId]);
|
|
28
22
|
useEffect(() => {
|
|
29
23
|
// Only handle "from" context
|
|
30
24
|
if (context !== "from")
|
|
31
25
|
return;
|
|
32
26
|
// Check if token changed or if this is the initial load with balance
|
|
33
27
|
const isTokenChanged = prevTokenRef.current !== token.address;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
console.log(`Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}, Initial: ${isInitialLoad}`);
|
|
28
|
+
if (isTokenChanged && rawBalance) {
|
|
29
|
+
console.log(`Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}`);
|
|
37
30
|
// Calculate max amount with gas reserve for native tokens
|
|
38
31
|
let maxAmount;
|
|
39
32
|
if (isNativeToken(token.address)) {
|
|
@@ -49,7 +42,6 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
|
|
|
49
42
|
onChangeInput(formatUnits(maxAmount, token.decimals));
|
|
50
43
|
// Update refs
|
|
51
44
|
prevTokenRef.current = token.address;
|
|
52
|
-
initialBalanceSetRef.current = true;
|
|
53
45
|
}
|
|
54
46
|
}, [token.address, token.chainId, token.decimals, chainId, context, onChangeInput, rawBalance]);
|
|
55
47
|
const handleTokenSelect = (newToken) => {
|
|
@@ -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";
|
|
@@ -93,8 +93,12 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
|
|
|
93
93
|
setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
94
94
|
isSrcInputDirty: boolean;
|
|
95
95
|
setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
96
|
+
cryptoPaymentMethod: CryptoPaymentMethodType;
|
|
97
|
+
setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
|
|
96
98
|
selectedCryptoPaymentMethod: CryptoPaymentMethodType;
|
|
97
|
-
setSelectedCryptoPaymentMethod:
|
|
99
|
+
setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
|
|
100
|
+
effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
|
|
101
|
+
resetPaymentMethods: () => void;
|
|
98
102
|
selectedFiatPaymentMethod: FiatPaymentMethod;
|
|
99
103
|
setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
|
|
100
104
|
selectedRecipientAddress: string | undefined;
|