@spicenet-io/spiceflow-ui 1.9.2 → 1.9.4
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/components/DepositWidget/AssetInput.d.ts +23 -0
- package/dist/components/DepositWidget/CrossChainDepositModal.d.ts +2 -0
- package/dist/components/DepositWidget/DepositWidgetModal.d.ts +1 -1
- package/dist/components/DepositWidget/index.d.ts +2 -0
- package/dist/index.cjs.js +403 -403
- package/dist/index.js +403 -403
- package/dist/types/deposit.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -4131,11 +4131,13 @@ const DepositStatusPanel = ({
|
|
|
4131
4131
|
border: `1px solid ${theme.colors.border}`,
|
|
4132
4132
|
borderRadius: theme.borderRadius.lg,
|
|
4133
4133
|
padding: theme.spacing.lg,
|
|
4134
|
-
color: theme.colors.text
|
|
4134
|
+
color: theme.colors.text,
|
|
4135
|
+
overflow: "visible"
|
|
4135
4136
|
};
|
|
4136
4137
|
const headerStyles = {
|
|
4137
4138
|
textAlign: "center",
|
|
4138
|
-
marginBottom: theme.spacing.lg
|
|
4139
|
+
marginBottom: theme.spacing.lg,
|
|
4140
|
+
overflow: "visible"
|
|
4139
4141
|
};
|
|
4140
4142
|
const iconContainerStyles = {
|
|
4141
4143
|
width: "5rem",
|
|
@@ -4157,7 +4159,10 @@ const DepositStatusPanel = ({
|
|
|
4157
4159
|
};
|
|
4158
4160
|
const descriptionStyles = {
|
|
4159
4161
|
fontSize: theme.typography.fontSize.sm,
|
|
4160
|
-
color: theme.colors.textMuted
|
|
4162
|
+
color: theme.colors.textMuted,
|
|
4163
|
+
wordWrap: "break-word",
|
|
4164
|
+
overflowWrap: "break-word",
|
|
4165
|
+
whiteSpace: "normal"
|
|
4161
4166
|
};
|
|
4162
4167
|
const buttonContainerStyles = {
|
|
4163
4168
|
display: "flex",
|
|
@@ -4311,11 +4316,80 @@ const DepositStatusPanel = ({
|
|
|
4311
4316
|
fullWidth: true,
|
|
4312
4317
|
onClick: onNewDeposit,
|
|
4313
4318
|
theme,
|
|
4319
|
+
style: {
|
|
4320
|
+
width: "100%",
|
|
4321
|
+
padding: "16px",
|
|
4322
|
+
backgroundColor: "#ea4b4b",
|
|
4323
|
+
color: "#0e0d0b",
|
|
4324
|
+
border: "1px solid #0e0d0b",
|
|
4325
|
+
fontWeight: 500,
|
|
4326
|
+
fontSize: "18px",
|
|
4327
|
+
textTransform: "uppercase",
|
|
4328
|
+
cursor: "pointer",
|
|
4329
|
+
marginTop: "20px",
|
|
4330
|
+
display: "flex",
|
|
4331
|
+
alignItems: "center",
|
|
4332
|
+
justifyContent: "center",
|
|
4333
|
+
gap: "8px",
|
|
4334
|
+
transition: "all 150ms ease"
|
|
4335
|
+
},
|
|
4314
4336
|
children: "New Deposit"
|
|
4315
4337
|
}
|
|
4316
4338
|
),
|
|
4317
|
-
intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4318
|
-
|
|
4339
|
+
intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4340
|
+
Button.Button,
|
|
4341
|
+
{
|
|
4342
|
+
variant: "error",
|
|
4343
|
+
fullWidth: true,
|
|
4344
|
+
onClick: onRetry,
|
|
4345
|
+
theme,
|
|
4346
|
+
style: {
|
|
4347
|
+
width: "100%",
|
|
4348
|
+
padding: "16px",
|
|
4349
|
+
backgroundColor: "#ea4b4b",
|
|
4350
|
+
color: "#0e0d0b",
|
|
4351
|
+
border: "1px solid #0e0d0b",
|
|
4352
|
+
fontWeight: 500,
|
|
4353
|
+
fontSize: "18px",
|
|
4354
|
+
textTransform: "uppercase",
|
|
4355
|
+
cursor: "pointer",
|
|
4356
|
+
marginTop: "20px",
|
|
4357
|
+
display: "flex",
|
|
4358
|
+
alignItems: "center",
|
|
4359
|
+
justifyContent: "center",
|
|
4360
|
+
gap: "8px",
|
|
4361
|
+
transition: "all 150ms ease"
|
|
4362
|
+
},
|
|
4363
|
+
children: "Try Again"
|
|
4364
|
+
}
|
|
4365
|
+
),
|
|
4366
|
+
intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4367
|
+
Button.Button,
|
|
4368
|
+
{
|
|
4369
|
+
variant: "ghost",
|
|
4370
|
+
fullWidth: true,
|
|
4371
|
+
onClick: onClose,
|
|
4372
|
+
theme,
|
|
4373
|
+
style: {
|
|
4374
|
+
width: "100%",
|
|
4375
|
+
padding: "16px",
|
|
4376
|
+
backgroundColor: "#ea4b4b",
|
|
4377
|
+
color: "#0e0d0b",
|
|
4378
|
+
border: "1px solid #0e0d0b",
|
|
4379
|
+
fontWeight: 500,
|
|
4380
|
+
fontSize: "18px",
|
|
4381
|
+
textTransform: "uppercase",
|
|
4382
|
+
cursor: "pointer",
|
|
4383
|
+
marginTop: "20px",
|
|
4384
|
+
display: "flex",
|
|
4385
|
+
alignItems: "center",
|
|
4386
|
+
justifyContent: "center",
|
|
4387
|
+
gap: "8px",
|
|
4388
|
+
transition: "all 150ms ease"
|
|
4389
|
+
},
|
|
4390
|
+
children: "Cancel"
|
|
4391
|
+
}
|
|
4392
|
+
)
|
|
4319
4393
|
] })
|
|
4320
4394
|
] });
|
|
4321
4395
|
};
|
|
@@ -4331,7 +4405,8 @@ const DepositWidget = ({
|
|
|
4331
4405
|
className = "",
|
|
4332
4406
|
depositInputHook,
|
|
4333
4407
|
onDepositSuccess,
|
|
4334
|
-
onDepositError
|
|
4408
|
+
onDepositError,
|
|
4409
|
+
onTopUp
|
|
4335
4410
|
}) => {
|
|
4336
4411
|
const baseTheme = Button.createTheme(themeMode);
|
|
4337
4412
|
const theme = {
|
|
@@ -4355,13 +4430,14 @@ const DepositWidget = ({
|
|
|
4355
4430
|
provider,
|
|
4356
4431
|
actions
|
|
4357
4432
|
} = wallet;
|
|
4358
|
-
|
|
4433
|
+
React.useContext(SpiceFlowProviderContext);
|
|
4359
4434
|
const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
|
|
4360
4435
|
const [isPending, startTransition] = React.useTransition();
|
|
4361
4436
|
const {
|
|
4362
4437
|
assets: spiceAssets,
|
|
4363
4438
|
loading: loadingSpiceAssets,
|
|
4364
4439
|
error: spiceAssetsError,
|
|
4440
|
+
hasBalance: hasSpiceBalance,
|
|
4365
4441
|
refetch: refreshSpiceAssets
|
|
4366
4442
|
} = useSpiceAssets({
|
|
4367
4443
|
address,
|
|
@@ -4543,124 +4619,48 @@ const DepositWidget = ({
|
|
|
4543
4619
|
) });
|
|
4544
4620
|
}
|
|
4545
4621
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
|
|
4546
|
-
|
|
4622
|
+
!loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4547
4623
|
"div",
|
|
4548
4624
|
{
|
|
4549
4625
|
style: {
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
|
|
4626
|
+
backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
|
|
4627
|
+
border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
|
|
4628
|
+
borderRadius: theme.borderRadius.md,
|
|
4629
|
+
padding: theme.spacing.md,
|
|
4630
|
+
marginBottom: theme.spacing.md,
|
|
4631
|
+
textAlign: "center"
|
|
4554
4632
|
},
|
|
4555
|
-
children:
|
|
4556
|
-
|
|
4557
|
-
|
|
4558
|
-
{
|
|
4559
|
-
|
|
4560
|
-
|
|
4561
|
-
|
|
4562
|
-
|
|
4563
|
-
|
|
4564
|
-
|
|
4565
|
-
|
|
4566
|
-
|
|
4567
|
-
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
|
|
4573
|
-
|
|
4574
|
-
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
style: {
|
|
4585
|
-
fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
|
|
4586
|
-
padding: `2px ${theme.spacing.xs}`,
|
|
4587
|
-
borderRadius: theme.borderRadius.sm,
|
|
4588
|
-
border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
|
|
4589
|
-
backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
|
|
4590
|
-
color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
|
|
4591
|
-
fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
|
|
4592
|
-
},
|
|
4593
|
-
children: isConnected ? "Connected" : "Disconnected"
|
|
4594
|
-
}
|
|
4595
|
-
)
|
|
4596
|
-
]
|
|
4597
|
-
}
|
|
4598
|
-
),
|
|
4599
|
-
isConnected && address && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4600
|
-
"div",
|
|
4601
|
-
{
|
|
4602
|
-
className: "ibm-plex-mono",
|
|
4603
|
-
style: {
|
|
4604
|
-
marginTop: "6px",
|
|
4605
|
-
backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
|
|
4606
|
-
border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
|
|
4607
|
-
borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
|
|
4608
|
-
padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
4609
|
-
fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
|
|
4610
|
-
fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
|
|
4611
|
-
color: styles?.addressDisplay?.color || theme.colors.text,
|
|
4612
|
-
display: "flex",
|
|
4613
|
-
alignItems: "center",
|
|
4614
|
-
gap: theme.spacing.sm
|
|
4615
|
-
},
|
|
4616
|
-
children: [
|
|
4617
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
|
|
4618
|
-
address.slice(0, 6),
|
|
4619
|
-
"...",
|
|
4620
|
-
address.slice(-4)
|
|
4621
|
-
] }),
|
|
4622
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4623
|
-
"button",
|
|
4624
|
-
{
|
|
4625
|
-
style: {
|
|
4626
|
-
fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
|
|
4627
|
-
padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
4628
|
-
backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
|
|
4629
|
-
border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
|
|
4630
|
-
borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
|
|
4631
|
-
color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
|
|
4632
|
-
fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
|
|
4633
|
-
cursor: "pointer",
|
|
4634
|
-
transition: `background-color ${theme.animation.normal}`
|
|
4635
|
-
},
|
|
4636
|
-
onClick: () => copyToClipboard(address),
|
|
4637
|
-
title: "Copy address",
|
|
4638
|
-
children: "Copy"
|
|
4639
|
-
}
|
|
4640
|
-
)
|
|
4641
|
-
]
|
|
4642
|
-
}
|
|
4643
|
-
),
|
|
4644
|
-
!ready && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4645
|
-
"div",
|
|
4646
|
-
{
|
|
4647
|
-
style: {
|
|
4648
|
-
marginTop: "6px",
|
|
4649
|
-
fontSize: theme.typography.fontSize.xs,
|
|
4650
|
-
color: theme.colors.textSecondary,
|
|
4651
|
-
fontFamily: theme.typography.fontFamily
|
|
4652
|
-
},
|
|
4653
|
-
children: [
|
|
4654
|
-
"Loading",
|
|
4655
|
-
" ",
|
|
4656
|
-
spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
|
|
4657
|
-
"..."
|
|
4658
|
-
]
|
|
4659
|
-
}
|
|
4660
|
-
)
|
|
4661
|
-
]
|
|
4633
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4634
|
+
"p",
|
|
4635
|
+
{
|
|
4636
|
+
style: {
|
|
4637
|
+
color: theme.mode === "light" ? "#92400e" : "#fbbf24",
|
|
4638
|
+
fontSize: theme.typography.fontSize.sm,
|
|
4639
|
+
fontFamily: theme.typography.fontFamily,
|
|
4640
|
+
margin: 0,
|
|
4641
|
+
lineHeight: 1.5
|
|
4642
|
+
},
|
|
4643
|
+
children: [
|
|
4644
|
+
"You do not have any cross-chain balance.",
|
|
4645
|
+
" ",
|
|
4646
|
+
onTopUp && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4647
|
+
"span",
|
|
4648
|
+
{
|
|
4649
|
+
onClick: onTopUp,
|
|
4650
|
+
style: {
|
|
4651
|
+
color: theme.colors.primary,
|
|
4652
|
+
textDecoration: "underline",
|
|
4653
|
+
cursor: "pointer",
|
|
4654
|
+
fontWeight: 600
|
|
4655
|
+
},
|
|
4656
|
+
children: "Top-up here."
|
|
4657
|
+
}
|
|
4658
|
+
)
|
|
4659
|
+
]
|
|
4660
|
+
}
|
|
4661
|
+
)
|
|
4662
4662
|
}
|
|
4663
|
-
)
|
|
4663
|
+
),
|
|
4664
4664
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4665
4665
|
AssetSelector,
|
|
4666
4666
|
{
|
|
@@ -4676,50 +4676,6 @@ const DepositWidget = ({
|
|
|
4676
4676
|
styles
|
|
4677
4677
|
}
|
|
4678
4678
|
) }),
|
|
4679
|
-
depositBatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4680
|
-
"div",
|
|
4681
|
-
{
|
|
4682
|
-
style: {
|
|
4683
|
-
backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
|
|
4684
|
-
border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
|
|
4685
|
-
borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
|
|
4686
|
-
padding: styles?.infoCard?.padding || theme.spacing.sm
|
|
4687
|
-
},
|
|
4688
|
-
children: [
|
|
4689
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4690
|
-
"div",
|
|
4691
|
-
{
|
|
4692
|
-
style: {
|
|
4693
|
-
fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
|
|
4694
|
-
fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
|
|
4695
|
-
color: styles?.infoCard?.title?.color || theme.colors.text,
|
|
4696
|
-
fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
|
|
4697
|
-
marginBottom: "4px"
|
|
4698
|
-
},
|
|
4699
|
-
children: "Deposit Batches Ready"
|
|
4700
|
-
}
|
|
4701
|
-
),
|
|
4702
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4703
|
-
"div",
|
|
4704
|
-
{
|
|
4705
|
-
style: {
|
|
4706
|
-
fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
|
|
4707
|
-
color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
|
|
4708
|
-
fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
|
|
4709
|
-
},
|
|
4710
|
-
children: [
|
|
4711
|
-
depositBatches.length,
|
|
4712
|
-
" deposit batch",
|
|
4713
|
-
depositBatches.length > 1 ? "es" : "",
|
|
4714
|
-
" across chains:",
|
|
4715
|
-
" ",
|
|
4716
|
-
[...new Set(depositBatches.map((b) => b.chainId))].join(", ")
|
|
4717
|
-
]
|
|
4718
|
-
}
|
|
4719
|
-
)
|
|
4720
|
-
]
|
|
4721
|
-
}
|
|
4722
|
-
) }),
|
|
4723
4679
|
displayError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4724
4680
|
"div",
|
|
4725
4681
|
{
|
|
@@ -4756,7 +4712,7 @@ const DepositWidget = ({
|
|
|
4756
4712
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4757
4713
|
Button.Button,
|
|
4758
4714
|
{
|
|
4759
|
-
variant: "
|
|
4715
|
+
variant: "outline",
|
|
4760
4716
|
fullWidth: true,
|
|
4761
4717
|
onClick: handleDeposit,
|
|
4762
4718
|
loading: isExecuting,
|
|
@@ -4987,7 +4943,7 @@ const DepositWidgetModal = ({
|
|
|
4987
4943
|
isOpen,
|
|
4988
4944
|
onClose,
|
|
4989
4945
|
title = "Deposit",
|
|
4990
|
-
|
|
4946
|
+
description = "Deposit funds to execute chain batches across multiple networks.",
|
|
4991
4947
|
maxWidth = "480px",
|
|
4992
4948
|
// Pass through all DepositWidget props
|
|
4993
4949
|
depositBatches,
|
|
@@ -5003,7 +4959,7 @@ const DepositWidgetModal = ({
|
|
|
5003
4959
|
onDepositError
|
|
5004
4960
|
}) => {
|
|
5005
4961
|
const theme = Button.createTheme(themeMode);
|
|
5006
|
-
const
|
|
4962
|
+
const defaultDescription = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5007
4963
|
"div",
|
|
5008
4964
|
{
|
|
5009
4965
|
style: {
|
|
@@ -5035,7 +4991,7 @@ const DepositWidgetModal = ({
|
|
|
5035
4991
|
lineHeight: "1.4",
|
|
5036
4992
|
fontFamily: "system-ui, -apple-system, sans-serif"
|
|
5037
4993
|
},
|
|
5038
|
-
children:
|
|
4994
|
+
children: description
|
|
5039
4995
|
}
|
|
5040
4996
|
)
|
|
5041
4997
|
]
|
|
@@ -5050,7 +5006,7 @@ const DepositWidgetModal = ({
|
|
|
5050
5006
|
isOpen,
|
|
5051
5007
|
onClose,
|
|
5052
5008
|
title,
|
|
5053
|
-
subtitle:
|
|
5009
|
+
subtitle: description || defaultDescription,
|
|
5054
5010
|
styles,
|
|
5055
5011
|
theme,
|
|
5056
5012
|
maxWidth,
|
|
@@ -5084,10 +5040,249 @@ const DepositWidgetModal = ({
|
|
|
5084
5040
|
);
|
|
5085
5041
|
};
|
|
5086
5042
|
|
|
5043
|
+
const AssetInput = ({
|
|
5044
|
+
asset,
|
|
5045
|
+
amount,
|
|
5046
|
+
onAmountChange,
|
|
5047
|
+
onPercentageClick,
|
|
5048
|
+
usdValue,
|
|
5049
|
+
disabled,
|
|
5050
|
+
styles,
|
|
5051
|
+
theme
|
|
5052
|
+
}) => {
|
|
5053
|
+
const balance = asset.balanceFormatted ?? 0;
|
|
5054
|
+
const numericAmount = parseFloat(amount) || 0;
|
|
5055
|
+
const currentPercentage = balance > 0 ? numericAmount / balance * 100 : 0;
|
|
5056
|
+
const handleInputChange = (e) => {
|
|
5057
|
+
const value = e.target.value;
|
|
5058
|
+
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
5059
|
+
onAmountChange(value);
|
|
5060
|
+
}
|
|
5061
|
+
};
|
|
5062
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5063
|
+
"div",
|
|
5064
|
+
{
|
|
5065
|
+
style: {
|
|
5066
|
+
backgroundColor: "#e9e9e9",
|
|
5067
|
+
border: "0.5px solid #a8a8a7",
|
|
5068
|
+
borderRadius: "6px",
|
|
5069
|
+
padding: "16px",
|
|
5070
|
+
height: "144px",
|
|
5071
|
+
display: "flex",
|
|
5072
|
+
flexDirection: "column",
|
|
5073
|
+
gap: "8px",
|
|
5074
|
+
position: "relative"
|
|
5075
|
+
},
|
|
5076
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5077
|
+
"div",
|
|
5078
|
+
{
|
|
5079
|
+
style: {
|
|
5080
|
+
flex: 1,
|
|
5081
|
+
display: "flex",
|
|
5082
|
+
alignItems: "center",
|
|
5083
|
+
justifyContent: "space-between"
|
|
5084
|
+
},
|
|
5085
|
+
children: [
|
|
5086
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5087
|
+
"div",
|
|
5088
|
+
{
|
|
5089
|
+
style: {
|
|
5090
|
+
display: "flex",
|
|
5091
|
+
flexDirection: "column",
|
|
5092
|
+
justifyContent: "space-between",
|
|
5093
|
+
height: "100%"
|
|
5094
|
+
},
|
|
5095
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
5096
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5097
|
+
"span",
|
|
5098
|
+
{
|
|
5099
|
+
style: {
|
|
5100
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5101
|
+
fontSize: "16px",
|
|
5102
|
+
fontWeight: 500,
|
|
5103
|
+
color: "#7d7c7b",
|
|
5104
|
+
lineHeight: "24px"
|
|
5105
|
+
},
|
|
5106
|
+
children: "Amount"
|
|
5107
|
+
}
|
|
5108
|
+
),
|
|
5109
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5110
|
+
"input",
|
|
5111
|
+
{
|
|
5112
|
+
type: "text",
|
|
5113
|
+
value: amount,
|
|
5114
|
+
onChange: handleInputChange,
|
|
5115
|
+
placeholder: "0.00",
|
|
5116
|
+
disabled,
|
|
5117
|
+
style: {
|
|
5118
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5119
|
+
fontSize: "40px",
|
|
5120
|
+
fontWeight: 700,
|
|
5121
|
+
color: disabled ? "rgba(14, 13, 11, 0.16)" : amount ? "#0e0d0b" : "#d1d5db",
|
|
5122
|
+
lineHeight: "1.08",
|
|
5123
|
+
letterSpacing: "-1.2px",
|
|
5124
|
+
backgroundColor: "transparent",
|
|
5125
|
+
border: "none",
|
|
5126
|
+
outline: "none",
|
|
5127
|
+
padding: 0,
|
|
5128
|
+
width: "100%",
|
|
5129
|
+
maxWidth: "200px"
|
|
5130
|
+
}
|
|
5131
|
+
}
|
|
5132
|
+
)
|
|
5133
|
+
] })
|
|
5134
|
+
}
|
|
5135
|
+
),
|
|
5136
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5137
|
+
"div",
|
|
5138
|
+
{
|
|
5139
|
+
style: {
|
|
5140
|
+
display: "flex",
|
|
5141
|
+
flexDirection: "column",
|
|
5142
|
+
alignItems: "flex-end",
|
|
5143
|
+
justifyContent: "space-between",
|
|
5144
|
+
height: "100%",
|
|
5145
|
+
gap: "12px"
|
|
5146
|
+
},
|
|
5147
|
+
children: [
|
|
5148
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5149
|
+
"div",
|
|
5150
|
+
{
|
|
5151
|
+
style: {
|
|
5152
|
+
display: "flex",
|
|
5153
|
+
flexDirection: "column",
|
|
5154
|
+
gap: "8px",
|
|
5155
|
+
alignItems: "flex-end"
|
|
5156
|
+
},
|
|
5157
|
+
children: [
|
|
5158
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5159
|
+
"span",
|
|
5160
|
+
{
|
|
5161
|
+
style: {
|
|
5162
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5163
|
+
fontSize: "12px",
|
|
5164
|
+
fontWeight: 500,
|
|
5165
|
+
color: "#71757a",
|
|
5166
|
+
lineHeight: "16px"
|
|
5167
|
+
},
|
|
5168
|
+
children: [
|
|
5169
|
+
"Balance: ",
|
|
5170
|
+
balance.toFixed(4)
|
|
5171
|
+
]
|
|
5172
|
+
}
|
|
5173
|
+
),
|
|
5174
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "128px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5175
|
+
"div",
|
|
5176
|
+
{
|
|
5177
|
+
style: {
|
|
5178
|
+
border: "1px solid #CDCFD1",
|
|
5179
|
+
borderRadius: "6px 6px 6px 6px",
|
|
5180
|
+
backgroundColor: "#ffffff",
|
|
5181
|
+
padding: "8px 12px 8px 8px",
|
|
5182
|
+
display: "flex",
|
|
5183
|
+
alignItems: "center",
|
|
5184
|
+
gap: "8px"
|
|
5185
|
+
},
|
|
5186
|
+
children: [
|
|
5187
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5188
|
+
TokenIcon,
|
|
5189
|
+
{
|
|
5190
|
+
symbol: asset.symbol,
|
|
5191
|
+
logoURI: asset.logoURI,
|
|
5192
|
+
size: 30,
|
|
5193
|
+
theme
|
|
5194
|
+
}
|
|
5195
|
+
),
|
|
5196
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5197
|
+
"span",
|
|
5198
|
+
{
|
|
5199
|
+
style: {
|
|
5200
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5201
|
+
fontSize: "16px",
|
|
5202
|
+
fontWeight: 500,
|
|
5203
|
+
color: "#3c3e42",
|
|
5204
|
+
lineHeight: "1.5"
|
|
5205
|
+
},
|
|
5206
|
+
children: asset.symbol
|
|
5207
|
+
}
|
|
5208
|
+
)
|
|
5209
|
+
]
|
|
5210
|
+
}
|
|
5211
|
+
) })
|
|
5212
|
+
]
|
|
5213
|
+
}
|
|
5214
|
+
),
|
|
5215
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5216
|
+
"div",
|
|
5217
|
+
{
|
|
5218
|
+
style: {
|
|
5219
|
+
display: "flex",
|
|
5220
|
+
gap: "10px",
|
|
5221
|
+
height: "14px",
|
|
5222
|
+
alignItems: "center",
|
|
5223
|
+
justifyContent: "flex-end"
|
|
5224
|
+
},
|
|
5225
|
+
children: [0, 25, 50, 75, 100].map((pct, index) => {
|
|
5226
|
+
const isActive = Math.abs(currentPercentage - pct) < 1;
|
|
5227
|
+
const isLast = index === 4;
|
|
5228
|
+
const fillPercent = pct / 100;
|
|
5229
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5230
|
+
"button",
|
|
5231
|
+
{
|
|
5232
|
+
onClick: () => onPercentageClick(pct),
|
|
5233
|
+
disabled,
|
|
5234
|
+
title: `${pct}%`,
|
|
5235
|
+
style: {
|
|
5236
|
+
width: "14px",
|
|
5237
|
+
height: "14px",
|
|
5238
|
+
padding: 0,
|
|
5239
|
+
border: "none",
|
|
5240
|
+
backgroundColor: "transparent",
|
|
5241
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
5242
|
+
opacity: isActive ? 1 : 0.5
|
|
5243
|
+
},
|
|
5244
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
|
|
5245
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5246
|
+
"circle",
|
|
5247
|
+
{
|
|
5248
|
+
cx: "7",
|
|
5249
|
+
cy: "7",
|
|
5250
|
+
r: "6.84375",
|
|
5251
|
+
fill: isLast ? "#ea4b4b" : "none",
|
|
5252
|
+
stroke: isLast ? "#ea4b4b" : "#3C3E42",
|
|
5253
|
+
strokeWidth: "0.3125"
|
|
5254
|
+
}
|
|
5255
|
+
),
|
|
5256
|
+
!isLast && fillPercent > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5257
|
+
"path",
|
|
5258
|
+
{
|
|
5259
|
+
d: `M 7 7 L 7 0.15625 A 6.84375 6.84375 0 ${fillPercent > 0.5 ? 1 : 0} 1 ${7 + 6.84375 * Math.sin(fillPercent * 2 * Math.PI)} ${7 - 6.84375 * Math.cos(fillPercent * 2 * Math.PI)} Z`,
|
|
5260
|
+
fill: "#3C3E42"
|
|
5261
|
+
}
|
|
5262
|
+
)
|
|
5263
|
+
] })
|
|
5264
|
+
},
|
|
5265
|
+
pct
|
|
5266
|
+
);
|
|
5267
|
+
})
|
|
5268
|
+
}
|
|
5269
|
+
)
|
|
5270
|
+
]
|
|
5271
|
+
}
|
|
5272
|
+
)
|
|
5273
|
+
]
|
|
5274
|
+
}
|
|
5275
|
+
)
|
|
5276
|
+
}
|
|
5277
|
+
);
|
|
5278
|
+
};
|
|
5279
|
+
|
|
5087
5280
|
const CrossChainDepositModal = ({
|
|
5088
5281
|
isOpen,
|
|
5089
5282
|
onClose,
|
|
5090
5283
|
onComplete,
|
|
5284
|
+
title = "Deposit to Spicenet",
|
|
5285
|
+
description = "Select tokens and enter amounts to deposit to your Spicenet Account",
|
|
5091
5286
|
chainId,
|
|
5092
5287
|
externalWalletAddress,
|
|
5093
5288
|
escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
|
|
@@ -5297,12 +5492,12 @@ const CrossChainDepositModal = ({
|
|
|
5297
5492
|
style: {
|
|
5298
5493
|
display: "flex",
|
|
5299
5494
|
alignItems: "flex-start",
|
|
5300
|
-
gap: "
|
|
5495
|
+
gap: "5px",
|
|
5301
5496
|
backgroundColor: "#f9fafb",
|
|
5302
|
-
border: "1px solid #
|
|
5497
|
+
border: "1px solid #ed6969",
|
|
5303
5498
|
borderRadius: "8px",
|
|
5304
|
-
padding: "
|
|
5305
|
-
margin: "
|
|
5499
|
+
padding: "10px",
|
|
5500
|
+
margin: "0 0 0 0"
|
|
5306
5501
|
},
|
|
5307
5502
|
children: [
|
|
5308
5503
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5318,7 +5513,7 @@ const CrossChainDepositModal = ({
|
|
|
5318
5513
|
}
|
|
5319
5514
|
}
|
|
5320
5515
|
),
|
|
5321
|
-
/* @__PURE__ */ jsxRuntime.
|
|
5516
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5322
5517
|
"p",
|
|
5323
5518
|
{
|
|
5324
5519
|
style: {
|
|
@@ -5327,12 +5522,7 @@ const CrossChainDepositModal = ({
|
|
|
5327
5522
|
margin: 0,
|
|
5328
5523
|
lineHeight: "1.5"
|
|
5329
5524
|
},
|
|
5330
|
-
children:
|
|
5331
|
-
"Select tokens and enter amounts to deposit to your Spicenet Account on",
|
|
5332
|
-
" ",
|
|
5333
|
-
chainConfig?.displayName || `Chain ${chainId}`,
|
|
5334
|
-
"."
|
|
5335
|
-
]
|
|
5525
|
+
children: description
|
|
5336
5526
|
}
|
|
5337
5527
|
)
|
|
5338
5528
|
]
|
|
@@ -5351,8 +5541,10 @@ const CrossChainDepositModal = ({
|
|
|
5351
5541
|
display: "flex",
|
|
5352
5542
|
flexDirection: "column",
|
|
5353
5543
|
alignItems: "center",
|
|
5354
|
-
justifyContent: "
|
|
5355
|
-
gap: "16px"
|
|
5544
|
+
justifyContent: "flex-start",
|
|
5545
|
+
gap: "16px",
|
|
5546
|
+
overflowY: "auto",
|
|
5547
|
+
paddingTop: "40px"
|
|
5356
5548
|
},
|
|
5357
5549
|
children: [
|
|
5358
5550
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5400,7 +5592,8 @@ const CrossChainDepositModal = ({
|
|
|
5400
5592
|
padding: "12px",
|
|
5401
5593
|
borderRadius: "8px",
|
|
5402
5594
|
border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
|
|
5403
|
-
backgroundColor: result.success ? "#f0fdf4" : "#fef2f2"
|
|
5595
|
+
backgroundColor: result.success ? "#f0fdf4" : "#fef2f2",
|
|
5596
|
+
overflow: "visible"
|
|
5404
5597
|
},
|
|
5405
5598
|
children: [
|
|
5406
5599
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -5446,7 +5639,10 @@ const CrossChainDepositModal = ({
|
|
|
5446
5639
|
style: {
|
|
5447
5640
|
fontSize: "12px",
|
|
5448
5641
|
color: "#dc2626",
|
|
5449
|
-
margin: "4px 0 0 0"
|
|
5642
|
+
margin: "4px 0 0 0",
|
|
5643
|
+
wordWrap: "break-word",
|
|
5644
|
+
overflowWrap: "break-word",
|
|
5645
|
+
whiteSpace: "normal"
|
|
5450
5646
|
},
|
|
5451
5647
|
children: result.error
|
|
5452
5648
|
}
|
|
@@ -5479,64 +5675,12 @@ const CrossChainDepositModal = ({
|
|
|
5479
5675
|
]
|
|
5480
5676
|
}
|
|
5481
5677
|
) : null;
|
|
5482
|
-
const PercentageButton = ({ percentage, isSelected, onClick }) => {
|
|
5483
|
-
const getFillLevel = () => {
|
|
5484
|
-
if (percentage === 0) return "empty";
|
|
5485
|
-
if (percentage === 25) return "quarter";
|
|
5486
|
-
if (percentage === 50) return "half";
|
|
5487
|
-
if (percentage === 75) return "three-quarter";
|
|
5488
|
-
return "full";
|
|
5489
|
-
};
|
|
5490
|
-
const fillLevel = getFillLevel();
|
|
5491
|
-
const size = 20;
|
|
5492
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5493
|
-
"button",
|
|
5494
|
-
{
|
|
5495
|
-
onClick,
|
|
5496
|
-
style: {
|
|
5497
|
-
width: size,
|
|
5498
|
-
height: size,
|
|
5499
|
-
borderRadius: "50%",
|
|
5500
|
-
border: `2px solid ${isSelected ? theme.colors.primary : "#d1d5db"}`,
|
|
5501
|
-
backgroundColor: "transparent",
|
|
5502
|
-
cursor: "pointer",
|
|
5503
|
-
padding: 0,
|
|
5504
|
-
position: "relative",
|
|
5505
|
-
overflow: "hidden"
|
|
5506
|
-
},
|
|
5507
|
-
title: `${percentage}%`,
|
|
5508
|
-
children: fillLevel === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5509
|
-
"div",
|
|
5510
|
-
{
|
|
5511
|
-
style: {
|
|
5512
|
-
position: "absolute",
|
|
5513
|
-
inset: 0,
|
|
5514
|
-
backgroundColor: theme.colors.primary,
|
|
5515
|
-
borderRadius: "50%"
|
|
5516
|
-
}
|
|
5517
|
-
}
|
|
5518
|
-
) : fillLevel !== "empty" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5519
|
-
"div",
|
|
5520
|
-
{
|
|
5521
|
-
style: {
|
|
5522
|
-
position: "absolute",
|
|
5523
|
-
bottom: 0,
|
|
5524
|
-
left: 0,
|
|
5525
|
-
right: 0,
|
|
5526
|
-
height: fillLevel === "quarter" ? "25%" : fillLevel === "half" ? "50%" : "75%",
|
|
5527
|
-
backgroundColor: "#9ca3af"
|
|
5528
|
-
}
|
|
5529
|
-
}
|
|
5530
|
-
)
|
|
5531
|
-
}
|
|
5532
|
-
);
|
|
5533
|
-
};
|
|
5534
5678
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5535
5679
|
SpiceModalShell,
|
|
5536
5680
|
{
|
|
5537
5681
|
isOpen,
|
|
5538
5682
|
onClose,
|
|
5539
|
-
title
|
|
5683
|
+
title,
|
|
5540
5684
|
subtitle,
|
|
5541
5685
|
theme,
|
|
5542
5686
|
maxWidth: "480px",
|
|
@@ -5630,164 +5774,18 @@ const CrossChainDepositModal = ({
|
|
|
5630
5774
|
"div",
|
|
5631
5775
|
{
|
|
5632
5776
|
style: { display: "flex", flexDirection: "column", gap: "16px" },
|
|
5633
|
-
children: Array.from(selectedAssets.values()).map(({ asset, amount }) =>
|
|
5634
|
-
|
|
5635
|
-
|
|
5636
|
-
|
|
5637
|
-
|
|
5638
|
-
|
|
5639
|
-
|
|
5640
|
-
|
|
5641
|
-
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
},
|
|
5646
|
-
children: [
|
|
5647
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5648
|
-
"div",
|
|
5649
|
-
{
|
|
5650
|
-
style: {
|
|
5651
|
-
display: "flex",
|
|
5652
|
-
justifyContent: "space-between",
|
|
5653
|
-
alignItems: "center",
|
|
5654
|
-
marginBottom: "12px"
|
|
5655
|
-
},
|
|
5656
|
-
children: [
|
|
5657
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5658
|
-
"span",
|
|
5659
|
-
{
|
|
5660
|
-
style: {
|
|
5661
|
-
fontSize: "14px",
|
|
5662
|
-
fontWeight: 500,
|
|
5663
|
-
color: "#374151"
|
|
5664
|
-
},
|
|
5665
|
-
children: [
|
|
5666
|
-
asset.symbol,
|
|
5667
|
-
" Amount"
|
|
5668
|
-
]
|
|
5669
|
-
}
|
|
5670
|
-
),
|
|
5671
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5672
|
-
"div",
|
|
5673
|
-
{
|
|
5674
|
-
style: {
|
|
5675
|
-
display: "flex",
|
|
5676
|
-
alignItems: "center",
|
|
5677
|
-
gap: "8px"
|
|
5678
|
-
},
|
|
5679
|
-
children: [
|
|
5680
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "13px", color: "#6b7280" }, children: [
|
|
5681
|
-
"Balance: ",
|
|
5682
|
-
(asset.balanceFormatted || 0).toFixed(4)
|
|
5683
|
-
] }),
|
|
5684
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5685
|
-
"div",
|
|
5686
|
-
{
|
|
5687
|
-
style: {
|
|
5688
|
-
display: "flex",
|
|
5689
|
-
alignItems: "center",
|
|
5690
|
-
gap: "6px",
|
|
5691
|
-
padding: "4px 10px",
|
|
5692
|
-
backgroundColor: "white",
|
|
5693
|
-
borderRadius: "20px",
|
|
5694
|
-
border: "1px solid #e5e7eb"
|
|
5695
|
-
},
|
|
5696
|
-
children: [
|
|
5697
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5698
|
-
"div",
|
|
5699
|
-
{
|
|
5700
|
-
style: {
|
|
5701
|
-
width: "20px",
|
|
5702
|
-
height: "20px",
|
|
5703
|
-
borderRadius: "50%",
|
|
5704
|
-
backgroundColor: asset.symbol === "USDC" ? "#2775CA" : asset.symbol === "USDT" ? "#26A17B" : "#F7931A",
|
|
5705
|
-
display: "flex",
|
|
5706
|
-
alignItems: "center",
|
|
5707
|
-
justifyContent: "center",
|
|
5708
|
-
color: "white",
|
|
5709
|
-
fontSize: "9px",
|
|
5710
|
-
fontWeight: 700
|
|
5711
|
-
},
|
|
5712
|
-
children: asset.symbol === "USDC" ? "$" : asset.symbol === "USDT" ? "\u20AE" : "\u20BF"
|
|
5713
|
-
}
|
|
5714
|
-
),
|
|
5715
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5716
|
-
"span",
|
|
5717
|
-
{
|
|
5718
|
-
style: {
|
|
5719
|
-
fontSize: "13px",
|
|
5720
|
-
fontWeight: 500,
|
|
5721
|
-
color: "#111827"
|
|
5722
|
-
},
|
|
5723
|
-
children: asset.symbol
|
|
5724
|
-
}
|
|
5725
|
-
)
|
|
5726
|
-
]
|
|
5727
|
-
}
|
|
5728
|
-
)
|
|
5729
|
-
]
|
|
5730
|
-
}
|
|
5731
|
-
)
|
|
5732
|
-
]
|
|
5733
|
-
}
|
|
5734
|
-
),
|
|
5735
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5736
|
-
"div",
|
|
5737
|
-
{
|
|
5738
|
-
style: {
|
|
5739
|
-
display: "flex",
|
|
5740
|
-
alignItems: "center",
|
|
5741
|
-
gap: "12px"
|
|
5742
|
-
},
|
|
5743
|
-
children: [
|
|
5744
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5745
|
-
"input",
|
|
5746
|
-
{
|
|
5747
|
-
type: "text",
|
|
5748
|
-
value: amount,
|
|
5749
|
-
onChange: (e) => handleAmountChange(asset.address, e.target.value),
|
|
5750
|
-
placeholder: "0.00",
|
|
5751
|
-
style: {
|
|
5752
|
-
flex: 1,
|
|
5753
|
-
fontSize: "32px",
|
|
5754
|
-
fontWeight: 600,
|
|
5755
|
-
color: amount ? "#111827" : "#d1d5db",
|
|
5756
|
-
backgroundColor: "transparent",
|
|
5757
|
-
border: "none",
|
|
5758
|
-
outline: "none",
|
|
5759
|
-
padding: 0,
|
|
5760
|
-
fontFamily: "system-ui, -apple-system, sans-serif"
|
|
5761
|
-
}
|
|
5762
|
-
}
|
|
5763
|
-
),
|
|
5764
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5765
|
-
"div",
|
|
5766
|
-
{
|
|
5767
|
-
style: {
|
|
5768
|
-
display: "flex",
|
|
5769
|
-
gap: "6px",
|
|
5770
|
-
alignItems: "center"
|
|
5771
|
-
},
|
|
5772
|
-
children: [0, 25, 50, 75, 100].map((pct) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5773
|
-
PercentageButton,
|
|
5774
|
-
{
|
|
5775
|
-
percentage: pct,
|
|
5776
|
-
isSelected: Math.abs(percentage - pct) < 1,
|
|
5777
|
-
onClick: () => handlePercentageClick(asset.address, pct)
|
|
5778
|
-
},
|
|
5779
|
-
pct
|
|
5780
|
-
))
|
|
5781
|
-
}
|
|
5782
|
-
)
|
|
5783
|
-
]
|
|
5784
|
-
}
|
|
5785
|
-
)
|
|
5786
|
-
]
|
|
5787
|
-
},
|
|
5788
|
-
asset.address
|
|
5789
|
-
);
|
|
5790
|
-
})
|
|
5777
|
+
children: Array.from(selectedAssets.values()).map(({ asset, amount }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5778
|
+
AssetInput,
|
|
5779
|
+
{
|
|
5780
|
+
asset,
|
|
5781
|
+
amount,
|
|
5782
|
+
onAmountChange: (value) => handleAmountChange(asset.address, value),
|
|
5783
|
+
onPercentageClick: (pct) => handlePercentageClick(asset.address, pct),
|
|
5784
|
+
theme,
|
|
5785
|
+
disabled: isExecuting
|
|
5786
|
+
},
|
|
5787
|
+
asset.address
|
|
5788
|
+
))
|
|
5791
5789
|
}
|
|
5792
5790
|
),
|
|
5793
5791
|
error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5804,20 +5802,22 @@ const CrossChainDepositModal = ({
|
|
|
5804
5802
|
}
|
|
5805
5803
|
),
|
|
5806
5804
|
!isSuccess && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5807
|
-
|
|
5805
|
+
Button.Button,
|
|
5808
5806
|
{
|
|
5807
|
+
variant: "outline",
|
|
5808
|
+
fullWidth: true,
|
|
5809
5809
|
onClick: executeDeposit,
|
|
5810
5810
|
disabled: !canDeposit,
|
|
5811
|
+
theme,
|
|
5811
5812
|
style: {
|
|
5812
5813
|
width: "100%",
|
|
5813
5814
|
padding: "16px",
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
letterSpacing: "0.5px",
|
|
5815
|
+
backgroundColor: "#ea4b4b",
|
|
5816
|
+
color: "#0e0d0b",
|
|
5817
|
+
border: "1px solid #0e0d0b",
|
|
5818
|
+
fontWeight: 500,
|
|
5819
|
+
fontSize: "18px",
|
|
5820
|
+
textTransform: "uppercase",
|
|
5821
5821
|
cursor: canDeposit ? "pointer" : "not-allowed",
|
|
5822
5822
|
marginTop: "20px",
|
|
5823
5823
|
display: "flex",
|