@spicenet-io/spiceflow-ui 1.9.21 → 1.9.22

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.
package/dist/index.cjs.js CHANGED
@@ -4377,7 +4377,9 @@ const DepositStatusPanel = ({
4377
4377
  intentStatus,
4378
4378
  onRetry,
4379
4379
  onNewDeposit,
4380
- onRetryDeposit
4380
+ onRetryDeposit,
4381
+ asOverlay = false,
4382
+ isProcessing: isProcessingProp = false
4381
4383
  }) => {
4382
4384
  const theme = providedTheme || Button.createTheme("light");
4383
4385
  const [isClosing, setIsClosing] = React.useState(false);
@@ -4409,336 +4411,372 @@ const DepositStatusPanel = ({
4409
4411
  stepWithTxHash.chainId,
4410
4412
  stepWithTxHash.transactionHash || ""
4411
4413
  ).replace(/\/tx\/.*$/, "") : void 0);
4412
- return /* @__PURE__ */ jsxRuntime.jsxs(
4413
- "div",
4414
- {
4415
- style: {
4416
- backgroundColor: "#ffffff",
4417
- borderRadius: "12px",
4418
- padding: "24px",
4419
- width: "100%",
4420
- boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)"
4421
- },
4422
- children: [
4423
- /* @__PURE__ */ jsxRuntime.jsxs(
4424
- "div",
4425
- {
4426
- style: {
4427
- display: "flex",
4428
- alignItems: "center",
4429
- justifyContent: "space-between",
4430
- marginBottom: "16px"
4431
- },
4432
- children: [
4433
- /* @__PURE__ */ jsxRuntime.jsxs(
4434
- "div",
4435
- {
4436
- style: {
4437
- display: "flex",
4438
- alignItems: "center",
4439
- gap: "8px",
4440
- cursor: "pointer"
4441
- },
4442
- onClick: toggleDetails,
4443
- children: [
4444
- /* @__PURE__ */ jsxRuntime.jsx(
4445
- "span",
4446
- {
4447
- style: {
4448
- fontSize: "13px",
4449
- fontWeight: 500,
4450
- color: "#6b7280",
4451
- fontFamily: styles?.fontFamily || theme.typography.fontFamily
4452
- },
4453
- children: "Deposit Results"
4454
- }
4455
- ),
4456
- /* @__PURE__ */ jsxRuntime.jsx(
4457
- "svg",
4414
+ const panelContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4415
+ /* @__PURE__ */ jsxRuntime.jsxs(
4416
+ "div",
4417
+ {
4418
+ style: {
4419
+ display: "flex",
4420
+ alignItems: "center",
4421
+ justifyContent: "space-between",
4422
+ marginBottom: "16px"
4423
+ },
4424
+ children: [
4425
+ /* @__PURE__ */ jsxRuntime.jsxs(
4426
+ "div",
4427
+ {
4428
+ style: {
4429
+ display: "flex",
4430
+ alignItems: "center",
4431
+ gap: "8px",
4432
+ cursor: "pointer"
4433
+ },
4434
+ onClick: toggleDetails,
4435
+ children: [
4436
+ /* @__PURE__ */ jsxRuntime.jsx(
4437
+ "span",
4438
+ {
4439
+ style: {
4440
+ fontSize: "13px",
4441
+ fontWeight: 500,
4442
+ color: "#6b7280",
4443
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily
4444
+ },
4445
+ children: isProcessing ? "Processing Deposit" : "Deposit Results"
4446
+ }
4447
+ ),
4448
+ /* @__PURE__ */ jsxRuntime.jsx(
4449
+ "svg",
4450
+ {
4451
+ width: "16",
4452
+ height: "16",
4453
+ viewBox: "0 0 16 16",
4454
+ fill: "none",
4455
+ style: {
4456
+ transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
4457
+ transition: "transform 0.3s ease"
4458
+ },
4459
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4460
+ "path",
4458
4461
  {
4459
- width: "16",
4460
- height: "16",
4461
- viewBox: "0 0 16 16",
4462
- fill: "none",
4463
- style: {
4464
- transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
4465
- transition: "transform 0.3s ease"
4466
- },
4467
- children: /* @__PURE__ */ jsxRuntime.jsx(
4468
- "path",
4469
- {
4470
- d: "M4 6L8 10L12 6",
4471
- stroke: "#6b7280",
4472
- strokeWidth: "2",
4473
- strokeLinecap: "round",
4474
- strokeLinejoin: "round"
4475
- }
4476
- )
4462
+ d: "M4 6L8 10L12 6",
4463
+ stroke: "#6b7280",
4464
+ strokeWidth: "2",
4465
+ strokeLinecap: "round",
4466
+ strokeLinejoin: "round"
4477
4467
  }
4478
4468
  )
4479
- ]
4480
- }
4481
- ),
4482
- !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4483
- "button",
4469
+ }
4470
+ )
4471
+ ]
4472
+ }
4473
+ ),
4474
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4475
+ "button",
4476
+ {
4477
+ onClick: onClose,
4478
+ onMouseEnter: () => setHoveredButton("close"),
4479
+ onMouseLeave: () => {
4480
+ setHoveredButton(null);
4481
+ setPressedButton(null);
4482
+ },
4483
+ onMouseDown: () => setPressedButton("close"),
4484
+ onMouseUp: () => setPressedButton(null),
4485
+ style: {
4486
+ background: pressedButton === "close" ? "#f3f4f6" : hoveredButton === "close" ? "#f9fafb" : "none",
4487
+ border: "none",
4488
+ borderRadius: "4px",
4489
+ cursor: "pointer",
4490
+ padding: "4px",
4491
+ display: "flex",
4492
+ alignItems: "center",
4493
+ justifyContent: "center",
4494
+ color: hoveredButton === "close" || pressedButton === "close" ? "#374151" : "#6b7280",
4495
+ transform: pressedButton === "close" ? "scale(0.9)" : hoveredButton === "close" ? "scale(1.1)" : "scale(1)",
4496
+ transition: "all 0.15s ease"
4497
+ },
4498
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
4499
+ "path",
4484
4500
  {
4485
- onClick: onClose,
4486
- onMouseEnter: () => setHoveredButton("close"),
4487
- onMouseLeave: () => {
4488
- setHoveredButton(null);
4489
- setPressedButton(null);
4490
- },
4491
- onMouseDown: () => setPressedButton("close"),
4492
- onMouseUp: () => setPressedButton(null),
4493
- style: {
4494
- background: pressedButton === "close" ? "#f3f4f6" : hoveredButton === "close" ? "#f9fafb" : "none",
4495
- border: "none",
4496
- borderRadius: "4px",
4497
- cursor: "pointer",
4498
- padding: "4px",
4499
- display: "flex",
4500
- alignItems: "center",
4501
- justifyContent: "center",
4502
- color: hoveredButton === "close" || pressedButton === "close" ? "#374151" : "#6b7280",
4503
- transform: pressedButton === "close" ? "scale(0.9)" : hoveredButton === "close" ? "scale(1.1)" : "scale(1)",
4504
- transition: "all 0.15s ease"
4505
- },
4506
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
4507
- "path",
4508
- {
4509
- d: "M12 4L4 12M4 4L12 12",
4510
- stroke: "currentColor",
4511
- strokeWidth: "2",
4512
- strokeLinecap: "round",
4513
- strokeLinejoin: "round"
4514
- }
4515
- ) })
4501
+ d: "M12 4L4 12M4 4L12 12",
4502
+ stroke: "currentColor",
4503
+ strokeWidth: "2",
4504
+ strokeLinecap: "round",
4505
+ strokeLinejoin: "round"
4516
4506
  }
4517
- )
4518
- ]
4519
- }
4520
- ),
4521
- /* @__PURE__ */ jsxRuntime.jsx(
4522
- "div",
4523
- {
4524
- style: {
4525
- marginBottom: "16px"
4526
- },
4527
- children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(
4528
- "div",
4507
+ ) })
4508
+ }
4509
+ )
4510
+ ]
4511
+ }
4512
+ ),
4513
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(
4514
+ "div",
4515
+ {
4516
+ style: {
4517
+ display: "flex",
4518
+ alignItems: "center",
4519
+ justifyContent: "center",
4520
+ padding: "20px 16px",
4521
+ borderRadius: "8px",
4522
+ backgroundColor: "#f3f4f6",
4523
+ border: "1px solid #e5e7eb",
4524
+ gap: "12px"
4525
+ },
4526
+ children: [
4527
+ /* @__PURE__ */ jsxRuntime.jsx(
4528
+ "div",
4529
+ {
4530
+ style: {
4531
+ width: "24px",
4532
+ height: "24px",
4533
+ border: "3px solid #e5e7eb",
4534
+ borderTopColor: theme.colors.primary,
4535
+ borderRadius: "50%",
4536
+ animation: "spin 1s linear infinite"
4537
+ }
4538
+ }
4539
+ ),
4540
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4541
+ /* @__PURE__ */ jsxRuntime.jsx(
4542
+ "p",
4529
4543
  {
4530
4544
  style: {
4531
- display: "flex",
4532
- alignItems: "center",
4533
- justifyContent: "center",
4534
- padding: "20px 16px",
4535
- borderRadius: "8px",
4536
- backgroundColor: "#f3f4f6",
4537
- border: "1px solid #e5e7eb",
4538
- gap: "12px"
4545
+ margin: 0,
4546
+ fontSize: "14px",
4547
+ fontWeight: 600,
4548
+ fontFamily: '"IBM Plex Mono", monospace',
4549
+ letterSpacing: "0.5px",
4550
+ color: "#374151"
4539
4551
  },
4540
- children: [
4541
- /* @__PURE__ */ jsxRuntime.jsx(
4542
- "div",
4543
- {
4544
- style: {
4545
- width: "24px",
4546
- height: "24px",
4547
- border: "3px solid #e5e7eb",
4548
- borderTopColor: theme.colors.primary,
4549
- borderRadius: "50%",
4550
- animation: "spin 1s linear infinite"
4551
- }
4552
- }
4553
- ),
4554
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4555
- /* @__PURE__ */ jsxRuntime.jsx(
4556
- "p",
4557
- {
4558
- style: {
4559
- margin: 0,
4560
- fontSize: "14px",
4561
- fontWeight: 600,
4562
- fontFamily: '"IBM Plex Mono", monospace',
4563
- letterSpacing: "0.5px",
4564
- color: "#374151"
4565
- },
4566
- children: "PROCESSING TRANSACTION"
4567
- }
4568
- ),
4569
- /* @__PURE__ */ jsxRuntime.jsxs(
4570
- "p",
4571
- {
4572
- style: {
4573
- margin: "2px 0 0 0",
4574
- fontSize: "12px",
4575
- color: "#6b7280"
4576
- },
4577
- children: [
4578
- "on ",
4579
- derivedChainName
4580
- ]
4581
- }
4582
- )
4583
- ] })
4584
- ]
4552
+ children: "PROCESSING TRANSACTION"
4585
4553
  }
4586
- ) : /* @__PURE__ */ jsxRuntime.jsx(
4587
- StatusCard,
4554
+ ),
4555
+ /* @__PURE__ */ jsxRuntime.jsxs(
4556
+ "p",
4588
4557
  {
4589
- isSuccess,
4590
- chainName: derivedChainName,
4591
- explorerUrl: derivedExplorerUrl,
4592
- txHash: stepWithTxHash?.transactionHash
4558
+ style: {
4559
+ margin: "2px 0 0 0",
4560
+ fontSize: "12px",
4561
+ color: "#6b7280"
4562
+ },
4563
+ children: [
4564
+ "on ",
4565
+ derivedChainName
4566
+ ]
4593
4567
  }
4594
4568
  )
