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