@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.cjs.js
CHANGED
|
@@ -12,10 +12,11 @@ const reactAuth = require('@privy-io/react-auth');
|
|
|
12
12
|
const sdkReactCore = require('@dynamic-labs/sdk-react-core');
|
|
13
13
|
const spiceflowCoreTest = require('spiceflow-core-test');
|
|
14
14
|
const wagmi = require('wagmi');
|
|
15
|
+
const chains$1 = require('@/utils/chains');
|
|
15
16
|
const authDynamic = require('./auth-dynamic.cjs.js');
|
|
16
17
|
const authPrivy = require('./auth-privy.cjs.js');
|
|
17
18
|
const reactQuery = require('@tanstack/react-query');
|
|
18
|
-
const chains$
|
|
19
|
+
const chains$2 = require('wagmi/chains');
|
|
19
20
|
const connectors = require('wagmi/connectors');
|
|
20
21
|
|
|
21
22
|
const CHAIN_CONFIGS = {
|
|
@@ -60,7 +61,7 @@ const CHAIN_CONFIGS = {
|
|
|
60
61
|
{
|
|
61
62
|
address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
|
|
62
63
|
name: "Mock Wrapped BTC",
|
|
63
|
-
symbol: "
|
|
64
|
+
symbol: "WBTC",
|
|
64
65
|
decimals: 8
|
|
65
66
|
}
|
|
66
67
|
]
|
|
@@ -96,6 +97,12 @@ const CHAIN_CONFIGS = {
|
|
|
96
97
|
name: "USD Coin",
|
|
97
98
|
symbol: "USDC",
|
|
98
99
|
decimals: 18
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
address: "0xBA4c54d4CF10C766c22A08F783998cFaB237F7C9",
|
|
103
|
+
name: "Mock Wrapped BTC",
|
|
104
|
+
symbol: "WBTC",
|
|
105
|
+
decimals: 8
|
|
99
106
|
}
|
|
100
107
|
]
|
|
101
108
|
},
|
|
@@ -132,9 +139,9 @@ const CHAIN_CONFIGS = {
|
|
|
132
139
|
decimals: 18
|
|
133
140
|
},
|
|
134
141
|
{
|
|
135
|
-
address: "
|
|
142
|
+
address: "0x16DD3a855433059Be478FAcb416D9aFed6CA96Ec",
|
|
136
143
|
name: "Mock Wrapped BTC",
|
|
137
|
-
symbol: "
|
|
144
|
+
symbol: "WBTC",
|
|
138
145
|
decimals: 8
|
|
139
146
|
}
|
|
140
147
|
]
|
|
@@ -3080,7 +3087,7 @@ const useWallet = () => {
|
|
|
3080
3087
|
};
|
|
3081
3088
|
};
|
|
3082
3089
|
|
|
3083
|
-
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-submission-api-dev.spicenet.io";
|
|
3090
|
+
const RELAYER_API_URL = process.env.NEXT_PUBLIC_RELAYER_API_URL || "https://tx-submission-api-dev.spicenet.io/";
|
|
3084
3091
|
class RelayerService {
|
|
3085
3092
|
constructor() {
|
|
3086
3093
|
this.baseUrl = RELAYER_API_URL;
|
|
@@ -4115,6 +4122,138 @@ const useSpiceAssets = ({
|
|
|
4115
4122
|
};
|
|
4116
4123
|
};
|
|
4117
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
|
+
};
|
|
4118
4257
|
const DepositStatusPanel = ({
|
|
4119
4258
|
isOpen,
|
|
4120
4259
|
onClose,
|
|
@@ -4136,12 +4275,6 @@ const DepositStatusPanel = ({
|
|
|
4136
4275
|
setIsClosing(false);
|
|
4137
4276
|
}
|
|
4138
4277
|
}, [isOpen, intentStatus]);
|
|
4139
|
-
const handleClose = () => {
|
|
4140
|
-
setIsClosing(true);
|
|
4141
|
-
setTimeout(() => {
|
|
4142
|
-
onClose();
|
|
4143
|
-
}, 300);
|
|
4144
|
-
};
|
|
4145
4278
|
const handleComplete = () => {
|
|
4146
4279
|
setIsClosing(true);
|
|
4147
4280
|
setTimeout(() => {
|
|
@@ -4156,6 +4289,12 @@ const DepositStatusPanel = ({
|
|
|
4156
4289
|
const isProcessing = overallStatus === "processing";
|
|
4157
4290
|
const isSuccess = overallStatus === "success";
|
|
4158
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);
|
|
4159
4298
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4160
4299
|
"div",
|
|
4161
4300
|
{
|
|
@@ -4174,20 +4313,56 @@ const DepositStatusPanel = ({
|
|
|
4174
4313
|
display: "flex",
|
|
4175
4314
|
alignItems: "center",
|
|
4176
4315
|
justifyContent: "space-between",
|
|
4177
|
-
marginBottom: "
|
|
4316
|
+
marginBottom: "16px"
|
|
4178
4317
|
},
|
|
4179
4318
|
children: [
|
|
4180
|
-
/* @__PURE__ */ jsxRuntime.
|
|
4181
|
-
"
|
|
4319
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4320
|
+
"div",
|
|
4182
4321
|
{
|
|
4183
4322
|
style: {
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4323
|
+
display: "flex",
|
|
4324
|
+
alignItems: "center",
|
|
4325
|
+
gap: "8px",
|
|
4326
|
+
cursor: !isProcessing ? "pointer" : "default"
|
|
4189
4327
|
},
|
|
4190
|
-
|
|
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
|
+
]
|
|
4191
4366
|
}
|
|
4192
4367
|
),
|
|
4193
4368
|
!isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4199,6 +4374,9 @@ const DepositStatusPanel = ({
|
|
|
4199
4374
|
border: "none",
|
|
4200
4375
|
cursor: "pointer",
|
|
4201
4376
|
padding: "4px",
|
|
4377
|
+
display: "flex",
|
|
4378
|
+
alignItems: "center",
|
|
4379
|
+
justifyContent: "center",
|
|
4202
4380
|
color: "#6b7280"
|
|
4203
4381
|
},
|
|
4204
4382
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4216,65 +4394,89 @@ const DepositStatusPanel = ({
|
|
|
4216
4394
|
]
|
|
4217
4395
|
}
|
|
4218
4396
|
),
|
|
4219
|
-
/* @__PURE__ */ jsxRuntime.
|
|
4397
|
+
isProcessing && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4220
4398
|
"div",
|
|
4221
4399
|
{
|
|
4222
4400
|
style: {
|
|
4223
4401
|
display: "flex",
|
|
4224
|
-
|
|
4225
|
-
|
|
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"
|
|
4226
4442
|
},
|
|
4227
4443
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4228
|
-
|
|
4444
|
+
StatusCard,
|
|
4229
4445
|
{
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
backgroundColor: isSuccess ? "#dcfce7" : isError ? "#fee2e2" : "#f3f4f6",
|
|
4235
|
-
display: "flex",
|
|
4236
|
-
alignItems: "center",
|
|
4237
|
-
justifyContent: "center"
|
|
4238
|
-
},
|
|
4239
|
-
children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4240
|
-
"div",
|
|
4241
|
-
{
|
|
4242
|
-
style: {
|
|
4243
|
-
width: "24px",
|
|
4244
|
-
height: "24px",
|
|
4245
|
-
border: "3px solid #e5e7eb",
|
|
4246
|
-
borderTopColor: theme.colors.primary,
|
|
4247
|
-
borderRadius: "50%",
|
|
4248
|
-
animation: "spin 1s linear infinite"
|
|
4249
|
-
}
|
|
4250
|
-
}
|
|
4251
|
-
) : 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
|
|
4252
4450
|
}
|
|
4253
4451
|
)
|
|
4254
4452
|
}
|
|
4255
4453
|
),
|
|
4256
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4454
|
+
!isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4257
4455
|
"div",
|
|
4258
4456
|
{
|
|
4259
4457
|
style: {
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
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"
|
|
4264
4463
|
},
|
|
4265
|
-
children:
|
|
4464
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4266
4465
|
"div",
|
|
4267
4466
|
{
|
|
4268
4467
|
style: {
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
border: `1px solid ${step.status === "success" ? "#bbf7d0" : step.status === "failed" ? "#fecaca" : "#e5e7eb"}`
|
|
4468
|
+
display: "flex",
|
|
4469
|
+
flexDirection: "column",
|
|
4470
|
+
gap: "8px"
|
|
4273
4471
|
},
|
|
4274
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4472
|
+
children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4275
4473
|
"div",
|
|
4276
4474
|
{
|
|
4277
4475
|
style: {
|
|
4476
|
+
padding: "10px 12px",
|
|
4477
|
+
borderRadius: "6px",
|
|
4478
|
+
backgroundColor: "#f9fafb",
|
|
4479
|
+
border: "1px solid #e5e7eb",
|
|
4278
4480
|
display: "flex",
|
|
4279
4481
|
justifyContent: "space-between",
|
|
4280
4482
|
alignItems: "center"
|
|
@@ -4284,9 +4486,8 @@ const DepositStatusPanel = ({
|
|
|
4284
4486
|
"span",
|
|
4285
4487
|
{
|
|
4286
4488
|
style: {
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
color: "#111827"
|
|
4489
|
+
fontSize: "13px",
|
|
4490
|
+
color: "#374151"
|
|
4290
4491
|
},
|
|
4291
4492
|
children: step.description || `Step ${idx + 1}`
|
|
4292
4493
|
}
|
|
@@ -4296,17 +4497,18 @@ const DepositStatusPanel = ({
|
|
|
4296
4497
|
{
|
|
4297
4498
|
style: {
|
|
4298
4499
|
fontSize: "12px",
|
|
4299
|
-
color: step.status === "success" ? "#
|
|
4500
|
+
color: step.status === "success" ? "#10b981" : step.status === "failed" ? "#ef4444" : "#6b7280",
|
|
4501
|
+
fontWeight: 500
|
|
4300
4502
|
},
|
|
4301
|
-
children: step.status === "success" ? "\u2713
|
|
4503
|
+
children: step.status === "success" ? "\u2713" : step.status === "failed" ? "\u2717" : "\u25CB"
|
|
4302
4504
|
}
|
|
4303
4505
|
)
|
|
4304
4506
|
]
|
|
4305
|
-
}
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
)
|
|
4507
|
+
},
|
|
4508
|
+
idx
|
|
4509
|
+
))
|
|
4510
|
+
}
|
|
4511
|
+
)
|
|
4310
4512
|
}
|
|
4311
4513
|
),
|
|
4312
4514
|
!isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
@@ -4326,7 +4528,11 @@ const DepositStatusPanel = ({
|
|
|
4326
4528
|
fontSize: "16px",
|
|
4327
4529
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4328
4530
|
textTransform: "uppercase",
|
|
4329
|
-
cursor: "pointer"
|
|
4531
|
+
cursor: "pointer",
|
|
4532
|
+
display: "flex",
|
|
4533
|
+
alignItems: "center",
|
|
4534
|
+
justifyContent: "center",
|
|
4535
|
+
gap: "8px"
|
|
4330
4536
|
},
|
|
4331
4537
|
children: "RETRY"
|
|
4332
4538
|
}
|
|
@@ -4340,16 +4546,20 @@ const DepositStatusPanel = ({
|
|
|
4340
4546
|
height: "48px",
|
|
4341
4547
|
padding: "14px 24px",
|
|
4342
4548
|
borderRadius: "6px",
|
|
4343
|
-
backgroundColor:
|
|
4549
|
+
backgroundColor: "#ea4b4b",
|
|
4344
4550
|
border: "1px solid #0e0d0b",
|
|
4345
4551
|
color: "#0e0d0b",
|
|
4346
4552
|
fontWeight: 500,
|
|
4347
4553
|
fontSize: "16px",
|
|
4348
4554
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
4349
4555
|
textTransform: "uppercase",
|
|
4350
|
-
cursor: "pointer"
|
|
4556
|
+
cursor: "pointer",
|
|
4557
|
+
display: "flex",
|
|
4558
|
+
alignItems: "center",
|
|
4559
|
+
justifyContent: "center",
|
|
4560
|
+
gap: "8px"
|
|
4351
4561
|
},
|
|
4352
|
-
children:
|
|
4562
|
+
children: "CONTINUE \u2192"
|
|
4353
4563
|
}
|
|
4354
4564
|
)
|
|
4355
4565
|
] }),
|
|
@@ -4364,9 +4574,9 @@ const DepositStatusPanel = ({
|
|
|
4364
4574
|
);
|
|
4365
4575
|
}
|
|
4366
4576
|
if (!isOpen || !results || results.length === 0) return null;
|
|
4367
|
-
const
|
|
4368
|
-
const
|
|
4369
|
-
const
|
|
4577
|
+
const allSuccess = results.every((r) => r.success);
|
|
4578
|
+
const firstResult = results[0];
|
|
4579
|
+
const txHash = firstResult?.txHash;
|
|
4370
4580
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4371
4581
|
"div",
|
|
4372
4582
|
{
|
|
@@ -4391,7 +4601,7 @@ const DepositStatusPanel = ({
|
|
|
4391
4601
|
boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
|
|
4392
4602
|
},
|
|
4393
4603
|
children: [
|
|
4394
|
-
/* @__PURE__ */ jsxRuntime.
|
|
4604
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4395
4605
|
"div",
|
|
4396
4606
|
{
|
|
4397
4607
|
style: {
|
|
@@ -4400,157 +4610,67 @@ const DepositStatusPanel = ({
|
|
|
4400
4610
|
justifyContent: "space-between",
|
|
4401
4611
|
marginBottom: "16px"
|
|
4402
4612
|
},
|
|
4403
|
-
children:
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
|
-
{
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
"span",
|
|
4417
|
-
{
|
|
4418
|
-
style: {
|
|
4419
|
-
fontSize: "13px",
|
|
4420
|
-
fontWeight: 500,
|
|
4421
|
-
color: "#6b7280",
|
|
4422
|
-
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4423
|
-
},
|
|
4424
|
-
children: "Deposit Results"
|
|
4425
|
-
}
|
|
4426
|
-
),
|
|
4427
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4428
|
-
"svg",
|
|
4429
|
-
{
|
|
4430
|
-
width: "16",
|
|
4431
|
-
height: "16",
|
|
4432
|
-
viewBox: "0 0 16 16",
|
|
4433
|
-
fill: "none",
|
|
4434
|
-
style: {
|
|
4435
|
-
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4436
|
-
transition: "transform 0.3s ease"
|
|
4437
|
-
},
|
|
4438
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4439
|
-
"path",
|
|
4440
|
-
{
|
|
4441
|
-
d: "M4 6L8 10L12 6",
|
|
4442
|
-
stroke: "#6b7280",
|
|
4443
|
-
strokeWidth: "2",
|
|
4444
|
-
strokeLinecap: "round",
|
|
4445
|
-
strokeLinejoin: "round"
|
|
4446
|
-
}
|
|
4447
|
-
)
|
|
4448
|
-
}
|
|
4449
|
-
)
|
|
4450
|
-
]
|
|
4451
|
-
}
|
|
4452
|
-
),
|
|
4453
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4454
|
-
"button",
|
|
4455
|
-
{
|
|
4456
|
-
onClick: handleClose,
|
|
4457
|
-
style: {
|
|
4458
|
-
background: "none",
|
|
4459
|
-
border: "none",
|
|
4460
|
-
cursor: "pointer",
|
|
4461
|
-
padding: "4px",
|
|
4462
|
-
display: "flex",
|
|
4463
|
-
alignItems: "center",
|
|
4464
|
-
justifyContent: "center",
|
|
4465
|
-
color: "#6b7280",
|
|
4466
|
-
transition: "color 0.2s ease"
|
|
4467
|
-
},
|
|
4468
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4469
|
-
"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",
|
|
4470
4626
|
{
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
|
|
4627
|
+
style: {
|
|
4628
|
+
fontSize: "13px",
|
|
4629
|
+
fontWeight: 500,
|
|
4630
|
+
color: "#6b7280",
|
|
4631
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily
|
|
4632
|
+
},
|
|
4633
|
+
children: "Deposit Results"
|
|
4476
4634
|
}
|
|
4477
|
-
)
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
]
|
|
4481
|
-
}
|
|
4482
|
-
),
|
|
4483
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4484
|
-
"div",
|
|
4485
|
-
{
|
|
4486
|
-
style: {
|
|
4487
|
-
display: "flex",
|
|
4488
|
-
alignItems: "center",
|
|
4489
|
-
justifyContent: "center",
|
|
4490
|
-
gap: "12px",
|
|
4491
|
-
marginBottom: "16px",
|
|
4492
|
-
padding: "12px",
|
|
4493
|
-
backgroundColor: allSuccess ? "#f0fdf4" : "#fefce8",
|
|
4494
|
-
borderRadius: "8px",
|
|
4495
|
-
border: `1px solid ${allSuccess ? "#bbf7d0" : "#fef08a"}`
|
|
4496
|
-
},
|
|
4497
|
-
children: [
|
|
4498
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4499
|
-
"div",
|
|
4500
|
-
{
|
|
4501
|
-
style: {
|
|
4502
|
-
width: "32px",
|
|
4503
|
-
height: "32px",
|
|
4504
|
-
borderRadius: "50%",
|
|
4505
|
-
backgroundColor: allSuccess ? "#dcfce7" : "#fef3c7",
|
|
4506
|
-
display: "flex",
|
|
4507
|
-
alignItems: "center",
|
|
4508
|
-
justifyContent: "center"
|
|
4509
|
-
},
|
|
4510
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4511
|
-
"span",
|
|
4635
|
+
),
|
|
4636
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4637
|
+
"svg",
|
|
4512
4638
|
{
|
|
4639
|
+
width: "16",
|
|
4640
|
+
height: "16",
|
|
4641
|
+
viewBox: "0 0 16 16",
|
|
4642
|
+
fill: "none",
|
|
4513
4643
|
style: {
|
|
4514
|
-
|
|
4515
|
-
|
|
4644
|
+
transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
4645
|
+
transition: "transform 0.3s ease"
|
|
4516
4646
|
},
|
|
4517
|
-
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
|
+
)
|
|
4518
4657
|
}
|
|
4519
4658
|
)
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4524
|
-
"p",
|
|
4525
|
-
{
|
|
4526
|
-
style: {
|
|
4527
|
-
fontWeight: 600,
|
|
4528
|
-
fontSize: "14px",
|
|
4529
|
-
color: allSuccess ? "#166534" : "#854d0e",
|
|
4530
|
-
margin: 0
|
|
4531
|
-
},
|
|
4532
|
-
children: allSuccess ? "All Deposits Complete!" : `${successCount} of ${results.length} Deposits Complete`
|
|
4533
|
-
}
|
|
4534
|
-
),
|
|
4535
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4536
|
-
"p",
|
|
4537
|
-
{
|
|
4538
|
-
style: {
|
|
4539
|
-
fontSize: "12px",
|
|
4540
|
-
color: "#6b7280",
|
|
4541
|
-
margin: "2px 0 0 0"
|
|
4542
|
-
},
|
|
4543
|
-
children: [
|
|
4544
|
-
"on ",
|
|
4545
|
-
chainName
|
|
4546
|
-
]
|
|
4547
|
-
}
|
|
4548
|
-
)
|
|
4549
|
-
] })
|
|
4550
|
-
]
|
|
4659
|
+
]
|
|
4660
|
+
}
|
|
4661
|
+
)
|
|
4551
4662
|
}
|
|
4552
4663
|
),
|
|
4553
|
-
/* @__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(
|
|
4554
4674
|
"div",
|
|
4555
4675
|
{
|
|
4556
4676
|
style: {
|
|
@@ -4574,10 +4694,13 @@ const DepositStatusPanel = ({
|
|
|
4574
4694
|
"div",
|
|
4575
4695
|
{
|
|
4576
4696
|
style: {
|
|
4577
|
-
padding: "12px",
|
|
4578
|
-
borderRadius: "
|
|
4579
|
-
|
|
4580
|
-
|
|
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"
|
|
4581
4704
|
},
|
|
4582
4705
|
children: [
|
|
4583
4706
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4585,76 +4708,35 @@ const DepositStatusPanel = ({
|
|
|
4585
4708
|
{
|
|
4586
4709
|
style: {
|
|
4587
4710
|
display: "flex",
|
|
4588
|
-
|
|
4589
|
-
|
|
4711
|
+
alignItems: "center",
|
|
4712
|
+
gap: "8px"
|
|
4590
4713
|
},
|
|
4591
4714
|
children: [
|
|
4592
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4593
|
-
"div",
|
|
4594
|
-
{
|
|
4595
|
-
style: {
|
|
4596
|
-
display: "flex",
|
|
4597
|
-
alignItems: "center",
|
|
4598
|
-
gap: "8px"
|
|
4599
|
-
},
|
|
4600
|
-
children: [
|
|
4601
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4602
|
-
"span",
|
|
4603
|
-
{
|
|
4604
|
-
style: {
|
|
4605
|
-
fontWeight: 600,
|
|
4606
|
-
fontSize: "14px",
|
|
4607
|
-
color: "#111827",
|
|
4608
|
-
fontFamily: '"IBM Plex Mono", monospace'
|
|
4609
|
-
},
|
|
4610
|
-
children: result.asset.symbol
|
|
4611
|
-
}
|
|
4612
|
-
),
|
|
4613
|
-
result.amount && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4614
|
-
]
|
|
4615
|
-
}
|
|
4616
|
-
),
|
|
4617
4715
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4618
4716
|
"span",
|
|
4619
4717
|
{
|
|
4620
4718
|
style: {
|
|
4621
|
-
|
|
4719
|
+
fontWeight: 600,
|
|
4622
4720
|
fontSize: "13px",
|
|
4623
|
-
|
|
4721
|
+
color: "#111827",
|
|
4722
|
+
fontFamily: '"IBM Plex Mono", monospace'
|
|
4624
4723
|
},
|
|
4625
|
-
children: result.
|
|
4724
|
+
children: result.asset.symbol
|
|
4626
4725
|
}
|
|
4627
|
-
)
|
|
4726
|
+
),
|
|
4727
|
+
result.amount && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
|
|
4628
4728
|
]
|
|
4629
4729
|
}
|
|
4630
4730
|
),
|
|
4631
|
-
|
|
4632
|
-
"
|
|
4633
|
-
{
|
|
4634
|
-
href: `${explorerUrl}/tx/${result.txHash}`,
|
|
4635
|
-
target: "_blank",
|
|
4636
|
-
rel: "noopener noreferrer",
|
|
4637
|
-
style: {
|
|
4638
|
-
fontSize: "12px",
|
|
4639
|
-
color: theme.colors.primary,
|
|
4640
|
-
textDecoration: "none",
|
|
4641
|
-
display: "block",
|
|
4642
|
-
marginTop: "4px"
|
|
4643
|
-
},
|
|
4644
|
-
children: "View on Explorer \u2192"
|
|
4645
|
-
}
|
|
4646
|
-
),
|
|
4647
|
-
result.error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4648
|
-
"p",
|
|
4731
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4732
|
+
"span",
|
|
4649
4733
|
{
|
|
4650
4734
|
style: {
|
|
4651
4735
|
fontSize: "12px",
|
|
4652
|
-
color: "#
|
|
4653
|
-
|
|
4654
|
-
wordWrap: "break-word",
|
|
4655
|
-
overflowWrap: "break-word"
|
|
4736
|
+
color: result.success ? "#10b981" : "#ef4444",
|
|
4737
|
+
fontWeight: 500
|
|
4656
4738
|
},
|
|
4657
|
-
children: result.
|
|
4739
|
+
children: result.success ? "\u2713" : "\u2717"
|
|
4658
4740
|
}
|
|
4659
4741
|
)
|
|
4660
4742
|
]
|
|
@@ -5607,6 +5689,7 @@ const CrossChainDepositModal = ({
|
|
|
5607
5689
|
title = "Deposit to Spicenet",
|
|
5608
5690
|
description = "Select tokens and enter amounts to deposit to your Spicenet Account",
|
|
5609
5691
|
chainId,
|
|
5692
|
+
embeddedWalletAddress,
|
|
5610
5693
|
externalWalletAddress,
|
|
5611
5694
|
escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
|
|
5612
5695
|
getChainConfig,
|
|
@@ -5756,15 +5839,40 @@ const CrossChainDepositModal = ({
|
|
|
5756
5839
|
data
|
|
5757
5840
|
});
|
|
5758
5841
|
}
|
|
5759
|
-
|
|
5842
|
+
const client = chains$1.getClientForChain(chainId);
|
|
5843
|
+
const receipt = await client.waitForTransactionReceipt({
|
|
5844
|
+
hash,
|
|
5845
|
+
timeout: 12e4,
|
|
5846
|
+
pollingInterval: 2e3,
|
|
5847
|
+
confirmations: 2
|
|
5848
|
+
});
|
|
5849
|
+
if (receipt.status !== "success") {
|
|
5850
|
+
throw new Error(`Transfer to escrow failed for ${asset.symbol}`);
|
|
5851
|
+
}
|
|
5852
|
+
const currentBlock = await client.getBlockNumber();
|
|
5853
|
+
const confirmations = currentBlock - receipt.blockNumber;
|
|
5854
|
+
if (confirmations < 2) {
|
|
5855
|
+
await new Promise((resolve) => setTimeout(resolve, 3e3));
|
|
5856
|
+
}
|
|
5857
|
+
console.log("submitting deposit to relayer with params:", {
|
|
5858
|
+
txHash: hash,
|
|
5859
|
+
sender: embeddedWalletAddress,
|
|
5860
|
+
tokenAddress: asset.address,
|
|
5861
|
+
chainId,
|
|
5862
|
+
amount: viem.parseUnits(amount, asset.decimals).toString(),
|
|
5863
|
+
user: embeddedWalletAddress,
|
|
5864
|
+
isDeposit: true
|
|
5865
|
+
});
|
|
5866
|
+
const depositResult = await relayerService.submitSpiceDeposit({
|
|
5760
5867
|
txHash: hash,
|
|
5761
|
-
sender:
|
|
5868
|
+
sender: embeddedWalletAddress,
|
|
5762
5869
|
tokenAddress: asset.address,
|
|
5763
5870
|
chainId,
|
|
5764
|
-
amount: amount.toString(),
|
|
5765
|
-
user:
|
|
5871
|
+
amount: viem.parseUnits(amount, asset.decimals).toString(),
|
|
5872
|
+
user: embeddedWalletAddress,
|
|
5766
5873
|
isDeposit: true
|
|
5767
5874
|
});
|
|
5875
|
+
console.log("Deposit result:", depositResult);
|
|
5768
5876
|
results.push({ asset, txHash: hash, success: true });
|
|
5769
5877
|
} catch (err) {
|
|
5770
5878
|
console.error(`Deposit error for ${asset.symbol}:`, err);
|
|
@@ -11721,7 +11829,7 @@ const SpiceWithdraw = (props) => {
|
|
|
11721
11829
|
}
|
|
11722
11830
|
});
|
|
11723
11831
|
if (chains.length === 0) {
|
|
11724
|
-
chains.push(chains$
|
|
11832
|
+
chains.push(chains$2.sepolia, chains$2.arbitrumSepolia);
|
|
11725
11833
|
}
|
|
11726
11834
|
const transports = {};
|
|
11727
11835
|
chains.forEach((chain) => {
|