@spicenet-io/spiceflow-ui 1.9.8 → 1.9.10
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/components/DepositWidget/CrossChainDepositModal.d.ts +1 -0
- package/dist/index.cjs.js +388 -280
- package/dist/index.js +386 -278
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import { useWallets, usePrivy, useSign7702Authorization, useSignMessage } from '
|
|
|
10
10
|
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
|
|
11
11
|
import { getAccountNonce, hashChainBatches, getAuthorizationHash } from 'spiceflow-core-test';
|
|
12
12
|
import { useAccount, useWalletClient, useSwitchChain, useReadContracts, useConnect, useDisconnect, http as http$1, createConfig, WagmiProvider } from 'wagmi';
|
|
13
|
+
import { getClientForChain as getClientForChain$1 } from '@/utils/chains';
|
|
13
14
|
import { DynamicLogin } from './auth-dynamic.js';
|
|
14
15
|
import { PrivyLogin } from './auth-privy.js';
|
|
15
16
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
@@ -58,7 +59,7 @@ const CHAIN_CONFIGS = {
|
|
|
58
59
|
{
|
|
59
60
|
address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
|
|
60
61
|
name: "Mock Wrapped BTC",
|
|
61
|
-
symbol: "
|
|
62
|
+
symbol: "WBTC",
|
|
62
63
|
decimals: 8
|
|
63
64
|
}
|
|
64
65
|
]
|
|
@@ -94,6 +95,12 @@ const CHAIN_CONFIGS = {
|
|
|
94
95
|
name: "USD Coin",
|
|
95
96
|
symbol: "USDC",
|
|
96
97
|
decimals: 18
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
address: "0xBA4c54d4CF10C766c22A08F783998cFaB237F7C9",
|
|
101
|
+
name: "Mock Wrapped BTC",
|
|
102
|
+
symbol: "WBTC",
|
|
103
|
+
decimals: 8
|
|
97
104
|
}
|
|
98
105
|
]
|
|
99
106
|
},
|
|
@@ -130,9 +137,9 @@ const CHAIN_CONFIGS = {
|
|
|
130
137
|
decimals: 18
|
|
131
138
|
},
|
|
132
139
|
{
|
|
133
|
-
address: "
|
|
140
|
+
address: "0x16DD3a855433059Be478FAcb416D9aFed6CA96Ec",
|
|
134
141
|
name: "Mock Wrapped BTC",
|
|
135
|
-
symbol: "
|
|
142
|
+
symbol: "WBTC",
|
|
136
143
|
decimals: 8
|
|
137
144
|
}
|
|
138
145
|
]
|
|
@@ -3078,7 +3085,7 @@ const useWallet = () => {
|
|
|
3078
3085
|
};
|
|
3079
3086
|
};
|
|
3080
3087
|
|
|
3081
|
-
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-submission-api-dev.spicenet.io";
|
|
3088
|
+
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-submission-api-dev.spicenet.io/";
|
|
3082
3089
|
class RelayerService {
|
|
3083
3090
|
constructor() {
|
|
3084
3091
|
this.baseUrl = RELAYER_API_URL;
|
|
@@ -4113,6 +4120,138 @@ const useSpiceAssets = ({
|
|
|
4113
4120
|
};
|
|
4114
4121
|
};
|
|
4115
4122
|
|
|
4123
|
+
const StatusCard = ({ isSuccess, chainName, explorerUrl, txHash }) => {
|
|
4124
|
+
return /* @__PURE__ */ jsxs(
|
|
4125
|
+
"div",
|
|
4126
|
+
{
|
|
4127
|
+
style: {
|
|
4128
|
+
display: "flex",
|
|
4129
|
+
alignItems: "center",
|
|
4130
|
+
justifyContent: "space-between",
|
|
4131
|
+
padding: "14px 16px",
|
|
4132
|
+
borderRadius: "8px",
|
|
4133
|
+
backgroundColor: isSuccess ? "#d1fae5" : "#fee2e2",
|
|
4134
|
+
border: isSuccess ? "1px solid #6ee7b7" : "1px solid #fca5a5"
|
|
4135
|
+
},
|
|
4136
|
+
children: [
|
|
4137
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
|
|
4138
|
+
/* @__PURE__ */ jsx(
|
|
4139
|
+
"div",
|
|
4140
|
+
{
|
|
4141
|
+
style: {
|
|
4142
|
+
width: "28px",
|
|
4143
|
+
height: "28px",
|
|
4144
|
+
borderRadius: "50%",
|
|
4145
|
+
backgroundColor: isSuccess ? "#10b981" : "#ef4444",
|
|
4146
|
+
display: "flex",
|
|
4147
|
+
alignItems: "center",
|
|
4148
|
+
justifyContent: "center"
|
|
4149
|
+
},
|
|
4150
|
+
children: isSuccess ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4151
|
+
"path",
|
|
4152
|
+
{
|
|
4153
|
+
d: "M11.6667 3.5L5.25 9.91667L2.33333 7",
|
|
4154
|
+
stroke: "white",
|
|
4155
|
+
strokeWidth: "2",
|
|
4156
|
+
strokeLinecap: "round",
|
|
4157
|
+
strokeLinejoin: "round"
|
|
4158
|
+
}
|
|
4159
|
+
) }) : /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4160
|
+
"path",
|
|
4161
|
+
{
|
|
4162
|
+
d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5",
|
|
4163
|
+
stroke: "white",
|
|
4164
|
+
strokeWidth: "2",
|
|
4165
|
+
strokeLinecap: "round",
|
|
4166
|
+
strokeLinejoin: "round"
|
|
4167
|
+
}
|
|
4168
|
+
) })
|
|
4169
|
+
}
|
|
4170
|
+
),
|
|
4171
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
4172
|
+
/* @__PURE__ */ jsx(
|
|
4173
|
+
"p",
|
|
4174
|
+
{
|
|
4175
|
+
style: {
|
|
4176
|
+
margin: 0,
|
|
4177
|
+
fontSize: "14px",
|
|
4178
|
+
fontWeight: 600,
|
|
4179
|
+
fontFamily: '"IBM Plex Mono", monospace',
|
|
4180
|
+
letterSpacing: "0.5px",
|
|
4181
|
+
color: isSuccess ? "#065f46" : "#dc2626"
|
|
4182
|
+
},
|
|
4183
|
+
children: isSuccess ? "DEPOSIT CONFIRMED" : "DEPOSIT FAILED"
|
|
4184
|
+
}
|
|
4185
|
+
),
|
|
4186
|
+
/* @__PURE__ */ jsxs(
|
|
4187
|
+
"p",
|
|
4188
|
+
{
|
|
4189
|
+
style: {
|
|
4190
|
+
margin: "2px 0 0 0",
|
|
4191
|
+
fontSize: "12px",
|
|
4192
|
+
color: "#6b7280"
|
|
4193
|
+
},
|
|
4194
|
+
children: [
|
|
4195
|
+
"on ",
|
|
4196
|
+
chainName
|
|
4197
|
+
]
|
|
4198
|
+
}
|
|
4199
|
+
)
|
|
4200
|
+
] })
|
|
4201
|
+
] }),
|
|
4202
|
+
explorerUrl && txHash && /* @__PURE__ */ jsxs(
|
|
4203
|
+
"a",
|
|
4204
|
+
{
|
|
4205
|
+
href: `${explorerUrl}/tx/${txHash}`,
|
|
4206
|
+
target: "_blank",
|
|
4207
|
+
rel: "noopener noreferrer",
|
|
4208
|
+
style: {
|
|
4209
|
+
display: "flex",
|
|
4210
|
+
alignItems: "center",
|
|
4211
|
+
gap: "4px",
|
|
4212
|
+
fontSize: "13px",
|
|
4213
|
+
color: "#6b7280",
|
|
4214
|
+
textDecoration: "none",
|
|
4215
|
+
whiteSpace: "nowrap"
|
|
4216
|
+
},
|
|
4217
|
+
children: [
|
|
4218
|
+
"View on explorer",
|
|
4219
|
+
/* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: [
|
|
4220
|
+
/* @__PURE__ */ jsx(
|
|
4221
|
+
"path",
|
|
4222
|
+
{
|
|
4223
|
+
d: "M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5",
|
|
4224
|
+
stroke: "currentColor",
|
|
4225
|
+
strokeLinecap: "round",
|
|
4226
|
+
strokeLinejoin: "round"
|
|
4227
|
+
}
|
|
4228
|
+
),
|
|
4229
|
+
/* @__PURE__ */ jsx(
|
|
4230
|
+
"path",
|
|
4231
|
+
{
|
|
4232
|
+
d: "M7.5 1.5H10.5V4.5",
|
|
4233
|
+
stroke: "currentColor",
|
|
4234
|
+
strokeLinecap: "round",
|
|
4235
|
+
strokeLinejoin: "round"
|
|
4236
|
+
}
|
|
4237
|
+
),
|
|
4238
|
+
/* @__PURE__ */ jsx(
|
|
4239
|
+
"path",
|
|
4240
|
+
{
|
|
4241
|
+
d: "M5 7L10.5 1.5",
|
|
4242
|
+
stroke: "currentColor",
|
|
4243
|
+
strokeLinecap: "round",
|
|
4244
|
+
strokeLinejoin: "round"
|
|
4245
|
+
}
|
|
4246
|
+
)
|
|
4247
|
+
] })
|
|
4248
|
+
]
|
|
4249
|
+
}
|
|
4250
|
+
)
|
|
4251
|
+
]
|
|
4252
|
+
}
|
|
4253
|
+
);
|
|
4254
|
+
};
|
|
4116
4255
|
const DepositStatusPanel = ({
|
|
4117
4256
|
isOpen,
|
|
4118
4257
|
onClose,
|
|
@@ -4134,12 +4273,6 @@ const DepositStatusPanel = ({
|
|
|
4134
4273
|
setIsClosing(false);
|
|
4135
4274
|
}
|
|
4136
4275
|
}, [isOpen, intentStatus]);
|
|
4137
|
-
const handleClose = () => {
|
|
4138
|
-
setIsClosing(true);
|
|
4139
|
-
setTimeout(() => {
|
|
4140
|
-
onClose();
|
|
4141
|
-
}, 300);
|
|
4142
|
-
};
|
|
4143
4276
|
const handleComplete = () => {
|
|
4144
4277
|
setIsClosing(true);
|
|
4145
4278
|
setTimeout(() => {
|
|
@@ -4154,6 +4287,12 @@ const DepositStatusPanel = ({
|
|
|
4154
4287
|
const isProcessing = overallStatus === "processing";
|
|
4155
4288
|
const isSuccess = overallStatus === "success";
|
|
4156
4289
|
const isError = overallStatus === "failed";
|
|
4290
|
+
const stepWithTxHash = steps.find((step) => step.transactionHash);
|
|
4291
|
+
const derivedChainName = chainName !== "Network" ? chainName : steps[0]?.chainName || chainName;
|
|
4292
|
+
const derivedExplorerUrl = explorerUrl || (stepWithTxHash ? getExplorerUrl(
|
|
4293
|
+
stepWithTxHash.chainId,
|
|
4294
|
+
stepWithTxHash.transactionHash || ""
|
|
4295
|
+
).replace(/\/tx\/.*$/, "") : void 0);
|
|
4157
4296
|
return /* @__PURE__ */ jsxs(
|
|
4158
4297
|
"div",
|
|
4159
4298
|
{
|
|
@@ -4172,20 +4311,56 @@ const DepositStatusPanel = ({
|
|
|
4172
4311
|
display: "flex",
|
|
4173
4312
|
alignItems: "center",
|
|
4174
4313
|
justifyContent: "space-between",
|
|
4175
|
-
marginBottom: "
|
|
4314
|
+
marginBottom: "16px"
|
|
4176
4315
|
},
|
|
4177
4316
|
children: [
|
|
4178
|
-
/* @__PURE__ */
|
|
4179
|
-
"
|
|
4317
|
+
/* @__PURE__ */ jsxs(
|
|
4318
|
+
"div",
|
|
4180
4319
|
{
|
|
4181
4320
|
style: {
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4321
|
+
display: "flex",
|
|
4322
|
+
alignItems: "center",
|
|
4323
|
+
gap: "8px",
|
|
4324
|
+
cursor: !isProcessing ? "pointer" : "default"
|
|
4187
4325
|
},
|
|
4188
|
-
|
|
4326
|
+
onClick: !isProcessing ? toggleDetails : void 0,
|
|
4327
|
+
children: [
|
|
4328
|
+
/* @__PURE__ */ jsx(
|
|
4329
|
+
"span",
|
|
4330
|
+
{
|
|
4331
|
+
style: {
|
|
4332
|
+
fontSize: "13px",
|
|
4333
|
+
fontWeight: 500,
|
|
4334
|
+
color: "#6b7280",
|
|
4335
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4336
|
+
},
|
|
4337
|
+
children: "Deposit Results"
|
|
4338
|
+
}
|
|
4339
|
+
),
|
|
4340
|
+
!isProcessing && /* @__PURE__ */ jsx(
|
|
4341
|
+
"svg",
|
|
4342
|
+
{
|
|
4343
|
+
width: "16",
|
|
4344
|
+
height: "16",
|
|
4345
|
+
viewBox: "0 0 16 16",
|
|
4346
|
+
fill: "none",
|
|
4347
|
+
style: {
|
|
4348
|
+
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4349
|
+
transition: "transform 0.3s ease"
|
|
4350
|
+
},
|
|
4351
|
+
children: /* @__PURE__ */ jsx(
|
|
4352
|
+
"path",
|
|
4353
|
+
{
|
|
4354
|
+
d: "M4 6L8 10L12 6",
|
|
4355
|
+
stroke: "#6b7280",
|
|
4356
|
+
strokeWidth: "2",
|
|
4357
|
+
strokeLinecap: "round",
|
|
4358
|
+
strokeLinejoin: "round"
|
|
4359
|
+
}
|
|
4360
|
+
)
|
|
4361
|
+
}
|
|
4362
|
+
)
|
|
4363
|
+
]
|
|
4189
4364
|
}
|
|
4190
4365
|
),
|
|
4191
4366
|
!isProcessing && /* @__PURE__ */ jsx(
|
|
@@ -4197,6 +4372,9 @@ const DepositStatusPanel = ({
|
|
|
4197
4372
|
border: "none",
|
|
4198
4373
|
cursor: "pointer",
|
|
4199
4374
|
padding: "4px",
|
|
4375
|
+
display: "flex",
|
|
4376
|
+
alignItems: "center",
|
|
4377
|
+
justifyContent: "center",
|
|
4200
4378
|
color: "#6b7280"
|
|
4201
4379
|
},
|
|
4202
4380
|
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
@@ -4214,65 +4392,89 @@ const DepositStatusPanel = ({
|
|
|
4214
4392
|
]
|
|
4215
4393
|
}
|
|
4216
4394
|
),
|
|
4217
|
-
/* @__PURE__ */
|
|
4395
|
+
isProcessing && /* @__PURE__ */ jsxs(
|
|
4218
4396
|
"div",
|
|
4219
4397
|
{
|
|
4220
4398
|
style: {
|
|
4221
4399
|
display: "flex",
|
|
4222
|
-
|
|
4223
|
-
|
|
4400
|
+
flexDirection: "column",
|
|
4401
|
+
alignItems: "center",
|
|
4402
|
+
padding: "24px",
|
|
4403
|
+
marginBottom: "16px"
|
|
4404
|
+
},
|
|
4405
|
+
children: [
|
|
4406
|
+
/* @__PURE__ */ jsx(
|
|
4407
|
+
"div",
|
|
4408
|
+
{
|
|
4409
|
+
style: {
|
|
4410
|
+
width: "48px",
|
|
4411
|
+
height: "48px",
|
|
4412
|
+
border: "3px solid #e5e7eb",
|
|
4413
|
+
borderTopColor: theme.colors.primary,
|
|
4414
|
+
borderRadius: "50%",
|
|
4415
|
+
animation: "spin 1s linear infinite",
|
|
4416
|
+
marginBottom: "16px"
|
|
4417
|
+
}
|
|
4418
|
+
}
|
|
4419
|
+
),
|
|
4420
|
+
/* @__PURE__ */ jsx(
|
|
4421
|
+
"p",
|
|
4422
|
+
{
|
|
4423
|
+
style: {
|
|
4424
|
+
fontSize: "14px",
|
|
4425
|
+
fontWeight: 500,
|
|
4426
|
+
color: "#374151",
|
|
4427
|
+
margin: 0
|
|
4428
|
+
},
|
|
4429
|
+
children: "Processing your deposit..."
|
|
4430
|
+
}
|
|
4431
|
+
)
|
|
4432
|
+
]
|
|
4433
|
+
}
|
|
4434
|
+
),
|
|
4435
|
+
!isProcessing && /* @__PURE__ */ jsx(
|
|
4436
|
+
"div",
|
|
4437
|
+
{
|
|
4438
|
+
style: {
|
|
4439
|
+
marginBottom: "16px"
|
|
4224
4440
|
},
|
|
4225
4441
|
children: /* @__PURE__ */ jsx(
|
|
4226
|
-
|
|
4442
|
+
StatusCard,
|
|
4227
4443
|
{
|
|
4228
|
-
|
|
4229
|
-
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
backgroundColor: isSuccess ? "#dcfce7" : isError ? "#fee2e2" : "#f3f4f6",
|
|
4233
|
-
display: "flex",
|
|
4234
|
-
alignItems: "center",
|
|
4235
|
-
justifyContent: "center"
|
|
4236
|
-
},
|
|
4237
|
-
children: isProcessing ? /* @__PURE__ */ jsx(
|
|
4238
|
-
"div",
|
|
4239
|
-
{
|
|
4240
|
-
style: {
|
|
4241
|
-
width: "24px",
|
|
4242
|
-
height: "24px",
|
|
4243
|
-
border: "3px solid #e5e7eb",
|
|
4244
|
-
borderTopColor: theme.colors.primary,
|
|
4245
|
-
borderRadius: "50%",
|
|
4246
|
-
animation: "spin 1s linear infinite"
|
|
4247
|
-
}
|
|
4248
|
-
}
|
|
4249
|
-
) : isSuccess ? /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#16a34a" }, children: "\u2713" }) : /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#dc2626" }, children: "\u2717" })
|
|
4444
|
+
isSuccess,
|
|
4445
|
+
chainName: derivedChainName,
|
|
4446
|
+
explorerUrl: derivedExplorerUrl,
|
|
4447
|
+
txHash: stepWithTxHash?.transactionHash
|
|
4250
4448
|
}
|
|
4251
4449
|
)
|
|
4252
4450
|
}
|
|
4253
4451
|
),
|
|
4254
|
-
/* @__PURE__ */ jsx(
|
|
4452
|
+
!isProcessing && /* @__PURE__ */ jsx(
|
|
4255
4453
|
"div",
|
|
4256
4454
|
{
|
|
4257
4455
|
style: {
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4456
|
+
overflow: "hidden",
|
|
4457
|
+
maxHeight: isDetailsExpanded ? "300px" : "0px",
|
|
4458
|
+
opacity: isDetailsExpanded ? 1 : 0,
|
|
4459
|
+
transition: "max-height 0.3s ease, opacity 0.3s ease",
|
|
4460
|
+
marginBottom: isDetailsExpanded ? "16px" : "0"
|
|
4262
4461
|
},
|
|
4263
|
-
children:
|
|
4462
|
+
children: /* @__PURE__ */ jsx(
|
|
4264
4463
|
"div",
|
|
4265
4464
|
{
|
|
4266
4465
|
style: {
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
border: `1px solid ${step.status === "success" ? "#bbf7d0" : step.status === "failed" ? "#fecaca" : "#e5e7eb"}`
|
|
4466
|
+
display: "flex",
|
|
4467
|
+
flexDirection: "column",
|
|
4468
|
+
gap: "8px"
|
|
4271
4469
|
},
|
|
4272
|
-
children: /* @__PURE__ */ jsxs(
|
|
4470
|
+
children: steps.map((step, idx) => /* @__PURE__ */ jsxs(
|
|
4273
4471
|
"div",
|
|
4274
4472
|
{
|
|
4275
4473
|
style: {
|
|
4474
|
+
padding: "10px 12px",
|
|
4475
|
+
borderRadius: "6px",
|
|
4476
|
+
backgroundColor: "#f9fafb",
|
|
4477
|
+
border: "1px solid #e5e7eb",
|
|
4276
4478
|
display: "flex",
|
|
4277
4479
|
justifyContent: "space-between",
|
|
4278
4480
|
alignItems: "center"
|
|
@@ -4282,9 +4484,8 @@ const DepositStatusPanel = ({
|
|
|
4282
4484
|
"span",
|
|
4283
4485
|
{
|
|
4284
4486
|
style: {
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
color: "#111827"
|
|
4487
|
+
fontSize: "13px",
|
|
4488
|
+
color: "#374151"
|
|
4288
4489
|
},
|
|
4289
4490
|
children: step.description || `Step ${idx + 1}`
|
|
4290
4491
|
}
|
|
@@ -4294,17 +4495,18 @@ const DepositStatusPanel = ({
|
|
|
4294
4495
|
{
|
|
4295
4496
|
style: {
|
|
4296
4497
|
fontSize: "12px",
|
|
4297
|
-
color: step.status === "success" ? "#
|
|
4498
|
+
color: step.status === "success" ? "#10b981" : step.status === "failed" ? "#ef4444" : "#6b7280",
|
|
4499
|
+
fontWeight: 500
|
|
4298
4500
|
},
|
|
4299
|
-
children: step.status === "success" ? "\u2713
|
|
4501
|
+
children: step.status === "success" ? "\u2713" : step.status === "failed" ? "\u2717" : "\u25CB"
|
|
4300
4502
|
}
|
|
4301
4503
|
)
|
|
4302
4504
|
]
|
|
4303
|
-
}
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
)
|
|
4505
|
+
},
|
|
4506
|
+
idx
|
|
4507
|
+
))
|
|
4508
|
+
}
|
|
4509
|
+
)
|
|
4308
4510
|
}
|
|
4309
4511
|
),
|
|
4310
4512
|
!isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
@@ -4324,7 +4526,11 @@ const DepositStatusPanel = ({
|
|
|
4324
4526
|
fontSize: "16px",
|
|
4325
4527
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4326
4528
|
textTransform: "uppercase",
|
|
4327
|
-
cursor: "pointer"
|
|
4529
|
+
cursor: "pointer",
|
|
4530
|
+
display: "flex",
|
|
4531
|
+
alignItems: "center",
|
|
4532
|
+
justifyContent: "center",
|
|
4533
|
+
gap: "8px"
|
|
4328
4534
|
},
|
|
4329
4535
|
children: "RETRY"
|
|
4330
4536
|
}
|
|
@@ -4338,16 +4544,20 @@ const DepositStatusPanel = ({
|
|
|
4338
4544
|
height: "48px",
|
|
4339
4545
|
padding: "14px 24px",
|
|
4340
4546
|
borderRadius: "6px",
|
|
4341
|
-
backgroundColor:
|
|
4547
|
+
backgroundColor: "#ea4b4b",
|
|
4342
4548
|
border: "1px solid #0e0d0b",
|
|
4343
4549
|
color: "#0e0d0b",
|
|
4344
4550
|
fontWeight: 500,
|
|
4345
4551
|
fontSize: "16px",
|
|
4346
4552
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4347
4553
|
textTransform: "uppercase",
|
|
4348
|
-
cursor: "pointer"
|
|
4554
|
+
cursor: "pointer",
|
|
4555
|
+
display: "flex",
|
|
4556
|
+
alignItems: "center",
|
|
4557
|
+
justifyContent: "center",
|
|
4558
|
+
gap: "8px"
|
|
4349
4559
|
},
|
|
4350
|
-
children:
|
|
4560
|
+
children: "CONTINUE \u2192"
|
|
4351
4561
|
}
|
|
4352
4562
|
)
|
|
4353
4563
|
] }),
|
|
@@ -4362,9 +4572,9 @@ const DepositStatusPanel = ({
|
|
|
4362
4572
|
);
|
|
4363
4573
|
}
|
|
4364
4574
|
if (!isOpen || !results || results.length === 0) return null;
|
|
4365
|
-
const
|
|
4366
|
-
const
|
|
4367
|
-
const
|
|
4575
|
+
const allSuccess = results.every((r) => r.success);
|
|
4576
|
+
const firstResult = results[0];
|
|
4577
|
+
const txHash = firstResult?.txHash;
|
|
4368
4578
|
return /* @__PURE__ */ jsxs(
|
|
4369
4579
|
"div",
|
|
4370
4580
|
{
|
|
@@ -4389,7 +4599,7 @@ const DepositStatusPanel = ({
|
|
|
4389
4599
|
boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
|
|
4390
4600
|
},
|
|
4391
4601
|
children: [
|
|
4392
|
-
/* @__PURE__ */
|
|
4602
|
+
/* @__PURE__ */ jsx(
|
|
4393
4603
|
"div",
|
|
4394
4604
|
{
|
|
4395
4605
|
style: {
|
|
@@ -4398,157 +4608,67 @@ const DepositStatusPanel = ({
|
|
|
4398
4608
|
justifyContent: "space-between",
|
|
4399
4609
|
marginBottom: "16px"
|
|
4400
4610
|
},
|
|
4401
|
-
children:
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
{
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
"span",
|
|
4415
|
-
{
|
|
4416
|
-
style: {
|
|
4417
|
-
fontSize: "13px",
|
|
4418
|
-
fontWeight: 500,
|
|
4419
|
-
color: "#6b7280",
|
|
4420
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4421
|
-
},
|
|
4422
|
-
children: "Deposit Results"
|
|
4423
|
-
}
|
|
4424
|
-
),
|
|
4425
|
-
/* @__PURE__ */ jsx(
|
|
4426
|
-
"svg",
|
|
4427
|
-
{
|
|
4428
|
-
width: "16",
|
|
4429
|
-
height: "16",
|
|
4430
|
-
viewBox: "0 0 16 16",
|
|
4431
|
-
fill: "none",
|
|
4432
|
-
style: {
|
|
4433
|
-
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4434
|
-
transition: "transform 0.3s ease"
|
|
4435
|
-
},
|
|
4436
|
-
children: /* @__PURE__ */ jsx(
|
|
4437
|
-
"path",
|
|
4438
|
-
{
|
|
4439
|
-
d: "M4 6L8 10L12 6",
|
|
4440
|
-
stroke: "#6b7280",
|
|
4441
|
-
strokeWidth: "2",
|
|
4442
|
-
strokeLinecap: "round",
|
|
4443
|
-
strokeLinejoin: "round"
|
|
4444
|
-
}
|
|
4445
|
-
)
|
|
4446
|
-
}
|
|
4447
|
-
)
|
|
4448
|
-
]
|
|
4449
|
-
}
|
|
4450
|
-
),
|
|
4451
|
-
/* @__PURE__ */ jsx(
|
|
4452
|
-
"button",
|
|
4453
|
-
{
|
|
4454
|
-
onClick: handleClose,
|
|
4455
|
-
style: {
|
|
4456
|
-
background: "none",
|
|
4457
|
-
border: "none",
|
|
4458
|
-
cursor: "pointer",
|
|
4459
|
-
padding: "4px",
|
|
4460
|
-
display: "flex",
|
|
4461
|
-
alignItems: "center",
|
|
4462
|
-
justifyContent: "center",
|
|
4463
|
-
color: "#6b7280",
|
|
4464
|
-
transition: "color 0.2s ease"
|
|
4465
|
-
},
|
|
4466
|
-
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4467
|
-
"path",
|
|
4611
|
+
children: /* @__PURE__ */ jsxs(
|
|
4612
|
+
"div",
|
|
4613
|
+
{
|
|
4614
|
+
style: {
|
|
4615
|
+
display: "flex",
|
|
4616
|
+
alignItems: "center",
|
|
4617
|
+
gap: "8px",
|
|
4618
|
+
cursor: "pointer"
|
|
4619
|
+
},
|
|
4620
|
+
onClick: toggleDetails,
|
|
4621
|
+
children: [
|
|
4622
|
+
/* @__PURE__ */ jsx(
|
|
4623
|
+
"span",
|
|
4468
4624
|
{
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4625
|
+
style: {
|
|
4626
|
+
fontSize: "13px",
|
|
4627
|
+
fontWeight: 500,
|
|
4628
|
+
color: "#6b7280",
|
|
4629
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4630
|
+
},
|
|
4631
|
+
children: "Deposit Results"
|
|
4474
4632
|
}
|
|
4475
|
-
)
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
]
|
|
4479
|
-
}
|
|
4480
|
-
),
|
|
4481
|
-
/* @__PURE__ */ jsxs(
|
|
4482
|
-
"div",
|
|
4483
|
-
{
|
|
4484
|
-
style: {
|
|
4485
|
-
display: "flex",
|
|
4486
|
-
alignItems: "center",
|
|
4487
|
-
justifyContent: "center",
|
|
4488
|
-
gap: "12px",
|
|
4489
|
-
marginBottom: "16px",
|
|
4490
|
-
padding: "12px",
|
|
4491
|
-
backgroundColor: allSuccess ? "#f0fdf4" : "#fefce8",
|
|
4492
|
-
borderRadius: "8px",
|
|
4493
|
-
border: `1px solid ${allSuccess ? "#bbf7d0" : "#fef08a"}`
|
|
4494
|
-
},
|
|
4495
|
-
children: [
|
|
4496
|
-
/* @__PURE__ */ jsx(
|
|
4497
|
-
"div",
|
|
4498
|
-
{
|
|
4499
|
-
style: {
|
|
4500
|
-
width: "32px",
|
|
4501
|
-
height: "32px",
|
|
4502
|
-
borderRadius: "50%",
|
|
4503
|
-
backgroundColor: allSuccess ? "#dcfce7" : "#fef3c7",
|
|
4504
|
-
display: "flex",
|
|
4505
|
-
alignItems: "center",
|
|
4506
|
-
justifyContent: "center"
|
|
4507
|
-
},
|
|
4508
|
-
children: /* @__PURE__ */ jsx(
|
|
4509
|
-
"span",
|
|
4633
|
+
),
|
|
4634
|
+
/* @__PURE__ */ jsx(
|
|
4635
|
+
"svg",
|
|
4510
4636
|
{
|
|
4637
|
+
width: "16",
|
|
4638
|
+
height: "16",
|
|
4639
|
+
viewBox: "0 0 16 16",
|
|
4640
|
+
fill: "none",
|
|
4511
4641
|
style: {
|
|
4512
|
-
|
|
4513
|
-
|
|
4642
|
+
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4643
|
+
transition: "transform 0.3s ease"
|
|
4514
4644
|
},
|
|
4515
|
-
children:
|
|
4645
|
+
children: /* @__PURE__ */ jsx(
|
|
4646
|
+
"path",
|
|
4647
|
+
{
|
|
4648
|
+
d: "M4 6L8 10L12 6",
|
|
4649
|
+
stroke: "#6b7280",
|
|
4650
|
+
strokeWidth: "2",
|
|
4651
|
+
strokeLinecap: "round",
|
|
4652
|
+
strokeLinejoin: "round"
|
|
4653
|
+
}
|
|
4654
|
+
)
|
|
4516
4655
|
}
|
|
4517
4656
|
)
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
/* @__PURE__ */ jsx(
|
|
4522
|
-
"p",
|
|
4523
|
-
{
|
|
4524
|
-
style: {
|
|
4525
|
-
fontWeight: 600,
|
|
4526
|
-
fontSize: "14px",
|
|
4527
|
-
color: allSuccess ? "#166534" : "#854d0e",
|
|
4528
|
-
margin: 0
|
|
4529
|
-
},
|
|
4530
|
-
children: allSuccess ? "All Deposits Complete!" : `${successCount} of ${results.length} Deposits Complete`
|
|
4531
|
-
}
|
|
4532
|
-
),
|
|
4533
|
-
/* @__PURE__ */ jsxs(
|
|
4534
|
-
"p",
|
|
4535
|
-
{
|
|
4536
|
-
style: {
|
|
4537
|
-
fontSize: "12px",
|
|
4538
|
-
color: "#6b7280",
|
|
4539
|
-
margin: "2px 0 0 0"
|
|
4540
|
-
},
|
|
4541
|
-
children: [
|
|
4542
|
-
"on ",
|
|
4543
|
-
chainName
|
|
4544
|
-
]
|
|
4545
|
-
}
|
|
4546
|
-
)
|
|
4547
|
-
] })
|
|
4548
|
-
]
|
|
4657
|
+
]
|
|
4658
|
+
}
|
|
4659
|
+
)
|
|
4549
4660
|
}
|
|
4550
4661
|
),
|
|
4551
|
-
/* @__PURE__ */ jsx(
|
|
4662
|
+
/* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx(
|
|
4663
|
+
StatusCard,
|
|
4664
|
+
{
|
|
4665
|
+
isSuccess: allSuccess,
|
|
4666
|
+
chainName,
|
|
4667
|
+
explorerUrl,
|
|
4668
|
+
txHash
|
|
4669
|
+
}
|
|
4670
|
+
) }),
|
|
4671
|
+
results.length > 1 && /* @__PURE__ */ jsx(
|
|
4552
4672
|
"div",
|
|
4553
4673
|
{
|
|
4554
4674
|
style: {
|
|
@@ -4572,10 +4692,13 @@ const DepositStatusPanel = ({
|
|
|
4572
4692
|
"div",
|
|
4573
4693
|
{
|
|
4574
4694
|
style: {
|
|
4575
|
-
padding: "12px",
|
|
4576
|
-
borderRadius: "
|
|
4577
|
-
|
|
4578
|
-
|
|
4695
|
+
padding: "10px 12px",
|
|
4696
|
+
borderRadius: "6px",
|
|
4697
|
+
backgroundColor: "#f9fafb",
|
|
4698
|
+
border: "1px solid #e5e7eb",
|
|
4699
|
+
display: "flex",
|
|
4700
|
+
justifyContent: "space-between",
|
|
4701
|
+
alignItems: "center"
|
|
4579
4702
|
},
|
|
4580
4703
|
children: [
|
|
4581
4704
|
/* @__PURE__ */ jsxs(
|
|
@@ -4583,76 +4706,35 @@ const DepositStatusPanel = ({
|
|
|
4583
4706
|
{
|
|
4584
4707
|
style: {
|
|
4585
4708
|
display: "flex",
|
|
4586
|
-
|
|
4587
|
-
|
|
4709
|
+
alignItems: "center",
|
|
4710
|
+
gap: "8px"
|
|
4588
4711
|
},
|
|
4589
4712
|
children: [
|
|
4590
|
-
/* @__PURE__ */ jsxs(
|
|
4591
|
-
"div",
|
|
4592
|
-
{
|
|
4593
|
-
style: {
|
|
4594
|
-
display: "flex",
|
|
4595
|
-
alignItems: "center",
|
|
4596
|
-
gap: "8px"
|
|
4597
|
-
},
|
|
4598
|
-
children: [
|
|
4599
|
-
/* @__PURE__ */ jsx(
|
|
4600
|
-
"span",
|
|
4601
|
-
{
|
|
4602
|
-
style: {
|
|
4603
|
-
fontWeight: 600,
|
|
4604
|
-
fontSize: "14px",
|
|
4605
|
-
color: "#111827",
|
|
4606
|
-
fontFamily: '"IBM Plex Mono", monospace'
|
|
4607
|
-
},
|
|
4608
|
-
children: result.asset.symbol
|
|
4609
|
-
}
|
|
4610
|
-
),
|
|
4611
|
-
result.amount && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4612
|
-
]
|
|
4613
|
-
}
|
|
4614
|
-
),
|
|
4615
4713
|
/* @__PURE__ */ jsx(
|
|
4616
4714
|
"span",
|
|
4617
4715
|
{
|
|
4618
4716
|
style: {
|
|
4619
|
-
|
|
4717
|
+
fontWeight: 600,
|
|
4620
4718
|
fontSize: "13px",
|
|
4621
|
-
|
|
4719
|
+
color: "#111827",
|
|
4720
|
+
fontFamily: '"IBM Plex Mono", monospace'
|
|
4622
4721
|
},
|
|
4623
|
-
children: result.
|
|
4722
|
+
children: result.asset.symbol
|
|
4624
4723
|
}
|
|
4625
|
-
)
|
|
4724
|
+
),
|
|
4725
|
+
result.amount && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4626
4726
|
]
|
|
4627
4727
|
}
|
|
4628
4728
|
),
|
|
4629
|
-
|
|
4630
|
-
"
|
|
4631
|
-
{
|
|
4632
|
-
href: `${explorerUrl}/tx/${result.txHash}`,
|
|
4633
|
-
target: "_blank",
|
|
4634
|
-
rel: "noopener noreferrer",
|
|
4635
|
-
style: {
|
|
4636
|
-
fontSize: "12px",
|
|
4637
|
-
color: theme.colors.primary,
|
|
4638
|
-
textDecoration: "none",
|
|
4639
|
-
display: "block",
|
|
4640
|
-
marginTop: "4px"
|
|
4641
|
-
},
|
|
4642
|
-
children: "View on Explorer \u2192"
|
|
4643
|
-
}
|
|
4644
|
-
),
|
|
4645
|
-
result.error && /* @__PURE__ */ jsx(
|
|
4646
|
-
"p",
|
|
4729
|
+
/* @__PURE__ */ jsx(
|
|
4730
|
+
"span",
|
|
4647
4731
|
{
|
|
4648
4732
|
style: {
|
|
4649
4733
|
fontSize: "12px",
|
|
4650
|
-
color: "#
|
|
4651
|
-
|
|
4652
|
-
wordWrap: "break-word",
|
|
4653
|
-
overflowWrap: "break-word"
|
|
4734
|
+
color: result.success ? "#10b981" : "#ef4444",
|
|
4735
|
+
fontWeight: 500
|
|
4654
4736
|
},
|
|
4655
|
-
children: result.
|
|
4737
|
+
children: result.success ? "\u2713" : "\u2717"
|
|
4656
4738
|
}
|
|
4657
4739
|
)
|
|
4658
4740
|
]
|
|
@@ -5605,6 +5687,7 @@ const CrossChainDepositModal = ({
|
|
|
5605
5687
|
title = "Deposit to Spicenet",
|
|
5606
5688
|
description = "Select tokens and enter amounts to deposit to your Spicenet Account",
|
|
5607
5689
|
chainId,
|
|
5690
|
+
embeddedWalletAddress,
|
|
5608
5691
|
externalWalletAddress,
|
|
5609
5692
|
escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
|
|
5610
5693
|
getChainConfig,
|
|
@@ -5754,15 +5837,40 @@ const CrossChainDepositModal = ({
|
|
|
5754
5837
|
data
|
|
5755
5838
|
});
|
|
5756
5839
|
}
|
|
5757
|
-
|
|
5840
|
+
const client = getClientForChain$1(chainId);
|
|
5841
|
+
const receipt = await client.waitForTransactionReceipt({
|
|
5842
|
+
hash,
|
|
5843
|
+
timeout: 12e4,
|
|
5844
|
+
pollingInterval: 2e3,
|
|
5845
|
+
confirmations: 2
|
|
5846
|
+
});
|
|
5847
|
+
if (receipt.status !== "success") {
|
|
5848
|
+
throw new Error(`Transfer to escrow failed for ${asset.symbol}`);
|
|
5849
|
+
}
|
|
5850
|
+
const currentBlock = await client.getBlockNumber();
|
|
5851
|
+
const confirmations = currentBlock - receipt.blockNumber;
|
|
5852
|
+
if (confirmations < 2) {
|
|
5853
|
+
await new Promise((resolve) => setTimeout(resolve, 3e3));
|
|
5854
|
+
}
|
|
5855
|
+
console.log("submitting deposit to relayer with params:", {
|
|
5856
|
+
txHash: hash,
|
|
5857
|
+
sender: embeddedWalletAddress,
|
|
5858
|
+
tokenAddress: asset.address,
|
|
5859
|
+
chainId,
|
|
5860
|
+
amount: parseUnits(amount, asset.decimals).toString(),
|
|
5861
|
+
user: embeddedWalletAddress,
|
|
5862
|
+
isDeposit: true
|
|
5863
|
+
});
|
|
5864
|
+
const depositResult = await relayerService.submitSpiceDeposit({
|
|
5758
5865
|
txHash: hash,
|
|
5759
|
-
sender:
|
|
5866
|
+
sender: embeddedWalletAddress,
|
|
5760
5867
|
tokenAddress: asset.address,
|
|
5761
5868
|
chainId,
|
|
5762
|
-
amount: amount.toString(),
|
|
5763
|
-
user:
|
|
5869
|
+
amount: parseUnits(amount, asset.decimals).toString(),
|
|
5870
|
+
user: embeddedWalletAddress,
|
|
5764
5871
|
isDeposit: true
|
|
5765
5872
|
});
|
|
5873
|
+
console.log("Deposit result:", depositResult);
|
|
5766
5874
|
results.push({ asset, txHash: hash, success: true });
|
|
5767
5875
|
} catch (err) {
|
|
5768
5876
|
console.error(`Deposit error for ${asset.symbol}:`, err);
|