@b3dotfun/sdk 0.0.33-alpha.5 → 0.0.33-alpha.7
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 +1 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +1 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts +0 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +5 -36
- package/dist/cjs/anyspend/react/components/common/InsufficientDepositPayment.d.ts +12 -0
- package/dist/cjs/anyspend/react/components/common/InsufficientDepositPayment.js +25 -0
- package/dist/cjs/anyspend/react/components/common/OrderDetails.d.ts +3 -3
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +40 -36
- package/dist/cjs/anyspend/react/components/common/OrderStatus.js +1 -1
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -3
- package/dist/cjs/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +6 -6
- package/dist/cjs/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +54 -10
- package/dist/cjs/anyspend/react/hooks/useAnyspendQuote.js +1 -1
- package/dist/cjs/anyspend/types/api.d.ts +130 -14
- package/dist/cjs/anyspend/utils/chain.js +1 -1
- package/dist/cjs/anyspend/utils/format.js +1 -0
- package/dist/cjs/anyspend/utils/orderPayload.js +7 -0
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +1 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts +0 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +6 -37
- package/dist/esm/anyspend/react/components/common/InsufficientDepositPayment.d.ts +12 -0
- package/dist/esm/anyspend/react/components/common/InsufficientDepositPayment.js +22 -0
- package/dist/esm/anyspend/react/components/common/OrderDetails.d.ts +3 -3
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +40 -36
- package/dist/esm/anyspend/react/components/common/OrderStatus.js +1 -1
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -3
- package/dist/esm/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +6 -6
- package/dist/esm/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +54 -10
- package/dist/esm/anyspend/react/hooks/useAnyspendQuote.js +1 -1
- package/dist/esm/anyspend/types/api.d.ts +130 -14
- package/dist/esm/anyspend/utils/chain.js +1 -1
- package/dist/esm/anyspend/utils/format.js +1 -0
- package/dist/esm/anyspend/utils/orderPayload.js +7 -0
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +0 -1
- package/dist/types/anyspend/react/components/common/InsufficientDepositPayment.d.ts +12 -0
- package/dist/types/anyspend/react/components/common/OrderDetails.d.ts +3 -3
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +3 -3
- package/dist/types/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts +6 -6
- package/dist/types/anyspend/react/hooks/useAnyspendOrderHistory.d.ts +54 -10
- package/dist/types/anyspend/types/api.d.ts +130 -14
- package/dist/types/global-account/react/stores/useModalStore.d.ts +0 -2
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +1 -1
- package/src/anyspend/react/components/AnySpendCustom.tsx +1 -1
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +5 -43
- package/src/anyspend/react/components/common/InsufficientDepositPayment.tsx +144 -0
- package/src/anyspend/react/components/common/OrderDetails.tsx +85 -64
- package/src/anyspend/react/components/common/OrderStatus.tsx +1 -1
- package/src/anyspend/react/hooks/useAnyspendQuote.ts +1 -1
- package/src/anyspend/types/api.ts +131 -11
- package/src/anyspend/utils/chain.ts +1 -1
- package/src/anyspend/utils/format.ts +1 -0
- package/src/anyspend/utils/orderPayload.ts +7 -0
- package/src/global-account/react/stores/useModalStore.ts +0 -2
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
ALL_CHAINS,
|
|
5
|
+
getChainName,
|
|
6
|
+
getPaymentUrl,
|
|
7
|
+
RELAY_ETH_ADDRESS,
|
|
8
|
+
RELAY_SOLANA_MAINNET_CHAIN_ID,
|
|
9
|
+
} from "@b3dotfun/sdk/anyspend";
|
|
10
|
+
import { components } from "@b3dotfun/sdk/anyspend/types/api";
|
|
11
|
+
import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
|
|
12
|
+
import { cn } from "@b3dotfun/sdk/shared/utils";
|
|
13
|
+
import { b3 } from "viem/chains";
|
|
14
|
+
|
|
15
|
+
import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
|
|
16
|
+
import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
|
|
17
|
+
import { ChevronRight, Copy, Loader2 } from "lucide-react";
|
|
18
|
+
import { motion } from "motion/react";
|
|
19
|
+
import { QRCodeSVG } from "qrcode.react";
|
|
20
|
+
import { toast } from "sonner";
|
|
21
|
+
|
|
22
|
+
interface InsufficientDepositPaymentProps {
|
|
23
|
+
order: components["schemas"]["Order"];
|
|
24
|
+
srcToken: components["schemas"]["Token"];
|
|
25
|
+
depositDeficit: bigint;
|
|
26
|
+
phantomWalletAddress: string | null;
|
|
27
|
+
txLoading: boolean;
|
|
28
|
+
isSwitchingOrExecuting: boolean;
|
|
29
|
+
onPayment: () => Promise<void>;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function InsufficientDepositPayment({
|
|
33
|
+
order,
|
|
34
|
+
srcToken,
|
|
35
|
+
depositDeficit,
|
|
36
|
+
phantomWalletAddress,
|
|
37
|
+
txLoading,
|
|
38
|
+
isSwitchingOrExecuting,
|
|
39
|
+
onPayment,
|
|
40
|
+
}: InsufficientDepositPaymentProps) {
|
|
41
|
+
const depositDeficitAmount = formatUnits(depositDeficit.toString(), srcToken.decimals);
|
|
42
|
+
return (
|
|
43
|
+
<div className="insufficient-deposit-payment relative flex w-full flex-1 flex-col">
|
|
44
|
+
<div className="flex flex-col gap-1">
|
|
45
|
+
<span className="insufficient-deposit-payment-text text-as-primary/50">Please send remaining</span>
|
|
46
|
+
<div className="flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0">
|
|
47
|
+
<CopyToClipboard
|
|
48
|
+
text={depositDeficitAmount}
|
|
49
|
+
onCopy={() => {
|
|
50
|
+
toast.success("Copied to clipboard");
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
<div className="flex items-center gap-2">
|
|
54
|
+
<strong className="border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl">
|
|
55
|
+
{depositDeficitAmount} {srcToken.symbol}
|
|
56
|
+
</strong>
|
|
57
|
+
<Copy className="text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" />
|
|
58
|
+
</div>
|
|
59
|
+
</CopyToClipboard>
|
|
60
|
+
|
|
61
|
+
<Badge variant="outline" className="flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm">
|
|
62
|
+
on {getChainName(order.srcChain)}
|
|
63
|
+
<img
|
|
64
|
+
src={ALL_CHAINS[order.srcChain].logoUrl}
|
|
65
|
+
alt={getChainName(order.srcChain)}
|
|
66
|
+
className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
|
|
67
|
+
/>
|
|
68
|
+
</Badge>
|
|
69
|
+
</div>
|
|
70
|
+
<span className={"text-as-primary/50 mb-1 mt-2"}> to the address:</span>
|
|
71
|
+
</div>
|
|
72
|
+
<CopyToClipboard
|
|
73
|
+
text={order.globalAddress}
|
|
74
|
+
onCopy={() => {
|
|
75
|
+
toast.success("Copied to clipboard");
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
<div className="payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200">
|
|
79
|
+
<div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm">
|
|
80
|
+
{order.globalAddress}
|
|
81
|
+
</div>
|
|
82
|
+
<Copy className="group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" />
|
|
83
|
+
</div>
|
|
84
|
+
</CopyToClipboard>
|
|
85
|
+
|
|
86
|
+
<div className="payment-buttons mt-4 flex w-full flex-col items-center gap-2">
|
|
87
|
+
<ShinyButton
|
|
88
|
+
accentColor={"hsl(var(--as-brand))"}
|
|
89
|
+
textColor="text-white"
|
|
90
|
+
className="flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0"
|
|
91
|
+
disabled={txLoading || isSwitchingOrExecuting}
|
|
92
|
+
onClick={onPayment}
|
|
93
|
+
>
|
|
94
|
+
{txLoading ? (
|
|
95
|
+
<>
|
|
96
|
+
Transaction Pending
|
|
97
|
+
<Loader2 className="ml-2 h-5 w-5 animate-spin" />
|
|
98
|
+
</>
|
|
99
|
+
) : (
|
|
100
|
+
<>
|
|
101
|
+
<span className="whitespace-nowrap pl-4 text-lg md:text-sm">
|
|
102
|
+
{order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
|
|
103
|
+
? "Pay from Phantom Wallet"
|
|
104
|
+
: "Pay from Connected Wallet"}
|
|
105
|
+
</span>
|
|
106
|
+
<ChevronRight className="h-4 w-4" />
|
|
107
|
+
</>
|
|
108
|
+
)}
|
|
109
|
+
</ShinyButton>
|
|
110
|
+
|
|
111
|
+
<div>Or</div>
|
|
112
|
+
|
|
113
|
+
<motion.div
|
|
114
|
+
initial={{ opacity: 0, filter: "blur(10px)" }}
|
|
115
|
+
animate={{ opacity: 1, filter: "blur(0px)" }}
|
|
116
|
+
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
117
|
+
className="flex w-full items-center justify-evenly gap-4"
|
|
118
|
+
>
|
|
119
|
+
<div className="qr-code flex flex-col items-center rounded-lg pb-3">
|
|
120
|
+
<QRCodeSVG
|
|
121
|
+
value={getPaymentUrl(
|
|
122
|
+
order.globalAddress,
|
|
123
|
+
BigInt(depositDeficit),
|
|
124
|
+
order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
|
|
125
|
+
order.srcChain,
|
|
126
|
+
srcToken?.decimals,
|
|
127
|
+
)}
|
|
128
|
+
className="max-w-[200px]"
|
|
129
|
+
/>
|
|
130
|
+
<div className="mt-3 flex items-center justify-center gap-2 text-sm">
|
|
131
|
+
<span className="label-style text-as-brand/70 text-sm">Scan with</span>
|
|
132
|
+
<TextLoop interval={3}>
|
|
133
|
+
<WalletMetamask className="h-5 w-5" variant="branded" />
|
|
134
|
+
<WalletCoinbase className="h-5 w-5" variant="branded" />
|
|
135
|
+
<WalletPhantom className="h-5 w-5" variant="branded" />
|
|
136
|
+
<WalletTrust className="h-5 w-5" variant="branded" />
|
|
137
|
+
</TextLoop>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</motion.div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
@@ -51,6 +51,7 @@ import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
|
|
|
51
51
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
|
|
52
52
|
import ConnectWalletPayment from "./ConnectWalletPayment";
|
|
53
53
|
import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
|
|
54
|
+
import { InsufficientDepositPayment } from "./InsufficientDepositPayment";
|
|
54
55
|
import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
|
|
55
56
|
import PaymentVendorUI from "./PaymentVendorUI";
|
|
56
57
|
import { TransferCryptoDetails } from "./TransferCryptoDetails";
|
|
@@ -58,10 +59,10 @@ import { TransferCryptoDetails } from "./TransferCryptoDetails";
|
|
|
58
59
|
interface OrderDetailsProps {
|
|
59
60
|
mode?: "modal" | "page";
|
|
60
61
|
order: components["schemas"]["Order"];
|
|
61
|
-
depositTxs: components["schemas"]["DepositTx"][]
|
|
62
|
-
|
|
62
|
+
depositTxs: components["schemas"]["DepositTx"][];
|
|
63
|
+
relayTxs: components["schemas"]["RelayTx"][];
|
|
63
64
|
executeTx: components["schemas"]["ExecuteTx"] | null;
|
|
64
|
-
refundTxs: components["schemas"]["RefundTx"][]
|
|
65
|
+
refundTxs: components["schemas"]["RefundTx"][];
|
|
65
66
|
cryptoPaymentMethod?: CryptoPaymentMethodType; // Now optional since we read from URL
|
|
66
67
|
onBack?: () => void;
|
|
67
68
|
disableUrlParamManagement?: boolean; // When true, will not modify URL parameters
|
|
@@ -105,6 +106,9 @@ function getOrderSuccessText({
|
|
|
105
106
|
}
|
|
106
107
|
actionText = order.metadata.action || `executed contract`;
|
|
107
108
|
return `Successfully ${actionText}`;
|
|
109
|
+
case "hype_duel":
|
|
110
|
+
actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
|
|
111
|
+
return `Successfully ${actionText} to ${recipient}`;
|
|
108
112
|
default:
|
|
109
113
|
throw new Error("Invalid order type");
|
|
110
114
|
}
|
|
@@ -199,7 +203,7 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
199
203
|
mode = "modal",
|
|
200
204
|
order,
|
|
201
205
|
depositTxs,
|
|
202
|
-
|
|
206
|
+
relayTxs,
|
|
203
207
|
executeTx,
|
|
204
208
|
refundTxs,
|
|
205
209
|
cryptoPaymentMethod,
|
|
@@ -248,22 +252,42 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
248
252
|
return roundTokenAmount(formattedSrcAmount);
|
|
249
253
|
}, [order.srcAmount, srcToken]);
|
|
250
254
|
|
|
255
|
+
// Calculate deposit amounts - moved here to be used in useCallback hooks
|
|
256
|
+
const depositedAmount = useMemo(() => {
|
|
257
|
+
return depositTxs ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0)) : BigInt(0);
|
|
258
|
+
}, [depositTxs]);
|
|
259
|
+
|
|
260
|
+
const depositDeficit = useMemo(() => {
|
|
261
|
+
return BigInt(order.srcAmount) - depositedAmount;
|
|
262
|
+
}, [order.srcAmount, depositedAmount]);
|
|
263
|
+
|
|
264
|
+
const depositEnoughAmount = useMemo(() => {
|
|
265
|
+
return depositDeficit <= BigInt(0);
|
|
266
|
+
}, [depositDeficit]);
|
|
267
|
+
|
|
268
|
+
const formattedDepositDeficit = useMemo(() => {
|
|
269
|
+
return formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
|
|
270
|
+
}, [depositDeficit, srcToken.decimals]);
|
|
271
|
+
|
|
251
272
|
// Unified payment handler for both EOA and AA wallets
|
|
252
273
|
const handleUnifiedPaymentProcess = useCallback(async () => {
|
|
253
274
|
let txData: `0x${string}` | undefined;
|
|
254
275
|
let value: bigint;
|
|
255
276
|
let to: `0x${string}`;
|
|
256
277
|
|
|
278
|
+
// Use the existing depositDeficit calculation to determine amount to send
|
|
279
|
+
const amountToSend = depositDeficit > BigInt(0) ? depositDeficit : BigInt(order.srcAmount);
|
|
280
|
+
|
|
257
281
|
if (isNativeToken(order.srcTokenAddress)) {
|
|
258
282
|
// Native token transfer
|
|
259
283
|
to = order.globalAddress as `0x${string}`;
|
|
260
|
-
value =
|
|
284
|
+
value = amountToSend;
|
|
261
285
|
} else {
|
|
262
286
|
// ERC20 token transfer - encode the transfer function call using proper ABI
|
|
263
287
|
txData = encodeFunctionData({
|
|
264
288
|
abi: erc20Abi,
|
|
265
289
|
functionName: "transfer",
|
|
266
|
-
args: [order.globalAddress as `0x${string}`,
|
|
290
|
+
args: [order.globalAddress as `0x${string}`, amountToSend],
|
|
267
291
|
});
|
|
268
292
|
to = order.srcTokenAddress as `0x${string}`;
|
|
269
293
|
value = BigInt(0);
|
|
@@ -274,13 +298,15 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
274
298
|
if (txHash) {
|
|
275
299
|
setTxHash(txHash as `0x${string}`);
|
|
276
300
|
}
|
|
277
|
-
}, [order, switchChainAndExecuteWithEOA]);
|
|
301
|
+
}, [order, switchChainAndExecuteWithEOA, depositDeficit]);
|
|
278
302
|
|
|
279
303
|
// Main payment handler that triggers chain switch and payment
|
|
280
304
|
const handlePayment = async () => {
|
|
281
305
|
console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
|
|
282
306
|
if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
|
|
283
|
-
|
|
307
|
+
// Use the existing depositDeficit calculation to determine amount to send
|
|
308
|
+
const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
|
|
309
|
+
await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
|
|
284
310
|
} else {
|
|
285
311
|
// Use unified payment process for both EOA and AA wallets
|
|
286
312
|
await handleUnifiedPaymentProcess();
|
|
@@ -364,13 +390,6 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
364
390
|
? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
|
|
365
391
|
: undefined;
|
|
366
392
|
|
|
367
|
-
const depositedAmount = depositTxs
|
|
368
|
-
? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
|
|
369
|
-
: BigInt(0);
|
|
370
|
-
const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
|
|
371
|
-
const depositEnoughAmount = depositDeficit <= BigInt(0);
|
|
372
|
-
const formattedDepositDeficit = formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
|
|
373
|
-
|
|
374
393
|
const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
|
|
375
394
|
|
|
376
395
|
const initiatePhantomTransfer = async (amountLamports: string, tokenAddress: string, recipientAddress: string) => {
|
|
@@ -540,7 +559,7 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
540
559
|
}
|
|
541
560
|
};
|
|
542
561
|
|
|
543
|
-
if (refundTxs) {
|
|
562
|
+
if (refundTxs.length > 0) {
|
|
544
563
|
return (
|
|
545
564
|
<>
|
|
546
565
|
<OrderDetailsCollapsible
|
|
@@ -656,13 +675,19 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
656
675
|
/>
|
|
657
676
|
))
|
|
658
677
|
: null}
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
678
|
+
{relayTxs
|
|
679
|
+
? relayTxs.map(relayTx => (
|
|
680
|
+
<TransactionDetails
|
|
681
|
+
key={relayTx.txHash}
|
|
682
|
+
title="Processed Transaction"
|
|
683
|
+
chainId={relayTx.chain}
|
|
684
|
+
tx={relayTx}
|
|
685
|
+
delay={0.5}
|
|
686
|
+
isProcessing={false}
|
|
687
|
+
/>
|
|
688
|
+
))
|
|
689
|
+
: null}
|
|
690
|
+
|
|
666
691
|
<TransactionDetails
|
|
667
692
|
title={
|
|
668
693
|
order.type === "swap"
|
|
@@ -736,7 +761,7 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
736
761
|
);
|
|
737
762
|
}
|
|
738
763
|
|
|
739
|
-
if (
|
|
764
|
+
if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
|
|
740
765
|
return (
|
|
741
766
|
<>
|
|
742
767
|
<OrderDetailsCollapsible
|
|
@@ -775,59 +800,42 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
775
800
|
/>
|
|
776
801
|
))
|
|
777
802
|
: null}
|
|
778
|
-
{
|
|
779
|
-
|
|
803
|
+
{relayTxs.map(relayTx => (
|
|
804
|
+
<TransactionDetails
|
|
805
|
+
title="Processed Transaction"
|
|
806
|
+
chainId={relayTx.chain}
|
|
807
|
+
isProcessing={false}
|
|
808
|
+
tx={relayTx}
|
|
809
|
+
delay={0.5}
|
|
810
|
+
/>
|
|
811
|
+
))}
|
|
812
|
+
{order.status === "executing" && (
|
|
780
813
|
<TransactionDetails
|
|
781
814
|
title={
|
|
782
815
|
order.type === "swap"
|
|
783
|
-
? "
|
|
816
|
+
? "Processing Swap"
|
|
784
817
|
: order.type === "mint_nft"
|
|
785
|
-
? "
|
|
818
|
+
? "Minting NFT"
|
|
786
819
|
: order.type === "join_tournament"
|
|
787
|
-
? "
|
|
820
|
+
? "Joining Tournament"
|
|
788
821
|
: order.type === "fund_tournament"
|
|
789
|
-
? "
|
|
790
|
-
:
|
|
822
|
+
? "Funding Tournament"
|
|
823
|
+
: order.type === "hype_duel"
|
|
824
|
+
? "Depositing Hype Duel"
|
|
825
|
+
: "Processing Bridge"
|
|
791
826
|
}
|
|
792
|
-
chainId={order.
|
|
793
|
-
isProcessing={
|
|
794
|
-
tx={
|
|
795
|
-
delay={
|
|
827
|
+
chainId={order.dstChain}
|
|
828
|
+
isProcessing={true}
|
|
829
|
+
tx={null}
|
|
830
|
+
delay={1}
|
|
796
831
|
/>
|
|
797
|
-
) : (
|
|
798
|
-
<>
|
|
799
|
-
<TransactionDetails
|
|
800
|
-
title="Processed Transaction"
|
|
801
|
-
chainId={order.srcChain}
|
|
802
|
-
isProcessing={false}
|
|
803
|
-
tx={relayTx}
|
|
804
|
-
delay={0.5}
|
|
805
|
-
/>
|
|
806
|
-
<TransactionDetails
|
|
807
|
-
title={
|
|
808
|
-
order.type === "swap"
|
|
809
|
-
? "Processing Swap"
|
|
810
|
-
: order.type === "mint_nft"
|
|
811
|
-
? "Minting NFT"
|
|
812
|
-
: order.type === "join_tournament"
|
|
813
|
-
? "Joining Tournament"
|
|
814
|
-
: order.type === "fund_tournament"
|
|
815
|
-
? "Funding Tournament"
|
|
816
|
-
: "Processing Bridge"
|
|
817
|
-
}
|
|
818
|
-
chainId={order.dstChain}
|
|
819
|
-
isProcessing={true}
|
|
820
|
-
tx={executeTx}
|
|
821
|
-
delay={1}
|
|
822
|
-
/>
|
|
823
|
-
</>
|
|
824
832
|
)}
|
|
825
833
|
</div>
|
|
826
834
|
</AccordionContent>
|
|
827
835
|
</AccordionItem>
|
|
828
836
|
</Accordion>
|
|
829
837
|
|
|
830
|
-
<div className="flex w-full flex-col gap-8">
|
|
838
|
+
{/* <div className="flex w-full flex-col gap-8">
|
|
831
839
|
<Button variant="link" asChild>
|
|
832
840
|
<a
|
|
833
841
|
href={getExplorerTxUrl(order.dstChain, relayTx.txHash)}
|
|
@@ -846,7 +854,7 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
846
854
|
<ExternalLink className="ml-2 h-4 w-4" />
|
|
847
855
|
</a>
|
|
848
856
|
</Button>
|
|
849
|
-
</div>
|
|
857
|
+
</div> */}
|
|
850
858
|
|
|
851
859
|
{order.type === "join_tournament" && order.status === "executed" && (
|
|
852
860
|
<ShinyButton
|
|
@@ -962,6 +970,19 @@ export const OrderDetails = memo(function OrderDetails({
|
|
|
962
970
|
</AccordionItem>
|
|
963
971
|
</Accordion>
|
|
964
972
|
|
|
973
|
+
{/* Show payment UI when deposit is not enough and order is not expired */}
|
|
974
|
+
{!depositEnoughAmount && order.status !== "expired" && (
|
|
975
|
+
<InsufficientDepositPayment
|
|
976
|
+
order={order}
|
|
977
|
+
srcToken={srcToken}
|
|
978
|
+
depositDeficit={depositDeficit}
|
|
979
|
+
phantomWalletAddress={phantomWalletAddress}
|
|
980
|
+
txLoading={txLoading}
|
|
981
|
+
isSwitchingOrExecuting={isSwitchingOrExecuting}
|
|
982
|
+
onPayment={handlePayment}
|
|
983
|
+
/>
|
|
984
|
+
)}
|
|
985
|
+
|
|
965
986
|
{/* <DelayedSupportMessage /> */}
|
|
966
987
|
</>
|
|
967
988
|
);
|
|
@@ -41,7 +41,7 @@ export const OrderStatus = memo(function OrderStatus({
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
if (["relay", "sending_token_from_vault"].includes(order.status)) {
|
|
44
|
+
if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
|
|
45
45
|
return <StepProgress steps={paymentSteps} currentStepIndex={1} />;
|
|
46
46
|
}
|
|
47
47
|
|
|
@@ -27,7 +27,7 @@ export function useAnyspendQuote(req: GetQuoteRequest): UseAnyspendQuoteResult {
|
|
|
27
27
|
req.srcTokenAddress &&
|
|
28
28
|
req.dstTokenAddress &&
|
|
29
29
|
BigInt(
|
|
30
|
-
req.type === "swap"
|
|
30
|
+
req.type === "swap" || req.type === "hype_duel"
|
|
31
31
|
? req.amount
|
|
32
32
|
: req.type === "mint_nft"
|
|
33
33
|
? req.price
|
|
@@ -418,18 +418,23 @@ export interface paths {
|
|
|
418
418
|
* }
|
|
419
419
|
* ]
|
|
420
420
|
*/
|
|
421
|
-
depositTxs: components["schemas"]["DepositTx"][]
|
|
422
|
-
/**
|
|
423
|
-
*
|
|
424
|
-
*
|
|
425
|
-
*
|
|
426
|
-
*
|
|
427
|
-
*
|
|
428
|
-
*
|
|
429
|
-
|
|
421
|
+
depositTxs: components["schemas"]["DepositTx"][];
|
|
422
|
+
/**
|
|
423
|
+
* @description Cross-chain relay transactions
|
|
424
|
+
* @example [
|
|
425
|
+
* {
|
|
426
|
+
* "orderId": "5392f7a7-d472-4d6b-9848-bd07117fb82d",
|
|
427
|
+
* "chain": 8453,
|
|
428
|
+
* "txHash": "0x9df917e14bb089f74763d1d2662761d75c97a5a068b8a9e411c3d384c9c40d19",
|
|
429
|
+
* "status": "success",
|
|
430
|
+
* "createdAt": 1752505817654
|
|
431
|
+
* }
|
|
432
|
+
* ]
|
|
433
|
+
*/
|
|
434
|
+
relayTxs: components["schemas"]["RelayTx"][];
|
|
430
435
|
executeTx: components["schemas"]["ExecuteTx"] | null;
|
|
431
436
|
/** @description Refund transactions if order failed */
|
|
432
|
-
refundTxs: components["schemas"]["RefundTx"][]
|
|
437
|
+
refundTxs: components["schemas"]["RefundTx"][];
|
|
433
438
|
};
|
|
434
439
|
/** @example 200 */
|
|
435
440
|
statusCode: number;
|
|
@@ -468,7 +473,7 @@ export interface paths {
|
|
|
468
473
|
"/orders/quote": {
|
|
469
474
|
/**
|
|
470
475
|
* Get anyspend quote
|
|
471
|
-
* @description Retrieves a quote to swap or
|
|
476
|
+
* @description Retrieves a quote to swap, execute contract, or participate in HypeDuel
|
|
472
477
|
*/
|
|
473
478
|
post: {
|
|
474
479
|
requestBody: {
|
|
@@ -597,6 +602,43 @@ export interface paths {
|
|
|
597
602
|
onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
|
|
598
603
|
contractAddress: string;
|
|
599
604
|
fundAmount: string;
|
|
605
|
+
}
|
|
606
|
+
| {
|
|
607
|
+
/**
|
|
608
|
+
* @description Order type for HypeDuel
|
|
609
|
+
* @enum {string}
|
|
610
|
+
*/
|
|
611
|
+
type: "hype_duel";
|
|
612
|
+
/**
|
|
613
|
+
* @description Source chain ID
|
|
614
|
+
* @example 1
|
|
615
|
+
*/
|
|
616
|
+
srcChain: number;
|
|
617
|
+
/**
|
|
618
|
+
* @description Destination chain ID
|
|
619
|
+
* @example 8453
|
|
620
|
+
*/
|
|
621
|
+
dstChain: number;
|
|
622
|
+
/**
|
|
623
|
+
* @description Source token contract address
|
|
624
|
+
* @example 0x0000000000000000000000000000000000000000
|
|
625
|
+
*/
|
|
626
|
+
srcTokenAddress: string;
|
|
627
|
+
/**
|
|
628
|
+
* @description Destination token contract address
|
|
629
|
+
* @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
|
|
630
|
+
*/
|
|
631
|
+
dstTokenAddress: string;
|
|
632
|
+
/**
|
|
633
|
+
* @description Amount to quote
|
|
634
|
+
* @example 1000000000000000000
|
|
635
|
+
*/
|
|
636
|
+
amount: string;
|
|
637
|
+
/**
|
|
638
|
+
* @description Optional onramp vendor
|
|
639
|
+
* @enum {string}
|
|
640
|
+
*/
|
|
641
|
+
onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
|
|
600
642
|
};
|
|
601
643
|
};
|
|
602
644
|
};
|
|
@@ -1043,6 +1085,19 @@ export interface components {
|
|
|
1043
1085
|
*/
|
|
1044
1086
|
actualDstAmount: string | null;
|
|
1045
1087
|
};
|
|
1088
|
+
/** @description HypeDuel-specific payload */
|
|
1089
|
+
HypeDuelPayload: {
|
|
1090
|
+
/**
|
|
1091
|
+
* @description Expected amount of destination tokens
|
|
1092
|
+
* @example 990000
|
|
1093
|
+
*/
|
|
1094
|
+
expectedDstAmount: string;
|
|
1095
|
+
/**
|
|
1096
|
+
* @description Actual received amount (null for new orders)
|
|
1097
|
+
* @example 990000
|
|
1098
|
+
*/
|
|
1099
|
+
actualDstAmount: string | null;
|
|
1100
|
+
};
|
|
1046
1101
|
/** @description Custom execution payload */
|
|
1047
1102
|
CustomPayload: {
|
|
1048
1103
|
/**
|
|
@@ -1121,6 +1176,11 @@ export interface components {
|
|
|
1121
1176
|
srcToken: components["schemas"]["Token"];
|
|
1122
1177
|
dstToken: components["schemas"]["Token"];
|
|
1123
1178
|
};
|
|
1179
|
+
/** @description HypeDuel metadata for display purposes */
|
|
1180
|
+
HypeDuelMetadata: {
|
|
1181
|
+
srcToken: components["schemas"]["Token"];
|
|
1182
|
+
dstToken: components["schemas"]["Token"];
|
|
1183
|
+
};
|
|
1124
1184
|
/** @description Custom metadata for display purposes */
|
|
1125
1185
|
CustomMetadata: {
|
|
1126
1186
|
srcToken: components["schemas"]["Token"];
|
|
@@ -1197,6 +1257,7 @@ export interface components {
|
|
|
1197
1257
|
| "expired"
|
|
1198
1258
|
| "sending_token_from_vault"
|
|
1199
1259
|
| "relay"
|
|
1260
|
+
| "executing"
|
|
1200
1261
|
| "executed"
|
|
1201
1262
|
| "refunding"
|
|
1202
1263
|
| "refunded"
|
|
@@ -1239,6 +1300,15 @@ export interface components {
|
|
|
1239
1300
|
payload: components["schemas"]["SwapPayload"];
|
|
1240
1301
|
metadata: components["schemas"]["SwapMetadata"];
|
|
1241
1302
|
};
|
|
1303
|
+
HypeDuelOrder: components["schemas"]["BaseOrder"] & {
|
|
1304
|
+
/**
|
|
1305
|
+
* @description Order type
|
|
1306
|
+
* @enum {string}
|
|
1307
|
+
*/
|
|
1308
|
+
type: "hype_duel";
|
|
1309
|
+
payload: components["schemas"]["HypeDuelPayload"];
|
|
1310
|
+
metadata: components["schemas"]["HypeDuelMetadata"];
|
|
1311
|
+
};
|
|
1242
1312
|
CustomOrder: components["schemas"]["BaseOrder"] & {
|
|
1243
1313
|
/**
|
|
1244
1314
|
* @description Order type
|
|
@@ -1277,6 +1347,7 @@ export interface components {
|
|
|
1277
1347
|
};
|
|
1278
1348
|
Order:
|
|
1279
1349
|
| components["schemas"]["SwapOrder"]
|
|
1350
|
+
| components["schemas"]["HypeDuelOrder"]
|
|
1280
1351
|
| components["schemas"]["CustomOrder"]
|
|
1281
1352
|
| components["schemas"]["MintNftOrder"]
|
|
1282
1353
|
| components["schemas"]["JoinTournamentOrder"]
|
|
@@ -1329,6 +1400,54 @@ export interface components {
|
|
|
1329
1400
|
*/
|
|
1330
1401
|
creatorAddress?: string;
|
|
1331
1402
|
};
|
|
1403
|
+
/** @description HypeDuel order request */
|
|
1404
|
+
HypeDuelOrderRequest: {
|
|
1405
|
+
/**
|
|
1406
|
+
* @description Order type
|
|
1407
|
+
* @enum {string}
|
|
1408
|
+
*/
|
|
1409
|
+
type: "hype_duel";
|
|
1410
|
+
/**
|
|
1411
|
+
* @description Address to receive the destination tokens
|
|
1412
|
+
* @example 0x58241893EF1f86C9fBd8109Cd44Ea961fDb474e1
|
|
1413
|
+
*/
|
|
1414
|
+
recipientAddress: string;
|
|
1415
|
+
/**
|
|
1416
|
+
* @description Source chain ID
|
|
1417
|
+
* @example 1
|
|
1418
|
+
*/
|
|
1419
|
+
srcChain: number;
|
|
1420
|
+
/**
|
|
1421
|
+
* @description Destination chain ID
|
|
1422
|
+
* @example 8453
|
|
1423
|
+
*/
|
|
1424
|
+
dstChain: number;
|
|
1425
|
+
/**
|
|
1426
|
+
* @description Source token contract address
|
|
1427
|
+
* @example 0xA0b86a33E6441E8A91DEF8f5663ACb4C9B4a1234
|
|
1428
|
+
*/
|
|
1429
|
+
srcTokenAddress: string;
|
|
1430
|
+
/**
|
|
1431
|
+
* @description Destination token contract address
|
|
1432
|
+
* @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
|
|
1433
|
+
*/
|
|
1434
|
+
dstTokenAddress: string;
|
|
1435
|
+
/**
|
|
1436
|
+
* @description Amount of source tokens for HypeDuel
|
|
1437
|
+
* @example 1000000
|
|
1438
|
+
*/
|
|
1439
|
+
srcAmount: string;
|
|
1440
|
+
payload: components["schemas"]["HypeDuelPayload"];
|
|
1441
|
+
metadata: components["schemas"]["HypeDuelMetadata"];
|
|
1442
|
+
/** @description Optional partner identifier */
|
|
1443
|
+
partnerId?: string;
|
|
1444
|
+
onramp?: components["schemas"]["Onramp"];
|
|
1445
|
+
/**
|
|
1446
|
+
* @description Optional address of the order creator
|
|
1447
|
+
* @example 0x58241893EF1f86C9fBd8109Cd44Ea961fDb474e1
|
|
1448
|
+
*/
|
|
1449
|
+
creatorAddress?: string;
|
|
1450
|
+
};
|
|
1332
1451
|
/** @description Custom order request */
|
|
1333
1452
|
CustomOrderRequest: {
|
|
1334
1453
|
/**
|
|
@@ -1523,6 +1642,7 @@ export interface components {
|
|
|
1523
1642
|
};
|
|
1524
1643
|
OrderRequest:
|
|
1525
1644
|
| components["schemas"]["SwapOrderRequest"]
|
|
1645
|
+
| components["schemas"]["HypeDuelOrderRequest"]
|
|
1526
1646
|
| components["schemas"]["CustomOrderRequest"]
|
|
1527
1647
|
| components["schemas"]["MintNftOrderRequest"]
|
|
1528
1648
|
| components["schemas"]["JoinTournamentOrderRequest"]
|
|
@@ -64,7 +64,7 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
|
|
|
64
64
|
name: "Arbitrum",
|
|
65
65
|
type: ChainType.EVM,
|
|
66
66
|
logoUrl: "https://assets.relay.link/icons/square/42161/light.png",
|
|
67
|
-
nativeRequired: parseEther("0.
|
|
67
|
+
nativeRequired: parseEther("0.0003"),
|
|
68
68
|
canDepositNative: true,
|
|
69
69
|
defaultToken: getEthToken(arbitrum.id),
|
|
70
70
|
nativeToken: getEthToken(arbitrum.id),
|