@spicenet-io/spiceflow-ui 1.9.6 → 1.9.8

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 (5) hide show
  1. package/dist/components/DepositWidget/DepositStatusPanel.d.ts +20 -5
  2. package/dist/components/DepositWidget/index.d.ts +2 -0
  3. package/dist/index.cjs.js +586 -391
  4. package/dist/index.js +586 -391
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2751,7 +2751,6 @@ const PrivyProviderWrapper = ({ children, appId, supportedViemChains }) => {
2751
2751
  theme: "#fafafa",
2752
2752
  showWalletLoginFirst: false,
2753
2753
  walletChainType: "ethereum-only",
2754
- logo: "https://spicenet.io/assets/Spicenet_Lockup_Secondary_FullColor.png",
2755
2754
  walletList: [
2756
2755
  "detected_ethereum_wallets",
2757
2756
  "metamask",
@@ -4115,282 +4114,605 @@ const useSpiceAssets = ({
4115
4114
  };
4116
4115
 
4117
4116
  const DepositStatusPanel = ({
4118
- intentStatus,
4117
+ isOpen,
4119
4118
  onClose,
4119
+ onComplete,
4120
+ results,
4121
+ chainName = "Network",
4122
+ explorerUrl,
4123
+ theme: providedTheme,
4124
+ styles,
4125
+ intentStatus,
4120
4126
  onRetry,
4121
- onNewDeposit,
4122
- theme: providedTheme
4127
+ onNewDeposit
4123
4128
  }) => {
4124
- const theme = providedTheme || createTheme("dark");
4125
- const containerStyles = {
4126
- width: "100%",
4127
- maxWidth: "28rem",
4128
- margin: "0 auto",
4129
- backgroundColor: theme.colors.background,
4130
- border: `1px solid ${theme.colors.border}`,
4131
- borderRadius: theme.borderRadius.lg,
4132
- padding: theme.spacing.lg,
4133
- color: theme.colors.text,
4134
- overflow: "visible"
4135
- };
4136
- const headerStyles = {
4137
- textAlign: "center",
4138
- marginBottom: theme.spacing.lg,
4139
- overflow: "visible"
4140
- };
4141
- const iconContainerStyles = {
4142
- width: "5rem",
4143
- height: "5rem",
4144
- margin: "0 auto",
4145
- backgroundColor: theme.colors.surface,
4146
- borderRadius: "50%",
4147
- display: "flex",
4148
- alignItems: "center",
4149
- justifyContent: "center",
4150
- border: `2px solid ${theme.colors.border}`,
4151
- marginBottom: theme.spacing.md
4152
- };
4153
- const titleStyles = {
4154
- fontSize: theme.typography.fontSize.lg,
4155
- fontWeight: theme.typography.fontWeight.semibold,
4156
- color: theme.colors.text,
4157
- marginBottom: theme.spacing.sm
4129
+ const theme = providedTheme || createTheme("light");
4130
+ const [isClosing, setIsClosing] = useState(false);
4131
+ const [isDetailsExpanded, setIsDetailsExpanded] = useState(true);
4132
+ useEffect(() => {
4133
+ if (!isOpen && !intentStatus) {
4134
+ setIsClosing(false);
4135
+ }
4136
+ }, [isOpen, intentStatus]);
4137
+ const handleClose = () => {
4138
+ setIsClosing(true);
4139
+ setTimeout(() => {
4140
+ onClose();
4141
+ }, 300);
4158
4142
  };
4159
- const descriptionStyles = {
4160
- fontSize: theme.typography.fontSize.sm,
4161
- color: theme.colors.textMuted,
4162
- wordWrap: "break-word",
4163
- overflowWrap: "break-word",
4164
- whiteSpace: "normal"
4143
+ const handleComplete = () => {
4144
+ setIsClosing(true);
4145
+ setTimeout(() => {
4146
+ onComplete?.();
4147
+ }, 300);
4165
4148
  };
4166
- const buttonContainerStyles = {
4167
- display: "flex",
4168
- flexDirection: "column",
4169
- gap: theme.spacing.sm,
4170
- marginTop: theme.spacing.lg
4149
+ const toggleDetails = () => {
4150
+ setIsDetailsExpanded(!isDetailsExpanded);
4171
4151
  };
4172
- const getStatusContent = () => {
4173
- switch (intentStatus.overallStatus) {
4174
- case "success":
4175
- return {
4176
- icon: /* @__PURE__ */ jsx(
4177
- "svg",
4152
+ if (intentStatus) {
4153
+ const { steps, overallStatus } = intentStatus;
4154
+ const isProcessing = overallStatus === "processing";
4155
+ const isSuccess = overallStatus === "success";
4156
+ const isError = overallStatus === "failed";
4157
+ return /* @__PURE__ */ jsxs(
4158
+ "div",
4159
+ {
4160
+ style: {
4161
+ backgroundColor: "#ffffff",
4162
+ borderRadius: "12px",
4163
+ padding: "24px",
4164
+ width: "100%",
4165
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)"
4166
+ },
4167
+ children: [
4168
+ /* @__PURE__ */ jsxs(
4169
+ "div",
4178
4170
  {
4179
- width: "32",
4180
- height: "32",
4181
- fill: "none",
4182
- stroke: theme.colors.success,
4183
- viewBox: "0 0 24 24",
4184
- children: /* @__PURE__ */ jsx(
4185
- "path",
4186
- {
4187
- strokeLinecap: "round",
4188
- strokeLinejoin: "round",
4189
- strokeWidth: 2,
4190
- d: "M5 13l4 4L19 7"
4191
- }
4192
- )
4171
+ style: {
4172
+ display: "flex",
4173
+ alignItems: "center",
4174
+ justifyContent: "space-between",
4175
+ marginBottom: "20px"
4176
+ },
4177
+ children: [
4178
+ /* @__PURE__ */ jsx(
4179
+ "h3",
4180
+ {
4181
+ style: {
4182
+ fontSize: "16px",
4183
+ fontWeight: 600,
4184
+ margin: 0,
4185
+ color: "#111827",
4186
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily
4187
+ },
4188
+ children: isProcessing ? "Processing Deposit..." : isSuccess ? "Deposit Complete!" : "Deposit Failed"
4189
+ }
4190
+ ),
4191
+ !isProcessing && /* @__PURE__ */ jsx(
4192
+ "button",
4193
+ {
4194
+ onClick: onClose,
4195
+ style: {
4196
+ background: "none",
4197
+ border: "none",
4198
+ cursor: "pointer",
4199
+ padding: "4px",
4200
+ color: "#6b7280"
4201
+ },
4202
+ children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
4203
+ "path",
4204
+ {
4205
+ d: "M12 4L4 12M4 4L12 12",
4206
+ stroke: "currentColor",
4207
+ strokeWidth: "2",
4208
+ strokeLinecap: "round",
4209
+ strokeLinejoin: "round"
4210
+ }
4211
+ ) })
4212
+ }
4213
+ )
4214
+ ]
4193
4215
  }
4194
4216
  ),
4195
- title: "Deposit Completed!",
4196
- description: "Your tokens have been successfully deposited.",
4197
- borderColor: theme.colors.success
4198
- };
4199
- case "failed":
4200
- return {
4201
- icon: /* @__PURE__ */ jsx(
4202
- "svg",
4217
+ /* @__PURE__ */ jsx(
4218
+ "div",
4203
4219
  {
4204
- width: "32",
4205
- height: "32",
4206
- fill: "none",
4207
- stroke: theme.colors.error,
4208
- viewBox: "0 0 24 24",
4220
+ style: {
4221
+ display: "flex",
4222
+ justifyContent: "center",
4223
+ marginBottom: "20px"
4224
+ },
4209
4225
  children: /* @__PURE__ */ jsx(
4210
- "path",
4226
+ "div",
4211
4227
  {
4212
- strokeLinecap: "round",
4213
- strokeLinejoin: "round",
4214
- strokeWidth: 2,
4215
- d: "M6 18L18 6M6 6l12 12"
4228
+ style: {
4229
+ width: "64px",
4230
+ height: "64px",
4231
+ borderRadius: "50%",
4232
+ backgroundColor: isSuccess ? "#dcfce7" : isError ? "#fee2e2" : "#f3f4f6",
4233
+ display: "flex",
4234
+ alignItems: "center",
4235
+ justifyContent: "center"
4236
+ },
4237
+ children: isProcessing ? /* @__PURE__ */ jsx(
4238
+ "div",
4239
+ {
4240
+ style: {
4241
+ width: "24px",
4242
+ height: "24px",
4243
+ border: "3px solid #e5e7eb",
4244
+ borderTopColor: theme.colors.primary,
4245
+ borderRadius: "50%",
4246
+ animation: "spin 1s linear infinite"
4247
+ }
4248
+ }
4249
+ ) : isSuccess ? /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#16a34a" }, children: "\u2713" }) : /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#dc2626" }, children: "\u2717" })
4216
4250
  }
4217
4251
  )
4218
4252
  }
4219
4253
  ),
4220
- title: "Deposit Failed",
4221
- description: "Something went wrong. Please try again.",
4222
- borderColor: theme.colors.error
4223
- };
4224
- default:
4225
- return {
4226
- icon: /* @__PURE__ */ jsx(
4254
+ /* @__PURE__ */ jsx(
4227
4255
  "div",
4228
4256
  {
4229
4257
  style: {
4230
- width: "2rem",
4231
- height: "2rem",
4232
- border: `3px solid ${theme.colors.primary}`,
4233
- borderTop: "3px solid transparent",
4234
- borderRadius: "50%",
4235
- animation: "spin 1s linear infinite"
4236
- }
4258
+ display: "flex",
4259
+ flexDirection: "column",
4260
+ gap: "12px",
4261
+ marginBottom: "24px"
4262
+ },
4263
+ children: steps.map((step, idx) => /* @__PURE__ */ jsx(
4264
+ "div",
4265
+ {
4266
+ style: {
4267
+ padding: "12px",
4268
+ borderRadius: "8px",
4269
+ backgroundColor: step.status === "success" ? "#f0fdf4" : step.status === "failed" ? "#fef2f2" : "#f9fafb",
4270
+ border: `1px solid ${step.status === "success" ? "#bbf7d0" : step.status === "failed" ? "#fecaca" : "#e5e7eb"}`
4271
+ },
4272
+ children: /* @__PURE__ */ jsxs(
4273
+ "div",
4274
+ {
4275
+ style: {
4276
+ display: "flex",
4277
+ justifyContent: "space-between",
4278
+ alignItems: "center"
4279
+ },
4280
+ children: [
4281
+ /* @__PURE__ */ jsx(
4282
+ "span",
4283
+ {
4284
+ style: {
4285
+ fontWeight: 500,
4286
+ fontSize: "14px",
4287
+ color: "#111827"
4288
+ },
4289
+ children: step.description || `Step ${idx + 1}`
4290
+ }
4291
+ ),
4292
+ /* @__PURE__ */ jsx(
4293
+ "span",
4294
+ {
4295
+ style: {
4296
+ fontSize: "12px",
4297
+ color: step.status === "success" ? "#16a34a" : step.status === "failed" ? "#dc2626" : "#6b7280"
4298
+ },
4299
+ children: step.status === "success" ? "\u2713 Complete" : step.status === "failed" ? "\u2717 Failed" : step.status === "processing" ? "Processing..." : "Pending"
4300
+ }
4301
+ )
4302
+ ]
4303
+ }
4304
+ )
4305
+ },
4306
+ idx
4307
+ ))
4237
4308
  }
4238
4309
  ),
4239
- title: "Processing Deposit",
4240
- description: "Please wait while your deposit is being processed...",
4241
- borderColor: theme.colors.primary
4242
- };
4243
- }
4244
- };
4245
- const statusContent = getStatusContent();
4246
- return /* @__PURE__ */ jsxs("div", { style: containerStyles, children: [
4247
- /* @__PURE__ */ jsx("style", { children: `
4310
+ !isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4311
+ isError && onRetry && /* @__PURE__ */ jsx(
4312
+ "button",
4313
+ {
4314
+ onClick: onRetry,
4315
+ style: {
4316
+ width: "100%",
4317
+ height: "48px",
4318
+ padding: "14px 24px",
4319
+ borderRadius: "6px",
4320
+ backgroundColor: "#ea4b4b",
4321
+ border: "1px solid #0e0d0b",
4322
+ color: "#0e0d0b",
4323
+ fontWeight: 500,
4324
+ fontSize: "16px",
4325
+ fontFamily: '"IBM Plex Mono", monospace',
4326
+ textTransform: "uppercase",
4327
+ cursor: "pointer"
4328
+ },
4329
+ children: "RETRY"
4330
+ }
4331
+ ),
4332
+ onNewDeposit && /* @__PURE__ */ jsx(
4333
+ "button",
4334
+ {
4335
+ onClick: onNewDeposit,
4336
+ style: {
4337
+ width: "100%",
4338
+ height: "48px",
4339
+ padding: "14px 24px",
4340
+ borderRadius: "6px",
4341
+ backgroundColor: isSuccess ? "#ea4b4b" : "transparent",
4342
+ border: "1px solid #0e0d0b",
4343
+ color: "#0e0d0b",
4344
+ fontWeight: 500,
4345
+ fontSize: "16px",
4346
+ fontFamily: '"IBM Plex Mono", monospace',
4347
+ textTransform: "uppercase",
4348
+ cursor: "pointer"
4349
+ },
4350
+ children: isSuccess ? "NEW DEPOSIT" : "BACK"
4351
+ }
4352
+ )
4353
+ ] }),
4354
+ /* @__PURE__ */ jsx("style", { children: `
4248
4355
  @keyframes spin {
4249
- 0% { transform: rotate(0deg); }
4250
- 100% { transform: rotate(360deg); }
4356
+ from { transform: rotate(0deg); }
4357
+ to { transform: rotate(360deg); }
4251
4358
  }
4252
- ` }),
4253
- /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
4254
- /* @__PURE__ */ jsx(
4255
- "div",
4256
- {
4257
- style: {
4258
- ...iconContainerStyles,
4259
- borderColor: statusContent.borderColor
4260
- },
4261
- children: statusContent.icon
4262
- }
4263
- ),
4264
- /* @__PURE__ */ jsx("h3", { style: titleStyles, children: statusContent.title }),
4265
- /* @__PURE__ */ jsx("p", { style: descriptionStyles, children: statusContent.description })
4266
- ] }),
4267
- intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxs(
4268
- "div",
4269
- {
4270
- style: {
4271
- backgroundColor: theme.colors.surface,
4272
- borderRadius: theme.borderRadius.md,
4273
- padding: theme.spacing.md,
4274
- marginBottom: theme.spacing.md
4275
- },
4276
- children: [
4277
- /* @__PURE__ */ jsx(
4278
- "div",
4279
- {
4280
- style: {
4281
- height: "4px",
4282
- backgroundColor: `${theme.colors.primary}30`,
4283
- borderRadius: "2px",
4284
- overflow: "hidden"
4285
- },
4286
- children: /* @__PURE__ */ jsx(
4359
+ ` })
4360
+ ]
4361
+ }
4362
+ );
4363
+ }
4364
+ if (!isOpen || !results || results.length === 0) return null;
4365
+ const successCount = results.filter((r) => r.success).length;
4366
+ const failedCount = results.filter((r) => !r.success).length;
4367
+ const allSuccess = failedCount === 0;
4368
+ return /* @__PURE__ */ jsxs(
4369
+ "div",
4370
+ {
4371
+ style: {
4372
+ position: "absolute",
4373
+ bottom: 0,
4374
+ left: 0,
4375
+ right: 0,
4376
+ zIndex: 10,
4377
+ animation: isClosing ? "slideDown 0.3s ease-in forwards" : "slideUp 0.3s ease-out forwards",
4378
+ pointerEvents: "auto"
4379
+ },
4380
+ children: [
4381
+ /* @__PURE__ */ jsxs(
4382
+ "div",
4383
+ {
4384
+ style: {
4385
+ backgroundColor: "#ffffff",
4386
+ borderRadius: "12px 12px 0 0",
4387
+ width: "100%",
4388
+ padding: "18px 24px 24px",
4389
+ boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
4390
+ },
4391
+ children: [
4392
+ /* @__PURE__ */ jsxs(
4393
+ "div",
4394
+ {
4395
+ style: {
4396
+ display: "flex",
4397
+ alignItems: "center",
4398
+ justifyContent: "space-between",
4399
+ marginBottom: "16px"
4400
+ },
4401
+ children: [
4402
+ /* @__PURE__ */ jsxs(
4403
+ "div",
4404
+ {
4405
+ style: {
4406
+ display: "flex",
4407
+ alignItems: "center",
4408
+ gap: "8px",
4409
+ cursor: "pointer"
4410
+ },
4411
+ onClick: toggleDetails,
4412
+ children: [
4413
+ /* @__PURE__ */ jsx(
4414
+ "span",
4415
+ {
4416
+ style: {
4417
+ fontSize: "13px",
4418
+ fontWeight: 500,
4419
+ color: "#6b7280",
4420
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily
4421
+ },
4422
+ children: "Deposit Results"
4423
+ }
4424
+ ),
4425
+ /* @__PURE__ */ jsx(
4426
+ "svg",
4427
+ {
4428
+ width: "16",
4429
+ height: "16",
4430
+ viewBox: "0 0 16 16",
4431
+ fill: "none",
4432
+ style: {
4433
+ transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
4434
+ transition: "transform 0.3s ease"
4435
+ },
4436
+ children: /* @__PURE__ */ jsx(
4437
+ "path",
4438
+ {
4439
+ d: "M4 6L8 10L12 6",
4440
+ stroke: "#6b7280",
4441
+ strokeWidth: "2",
4442
+ strokeLinecap: "round",
4443
+ strokeLinejoin: "round"
4444
+ }
4445
+ )
4446
+ }
4447
+ )
4448
+ ]
4449
+ }
4450
+ ),
4451
+ /* @__PURE__ */ jsx(
4452
+ "button",
4453
+ {
4454
+ onClick: handleClose,
4455
+ style: {
4456
+ background: "none",
4457
+ border: "none",
4458
+ cursor: "pointer",
4459
+ padding: "4px",
4460
+ display: "flex",
4461
+ alignItems: "center",
4462
+ justifyContent: "center",
4463
+ color: "#6b7280",
4464
+ transition: "color 0.2s ease"
4465
+ },
4466
+ children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
4467
+ "path",
4468
+ {
4469
+ d: "M12 4L4 12M4 4L12 12",
4470
+ stroke: "currentColor",
4471
+ strokeWidth: "2",
4472
+ strokeLinecap: "round",
4473
+ strokeLinejoin: "round"
4474
+ }
4475
+ ) })
4476
+ }
4477
+ )
4478
+ ]
4479
+ }
4480
+ ),
4481
+ /* @__PURE__ */ jsxs(
4482
+ "div",
4483
+ {
4484
+ style: {
4485
+ display: "flex",
4486
+ alignItems: "center",
4487
+ justifyContent: "center",
4488
+ gap: "12px",
4489
+ marginBottom: "16px",
4490
+ padding: "12px",
4491
+ backgroundColor: allSuccess ? "#f0fdf4" : "#fefce8",
4492
+ borderRadius: "8px",
4493
+ border: `1px solid ${allSuccess ? "#bbf7d0" : "#fef08a"}`
4494
+ },
4495
+ children: [
4496
+ /* @__PURE__ */ jsx(
4497
+ "div",
4498
+ {
4499
+ style: {
4500
+ width: "32px",
4501
+ height: "32px",
4502
+ borderRadius: "50%",
4503
+ backgroundColor: allSuccess ? "#dcfce7" : "#fef3c7",
4504
+ display: "flex",
4505
+ alignItems: "center",
4506
+ justifyContent: "center"
4507
+ },
4508
+ children: /* @__PURE__ */ jsx(
4509
+ "span",
4510
+ {
4511
+ style: {
4512
+ fontSize: "16px",
4513
+ color: allSuccess ? "#16a34a" : "#ca8a04"
4514
+ },
4515
+ children: allSuccess ? "\u2713" : "!"
4516
+ }
4517
+ )
4518
+ }
4519
+ ),
4520
+ /* @__PURE__ */ jsxs("div", { children: [
4521
+ /* @__PURE__ */ jsx(
4522
+ "p",
4523
+ {
4524
+ style: {
4525
+ fontWeight: 600,
4526
+ fontSize: "14px",
4527
+ color: allSuccess ? "#166534" : "#854d0e",
4528
+ margin: 0
4529
+ },
4530
+ children: allSuccess ? "All Deposits Complete!" : `${successCount} of ${results.length} Deposits Complete`
4531
+ }
4532
+ ),
4533
+ /* @__PURE__ */ jsxs(
4534
+ "p",
4535
+ {
4536
+ style: {
4537
+ fontSize: "12px",
4538
+ color: "#6b7280",
4539
+ margin: "2px 0 0 0"
4540
+ },
4541
+ children: [
4542
+ "on ",
4543
+ chainName
4544
+ ]
4545
+ }
4546
+ )
4547
+ ] })
4548
+ ]
4549
+ }
4550
+ ),
4551
+ /* @__PURE__ */ jsx(
4287
4552
  "div",
4288
4553
  {
4289
4554
  style: {
4290
- width: "30%",
4291
- height: "100%",
4292
- backgroundColor: theme.colors.primary,
4293
- borderRadius: "2px",
4294
- animation: "progress 1.5s ease-in-out infinite"
4295
- }
4555
+ overflow: "hidden",
4556
+ maxHeight: isDetailsExpanded ? "200px" : "0px",
4557
+ opacity: isDetailsExpanded ? 1 : 0,
4558
+ transition: "max-height 0.3s ease, opacity 0.3s ease",
4559
+ marginBottom: isDetailsExpanded ? "16px" : "0"
4560
+ },
4561
+ children: /* @__PURE__ */ jsx(
4562
+ "div",
4563
+ {
4564
+ style: {
4565
+ maxHeight: "180px",
4566
+ overflowY: "auto",
4567
+ display: "flex",
4568
+ flexDirection: "column",
4569
+ gap: "8px"
4570
+ },
4571
+ children: results.map((result, idx) => /* @__PURE__ */ jsxs(
4572
+ "div",
4573
+ {
4574
+ style: {
4575
+ padding: "12px",
4576
+ borderRadius: "8px",
4577
+ border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
4578
+ backgroundColor: result.success ? "#f0fdf4" : "#fef2f2"
4579
+ },
4580
+ children: [
4581
+ /* @__PURE__ */ jsxs(
4582
+ "div",
4583
+ {
4584
+ style: {
4585
+ display: "flex",
4586
+ justifyContent: "space-between",
4587
+ alignItems: "center"
4588
+ },
4589
+ children: [
4590
+ /* @__PURE__ */ jsxs(
4591
+ "div",
4592
+ {
4593
+ style: {
4594
+ display: "flex",
4595
+ alignItems: "center",
4596
+ gap: "8px"
4597
+ },
4598
+ children: [
4599
+ /* @__PURE__ */ jsx(
4600
+ "span",
4601
+ {
4602
+ style: {
4603
+ fontWeight: 600,
4604
+ fontSize: "14px",
4605
+ color: "#111827",
4606
+ fontFamily: '"IBM Plex Mono", monospace'
4607
+ },
4608
+ children: result.asset.symbol
4609
+ }
4610
+ ),
4611
+ result.amount && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: result.amount })
4612
+ ]
4613
+ }
4614
+ ),
4615
+ /* @__PURE__ */ jsx(
4616
+ "span",
4617
+ {
4618
+ style: {
4619
+ color: result.success ? "#16a34a" : "#dc2626",
4620
+ fontSize: "13px",
4621
+ fontWeight: 500
4622
+ },
4623
+ children: result.success ? "\u2713 Success" : "\u2717 Failed"
4624
+ }
4625
+ )
4626
+ ]
4627
+ }
4628
+ ),
4629
+ result.success && result.txHash && explorerUrl && /* @__PURE__ */ jsx(
4630
+ "a",
4631
+ {
4632
+ href: `${explorerUrl}/tx/${result.txHash}`,
4633
+ target: "_blank",
4634
+ rel: "noopener noreferrer",
4635
+ style: {
4636
+ fontSize: "12px",
4637
+ color: theme.colors.primary,
4638
+ textDecoration: "none",
4639
+ display: "block",
4640
+ marginTop: "4px"
4641
+ },
4642
+ children: "View on Explorer \u2192"
4643
+ }
4644
+ ),
4645
+ result.error && /* @__PURE__ */ jsx(
4646
+ "p",
4647
+ {
4648
+ style: {
4649
+ fontSize: "12px",
4650
+ color: "#dc2626",
4651
+ margin: "4px 0 0 0",
4652
+ wordWrap: "break-word",
4653
+ overflowWrap: "break-word"
4654
+ },
4655
+ children: result.error
4656
+ }
4657
+ )
4658
+ ]
4659
+ },
4660
+ idx
4661
+ ))
4662
+ }
4663
+ )
4664
+ }
4665
+ ),
4666
+ /* @__PURE__ */ jsx(
4667
+ "button",
4668
+ {
4669
+ onClick: handleComplete,
4670
+ style: {
4671
+ width: "100%",
4672
+ height: "48px",
4673
+ padding: "14px 24px",
4674
+ borderRadius: "6px",
4675
+ backgroundColor: "#ea4b4b",
4676
+ border: "1px solid #0e0d0b",
4677
+ color: "#0e0d0b",
4678
+ fontWeight: 500,
4679
+ fontSize: "16px",
4680
+ fontFamily: '"IBM Plex Mono", monospace',
4681
+ textTransform: "uppercase",
4682
+ cursor: "pointer",
4683
+ transition: "all 0.2s ease",
4684
+ display: "flex",
4685
+ alignItems: "center",
4686
+ justifyContent: "center",
4687
+ gap: "8px"
4688
+ },
4689
+ children: "CONTINUE \u2192"
4296
4690
  }
4297
4691
  )
4298
- }
4299
- ),
4300
- /* @__PURE__ */ jsx("style", { children: `
4301
- @keyframes progress {
4302
- 0% { transform: translateX(-100%); width: 30%; }
4303
- 50% { width: 60%; }
4304
- 100% { transform: translateX(400%); width: 30%; }
4305
- }
4306
- ` })
4307
- ]
4308
- }
4309
- ),
4310
- /* @__PURE__ */ jsxs("div", { style: buttonContainerStyles, children: [
4311
- intentStatus.overallStatus === "success" && onNewDeposit && /* @__PURE__ */ jsx(
4312
- Button,
4313
- {
4314
- variant: "success",
4315
- fullWidth: true,
4316
- onClick: onNewDeposit,
4317
- theme,
4318
- style: {
4319
- width: "100%",
4320
- padding: "16px",
4321
- backgroundColor: "#ea4b4b",
4322
- color: "#0e0d0b",
4323
- border: "1px solid #0e0d0b",
4324
- fontWeight: 500,
4325
- fontSize: "18px",
4326
- textTransform: "uppercase",
4327
- cursor: "pointer",
4328
- marginTop: "20px",
4329
- display: "flex",
4330
- alignItems: "center",
4331
- justifyContent: "center",
4332
- gap: "8px",
4333
- transition: "all 150ms ease"
4334
- },
4335
- children: "New Deposit"
4336
- }
4337
- ),
4338
- intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsx(
4339
- Button,
4340
- {
4341
- variant: "error",
4342
- fullWidth: true,
4343
- onClick: onRetry,
4344
- theme,
4345
- style: {
4346
- width: "100%",
4347
- padding: "16px",
4348
- backgroundColor: "#ea4b4b",
4349
- color: "#0e0d0b",
4350
- border: "1px solid #0e0d0b",
4351
- fontWeight: 500,
4352
- fontSize: "18px",
4353
- textTransform: "uppercase",
4354
- cursor: "pointer",
4355
- marginTop: "20px",
4356
- display: "flex",
4357
- alignItems: "center",
4358
- justifyContent: "center",
4359
- gap: "8px",
4360
- transition: "all 150ms ease"
4361
- },
4362
- children: "Try Again"
4692
+ ]
4693
+ }
4694
+ ),
4695
+ /* @__PURE__ */ jsx("style", { children: `
4696
+ @keyframes slideUp {
4697
+ from {
4698
+ transform: translateY(100%);
4699
+ }
4700
+ to {
4701
+ transform: translateY(0);
4702
+ }
4363
4703
  }
4364
- ),
4365
- intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsx(
4366
- Button,
4367
- {
4368
- variant: "ghost",
4369
- fullWidth: true,
4370
- onClick: onClose,
4371
- theme,
4372
- style: {
4373
- width: "100%",
4374
- padding: "16px",
4375
- backgroundColor: "#ea4b4b",
4376
- color: "#0e0d0b",
4377
- border: "1px solid #0e0d0b",
4378
- fontWeight: 500,
4379
- fontSize: "18px",
4380
- textTransform: "uppercase",
4381
- cursor: "pointer",
4382
- marginTop: "20px",
4383
- display: "flex",
4384
- alignItems: "center",
4385
- justifyContent: "center",
4386
- gap: "8px",
4387
- transition: "all 150ms ease"
4388
- },
4389
- children: "Cancel"
4704
+ @keyframes slideDown {
4705
+ from {
4706
+ transform: translateY(0);
4707
+ }
4708
+ to {
4709
+ transform: translateY(100%);
4710
+ }
4390
4711
  }
4391
- )
4392
- ] })
4393
- ] });
4712
+ ` })
4713
+ ]
4714
+ }
4715
+ );
4394
4716
  };
4395
4717
 
4396
4718
  const DepositWidget = ({
@@ -5527,151 +5849,24 @@ const CrossChainDepositModal = ({
5527
5849
  ]
5528
5850
  }
5529
5851
  );
5530
- const successOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsxs(
5531
- "div",
5852
+ const successOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsx(
5853
+ DepositStatusPanel,
5532
5854
  {
5533
- style: {
5534
- position: "absolute",
5535
- inset: 0,
5536
- backgroundColor: "white",
5537
- zIndex: 10,
5538
- borderRadius: "12px",
5539
- padding: "24px",
5540
- display: "flex",
5541
- flexDirection: "column",
5542
- alignItems: "center",
5543
- justifyContent: "flex-start",
5544
- gap: "16px",
5545
- overflowY: "auto",
5546
- paddingTop: "40px"
5547
- },
5548
- children: [
5549
- /* @__PURE__ */ jsx(
5550
- "div",
5551
- {
5552
- style: {
5553
- width: "64px",
5554
- height: "64px",
5555
- borderRadius: "50%",
5556
- backgroundColor: "#dcfce7",
5557
- display: "flex",
5558
- alignItems: "center",
5559
- justifyContent: "center"
5560
- },
5561
- children: /* @__PURE__ */ jsx("span", { style: { fontSize: "28px", color: "#16a34a" }, children: "\u2713" })
5562
- }
5563
- ),
5564
- /* @__PURE__ */ jsx(
5565
- "p",
5566
- {
5567
- style: {
5568
- fontWeight: 600,
5569
- fontSize: "18px",
5570
- color: "#166534",
5571
- margin: 0
5572
- },
5573
- children: "Deposits Complete!"
5574
- }
5575
- ),
5576
- /* @__PURE__ */ jsx(
5577
- "div",
5578
- {
5579
- style: {
5580
- width: "100%",
5581
- maxHeight: "200px",
5582
- overflowY: "auto",
5583
- display: "flex",
5584
- flexDirection: "column",
5585
- gap: "8px"
5586
- },
5587
- children: depositResults.map((result, idx) => /* @__PURE__ */ jsxs(
5588
- "div",
5589
- {
5590
- style: {
5591
- padding: "12px",
5592
- borderRadius: "8px",
5593
- border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
5594
- backgroundColor: result.success ? "#f0fdf4" : "#fef2f2",
5595
- overflow: "visible"
5596
- },
5597
- children: [
5598
- /* @__PURE__ */ jsxs(
5599
- "div",
5600
- {
5601
- style: {
5602
- display: "flex",
5603
- justifyContent: "space-between",
5604
- alignItems: "center"
5605
- },
5606
- children: [
5607
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: result.asset.symbol }),
5608
- /* @__PURE__ */ jsx(
5609
- "span",
5610
- {
5611
- style: {
5612
- color: result.success ? "#16a34a" : "#dc2626",
5613
- fontSize: "14px"
5614
- },
5615
- children: result.success ? "\u2713 Success" : "\u2717 Failed"
5616
- }
5617
- )
5618
- ]
5619
- }
5620
- ),
5621
- result.success && result.txHash && /* @__PURE__ */ jsx(
5622
- "a",
5623
- {
5624
- href: `${chainConfig?.blockExplorers?.default?.url}/tx/${result.txHash}`,
5625
- target: "_blank",
5626
- rel: "noopener noreferrer",
5627
- style: {
5628
- fontSize: "12px",
5629
- color: theme.colors.primary,
5630
- textDecoration: "none"
5631
- },
5632
- children: "View on Explorer \u2192"
5633
- }
5634
- ),
5635
- result.error && /* @__PURE__ */ jsx(
5636
- "p",
5637
- {
5638
- style: {
5639
- fontSize: "12px",
5640
- color: "#dc2626",
5641
- margin: "4px 0 0 0",
5642
- wordWrap: "break-word",
5643
- overflowWrap: "break-word",
5644
- whiteSpace: "normal"
5645
- },
5646
- children: result.error
5647
- }
5648
- )
5649
- ]
5650
- },
5651
- idx
5652
- ))
5653
- }
5654
- ),
5655
- /* @__PURE__ */ jsx(
5656
- "button",
5657
- {
5658
- onClick: onComplete,
5659
- style: {
5660
- width: "100%",
5661
- padding: "14px",
5662
- borderRadius: "8px",
5663
- backgroundColor: theme.colors.primary,
5664
- color: "white",
5665
- border: "none",
5666
- fontWeight: 600,
5667
- fontSize: "16px",
5668
- cursor: "pointer",
5669
- marginTop: "8px"
5670
- },
5671
- children: "Done"
5672
- }
5673
- )
5674
- ]
5855
+ isOpen: isSuccess && depositResults.length > 0,
5856
+ onClose,
5857
+ onComplete,
5858
+ results: depositResults.map((result) => ({
5859
+ asset: {
5860
+ symbol: result.asset.symbol,
5861
+ address: result.asset.address
5862
+ },
5863
+ txHash: result.txHash,
5864
+ success: result.success,
5865
+ error: result.error
5866
+ })),
5867
+ chainName: chainConfig?.name || "Network",
5868
+ explorerUrl: chainConfig?.blockExplorers?.default?.url,
5869
+ theme
5675
5870
  }
5676
5871
  ) : null;
5677
5872
  return /* @__PURE__ */ jsx(