4595
- }
4596
- ),
4597
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4569
+ ] })
4570
+ ]
4571
+ }
4572
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
4573
+ StatusCard,
4574
+ {
4575
+ isSuccess,
4576
+ chainName: derivedChainName,
4577
+ explorerUrl: derivedExplorerUrl,
4578
+ txHash: stepWithTxHash?.transactionHash
4579
+ }
4580
+ ) }),
4581
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4598
4582
  @keyframes spin {
4599
4583
  from { transform: rotate(0deg); }
4600
4584
  to { transform: rotate(360deg); }
4601
4585
  }
4602
4586
  ` }),
4603
- /* @__PURE__ */ jsxRuntime.jsx(
4587
+ /* @__PURE__ */ jsxRuntime.jsx(
4588
+ "div",
4589
+ {
4590
+ style: {
4591
+ overflow: "hidden",
4592
+ maxHeight: isDetailsExpanded ? "300px" : "0px",
4593
+ opacity: isDetailsExpanded ? 1 : 0,
4594
+ transition: "max-height 0.3s ease, opacity 0.3s ease",
4595
+ marginBottom: isDetailsExpanded ? "16px" : "0"
4596
+ },
4597
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4604
4598
  "div",
4605
4599
  {
4606
4600
  style: {
4607
- overflow: "hidden",
4608
- maxHeight: isDetailsExpanded ? "300px" : "0px",
4609
- opacity: isDetailsExpanded ? 1 : 0,
4610
- transition: "max-height 0.3s ease, opacity 0.3s ease",
4611
- marginBottom: isDetailsExpanded ? "16px" : "0"
4601
+ display: "flex",
4602
+ flexDirection: "column",
4603
+ gap: "8px"
4612
4604
  },
4613
- children: /* @__PURE__ */ jsxRuntime.jsx(
4605
+ children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
4614
4606
  "div",
4615
4607
  {
4616
4608
  style: {
4609
+ padding: "10px 12px",
4610
+ borderRadius: "6px",
4611
+ backgroundColor: "#f9fafb",
4612
+ border: "1px solid #e5e7eb",
4617
4613
  display: "flex",
4618
- flexDirection: "column",
4619
- gap: "8px"
4614
+ justifyContent: "space-between",
4615
+ alignItems: "center"
4620
4616
  },
4621
- children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
4622
- "div",
4623
- {
4624
- style: {
4625
- padding: "10px 12px",
4626
- borderRadius: "6px",
4627
- backgroundColor: "#f9fafb",
4628
- border: "1px solid #e5e7eb",
4629
- display: "flex",
4630
- justifyContent: "space-between",
4631
- alignItems: "center"
4632
- },
4633
- children: [
4634
- /* @__PURE__ */ jsxRuntime.jsx(
4635
- "span",
4636
- {
4637
- style: {
4638
- fontSize: "13px",
4639
- color: "#374151"
4640
- },
4641
- children: step.description || `Step ${idx + 1}`
4642
- }
4643
- ),
4644
- /* @__PURE__ */ jsxRuntime.jsx(
4645
- "span",
4646
- {
4647
- style: {
4648
- fontSize: "12px",
4649
- color: step.status === "success" ? "#10b981" : step.status === "failed" ? "#ef4444" : "#6b7280",
4650
- fontWeight: 500
4651
- },
4652
- children: step.status === "success" ? "\u2713" : step.status === "failed" ? "\u2717" : "\u25CB"
4653
- }
4654
- )
4655
- ]
4656
- },
4657
- idx
4658
- ))
4659
- }
4660
- )
4617
+ children: [
4618
+ /* @__PURE__ */ jsxRuntime.jsx(
4619
+ "span",
4620
+ {
4621
+ style: {
4622
+ fontSize: "13px",
4623
+ color: "#374151"
4624
+ },
4625
+ children: step.description || `Step ${idx + 1}`
4626
+ }
4627
+ ),
4628
+ /* @__PURE__ */ jsxRuntime.jsx(
4629
+ "span",
4630
+ {
4631
+ style: {
4632
+ fontSize: "12px",
4633
+ color: step.status === "success" ? "#10b981" : step.status === "failed" ? "#ef4444" : "#6b7280",
4634
+ fontWeight: 500
4635
+ },
4636
+ children: step.status === "success" ? "\u2713" : step.status === "failed" ? "\u2717" : "\u25CB"
4637
+ }
4638
+ )
4639
+ ]
4640
+ },
4641
+ idx
4642
+ ))
4661
4643
  }
4662
- ),
4663
- !isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4664
- isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
4665
- "button",
4644
+ )
4645
+ }
4646
+ ),
4647
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4648
+ isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
4649
+ "button",
4650
+ {
4651
+ onClick: onRetry,
4652
+ onMouseEnter: () => setHoveredButton("retry"),
4653
+ onMouseLeave: () => {
4654
+ setHoveredButton(null);
4655
+ setPressedButton(null);
4656
+ },
4657
+ onMouseDown: () => setPressedButton("retry"),
4658
+ onMouseUp: () => setPressedButton(null),
4659
+ style: {
4660
+ width: "100%",
4661
+ height: "48px",
4662
+ padding: "14px 24px",
4663
+ borderRadius: "6px",
4664
+ backgroundColor: pressedButton === "retry" ? "#d43d3d" : hoveredButton === "retry" ? "#f05555" : "#ea4b4b",
4665
+ border: "1px solid #0e0d0b",
4666
+ color: "#0e0d0b",
4667
+ fontWeight: 500,
4668
+ fontSize: "16px",
4669
+ fontFamily: '"IBM Plex Mono", monospace',
4670
+ textTransform: "uppercase",
4671
+ cursor: "pointer",
4672
+ display: "flex",
4673
+ alignItems: "center",
4674
+ justifyContent: "center",
4675
+ gap: "8px",
4676
+ transition: "all 0.15s ease",
4677
+ transform: pressedButton === "retry" ? "scale(0.98)" : hoveredButton === "retry" ? "translateY(-2px)" : "none",
4678
+ boxShadow: pressedButton === "retry" ? "1px 1px 0px black" : hoveredButton === "retry" ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
4679
+ },
4680
+ children: "TRY AGAIN"
4681
+ }
4682
+ ),
4683
+ onNewDeposit && /* @__PURE__ */ jsxRuntime.jsx(
4684
+ "button",
4685
+ {
4686
+ onClick: onNewDeposit,
4687
+ onMouseEnter: () => setHoveredButton("continue-intent"),
4688
+ onMouseLeave: () => {
4689
+ setHoveredButton(null);
4690
+ setPressedButton(null);
4691
+ },
4692
+ onMouseDown: () => setPressedButton("continue-intent"),
4693
+ onMouseUp: () => setPressedButton(null),
4694
+ style: {
4695
+ width: "100%",
4696
+ height: "48px",
4697
+ padding: "14px 24px",
4698
+ borderRadius: "6px",
4699
+ backgroundColor: pressedButton === "continue-intent" ? "#d43d3d" : hoveredButton === "continue-intent" ? "#f05555" : "#ea4b4b",
4700
+ border: "1px solid #0e0d0b",
4701
+ color: "#0e0d0b",
4702
+ fontWeight: 500,
4703
+ fontSize: "16px",
4704
+ fontFamily: '"IBM Plex Mono", monospace',
4705
+ textTransform: "uppercase",
4706
+ cursor: "pointer",
4707
+ display: "flex",
4708
+ alignItems: "center",
4709
+ justifyContent: "center",
4710
+ gap: "8px",
4711
+ transition: "all 0.15s ease",
4712
+ transform: pressedButton === "continue-intent" ? "scale(0.98)" : hoveredButton === "continue-intent" ? "translateY(-2px)" : "none",
4713
+ boxShadow: pressedButton === "continue-intent" ? "1px 1px 0px black" : hoveredButton === "continue-intent" ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
4714
+ },
4715
+ children: "CONTINUE \u2192"
4716
+ }
4717
+ )
4718
+ ] })
4719
+ ] });
4720
+ if (asOverlay) {
4721
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4722
+ "div",
4723
+ {
4724
+ style: {
4725
+ position: "absolute",
4726
+ bottom: 0,
4727
+ left: 0,
4728
+ right: 0,
4729
+ zIndex: 10,
4730
+ animation: isClosing ? "slideDown 0.3s ease-in forwards" : "slideUp 0.3s ease-out forwards",
4731
+ pointerEvents: "auto"
4732
+ },
4733
+ children: [
4734
+ /* @__PURE__ */ jsxRuntime.jsx(
4735
+ "div",
4666
4736
  {
4667
- onClick: onRetry,
4668
- onMouseEnter: () => setHoveredButton("retry"),
4669
- onMouseLeave: () => {
4670
- setHoveredButton(null);
4671
- setPressedButton(null);
4672
- },
4673
- onMouseDown: () => setPressedButton("retry"),
4674
- onMouseUp: () => setPressedButton(null),
4675
4737
  style: {
4738
+ backgroundColor: "#ffffff",
4739
+ borderRadius: "12px 12px 0 0",
4676
4740
  width: "100%",
4677
- height: "48px",
4678
- padding: "14px 24px",
4679
- borderRadius: "6px",
4680
- backgroundColor: pressedButton === "retry" ? "#d43d3d" : hoveredButton === "retry" ? "#f05555" : "#ea4b4b",
4681
- border: "1px solid #0e0d0b",
4682
- color: "#0e0d0b",
4683
- fontWeight: 500,
4684
- fontSize: "16px",
4685
- fontFamily: '"IBM Plex Mono", monospace',
4686
- textTransform: "uppercase",
4687
- cursor: "pointer",
4688
- display: "flex",
4689
- alignItems: "center",
4690
- justifyContent: "center",
4691
- gap: "8px",
4692
- transition: "all 0.15s ease",
4693
- transform: pressedButton === "retry" ? "scale(0.98)" : hoveredButton === "retry" ? "translateY(-2px)" : "none",
4694
- boxShadow: pressedButton === "retry" ? "1px 1px 0px black" : hoveredButton === "retry" ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
4741
+ padding: "18px 24px 24px",
4742
+ boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.15)"
4695
4743
  },
4696
- children: "RETRY"
4744
+ children: panelContent
4697
4745
  }
4698
4746
  ),
4699
- onNewDeposit && /* @__PURE__ */ jsxRuntime.jsx(
4700
- "button",
4701
- {
4702
- onClick: onNewDeposit,
4703
- onMouseEnter: () => setHoveredButton("continue-intent"),
4704
- onMouseLeave: () => {
4705
- setHoveredButton(null);
4706
- setPressedButton(null);
4707
- },
4708
- onMouseDown: () => setPressedButton("continue-intent"),
4709
- onMouseUp: () => setPressedButton(null),
4710
- style: {
4711
- width: "100%",
4712
- height: "48px",
4713
- padding: "14px 24px",
4714
- borderRadius: "6px",
4715
- backgroundColor: pressedButton === "continue-intent" ? "#d43d3d" : hoveredButton === "continue-intent" ? "#f05555" : "#ea4b4b",
4716
- border: "1px solid #0e0d0b",
4717
- color: "#0e0d0b",
4718
- fontWeight: 500,
4719
- fontSize: "16px",
4720
- fontFamily: '"IBM Plex Mono", monospace',
4721
- textTransform: "uppercase",
4722
- cursor: "pointer",
4723
- display: "flex",
4724
- alignItems: "center",
4725
- justifyContent: "center",
4726
- gap: "8px",
4727
- transition: "all 0.15s ease",
4728
- transform: pressedButton === "continue-intent" ? "scale(0.98)" : hoveredButton === "continue-intent" ? "translateY(-2px)" : "none",
4729
- boxShadow: pressedButton === "continue-intent" ? "1px 1px 0px black" : hoveredButton === "continue-intent" ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
4730
- },
4731
- children: "CONTINUE \u2192"
4732
- }
4733
- )
4734
- ] })
4735
- ]
4747
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4748
+ @keyframes slideUp {
4749
+ from { transform: translateY(100%); }
4750
+ to { transform: translateY(0); }
4751
+ }
4752
+ @keyframes slideDown {
4753
+ from { transform: translateY(0); }
4754
+ to { transform: translateY(100%); }
4755
+ }
4756
+ ` })
4757
+ ]
4758
+ }
4759
+ );
4760
+ }
4761
+ return /* @__PURE__ */ jsxRuntime.jsx(
4762
+ "div",
4763
+ {
4764
+ style: {
4765
+ backgroundColor: "#ffffff",
4766
+ borderRadius: "12px",
4767
+ padding: "24px",
4768
+ width: "100%",
4769
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)"
4770
+ },
4771
+ children: panelContent
4736
4772
  }
