@spicenet-io/spiceflow-ui 1.9.9 → 1.9.11

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