@deframe-sdk/components 0.1.27 → 0.1.29
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.d.mts +249 -2
- package/dist/index.d.ts +249 -2
- package/dist/index.js +1180 -71
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1169 -73
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +124 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8,6 +8,9 @@ var framerMotion = require('framer-motion');
|
|
|
8
8
|
var md = require('react-icons/md');
|
|
9
9
|
var io5 = require('react-icons/io5');
|
|
10
10
|
var pi = require('react-icons/pi');
|
|
11
|
+
var QRCode = require('react-qr-code');
|
|
12
|
+
|
|
13
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
14
|
|
|
12
15
|
function _interopNamespace(e) {
|
|
13
16
|
if (e && e.__esModule) return e;
|
|
@@ -28,6 +31,7 @@ function _interopNamespace(e) {
|
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
|
|
34
|
+
var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
|
|
31
35
|
|
|
32
36
|
var __defProp = Object.defineProperty;
|
|
33
37
|
var __defProps = Object.defineProperties;
|
|
@@ -4360,9 +4364,9 @@ var ChooseAnAssetSwapView = ({
|
|
|
4360
4364
|
/* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
|
|
4361
4365
|
] }) }),
|
|
4362
4366
|
displayedTokens.map((token, index) => {
|
|
4363
|
-
const balance = findBalance(token);
|
|
4364
|
-
const
|
|
4365
|
-
const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI,
|
|
4367
|
+
const balance = findBalance == null ? void 0 : findBalance(token);
|
|
4368
|
+
const priceUSD = Number(balance == null ? void 0 : balance.priceUSD) || token.priceInUSD || 0;
|
|
4369
|
+
const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, priceUSD, token.decimals) : "0";
|
|
4366
4370
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4367
4371
|
ListItem,
|
|
4368
4372
|
{
|
|
@@ -4373,7 +4377,14 @@ var ChooseAnAssetSwapView = ({
|
|
|
4373
4377
|
"data-chain-id": token.chainId,
|
|
4374
4378
|
"data-symbol": token.symbol,
|
|
4375
4379
|
children: [
|
|
4376
|
-
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("
|
|
4380
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-10 h-10 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4381
|
+
"img",
|
|
4382
|
+
{
|
|
4383
|
+
src: token.logoURI || "",
|
|
4384
|
+
alt: token.name,
|
|
4385
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
4386
|
+
}
|
|
4387
|
+
) }) }),
|
|
4377
4388
|
/* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
|
|
4378
4389
|
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.name }),
|
|
4379
4390
|
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: token.symbol })
|
|
@@ -6253,7 +6264,11 @@ var ChooseANetworkView = ({
|
|
|
6253
6264
|
autoFocus = true,
|
|
6254
6265
|
chains,
|
|
6255
6266
|
pageSize = 10,
|
|
6256
|
-
onChainClick
|
|
6267
|
+
onChainClick,
|
|
6268
|
+
actionSheetId,
|
|
6269
|
+
isOpen,
|
|
6270
|
+
currentActionSheetId,
|
|
6271
|
+
onClose
|
|
6257
6272
|
}) => {
|
|
6258
6273
|
const [searchValue, setSearchValue] = React6.useState("");
|
|
6259
6274
|
const [page, setPage] = React6.useState(1);
|
|
@@ -6265,52 +6280,72 @@ var ChooseANetworkView = ({
|
|
|
6265
6280
|
);
|
|
6266
6281
|
const displayedChains = filteredChains.slice(0, page * pageSize);
|
|
6267
6282
|
const hasMore = filteredChains.length > page * pageSize;
|
|
6268
|
-
|
|
6269
|
-
/* @__PURE__ */ jsxRuntime.
|
|
6270
|
-
|
|
6271
|
-
/* @__PURE__ */ jsxRuntime.
|
|
6272
|
-
|
|
6273
|
-
|
|
6283
|
+
const content = /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
|
|
6284
|
+
onClose && /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton_default, { testId: `choose-a-network-close-${actionSheetId != null ? actionSheetId : "default"}`, onClick: onClose }) }),
|
|
6285
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
|
|
6286
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
|
|
6287
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
|
|
6288
|
+
/* @__PURE__ */ jsxRuntime.jsx("br", {}),
|
|
6289
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6290
|
+
SearchInput,
|
|
6291
|
+
{
|
|
6292
|
+
value: searchValue,
|
|
6293
|
+
onChange: setSearchValue,
|
|
6294
|
+
placeholder: labels.searchPlaceholder,
|
|
6295
|
+
autoFocus
|
|
6296
|
+
}
|
|
6297
|
+
)
|
|
6298
|
+
] }),
|
|
6299
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6300
|
+
"div",
|
|
6274
6301
|
{
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6302
|
+
"data-testid": "choose-a-network-list",
|
|
6303
|
+
className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
|
|
6304
|
+
children: [
|
|
6305
|
+
displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6306
|
+
ListItem,
|
|
6307
|
+
{
|
|
6308
|
+
className: "w-full flex-shrink-0",
|
|
6309
|
+
onClick: () => onChainClick(chain.chainId),
|
|
6310
|
+
"data-testid": `choose-network-item-${chain.chainId}`,
|
|
6311
|
+
"data-chain-id": chain.chainId,
|
|
6312
|
+
children: [
|
|
6313
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6314
|
+
"img",
|
|
6315
|
+
{
|
|
6316
|
+
src: chain.imageUrl,
|
|
6317
|
+
alt: chain.name,
|
|
6318
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
6319
|
+
}
|
|
6320
|
+
) }),
|
|
6321
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
|
|
6322
|
+
]
|
|
6323
|
+
},
|
|
6324
|
+
`chain-${chain.chainId}`
|
|
6325
|
+
)),
|
|
6326
|
+
hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
6327
|
+
]
|
|
6279
6328
|
}
|
|
6280
6329
|
)
|
|
6281
|
-
] })
|
|
6282
|
-
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6295
|
-
|
|
6296
|
-
|
|
6297
|
-
|
|
6298
|
-
|
|
6299
|
-
|
|
6300
|
-
alt: chain.name,
|
|
6301
|
-
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
6302
|
-
}
|
|
6303
|
-
) }),
|
|
6304
|
-
/* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: chain.name }) })
|
|
6305
|
-
]
|
|
6306
|
-
},
|
|
6307
|
-
`chain-${chain.chainId}`
|
|
6308
|
-
)),
|
|
6309
|
-
hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
6310
|
-
]
|
|
6311
|
-
}
|
|
6312
|
-
)
|
|
6313
|
-
] }) });
|
|
6330
|
+
] })
|
|
6331
|
+
] });
|
|
6332
|
+
if (!actionSheetId) {
|
|
6333
|
+
return content;
|
|
6334
|
+
}
|
|
6335
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", "data-testid": `choose-a-network-wrapper-${actionSheetId}`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6336
|
+
ActionSheet,
|
|
6337
|
+
{
|
|
6338
|
+
id: actionSheetId,
|
|
6339
|
+
currentActionSheetId: currentActionSheetId != null ? currentActionSheetId : null,
|
|
6340
|
+
isOpen: isOpen != null ? isOpen : false,
|
|
6341
|
+
onClose: onClose != null ? onClose : (() => {
|
|
6342
|
+
}),
|
|
6343
|
+
position: "bottom",
|
|
6344
|
+
height: "full",
|
|
6345
|
+
contentClassName: "w-full max-w-[620px] mx-auto",
|
|
6346
|
+
children: content
|
|
6347
|
+
}
|
|
6348
|
+
) });
|
|
6314
6349
|
};
|
|
6315
6350
|
function useIsMobile(breakpoint = 640) {
|
|
6316
6351
|
const [isMobile, setIsMobile] = React6.useState(
|
|
@@ -7042,14 +7077,24 @@ function ChooseNetworkAndAssetViewSimple({
|
|
|
7042
7077
|
"data-test-id": "sheet-header",
|
|
7043
7078
|
className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-xs)].5 pr-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)].5 pl-[var(--deframe-widget-size-padding-x-md)] flex-shrink-0",
|
|
7044
7079
|
children: [
|
|
7045
|
-
/* @__PURE__ */ jsxRuntime.
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
|
|
7049
|
-
|
|
7050
|
-
|
|
7051
|
-
|
|
7052
|
-
|
|
7080
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
7081
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7082
|
+
"span",
|
|
7083
|
+
{
|
|
7084
|
+
"data-test-id": "sheet-title",
|
|
7085
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
|
|
7086
|
+
children: labels.title
|
|
7087
|
+
}
|
|
7088
|
+
),
|
|
7089
|
+
labels.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
|
|
7090
|
+
"span",
|
|
7091
|
+
{
|
|
7092
|
+
"data-test-id": "sheet-subtitle",
|
|
7093
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] mt-[2px]",
|
|
7094
|
+
children: labels.subtitle
|
|
7095
|
+
}
|
|
7096
|
+
)
|
|
7097
|
+
] }),
|
|
7053
7098
|
/* @__PURE__ */ jsxRuntime.jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
7054
7099
|
]
|
|
7055
7100
|
}
|
|
@@ -7150,14 +7195,24 @@ function ChooseNetworkAndAssetViewSimple({
|
|
|
7150
7195
|
"data-test-id": "modal-header",
|
|
7151
7196
|
className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-md)] pr-[var(--deframe-widget-size-padding-x-md)] pb-[14px] pl-[var(--deframe-widget-size-padding-x-md)] border-b border-[color:var(--deframe-widget-color-border-secondary)] flex-shrink-0",
|
|
7152
7197
|
children: [
|
|
7153
|
-
/* @__PURE__ */ jsxRuntime.
|
|
7154
|
-
|
|
7155
|
-
|
|
7156
|
-
|
|
7157
|
-
|
|
7158
|
-
|
|
7159
|
-
|
|
7160
|
-
|
|
7198
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
7199
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7200
|
+
"span",
|
|
7201
|
+
{
|
|
7202
|
+
"data-test-id": "modal-title",
|
|
7203
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
|
|
7204
|
+
children: labels.title
|
|
7205
|
+
}
|
|
7206
|
+
),
|
|
7207
|
+
labels.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
|
|
7208
|
+
"span",
|
|
7209
|
+
{
|
|
7210
|
+
"data-test-id": "modal-subtitle",
|
|
7211
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] mt-[2px]",
|
|
7212
|
+
children: labels.subtitle
|
|
7213
|
+
}
|
|
7214
|
+
)
|
|
7215
|
+
] }),
|
|
7161
7216
|
/* @__PURE__ */ jsxRuntime.jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
7162
7217
|
]
|
|
7163
7218
|
}
|
|
@@ -8255,6 +8310,7 @@ var EarnInvestmentDetailsView = (props) => {
|
|
|
8255
8310
|
var EarnTokenSelectorView = ({
|
|
8256
8311
|
selectedToken,
|
|
8257
8312
|
onTokenClick,
|
|
8313
|
+
onNetworkAndAssetClick,
|
|
8258
8314
|
onNetworkClick,
|
|
8259
8315
|
isLoading,
|
|
8260
8316
|
selectTokenLabel,
|
|
@@ -8269,7 +8325,7 @@ var EarnTokenSelectorView = ({
|
|
|
8269
8325
|
"button",
|
|
8270
8326
|
{
|
|
8271
8327
|
type: "button",
|
|
8272
|
-
onClick: onTokenClick,
|
|
8328
|
+
onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
|
|
8273
8329
|
className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
|
|
8274
8330
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
8275
8331
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -8287,7 +8343,7 @@ var EarnTokenSelectorView = ({
|
|
|
8287
8343
|
] })
|
|
8288
8344
|
}
|
|
8289
8345
|
) }),
|
|
8290
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8346
|
+
!onNetworkAndAssetClick && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8291
8347
|
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
8292
8348
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
8293
8349
|
"button",
|
|
@@ -8350,6 +8406,7 @@ var EarnPercentageButtonsView = ({
|
|
|
8350
8406
|
var EarnWithdrawTokenSelectorView = ({
|
|
8351
8407
|
selectedToken,
|
|
8352
8408
|
onTokenClick,
|
|
8409
|
+
onNetworkAndAssetClick,
|
|
8353
8410
|
onNetworkClick,
|
|
8354
8411
|
selectTokenLabel,
|
|
8355
8412
|
chainLabel,
|
|
@@ -8363,7 +8420,7 @@ var EarnWithdrawTokenSelectorView = ({
|
|
|
8363
8420
|
"button",
|
|
8364
8421
|
{
|
|
8365
8422
|
type: "button",
|
|
8366
|
-
onClick: onTokenClick,
|
|
8423
|
+
onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
|
|
8367
8424
|
className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
|
|
8368
8425
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
8369
8426
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -8381,7 +8438,7 @@ var EarnWithdrawTokenSelectorView = ({
|
|
|
8381
8438
|
] })
|
|
8382
8439
|
}
|
|
8383
8440
|
) }),
|
|
8384
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8441
|
+
!onNetworkAndAssetClick && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8385
8442
|
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
8386
8443
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
8387
8444
|
"button",
|
|
@@ -8504,6 +8561,7 @@ var EarnDepositFormView = ({
|
|
|
8504
8561
|
// Token selector
|
|
8505
8562
|
selectedToken,
|
|
8506
8563
|
onTokenClick,
|
|
8564
|
+
onNetworkAndAssetClick,
|
|
8507
8565
|
isLoadingToken,
|
|
8508
8566
|
selectTokenLabel,
|
|
8509
8567
|
// Chain selector
|
|
@@ -8561,6 +8619,7 @@ var EarnDepositFormView = ({
|
|
|
8561
8619
|
{
|
|
8562
8620
|
selectedToken,
|
|
8563
8621
|
onTokenClick,
|
|
8622
|
+
onNetworkAndAssetClick,
|
|
8564
8623
|
isLoading: isLoadingToken,
|
|
8565
8624
|
selectTokenLabel,
|
|
8566
8625
|
chainLabel,
|
|
@@ -8635,14 +8694,14 @@ var EarnDepositFormView = ({
|
|
|
8635
8694
|
] });
|
|
8636
8695
|
var EarnTokenSelectorSimpleView = ({
|
|
8637
8696
|
selectedToken,
|
|
8638
|
-
|
|
8697
|
+
onNetworkAndAssetClick,
|
|
8639
8698
|
isLoading,
|
|
8640
8699
|
selectTokenLabel,
|
|
8641
8700
|
chainLabel,
|
|
8642
8701
|
chainImage
|
|
8643
8702
|
}) => {
|
|
8644
8703
|
const hasToken = selectedToken != null;
|
|
8645
|
-
const isInteractive = !!
|
|
8704
|
+
const isInteractive = !!onNetworkAndAssetClick;
|
|
8646
8705
|
const baseClasses = [
|
|
8647
8706
|
"inline-flex items-center gap-[10px]",
|
|
8648
8707
|
"h-[54px] px-[10px]",
|
|
@@ -8666,7 +8725,7 @@ var EarnTokenSelectorSimpleView = ({
|
|
|
8666
8725
|
type: "button",
|
|
8667
8726
|
"data-slot": "token-selector-simple",
|
|
8668
8727
|
"data-test-id": "earn-token-selector-simple-view",
|
|
8669
|
-
onClick:
|
|
8728
|
+
onClick: onNetworkAndAssetClick,
|
|
8670
8729
|
disabled: !isInteractive,
|
|
8671
8730
|
"aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
|
|
8672
8731
|
className: selectorClasses,
|
|
@@ -8992,6 +9051,7 @@ var EarnDepositFormViewSimple = ({
|
|
|
8992
9051
|
// Token selector
|
|
8993
9052
|
selectedToken,
|
|
8994
9053
|
onTokenClick,
|
|
9054
|
+
onNetworkAndAssetClick,
|
|
8995
9055
|
isLoadingToken,
|
|
8996
9056
|
selectTokenLabel,
|
|
8997
9057
|
// Chain selector
|
|
@@ -9134,6 +9194,7 @@ var EarnDepositFormViewSimple = ({
|
|
|
9134
9194
|
{
|
|
9135
9195
|
selectedToken,
|
|
9136
9196
|
onTokenClick,
|
|
9197
|
+
onNetworkAndAssetClick,
|
|
9137
9198
|
isLoading: isLoadingToken,
|
|
9138
9199
|
selectTokenLabel,
|
|
9139
9200
|
chainLabel,
|
|
@@ -9316,6 +9377,7 @@ var EarnWithdrawFormView = ({
|
|
|
9316
9377
|
// Token selector
|
|
9317
9378
|
selectedToken,
|
|
9318
9379
|
onTokenClick,
|
|
9380
|
+
onNetworkAndAssetClick,
|
|
9319
9381
|
selectTokenLabel,
|
|
9320
9382
|
// Chain selector
|
|
9321
9383
|
chainLabel,
|
|
@@ -9376,6 +9438,7 @@ var EarnWithdrawFormView = ({
|
|
|
9376
9438
|
{
|
|
9377
9439
|
selectedToken,
|
|
9378
9440
|
onTokenClick,
|
|
9441
|
+
onNetworkAndAssetClick,
|
|
9379
9442
|
selectTokenLabel,
|
|
9380
9443
|
chainLabel,
|
|
9381
9444
|
chainImage,
|
|
@@ -9453,6 +9516,7 @@ var EarnWithdrawFormViewSimple = ({
|
|
|
9453
9516
|
// Token selector
|
|
9454
9517
|
selectedToken,
|
|
9455
9518
|
onTokenClick,
|
|
9519
|
+
onNetworkAndAssetClick,
|
|
9456
9520
|
selectTokenLabel,
|
|
9457
9521
|
// Chain selector
|
|
9458
9522
|
chainLabel,
|
|
@@ -9588,6 +9652,7 @@ var EarnWithdrawFormViewSimple = ({
|
|
|
9588
9652
|
{
|
|
9589
9653
|
selectedToken,
|
|
9590
9654
|
onTokenClick,
|
|
9655
|
+
onNetworkAndAssetClick,
|
|
9591
9656
|
isLoading: false,
|
|
9592
9657
|
selectTokenLabel,
|
|
9593
9658
|
chainLabel,
|
|
@@ -10829,6 +10894,1040 @@ var EarnWithdrawFailedSimpleView = ({
|
|
|
10829
10894
|
}
|
|
10830
10895
|
) });
|
|
10831
10896
|
};
|
|
10897
|
+
function OnchainDepositFormView({
|
|
10898
|
+
selectedToken,
|
|
10899
|
+
onTokenClick,
|
|
10900
|
+
chainCount,
|
|
10901
|
+
selectedChain,
|
|
10902
|
+
onNetworkClick,
|
|
10903
|
+
isGenerating,
|
|
10904
|
+
showContent,
|
|
10905
|
+
depositAddress,
|
|
10906
|
+
showInfoBanner,
|
|
10907
|
+
selectedTokenName,
|
|
10908
|
+
selectedChainName,
|
|
10909
|
+
isSubmitDisabled,
|
|
10910
|
+
onSubmit,
|
|
10911
|
+
submitLabel,
|
|
10912
|
+
onBack,
|
|
10913
|
+
labels,
|
|
10914
|
+
className
|
|
10915
|
+
}) {
|
|
10916
|
+
const hasAllData = !!(selectedToken && selectedChain);
|
|
10917
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10918
|
+
"div",
|
|
10919
|
+
{
|
|
10920
|
+
className: tailwindMerge.twMerge(
|
|
10921
|
+
"w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[var(--deframe-widget-color-text-primary)] overflow-hidden mx-auto mt-[75px] rounded p-12",
|
|
10922
|
+
className
|
|
10923
|
+
),
|
|
10924
|
+
"data-test-id": "onchain-deposit-form-view",
|
|
10925
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
|
|
10926
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10927
|
+
SecondaryButton,
|
|
10928
|
+
{
|
|
10929
|
+
onClick: onBack,
|
|
10930
|
+
className: "mb-4 !border-0 max-w-[84px]",
|
|
10931
|
+
"aria-label": labels.backLabel,
|
|
10932
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
10933
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
|
|
10934
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
|
|
10935
|
+
] })
|
|
10936
|
+
}
|
|
10937
|
+
),
|
|
10938
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", children: labels.title }),
|
|
10939
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
|
|
10940
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10941
|
+
"div",
|
|
10942
|
+
{
|
|
10943
|
+
className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded lg:!bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
10944
|
+
"data-test-id": "onchain-deposit-token-card",
|
|
10945
|
+
children: [
|
|
10946
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10947
|
+
"button",
|
|
10948
|
+
{
|
|
10949
|
+
onClick: onTokenClick,
|
|
10950
|
+
className: "flex justify-between items-center border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full cursor-pointer",
|
|
10951
|
+
"data-test-id": "onchain-deposit-token-button",
|
|
10952
|
+
"aria-label": labels.tokenPlaceholder,
|
|
10953
|
+
children: [
|
|
10954
|
+
selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
10955
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10956
|
+
"img",
|
|
10957
|
+
{
|
|
10958
|
+
src: selectedToken.logoURI || "",
|
|
10959
|
+
alt: selectedToken.symbol,
|
|
10960
|
+
className: "w-6 h-6 rounded-full object-cover"
|
|
10961
|
+
}
|
|
10962
|
+
),
|
|
10963
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-left", children: [
|
|
10964
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }),
|
|
10965
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedToken.name })
|
|
10966
|
+
] })
|
|
10967
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }),
|
|
10968
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, {})
|
|
10969
|
+
]
|
|
10970
|
+
}
|
|
10971
|
+
) }),
|
|
10972
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mt-6", children: [
|
|
10973
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.chainDirectionLabel }),
|
|
10974
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative ml-4 flex-1", children: chainCount === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10975
|
+
"div",
|
|
10976
|
+
{
|
|
10977
|
+
className: "flex items-center gap-1 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full px-2 py-0.5 text-[length:var(--deframe-widget-font-size-sm)] opacity-50 cursor-not-allowed w-fit",
|
|
10978
|
+
"data-test-id": "onchain-deposit-chain-disabled",
|
|
10979
|
+
children: [
|
|
10980
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextAccent, { variant: "accent-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
|
|
10981
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "flex-shrink-0" })
|
|
10982
|
+
]
|
|
10983
|
+
}
|
|
10984
|
+
) : chainCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10985
|
+
"button",
|
|
10986
|
+
{
|
|
10987
|
+
onClick: onNetworkClick,
|
|
10988
|
+
className: "flex items-center gap-1 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full px-2 py-0.5 text-[length:var(--deframe-widget-font-size-sm)] font-medium cursor-pointer transition w-fit",
|
|
10989
|
+
"data-test-id": "onchain-deposit-chain-dropdown",
|
|
10990
|
+
"aria-label": labels.chainPlaceholder,
|
|
10991
|
+
children: [
|
|
10992
|
+
selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
10993
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10994
|
+
"img",
|
|
10995
|
+
{
|
|
10996
|
+
src: selectedChain.iconUrl,
|
|
10997
|
+
alt: selectedChain.name,
|
|
10998
|
+
className: "w-4 h-4 rounded-full object-cover"
|
|
10999
|
+
}
|
|
11000
|
+
),
|
|
11001
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: selectedChain.name })
|
|
11002
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
|
|
11003
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "flex-shrink-0" })
|
|
11004
|
+
]
|
|
11005
|
+
}
|
|
11006
|
+
) : selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11007
|
+
"div",
|
|
11008
|
+
{
|
|
11009
|
+
className: "ml-4 flex items-center gap-2 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full px-4 py-1 text-[length:var(--deframe-widget-font-size-sm)] font-medium max-w-[150px]",
|
|
11010
|
+
"data-test-id": "onchain-deposit-chain-static",
|
|
11011
|
+
children: [
|
|
11012
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11013
|
+
"img",
|
|
11014
|
+
{
|
|
11015
|
+
src: selectedChain.iconUrl,
|
|
11016
|
+
alt: selectedChain.name,
|
|
11017
|
+
className: "w-5 h-5 rounded-full object-cover"
|
|
11018
|
+
}
|
|
11019
|
+
),
|
|
11020
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedChain.name })
|
|
11021
|
+
]
|
|
11022
|
+
}
|
|
11023
|
+
) : null })
|
|
11024
|
+
] })
|
|
11025
|
+
]
|
|
11026
|
+
}
|
|
11027
|
+
),
|
|
11028
|
+
showInfoBanner && /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.infoBanner, variant: "info" }),
|
|
11029
|
+
hasAllData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11030
|
+
isGenerating && /* @__PURE__ */ jsxRuntime.jsx(
|
|
11031
|
+
"div",
|
|
11032
|
+
{
|
|
11033
|
+
className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded",
|
|
11034
|
+
"data-test-id": "onchain-deposit-skeleton",
|
|
11035
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4 animate-pulse", children: [
|
|
11036
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "60%", height: "1.3rem", variant: "text" }),
|
|
11037
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "70%", height: "1.3rem", variant: "text" }),
|
|
11038
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "2rem", variant: "text" }),
|
|
11039
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "15rem", height: "15rem", variant: "rect", className: "rounded" })
|
|
11040
|
+
] })
|
|
11041
|
+
}
|
|
11042
|
+
),
|
|
11043
|
+
showContent && selectedChain && depositAddress && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11044
|
+
"div",
|
|
11045
|
+
{
|
|
11046
|
+
className: "mt-4 mb-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded lg:!bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
11047
|
+
"data-test-id": "onchain-deposit-address-card",
|
|
11048
|
+
children: [
|
|
11049
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center mb-6", children: [
|
|
11050
|
+
labels.depositInstructionPrefix,
|
|
11051
|
+
" ",
|
|
11052
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedChainName }),
|
|
11053
|
+
".",
|
|
11054
|
+
" ",
|
|
11055
|
+
/* @__PURE__ */ jsxRuntime.jsx("br", {}),
|
|
11056
|
+
labels.depositInstructionSuffix
|
|
11057
|
+
] }),
|
|
11058
|
+
/* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { address: depositAddress, className: "mb-4", onCopy: () => {
|
|
11059
|
+
} }),
|
|
11060
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11061
|
+
QRCode__default.default,
|
|
11062
|
+
{
|
|
11063
|
+
size: 174,
|
|
11064
|
+
value: depositAddress,
|
|
11065
|
+
className: "border-12 border-[var(--deframe-widget-color-bg-tertiary)] rounded"
|
|
11066
|
+
}
|
|
11067
|
+
) })
|
|
11068
|
+
]
|
|
11069
|
+
}
|
|
11070
|
+
)
|
|
11071
|
+
] }),
|
|
11072
|
+
!hasAllData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 p-8 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4 mb-4 min-h-[320px]" }) }),
|
|
11073
|
+
hasAllData && selectedTokenName && selectedChainName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.warnBannerTokenChain, variant: "warning" }) }),
|
|
11074
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11075
|
+
PrimaryButton,
|
|
11076
|
+
{
|
|
11077
|
+
disabled: isSubmitDisabled,
|
|
11078
|
+
onClick: onSubmit,
|
|
11079
|
+
"data-test-id": "onchain-deposit-submit",
|
|
11080
|
+
children: submitLabel
|
|
11081
|
+
}
|
|
11082
|
+
)
|
|
11083
|
+
] })
|
|
11084
|
+
}
|
|
11085
|
+
);
|
|
11086
|
+
}
|
|
11087
|
+
|
|
11088
|
+
// src/utils/truncate-address.ts
|
|
11089
|
+
function truncateAddress(address, startChars = 6, endChars = 4) {
|
|
11090
|
+
if (!address) return "";
|
|
11091
|
+
if (address.length <= startChars + endChars) return address;
|
|
11092
|
+
return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
|
|
11093
|
+
}
|
|
11094
|
+
function DepositSuccessIcon() {
|
|
11095
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11096
|
+
"div",
|
|
11097
|
+
{
|
|
11098
|
+
className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
|
|
11099
|
+
"data-test-id": "deposit-success-icon",
|
|
11100
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11101
|
+
"path",
|
|
11102
|
+
{
|
|
11103
|
+
d: "M10 5V15M10 15L6 11M10 15L14 11",
|
|
11104
|
+
stroke: "#121212",
|
|
11105
|
+
strokeWidth: "2",
|
|
11106
|
+
strokeLinecap: "round",
|
|
11107
|
+
strokeLinejoin: "round"
|
|
11108
|
+
}
|
|
11109
|
+
) })
|
|
11110
|
+
}
|
|
11111
|
+
);
|
|
11112
|
+
}
|
|
11113
|
+
function OnchainDepositSuccessView({
|
|
11114
|
+
tokenSymbol,
|
|
11115
|
+
chainName,
|
|
11116
|
+
formattedAmount,
|
|
11117
|
+
depositAddress,
|
|
11118
|
+
txHash,
|
|
11119
|
+
blockExplorerUrl,
|
|
11120
|
+
onViewHistory,
|
|
11121
|
+
onClose,
|
|
11122
|
+
labels,
|
|
11123
|
+
className,
|
|
11124
|
+
icon
|
|
11125
|
+
}) {
|
|
11126
|
+
const [showDetails, setShowDetails] = React6.useState(true);
|
|
11127
|
+
const [copied, setCopied] = React6.useState(false);
|
|
11128
|
+
const handleCopyAddress = async () => {
|
|
11129
|
+
try {
|
|
11130
|
+
await navigator.clipboard.writeText(depositAddress);
|
|
11131
|
+
setCopied(true);
|
|
11132
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
11133
|
+
} catch (e) {
|
|
11134
|
+
}
|
|
11135
|
+
};
|
|
11136
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11137
|
+
"div",
|
|
11138
|
+
{
|
|
11139
|
+
className: tailwindMerge.twMerge(
|
|
11140
|
+
"w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded",
|
|
11141
|
+
className
|
|
11142
|
+
),
|
|
11143
|
+
"data-test-id": "onchain-deposit-success-view",
|
|
11144
|
+
children: [
|
|
11145
|
+
onClose && /* @__PURE__ */ jsxRuntime.jsx(
|
|
11146
|
+
"button",
|
|
11147
|
+
{
|
|
11148
|
+
onClick: onClose,
|
|
11149
|
+
className: "absolute top-4 right-4 flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
|
|
11150
|
+
"aria-label": labels.closeAriaLabel,
|
|
11151
|
+
"data-test-id": "onchain-deposit-success-close",
|
|
11152
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
|
|
11153
|
+
}
|
|
11154
|
+
),
|
|
11155
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:!p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11156
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11157
|
+
icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(DepositSuccessIcon, {}),
|
|
11158
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11159
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center mt-[-8px]", children: labels.subtitle })
|
|
11160
|
+
] }),
|
|
11161
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11162
|
+
"div",
|
|
11163
|
+
{
|
|
11164
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11165
|
+
"data-test-id": "onchain-deposit-success-info",
|
|
11166
|
+
children: [
|
|
11167
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11168
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.assetLabel }),
|
|
11169
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: tokenSymbol })
|
|
11170
|
+
] }),
|
|
11171
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11172
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.networkLabel }),
|
|
11173
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: chainName })
|
|
11174
|
+
] }),
|
|
11175
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11176
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.amountLabel }),
|
|
11177
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11178
|
+
formattedAmount,
|
|
11179
|
+
" ",
|
|
11180
|
+
tokenSymbol
|
|
11181
|
+
] })
|
|
11182
|
+
] }),
|
|
11183
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11184
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.addressLabel }),
|
|
11185
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
11186
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: truncateAddress(depositAddress) }),
|
|
11187
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11188
|
+
"button",
|
|
11189
|
+
{
|
|
11190
|
+
onClick: handleCopyAddress,
|
|
11191
|
+
className: "text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
|
|
11192
|
+
"aria-label": labels.addressLabel,
|
|
11193
|
+
"data-test-id": "onchain-deposit-success-copy",
|
|
11194
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdContentCopy, { className: "w-4 h-4" })
|
|
11195
|
+
}
|
|
11196
|
+
),
|
|
11197
|
+
copied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-[color:var(--deframe-widget-color-state-success)]", children: labels.copiedLabel })
|
|
11198
|
+
] })
|
|
11199
|
+
] }),
|
|
11200
|
+
txHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11201
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txIdLabel }),
|
|
11202
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11203
|
+
"a",
|
|
11204
|
+
{
|
|
11205
|
+
href: `${blockExplorerUrl}/tx/${txHash}`,
|
|
11206
|
+
target: "_blank",
|
|
11207
|
+
rel: "noopener noreferrer",
|
|
11208
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
|
|
11209
|
+
"data-test-id": "onchain-deposit-success-explorer",
|
|
11210
|
+
children: labels.viewExplorerLabel
|
|
11211
|
+
}
|
|
11212
|
+
)
|
|
11213
|
+
] })
|
|
11214
|
+
]
|
|
11215
|
+
}
|
|
11216
|
+
),
|
|
11217
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11218
|
+
"div",
|
|
11219
|
+
{
|
|
11220
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11221
|
+
"data-test-id": "onchain-deposit-success-details",
|
|
11222
|
+
children: [
|
|
11223
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11224
|
+
"button",
|
|
11225
|
+
{
|
|
11226
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11227
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11228
|
+
"aria-label": labels.detailsTitle,
|
|
11229
|
+
"data-test-id": "onchain-deposit-success-details-toggle",
|
|
11230
|
+
children: [
|
|
11231
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11232
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11233
|
+
md.MdOutlineExpandMore,
|
|
11234
|
+
{
|
|
11235
|
+
className: tailwindMerge.twMerge(
|
|
11236
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11237
|
+
showDetails && "rotate-180"
|
|
11238
|
+
)
|
|
11239
|
+
}
|
|
11240
|
+
)
|
|
11241
|
+
]
|
|
11242
|
+
}
|
|
11243
|
+
),
|
|
11244
|
+
showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
|
|
11245
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
|
|
11246
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] font-medium", children: labels.estimatedTimeLabel }),
|
|
11247
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
|
|
11248
|
+
] }),
|
|
11249
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
|
|
11250
|
+
var _a, _b;
|
|
11251
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
|
|
11252
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
|
|
11253
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) }),
|
|
11254
|
+
index < labels.steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
|
|
11255
|
+
] }),
|
|
11256
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
|
|
11257
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
|
|
11258
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11259
|
+
"span",
|
|
11260
|
+
{
|
|
11261
|
+
className: tailwindMerge.twMerge(
|
|
11262
|
+
"text-[12px] font-semibold",
|
|
11263
|
+
step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
|
|
11264
|
+
),
|
|
11265
|
+
children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
|
|
11266
|
+
}
|
|
11267
|
+
)
|
|
11268
|
+
] })
|
|
11269
|
+
] }, step.label);
|
|
11270
|
+
}) })
|
|
11271
|
+
] })
|
|
11272
|
+
]
|
|
11273
|
+
}
|
|
11274
|
+
),
|
|
11275
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-deposit-success-action", children: labels.viewHistoryLabel }) })
|
|
11276
|
+
] }) })
|
|
11277
|
+
]
|
|
11278
|
+
}
|
|
11279
|
+
);
|
|
11280
|
+
}
|
|
11281
|
+
function OnchainWithdrawFormView({
|
|
11282
|
+
selectedToken,
|
|
11283
|
+
onTokenClick,
|
|
11284
|
+
isProcessing,
|
|
11285
|
+
chainCount,
|
|
11286
|
+
selectedChain,
|
|
11287
|
+
onNetworkClick,
|
|
11288
|
+
formattedBalance,
|
|
11289
|
+
amount,
|
|
11290
|
+
onAmountChange,
|
|
11291
|
+
isAmountInputDisabled,
|
|
11292
|
+
onMaxClick,
|
|
11293
|
+
showMaxButton,
|
|
11294
|
+
formattedAmountUsd,
|
|
11295
|
+
destinationNetwork,
|
|
11296
|
+
destinationAddress,
|
|
11297
|
+
onDestinationAddressChange,
|
|
11298
|
+
txDetails,
|
|
11299
|
+
isBelowMinAmount,
|
|
11300
|
+
walletError,
|
|
11301
|
+
transferError,
|
|
11302
|
+
showWarning,
|
|
11303
|
+
warningLabel,
|
|
11304
|
+
isSubmitDisabled,
|
|
11305
|
+
onSubmit,
|
|
11306
|
+
submitLabel,
|
|
11307
|
+
onBack,
|
|
11308
|
+
labels,
|
|
11309
|
+
className
|
|
11310
|
+
}) {
|
|
11311
|
+
const [showTxDetails, setShowTxDetails] = React6.useState(false);
|
|
11312
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11313
|
+
"div",
|
|
11314
|
+
{
|
|
11315
|
+
className: tailwindMerge.twMerge(
|
|
11316
|
+
"w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded p-6 lg:p-12",
|
|
11317
|
+
className
|
|
11318
|
+
),
|
|
11319
|
+
"data-test-id": "onchain-withdraw-form-view",
|
|
11320
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
|
|
11321
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11322
|
+
SecondaryButton,
|
|
11323
|
+
{
|
|
11324
|
+
onClick: onBack,
|
|
11325
|
+
className: "mb-4 !border-0 max-w-[84px]",
|
|
11326
|
+
"aria-label": labels.backLabel,
|
|
11327
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
11328
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
|
|
11329
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
|
|
11330
|
+
] })
|
|
11331
|
+
}
|
|
11332
|
+
),
|
|
11333
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", children: labels.title }),
|
|
11334
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
|
|
11335
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11336
|
+
"div",
|
|
11337
|
+
{
|
|
11338
|
+
className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11339
|
+
"data-test-id": "onchain-withdraw-token-card",
|
|
11340
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
|
|
11341
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
|
|
11342
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11343
|
+
"button",
|
|
11344
|
+
{
|
|
11345
|
+
onClick: onTokenClick,
|
|
11346
|
+
disabled: isProcessing,
|
|
11347
|
+
className: "h-[56px] border border-[var(--deframe-widget-color-border-secondary)] rounded overflow-hidden transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
|
|
11348
|
+
"data-test-id": "onchain-withdraw-token-button",
|
|
11349
|
+
"aria-label": labels.tokenPlaceholder,
|
|
11350
|
+
children: [
|
|
11351
|
+
selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
|
|
11352
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11353
|
+
"img",
|
|
11354
|
+
{
|
|
11355
|
+
src: selectedToken.logoURI || "",
|
|
11356
|
+
alt: selectedToken.symbol,
|
|
11357
|
+
className: "w-6 h-6 rounded-full object-cover"
|
|
11358
|
+
}
|
|
11359
|
+
),
|
|
11360
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
|
|
11361
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }) }),
|
|
11362
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11363
|
+
]
|
|
11364
|
+
}
|
|
11365
|
+
),
|
|
11366
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
|
|
11367
|
+
labels.balancePrefix,
|
|
11368
|
+
": ",
|
|
11369
|
+
formattedBalance
|
|
11370
|
+
] }),
|
|
11371
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
11372
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
|
|
11373
|
+
chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11374
|
+
"button",
|
|
11375
|
+
{
|
|
11376
|
+
disabled: true,
|
|
11377
|
+
className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-50 cursor-not-allowed",
|
|
11378
|
+
"data-test-id": "onchain-withdraw-chain-disabled",
|
|
11379
|
+
children: [
|
|
11380
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
|
|
11381
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11382
|
+
]
|
|
11383
|
+
}
|
|
11384
|
+
) : chainCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11385
|
+
"button",
|
|
11386
|
+
{
|
|
11387
|
+
onClick: onNetworkClick,
|
|
11388
|
+
className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-full flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors cursor-pointer",
|
|
11389
|
+
"data-test-id": "onchain-withdraw-chain-dropdown",
|
|
11390
|
+
"aria-label": labels.chainPlaceholder,
|
|
11391
|
+
children: [
|
|
11392
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11393
|
+
"img",
|
|
11394
|
+
{
|
|
11395
|
+
src: selectedChain.iconUrl,
|
|
11396
|
+
alt: selectedChain.name,
|
|
11397
|
+
className: "w-3 h-3 rounded-full object-cover"
|
|
11398
|
+
}
|
|
11399
|
+
),
|
|
11400
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
|
|
11401
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11402
|
+
]
|
|
11403
|
+
}
|
|
11404
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11405
|
+
"div",
|
|
11406
|
+
{
|
|
11407
|
+
className: "ml-6 bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-tertiary)] rounded-lg flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
|
|
11408
|
+
"data-test-id": "onchain-withdraw-chain-static",
|
|
11409
|
+
children: [
|
|
11410
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11411
|
+
"img",
|
|
11412
|
+
{
|
|
11413
|
+
src: selectedChain.iconUrl,
|
|
11414
|
+
alt: selectedChain.name,
|
|
11415
|
+
className: "w-3 h-3 rounded-full object-cover"
|
|
11416
|
+
}
|
|
11417
|
+
),
|
|
11418
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
|
|
11419
|
+
]
|
|
11420
|
+
}
|
|
11421
|
+
)
|
|
11422
|
+
] })
|
|
11423
|
+
] }),
|
|
11424
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
|
|
11425
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11426
|
+
Input2,
|
|
11427
|
+
{
|
|
11428
|
+
id: "withdraw-amount-input",
|
|
11429
|
+
placeholder: "0.00",
|
|
11430
|
+
inputMode: "decimal",
|
|
11431
|
+
autoComplete: "off",
|
|
11432
|
+
"aria-label": "Amount to withdraw",
|
|
11433
|
+
min: "0",
|
|
11434
|
+
step: "any",
|
|
11435
|
+
type: "number",
|
|
11436
|
+
value: amount,
|
|
11437
|
+
onChange: (e) => onAmountChange(e.target.value),
|
|
11438
|
+
onWheel: (event) => {
|
|
11439
|
+
event.currentTarget.blur();
|
|
11440
|
+
},
|
|
11441
|
+
disabled: isAmountInputDisabled,
|
|
11442
|
+
className: "text-h2-mobile font-extrabold bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-placeholder-primary)] text-[color:var(--deframe-widget-color-text-primary)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
|
|
11443
|
+
"data-test-id": "onchain-withdraw-amount-input"
|
|
11444
|
+
}
|
|
11445
|
+
),
|
|
11446
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
|
|
11447
|
+
showMaxButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
11448
|
+
"button",
|
|
11449
|
+
{
|
|
11450
|
+
onClick: onMaxClick,
|
|
11451
|
+
className: "absolute top-0 right-0 text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer -translate-y-6",
|
|
11452
|
+
"data-test-id": "onchain-withdraw-max-button",
|
|
11453
|
+
"aria-label": "Max",
|
|
11454
|
+
children: "Max"
|
|
11455
|
+
}
|
|
11456
|
+
)
|
|
11457
|
+
] })
|
|
11458
|
+
] })
|
|
11459
|
+
}
|
|
11460
|
+
),
|
|
11461
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
|
|
11462
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
|
|
11463
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11464
|
+
"div",
|
|
11465
|
+
{
|
|
11466
|
+
className: tailwindMerge.twMerge(
|
|
11467
|
+
"flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
|
|
11468
|
+
!destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
|
|
11469
|
+
),
|
|
11470
|
+
children: destinationNetwork ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11471
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11472
|
+
"img",
|
|
11473
|
+
{
|
|
11474
|
+
src: destinationNetwork.iconUrl,
|
|
11475
|
+
alt: destinationNetwork.name,
|
|
11476
|
+
className: "w-5 h-5 rounded-full object-cover"
|
|
11477
|
+
}
|
|
11478
|
+
),
|
|
11479
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: destinationNetwork.name }),
|
|
11480
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkSameHint })
|
|
11481
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
|
|
11482
|
+
}
|
|
11483
|
+
)
|
|
11484
|
+
] }),
|
|
11485
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11486
|
+
Input2,
|
|
11487
|
+
{
|
|
11488
|
+
type: "text",
|
|
11489
|
+
label: labels.destinationAddressLabel,
|
|
11490
|
+
placeholder: labels.destinationAddressPlaceholder,
|
|
11491
|
+
value: destinationAddress,
|
|
11492
|
+
onChange: (e) => onDestinationAddressChange(e.target.value),
|
|
11493
|
+
disabled: isProcessing,
|
|
11494
|
+
className: "w-full px-4 py-3 bg-[var(--deframe-widget-color-bg-secondary)] border border-[var(--deframe-widget-color-border-secondary)] rounded outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
11495
|
+
}
|
|
11496
|
+
) }),
|
|
11497
|
+
/* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
|
|
11498
|
+
isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
|
|
11499
|
+
txDetails !== null && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11500
|
+
"div",
|
|
11501
|
+
{
|
|
11502
|
+
className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11503
|
+
"data-test-id": "onchain-withdraw-tx-details",
|
|
11504
|
+
children: [
|
|
11505
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11506
|
+
"button",
|
|
11507
|
+
{
|
|
11508
|
+
onClick: () => setShowTxDetails((v) => !v),
|
|
11509
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer",
|
|
11510
|
+
"aria-label": labels.txDetailsTitle,
|
|
11511
|
+
"data-test-id": "onchain-withdraw-tx-details-toggle",
|
|
11512
|
+
children: [
|
|
11513
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
|
|
11514
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineExpandMore, { className: tailwindMerge.twMerge("transition-transform", showTxDetails && "rotate-180") })
|
|
11515
|
+
]
|
|
11516
|
+
}
|
|
11517
|
+
),
|
|
11518
|
+
showTxDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
|
|
11519
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
|
|
11520
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
|
|
11521
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
|
|
11522
|
+
] }),
|
|
11523
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
|
|
11524
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
|
|
11525
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
|
|
11526
|
+
] }),
|
|
11527
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
|
|
11528
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
|
|
11529
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
|
|
11530
|
+
] })
|
|
11531
|
+
] })
|
|
11532
|
+
]
|
|
11533
|
+
}
|
|
11534
|
+
),
|
|
11535
|
+
walletError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: walletError, variant: "error" }) }),
|
|
11536
|
+
transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
|
|
11537
|
+
showWarning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
|
|
11538
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11539
|
+
submitLabel,
|
|
11540
|
+
" ",
|
|
11541
|
+
/* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
|
|
11542
|
+
] }) : submitLabel })
|
|
11543
|
+
] })
|
|
11544
|
+
}
|
|
11545
|
+
);
|
|
11546
|
+
}
|
|
11547
|
+
function OnchainWithdrawChainSelectorView({
|
|
11548
|
+
actionSheetId,
|
|
11549
|
+
isOpen,
|
|
11550
|
+
currentActionSheetId,
|
|
11551
|
+
onClose,
|
|
11552
|
+
chains,
|
|
11553
|
+
onChainClick,
|
|
11554
|
+
title,
|
|
11555
|
+
closeAriaLabel = "Close"
|
|
11556
|
+
}) {
|
|
11557
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11558
|
+
ActionSheet,
|
|
11559
|
+
{
|
|
11560
|
+
id: actionSheetId,
|
|
11561
|
+
isOpen,
|
|
11562
|
+
currentActionSheetId,
|
|
11563
|
+
onClose,
|
|
11564
|
+
height: "auto",
|
|
11565
|
+
position: "bottom",
|
|
11566
|
+
closeOnBackdropClick: true,
|
|
11567
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11568
|
+
"div",
|
|
11569
|
+
{
|
|
11570
|
+
className: "relative w-full max-w-2xl mx-auto h-full bg-[var(--deframe-widget-color-bg-primary)] shadow-lg overflow-y-auto h-screen",
|
|
11571
|
+
"data-test-id": "onchain-withdraw-chain-selector",
|
|
11572
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] text-[var(--deframe-widget-color-text-primary)] flex flex-col relative min-h-0", children: [
|
|
11573
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[var(--deframe-widget-color-border-tertiary)] flex", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11574
|
+
"button",
|
|
11575
|
+
{
|
|
11576
|
+
onClick: onClose,
|
|
11577
|
+
className: "w-12 h-12 rounded-full flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer",
|
|
11578
|
+
"aria-label": closeAriaLabel,
|
|
11579
|
+
"data-test-id": "onchain-withdraw-chain-selector-close",
|
|
11580
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
|
|
11581
|
+
}
|
|
11582
|
+
) }),
|
|
11583
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col flex-1 min-h-0", children: [
|
|
11584
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none p-6 pb-0", children: [
|
|
11585
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11586
|
+
"div",
|
|
11587
|
+
{
|
|
11588
|
+
className: "text-h5 text-[color:var(--deframe-widget-color-text-secondary)] font-bold",
|
|
11589
|
+
"data-test-id": "onchain-withdraw-chain-selector-title",
|
|
11590
|
+
children: title
|
|
11591
|
+
}
|
|
11592
|
+
),
|
|
11593
|
+
/* @__PURE__ */ jsxRuntime.jsx("br", {})
|
|
11594
|
+
] }),
|
|
11595
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full px-6 pb-6 flex-1 min-h-0 overflow-y-auto", children: chains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11596
|
+
ListItem,
|
|
11597
|
+
{
|
|
11598
|
+
onClick: () => onChainClick(chain.chainId),
|
|
11599
|
+
containerClassName: `border ${chain.isSelected ? "border-[var(--deframe-widget-color-brand-primary)] bg-[var(--deframe-widget-color-bg-secondary)]" : "border-[var(--deframe-widget-color-border-secondary)]"} hover:border-[var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)] transition-colors cursor-pointer`,
|
|
11600
|
+
"data-test-id": `onchain-withdraw-chain-${chain.chainId}`,
|
|
11601
|
+
children: [
|
|
11602
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11603
|
+
"img",
|
|
11604
|
+
{
|
|
11605
|
+
src: chain.iconUrl,
|
|
11606
|
+
alt: chain.name,
|
|
11607
|
+
className: "w-8 h-8 rounded-full object-cover"
|
|
11608
|
+
}
|
|
11609
|
+
) }),
|
|
11610
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-medium", children: chain.name }) }),
|
|
11611
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chain.formattedBalance }) })
|
|
11612
|
+
]
|
|
11613
|
+
},
|
|
11614
|
+
chain.chainId
|
|
11615
|
+
)) })
|
|
11616
|
+
] })
|
|
11617
|
+
] })
|
|
11618
|
+
}
|
|
11619
|
+
)
|
|
11620
|
+
}
|
|
11621
|
+
);
|
|
11622
|
+
}
|
|
11623
|
+
function WithdrawSuccessIcon() {
|
|
11624
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11625
|
+
"div",
|
|
11626
|
+
{
|
|
11627
|
+
className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
|
|
11628
|
+
"data-test-id": "withdraw-success-icon",
|
|
11629
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11630
|
+
"path",
|
|
11631
|
+
{
|
|
11632
|
+
d: "M10 15V5M10 5L6 9M10 5L14 9",
|
|
11633
|
+
stroke: "#121212",
|
|
11634
|
+
strokeWidth: "2",
|
|
11635
|
+
strokeLinecap: "round",
|
|
11636
|
+
strokeLinejoin: "round"
|
|
11637
|
+
}
|
|
11638
|
+
) })
|
|
11639
|
+
}
|
|
11640
|
+
);
|
|
11641
|
+
}
|
|
11642
|
+
function OnchainWithdrawSuccessView({
|
|
11643
|
+
tokenSymbol,
|
|
11644
|
+
tokenLogoURI,
|
|
11645
|
+
formattedAmount,
|
|
11646
|
+
chainName,
|
|
11647
|
+
chainIconUrl,
|
|
11648
|
+
destinationAddress,
|
|
11649
|
+
blockchainCost,
|
|
11650
|
+
txHash,
|
|
11651
|
+
blockExplorerUrl,
|
|
11652
|
+
onViewHistory,
|
|
11653
|
+
onClose,
|
|
11654
|
+
labels,
|
|
11655
|
+
className,
|
|
11656
|
+
icon
|
|
11657
|
+
}) {
|
|
11658
|
+
const [showDetails, setShowDetails] = React6.useState(true);
|
|
11659
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11660
|
+
"div",
|
|
11661
|
+
{
|
|
11662
|
+
className: tailwindMerge.twMerge(
|
|
11663
|
+
"w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded",
|
|
11664
|
+
className
|
|
11665
|
+
),
|
|
11666
|
+
"data-test-id": "onchain-withdraw-success-view",
|
|
11667
|
+
children: [
|
|
11668
|
+
onClose && /* @__PURE__ */ jsxRuntime.jsx(
|
|
11669
|
+
"button",
|
|
11670
|
+
{
|
|
11671
|
+
onClick: onClose,
|
|
11672
|
+
className: "absolute top-4 right-4 flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
|
|
11673
|
+
"aria-label": labels.closeAriaLabel,
|
|
11674
|
+
"data-test-id": "onchain-withdraw-success-close",
|
|
11675
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
|
|
11676
|
+
}
|
|
11677
|
+
),
|
|
11678
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11679
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11680
|
+
icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(WithdrawSuccessIcon, {}),
|
|
11681
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11682
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", children: labels.subtitle })
|
|
11683
|
+
] }),
|
|
11684
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11685
|
+
"div",
|
|
11686
|
+
{
|
|
11687
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11688
|
+
"data-test-id": "onchain-withdraw-success-summary",
|
|
11689
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
|
|
11690
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
|
|
11691
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[32px] h-[32px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: tokenLogoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
|
|
11692
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
|
|
11693
|
+
] }),
|
|
11694
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
11695
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
|
|
11696
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
|
|
11697
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
|
|
11698
|
+
formattedAmount,
|
|
11699
|
+
" ",
|
|
11700
|
+
tokenSymbol
|
|
11701
|
+
] })
|
|
11702
|
+
] }),
|
|
11703
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
|
|
11704
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
|
|
11705
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
|
|
11706
|
+
] })
|
|
11707
|
+
] })
|
|
11708
|
+
] })
|
|
11709
|
+
}
|
|
11710
|
+
),
|
|
11711
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11712
|
+
"div",
|
|
11713
|
+
{
|
|
11714
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11715
|
+
"data-test-id": "onchain-withdraw-success-details",
|
|
11716
|
+
children: [
|
|
11717
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11718
|
+
"button",
|
|
11719
|
+
{
|
|
11720
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11721
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11722
|
+
"aria-label": labels.detailsTitle,
|
|
11723
|
+
"data-test-id": "onchain-withdraw-success-details-toggle",
|
|
11724
|
+
children: [
|
|
11725
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11726
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11727
|
+
md.MdOutlineExpandMore,
|
|
11728
|
+
{
|
|
11729
|
+
className: tailwindMerge.twMerge(
|
|
11730
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11731
|
+
showDetails && "rotate-180"
|
|
11732
|
+
)
|
|
11733
|
+
}
|
|
11734
|
+
)
|
|
11735
|
+
]
|
|
11736
|
+
}
|
|
11737
|
+
),
|
|
11738
|
+
showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
|
|
11739
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11740
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
|
|
11741
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11742
|
+
formattedAmount,
|
|
11743
|
+
" ",
|
|
11744
|
+
tokenSymbol
|
|
11745
|
+
] })
|
|
11746
|
+
] }),
|
|
11747
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11748
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
|
|
11749
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
|
|
11750
|
+
] }),
|
|
11751
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11752
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
|
|
11753
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11754
|
+
formattedAmount,
|
|
11755
|
+
" ",
|
|
11756
|
+
tokenSymbol
|
|
11757
|
+
] })
|
|
11758
|
+
] }),
|
|
11759
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11760
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.transactionLabel }),
|
|
11761
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11762
|
+
"a",
|
|
11763
|
+
{
|
|
11764
|
+
href: `${blockExplorerUrl}/tx/${txHash}`,
|
|
11765
|
+
target: "_blank",
|
|
11766
|
+
rel: "noopener noreferrer",
|
|
11767
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
|
|
11768
|
+
"data-test-id": "onchain-withdraw-success-explorer",
|
|
11769
|
+
children: labels.viewExplorerLabel
|
|
11770
|
+
}
|
|
11771
|
+
)
|
|
11772
|
+
] })
|
|
11773
|
+
] })
|
|
11774
|
+
]
|
|
11775
|
+
}
|
|
11776
|
+
),
|
|
11777
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-withdraw-success-action", children: labels.viewHistoryLabel }) })
|
|
11778
|
+
] }) })
|
|
11779
|
+
]
|
|
11780
|
+
}
|
|
11781
|
+
);
|
|
11782
|
+
}
|
|
11783
|
+
function WithdrawFailedIcon() {
|
|
11784
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11785
|
+
"div",
|
|
11786
|
+
{
|
|
11787
|
+
className: "w-20 h-20 rounded-full flex items-center justify-center bg-[var(--deframe-widget-color-state-error)]",
|
|
11788
|
+
"data-test-id": "withdraw-failed-icon",
|
|
11789
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11790
|
+
"path",
|
|
11791
|
+
{
|
|
11792
|
+
d: "M18 6L6 18M6 6L18 18",
|
|
11793
|
+
stroke: "#121212",
|
|
11794
|
+
strokeWidth: "2",
|
|
11795
|
+
strokeLinecap: "round",
|
|
11796
|
+
strokeLinejoin: "round"
|
|
11797
|
+
}
|
|
11798
|
+
) })
|
|
11799
|
+
}
|
|
11800
|
+
);
|
|
11801
|
+
}
|
|
11802
|
+
function OnchainWithdrawFailedView({
|
|
11803
|
+
tokenSymbol,
|
|
11804
|
+
tokenLogoURI,
|
|
11805
|
+
formattedAmount,
|
|
11806
|
+
chainName,
|
|
11807
|
+
chainIconUrl,
|
|
11808
|
+
destinationAddress,
|
|
11809
|
+
blockchainCost,
|
|
11810
|
+
errorMessage,
|
|
11811
|
+
onCancel,
|
|
11812
|
+
onTryAgain,
|
|
11813
|
+
labels,
|
|
11814
|
+
className,
|
|
11815
|
+
icon
|
|
11816
|
+
}) {
|
|
11817
|
+
const [showDetails, setShowDetails] = React6.useState(true);
|
|
11818
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11819
|
+
"div",
|
|
11820
|
+
{
|
|
11821
|
+
className: tailwindMerge.twMerge(
|
|
11822
|
+
"w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded",
|
|
11823
|
+
className
|
|
11824
|
+
),
|
|
11825
|
+
"data-test-id": "onchain-withdraw-failed-view",
|
|
11826
|
+
children: [
|
|
11827
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11828
|
+
"button",
|
|
11829
|
+
{
|
|
11830
|
+
onClick: onCancel,
|
|
11831
|
+
className: "absolute top-4 right-4 flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
|
|
11832
|
+
"aria-label": labels.closeAriaLabel,
|
|
11833
|
+
"data-test-id": "onchain-withdraw-failed-close",
|
|
11834
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
|
|
11835
|
+
}
|
|
11836
|
+
),
|
|
11837
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11838
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11839
|
+
icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(WithdrawFailedIcon, {}),
|
|
11840
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11841
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", children: errorMessage || labels.defaultErrorMessage })
|
|
11842
|
+
] }),
|
|
11843
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11844
|
+
"div",
|
|
11845
|
+
{
|
|
11846
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11847
|
+
"data-test-id": "onchain-withdraw-failed-summary",
|
|
11848
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
|
|
11849
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
|
|
11850
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[32px] h-[32px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: tokenLogoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
|
|
11851
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
|
|
11852
|
+
] }),
|
|
11853
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
11854
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
|
|
11855
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
|
|
11856
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
|
|
11857
|
+
formattedAmount,
|
|
11858
|
+
" ",
|
|
11859
|
+
tokenSymbol
|
|
11860
|
+
] })
|
|
11861
|
+
] }),
|
|
11862
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
|
|
11863
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
|
|
11864
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
|
|
11865
|
+
] })
|
|
11866
|
+
] })
|
|
11867
|
+
] })
|
|
11868
|
+
}
|
|
11869
|
+
),
|
|
11870
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11871
|
+
"div",
|
|
11872
|
+
{
|
|
11873
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11874
|
+
"data-test-id": "onchain-withdraw-failed-details",
|
|
11875
|
+
children: [
|
|
11876
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11877
|
+
"button",
|
|
11878
|
+
{
|
|
11879
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11880
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11881
|
+
"aria-label": labels.detailsTitle,
|
|
11882
|
+
"data-test-id": "onchain-withdraw-failed-details-toggle",
|
|
11883
|
+
children: [
|
|
11884
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11885
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11886
|
+
md.MdOutlineExpandMore,
|
|
11887
|
+
{
|
|
11888
|
+
className: tailwindMerge.twMerge(
|
|
11889
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11890
|
+
showDetails && "rotate-180"
|
|
11891
|
+
)
|
|
11892
|
+
}
|
|
11893
|
+
)
|
|
11894
|
+
]
|
|
11895
|
+
}
|
|
11896
|
+
),
|
|
11897
|
+
showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
|
|
11898
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11899
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
|
|
11900
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11901
|
+
formattedAmount,
|
|
11902
|
+
" ",
|
|
11903
|
+
tokenSymbol
|
|
11904
|
+
] })
|
|
11905
|
+
] }),
|
|
11906
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11907
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
|
|
11908
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
|
|
11909
|
+
] }),
|
|
11910
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11911
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
|
|
11912
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11913
|
+
formattedAmount,
|
|
11914
|
+
" ",
|
|
11915
|
+
tokenSymbol
|
|
11916
|
+
] })
|
|
11917
|
+
] })
|
|
11918
|
+
] })
|
|
11919
|
+
]
|
|
11920
|
+
}
|
|
11921
|
+
),
|
|
11922
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mt-8 flex flex-col gap-3", children: [
|
|
11923
|
+
/* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { onClick: onCancel, "data-test-id": "onchain-withdraw-failed-cancel", children: labels.cancelLabel }),
|
|
11924
|
+
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onTryAgain, "data-test-id": "onchain-withdraw-failed-retry", children: labels.tryAgainLabel })
|
|
11925
|
+
] })
|
|
11926
|
+
] }) })
|
|
11927
|
+
]
|
|
11928
|
+
}
|
|
11929
|
+
);
|
|
11930
|
+
}
|
|
10832
11931
|
var DashboardCard = ({ children, className }) => {
|
|
10833
11932
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
|
|
10834
11933
|
};
|
|
@@ -12149,6 +13248,7 @@ exports.DashboardTransactionsPlaceholder = DashboardTransactionsPlaceholder;
|
|
|
12149
13248
|
exports.DashboardView = DashboardView;
|
|
12150
13249
|
exports.DashboardViewSimple = DashboardViewSimple;
|
|
12151
13250
|
exports.DeframeComponentsProvider = DeframeComponentsProvider;
|
|
13251
|
+
exports.DepositSuccessIcon = DepositSuccessIcon;
|
|
12152
13252
|
exports.DetailsHeader = DetailsHeader;
|
|
12153
13253
|
exports.EarnAmountInputView = EarnAmountInputView;
|
|
12154
13254
|
exports.EarnBalanceCard = EarnBalanceCard;
|
|
@@ -12216,6 +13316,12 @@ exports.LoadingDots = LoadingDots;
|
|
|
12216
13316
|
exports.LowRiskBadge = LowRiskBadge;
|
|
12217
13317
|
exports.MediumRiskBadge = MediumRiskBadge;
|
|
12218
13318
|
exports.Navbar = Navbar;
|
|
13319
|
+
exports.OnchainDepositFormView = OnchainDepositFormView;
|
|
13320
|
+
exports.OnchainDepositSuccessView = OnchainDepositSuccessView;
|
|
13321
|
+
exports.OnchainWithdrawChainSelectorView = OnchainWithdrawChainSelectorView;
|
|
13322
|
+
exports.OnchainWithdrawFailedView = OnchainWithdrawFailedView;
|
|
13323
|
+
exports.OnchainWithdrawFormView = OnchainWithdrawFormView;
|
|
13324
|
+
exports.OnchainWithdrawSuccessView = OnchainWithdrawSuccessView;
|
|
12219
13325
|
exports.PercentageButton = PercentageButton;
|
|
12220
13326
|
exports.PrimaryButton = PrimaryButton;
|
|
12221
13327
|
exports.ProcessingBadge = ProcessingBadge;
|
|
@@ -12277,6 +13383,9 @@ exports.WalletConnectPanel = WalletConnectPanel;
|
|
|
12277
13383
|
exports.WalletItem = WalletItem;
|
|
12278
13384
|
exports.WalletList = ConnectWalletList;
|
|
12279
13385
|
exports.WalletListContainer = WalletListContainer;
|
|
13386
|
+
exports.WithdrawFailedIcon = WithdrawFailedIcon;
|
|
13387
|
+
exports.WithdrawSuccessIcon = WithdrawSuccessIcon;
|
|
12280
13388
|
exports.isDustValue = isDustValue;
|
|
13389
|
+
exports.truncateAddress = truncateAddress;
|
|
12281
13390
|
//# sourceMappingURL=index.js.map
|
|
12282
13391
|
//# sourceMappingURL=index.js.map
|