@b3dotfun/sdk 0.0.44-alpha.1 → 0.0.44-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/anyspend/react/components/AnySpend.js +13 -14
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +14 -15
- package/dist/cjs/anyspend/react/components/common/OrderHistory.js +2 -2
- package/dist/cjs/anyspend/react/components/common/OrderHistoryItem.js +6 -3
- package/dist/cjs/anyspend/types/api.d.ts +176 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +14 -15
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +15 -16
- package/dist/esm/anyspend/react/components/common/OrderHistory.js +2 -2
- package/dist/esm/anyspend/react/components/common/OrderHistoryItem.js +8 -5
- package/dist/esm/anyspend/types/api.d.ts +176 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/types/api.d.ts +176 -0
- package/package.json +2 -1
- package/src/anyspend/react/components/AnySpend.tsx +21 -19
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +21 -21
- package/src/anyspend/react/components/common/OrderHistory.tsx +11 -11
- package/src/anyspend/react/components/common/OrderHistoryItem.tsx +124 -129
- package/src/anyspend/types/api.ts +176 -0
- package/dist/cjs/anyspend/react/components/common/ErrorSection.d.ts +0 -6
- package/dist/cjs/anyspend/react/components/common/ErrorSection.js +0 -12
- package/dist/esm/anyspend/react/components/common/ErrorSection.d.ts +0 -6
- package/dist/esm/anyspend/react/components/common/ErrorSection.js +0 -9
- package/dist/types/anyspend/react/components/common/ErrorSection.d.ts +0 -6
- package/src/anyspend/react/components/common/ErrorSection.tsx +0 -21
|
@@ -6,7 +6,7 @@ import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useP
|
|
|
6
6
|
import { cn } from "../../../shared/utils/cn.js";
|
|
7
7
|
import { formatTokenAmount } from "../../../shared/utils/number.js";
|
|
8
8
|
import invariant from "invariant";
|
|
9
|
-
import { ArrowDown, HistoryIcon } from "lucide-react";
|
|
9
|
+
import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
|
|
10
10
|
import { motion } from "motion/react";
|
|
11
11
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
12
12
|
import { toast } from "sonner";
|
|
@@ -16,7 +16,6 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
|
|
|
16
16
|
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
|
|
17
17
|
import { CryptoPaySection } from "./common/CryptoPaySection.js";
|
|
18
18
|
import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
|
|
19
|
-
import { ErrorSection } from "./common/ErrorSection.js";
|
|
20
19
|
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
|
|
21
20
|
import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
|
|
22
21
|
import { OrderHistory } from "./common/OrderHistory.js";
|
|
@@ -332,7 +331,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
332
331
|
? parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString()
|
|
333
332
|
: parseUnits(dstAmount.replace(/,/g, ""), selectedDstToken.decimals).toString();
|
|
334
333
|
const srcAmountOnrampInWei = parseUnits(srcAmountOnRamp.replace(/,/g, ""), USDC_BASE.decimals).toString();
|
|
335
|
-
const { anyspendQuote, isLoadingAnyspendQuote
|
|
334
|
+
const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(activeTab === "crypto"
|
|
336
335
|
? {
|
|
337
336
|
srcChain: selectedSrcChainId,
|
|
338
337
|
dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
|
|
@@ -462,38 +461,38 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
462
461
|
// Determine button state and text
|
|
463
462
|
const btnInfo = useMemo(() => {
|
|
464
463
|
if (activeInputAmountInWei === "0")
|
|
465
|
-
return { text: "Enter an amount", disable: true, error: false };
|
|
464
|
+
return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
466
465
|
if (isLoadingAnyspendQuote)
|
|
467
|
-
return { text: "Loading...", disable: true, error: false };
|
|
466
|
+
return { text: "Loading quote...", disable: true, error: false, loading: true };
|
|
468
467
|
if (!recipientAddress)
|
|
469
|
-
return { text: "Select recipient", disable: false, error: false };
|
|
468
|
+
return { text: "Select recipient", disable: false, error: false, loading: false };
|
|
470
469
|
if (isCreatingOrder || isCreatingOnrampOrder)
|
|
471
|
-
return { text: "Creating order...", disable: true, error: false };
|
|
470
|
+
return { text: "Creating order...", disable: true, error: false, loading: true };
|
|
472
471
|
if (!anyspendQuote || !anyspendQuote.success)
|
|
473
|
-
return { text: "
|
|
472
|
+
return { text: "No quote found", disable: true, error: false, loading: false };
|
|
474
473
|
if (activeTab === "crypto") {
|
|
475
474
|
// If no payment method selected, show "Choose payment method"
|
|
476
475
|
if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
477
|
-
return { text: "Choose payment method", disable: false, error: false };
|
|
476
|
+
return { text: "Choose payment method", disable: false, error: false, loading: false };
|
|
478
477
|
}
|
|
479
478
|
// If payment method selected, show appropriate action
|
|
480
479
|
if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
|
|
481
480
|
selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
|
|
482
|
-
return { text: "Swap", disable: false, error: false };
|
|
481
|
+
return { text: "Swap", disable: false, error: false, loading: false };
|
|
483
482
|
}
|
|
484
483
|
if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
|
|
485
|
-
return { text: "Continue to payment", disable: false, error: false };
|
|
484
|
+
return { text: "Continue to payment", disable: false, error: false, loading: false };
|
|
486
485
|
}
|
|
487
486
|
}
|
|
488
487
|
if (activeTab === "fiat") {
|
|
489
488
|
// If no fiat payment method selected, show "Select payment method"
|
|
490
489
|
if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
|
|
491
|
-
return { text: "Select payment method", disable: false, error: false };
|
|
490
|
+
return { text: "Select payment method", disable: false, error: false, loading: false };
|
|
492
491
|
}
|
|
493
492
|
// If payment method is selected, show "Buy"
|
|
494
|
-
return { text: "Buy", disable: false, error: false };
|
|
493
|
+
return { text: "Buy", disable: false, error: false, loading: false };
|
|
495
494
|
}
|
|
496
|
-
return { text: "Buy", disable: false, error: false };
|
|
495
|
+
return { text: "Buy", disable: false, error: false, loading: false };
|
|
497
496
|
}, [
|
|
498
497
|
activeInputAmountInWei,
|
|
499
498
|
isLoadingAnyspendQuote,
|
|
@@ -748,7 +747,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
748
747
|
}, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
|
|
749
748
|
setIsSrcInputDirty(false);
|
|
750
749
|
setDstAmount(value);
|
|
751
|
-
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }),
|
|
750
|
+
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), _jsxs(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] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
|
|
752
751
|
const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
|
|
753
752
|
setOrderId(orderId);
|
|
754
753
|
navigateToPanel(PanelView.ORDER_DETAILS, "forward");
|
|
@@ -12,12 +12,11 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
|
|
|
12
12
|
import { CryptoPaySection } from "./common/CryptoPaySection.js";
|
|
13
13
|
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
|
|
14
14
|
import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
|
|
15
|
-
import { ErrorSection } from "./common/ErrorSection.js";
|
|
16
15
|
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
|
|
17
16
|
import { OrderDetails } from "./common/OrderDetails.js";
|
|
18
17
|
import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
|
|
19
18
|
import { RecipientSelection } from "./common/RecipientSelection.js";
|
|
20
|
-
import { ArrowDown } from "lucide-react";
|
|
19
|
+
import { ArrowDown, Loader2 } from "lucide-react";
|
|
21
20
|
import { PanelOnramp } from "./common/PanelOnramp.js";
|
|
22
21
|
const SLIPPAGE_PERCENT = 3;
|
|
23
22
|
export const HYPE_TOKEN_DETAILS = {
|
|
@@ -30,7 +29,7 @@ export function AnySpendDepositHype(props) {
|
|
|
30
29
|
}
|
|
31
30
|
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, }) {
|
|
32
31
|
// Use shared flow hook
|
|
33
|
-
const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote,
|
|
32
|
+
const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
|
|
34
33
|
paymentType,
|
|
35
34
|
recipientAddress,
|
|
36
35
|
loadOrder,
|
|
@@ -44,17 +43,17 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
44
43
|
// Button state logic
|
|
45
44
|
const btnInfo = useMemo(() => {
|
|
46
45
|
if (activeInputAmountInWei === "0")
|
|
47
|
-
return { text: "Enter an amount", disable: true, error: false };
|
|
46
|
+
return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
48
47
|
if (isLoadingAnyspendQuote)
|
|
49
|
-
return { text: "Loading quote...", disable: true, error: false };
|
|
48
|
+
return { text: "Loading quote...", disable: true, error: false, loading: true };
|
|
50
49
|
if (isCreatingOrder || isCreatingOnrampOrder)
|
|
51
|
-
return { text: "Creating order...", disable: true, error: false };
|
|
50
|
+
return { text: "Creating order...", disable: true, error: false, loading: true };
|
|
52
51
|
if (!selectedRecipientAddress)
|
|
53
|
-
return { text: "Select recipient", disable: false, error: false };
|
|
52
|
+
return { text: "Select recipient", disable: false, error: false, loading: false };
|
|
54
53
|
if (!anyspendQuote || !anyspendQuote.success)
|
|
55
|
-
return { text: "Get quote error", disable: true, error: true };
|
|
54
|
+
return { text: "Get quote error", disable: true, error: true, loading: false };
|
|
56
55
|
if (!dstAmount)
|
|
57
|
-
return { text: "No quote available", disable: true, error: true };
|
|
56
|
+
return { text: "No quote available", disable: true, error: true, loading: false };
|
|
58
57
|
// Check minimum deposit amount (10 HYPE)
|
|
59
58
|
// Use the raw amount from the quote instead of the formatted display string
|
|
60
59
|
if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
|
|
@@ -62,22 +61,22 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
62
61
|
const decimals = anyspendQuote.data.currencyOut.currency.decimals;
|
|
63
62
|
const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
|
|
64
63
|
if (actualAmount < 10) {
|
|
65
|
-
return { text: "Minimum 10 HYPE deposit", disable: true, error: true };
|
|
64
|
+
return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
|
|
66
65
|
}
|
|
67
66
|
}
|
|
68
67
|
if (paymentType === "crypto") {
|
|
69
68
|
if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
|
|
70
|
-
return { text: "Choose payment method", disable: false, error: false };
|
|
69
|
+
return { text: "Choose payment method", disable: false, error: false, loading: false };
|
|
71
70
|
}
|
|
72
|
-
return { text: "Continue to deposit", disable: false, error: false };
|
|
71
|
+
return { text: "Continue to deposit", disable: false, error: false, loading: false };
|
|
73
72
|
}
|
|
74
73
|
if (paymentType === "fiat") {
|
|
75
74
|
if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
|
|
76
|
-
return { text: "Select payment method", disable: false, error: false };
|
|
75
|
+
return { text: "Select payment method", disable: false, error: false, loading: false };
|
|
77
76
|
}
|
|
78
|
-
return { text: "Buy", disable: false, error: false };
|
|
77
|
+
return { text: "Buy", disable: false, error: false, loading: false };
|
|
79
78
|
}
|
|
80
|
-
return { text: "Continue to deposit", disable: false, error: false };
|
|
79
|
+
return { text: "Continue to deposit", disable: false, error: false, loading: false };
|
|
81
80
|
}, [
|
|
82
81
|
activeInputAmountInWei,
|
|
83
82
|
isLoadingAnyspendQuote,
|
|
@@ -115,7 +114,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
115
114
|
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, 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), 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: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
116
115
|
setIsSrcInputDirty(false);
|
|
117
116
|
setSrcAmount(value);
|
|
118
|
-
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }) }), _jsx(
|
|
117
|
+
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_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] }));
|
|
119
118
|
// Handle crypto order creation
|
|
120
119
|
const handleCryptoOrder = async () => {
|
|
121
120
|
try {
|
|
@@ -7,9 +7,9 @@ import { OrderHistoryItem } from "./OrderHistoryItem.js";
|
|
|
7
7
|
export function OrderHistory({ mode, onBack, onSelectOrder }) {
|
|
8
8
|
const { address } = useAccountWallet();
|
|
9
9
|
const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = useAnyspendOrderHistory(address);
|
|
10
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-
|
|
10
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-8 flex w-full items-center gap-3", children: [_jsx(Button, { onClick: onBack, variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", children: _jsx(ArrowLeft, { className: "h-5 w-5" }) }), _jsx("div", { className: "flex-1", children: _jsx("h3", { className: "text-as-primary text-2xl font-bold", children: "Order History" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
|
|
11
11
|
refetchOrderHistory();
|
|
12
|
-
}, children: _jsx(RefreshCcw, { className: "text-as-
|
|
12
|
+
}, children: _jsx(RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? (_jsx("div", { className: "w-full space-y-3", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? (_jsx("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 text-center", children: _jsx("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : (_jsx("div", { className: "mb-12 w-full space-y-3", children: [...orderHistory]
|
|
13
13
|
.sort((a, b) => b.createdAt - a.createdAt)
|
|
14
14
|
.map(order => (_jsx(OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
|
|
15
15
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { ALL_CHAINS, getChainName, getStatusDisplay } from "../../../../anyspend/index.js";
|
|
3
|
-
import { Badge,
|
|
3
|
+
import { Badge, useIsMobile } from "../../../../global-account/react/index.js";
|
|
4
4
|
import { cn } from "../../../../shared/utils/index.js";
|
|
5
5
|
import { formatTokenAmount } from "../../../../shared/utils/number.js";
|
|
6
|
-
import {
|
|
6
|
+
import { getVendorDisplayName } from "../../../../shared/utils/payment.utils.js";
|
|
7
|
+
import { ArrowRight } from "lucide-react";
|
|
7
8
|
import TimeAgo from "react-timeago";
|
|
8
|
-
import { b3 } from "viem/chains";
|
|
9
9
|
export function OrderHistoryItem({ order, onSelectOrder, mode }) {
|
|
10
10
|
const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
|
|
11
11
|
const tournament = order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
|
|
@@ -19,9 +19,12 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }) {
|
|
|
19
19
|
: order.payload.expectedDstAmount;
|
|
20
20
|
const { text: orderStatusText, status: orderDisplayStatus } = getStatusDisplay(order);
|
|
21
21
|
const isSmallView = useIsMobile() || mode === "modal";
|
|
22
|
-
|
|
22
|
+
// Check if this is a one-click payment order
|
|
23
|
+
const isOneClickPayment = !!order.oneClickBuyUrl;
|
|
24
|
+
const vendorName = order.onrampMetadata?.vendor ? getVendorDisplayName(order.onrampMetadata.vendor) : null;
|
|
25
|
+
return (_jsxs("div", { className: cn("bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all", onSelectOrder && "cursor-pointer"), onClick: () => onSelectOrder?.(order.id), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn("text-xs font-semibold", orderDisplayStatus === "processing" && "text-yellow-600", orderDisplayStatus === "success" && "text-green-600", orderDisplayStatus === "failure" && "text-red-600"), children: orderStatusText }), isOneClickPayment && vendorName && (_jsx(Badge, { variant: "outline", className: "text-as-secondary px-2 py-0.5 text-[10px]", children: vendorName }))] }), _jsx("div", { className: "text-as-secondary text-[10px] font-medium uppercase tracking-wide", children: _jsx(TimeAgo, { date: new Date(order.createdAt) }) })] }), _jsxs("div", { className: cn("flex items-center", isSmallView ? "gap-2" : "gap-4"), children: [_jsxs("div", { className: cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: [_jsx("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.srcChain]?.logoUrl, alt: getChainName(order.srcChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.srcChain) })] })] })] }), _jsx(ArrowRight, { className: cn("text-as-secondary shrink-0 opacity-30", isSmallView ? "h-4 w-4" : "h-5 w-5") }), _jsx("div", { className: cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: nft ? (_jsxs(_Fragment, { children: [_jsx("img", { src: nft.imageUrl, alt: nft.name, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: nft.name }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) : tournament ? (_jsxs(_Fragment, { children: [_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: tournament.name }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [formatTokenAmount(actualDstAmount
|
|
23
26
|
? BigInt(actualDstAmount)
|
|
24
27
|
: expectedDstAmount
|
|
25
28
|
? BigInt(expectedDstAmount)
|
|
26
|
-
: BigInt(0), dstToken.decimals), " ", dstToken.symbol] })
|
|
29
|
+
: BigInt(0), dstToken.decimals), " ", dstToken.symbol] }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) })] })] }, `anyspend-${order.id}`));
|
|
27
30
|
}
|