@spicenet-io/spiceflow-ui 1.9.5 → 1.9.7

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 (6) 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 +588 -390
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +587 -391
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4115,282 +4115,605 @@ const useSpiceAssets = ({
4115
4115
  };
4116
4116
 
4117
4117
  const DepositStatusPanel = ({
4118
- intentStatus,
4118
+ isOpen,
4119
4119
  onClose,
4120
+ onComplete,
4121
+ results,
4122
+ chainName = "Network",
4123
+ explorerUrl,
4124
+ theme: providedTheme,
4125
+ styles,
4126
+ intentStatus,
4120
4127
  onRetry,
4121
- onNewDeposit,
4122
- theme: providedTheme
4128
+ onNewDeposit
4123
4129
  }) => {
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
4130
+ const theme = providedTheme || createTheme("light");
4131
+ const [isClosing, setIsClosing] = useState(false);
4132
+ const [isDetailsExpanded, setIsDetailsExpanded] = useState(true);
4133
+ useEffect(() => {
4134
+ if (!isOpen && !intentStatus) {
4135
+ setIsClosing(false);
4136
+ }
4137
+ }, [isOpen, intentStatus]);
4138
+ const handleClose = () => {
4139
+ setIsClosing(true);
4140
+ setTimeout(() => {
4141
+ onClose();
4142
+ }, 300);
4158
4143
  };
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"
4144
+ const handleComplete = () => {
4145
+ setIsClosing(true);
4146
+ setTimeout(() => {
4147
+ onComplete?.();
4148
+ }, 300);
4165
4149
  };
4166
- const buttonContainerStyles = {
4167
- display: "flex",
4168
- flexDirection: "column",
4169
- gap: theme.spacing.sm,
4170
- marginTop: theme.spacing.lg
4150
+ const toggleDetails = () => {
4151
+ setIsDetailsExpanded(!isDetailsExpanded);
4171
4152
  };
4172
- const getStatusContent = () => {
4173
- switch (intentStatus.overallStatus) {
4174
- case "success":
4175
- return {
4176
- icon: /* @__PURE__ */ jsx(
4177
- "svg",
4153
+ if (intentStatus) {
4154
+ const { steps, overallStatus } = intentStatus;
4155
+ const isProcessing = overallStatus === "processing";
4156
+ const isSuccess = overallStatus === "success";
4157
+ const isError = overallStatus === "failed";
4158
+ return /* @__PURE__ */ jsxs(
4159
+ "div",
4160
+ {
4161
+ style: {
4162
+ backgroundColor: "#ffffff",
4163
+ borderRadius: "12px",
4164
+ padding: "24px",
4165
+ width: "100%",
4166
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)"
4167
+ },
4168
+ children: [
4169
+ /* @__PURE__ */ jsxs(
4170
+ "div",
4178
4171
  {
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
- )
4172
+ style: {
4173
+ display: "flex",
4174
+ alignItems: "center",
4175
+ justifyContent: "space-between",
4176
+ marginBottom: "20px"
4177
+ },
4178
+ children: [
4179
+ /* @__PURE__ */ jsx(
4180
+ "h3",
4181
+ {
4182
+ style: {
4183
+ fontSize: "16px",
4184
+ fontWeight: 600,
4185
+ margin: 0,
4186
+ color: "#111827",
4187
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily
4188
+ },
4189
+ children: isProcessing ? "Processing Deposit..." : isSuccess ? "Deposit Complete!" : "Deposit Failed"
4190
+ }
4191
+ ),
4192
+ !isProcessing && /* @__PURE__ */ jsx(
4193
+ "button",
4194
+ {
4195
+ onClick: onClose,
4196
+ style: {
4197
+ background: "none",
4198
+ border: "none",
4199
+ cursor: "pointer",
4200
+ padding: "4px",
4201
+ color: "#6b7280"
4202
+ },
4203
+ children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
4204
+ "path",
4205
+ {
4206
+ d: "M12 4L4 12M4 4L12 12",
4207
+ stroke: "currentColor",
4208
+ strokeWidth: "2",
4209
+ strokeLinecap: "round",
4210
+ strokeLinejoin: "round"
4211
+ }
4212
+ ) })
4213
+ }
4214
+ )
4215
+ ]
4193
4216
  }
4194
4217
  ),
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",
4218
+ /* @__PURE__ */ jsx(
4219
+ "div",
4203
4220
  {
4204
- width: "32",
4205
- height: "32",
4206
- fill: "none",
4207
- stroke: theme.colors.error,
4208
- viewBox: "0 0 24 24",
4221
+ style: {
4222
+ display: "flex",
4223
+ justifyContent: "center",
4224
+ marginBottom: "20px"
4225
+ },
4209
4226
  children: /* @__PURE__ */ jsx(
4210
- "path",
4227
+ "div",
4211
4228
  {
4212
- strokeLinecap: "round",
4213
- strokeLinejoin: "round",
4214
- strokeWidth: 2,
4215
- d: "M6 18L18 6M6 6l12 12"
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" })
4216
4251
  }
4217
4252
  )
4218
4253
  }
4219
4254
  ),
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(
4255
+ /* @__PURE__ */ jsx(
4227
4256
  "div",
4228
4257
  {
4229
4258
  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
- }
4259
+ display: "flex",
4260
+ flexDirection: "column",
4261
+ gap: "12px",
4262
+ marginBottom: "24px"
4263
+ },
4264
+ children: steps.map((step, idx) => /* @__PURE__ */ jsx(
4265
+ "div",
4266
+ {
4267
+ 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"}`
4272
+ },
4273
+ children: /* @__PURE__ */ jsxs(
4274
+ "div",
4275
+ {
4276
+ style: {
4277
+ display: "flex",
4278
+ justifyContent: "space-between",
4279
+ alignItems: "center"
4280
+ },
4281
+ children: [
4282
+ /* @__PURE__ */ jsx(
4283
+ "span",
4284
+ {
4285
+ style: {
4286
+ fontWeight: 500,
4287
+ fontSize: "14px",
4288
+ color: "#111827"
4289
+ },
4290
+ children: step.description || `Step ${idx + 1}`
4291
+ }
4292
+ ),
4293
+ /* @__PURE__ */ jsx(
4294
+ "span",
4295
+ {
4296
+ style: {
4297
+ fontSize: "12px",
4298
+ color: step.status === "success" ? "#16a34a" : step.status === "failed" ? "#dc2626" : "#6b7280"
4299
+ },
4300
+ children: step.status === "success" ? "\u2713 Complete" : step.status === "failed" ? "\u2717 Failed" : step.status === "processing" ? "Processing..." : "Pending"
4301
+ }
4302
+ )
4303
+ ]
4304
+ }
4305
+ )
4306
+ },
4307
+ idx
4308
+ ))
4237
4309
  }
4238
4310
  ),
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: `
4311
+ !isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4312
+ isError && onRetry && /* @__PURE__ */ jsx(
4313
+ "button",
4314
+ {
4315
+ onClick: onRetry,
4316
+ style: {
4317
+ width: "100%",
4318
+ height: "48px",
4319
+ padding: "14px 24px",
4320
+ borderRadius: "6px",
4321
+ backgroundColor: "#ea4b4b",
4322
+ border: "1px solid #0e0d0b",
4323
+ color: "#0e0d0b",
4324
+ fontWeight: 500,
4325
+ fontSize: "16px",
4326
+ fontFamily: '"IBM Plex Mono", monospace',
4327
+ textTransform: "uppercase",
4328
+ cursor: "pointer"
4329
+ },
4330
+ children: "RETRY"
4331
+ }
4332
+ ),
4333
+ onNewDeposit && /* @__PURE__ */ jsx(
4334
+ "button",
4335
+ {
4336
+ onClick: onNewDeposit,
4337
+ style: {
4338
+ width: "100%",
4339
+ height: "48px",
4340
+ padding: "14px 24px",
4341
+ borderRadius: "6px",
4342
+ backgroundColor: isSuccess ? "#ea4b4b" : "transparent",
4343
+ border: "1px solid #0e0d0b",
4344
+ color: "#0e0d0b",
4345
+ fontWeight: 500,
4346
+ fontSize: "16px",
4347
+ fontFamily: '"IBM Plex Mono", monospace',
4348
+ textTransform: "uppercase",
4349
+ cursor: "pointer"
4350
+ },
4351
+ children: isSuccess ? "NEW DEPOSIT" : "BACK"
4352
+ }
4353
+ )
4354
+ ] }),
4355
+ /* @__PURE__ */ jsx("style", { children: `
4248
4356
  @keyframes spin {
4249
- 0% { transform: rotate(0deg); }
4250
- 100% { transform: rotate(360deg); }
4357
+ from { transform: rotate(0deg); }
4358
+ to { transform: rotate(360deg); }
4251
4359
  }
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(
4360
+ ` })
4361
+ ]
4362
+ }
4363
+ );
4364
+ }
4365
+ 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;
4369
+ return /* @__PURE__ */ jsxs(
4370
+ "div",
4371
+ {
4372
+ style: {
4373
+ position: "absolute",
4374
+ bottom: 0,
4375
+ left: 0,
4376
+ right: 0,
4377
+ zIndex: 10,
4378
+ animation: isClosing ? "slideDown 0.3s ease-in forwards" : "slideUp 0.3s ease-out forwards",
4379
+ pointerEvents: "auto"
4380
+ },
4381
+ children: [
4382
+ /* @__PURE__ */ jsxs(
4383
+ "div",
4384
+ {
4385
+ style: {
4386
+ backgroundColor: "#ffffff",
4387
+ borderRadius: "12px 12px 0 0",
4388
+ width: "100%",
4389
+ padding: "18px 24px 24px",
4390
+ boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
4391
+ },
4392
+ children: [
4393
+ /* @__PURE__ */ jsxs(
4394
+ "div",
4395
+ {
4396
+ style: {
4397
+ display: "flex",
4398
+ alignItems: "center",
4399
+ justifyContent: "space-between",
4400
+ marginBottom: "16px"
4401
+ },
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",
4469
+ {
4470
+ d: "M12 4L4 12M4 4L12 12",
4471
+ stroke: "currentColor",
4472
+ strokeWidth: "2",
4473
+ strokeLinecap: "round",
4474
+ strokeLinejoin: "round"
4475
+ }
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",
4511
+ {
4512
+ style: {
4513
+ fontSize: "16px",
4514
+ color: allSuccess ? "#16a34a" : "#ca8a04"
4515
+ },
4516
+ children: allSuccess ? "\u2713" : "!"
4517
+ }
4518
+ )
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
+ ]
4550
+ }
4551
+ ),
4552
+ /* @__PURE__ */ jsx(
4287
4553
  "div",
4288
4554
  {
4289
4555
  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
- }
4556
+ overflow: "hidden",
4557
+ maxHeight: isDetailsExpanded ? "200px" : "0px",
4558
+ opacity: isDetailsExpanded ? 1 : 0,
4559
+ transition: "max-height 0.3s ease, opacity 0.3s ease",
4560
+ marginBottom: isDetailsExpanded ? "16px" : "0"
4561
+ },
4562
+ children: /* @__PURE__ */ jsx(
4563
+ "div",
4564
+ {
4565
+ style: {
4566
+ maxHeight: "180px",
4567
+ overflowY: "auto",
4568
+ display: "flex",
4569
+ flexDirection: "column",
4570
+ gap: "8px"
4571
+ },
4572
+ children: results.map((result, idx) => /* @__PURE__ */ jsxs(
4573
+ "div",
4574
+ {
4575
+ style: {
4576
+ padding: "12px",
4577
+ borderRadius: "8px",
4578
+ border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
4579
+ backgroundColor: result.success ? "#f0fdf4" : "#fef2f2"
4580
+ },
4581
+ children: [
4582
+ /* @__PURE__ */ jsxs(
4583
+ "div",
4584
+ {
4585
+ style: {
4586
+ display: "flex",
4587
+ justifyContent: "space-between",
4588
+ alignItems: "center"
4589
+ },
4590
+ 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
+ /* @__PURE__ */ jsx(
4617
+ "span",
4618
+ {
4619
+ style: {
4620
+ color: result.success ? "#16a34a" : "#dc2626",
4621
+ fontSize: "13px",
4622
+ fontWeight: 500
4623
+ },
4624
+ children: result.success ? "\u2713 Success" : "\u2717 Failed"
4625
+ }
4626
+ )
4627
+ ]
4628
+ }
4629
+ ),
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",
4648
+ {
4649
+ style: {
4650
+ fontSize: "12px",
4651
+ color: "#dc2626",
4652
+ margin: "4px 0 0 0",
4653
+ wordWrap: "break-word",
4654
+ overflowWrap: "break-word"
4655
+ },
4656
+ children: result.error
4657
+ }
4658
+ )
4659
+ ]
4660
+ },
4661
+ idx
4662
+ ))
4663
+ }
4664
+ )
4665
+ }
4666
+ ),
4667
+ /* @__PURE__ */ jsx(
4668
+ "button",
4669
+ {
4670
+ onClick: handleComplete,
4671
+ style: {
4672
+ width: "100%",
4673
+ height: "48px",
4674
+ padding: "14px 24px",
4675
+ borderRadius: "6px",
4676
+ backgroundColor: "#ea4b4b",
4677
+ border: "1px solid #0e0d0b",
4678
+ color: "#0e0d0b",
4679
+ fontWeight: 500,
4680
+ fontSize: "16px",
4681
+ fontFamily: '"IBM Plex Mono", monospace',
4682
+ textTransform: "uppercase",
4683
+ cursor: "pointer",
4684
+ transition: "all 0.2s ease",
4685
+ display: "flex",
4686
+ alignItems: "center",
4687
+ justifyContent: "center",
4688
+ gap: "8px"
4689
+ },
4690
+ children: "CONTINUE \u2192"
4296
4691
  }
4297
4692
  )
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"
4693
+ ]
4694
+ }
4695
+ ),
4696
+ /* @__PURE__ */ jsx("style", { children: `
4697
+ @keyframes slideUp {
4698
+ from {
4699
+ transform: translateY(100%);
4700
+ }
4701
+ to {
4702
+ transform: translateY(0);
4703
+ }
4363
4704
  }
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"
4705
+ @keyframes slideDown {
4706
+ from {
4707
+ transform: translateY(0);
4708
+ }
4709
+ to {
4710
+ transform: translateY(100%);
4711
+ }
4390
4712
  }
4391
- )
4392
- ] })
4393
- ] });
4713
+ ` })
4714
+ ]
4715
+ }
4716
+ );
4394
4717
  };
4395
4718
 
4396
4719
  const DepositWidget = ({
@@ -5527,151 +5850,24 @@ const CrossChainDepositModal = ({
5527
5850
  ]
5528
5851
  }
5529
5852
  );
5530
- const successOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsxs(
5531
- "div",
5853
+ const successOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsx(
5854
+ DepositStatusPanel,
5532
5855
  {
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
- ]
5856
+ isOpen: isSuccess && depositResults.length > 0,
5857
+ onClose,
5858
+ onComplete,
5859
+ results: depositResults.map((result) => ({
5860
+ asset: {
5861
+ symbol: result.asset.symbol,
5862
+ address: result.asset.address
5863
+ },
5864
+ txHash: result.txHash,
5865
+ success: result.success,
5866
+ error: result.error
5867
+ })),
5868
+ chainName: chainConfig?.name || "Network",
5869
+ explorerUrl: chainConfig?.blockExplorers?.default?.url,
5870
+ theme
5675
5871
  }
5676
5872
  ) : null;
5677
5873
  return /* @__PURE__ */ jsx(
@@ -13441,4 +13637,4 @@ const useDepositInput = () => {
13441
13637
  };
13442
13638
  };
13443
13639
 
13444
- export { ConnectWalletModal, CrossChainDepositModal, DepositModal, DepositWidget, DepositWidgetModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SpiceWithdraw, SwapWidget, WithdrawModal, fetchBalances, relayerService, useAssets, useDepositInput, useFromInput, useSpiceBalance, useStatus, useToInputUpdate, useWallet };
13640
+ export { ConnectWalletModal, CrossChainDepositModal, DepositModal, DepositWidget, DepositWidgetModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SpiceWithdraw, SwapWidget, WithdrawModal, fetchBalances, relayerService, useAssets, useDepositInput, useEmbeddedWalletAddress, useFromInput, useSpiceAssets, useSpiceBalance, useStatus, useToInputUpdate, useWallet };