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