4737
4773
  );
4738
4774
  }
4739
- if (!isOpen || !results || results.length === 0) return null;
4740
- const allSuccess = results.every((r) => r.success);
4741
- const firstResult = results[0];
4775
+ if (!isOpen && !isProcessingProp) return null;
4776
+ if (!isProcessingProp && (!results || results.length === 0)) return null;
4777
+ const allSuccess = results ? results.every((r) => r.success) : false;
4778
+ results ? results.some((r) => !r.success) : false;
4779
+ const firstResult = results?.[0];
4742
4780
  const txHash = firstResult?.txHash;
4743
4781
  return /* @__PURE__ */ jsxRuntime.jsxs(
4744
4782
  "div",
@@ -4780,9 +4818,9 @@ const DepositStatusPanel = ({
4780
4818
  display: "flex",
4781
4819
  alignItems: "center",
4782
4820
  gap: "8px",
4783
- cursor: "pointer"
4821
+ cursor: isProcessingProp ? "default" : "pointer"
4784
4822
  },
4785
- onClick: toggleDetails,
4823
+ onClick: isProcessingProp ? void 0 : toggleDetails,
4786
4824
  children: [
4787
4825
  /* @__PURE__ */ jsxRuntime.jsx(
4788
4826
  "span",
@@ -4793,10 +4831,10 @@ const DepositStatusPanel = ({
4793
4831
  color: "#6b7280",
4794
4832
  fontFamily: styles?.fontFamily || theme.typography.fontFamily
4795
4833
  },
4796
- children: "Deposit Results"
4834
+ children: isProcessingProp ? "Processing Deposit" : "Deposit Results"
4797
4835
  }
4798
4836
  ),
4799
- /* @__PURE__ */ jsxRuntime.jsx(
4837
+ !isProcessingProp && /* @__PURE__ */ jsxRuntime.jsx(
4800
4838
  "svg",
4801
4839
  {
4802
4840
  width: "16",
@@ -4824,7 +4862,66 @@ const DepositStatusPanel = ({
4824
4862
  )
4825
4863
  }
4826
4864
  ),
4827
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
4865
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: isProcessingProp ? /* @__PURE__ */ jsxRuntime.jsxs(
4866
+ "div",
4867
+ {
4868
+ style: {
4869
+ display: "flex",
4870
+ alignItems: "center",
4871
+ justifyContent: "center",
4872
+ padding: "20px 16px",
4873
+ borderRadius: "8px",
4874
+ backgroundColor: "#f3f4f6",
4875
+ border: "1px solid #e5e7eb",
4876
+ gap: "12px"
4877
+ },
4878
+ children: [
4879
+ /* @__PURE__ */ jsxRuntime.jsx(
4880
+ "div",
4881
+ {
4882
+ style: {
4883
+ width: "24px",
4884
+ height: "24px",
4885
+ border: "3px solid #e5e7eb",
4886
+ borderTopColor: theme.colors.primary,
4887
+ borderRadius: "50%",
4888
+ animation: "spin 1s linear infinite"
4889
+ }
4890
+ }
4891
+ ),
4892
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4893
+ /* @__PURE__ */ jsxRuntime.jsx(
4894
+ "p",
4895
+ {
4896
+ style: {
4897
+ margin: 0,
4898
+ fontSize: "14px",
4899
+ fontWeight: 600,
4900
+ fontFamily: '"IBM Plex Mono", monospace',
4901
+ letterSpacing: "0.5px",
4902
+ color: "#374151"
4903
+ },
4904
+ children: "PROCESSING TRANSACTION"
4905
+ }
4906
+ ),
4907
+ /* @__PURE__ */ jsxRuntime.jsxs(
4908
+ "p",
4909
+ {
4910
+ style: {
4911
+ margin: "2px 0 0 0",
4912
+ fontSize: "12px",
4913
+ color: "#6b7280"
4914
+ },
4915
+ children: [
4916
+ "on ",
4917
+ chainName
4918
+ ]
4919
+ }
4920
+ )
4921
+ ] })
4922
+ ]
4923
+ }
4924
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
4828
4925
  StatusCard,
4829
4926
  {
4830
4927
  isSuccess: allSuccess,
@@ -4833,7 +4930,13 @@ const DepositStatusPanel = ({
4833
4930
  txHash
4834
4931
  }
4835
4932
  ) }),
4836
- results.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
4933
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4934
+ @keyframes spin {
4935
+ from { transform: rotate(0deg); }
4936
+ to { transform: rotate(360deg); }
4937
+ }
4938
+ ` }),
4939
+ !isProcessingProp && results && results.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
4837
4940
  "div",
4838
4941
  {
4839
4942
  style: {
@@ -4910,7 +5013,7 @@ const DepositStatusPanel = ({
4910
5013
  )
4911
5014
  }
4912
5015
  ),
4913
- !allSuccess && /* @__PURE__ */ jsxRuntime.jsx(
5016
+ !isProcessingProp && !allSuccess && results && /* @__PURE__ */ jsxRuntime.jsx(
4914
5017
  "div",
4915
5018
  {
4916
5019
  style: {
@@ -4934,7 +5037,7 @@ const DepositStatusPanel = ({
4934
5037
  )
4935
5038
  }
4936
5039
  ),
4937
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
5040
+ !isProcessingProp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4938
5041
  !allSuccess && onRetryDeposit && /* @__PURE__ */ jsxRuntime.jsx(
4939
5042
  "button",
4940
5043
  {
@@ -5253,160 +5356,167 @@ const DepositWidget = ({
5253
5356
  fontFamily: theme.typography.fontFamily,
5254
5357
  boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
5255
5358
  };
5256
- if (intentStatus) {
5257
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
5258
- DepositStatusPanel,
5259
- {
5260
- intentStatus,
5261
- onClose: clearStatus,
5262
- onRetry: () => {
5263
- clearStatus();
5264
- handleDeposit();
5265
- },
5266
- onNewDeposit: () => {
5267
- clearStatus();
5268
- setSelectedDepositAsset(null);
5269
- spiceDepositSubmittedRef.current = null;
5270
- refreshSpiceAssets();
5271
- },
5272
- theme
5273
- }
5274
- ) });
5275
- }
5276
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
5277
- !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsxRuntime.jsx(
5278
- "div",
5279
- {
5280
- style: {
5281
- backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
5282
- border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
5283
- borderRadius: theme.borderRadius.md,
5284
- padding: theme.spacing.md,
5285
- marginBottom: theme.spacing.md,
5286
- textAlign: "center"
5287
- },
5288
- children: /* @__PURE__ */ jsxRuntime.jsxs(
5289
- "p",
5359
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5360
+ "div",
5361
+ {
5362
+ style: { ...containerStyles, position: "relative", overflow: "hidden" },
5363
+ className,
5364
+ children: [
5365
+ intentStatus && /* @__PURE__ */ jsxRuntime.jsx(
5366
+ DepositStatusPanel,
5290
5367
  {
5291
- style: {
5292
- color: theme.mode === "light" ? "#92400e" : "#fbbf24",
5293
- fontSize: theme.typography.fontSize.sm,
5294
- fontFamily: theme.typography.fontFamily,
5295
- margin: 0,
5296
- lineHeight: 1.5
5368
+ intentStatus,
5369
+ onClose: clearStatus,
5370
+ onRetry: () => {
5371
+ clearStatus();
5372
+ handleDeposit();
5297
5373
  },
5298
- children: [
5299
- "You do not have any cross-chain balance.",
5300
- " ",
5301
- onTopUp && /* @__PURE__ */ jsxRuntime.jsx(
5302
- "span",
5303
- {
5304
- onClick: onTopUp,
5305
- style: {
5306
- color: theme.colors.primary,
5307
- textDecoration: "underline",
5308
- cursor: "pointer",
5309
- fontWeight: 600
5310
- },
5311
- children: "Top-up here."
5312
- }
5313
- )
5314
- ]
5374
+ onNewDeposit: () => {
5375
+ clearStatus();
5376
+ setSelectedDepositAsset(null);
5377
+ spiceDepositSubmittedRef.current = null;
5378
+ refreshSpiceAssets();
5379
+ },
5380
+ theme,
5381
+ asOverlay: true
5315
5382
  }
5316
- )
5317
- }
5318
- ),
5319
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
5320
- AssetSelector,
5321
- {
5322
- assets: spiceDepositAssets,
5323
- selectedAsset: selectedDepositAsset || void 0,
5324
- onAssetSelect: handleDepositAssetSelect,
5325
- onAmountChange: handleDepositAmountChange,
5326
- loading: loadingSpiceAssets,
5327
- label: "Amount",
5328
- showBalance: true,
5329
- showMaxButton: true,
5330
- theme,
5331
- styles
5332
- }
5333
- ) }),
5334
- displayError && /* @__PURE__ */ jsxRuntime.jsx(
5335
- "div",
5336
- {
5337
- style: {
5338
- backgroundColor: styles?.errorMessage?.backgroundColor || (theme.mode === "light" ? "#fef2f2" : `${styles?.statusDisplay?.errorColor || theme.colors.error}20`),
5339
- border: `1px solid ${styles?.errorMessage?.borderColor || (theme.mode === "light" ? "#fecaca" : styles?.statusDisplay?.errorColor || theme.colors.error)}`,
5340
- borderRadius: styles?.errorMessage?.borderRadius || theme.borderRadius.md,
5341
- padding: styles?.errorMessage?.padding || theme.spacing.md,
5342
- marginBottom: theme.spacing.sm
5343
- },
5344
- children: /* @__PURE__ */ jsxRuntime.jsx(
5345
- "p",
5383
+ ),
5384
+ !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsxRuntime.jsx(
5385
+ "div",
5346
5386
  {
5347
5387
  style: {
5348
- color: styles?.errorMessage?.color || styles?.statusDisplay?.errorColor || theme.colors.error,
5349
- fontSize: styles?.errorMessage?.fontSize || theme.typography.fontSize.sm,
5350
- fontWeight: styles?.errorMessage?.fontWeight,
5351
- fontFamily: styles?.errorMessage?.fontFamily || theme.typography.fontFamily,
5352
- margin: 0
5388
+ backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
5389
+ border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
5390
+ borderRadius: theme.borderRadius.md,
5391
+ padding: theme.spacing.md,
5392
+ marginBottom: theme.spacing.md,
5393
+ textAlign: "center"
5353
5394
  },
5354
- children: displayError
5395
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
5396
+ "p",
5397
+ {
5398
+ style: {
5399
+ color: theme.mode === "light" ? "#92400e" : "#fbbf24",
5400
+ fontSize: theme.typography.fontSize.sm,
5401
+ fontFamily: theme.typography.fontFamily,
5402
+ margin: 0,
5403
+ lineHeight: 1.5
5404
+ },
5405
+ children: [
5406
+ "You do not have any cross-chain balance.",
5407
+ " ",
5408
+ onTopUp && /* @__PURE__ */ jsxRuntime.jsx(
5409
+ "span",
5410
+ {
5411
+ onClick: onTopUp,
5412
+ style: {
5413
+ color: theme.colors.primary,
5414
+ textDecoration: "underline",
5415
+ cursor: "pointer",
5416
+ fontWeight: 600
5417
+ },
5418
+ children: "Top-up here."
5419
+ }
5420
+ )
5421
+ ]
5422
+ }
5423
+ )
5355
5424
  }
5356
- )
5357
- }
5358
- ),
5359
- /* @__PURE__ */ jsxRuntime.jsx(
5360
- "div",
5361
- {
5362
- style: {
5363
- display: "flex",
5364
- flexDirection: "column",
5365
- gap: theme.spacing.sm
5366
- },
5367
- children: /* @__PURE__ */ jsxRuntime.jsx(
5368
- Button.Button,
5425
+ ),
5426
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
5427
+ AssetSelector,
5428
+ {
5429
+ assets: spiceDepositAssets,
5430
+ selectedAsset: selectedDepositAsset || void 0,
5431
+ onAssetSelect: handleDepositAssetSelect,
5432
+ onAmountChange: handleDepositAmountChange,
5433
+ loading: loadingSpiceAssets,
5434
+ label: "Amount",
5435
+ showBalance: true,
5436
+ showMaxButton: true,
5437
+ theme,
5438
+ styles
5439
+ }
5440
+ ) }),
5441
+ displayError && /* @__PURE__ */ jsxRuntime.jsx(
5442
+ "div",
5443
+ {
5444
+ style: {
5445
+ backgroundColor: styles?.errorMessage?.backgroundColor || (theme.mode === "light" ? "#fef2f2" : `${styles?.statusDisplay?.errorColor || theme.colors.error}20`),
5446
+ border: `1px solid ${styles?.errorMessage?.borderColor || (theme.mode === "light" ? "#fecaca" : styles?.statusDisplay?.errorColor || theme.colors.error)}`,
5447
+ borderRadius: styles?.errorMessage?.borderRadius || theme.borderRadius.md,
5448
+ padding: styles?.errorMessage?.padding || theme.spacing.md,
5449
+ marginBottom: theme.spacing.sm
5450
+ },
5451
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5452
+ "p",
5453
+ {
5454
+ style: {
5455
+ color: styles?.errorMessage?.color || styles?.statusDisplay?.errorColor || theme.colors.error,
5456
+ fontSize: styles?.errorMessage?.fontSize || theme.typography.fontSize.sm,
5457
+ fontWeight: styles?.errorMessage?.fontWeight,
5458
+ fontFamily: styles?.errorMessage?.fontFamily || theme.typography.fontFamily,
5459
+ margin: 0
5460
+ },
5461
+ children: displayError
5462
+ }
5463
+ )
5464
+ }
5465
+ ),
5466
+ /* @__PURE__ */ jsxRuntime.jsx(
5467
+ "div",
5369
5468
  {
5370
- variant: "outline",
5371
- fullWidth: true,
5372
- onClick: handleDeposit,
5373
- onMouseEnter: () => setIsDepositHovered(true),
5374
- onMouseLeave: () => {
5375
- setIsDepositHovered(false);
5376
- setIsDepositPressed(false);
5377
- },
5378
- onMouseDown: () => setIsDepositPressed(true),
5379
- onMouseUp: () => setIsDepositPressed(false),
5380
- loading: isExecuting,
5381
- disabled: !canDeposit || !isConnected,
5382
- theme,
5383
- styles,
5384
5469
  style: {
5385
- width: "100%",
5386
- padding: "8px",
5387
- backgroundColor: canDeposit ? isDepositPressed ? "#d43d3d" : isDepositHovered ? "#f05555" : "#ea4b4b" : "#d1d5db",
5388
- color: canDeposit ? "#0e0d0b" : "#6b7280",
5389
- border: "1px solid #0e0d0b",
5390
- fontWeight: 500,
5391
- fontSize: "18px",
5392
- fontFamily: '"IBM Plex Mono", monospace',
5393
- lineHeight: "156%",
5394
- textTransform: "uppercase",
5395
- cursor: canDeposit ? "pointer" : "not-allowed",
5396
5470
  display: "flex",
5397
- alignItems: "center",
5398
- justifyContent: "center",
5399
- gap: "10px",
5400
- transition: "all 150ms ease",
5401
- transform: canDeposit ? isDepositPressed ? "scale(0.98)" : isDepositHovered ? "translateY(-2px)" : "none" : "none",
5402
- boxShadow: isDepositPressed ? "1px 1px 0px black" : isDepositHovered && canDeposit ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
5471
+ flexDirection: "column",
5472
+ gap: theme.spacing.sm
5403
5473
  },
5404
- children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5474
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5475
+ Button.Button,
5476
+ {
5477
+ variant: "outline",
5478
+ fullWidth: true,
5479
+ onClick: handleDeposit,
5480
+ onMouseEnter: () => setIsDepositHovered(true),
5481
+ onMouseLeave: () => {
5482
+ setIsDepositHovered(false);
5483
+ setIsDepositPressed(false);
5484
+ },
5485
+ onMouseDown: () => setIsDepositPressed(true),
5486
+ onMouseUp: () => setIsDepositPressed(false),
5487
+ loading: isExecuting,
5488
+ disabled: !canDeposit || !isConnected,
5489
+ theme,
5490
+ styles,
5491
+ style: {
5492
+ width: "100%",
5493
+ padding: "8px",
5494
+ backgroundColor: canDeposit ? isDepositPressed ? "#d43d3d" : isDepositHovered ? "#f05555" : "#ea4b4b" : "#d1d5db",
5495
+ color: canDeposit ? "#0e0d0b" : "#6b7280",
5496
+ border: "1px solid #0e0d0b",
5497
+ fontWeight: 500,
5498
+ fontSize: "18px",
5499
+ fontFamily: '"IBM Plex Mono", monospace',
5500
+ lineHeight: "156%",
5501
+ textTransform: "uppercase",
5502
+ cursor: canDeposit ? "pointer" : "not-allowed",
5503
+ marginTop: "20px",
5504
+ display: "flex",
5505
+ alignItems: "center",
5506
+ justifyContent: "center",
5507
+ gap: "10px",
5508
+ transition: "all 150ms ease",
5509
+ transform: canDeposit ? isDepositPressed ? "scale(0.98)" : isDepositHovered ? "translateY(-2px)" : "none" : "none",
5510
+ boxShadow: isDepositPressed ? "1px 1px 0px black" : isDepositHovered && canDeposit ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
5511
+ },
5512
+ children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5513
+ }
5514
+ )
5405
5515
  }
5406
5516
  )
5407
- }
5408
- )
5409
- ] });
5517
+ ]
5518
+ }
5519
+ );
5410
5520
  };
5411
5521
 
5412
5522
  var img$f = "data:image/svg+xml,%3csvg width='108' height='22' viewBox='0 0 108 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.9916 11.9854V11.2041H3.98379C4.48835 11.2041 4.87897 11.0739 5.15566 10.8135C5.43236 10.5498 5.5707 10.1868 5.5707 9.72461V9.71484C5.5707 9.24935 5.43236 8.88639 5.15566 8.62598C4.87897 8.36556 4.48835 8.23535 3.98379 8.23535H1.9916V7.4541H4.2084C4.65111 7.4541 5.04173 7.5485 5.38027 7.7373C5.71882 7.92611 5.98411 8.18978 6.17617 8.52832C6.37148 8.86686 6.46914 9.25911 6.46914 9.70508V9.71484C6.46914 10.1608 6.37148 10.5547 6.17617 10.8965C5.98411 11.2383 5.71882 11.5052 5.38027 11.6973C5.04173 11.8893 4.65111 11.9854 4.2084 11.9854H1.9916ZM1.55215 14.5V7.4541H2.43106V14.5H1.55215ZM9.51875 14.5928C9.0207 14.5928 8.58939 14.4837 8.2248 14.2656C7.86348 14.0443 7.58353 13.7301 7.38496 13.3232C7.18965 12.9163 7.09199 12.4329 7.09199 11.873V11.8633C7.09199 11.3001 7.18965 10.8151 7.38496 10.4082C7.58353 10.0013 7.86348 9.6888 8.2248 9.4707C8.58939 9.2526 9.0207 9.14355 9.51875 9.14355C10.0201 9.14355 10.4514 9.2526 10.8127 9.4707C11.174 9.6888 11.4523 10.0013 11.6477 10.4082C11.8462 10.8151 11.9455 11.3001 11.9455 11.8633V11.873C11.9455 12.4329 11.8462 12.9163 11.6477 13.3232C11.4523 13.7301 11.174 14.0443 10.8127 14.2656C10.4514 14.4837 10.0201 14.5928 9.51875 14.5928ZM9.51875 13.8408C9.85078 13.8408 10.1324 13.7627 10.3635 13.6064C10.5946 13.4502 10.7704 13.2256 10.8908 12.9326C11.0145 12.6396 11.0764 12.2865 11.0764 11.873V11.8633C11.0764 11.4466 11.0145 11.0918 10.8908 10.7988C10.7704 10.5059 10.5946 10.2829 10.3635 10.1299C10.1324 9.97363 9.85078 9.89551 9.51875 9.89551C9.18672 9.89551 8.90514 9.97363 8.67402 10.1299C8.4429 10.2829 8.26549 10.5059 8.1418 10.7988C8.02135 11.0918 7.96113 11.4466 7.96113 11.8633V11.873C7.96113 12.2865 8.02135 12.6396 8.1418 12.9326C8.26549 13.2256 8.4429 13.4502 8.67402 13.6064C8.90514 13.7627 9.18672 13.8408 9.51875 13.8408ZM13.7842 14.5L12.3096 9.23633H13.1592L14.1943 13.4453H14.2725L15.4492 9.23633H16.2549L17.4316 13.4453H17.5098L18.5449 9.23633H19.3896L17.915 14.5H17.0605L15.8838 10.4277H15.8057L14.6338 14.5H13.7842ZM22.1658 14.5928C21.6645 14.5928 21.2332 14.4821 20.8719 14.2607C20.5138 14.0394 20.2371 13.7269 20.0418 13.3232C19.8497 12.9163 19.7537 12.4378 19.7537 11.8877V11.8828C19.7537 11.3392 19.8497 10.8623 20.0418 10.4521C20.2371 10.042 20.5122 9.72135 20.867 9.49023C21.2218 9.25911 21.6368 9.14355 22.1121 9.14355C22.5906 9.14355 23.0008 9.25423 23.3426 9.47559C23.6876 9.69694 23.9513 10.0062 24.1336 10.4033C24.3191 10.7972 24.4119 11.2562 24.4119 11.7803V12.1123H20.1932V11.4336H23.9773L23.5574 12.0537V11.7168C23.5574 11.3034 23.4956 10.9632 23.3719 10.6963C23.2482 10.4294 23.0773 10.2308 22.8592 10.1006C22.6411 9.96712 22.3904 9.90039 22.1072 9.90039C21.824 9.90039 21.5701 9.97038 21.3455 10.1104C21.1242 10.2471 20.9484 10.4505 20.8182 10.7207C20.688 10.9909 20.6229 11.3229 20.6229 11.7168V12.0537C20.6229 12.4281 20.6863 12.7487 20.8133 13.0156C20.9402 13.2793 21.1209 13.4827 21.3553 13.626C21.5896 13.766 21.8663 13.8359 22.1854 13.8359C22.423 13.8359 22.6297 13.8034 22.8055 13.7383C22.9813 13.6732 23.1261 13.5902 23.24 13.4893C23.354 13.3883 23.4337 13.2858 23.4793 13.1816L23.4988 13.1377H24.3484L24.3387 13.1768C24.2931 13.3558 24.2117 13.5299 24.0945 13.6992C23.9806 13.8652 23.8325 14.0166 23.6502 14.1533C23.4679 14.2868 23.2514 14.3942 23.0008 14.4756C22.7534 14.5537 22.4751 14.5928 22.1658 14.5928ZM25.4303 14.5V9.23633H26.2799V10.0176H26.358C26.4589 9.74089 26.6298 9.52604 26.8707 9.37305C27.1116 9.22005 27.4094 9.14355 27.7643 9.14355C27.8456 9.14355 27.9254 9.14844 28.0035 9.1582C28.0849 9.16471 28.1467 9.17122 28.1891 9.17773V10.0029C28.1012 9.98665 28.0149 9.97526 27.9303 9.96875C27.8489 9.95898 27.761 9.9541 27.6666 9.9541C27.3964 9.9541 27.1572 10.0078 26.9488 10.1152C26.7405 10.2227 26.5761 10.3724 26.4557 10.5645C26.3385 10.7565 26.2799 10.9811 26.2799 11.2383V14.5H25.4303ZM30.9408 14.5928C30.4395 14.5928 30.0082 14.4821 29.6469 14.2607C29.2888 14.0394 29.0121 13.7269 28.8168 13.3232C28.6247 12.9163 28.5287 12.4378 28.5287 11.8877V11.8828C28.5287 11.3392 28.6247 10.8623 28.8168 10.4521C29.0121 10.042 29.2872 9.72135 29.642 9.49023C29.9968 9.25911 30.4118 9.14355 30.8871 9.14355C31.3656 9.14355 31.7758 9.25423 32.1176 9.47559C32.4626 9.69694 32.7263 10.0062 32.9086 10.4033C33.0941 10.7972 33.1869 11.2562 33.1869 11.7803V12.1123H28.9682V11.4336H32.7523L32.3324 12.0537V11.7168C32.3324 11.3034 32.2706 10.9632 32.1469 10.6963C32.0232 10.4294 31.8523 10.2308 31.6342 10.1006C31.4161 9.96712 31.1654 9.90039 30.8822 9.90039C30.599 9.90039 30.3451 9.97038 30.1205 10.1104C29.8992 10.2471 29.7234 10.4505 29.5932 10.7207C29.463 10.9909 29.3979 11.3229 29.3979 11.7168V12.0537C29.3979 12.4281 29.4613 12.7487 29.5883 13.0156C29.7152 13.2793 29.8959 13.4827 30.1303 13.626C30.3646 13.766 30.6413 13.8359 30.9604 13.8359C31.198 13.8359 31.4047 13.8034 31.5805 13.7383C31.7563 13.6732 31.9011 13.5902 32.015 13.4893C32.129 13.3883 32.2087 13.2858 32.2543 13.1816L32.2738 13.1377H33.1234L33.1137 13.1768C33.0681 13.3558 32.9867 13.5299 32.8695 13.6992C32.7556 13.8652 32.6075 14.0166 32.4252 14.1533C32.2429 14.2868 32.0264 14.3942 31.7758 14.4756C31.5284 14.5537 31.2501 14.5928 30.9408 14.5928ZM36.1486 14.5928C35.7059 14.5928 35.3186 14.4805 34.9865 14.2559C34.6545 14.0312 34.3973 13.7155 34.215 13.3086C34.0328 12.8984 33.9416 12.4199 33.9416 11.873V11.8633C33.9416 11.3132 34.0328 10.8346 34.215 10.4277C34.3973 10.0208 34.6529 9.70508 34.9816 9.48047C35.3137 9.25586 35.7027 9.14355 36.1486 9.14355C36.3895 9.14355 36.6158 9.18262 36.8273 9.26074C37.0422 9.33561 37.2326 9.44141 37.3986 9.57812C37.5647 9.71484 37.6949 9.8776 37.7893 10.0664H37.8674V7.14648H38.717V14.5H37.8674V13.6602H37.7893C37.6818 13.8555 37.5467 14.0231 37.384 14.1631C37.2212 14.2998 37.0357 14.4056 36.8273 14.4805C36.619 14.5553 36.3928 14.5928 36.1486 14.5928ZM36.3439 13.8408C36.663 13.8408 36.938 13.7611 37.1691 13.6016C37.4003 13.4421 37.5777 13.2158 37.7014 12.9229C37.8251 12.6266 37.8869 12.2767 37.8869 11.873V11.8633C37.8869 11.4564 37.8251 11.1064 37.7014 10.8135C37.5777 10.5205 37.4003 10.2943 37.1691 10.1348C36.938 9.97526 36.663 9.89551 36.3439 9.89551C36.0249 9.89551 35.7499 9.97526 35.5188 10.1348C35.2909 10.291 35.1151 10.5156 34.9914 10.8086C34.871 11.1016 34.8107 11.4531 34.8107 11.8633V11.873C34.8107 12.2799 34.871 12.6315 34.9914 12.9277C35.1151 13.2207 35.2909 13.4469 35.5188 13.6064C35.7499 13.7627 36.0249 13.8408 36.3439 13.8408ZM45.1775 14.5928C44.9334 14.5928 44.7072 14.5553 44.4988 14.4805C44.2905 14.4056 44.1049 14.2998 43.9422 14.1631C43.7794 14.0231 43.6443 13.8555 43.5369 13.6602H43.4588V14.5H42.6092V7.14648H43.4588V10.0664H43.5369C43.6346 9.8776 43.7648 9.71484 43.9275 9.57812C44.0936 9.44141 44.2824 9.33561 44.4939 9.26074C44.7088 9.18262 44.9367 9.14355 45.1775 9.14355C45.6235 9.14355 46.0109 9.25586 46.3396 9.48047C46.6717 9.70508 46.9288 10.0208 47.1111 10.4277C47.2934 10.8346 47.3846 11.3132 47.3846 11.8633V11.873C47.3846 12.4199 47.2934 12.8984 47.1111 13.3086C46.9288 13.7155 46.6717 14.0312 46.3396 14.2559C46.0109 14.4805 45.6235 14.5928 45.1775 14.5928ZM44.9822 13.8408C45.3045 13.8408 45.5796 13.7627 45.8074 13.6064C46.0353 13.4469 46.2094 13.2207 46.3299 12.9277C46.4536 12.6315 46.5154 12.2799 46.5154 11.873V11.8633C46.5154 11.4531 46.4536 11.1016 46.3299 10.8086C46.2094 10.5156 46.0353 10.291 45.8074 10.1348C45.5796 9.97526 45.3045 9.89551 44.9822 9.89551C44.6632 9.89551 44.3881 9.97526 44.157 10.1348C43.9259 10.2943 43.7485 10.5205 43.6248 10.8135C43.5011 11.1064 43.4393 11.4564 43.4393 11.8633V11.873C43.4393 12.2767 43.5011 12.6266 43.6248 12.9229C43.7485 13.2158 43.9259 13.4421 44.157 13.6016C44.3881 13.7611 44.6632 13.8408 44.9822 13.8408ZM48.6568 16.3457C48.6015 16.3457 48.5396 16.3424 48.4713 16.3359C48.4029 16.3327 48.3395 16.3262 48.2809 16.3164V15.6182C48.3329 15.6279 48.3899 15.6344 48.4518 15.6377C48.5136 15.641 48.5738 15.6426 48.6324 15.6426C48.8733 15.6426 49.0702 15.5807 49.2232 15.457C49.3795 15.3333 49.5048 15.1201 49.5992 14.8174L49.6969 14.5049L47.7486 9.23633H48.6568L50.2779 14.0996L49.941 13.5674H50.3414L50.0045 14.0996L51.6207 9.23633H52.5143L50.4586 14.8223C50.3154 15.2161 50.164 15.5238 50.0045 15.7451C49.845 15.9665 49.6578 16.1211 49.443 16.209C49.2314 16.3001 48.9693 16.3457 48.6568 16.3457Z' fill='%230E0D0B'/%3e%3cpath d='M62.7081 13.27C62.742 13.27 62.7642 13.3057 62.7491 13.3362V13.336L61.1229 16.6083C61.0892 16.6761 60.9926 16.6759 60.959 16.6083L59.3382 13.336C59.3232 13.3057 59.3453 13.27 59.3792 13.27H62.7081Z' fill='%23EA4B4B'/%3e%3cpath d='M61.0026 9.71913C61.0194 9.68524 61.0678 9.68524 61.0845 9.71913L62.747 13.0897C62.762 13.12 62.7399 13.1557 62.706 13.1557H59.3763C59.3424 13.1557 59.3203 13.12 59.3353 13.0897L61.0026 9.71913Z' fill='%23EA4B4B'/%3e%3cpath d='M60.8426 9.63827C60.8766 9.63827 60.8987 9.6741 60.8835 9.70444L59.2164 13.0594C59.1995 13.0932 59.1513 13.0932 59.1345 13.0594L57.5001 9.77047C57.47 9.70962 57.5142 9.63827 57.5821 9.63827H60.8426Z' fill='%23EA4B4B'/%3e%3cpath d='M64.5036 9.63617C64.5715 9.63618 64.6157 9.70753 64.5855 9.76838H64.5854L62.9512 13.0573C62.9344 13.0911 62.8862 13.0912 62.8692 13.0573L61.2021 9.70235C61.187 9.672 61.2091 9.63617 61.2431 9.63617H64.5036Z' fill='%23EA4B4B'/%3e%3cpath d='M62.8284 6.18281C62.862 6.11518 62.9586 6.11518 62.9922 6.18281L64.5855 9.38969C64.6157 9.45054 64.5715 9.52189 64.5036 9.52189H61.2431C61.2091 9.52189 61.187 9.48605 61.2021 9.45571L62.8283 6.18265L62.8284 6.18281Z' fill='%23EA4B4B'/%3e%3cpath d='M62.3131 6.13196C62.381 6.13196 62.4252 6.20331 62.3951 6.26416C62.154 6.74935 61.9128 7.23455 61.6718 7.71975H61.6716C61.4225 8.22125 61.1733 8.72259 60.9242 9.22409C60.9074 9.25799 60.859 9.25799 60.8422 9.22409L60.6305 8.79587C60.6275 8.78957 60.6259 8.78263 60.6259 8.77553V6.22349C60.6259 6.17297 60.6668 6.13196 60.7173 6.13196H62.3131Z' fill='%23EA4B4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.8537 10.0096C75.2721 10.0096 75.654 10.1125 75.9993 10.3184C76.3513 10.5177 76.6303 10.8032 76.8361 11.1751C77.0487 11.547 77.1549 11.9953 77.1549 12.52V12.6495C77.1549 13.1675 77.052 13.6158 76.8461 13.9943C76.6402 14.3729 76.3613 14.6618 76.0093 14.861C75.664 15.0603 75.2788 15.1599 74.8537 15.1599C74.515 15.1599 74.2261 15.1134 73.9871 15.0204C73.7546 14.9341 73.5653 14.8212 73.4192 14.6817C73.2731 14.5423 73.1602 14.3995 73.0805 14.2534H72.941V16.9659L72.1541 16.0013V10.1491H72.9211V10.956H73.0352C73.2729 10.6733 73.3893 10.4911 73.6683 10.2985C73.9538 10.1059 74.349 10.0096 74.8537 10.0096ZM74.6445 10.7069C74.1464 10.7069 73.7347 10.8696 73.4092 11.195C73.0905 11.5138 72.9311 11.9621 72.9311 12.5399V12.6296C72.9311 13.2074 73.0905 13.659 73.4092 13.9844C73.7347 14.3032 74.1464 14.4626 74.6445 14.4626C75.1492 14.4626 75.5577 14.3032 75.8698 13.9844C76.1886 13.659 76.348 13.2074 76.348 12.6296V12.5399C76.348 11.9621 76.1886 11.5138 75.8698 11.195C75.5577 10.8696 75.1492 10.7069 74.6445 10.7069Z' fill='%230E0D0B'/%3e%3cpath d='M78.5848 11.9583L78.5555 15.4596L77.7681 14.4846V10.9583L78.5848 11.9583Z' fill='%230E0D0B'/%3e%3cpath d='M101.588 10.2986H102.444L103 10.986H101.588V10.9867H100.802L101.588 11.9623V14.1937C101.588 14.3929 101.685 14.4926 101.877 14.4926H102.379L102.928 15.17H101.668C101.389 15.17 101.173 15.0936 101.021 14.9409C100.874 14.7881 100.801 14.5789 100.801 14.3133V10.986H99.8799L99.3217 10.2986H100.801V9.13501H101.588V10.2986Z' fill='%230E0D0B'/%3e%3cpath d='M69.0133 7.90764C69.4848 7.90764 69.9065 7.99068 70.2784 8.15671C70.6569 8.3161 70.9525 8.55517 71.165 8.87395C71.3842 9.18609 71.4938 9.58126 71.4938 10.0594V10.4778H70.667V10.0594C70.667 9.72072 70.5939 9.44842 70.4477 9.24254C70.3083 9.03666 70.1124 8.88392 69.86 8.7843C69.6143 8.68469 69.332 8.63487 69.0133 8.63487C68.555 8.63487 68.1864 8.7378 67.9075 8.94367C67.6286 9.14291 67.4891 9.4285 67.4891 9.80041C67.4891 10.0461 67.5488 10.2453 67.6684 10.3981C67.7879 10.5508 67.9573 10.677 68.1764 10.7767C68.3956 10.8696 68.658 10.9527 68.9635 11.0257L69.4815 11.1552C69.8866 11.2416 70.2485 11.3611 70.5673 11.5138C70.8927 11.6599 71.1517 11.8625 71.3443 12.1215C71.5369 12.3739 71.6332 12.706 71.6332 13.1177C71.6332 13.5295 71.5303 13.8881 71.3244 14.1936C71.1185 14.4991 70.8263 14.7382 70.4477 14.9109C70.0758 15.0769 69.6375 15.1599 69.1328 15.1599C68.6281 15.1599 68.1765 15.0702 67.778 14.8909C67.3795 14.7116 67.0641 14.4426 66.8316 14.084C66.6058 13.7187 66.4929 13.2638 66.4929 12.7192V12.51H67.3197V12.7192C67.3197 13.297 67.4891 13.7287 67.8278 14.0143C68.1665 14.2932 68.6015 14.4327 69.1328 14.4327C69.6774 14.4327 70.0924 14.3098 70.378 14.0641C70.6636 13.8183 70.8064 13.5095 70.8064 13.1376C70.8064 12.8786 70.74 12.6727 70.6072 12.52C70.481 12.3673 70.3017 12.2444 70.0692 12.1514C69.8368 12.0518 69.5645 11.9655 69.2523 11.8924L68.7343 11.7629C68.3292 11.6566 67.9706 11.5271 67.6584 11.3744C67.3463 11.2216 67.1006 11.0224 66.9213 10.7767C66.7486 10.5243 66.6623 10.2022 66.6623 9.81035C66.6623 9.41852 66.7585 9.07981 66.9511 8.79424C67.1504 8.50866 67.426 8.28953 67.778 8.13678C68.1366 7.98404 68.5484 7.90764 69.0133 7.90764Z' fill='%230E0D0B'/%3e%3cpath d='M81.6544 10.0096C82.1193 10.0096 82.5145 10.0959 82.8399 10.2686C83.1719 10.4412 83.431 10.6704 83.6169 10.956C83.8095 11.2415 83.9324 11.5471 83.9855 11.8725L83.2185 12.0318C83.1853 11.7928 83.1056 11.5736 82.9794 11.3744C82.8598 11.1752 82.6905 11.0158 82.4713 10.8962C82.2521 10.7767 81.9832 10.7169 81.6644 10.7169C81.339 10.7169 81.0468 10.7899 80.7877 10.936C80.5354 11.0821 80.3328 11.2914 80.1801 11.5637C80.034 11.836 79.9609 12.1614 79.9609 12.5399V12.6296C79.9609 13.0081 80.034 13.3335 80.1801 13.6058C80.3328 13.8781 80.5354 14.0873 80.7877 14.2334C81.0468 14.3795 81.339 14.4526 81.6644 14.4526C82.1492 14.4526 82.5178 14.3264 82.7702 14.0741C83.0292 13.8217 83.1886 13.5095 83.2483 13.1376L84.0254 13.307C83.9523 13.6257 83.8195 13.9279 83.6269 14.2135C83.4343 14.4991 83.172 14.7282 82.8399 14.9009C82.5145 15.0735 82.1193 15.1599 81.6544 15.1599C81.1829 15.1599 80.7579 15.0603 80.3793 14.861C80.0074 14.6551 79.7119 14.363 79.4927 13.9844C79.2802 13.6059 79.1739 13.1575 79.1739 12.6395V12.5299C79.1739 12.0053 79.2802 11.557 79.4927 11.1851C79.7119 10.8066 80.0074 10.5177 80.3793 10.3184C80.7579 10.1126 81.1829 10.0096 81.6544 10.0096Z' fill='%230E0D0B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M86.7515 10.0096C87.2097 10.0096 87.6149 10.1092 87.9668 10.3084C88.3188 10.501 88.5944 10.78 88.7937 11.1452C88.9929 11.5105 89.0925 11.9389 89.0925 12.4304V12.7889H85.1177C85.1377 13.3136 85.3071 13.7254 85.6258 14.0243C85.9446 14.3165 86.3431 14.4626 86.8212 14.4626C87.2396 14.4626 87.5617 14.3663 87.7875 14.1737C88.0133 13.9811 88.186 13.752 88.3056 13.4863L88.983 13.815C88.8833 14.0209 88.7439 14.2268 88.5646 14.4327C88.3919 14.6386 88.1628 14.8113 87.8772 14.9507C87.5983 15.0902 87.2396 15.1599 86.8013 15.1599C86.3099 15.1599 85.8782 15.057 85.5063 14.8511C85.1344 14.6386 84.8455 14.343 84.6396 13.9645C84.4337 13.5859 84.3307 13.1476 84.3307 12.6495V12.5299C84.3307 12.0252 84.4337 11.5836 84.6396 11.205C84.8455 10.8265 85.1311 10.5342 85.4963 10.3284C85.8616 10.1159 86.28 10.0096 86.7515 10.0096ZM86.7515 10.7069C86.3066 10.7069 85.9413 10.8331 85.6557 11.0855C85.3701 11.3378 85.1941 11.6898 85.1277 12.1414H88.2956C88.269 11.6898 88.113 11.3378 87.8274 11.0855C87.5485 10.8331 87.1898 10.7069 86.7515 10.7069Z' fill='%230E0D0B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M97.1624 10.0096C97.6207 10.0096 98.0258 10.1092 98.3778 10.3084C98.7298 10.501 99.0054 10.78 99.2046 11.1452C99.4039 11.5105 99.5035 11.9389 99.5035 12.4304V12.7889H95.5287C95.5487 13.3136 95.718 13.7254 96.0368 14.0243C96.3555 14.3165 96.754 14.4626 97.2322 14.4626C97.6505 14.4626 97.9727 14.3663 98.1985 14.1737C98.4243 13.9811 98.5969 13.752 98.7165 13.4863L99.3939 13.815C99.2943 14.0209 99.1548 14.2268 98.9755 14.4327C98.8028 14.6386 98.5737 14.8113 98.2881 14.9507C98.0092 15.0902 97.6506 15.1599 97.2123 15.1599C96.7208 15.1599 96.2892 15.057 95.9172 14.8511C95.5453 14.6386 95.2564 14.343 95.0505 13.9645C94.8446 13.5859 94.7417 13.1476 94.7417 12.6495V12.5299C94.7417 12.0252 94.8446 11.5836 95.0505 11.205C95.2564 10.8265 95.542 10.5342 95.9073 10.3284C96.2725 10.1158 96.6909 10.0096 97.1624 10.0096ZM97.1624 10.7069C96.7175 10.7069 96.3522 10.8331 96.0666 11.0855C95.7811 11.3378 95.6051 11.6898 95.5387 12.1414H98.7066C98.68 11.6898 98.5239 11.3378 98.2383 11.0855C97.9594 10.8331 97.6008 10.7069 97.1624 10.7069Z' fill='%230E0D0B'/%3e%3cpath d='M92.2484 10.0594C92.6137 10.0594 92.9391 10.1358 93.2247 10.2885C93.5169 10.4413 93.7494 10.6671 93.9221 10.966C94.0947 11.2648 94.1811 11.6334 94.1811 12.0717V15.1458H93.394V12.1315C93.394 11.6467 93.2712 11.2947 93.0255 11.0755C92.7864 10.8564 92.461 10.7468 92.0492 10.7468C91.5777 10.7468 91.1925 10.8995 90.8936 11.205C90.6014 11.5105 90.4553 11.9655 90.4553 12.5698V15.1458H89.6683V10.1491H90.4354V10.9582H90.5361C90.7355 10.7018 90.8604 10.5342 91.1128 10.3483C91.3718 10.1557 91.7503 10.0594 92.2484 10.0594Z' fill='%230E0D0B'/%3e%3cpath d='M78.5932 10.9581H77.7681V10.1514H78.6L78.5932 10.9581Z' fill='%230E0D0B'/%3e%3c/svg%3e";
@@ -6249,14 +6359,15 @@ const CrossChainDepositModal = ({
6249
6359
  ]
6250
6360
  }
6251
6361
  );
6252
- const resultsOverlay = isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
6362
+ const statusOverlay = isExecuting || isSuccess && depositResults.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
6253
6363
  DepositStatusPanel,
6254
6364
  {
6255
6365
  isOpen: isSuccess && depositResults.length > 0,
6366
+ isProcessing: isExecuting,
6256
6367
  onClose,
6257
6368
  onComplete,
6258
6369
  onRetryDeposit: handleRetryDeposit,
6259
- results: depositResults.map((result) => ({
6370
+ results: depositResults.length > 0 ? depositResults.map((result) => ({
6260
6371
  asset: {
6261
6372
  symbol: result.asset.symbol,
6262
6373
  address: result.asset.address
@@ -6264,7 +6375,7 @@ const CrossChainDepositModal = ({
6264
6375
  txHash: result.txHash,
6265
6376
  success: result.success,
6266
6377
  error: result.error
6267
- })),
6378
+ })) : void 0,
6268
6379
  chainName: chainConfig?.name || "Network",
6269
6380
  explorerUrl: chainConfig?.blockExplorers?.default?.url,
6270
6381
  theme
@@ -6279,210 +6390,220 @@ const CrossChainDepositModal = ({
6279
6390
  subtitle,
6280
6391
  theme,
6281
6392
  maxWidth: "480px",
6282
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0 24px 24px 24px", position: "relative" }, children: [
6283
- resultsOverlay,
6284
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
6285
- /* @__PURE__ */ jsxRuntime.jsxs(
6286
- "div",
6287
- {
6288
- style: {
6289
- display: "flex",
6290
- alignItems: "center",
6291
- gap: "6px",
6292
- marginBottom: "10px"
6293
- },
6294
- children: [
6295
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: "#6b7280" }, children: /* @__PURE__ */ jsxRuntime.jsx(
6296
- "img",
6297
- {
6298
- src: img$c,
6299
- alt: "Info",
6300
- style: {
6301
- width: "10.5px",
6302
- height: "10.5px",
6303
- top: "1.75px",
6304
- left: "1.75px",
6305
- flexShrink: 0
6306
- }
6307
- }
6308
- ) }),
6309
- /* @__PURE__ */ jsxRuntime.jsx(
6310
- "label",
6393
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
6394
+ "div",
6395
+ {
6396
+ style: {
6397
+ padding: "0 24px 24px 24px",
6398
+ position: "relative",
6399
+ overflow: "hidden"
6400
+ },
6401
+ children: [
6402
+ statusOverlay,
6403
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
6404
+ /* @__PURE__ */ jsxRuntime.jsxs(
6405
+ "div",
6406
+ {
6407
+ style: {
6408
+ display: "flex",
6409
+ alignItems: "center",
6410
+ gap: "6px",
6411
+ marginBottom: "10px"
6412
+ },
6413
+ children: [
6414
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: "#6b7280" }, children: /* @__PURE__ */ jsxRuntime.jsx(
6415
+ "img",
6416
+ {
6417
+ src: img$c,
6418
+ alt: "Info",
6419
+ style: {
6420
+ width: "10.5px",
6421
+ height: "10.5px",
6422
+ top: "1.75px",
6423
+ left: "1.75px",
6424
+ flexShrink: 0
6425
+ }
6426
+ }
6427
+ ) }),
6428
+ /* @__PURE__ */ jsxRuntime.jsx(
6429
+ "label",
6430
+ {
6431
+ style: {
6432
+ fontSize: "12px",
6433
+ fontWeight: 590,
6434
+ color: "#374151"
6435
+ },
6436
+ children: "Select Assets to Deposit"
6437
+ }
6438
+ )
6439
+ ]
6440
+ }
6441
+ ),
6442
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: assets.map((asset) => {
6443
+ const isSelected = selectedAssets.has(asset.address);
6444
+ return /* @__PURE__ */ jsxRuntime.jsx(
6445
+ "button",
6311
6446
  {
6447
+ onClick: () => toggleAssetSelection(asset),
6448
+ onMouseEnter: () => setHoveredAsset(asset.address),
6449
+ onMouseLeave: () => {
6450
+ setHoveredAsset(null);
6451
+ setPressedAsset(null);
6452
+ },
6453
+ onMouseDown: () => setPressedAsset(asset.address),
6454
+ onMouseUp: () => setPressedAsset(null),
6312
6455
  style: {
6313
- fontSize: "12px",
6314
- fontWeight: 590,
6315
- color: "#374151"
6456
+ padding: "4px 8px 4px 8px",
6457
+ borderRadius: "8px",
6458
+ border: `1px solid ${isSelected ? "#EA4B4B7A" : hoveredAsset === asset.address ? "#F4A5A5" : "#e5e7eb"}`,
6459
+ backgroundColor: isSelected ? "#FEF2F2" : pressedAsset === asset.address ? "#f5f5f5" : hoveredAsset === asset.address ? "#fafafa" : "white",
6460
+ cursor: "pointer",
6461
+ display: "flex",
6462
+ alignItems: "center",
6463
+ gap: "8px",
6464
+ transition: "all 150ms ease",
6465
+ transform: pressedAsset === asset.address ? "scale(0.96)" : hoveredAsset === asset.address ? "translateY(-1px)" : "none",
6466
+ boxShadow: isSelected ? "0 0 0 3px #FBDBDB" : pressedAsset === asset.address ? "0 1px 2px rgba(0, 0, 0, 0.05)" : hoveredAsset === asset.address ? "0 4px 8px rgba(0, 0, 0, 0.1)" : "none"
6316
6467
  },
6317
- children: "Select Assets to Deposit"
6318
- }
6319
- )
6320
- ]
6321
- }
6322
- ),
6323
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: assets.map((asset) => {
6324
- const isSelected = selectedAssets.has(asset.address);
6325
- return /* @__PURE__ */ jsxRuntime.jsx(
6326
- "button",
6468
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
6469
+ "div",
6470
+ {
6471
+ style: {
6472
+ display: "flex",
6473
+ alignItems: "center",
6474
+ gap: "4px"
6475
+ },
6476
+ children: [
6477
+ /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { symbol: asset.symbol, size: 24, theme }),
6478
+ /* @__PURE__ */ jsxRuntime.jsx(
6479
+ "span",
6480
+ {
6481
+ style: {
6482
+ fontSize: "16px",
6483
+ fontWeight: 510,
6484
+ color: "#3C3E42"
6485
+ },
6486
+ children: asset.symbol
6487
+ }
6488
+ ),
6489
+ asset.balanceFormatted !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
6490
+ "span",
6491
+ {
6492
+ style: {
6493
+ fontSize: "10px",
6494
+ fontWeight: 500,
6495
+ color: "#939291",
6496
+ fontFamily: '"IBM Plex Mono", monospace'
6497
+ },
6498
+ children: [
6499
+ "(",
6500
+ asset.balanceFormatted.toFixed(4),
6501
+ ")"
6502
+ ]
6503
+ }
6504
+ )
6505
+ ]
6506
+ }
6507
+ )
6508
+ },
6509
+ asset.address
6510
+ );
6511
+ }) })
6512
+ ] }),
6513
+ selectedAssets.size > 0 && /* @__PURE__ */ jsxRuntime.jsx(
6514
+ "div",
6327
6515
  {
6328
- onClick: () => toggleAssetSelection(asset),
6329
- onMouseEnter: () => setHoveredAsset(asset.address),
6516
+ style: { display: "flex", flexDirection: "column", gap: "16px" },
6517
+ children: Array.from(selectedAssets.values()).map(({ asset, amount }) => /* @__PURE__ */ jsxRuntime.jsx(
6518
+ AssetInput,
6519
+ {
6520
+ asset,
6521
+ amount,
6522
+ onAmountChange: (value) => handleAmountChange(asset.address, value),
6523
+ onPercentageClick: (pct) => handlePercentageClick(asset.address, pct),
6524
+ theme,
6525
+ disabled: isExecuting
6526
+ },
6527
+ asset.address
6528
+ ))
6529
+ }
6530
+ ),
6531
+ error && /* @__PURE__ */ jsxRuntime.jsx(
6532
+ "div",
6533
+ {
6534
+ style: {
6535
+ padding: "12px",
6536
+ backgroundColor: "#fef2f2",
6537
+ border: "1px solid #fecaca",
6538
+ borderRadius: "8px",
6539
+ marginTop: "16px"
6540
+ },
6541
+ children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#dc2626", margin: 0 }, children: error })
6542
+ }
6543
+ ),
6544
+ !isSuccess && /* @__PURE__ */ jsxRuntime.jsx(
6545
+ Button.Button,
6546
+ {
6547
+ variant: "outline",
6548
+ fullWidth: true,
6549
+ onClick: executeDeposit,
6550
+ onMouseEnter: () => setIsDepositHovered(true),
6330
6551
  onMouseLeave: () => {
6331
- setHoveredAsset(null);
6332
- setPressedAsset(null);
6552
+ setIsDepositHovered(false);
6553
+ setIsDepositPressed(false);
6333
6554
  },
6334
- onMouseDown: () => setPressedAsset(asset.address),
6335
- onMouseUp: () => setPressedAsset(null),
6555
+ onMouseDown: () => setIsDepositPressed(true),
6556
+ onMouseUp: () => setIsDepositPressed(false),
6557
+ disabled: !canDeposit,
6558
+ theme,
6336
6559
  style: {
6337
- padding: "4px 8px 4px 8px",
6338
- borderRadius: "8px",
6339
- border: `1px solid ${isSelected ? "#EA4B4B7A" : hoveredAsset === asset.address ? "#F4A5A5" : "#e5e7eb"}`,
6340
- backgroundColor: isSelected ? "#FEF2F2" : pressedAsset === asset.address ? "#f5f5f5" : hoveredAsset === asset.address ? "#fafafa" : "white",
6341
- cursor: "pointer",
6560
+ width: "100%",
6561
+ padding: "8px ",
6562
+ backgroundColor: canDeposit ? isDepositPressed ? "#d43d3d" : isDepositHovered ? "#f05555" : "#ea4b4b" : "#d1d5db",
6563
+ color: canDeposit ? "#0e0d0b" : "#6b7280",
6564
+ border: "1px solid #0e0d0b",
6565
+ fontWeight: 500,
6566
+ fontSize: "18px",
6567
+ fontFamily: '"IBM Plex Mono", monospace',
6568
+ lineHeight: "156%",
6569
+ textTransform: "uppercase",
6570
+ cursor: canDeposit ? "pointer" : "not-allowed",
6571
+ marginTop: "20px",
6342
6572
  display: "flex",
6343
6573
  alignItems: "center",
6344
- gap: "8px",
6574
+ justifyContent: "center",
6575
+ gap: "10px",
6345
6576
  transition: "all 150ms ease",
6346
- transform: pressedAsset === asset.address ? "scale(0.96)" : hoveredAsset === asset.address ? "translateY(-1px)" : "none",
6347
- boxShadow: isSelected ? "0 0 0 3px #FBDBDB" : pressedAsset === asset.address ? "0 1px 2px rgba(0, 0, 0, 0.05)" : hoveredAsset === asset.address ? "0 4px 8px rgba(0, 0, 0, 0.1)" : "none"
6577
+ transform: canDeposit ? isDepositPressed ? "scale(0.98)" : isDepositHovered ? "translateY(-2px)" : "none" : "none",
6578
+ boxShadow: isDepositPressed ? "1px 1px 0px black" : isDepositHovered && canDeposit ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
6348
6579
  },
6349
- children: /* @__PURE__ */ jsxRuntime.jsxs(
6350
- "div",
6351
- {
6352
- style: {
6353
- display: "flex",
6354
- alignItems: "center",
6355
- gap: "4px"
6356
- },
6357
- children: [
6358
- /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { symbol: asset.symbol, size: 24, theme }),
6359
- /* @__PURE__ */ jsxRuntime.jsx(
6360
- "span",
6361
- {
6362
- style: {
6363
- fontSize: "16px",
6364
- fontWeight: 510,
6365
- color: "#3C3E42"
6366
- },
6367
- children: asset.symbol
6368
- }
6369
- ),
6370
- asset.balanceFormatted !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
6371
- "span",
6372
- {
6373
- style: {
6374
- fontSize: "10px",
6375
- fontWeight: 500,
6376
- color: "#939291",
6377
- fontFamily: '"IBM Plex Mono", monospace'
6378
- },
6379
- children: [
6380
- "(",
6381
- asset.balanceFormatted.toFixed(4),
6382
- ")"
6383
- ]
6384
- }
6385
- )
6386
- ]
6387
- }
6388
- )
6389
- },
6390
- asset.address
6391
- );
6392
- }) })
6393
- ] }),
6394
- selectedAssets.size > 0 && /* @__PURE__ */ jsxRuntime.jsx(
6395
- "div",
6396
- {
6397
- style: { display: "flex", flexDirection: "column", gap: "16px" },
6398
- children: Array.from(selectedAssets.values()).map(({ asset, amount }) => /* @__PURE__ */ jsxRuntime.jsx(
6399
- AssetInput,
6400
- {
6401
- asset,
6402
- amount,
6403
- onAmountChange: (value) => handleAmountChange(asset.address, value),
6404
- onPercentageClick: (pct) => handlePercentageClick(asset.address, pct),
6405
- theme,
6406
- disabled: isExecuting
6407
- },
6408
- asset.address
6409
- ))
6410
- }
6411
- ),
6412
- error && /* @__PURE__ */ jsxRuntime.jsx(
6413
- "div",
6414
- {
6415
- style: {
6416
- padding: "12px",
6417
- backgroundColor: "#fef2f2",
6418
- border: "1px solid #fecaca",
6419
- borderRadius: "8px",
6420
- marginTop: "16px"
6421
- },
6422
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#dc2626", margin: 0 }, children: error })
6423
- }
6424
- ),
6425
- !isSuccess && /* @__PURE__ */ jsxRuntime.jsx(
6426
- Button.Button,
6427
- {
6428
- variant: "outline",
6429
- fullWidth: true,
6430
- onClick: executeDeposit,
6431
- onMouseEnter: () => setIsDepositHovered(true),
6432
- onMouseLeave: () => {
6433
- setIsDepositHovered(false);
6434
- setIsDepositPressed(false);
6435
- },
6436
- onMouseDown: () => setIsDepositPressed(true),
6437
- onMouseUp: () => setIsDepositPressed(false),
6438
- disabled: !canDeposit,
6439
- theme,
6440
- style: {
6441
- width: "100%",
6442
- padding: "8px ",
6443
- backgroundColor: canDeposit ? isDepositPressed ? "#d43d3d" : isDepositHovered ? "#f05555" : "#ea4b4b" : "#d1d5db",
6444
- color: canDeposit ? "#0e0d0b" : "#6b7280",
6445
- border: "1px solid #0e0d0b",
6446
- fontWeight: 500,
6447
- fontSize: "18px",
6448
- fontFamily: '"IBM Plex Mono", monospace',
6449
- lineHeight: "156%",
6450
- textTransform: "uppercase",
6451
- cursor: canDeposit ? "pointer" : "not-allowed",
6452
- marginTop: "20px",
6453
- display: "flex",
6454
- alignItems: "center",
6455
- justifyContent: "center",
6456
- gap: "10px",
6457
- transition: "all 150ms ease",
6458
- transform: canDeposit ? isDepositPressed ? "scale(0.98)" : isDepositHovered ? "translateY(-2px)" : "none" : "none",
6459
- boxShadow: isDepositPressed ? "1px 1px 0px black" : isDepositHovered && canDeposit ? "5px 5px 0px white, 6px 6px 0px black" : "3px 3px 0px white, 4px 4px 0px black"
6460
- },
6461
- children: isExecuting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6462
- /* @__PURE__ */ jsxRuntime.jsx(
6463
- "div",
6464
- {
6465
- style: {
6466
- width: "18px",
6467
- height: "18px",
6468
- border: "2px solid white",
6469
- borderTopColor: "transparent",
6470
- borderRadius: "50%",
6471
- animation: "spin 1s linear infinite"
6472
- }
6473
- }
6474
- ),
6475
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "PROCESSING..." })
6476
- ] }) : isWalletClientLoading ? "CONNECTING WALLET..." : !walletClient ? "WALLET NOT CONNECTED" : selectedAssets.size === 0 ? "SELECT ASSETS" : !Array.from(selectedAssets.values()).every((s) => s.amount) ? "ENTER AMOUNTS" : "DEPOSIT"
6477
- }
6478
- ),
6479
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
6580
+ children: isExecuting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6581
+ /* @__PURE__ */ jsxRuntime.jsx(
6582
+ "div",
6583
+ {
6584
+ style: {
6585
+ width: "18px",
6586
+ height: "18px",
6587
+ border: "2px solid white",
6588
+ borderTopColor: "transparent",
6589
+ borderRadius: "50%",
6590
+ animation: "spin 1s linear infinite"
6591
+ }
6592
+ }
6593
+ ),
6594
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "PROCESSING..." })
6595
+ ] }) : isWalletClientLoading ? "CONNECTING WALLET..." : !walletClient ? "WALLET NOT CONNECTED" : selectedAssets.size === 0 ? "SELECT ASSETS" : !Array.from(selectedAssets.values()).every((s) => s.amount) ? "ENTER AMOUNTS" : "DEPOSIT"
6596
+ }
6597
+ ),
6598
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
6480
6599
  @keyframes spin {
6481
6600
  from { transform: rotate(0deg); }
6482
6601
  to { transform: rotate(360deg); }
6483
6602
  }
6484
6603
  ` })
6485
- ] })
6604
+ ]
6605
+ }
6606
+ )
6486
6607
  }
6487
6608
  );
6488
6609
  };