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