@spicenet-io/spiceflow-ui 1.9.2 → 1.9.3
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/index.d.ts +2 -0
- package/dist/index.cjs.js +353 -231
- package/dist/index.js +353 -231
- 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
|
};
|
|
@@ -5084,6 +5158,243 @@ const DepositWidgetModal = ({
|
|
|
5084
5158
|
);
|
|
5085
5159
|
};
|
|
5086
5160
|
|
|
5161
|
+
const AssetInput = ({
|
|
5162
|
+
asset,
|
|
5163
|
+
amount,
|
|
5164
|
+
onAmountChange,
|
|
5165
|
+
onPercentageClick,
|
|
5166
|
+
usdValue,
|
|
5167
|
+
disabled,
|
|
5168
|
+
styles,
|
|
5169
|
+
theme
|
|
5170
|
+
}) => {
|
|
5171
|
+
const balance = asset.balanceFormatted ?? 0;
|
|
5172
|
+
const numericAmount = parseFloat(amount) || 0;
|
|
5173
|
+
const currentPercentage = balance > 0 ? numericAmount / balance * 100 : 0;
|
|
5174
|
+
const handleInputChange = (e) => {
|
|
5175
|
+
const value = e.target.value;
|
|
5176
|
+
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
5177
|
+
onAmountChange(value);
|
|
5178
|
+
}
|
|
5179
|
+
};
|
|
5180
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5181
|
+
"div",
|
|
5182
|
+
{
|
|
5183
|
+
style: {
|
|
5184
|
+
backgroundColor: "#e9e9e9",
|
|
5185
|
+
border: "0.5px solid #a8a8a7",
|
|
5186
|
+
borderRadius: "6px",
|
|
5187
|
+
padding: "16px",
|
|
5188
|
+
height: "144px",
|
|
5189
|
+
display: "flex",
|
|
5190
|
+
flexDirection: "column",
|
|
5191
|
+
gap: "8px",
|
|
5192
|
+
position: "relative"
|
|
5193
|
+
},
|
|
5194
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5195
|
+
"div",
|
|
5196
|
+
{
|
|
5197
|
+
style: {
|
|
5198
|
+
flex: 1,
|
|
5199
|
+
display: "flex",
|
|
5200
|
+
alignItems: "center",
|
|
5201
|
+
justifyContent: "space-between"
|
|
5202
|
+
},
|
|
5203
|
+
children: [
|
|
5204
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5205
|
+
"div",
|
|
5206
|
+
{
|
|
5207
|
+
style: {
|
|
5208
|
+
display: "flex",
|
|
5209
|
+
flexDirection: "column",
|
|
5210
|
+
justifyContent: "space-between",
|
|
5211
|
+
height: "100%"
|
|
5212
|
+
},
|
|
5213
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
5214
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5215
|
+
"span",
|
|
5216
|
+
{
|
|
5217
|
+
style: {
|
|
5218
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5219
|
+
fontSize: "16px",
|
|
5220
|
+
fontWeight: 500,
|
|
5221
|
+
color: "#7d7c7b",
|
|
5222
|
+
lineHeight: "24px"
|
|
5223
|
+
},
|
|
5224
|
+
children: "Amount"
|
|
5225
|
+
}
|
|
5226
|
+
),
|
|
5227
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5228
|
+
"input",
|
|
5229
|
+
{
|
|
5230
|
+
type: "text",
|
|
5231
|
+
value: amount,
|
|
5232
|
+
onChange: handleInputChange,
|
|
5233
|
+
placeholder: "0.00",
|
|
5234
|
+
disabled,
|
|
5235
|
+
style: {
|
|
5236
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5237
|
+
fontSize: "40px",
|
|
5238
|
+
fontWeight: 700,
|
|
5239
|
+
color: disabled ? "rgba(14, 13, 11, 0.16)" : amount ? "#0e0d0b" : "#d1d5db",
|
|
5240
|
+
lineHeight: "1.08",
|
|
5241
|
+
letterSpacing: "-1.2px",
|
|
5242
|
+
backgroundColor: "transparent",
|
|
5243
|
+
border: "none",
|
|
5244
|
+
outline: "none",
|
|
5245
|
+
padding: 0,
|
|
5246
|
+
width: "100%",
|
|
5247
|
+
maxWidth: "200px"
|
|
5248
|
+
}
|
|
5249
|
+
}
|
|
5250
|
+
)
|
|
5251
|
+
] })
|
|
5252
|
+
}
|
|
5253
|
+
),
|
|
5254
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5255
|
+
"div",
|
|
5256
|
+
{
|
|
5257
|
+
style: {
|
|
5258
|
+
display: "flex",
|
|
5259
|
+
flexDirection: "column",
|
|
5260
|
+
alignItems: "flex-end",
|
|
5261
|
+
justifyContent: "space-between",
|
|
5262
|
+
height: "100%",
|
|
5263
|
+
gap: "12px"
|
|
5264
|
+
},
|
|
5265
|
+
children: [
|
|
5266
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5267
|
+
"div",
|
|
5268
|
+
{
|
|
5269
|
+
style: {
|
|
5270
|
+
display: "flex",
|
|
5271
|
+
flexDirection: "column",
|
|
5272
|
+
gap: "8px",
|
|
5273
|
+
alignItems: "flex-end"
|
|
5274
|
+
},
|
|
5275
|
+
children: [
|
|
5276
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5277
|
+
"span",
|
|
5278
|
+
{
|
|
5279
|
+
style: {
|
|
5280
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5281
|
+
fontSize: "12px",
|
|
5282
|
+
fontWeight: 500,
|
|
5283
|
+
color: "#71757a",
|
|
5284
|
+
lineHeight: "16px"
|
|
5285
|
+
},
|
|
5286
|
+
children: [
|
|
5287
|
+
"Balance: ",
|
|
5288
|
+
balance.toFixed(4)
|
|
5289
|
+
]
|
|
5290
|
+
}
|
|
5291
|
+
),
|
|
5292
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "128px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5293
|
+
"div",
|
|
5294
|
+
{
|
|
5295
|
+
style: {
|
|
5296
|
+
border: "1px solid #CDCFD1",
|
|
5297
|
+
borderRadius: "6px 6px 6px 6px",
|
|
5298
|
+
backgroundColor: "#ffffff",
|
|
5299
|
+
padding: "8px 12px 8px 8px",
|
|
5300
|
+
display: "flex",
|
|
5301
|
+
alignItems: "center",
|
|
5302
|
+
gap: "8px"
|
|
5303
|
+
},
|
|
5304
|
+
children: [
|
|
5305
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5306
|
+
TokenIcon,
|
|
5307
|
+
{
|
|
5308
|
+
symbol: asset.symbol,
|
|
5309
|
+
logoURI: asset.logoURI,
|
|
5310
|
+
size: 30,
|
|
5311
|
+
theme
|
|
5312
|
+
}
|
|
5313
|
+
),
|
|
5314
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5315
|
+
"span",
|
|
5316
|
+
{
|
|
5317
|
+
style: {
|
|
5318
|
+
fontFamily: styles?.fontFamily || theme.typography.fontFamily,
|
|
5319
|
+
fontSize: "16px",
|
|
5320
|
+
fontWeight: 500,
|
|
5321
|
+
color: "#3c3e42",
|
|
5322
|
+
lineHeight: "1.5"
|
|
5323
|
+
},
|
|
5324
|
+
children: asset.symbol
|
|
5325
|
+
}
|
|
5326
|
+
)
|
|
5327
|
+
]
|
|
5328
|
+
}
|
|
5329
|
+
) })
|
|
5330
|
+
]
|
|
5331
|
+
}
|
|
5332
|
+
),
|
|
5333
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5334
|
+
"div",
|
|
5335
|
+
{
|
|
5336
|
+
style: {
|
|
5337
|
+
display: "flex",
|
|
5338
|
+
gap: "10px",
|
|
5339
|
+
height: "14px",
|
|
5340
|
+
alignItems: "center",
|
|
5341
|
+
justifyContent: "flex-end"
|
|
5342
|
+
},
|
|
5343
|
+
children: [0, 25, 50, 75, 100].map((pct, index) => {
|
|
5344
|
+
const isActive = Math.abs(currentPercentage - pct) < 1;
|
|
5345
|
+
const isLast = index === 4;
|
|
5346
|
+
const fillPercent = pct / 100;
|
|
5347
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5348
|
+
"button",
|
|
5349
|
+
{
|
|
5350
|
+
onClick: () => onPercentageClick(pct),
|
|
5351
|
+
disabled,
|
|
5352
|
+
title: `${pct}%`,
|
|
5353
|
+
style: {
|
|
5354
|
+
width: "14px",
|
|
5355
|
+
height: "14px",
|
|
5356
|
+
padding: 0,
|
|
5357
|
+
border: "none",
|
|
5358
|
+
backgroundColor: "transparent",
|
|
5359
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
5360
|
+
opacity: isActive ? 1 : 0.5
|
|
5361
|
+
},
|
|
5362
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: [
|
|
5363
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5364
|
+
"circle",
|
|
5365
|
+
{
|
|
5366
|
+
cx: "7",
|
|
5367
|
+
cy: "7",
|
|
5368
|
+
r: "6.84375",
|
|
5369
|
+
fill: isLast ? "#ea4b4b" : "none",
|
|
5370
|
+
stroke: isLast ? "#ea4b4b" : "#3C3E42",
|
|
5371
|
+
strokeWidth: "0.3125"
|
|
5372
|
+
}
|
|
5373
|
+
),
|
|
5374
|
+
!isLast && fillPercent > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5375
|
+
"path",
|
|
5376
|
+
{
|
|
5377
|
+
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`,
|
|
5378
|
+
fill: "#3C3E42"
|
|
5379
|
+
}
|
|
5380
|
+
)
|
|
5381
|
+
] })
|
|
5382
|
+
},
|
|
5383
|
+
pct
|
|
5384
|
+
);
|
|
5385
|
+
})
|
|
5386
|
+
}
|
|
5387
|
+
)
|
|
5388
|
+
]
|
|
5389
|
+
}
|
|
5390
|
+
)
|
|
5391
|
+
]
|
|
5392
|
+
}
|
|
5393
|
+
)
|
|
5394
|
+
}
|
|
5395
|
+
);
|
|
5396
|
+
};
|
|
5397
|
+
|
|
5087
5398
|
const CrossChainDepositModal = ({
|
|
5088
5399
|
isOpen,
|
|
5089
5400
|
onClose,
|
|
@@ -5297,12 +5608,12 @@ const CrossChainDepositModal = ({
|
|
|
5297
5608
|
style: {
|
|
5298
5609
|
display: "flex",
|
|
5299
5610
|
alignItems: "flex-start",
|
|
5300
|
-
gap: "
|
|
5611
|
+
gap: "5px",
|
|
5301
5612
|
backgroundColor: "#f9fafb",
|
|
5302
|
-
border: "1px solid #
|
|
5613
|
+
border: "1px solid #ed6969",
|
|
5303
5614
|
borderRadius: "8px",
|
|
5304
|
-
padding: "
|
|
5305
|
-
margin: "
|
|
5615
|
+
padding: "10px",
|
|
5616
|
+
margin: "0 0 0 0"
|
|
5306
5617
|
},
|
|
5307
5618
|
children: [
|
|
5308
5619
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5351,8 +5662,10 @@ const CrossChainDepositModal = ({
|
|
|
5351
5662
|
display: "flex",
|
|
5352
5663
|
flexDirection: "column",
|
|
5353
5664
|
alignItems: "center",
|
|
5354
|
-
justifyContent: "
|
|
5355
|
-
gap: "16px"
|
|
5665
|
+
justifyContent: "flex-start",
|
|
5666
|
+
gap: "16px",
|
|
5667
|
+
overflowY: "auto",
|
|
5668
|
+
paddingTop: "40px"
|
|
5356
5669
|
},
|
|
5357
5670
|
children: [
|
|
5358
5671
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5400,7 +5713,8 @@ const CrossChainDepositModal = ({
|
|
|
5400
5713
|
padding: "12px",
|
|
5401
5714
|
borderRadius: "8px",
|
|
5402
5715
|
border: `1px solid ${result.success ? "#bbf7d0" : "#fecaca"}`,
|
|
5403
|
-
backgroundColor: result.success ? "#f0fdf4" : "#fef2f2"
|
|
5716
|
+
backgroundColor: result.success ? "#f0fdf4" : "#fef2f2",
|
|
5717
|
+
overflow: "visible"
|
|
5404
5718
|
},
|
|
5405
5719
|
children: [
|
|
5406
5720
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -5446,7 +5760,10 @@ const CrossChainDepositModal = ({
|
|
|
5446
5760
|
style: {
|
|
5447
5761
|
fontSize: "12px",
|
|
5448
5762
|
color: "#dc2626",
|
|
5449
|
-
margin: "4px 0 0 0"
|
|
5763
|
+
margin: "4px 0 0 0",
|
|
5764
|
+
wordWrap: "break-word",
|
|
5765
|
+
overflowWrap: "break-word",
|
|
5766
|
+
whiteSpace: "normal"
|
|
5450
5767
|
},
|
|
5451
5768
|
children: result.error
|
|
5452
5769
|
}
|
|
@@ -5479,58 +5796,6 @@ const CrossChainDepositModal = ({
|
|
|
5479
5796
|
]
|
|
5480
5797
|
}
|
|
5481
5798
|
) : 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
5799
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5535
5800
|
SpiceModalShell,
|
|
5536
5801
|
{
|
|
@@ -5630,164 +5895,18 @@ const CrossChainDepositModal = ({
|
|
|
5630
5895
|
"div",
|
|
5631
5896
|
{
|
|
5632
5897
|
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
|
-
})
|
|
5898
|
+
children: Array.from(selectedAssets.values()).map(({ asset, amount }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5899
|
+
AssetInput,
|
|
5900
|
+
{
|
|
5901
|
+
asset,
|
|
5902
|
+
amount,
|
|
5903
|
+
onAmountChange: (value) => handleAmountChange(asset.address, value),
|
|
5904
|
+
onPercentageClick: (pct) => handlePercentageClick(asset.address, pct),
|
|
5905
|
+
theme,
|
|
5906
|
+
disabled: isExecuting
|
|
5907
|
+
},
|
|
5908
|
+
asset.address
|
|
5909
|
+
))
|
|
5791
5910
|
}
|
|
5792
5911
|
),
|
|
5793
5912
|
error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5804,20 +5923,23 @@ const CrossChainDepositModal = ({
|
|
|
5804
5923
|
}
|
|
5805
5924
|
),
|
|
5806
5925
|
!isSuccess && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5807
|
-
|
|
5926
|
+
Button.Button,
|
|
5808
5927
|
{
|
|
5928
|
+
variant: "outline",
|
|
5929
|
+
fullWidth: true,
|
|
5809
5930
|
onClick: executeDeposit,
|
|
5931
|
+
loading: isExecuting,
|
|
5810
5932
|
disabled: !canDeposit,
|
|
5933
|
+
theme,
|
|
5811
5934
|
style: {
|
|
5812
5935
|
width: "100%",
|
|
5813
5936
|
padding: "16px",
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
letterSpacing: "0.5px",
|
|
5937
|
+
backgroundColor: "#ea4b4b",
|
|
5938
|
+
color: "#0e0d0b",
|
|
5939
|
+
border: "1px solid #0e0d0b",
|
|
5940
|
+
fontWeight: 500,
|
|
5941
|
+
fontSize: "18px",
|
|
5942
|
+
textTransform: "uppercase",
|
|
5821
5943
|
cursor: canDeposit ? "pointer" : "not-allowed",
|
|
5822
5944
|
marginTop: "20px",
|
|
5823
5945
|
display: "flex",
|