@b3dotfun/sdk 0.0.87 → 0.0.88-alpha.1
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/README.md +2 -1
- package/dist/cjs/anyspend/react/components/AnySpend.d.ts +5 -0
- package/dist/cjs/anyspend/react/components/AnySpend.js +77 -73
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +0 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts +1 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +1 -2
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.d.ts +122 -0
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.js +190 -0
- package/dist/cjs/anyspend/react/components/QRDeposit.d.ts +43 -0
- package/dist/cjs/anyspend/react/components/QRDeposit.js +146 -0
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +17 -12
- package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js +12 -5
- package/dist/cjs/anyspend/react/components/common/OrderStatus.js +2 -2
- package/dist/cjs/anyspend/react/components/common/WarningText.d.ts +32 -0
- package/dist/cjs/anyspend/react/components/common/WarningText.js +36 -0
- package/dist/cjs/anyspend/react/components/icons/CreditCardIcon.d.ts +6 -0
- package/dist/cjs/anyspend/react/components/icons/CreditCardIcon.js +6 -0
- package/dist/cjs/anyspend/react/components/icons/QrCodeIcon.d.ts +6 -0
- package/dist/cjs/anyspend/react/components/icons/QrCodeIcon.js +6 -0
- package/dist/cjs/anyspend/react/components/index.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/index.js +3 -1
- package/dist/cjs/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/hooks/index.js +1 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -2
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +35 -11
- package/dist/cjs/anyspend/react/hooks/useCreateDepositFirstOrder.d.ts +24 -0
- package/dist/cjs/anyspend/react/hooks/useCreateDepositFirstOrder.js +86 -0
- package/dist/cjs/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/cjs/anyspend/utils/format.js +28 -5
- package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.js +2 -1
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +17 -47
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.native.js +6 -7
- package/dist/cjs/global-account/react/components/B3Provider/types.d.ts +0 -5
- package/dist/cjs/global-account/react/components/B3Provider/types.js +4 -4
- package/dist/cjs/global-account/react/components/B3Provider/useB3.d.ts +1 -0
- package/dist/cjs/global-account/react/components/B3Provider/useB3.js +1 -0
- package/dist/cjs/global-account/react/components/B3Provider/useB3Account.d.ts +1 -0
- package/dist/cjs/global-account/react/components/B3Provider/useB3Account.js +10 -0
- package/dist/cjs/global-account/react/components/B3Provider/useB3Config.d.ts +9 -0
- package/dist/cjs/global-account/react/components/B3Provider/useB3Config.js +23 -0
- package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +1 -1
- package/dist/cjs/global-account/react/components/LinkAccount/LinkNewAccount.js +1 -2
- package/dist/cjs/global-account/react/components/ManageAccount/ProfileSection.js +2 -1
- package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js +2 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3.js +2 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +2 -1
- package/dist/cjs/global-account/react/components/index.d.ts +2 -0
- package/dist/cjs/global-account/react/components/index.js +7 -3
- package/dist/cjs/global-account/react/hooks/useAccountWallet.js +3 -2
- package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts +1 -1
- package/dist/cjs/global-account/react/hooks/useAutoSelectWallet.d.ts +7 -0
- package/dist/cjs/global-account/react/hooks/useAutoSelectWallet.js +42 -0
- package/dist/cjs/global-account/react/hooks/useTurnkeyAuth.js +6 -4
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +2 -2
- package/dist/cjs/global-account/react/hooks/useUserQuery.d.ts +1 -1
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +4 -0
- package/dist/esm/anyspend/react/components/AnySpend.d.ts +5 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +77 -73
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +0 -1
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts +1 -1
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +1 -2
- package/dist/esm/anyspend/react/components/AnySpendDeposit.d.ts +122 -0
- package/dist/esm/anyspend/react/components/AnySpendDeposit.js +187 -0
- package/dist/esm/anyspend/react/components/QRDeposit.d.ts +43 -0
- package/dist/esm/anyspend/react/components/QRDeposit.js +143 -0
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +17 -12
- package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.d.ts +2 -0
- package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.js +12 -5
- package/dist/esm/anyspend/react/components/common/OrderStatus.js +2 -2
- package/dist/esm/anyspend/react/components/common/WarningText.d.ts +32 -0
- package/dist/esm/anyspend/react/components/common/WarningText.js +32 -0
- package/dist/esm/anyspend/react/components/icons/CreditCardIcon.d.ts +6 -0
- package/dist/esm/anyspend/react/components/icons/CreditCardIcon.js +2 -0
- package/dist/esm/anyspend/react/components/icons/QrCodeIcon.d.ts +6 -0
- package/dist/esm/anyspend/react/components/icons/QrCodeIcon.js +2 -0
- package/dist/esm/anyspend/react/components/index.d.ts +2 -0
- package/dist/esm/anyspend/react/components/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/esm/anyspend/react/hooks/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -2
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +35 -11
- package/dist/esm/anyspend/react/hooks/useCreateDepositFirstOrder.d.ts +24 -0
- package/dist/esm/anyspend/react/hooks/useCreateDepositFirstOrder.js +83 -0
- package/dist/esm/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/esm/anyspend/utils/format.js +28 -5
- package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js +3 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +21 -51
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.native.js +6 -7
- package/dist/esm/global-account/react/components/B3Provider/types.d.ts +0 -5
- package/dist/esm/global-account/react/components/B3Provider/types.js +4 -4
- package/dist/esm/global-account/react/components/B3Provider/useB3.d.ts +1 -0
- package/dist/esm/global-account/react/components/B3Provider/useB3.js +1 -0
- package/dist/esm/global-account/react/components/B3Provider/useB3Account.d.ts +1 -0
- package/dist/esm/global-account/react/components/B3Provider/useB3Account.js +6 -0
- package/dist/esm/global-account/react/components/B3Provider/useB3Config.d.ts +9 -0
- package/dist/esm/global-account/react/components/B3Provider/useB3Config.js +19 -0
- package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +2 -2
- package/dist/esm/global-account/react/components/LinkAccount/LinkNewAccount.js +2 -3
- package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js +3 -2
- package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js +3 -2
- package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3.js +3 -2
- package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +3 -2
- package/dist/esm/global-account/react/components/index.d.ts +2 -0
- package/dist/esm/global-account/react/components/index.js +2 -0
- package/dist/esm/global-account/react/hooks/useAccountWallet.js +4 -3
- package/dist/esm/global-account/react/hooks/useAuthentication.d.ts +1 -1
- package/dist/esm/global-account/react/hooks/useAutoSelectWallet.d.ts +7 -0
- package/dist/esm/global-account/react/hooks/useAutoSelectWallet.js +39 -0
- package/dist/esm/global-account/react/hooks/useTurnkeyAuth.js +6 -4
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +2 -2
- package/dist/esm/global-account/react/hooks/useUserQuery.d.ts +1 -1
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +4 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/AnySpend.d.ts +5 -0
- package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts +1 -1
- package/dist/types/anyspend/react/components/AnySpendDeposit.d.ts +122 -0
- package/dist/types/anyspend/react/components/QRDeposit.d.ts +43 -0
- package/dist/types/anyspend/react/components/common/OrderDetailsCollapsible.d.ts +2 -0
- package/dist/types/anyspend/react/components/common/WarningText.d.ts +32 -0
- package/dist/types/anyspend/react/components/icons/CreditCardIcon.d.ts +6 -0
- package/dist/types/anyspend/react/components/icons/QrCodeIcon.d.ts +6 -0
- package/dist/types/anyspend/react/components/index.d.ts +2 -0
- package/dist/types/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -2
- package/dist/types/anyspend/react/hooks/useCreateDepositFirstOrder.d.ts +24 -0
- package/dist/types/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/types/global-account/react/components/B3Provider/types.d.ts +0 -5
- package/dist/types/global-account/react/components/B3Provider/useB3.d.ts +1 -0
- package/dist/types/global-account/react/components/B3Provider/useB3Account.d.ts +1 -0
- package/dist/types/global-account/react/components/B3Provider/useB3Config.d.ts +9 -0
- package/dist/types/global-account/react/components/index.d.ts +2 -0
- package/dist/types/global-account/react/hooks/useAuthentication.d.ts +1 -1
- package/dist/types/global-account/react/hooks/useAutoSelectWallet.d.ts +7 -0
- package/dist/types/global-account/react/hooks/useUserQuery.d.ts +1 -1
- package/dist/types/global-account/react/stores/useModalStore.d.ts +4 -0
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +105 -85
- package/src/anyspend/react/components/AnySpendCustom.tsx +0 -2
- package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +2 -3
- package/src/anyspend/react/components/AnySpendDeposit.tsx +570 -0
- package/src/anyspend/react/components/QRDeposit.tsx +348 -0
- package/src/anyspend/react/components/common/OrderDetails.tsx +26 -8
- package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx +20 -8
- package/src/anyspend/react/components/common/OrderStatus.tsx +2 -2
- package/src/anyspend/react/components/common/WarningText.tsx +52 -0
- package/src/anyspend/react/components/icons/CreditCardIcon.tsx +25 -0
- package/src/anyspend/react/components/icons/QrCodeIcon.tsx +25 -0
- package/src/anyspend/react/components/icons/credit-card.svg +5 -0
- package/src/anyspend/react/components/icons/qr-code.svg +5 -0
- package/src/anyspend/react/components/index.ts +2 -0
- package/src/anyspend/react/hooks/index.ts +1 -0
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +37 -12
- package/src/anyspend/react/hooks/useCreateDepositFirstOrder.ts +110 -0
- package/src/anyspend/utils/format.ts +33 -5
- package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx +10 -2
- package/src/global-account/react/components/B3Provider/B3Provider.native.tsx +6 -7
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +20 -71
- package/src/global-account/react/components/B3Provider/types.ts +8 -9
- package/src/global-account/react/components/B3Provider/useB3.ts +1 -0
- package/src/global-account/react/components/B3Provider/useB3Account.ts +7 -0
- package/src/global-account/react/components/B3Provider/useB3Config.ts +34 -0
- package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +2 -2
- package/src/global-account/react/components/LinkAccount/LinkNewAccount.tsx +2 -3
- package/src/global-account/react/components/ManageAccount/ProfileSection.tsx +10 -2
- package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx +3 -2
- package/src/global-account/react/components/SignInWithB3/SignInWithB3.tsx +2 -2
- package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +5 -2
- package/src/global-account/react/components/index.ts +2 -0
- package/src/global-account/react/hooks/useAccountWallet.tsx +4 -3
- package/src/global-account/react/hooks/useAutoSelectWallet.ts +51 -0
- package/src/global-account/react/hooks/useTurnkeyAuth.ts +7 -5
- package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +2 -2
- package/src/global-account/react/stores/useModalStore.ts +4 -0
- package/src/styles/index.css +2 -0
package/README.md
CHANGED
|
@@ -267,7 +267,8 @@ function PermissionsExample() {
|
|
|
267
267
|
import { useB3 } from "@b3dotfun/sdk/global-account/react";
|
|
268
268
|
|
|
269
269
|
function AccountStatus() {
|
|
270
|
-
const
|
|
270
|
+
const isAuthenticated = useAuthStore(state => state.isAuthenticated);
|
|
271
|
+
const account = useB3Account();
|
|
271
272
|
|
|
272
273
|
return <div>{isAuthenticated ? <p>Welcome, {account?.displayName}!</p> : <p>Please sign in</p>}</div>;
|
|
273
274
|
}
|
|
@@ -20,6 +20,7 @@ export declare enum PanelView {
|
|
|
20
20
|
export declare function AnySpend(props: {
|
|
21
21
|
mode?: "page" | "modal";
|
|
22
22
|
defaultActiveTab?: "crypto" | "fiat";
|
|
23
|
+
sourceChainId?: number;
|
|
23
24
|
destinationTokenAddress?: string;
|
|
24
25
|
destinationTokenChainId?: number;
|
|
25
26
|
recipientAddress?: string;
|
|
@@ -34,4 +35,8 @@ export declare function AnySpend(props: {
|
|
|
34
35
|
}) => void;
|
|
35
36
|
onSuccess?: (txHash?: string) => void;
|
|
36
37
|
customUsdInputValues?: string[];
|
|
38
|
+
hideHeader?: boolean;
|
|
39
|
+
hideBottomNavigation?: boolean;
|
|
40
|
+
/** When true, disables URL parameter management for swap configuration */
|
|
41
|
+
disableUrlParamManagement?: boolean;
|
|
37
42
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -57,7 +57,7 @@ function AnySpend(props) {
|
|
|
57
57
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
58
58
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
|
|
59
59
|
}
|
|
60
|
-
function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
|
|
60
|
+
function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, }) {
|
|
61
61
|
const searchParams = (0, react_2.useSearchParamsSSR)();
|
|
62
62
|
const router = (0, react_2.useRouter)();
|
|
63
63
|
const { partnerId } = (0, react_2.useB3)();
|
|
@@ -97,7 +97,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
97
97
|
// const [newRecipientAddress, setNewRecipientAddress] = useState("");
|
|
98
98
|
// const recipientInputRef = useRef<HTMLInputElement>(null);
|
|
99
99
|
// Get initial chain IDs from URL or defaults
|
|
100
|
-
const initialSrcChainId = parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
|
|
100
|
+
const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
|
|
101
101
|
const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : chains_1.base.id);
|
|
102
102
|
// State for source chain/token selection
|
|
103
103
|
const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(initialSrcChainId);
|
|
@@ -190,8 +190,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
190
190
|
}, [selectedDstToken.address, selectedDstToken.chainId]);
|
|
191
191
|
// Load swap configuration from URL on initial render
|
|
192
192
|
(0, react_4.useEffect)(() => {
|
|
193
|
-
// Skip if we've already processed the URL
|
|
194
|
-
if (initialUrlProcessed.current || loadOrder)
|
|
193
|
+
// Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
|
|
194
|
+
if (initialUrlProcessed.current || loadOrder || disableUrlParamManagement)
|
|
195
195
|
return;
|
|
196
196
|
try {
|
|
197
197
|
const tabParam = searchParams.get("tab");
|
|
@@ -224,7 +224,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
224
224
|
}
|
|
225
225
|
// Mark that we've processed the initial URL
|
|
226
226
|
initialUrlProcessed.current = true;
|
|
227
|
-
}, [searchParams, loadOrder]);
|
|
227
|
+
}, [searchParams, loadOrder, disableUrlParamManagement]);
|
|
228
228
|
// Update URL when swap configuration changes - but not on initial load
|
|
229
229
|
const updateSwapParamsInURL = (0, react_4.useCallback)(() => {
|
|
230
230
|
// Skip if:
|
|
@@ -235,7 +235,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
235
235
|
activePanel !== PanelView.MAIN ||
|
|
236
236
|
!initialUrlProcessed.current ||
|
|
237
237
|
searchParams.has("orderId") ||
|
|
238
|
-
mode === "modal"
|
|
238
|
+
mode === "modal" ||
|
|
239
|
+
disableUrlParamManagement)
|
|
239
240
|
return;
|
|
240
241
|
// Create a representation of the current state
|
|
241
242
|
const currentState = {
|
|
@@ -295,6 +296,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
295
296
|
dstAmount,
|
|
296
297
|
router,
|
|
297
298
|
srcAmountOnRamp,
|
|
299
|
+
disableUrlParamManagement,
|
|
298
300
|
]);
|
|
299
301
|
// Update URL when relevant state changes - but only after initial render
|
|
300
302
|
(0, react_4.useEffect)(() => {
|
|
@@ -480,20 +482,20 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
480
482
|
setOrderId(orderId);
|
|
481
483
|
// setNewRecipientAddress("");
|
|
482
484
|
navigateToPanel(PanelView.ORDER_DETAILS, "forward");
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
485
|
+
if (!disableUrlParamManagement) {
|
|
486
|
+
// Debug: Check payment method before setting URL
|
|
487
|
+
console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
|
|
488
|
+
// Add orderId and payment method to URL for persistence
|
|
489
|
+
const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
|
|
490
|
+
params.set("orderId", orderId);
|
|
491
|
+
if (effectiveCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
|
|
492
|
+
params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
|
|
493
|
+
}
|
|
494
|
+
else {
|
|
495
|
+
console.log("Payment method is NONE, not setting in URL");
|
|
496
|
+
}
|
|
497
|
+
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
494
498
|
}
|
|
495
|
-
console.log("Final URL params:", params.toString());
|
|
496
|
-
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
497
499
|
},
|
|
498
500
|
onError: error => {
|
|
499
501
|
console.error(error);
|
|
@@ -506,11 +508,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
506
508
|
const orderId = data.data.id;
|
|
507
509
|
setOrderId(orderId);
|
|
508
510
|
navigateToPanel(PanelView.ORDER_DETAILS, "forward");
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
511
|
+
if (!disableUrlParamManagement) {
|
|
512
|
+
// Add orderId and payment method to URL for persistence
|
|
513
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
514
|
+
params.set("orderId", orderId);
|
|
515
|
+
params.set("paymentMethod", "fiat");
|
|
516
|
+
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
517
|
+
}
|
|
514
518
|
},
|
|
515
519
|
onError: error => {
|
|
516
520
|
console.error(error);
|
|
@@ -638,11 +642,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
638
642
|
type: "anySpendOrderHistory",
|
|
639
643
|
showBackButton: false,
|
|
640
644
|
});
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
645
|
+
if (!disableUrlParamManagement) {
|
|
646
|
+
// Remove orderId and paymentMethod from URL when going back to history
|
|
647
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
648
|
+
params.delete("orderId");
|
|
649
|
+
params.delete("paymentMethod");
|
|
650
|
+
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
651
|
+
}
|
|
646
652
|
};
|
|
647
653
|
// Handle crypto swap creation
|
|
648
654
|
const handleCryptoSwap = async (method) => {
|
|
@@ -751,22 +757,24 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
751
757
|
// const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
|
|
752
758
|
// Update useEffect for URL parameter to not override loadOrder
|
|
753
759
|
(0, react_4.useEffect)(() => {
|
|
754
|
-
if (loadOrder)
|
|
755
|
-
return; // Skip if we have a loadOrder
|
|
760
|
+
if (loadOrder || disableUrlParamManagement)
|
|
761
|
+
return; // Skip if we have a loadOrder or URL param management is disabled
|
|
756
762
|
const orderIdParam = searchParams.get("orderId");
|
|
757
763
|
if (orderIdParam) {
|
|
758
764
|
setOrderId(orderIdParam);
|
|
759
765
|
setActivePanel(PanelView.ORDER_DETAILS);
|
|
760
766
|
}
|
|
761
|
-
}, [searchParams, loadOrder]);
|
|
767
|
+
}, [searchParams, loadOrder, disableUrlParamManagement]);
|
|
762
768
|
const onSelectOrder = (selectedOrderId) => {
|
|
763
769
|
setOrderId(selectedOrderId);
|
|
764
770
|
navigateToPanel(PanelView.ORDER_DETAILS, "forward");
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
771
|
+
if (!disableUrlParamManagement) {
|
|
772
|
+
// Update URL with the new orderId and preserve existing parameters
|
|
773
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
774
|
+
params.set("orderId", selectedOrderId);
|
|
775
|
+
// Keep existing paymentMethod if present
|
|
776
|
+
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
777
|
+
}
|
|
770
778
|
};
|
|
771
779
|
// Save custom recipients to local storage when they change
|
|
772
780
|
(0, react_4.useEffect)(() => {
|
|
@@ -818,7 +826,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
818
826
|
// Reset payment methods when going back
|
|
819
827
|
resetPaymentMethods();
|
|
820
828
|
} })) }) }));
|
|
821
|
-
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
|
|
829
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
|
|
822
830
|
setActiveTab(tab);
|
|
823
831
|
// Reset payment methods when switching tabs
|
|
824
832
|
resetPaymentMethods();
|
|
@@ -832,30 +840,24 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
832
840
|
else {
|
|
833
841
|
setActivePanel(panelIndex);
|
|
834
842
|
}
|
|
835
|
-
}, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
// Swap amounts
|
|
854
|
-
const tempSrcAmount = srcAmount;
|
|
855
|
-
const tempDstAmount = dstAmount;
|
|
856
|
-
setSrcAmount(tempDstAmount);
|
|
857
|
-
setDstAmount(tempSrcAmount);
|
|
858
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
|
|
843
|
+
}, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)("div", { className: "z-10 -my-6 flex justify-center", children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "cursor-default", selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
|
|
844
|
+
if (isBuyMode) {
|
|
845
|
+
return;
|
|
846
|
+
}
|
|
847
|
+
// Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
|
|
848
|
+
if (selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID) {
|
|
849
|
+
return;
|
|
850
|
+
}
|
|
851
|
+
// Swap chain selections
|
|
852
|
+
setSelectedSrcChainId(selectedDstChainId);
|
|
853
|
+
setSelectedDstChainId(selectedSrcChainId);
|
|
854
|
+
// Swap token selections
|
|
855
|
+
setSelectedSrcToken(selectedDstToken);
|
|
856
|
+
setSelectedDstToken(selectedSrcToken);
|
|
857
|
+
// Swap amounts
|
|
858
|
+
setSrcAmount(dstAmount);
|
|
859
|
+
setDstAmount(srcAmount);
|
|
860
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
|
|
859
861
|
setIsSrcInputDirty(false);
|
|
860
862
|
setDstAmount(value);
|
|
861
863
|
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
|
|
@@ -873,21 +875,23 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
873
875
|
type: "anySpend",
|
|
874
876
|
});
|
|
875
877
|
}
|
|
876
|
-
}, children: mode !== "page" && (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
|
|
878
|
+
}, children: mode !== "page" && !hideBottomNavigation && (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
|
|
877
879
|
const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: effectiveRecipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
|
|
878
880
|
setOrderId(orderId);
|
|
879
881
|
navigateToPanel(PanelView.ORDER_DETAILS, "forward");
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
882
|
+
if (!disableUrlParamManagement) {
|
|
883
|
+
// Add orderId and payment method to URL for persistence
|
|
884
|
+
const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
|
|
885
|
+
params.set("orderId", orderId);
|
|
886
|
+
// For fiat payments, the payment method is always fiat (but we use the active tab context)
|
|
887
|
+
if (activeTab === "fiat") {
|
|
888
|
+
params.set("paymentMethod", "fiat");
|
|
889
|
+
}
|
|
890
|
+
else if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
|
|
891
|
+
params.set("paymentMethod", selectedCryptoPaymentMethod);
|
|
892
|
+
}
|
|
893
|
+
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
889
894
|
}
|
|
890
|
-
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
891
895
|
}, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
|
|
892
896
|
const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
|
|
893
897
|
// User manually selected a recipient
|
|
@@ -219,7 +219,6 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
221
|
}, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
|
|
222
|
-
// const { account: isAuthenticated } = useB3();
|
|
223
222
|
const getRelayQuoteRequest = (0, react_5.useMemo)(() => {
|
|
224
223
|
return generateGetRelayQuoteRequest({
|
|
225
224
|
orderType: orderType,
|
|
@@ -26,7 +26,7 @@ export interface AnySpendCustomExactInProps {
|
|
|
26
26
|
customUsdInputValues?: string[];
|
|
27
27
|
preferEoa?: boolean;
|
|
28
28
|
customExactInConfig?: CustomExactInConfig;
|
|
29
|
-
orderType?: "hype_duel" | "custom_exact_in";
|
|
29
|
+
orderType?: "hype_duel" | "custom_exact_in" | "swap";
|
|
30
30
|
minDestinationAmount?: number;
|
|
31
31
|
header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
|
|
32
32
|
anyspendPrice: GetQuoteResponse | undefined;
|
|
@@ -41,7 +41,6 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
41
41
|
paymentType,
|
|
42
42
|
recipientAddress,
|
|
43
43
|
loadOrder,
|
|
44
|
-
isDepositMode: true,
|
|
45
44
|
onTransactionSuccess: onSuccess,
|
|
46
45
|
sourceTokenAddress,
|
|
47
46
|
sourceTokenChainId,
|
|
@@ -182,7 +181,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
182
181
|
}
|
|
183
182
|
};
|
|
184
183
|
const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
|
|
185
|
-
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
|
|
184
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
|
|
186
185
|
setIsSrcInputDirty(false);
|
|
187
186
|
setSrcAmount(value);
|
|
188
187
|
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { components } from "../../../anyspend/types/api";
|
|
2
|
+
import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
|
|
3
|
+
export interface DepositContractConfig {
|
|
4
|
+
/** Custom function ABI JSON string */
|
|
5
|
+
functionAbi: string;
|
|
6
|
+
/** The function name to call */
|
|
7
|
+
functionName: string;
|
|
8
|
+
/** Custom function arguments. Use "{{amount_out}}" for the deposit amount placeholder */
|
|
9
|
+
functionArgs: string[];
|
|
10
|
+
/** The contract address to deposit to */
|
|
11
|
+
to: string;
|
|
12
|
+
/** Optional spender address if different from contract address */
|
|
13
|
+
spenderAddress?: string;
|
|
14
|
+
/** Custom action label */
|
|
15
|
+
action?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface ChainConfig {
|
|
18
|
+
/** Chain ID */
|
|
19
|
+
id: number;
|
|
20
|
+
/** Display name */
|
|
21
|
+
name: string;
|
|
22
|
+
/** Optional icon URL */
|
|
23
|
+
iconUrl?: string;
|
|
24
|
+
}
|
|
25
|
+
export interface AnySpendDepositProps {
|
|
26
|
+
/** Order ID to load an existing order */
|
|
27
|
+
loadOrder?: string;
|
|
28
|
+
/** Display mode */
|
|
29
|
+
mode?: "modal" | "page";
|
|
30
|
+
/** The recipient address for the deposit */
|
|
31
|
+
recipientAddress: string;
|
|
32
|
+
/** Payment type - crypto or fiat. If not set, shows chain selection first */
|
|
33
|
+
paymentType?: "crypto" | "fiat";
|
|
34
|
+
/** Source token address to pre-select */
|
|
35
|
+
sourceTokenAddress?: string;
|
|
36
|
+
/** Source chain ID to pre-select. If not provided, shows chain selection */
|
|
37
|
+
sourceTokenChainId?: number;
|
|
38
|
+
/** The destination token to receive */
|
|
39
|
+
destinationToken: components["schemas"]["Token"];
|
|
40
|
+
/** The destination chain ID */
|
|
41
|
+
destinationChainId: number;
|
|
42
|
+
/** Callback when deposit succeeds */
|
|
43
|
+
onSuccess?: (amount: string) => void;
|
|
44
|
+
/** Callback for opening a custom modal (e.g., for special token handling) */
|
|
45
|
+
onOpenCustomModal?: () => void;
|
|
46
|
+
/** Custom footer content */
|
|
47
|
+
mainFooter?: React.ReactNode;
|
|
48
|
+
/** Called when a token is selected. Call event.preventDefault() to prevent default behavior */
|
|
49
|
+
onTokenSelect?: (token: components["schemas"]["Token"], event: {
|
|
50
|
+
preventDefault: () => void;
|
|
51
|
+
}) => void;
|
|
52
|
+
/** Custom USD input value presets for fiat payment */
|
|
53
|
+
customUsdInputValues?: string[];
|
|
54
|
+
/** Whether to prefer using connected EOA wallet */
|
|
55
|
+
preferEoa?: boolean;
|
|
56
|
+
/** Minimum destination amount required */
|
|
57
|
+
minDestinationAmount?: number;
|
|
58
|
+
/** Custom header component */
|
|
59
|
+
header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
|
|
60
|
+
anyspendPrice: GetQuoteResponse | undefined;
|
|
61
|
+
isLoadingAnyspendPrice: boolean;
|
|
62
|
+
}) => React.JSX.Element;
|
|
63
|
+
/** Order type for the deposit */
|
|
64
|
+
orderType?: "hype_duel" | "custom_exact_in" | "swap";
|
|
65
|
+
/** Custom action label displayed on buttons */
|
|
66
|
+
actionLabel?: string;
|
|
67
|
+
/** Configuration for depositing to a custom contract.
|
|
68
|
+
* If provided, creates a custom_exact_in order that calls the contract.
|
|
69
|
+
* If not provided, creates a simple hype_duel order for direct deposits.
|
|
70
|
+
*/
|
|
71
|
+
depositContractConfig?: DepositContractConfig;
|
|
72
|
+
/** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
|
|
73
|
+
showChainSelection?: boolean;
|
|
74
|
+
/** Custom list of supported chains. If not provided, uses default chains */
|
|
75
|
+
supportedChains?: ChainConfig[];
|
|
76
|
+
/** Minimum pool size for filtering tokens (default: 1,000,000) */
|
|
77
|
+
minPoolSize?: number;
|
|
78
|
+
/** Custom title for chain selection step */
|
|
79
|
+
chainSelectionTitle?: string;
|
|
80
|
+
/** Custom description for chain selection step */
|
|
81
|
+
chainSelectionDescription?: string;
|
|
82
|
+
/** Number of top chains to show (default: 3) */
|
|
83
|
+
topChainsCount?: number;
|
|
84
|
+
/** Callback when close button is clicked */
|
|
85
|
+
onClose?: () => void;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
|
|
89
|
+
*
|
|
90
|
+
* @example
|
|
91
|
+
* // Simple deposit with chain selection
|
|
92
|
+
* <AnySpendDeposit
|
|
93
|
+
* recipientAddress={userAddress}
|
|
94
|
+
* destinationToken={myToken}
|
|
95
|
+
* destinationChainId={base.id}
|
|
96
|
+
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
97
|
+
* />
|
|
98
|
+
*
|
|
99
|
+
* @example
|
|
100
|
+
* // Skip chain selection by providing sourceTokenChainId
|
|
101
|
+
* <AnySpendDeposit
|
|
102
|
+
* recipientAddress={userAddress}
|
|
103
|
+
* destinationToken={myToken}
|
|
104
|
+
* destinationChainId={base.id}
|
|
105
|
+
* sourceTokenChainId={base.id}
|
|
106
|
+
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
107
|
+
* />
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* // Deposit with custom contract
|
|
111
|
+
* <AnySpendDeposit
|
|
112
|
+
* recipientAddress={userAddress}
|
|
113
|
+
* destinationToken={myToken}
|
|
114
|
+
* destinationChainId={base.id}
|
|
115
|
+
* depositContractConfig={{
|
|
116
|
+
* contractAddress: "0x...",
|
|
117
|
+
* functionName: "depositFor",
|
|
118
|
+
* }}
|
|
119
|
+
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
120
|
+
* />
|
|
121
|
+
*/
|
|
122
|
+
export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
|