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