@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.
Files changed (64) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +38 -24
  2. package/dist/cjs/anyspend/react/components/AnySpendCustom.js +22 -9
  3. package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
  4. package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +44 -13
  5. package/dist/cjs/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
  6. package/dist/cjs/anyspend/react/components/AnySpendDepositUpside.js +41 -0
  7. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
  8. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +14 -251
  9. package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js +2 -10
  10. package/dist/cjs/anyspend/react/components/index.d.ts +1 -0
  11. package/dist/cjs/anyspend/react/components/index.js +4 -1
  12. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  13. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +16 -10
  14. package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  15. package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
  16. package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  17. package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.js +51 -0
  18. package/dist/cjs/global-account/react/components/B3DynamicModal.js +3 -0
  19. package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +6 -14
  20. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +21 -1
  21. package/dist/esm/anyspend/react/components/AnySpend.js +38 -24
  22. package/dist/esm/anyspend/react/components/AnySpendCustom.js +22 -9
  23. package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
  24. package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +44 -13
  25. package/dist/esm/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
  26. package/dist/esm/anyspend/react/components/AnySpendDepositUpside.js +38 -0
  27. package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
  28. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +15 -249
  29. package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js +2 -10
  30. package/dist/esm/anyspend/react/components/index.d.ts +1 -0
  31. package/dist/esm/anyspend/react/components/index.js +1 -0
  32. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  33. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +16 -10
  34. package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  35. package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
  36. package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  37. package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.js +48 -0
  38. package/dist/esm/global-account/react/components/B3DynamicModal.js +3 -0
  39. package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +6 -14
  40. package/dist/esm/global-account/react/stores/useModalStore.d.ts +21 -1
  41. package/dist/styles/index.css +1 -1
  42. package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts +3 -1
  43. package/dist/types/anyspend/react/components/AnySpendDepositUpside.d.ts +11 -0
  44. package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +1 -1
  45. package/dist/types/anyspend/react/components/index.d.ts +1 -0
  46. package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  47. package/dist/types/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  48. package/dist/types/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  49. package/dist/types/global-account/react/stores/useModalStore.d.ts +21 -1
  50. package/package.json +1 -1
  51. package/src/anyspend/react/components/AnySpend.tsx +50 -29
  52. package/src/anyspend/react/components/AnySpendCustom.tsx +28 -15
  53. package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +54 -13
  54. package/src/anyspend/react/components/AnySpendDepositUpside.tsx +81 -0
  55. package/src/anyspend/react/components/AnyspendDepositHype.tsx +36 -526
  56. package/src/anyspend/react/components/common/OrderTokenAmount.tsx +2 -13
  57. package/src/anyspend/react/components/index.ts +1 -0
  58. package/src/anyspend/react/hooks/useAnyspendFlow.ts +24 -12
  59. package/src/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.ts +20 -12
  60. package/src/anyspend/react/hooks/useCryptoPaymentMethodState.ts +71 -0
  61. package/src/global-account/react/components/B3DynamicModal.tsx +3 -0
  62. package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +6 -12
  63. package/src/global-account/react/stores/useModalStore.ts +22 -0
  64. 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.action ?? "Custom Execution";
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: "custom_exact_in",
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 (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
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
- selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
117
+ effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
92
118
  return { text: "Insufficient balance", disable: true, error: true, loading: false };
93
119
  }
94
- return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
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
- selectedCryptoPaymentMethod,
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 (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
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: 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: 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 => {
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: "custom_exact_in",
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: "custom_exact_in",
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 : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
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(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;
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, jsxs as _jsxs } from "react/jsx-runtime";
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 { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
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(props) {
29
- const fingerprintConfig = getFingerprintConfig();
30
- return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendDepositHypeInner, { ...props }) }));
31
- }
32
- function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
33
- // Use shared flow hook
34
- const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
35
- paymentType,
36
- recipientAddress,
37
- loadOrder,
38
- isDepositMode: true,
39
- onTransactionSuccess: onSuccess,
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
- // Order details view
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
- const isInitialLoad = !initialBalanceSetRef.current && rawBalance;
35
- if ((isTokenChanged || isInitialLoad) && rawBalance) {
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: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
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;