@spicenet-io/spiceflow-ui 1.9.9 → 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/index.cjs.js +355 -274
- package/dist/index.js +355 -274
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -59,7 +59,7 @@ const CHAIN_CONFIGS = {
|
|
|
59
59
|
{
|
|
60
60
|
address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
|
|
61
61
|
name: "Mock Wrapped BTC",
|
|
62
|
-
symbol: "
|
|
62
|
+
symbol: "WBTC",
|
|
63
63
|
decimals: 8
|
|
64
64
|
}
|
|
65
65
|
]
|
|
@@ -95,6 +95,12 @@ const CHAIN_CONFIGS = {
|
|
|
95
95
|
name: "USD Coin",
|
|
96
96
|
symbol: "USDC",
|
|
97
97
|
decimals: 18
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
address: "0xBA4c54d4CF10C766c22A08F783998cFaB237F7C9",
|
|
101
|
+
name: "Mock Wrapped BTC",
|
|
102
|
+
symbol: "WBTC",
|
|
103
|
+
decimals: 8
|
|
98
104
|
}
|
|
99
105
|
]
|
|
100
106
|
},
|
|
@@ -131,9 +137,9 @@ const CHAIN_CONFIGS = {
|
|
|
131
137
|
decimals: 18
|
|
132
138
|
},
|
|
133
139
|
{
|
|
134
|
-
address: "
|
|
140
|
+
address: "0x16DD3a855433059Be478FAcb416D9aFed6CA96Ec",
|
|
135
141
|
name: "Mock Wrapped BTC",
|
|
136
|
-
symbol: "
|
|
142
|
+
symbol: "WBTC",
|
|
137
143
|
decimals: 8
|
|
138
144
|
}
|
|
139
145
|
]
|
|
@@ -3079,7 +3085,7 @@ const useWallet = () => {
|
|
|
3079
3085
|
};
|
|
3080
3086
|
};
|
|
3081
3087
|
|
|
3082
|
-
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-api.spicenet.io/";
|
|
3088
|
+
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-submission-api-dev.spicenet.io/";
|
|
3083
3089
|
class RelayerService {
|
|
3084
3090
|
constructor() {
|
|
3085
3091
|
this.baseUrl = RELAYER_API_URL;
|
|
@@ -4114,6 +4120,138 @@ const useSpiceAssets = ({
|
|
|
4114
4120
|
};
|
|
4115
4121
|
};
|
|
4116
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
|
+
};
|
|
4117
4255
|
const DepositStatusPanel = ({
|
|
4118
4256
|
isOpen,
|
|
4119
4257
|
onClose,
|
|
@@ -4135,12 +4273,6 @@ const DepositStatusPanel = ({
|
|
|
4135
4273
|
setIsClosing(false);
|
|
4136
4274
|
}
|
|
4137
4275
|
}, [isOpen, intentStatus]);
|
|
4138
|
-
const handleClose = () => {
|
|
4139
|
-
setIsClosing(true);
|
|
4140
|
-
setTimeout(() => {
|
|
4141
|
-
onClose();
|
|
4142
|
-
}, 300);
|
|
4143
|
-
};
|
|
4144
4276
|
const handleComplete = () => {
|
|
4145
4277
|
setIsClosing(true);
|
|
4146
4278
|
setTimeout(() => {
|
|
@@ -4155,6 +4287,12 @@ const DepositStatusPanel = ({
|
|
|
4155
4287
|
const isProcessing = overallStatus === "processing";
|
|
4156
4288
|
const isSuccess = overallStatus === "success";
|
|
4157
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);
|
|
4158
4296
|
return /* @__PURE__ */ jsxs(
|
|
4159
4297
|
"div",
|
|
4160
4298
|
{
|
|
@@ -4173,20 +4311,56 @@ const DepositStatusPanel = ({
|
|
|
4173
4311
|
display: "flex",
|
|
4174
4312
|
alignItems: "center",
|
|
4175
4313
|
justifyContent: "space-between",
|
|
4176
|
-
marginBottom: "
|
|
4314
|
+
marginBottom: "16px"
|
|
4177
4315
|
},
|
|
4178
4316
|
children: [
|
|
4179
|
-
/* @__PURE__ */
|
|
4180
|
-
"
|
|
4317
|
+
/* @__PURE__ */ jsxs(
|
|
4318
|
+
"div",
|
|
4181
4319
|
{
|
|
4182
4320
|
style: {
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4321
|
+
display: "flex",
|
|
4322
|
+
alignItems: "center",
|
|
4323
|
+
gap: "8px",
|
|
4324
|
+
cursor: !isProcessing ? "pointer" : "default"
|
|
4188
4325
|
},
|
|
4189
|
-
|
|
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
|
+
]
|
|
4190
4364
|
}
|
|
4191
4365
|
),
|
|
4192
4366
|
!isProcessing && /* @__PURE__ */ jsx(
|
|
@@ -4198,6 +4372,9 @@ const DepositStatusPanel = ({
|
|
|
4198
4372
|
border: "none",
|
|
4199
4373
|
cursor: "pointer",
|
|
4200
4374
|
padding: "4px",
|
|
4375
|
+
display: "flex",
|
|
4376
|
+
alignItems: "center",
|
|
4377
|
+
justifyContent: "center",
|
|
4201
4378
|
color: "#6b7280"
|
|
4202
4379
|
},
|
|
4203
4380
|
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
@@ -4215,65 +4392,89 @@ const DepositStatusPanel = ({
|
|
|
4215
4392
|
]
|
|
4216
4393
|
}
|
|
4217
4394
|
),
|
|
4218
|
-
/* @__PURE__ */
|
|
4395
|
+
isProcessing && /* @__PURE__ */ jsxs(
|
|
4219
4396
|
"div",
|
|
4220
4397
|
{
|
|
4221
4398
|
style: {
|
|
4222
4399
|
display: "flex",
|
|
4223
|
-
|
|
4224
|
-
|
|
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"
|
|
4225
4440
|
},
|
|
4226
4441
|
children: /* @__PURE__ */ jsx(
|
|
4227
|
-
|
|
4442
|
+
StatusCard,
|
|
4228
4443
|
{
|
|
4229
|
-
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
backgroundColor: isSuccess ? "#dcfce7" : isError ? "#fee2e2" : "#f3f4f6",
|
|
4234
|
-
display: "flex",
|
|
4235
|
-
alignItems: "center",
|
|
4236
|
-
justifyContent: "center"
|
|
4237
|
-
},
|
|
4238
|
-
children: isProcessing ? /* @__PURE__ */ jsx(
|
|
4239
|
-
"div",
|
|
4240
|
-
{
|
|
4241
|
-
style: {
|
|
4242
|
-
width: "24px",
|
|
4243
|
-
height: "24px",
|
|
4244
|
-
border: "3px solid #e5e7eb",
|
|
4245
|
-
borderTopColor: theme.colors.primary,
|
|
4246
|
-
borderRadius: "50%",
|
|
4247
|
-
animation: "spin 1s linear infinite"
|
|
4248
|
-
}
|
|
4249
|
-
}
|
|
4250
|
-
) : 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
|
|
4251
4448
|
}
|
|
4252
4449
|
)
|
|
4253
4450
|
}
|
|
4254
4451
|
),
|
|
4255
|
-
/* @__PURE__ */ jsx(
|
|
4452
|
+
!isProcessing && /* @__PURE__ */ jsx(
|
|
4256
4453
|
"div",
|
|
4257
4454
|
{
|
|
4258
4455
|
style: {
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
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"
|
|
4263
4461
|
},
|
|
4264
|
-
children:
|
|
4462
|
+
children: /* @__PURE__ */ jsx(
|
|
4265
4463
|
"div",
|
|
4266
4464
|
{
|
|
4267
4465
|
style: {
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
border: `1px solid ${step.status === "success" ? "#bbf7d0" : step.status === "failed" ? "#fecaca" : "#e5e7eb"}`
|
|
4466
|
+
display: "flex",
|
|
4467
|
+
flexDirection: "column",
|
|
4468
|
+
gap: "8px"
|
|
4272
4469
|
},
|
|
4273
|
-
children: /* @__PURE__ */ jsxs(
|
|
4470
|
+
children: steps.map((step, idx) => /* @__PURE__ */ jsxs(
|
|
4274
4471
|
"div",
|
|
4275
4472
|
{
|
|
4276
4473
|
style: {
|
|
4474
|
+
padding: "10px 12px",
|
|
4475
|
+
borderRadius: "6px",
|
|
4476
|
+
backgroundColor: "#f9fafb",
|
|
4477
|
+
border: "1px solid #e5e7eb",
|
|
4277
4478
|
display: "flex",
|
|
4278
4479
|
justifyContent: "space-between",
|
|
4279
4480
|
alignItems: "center"
|
|
@@ -4283,9 +4484,8 @@ const DepositStatusPanel = ({
|
|
|
4283
4484
|
"span",
|
|
4284
4485
|
{
|
|
4285
4486
|
style: {
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
color: "#111827"
|
|
4487
|
+
fontSize: "13px",
|
|
4488
|
+
color: "#374151"
|
|
4289
4489
|
},
|
|
4290
4490
|
children: step.description || `Step ${idx + 1}`
|
|
4291
4491
|
}
|
|
@@ -4295,17 +4495,18 @@ const DepositStatusPanel = ({
|
|
|
4295
4495
|
{
|
|
4296
4496
|
style: {
|
|
4297
4497
|
fontSize: "12px",
|
|
4298
|
-
color: step.status === "success" ? "#
|
|
4498
|
+
color: step.status === "success" ? "#10b981" : step.status === "failed" ? "#ef4444" : "#6b7280",
|
|
4499
|
+
fontWeight: 500
|
|
4299
4500
|
},
|
|
4300
|
-
children: step.status === "success" ? "\u2713
|
|
4501
|
+
children: step.status === "success" ? "\u2713" : step.status === "failed" ? "\u2717" : "\u25CB"
|
|
4301
4502
|
}
|
|
4302
4503
|
)
|
|
4303
4504
|
]
|
|
4304
|
-
}
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
)
|
|
4505
|
+
},
|
|
4506
|
+
idx
|
|
4507
|
+
))
|
|
4508
|
+
}
|
|
4509
|
+
)
|
|
4309
4510
|
}
|
|
4310
4511
|
),
|
|
4311
4512
|
!isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
@@ -4325,7 +4526,11 @@ const DepositStatusPanel = ({
|
|
|
4325
4526
|
fontSize: "16px",
|
|
4326
4527
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4327
4528
|
textTransform: "uppercase",
|
|
4328
|
-
cursor: "pointer"
|
|
4529
|
+
cursor: "pointer",
|
|
4530
|
+
display: "flex",
|
|
4531
|
+
alignItems: "center",
|
|
4532
|
+
justifyContent: "center",
|
|
4533
|
+
gap: "8px"
|
|
4329
4534
|
},
|
|
4330
4535
|
children: "RETRY"
|
|
4331
4536
|
}
|
|
@@ -4339,16 +4544,20 @@ const DepositStatusPanel = ({
|
|
|
4339
4544
|
height: "48px",
|
|
4340
4545
|
padding: "14px 24px",
|
|
4341
4546
|
borderRadius: "6px",
|
|
4342
|
-
backgroundColor:
|
|
4547
|
+
backgroundColor: "#ea4b4b",
|
|
4343
4548
|
border: "1px solid #0e0d0b",
|
|
4344
4549
|
color: "#0e0d0b",
|
|
4345
4550
|
fontWeight: 500,
|
|
4346
4551
|
fontSize: "16px",
|
|
4347
4552
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4348
4553
|
textTransform: "uppercase",
|
|
4349
|
-
cursor: "pointer"
|
|
4554
|
+
cursor: "pointer",
|
|
4555
|
+
display: "flex",
|
|
4556
|
+
alignItems: "center",
|
|
4557
|
+
justifyContent: "center",
|
|
4558
|
+
gap: "8px"
|
|
4350
4559
|
},
|
|
4351
|
-
children:
|
|
4560
|
+
children: "CONTINUE \u2192"
|
|
4352
4561
|
}
|
|
4353
4562
|
)
|
|
4354
4563
|
] }),
|
|
@@ -4363,9 +4572,9 @@ const DepositStatusPanel = ({
|
|
|
4363
4572
|
);
|
|
4364
4573
|
}
|
|
4365
4574
|
if (!isOpen || !results || results.length === 0) return null;
|
|
4366
|
-
const
|
|
4367
|
-
const
|
|
4368
|
-
const
|
|
4575
|
+
const allSuccess = results.every((r) => r.success);
|
|
4576
|
+
const firstResult = results[0];
|
|
4577
|
+
const txHash = firstResult?.txHash;
|
|
4369
4578
|
return /* @__PURE__ */ jsxs(
|
|
4370
4579
|
"div",
|
|
4371
4580
|
{
|
|
@@ -4390,7 +4599,7 @@ const DepositStatusPanel = ({
|
|
|
4390
4599
|
boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
|
|
4391
4600
|
},
|
|
4392
4601
|
children: [
|
|
4393
|
-
/* @__PURE__ */
|
|
4602
|
+
/* @__PURE__ */ jsx(
|
|
4394
4603
|
"div",
|
|
4395
4604
|
{
|
|
4396
4605
|
style: {
|
|
@@ -4399,157 +4608,67 @@ const DepositStatusPanel = ({
|
|
|
4399
4608
|
justifyContent: "space-between",
|
|
4400
4609
|
marginBottom: "16px"
|
|
4401
4610
|
},
|
|
4402
|
-
children:
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
{
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
"span",
|
|
4416
|
-
{
|
|
4417
|
-
style: {
|
|
4418
|
-
fontSize: "13px",
|
|
4419
|
-
fontWeight: 500,
|
|
4420
|
-
color: "#6b7280",
|
|
4421
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4422
|
-
},
|
|
4423
|
-
children: "Deposit Results"
|
|
4424
|
-
}
|
|
4425
|
-
),
|
|
4426
|
-
/* @__PURE__ */ jsx(
|
|
4427
|
-
"svg",
|
|
4428
|
-
{
|
|
4429
|
-
width: "16",
|
|
4430
|
-
height: "16",
|
|
4431
|
-
viewBox: "0 0 16 16",
|
|
4432
|
-
fill: "none",
|
|
4433
|
-
style: {
|
|
4434
|
-
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4435
|
-
transition: "transform 0.3s ease"
|
|
4436
|
-
},
|
|
4437
|
-
children: /* @__PURE__ */ jsx(
|
|
4438
|
-
"path",
|
|
4439
|
-
{
|
|
4440
|
-
d: "M4 6L8 10L12 6",
|
|
4441
|
-
stroke: "#6b7280",
|
|
4442
|
-
strokeWidth: "2",
|
|
4443
|
-
strokeLinecap: "round",
|
|
4444
|
-
strokeLinejoin: "round"
|
|
4445
|
-
}
|
|
4446
|
-
)
|
|
4447
|
-
}
|
|
4448
|
-
)
|
|
4449
|
-
]
|
|
4450
|
-
}
|
|
4451
|
-
),
|
|
4452
|
-
/* @__PURE__ */ jsx(
|
|
4453
|
-
"button",
|
|
4454
|
-
{
|
|
4455
|
-
onClick: handleClose,
|
|
4456
|
-
style: {
|
|
4457
|
-
background: "none",
|
|
4458
|
-
border: "none",
|
|
4459
|
-
cursor: "pointer",
|
|
4460
|
-
padding: "4px",
|
|
4461
|
-
display: "flex",
|
|
4462
|
-
alignItems: "center",
|
|
4463
|
-
justifyContent: "center",
|
|
4464
|
-
color: "#6b7280",
|
|
4465
|
-
transition: "color 0.2s ease"
|
|
4466
|
-
},
|
|
4467
|
-
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4468
|
-
"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",
|
|
4469
4624
|
{
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4625
|
+
style: {
|
|
4626
|
+
fontSize: "13px",
|
|
4627
|
+
fontWeight: 500,
|
|
4628
|
+
color: "#6b7280",
|
|
4629
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4630
|
+
},
|
|
4631
|
+
children: "Deposit Results"
|
|
4475
4632
|
}
|
|
4476
|
-
)
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
]
|
|
4480
|
-
}
|
|
4481
|
-
),
|
|
4482
|
-
/* @__PURE__ */ jsxs(
|
|
4483
|
-
"div",
|
|
4484
|
-
{
|
|
4485
|
-
style: {
|
|
4486
|
-
display: "flex",
|
|
4487
|
-
alignItems: "center",
|
|
4488
|
-
justifyContent: "center",
|
|
4489
|
-
gap: "12px",
|
|
4490
|
-
marginBottom: "16px",
|
|
4491
|
-
padding: "12px",
|
|
4492
|
-
backgroundColor: allSuccess ? "#f0fdf4" : "#fefce8",
|
|
4493
|
-
borderRadius: "8px",
|
|
4494
|
-
border: `1px solid ${allSuccess ? "#bbf7d0" : "#fef08a"}`
|
|
4495
|
-
},
|
|
4496
|
-
children: [
|
|
4497
|
-
/* @__PURE__ */ jsx(
|
|
4498
|
-
"div",
|
|
4499
|
-
{
|
|
4500
|
-
style: {
|
|
4501
|
-
width: "32px",
|
|
4502
|
-
height: "32px",
|
|
4503
|
-
borderRadius: "50%",
|
|
4504
|
-
backgroundColor: allSuccess ? "#dcfce7" : "#fef3c7",
|
|
4505
|
-
display: "flex",
|
|
4506
|
-
alignItems: "center",
|
|
4507
|
-
justifyContent: "center"
|
|
4508
|
-
},
|
|
4509
|
-
children: /* @__PURE__ */ jsx(
|
|
4510
|
-
"span",
|
|
4633
|
+
),
|
|
4634
|
+
/* @__PURE__ */ jsx(
|
|
4635
|
+
"svg",
|
|
4511
4636
|
{
|
|
4637
|
+
width: "16",
|
|
4638
|
+
height: "16",
|
|
4639
|
+
viewBox: "0 0 16 16",
|
|
4640
|
+
fill: "none",
|
|
4512
4641
|
style: {
|
|
4513
|
-
|
|
4514
|
-
|
|
4642
|
+
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4643
|
+
transition: "transform 0.3s ease"
|
|
4515
4644
|
},
|
|
4516
|
-
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
|
+
)
|
|
4517
4655
|
}
|
|
4518
4656
|
)
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
/* @__PURE__ */ jsx(
|
|
4523
|
-
"p",
|
|
4524
|
-
{
|
|
4525
|
-
style: {
|
|
4526
|
-
fontWeight: 600,
|
|
4527
|
-
fontSize: "14px",
|
|
4528
|
-
color: allSuccess ? "#166534" : "#854d0e",
|
|
4529
|
-
margin: 0
|
|
4530
|
-
},
|
|
4531
|
-
children: allSuccess ? "All Deposits Complete!" : `${successCount} of ${results.length} Deposits Complete`
|
|
4532
|
-
}
|
|
4533
|
-
),
|
|
4534
|
-
/* @__PURE__ */ jsxs(
|
|
4535
|
-
"p",
|
|
4536
|
-
{
|
|
4537
|
-
style: {
|
|
4538
|
-
fontSize: "12px",
|
|
4539
|
-
color: "#6b7280",
|
|
4540
|
-
margin: "2px 0 0 0"
|
|
4541
|
-
},
|
|
4542
|
-
children: [
|
|
4543
|
-
"on ",
|
|
4544
|
-
chainName
|
|
4545
|
-
]
|
|
4546
|
-
}
|
|
4547
|
-
)
|
|
4548
|
-
] })
|
|
4549
|
-
]
|
|
4657
|
+
]
|
|
4658
|
+
}
|
|
4659
|
+
)
|
|
4550
4660
|
}
|
|
4551
4661
|
),
|
|
4552
|
-
/* @__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(
|
|
4553
4672
|
"div",
|
|
4554
4673
|
{
|
|
4555
4674
|
style: {
|
|
@@ -4573,10 +4692,13 @@ const DepositStatusPanel = ({
|
|
|
4573
4692
|
"div",
|
|
4574
4693
|
{
|
|
4575
4694
|
style: {
|
|
4576
|
-
padding: "12px",
|
|
4577
|
-
borderRadius: "
|
|
4578
|
-
|
|
4579
|
-
|
|
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"
|
|
4580
4702
|
},
|
|
4581
4703
|
children: [
|
|
4582
4704
|
/* @__PURE__ */ jsxs(
|
|
@@ -4584,76 +4706,35 @@ const DepositStatusPanel = ({
|
|
|
4584
4706
|
{
|
|
4585
4707
|
style: {
|
|
4586
4708
|
display: "flex",
|
|
4587
|
-
|
|
4588
|
-
|
|
4709
|
+
alignItems: "center",
|
|
4710
|
+
gap: "8px"
|
|
4589
4711
|
},
|
|
4590
4712
|
children: [
|
|
4591
|
-
/* @__PURE__ */ jsxs(
|
|
4592
|
-
"div",
|
|
4593
|
-
{
|
|
4594
|
-
style: {
|
|
4595
|
-
display: "flex",
|
|
4596
|
-
alignItems: "center",
|
|
4597
|
-
gap: "8px"
|
|
4598
|
-
},
|
|
4599
|
-
children: [
|
|
4600
|
-
/* @__PURE__ */ jsx(
|
|
4601
|
-
"span",
|
|
4602
|
-
{
|
|
4603
|
-
style: {
|
|
4604
|
-
fontWeight: 600,
|
|
4605
|
-
fontSize: "14px",
|
|
4606
|
-
color: "#111827",
|
|
4607
|
-
fontFamily: '"IBM Plex Mono", monospace'
|
|
4608
|
-
},
|
|
4609
|
-
children: result.asset.symbol
|
|
4610
|
-
}
|
|
4611
|
-
),
|
|
4612
|
-
result.amount && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4613
|
-
]
|
|
4614
|
-
}
|
|
4615
|
-
),
|
|
4616
4713
|
/* @__PURE__ */ jsx(
|
|
4617
4714
|
"span",
|
|
4618
4715
|
{
|
|
4619
4716
|
style: {
|
|
4620
|
-
|
|
4717
|
+
fontWeight: 600,
|
|
4621
4718
|
fontSize: "13px",
|
|
4622
|
-
|
|
4719
|
+
color: "#111827",
|
|
4720
|
+
fontFamily: '"IBM Plex Mono", monospace'
|
|
4623
4721
|
},
|
|
4624
|
-
children: result.
|
|
4722
|
+
children: result.asset.symbol
|
|
4625
4723
|
}
|
|
4626
|
-
)
|
|
4724
|
+
),
|
|
4725
|
+
result.amount && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4627
4726
|
]
|
|
4628
4727
|
}
|
|
4629
4728
|
),
|
|
4630
|
-
|
|
4631
|
-
"
|
|
4632
|
-
{
|
|
4633
|
-
href: `${explorerUrl}/tx/${result.txHash}`,
|
|
4634
|
-
target: "_blank",
|
|
4635
|
-
rel: "noopener noreferrer",
|
|
4636
|
-
style: {
|
|
4637
|
-
fontSize: "12px",
|
|
4638
|
-
color: theme.colors.primary,
|
|
4639
|
-
textDecoration: "none",
|
|
4640
|
-
display: "block",
|
|
4641
|
-
marginTop: "4px"
|
|
4642
|
-
},
|
|
4643
|
-
children: "View on Explorer \u2192"
|
|
4644
|
-
}
|
|
4645
|
-
),
|
|
4646
|
-
result.error && /* @__PURE__ */ jsx(
|
|
4647
|
-
"p",
|
|
4729
|
+
/* @__PURE__ */ jsx(
|
|
4730
|
+
"span",
|
|
4648
4731
|
{
|
|
4649
4732
|
style: {
|
|
4650
4733
|
fontSize: "12px",
|
|
4651
|
-
color: "#
|
|
4652
|
-
|
|
4653
|
-
wordWrap: "break-word",
|
|
4654
|
-
overflowWrap: "break-word"
|
|
4734
|
+
color: result.success ? "#10b981" : "#ef4444",
|
|
4735
|
+
fontWeight: 500
|
|
4655
4736
|
},
|
|
4656
|
-
children: result.
|
|
4737
|
+
children: result.success ? "\u2713" : "\u2717"
|
|
4657
4738
|
}
|
|
4658
4739
|
)
|
|
4659
4740
|
]
|