@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.mjs
CHANGED
|
@@ -4,9 +4,10 @@ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiA
|
|
|
4
4
|
import * as React6 from 'react';
|
|
5
5
|
import React6__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
6
6
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
7
|
-
import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
|
|
7
|
+
import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
|
|
8
8
|
import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
|
|
9
9
|
import { PiClockCountdownBold } from 'react-icons/pi';
|
|
10
|
+
import QRCode from 'react-qr-code';
|
|
10
11
|
|
|
11
12
|
var __defProp = Object.defineProperty;
|
|
12
13
|
var __defProps = Object.defineProperties;
|
|
@@ -4339,9 +4340,9 @@ var ChooseAnAssetSwapView = ({
|
|
|
4339
4340
|
/* @__PURE__ */ jsx(LoadingDots, {})
|
|
4340
4341
|
] }) }),
|
|
4341
4342
|
displayedTokens.map((token, index) => {
|
|
4342
|
-
const balance = findBalance(token);
|
|
4343
|
-
const
|
|
4344
|
-
const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI,
|
|
4343
|
+
const balance = findBalance == null ? void 0 : findBalance(token);
|
|
4344
|
+
const priceUSD = Number(balance == null ? void 0 : balance.priceUSD) || token.priceInUSD || 0;
|
|
4345
|
+
const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, priceUSD, token.decimals) : "0";
|
|
4345
4346
|
return /* @__PURE__ */ jsxs(
|
|
4346
4347
|
ListItem,
|
|
4347
4348
|
{
|
|
@@ -4352,7 +4353,14 @@ var ChooseAnAssetSwapView = ({
|
|
|
4352
4353
|
"data-chain-id": token.chainId,
|
|
4353
4354
|
"data-symbol": token.symbol,
|
|
4354
4355
|
children: [
|
|
4355
|
-
/* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("
|
|
4356
|
+
/* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-10 h-10 flex-shrink-0", children: /* @__PURE__ */ jsx(
|
|
4357
|
+
"img",
|
|
4358
|
+
{
|
|
4359
|
+
src: token.logoURI || "",
|
|
4360
|
+
alt: token.name,
|
|
4361
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
4362
|
+
}
|
|
4363
|
+
) }) }),
|
|
4356
4364
|
/* @__PURE__ */ jsxs(ListItemContent, { children: [
|
|
4357
4365
|
/* @__PURE__ */ jsx(TextBody, { children: token.name }),
|
|
4358
4366
|
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
|
|
@@ -6232,7 +6240,11 @@ var ChooseANetworkView = ({
|
|
|
6232
6240
|
autoFocus = true,
|
|
6233
6241
|
chains,
|
|
6234
6242
|
pageSize = 10,
|
|
6235
|
-
onChainClick
|
|
6243
|
+
onChainClick,
|
|
6244
|
+
actionSheetId,
|
|
6245
|
+
isOpen,
|
|
6246
|
+
currentActionSheetId,
|
|
6247
|
+
onClose
|
|
6236
6248
|
}) => {
|
|
6237
6249
|
const [searchValue, setSearchValue] = useState("");
|
|
6238
6250
|
const [page, setPage] = useState(1);
|
|
@@ -6244,52 +6256,72 @@ var ChooseANetworkView = ({
|
|
|
6244
6256
|
);
|
|
6245
6257
|
const displayedChains = filteredChains.slice(0, page * pageSize);
|
|
6246
6258
|
const hasMore = filteredChains.length > page * pageSize;
|
|
6247
|
-
|
|
6248
|
-
/* @__PURE__ */
|
|
6249
|
-
|
|
6250
|
-
/* @__PURE__ */
|
|
6251
|
-
|
|
6252
|
-
|
|
6259
|
+
const content = /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
|
|
6260
|
+
onClose && /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton_default, { testId: `choose-a-network-close-${actionSheetId != null ? actionSheetId : "default"}`, onClick: onClose }) }),
|
|
6261
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
|
|
6262
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
|
|
6263
|
+
/* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
|
|
6264
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
6265
|
+
/* @__PURE__ */ jsx(
|
|
6266
|
+
SearchInput,
|
|
6267
|
+
{
|
|
6268
|
+
value: searchValue,
|
|
6269
|
+
onChange: setSearchValue,
|
|
6270
|
+
placeholder: labels.searchPlaceholder,
|
|
6271
|
+
autoFocus
|
|
6272
|
+
}
|
|
6273
|
+
)
|
|
6274
|
+
] }),
|
|
6275
|
+
/* @__PURE__ */ jsxs(
|
|
6276
|
+
"div",
|
|
6253
6277
|
{
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
6278
|
+
"data-testid": "choose-a-network-list",
|
|
6279
|
+
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",
|
|
6280
|
+
children: [
|
|
6281
|
+
displayedChains.map((chain) => /* @__PURE__ */ jsxs(
|
|
6282
|
+
ListItem,
|
|
6283
|
+
{
|
|
6284
|
+
className: "w-full flex-shrink-0",
|
|
6285
|
+
onClick: () => onChainClick(chain.chainId),
|
|
6286
|
+
"data-testid": `choose-network-item-${chain.chainId}`,
|
|
6287
|
+
"data-chain-id": chain.chainId,
|
|
6288
|
+
children: [
|
|
6289
|
+
/* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
|
|
6290
|
+
"img",
|
|
6291
|
+
{
|
|
6292
|
+
src: chain.imageUrl,
|
|
6293
|
+
alt: chain.name,
|
|
6294
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
6295
|
+
}
|
|
6296
|
+
) }),
|
|
6297
|
+
/* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
|
|
6298
|
+
]
|
|
6299
|
+
},
|
|
6300
|
+
`chain-${chain.chainId}`
|
|
6301
|
+
)),
|
|
6302
|
+
hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
6303
|
+
]
|
|
6258
6304
|
}
|
|
6259
6305
|
)
|
|
6260
|
-
] })
|
|
6261
|
-
|
|
6262
|
-
|
|
6263
|
-
|
|
6264
|
-
|
|
6265
|
-
|
|
6266
|
-
|
|
6267
|
-
|
|
6268
|
-
|
|
6269
|
-
|
|
6270
|
-
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
alt: chain.name,
|
|
6280
|
-
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
6281
|
-
}
|
|
6282
|
-
) }),
|
|
6283
|
-
/* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
|
|
6284
|
-
]
|
|
6285
|
-
},
|
|
6286
|
-
`chain-${chain.chainId}`
|
|
6287
|
-
)),
|
|
6288
|
-
hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
6289
|
-
]
|
|
6290
|
-
}
|
|
6291
|
-
)
|
|
6292
|
-
] }) });
|
|
6306
|
+
] })
|
|
6307
|
+
] });
|
|
6308
|
+
if (!actionSheetId) {
|
|
6309
|
+
return content;
|
|
6310
|
+
}
|
|
6311
|
+
return /* @__PURE__ */ jsx("div", { className: "flex justify-center", "data-testid": `choose-a-network-wrapper-${actionSheetId}`, children: /* @__PURE__ */ jsx(
|
|
6312
|
+
ActionSheet,
|
|
6313
|
+
{
|
|
6314
|
+
id: actionSheetId,
|
|
6315
|
+
currentActionSheetId: currentActionSheetId != null ? currentActionSheetId : null,
|
|
6316
|
+
isOpen: isOpen != null ? isOpen : false,
|
|
6317
|
+
onClose: onClose != null ? onClose : (() => {
|
|
6318
|
+
}),
|
|
6319
|
+
position: "bottom",
|
|
6320
|
+
height: "full",
|
|
6321
|
+
contentClassName: "w-full max-w-[620px] mx-auto",
|
|
6322
|
+
children: content
|
|
6323
|
+
}
|
|
6324
|
+
) });
|
|
6293
6325
|
};
|
|
6294
6326
|
function useIsMobile(breakpoint = 640) {
|
|
6295
6327
|
const [isMobile, setIsMobile] = useState(
|
|
@@ -7021,14 +7053,24 @@ function ChooseNetworkAndAssetViewSimple({
|
|
|
7021
7053
|
"data-test-id": "sheet-header",
|
|
7022
7054
|
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",
|
|
7023
7055
|
children: [
|
|
7024
|
-
/* @__PURE__ */
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
|
|
7030
|
-
|
|
7031
|
-
|
|
7056
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
7057
|
+
/* @__PURE__ */ jsx(
|
|
7058
|
+
"span",
|
|
7059
|
+
{
|
|
7060
|
+
"data-test-id": "sheet-title",
|
|
7061
|
+
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)]",
|
|
7062
|
+
children: labels.title
|
|
7063
|
+
}
|
|
7064
|
+
),
|
|
7065
|
+
labels.subtitle && /* @__PURE__ */ jsx(
|
|
7066
|
+
"span",
|
|
7067
|
+
{
|
|
7068
|
+
"data-test-id": "sheet-subtitle",
|
|
7069
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] mt-[2px]",
|
|
7070
|
+
children: labels.subtitle
|
|
7071
|
+
}
|
|
7072
|
+
)
|
|
7073
|
+
] }),
|
|
7032
7074
|
/* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
7033
7075
|
]
|
|
7034
7076
|
}
|
|
@@ -7129,14 +7171,24 @@ function ChooseNetworkAndAssetViewSimple({
|
|
|
7129
7171
|
"data-test-id": "modal-header",
|
|
7130
7172
|
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",
|
|
7131
7173
|
children: [
|
|
7132
|
-
/* @__PURE__ */
|
|
7133
|
-
|
|
7134
|
-
|
|
7135
|
-
|
|
7136
|
-
|
|
7137
|
-
|
|
7138
|
-
|
|
7139
|
-
|
|
7174
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
7175
|
+
/* @__PURE__ */ jsx(
|
|
7176
|
+
"span",
|
|
7177
|
+
{
|
|
7178
|
+
"data-test-id": "modal-title",
|
|
7179
|
+
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)]",
|
|
7180
|
+
children: labels.title
|
|
7181
|
+
}
|
|
7182
|
+
),
|
|
7183
|
+
labels.subtitle && /* @__PURE__ */ jsx(
|
|
7184
|
+
"span",
|
|
7185
|
+
{
|
|
7186
|
+
"data-test-id": "modal-subtitle",
|
|
7187
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] mt-[2px]",
|
|
7188
|
+
children: labels.subtitle
|
|
7189
|
+
}
|
|
7190
|
+
)
|
|
7191
|
+
] }),
|
|
7140
7192
|
/* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
7141
7193
|
]
|
|
7142
7194
|
}
|
|
@@ -8234,6 +8286,7 @@ var EarnInvestmentDetailsView = (props) => {
|
|
|
8234
8286
|
var EarnTokenSelectorView = ({
|
|
8235
8287
|
selectedToken,
|
|
8236
8288
|
onTokenClick,
|
|
8289
|
+
onNetworkAndAssetClick,
|
|
8237
8290
|
onNetworkClick,
|
|
8238
8291
|
isLoading,
|
|
8239
8292
|
selectTokenLabel,
|
|
@@ -8248,7 +8301,7 @@ var EarnTokenSelectorView = ({
|
|
|
8248
8301
|
"button",
|
|
8249
8302
|
{
|
|
8250
8303
|
type: "button",
|
|
8251
|
-
onClick: onTokenClick,
|
|
8304
|
+
onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
|
|
8252
8305
|
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",
|
|
8253
8306
|
children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
8254
8307
|
/* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -8266,7 +8319,7 @@ var EarnTokenSelectorView = ({
|
|
|
8266
8319
|
] })
|
|
8267
8320
|
}
|
|
8268
8321
|
) }),
|
|
8269
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8322
|
+
!onNetworkAndAssetClick && /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8270
8323
|
/* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
8271
8324
|
/* @__PURE__ */ jsxs(
|
|
8272
8325
|
"button",
|
|
@@ -8329,6 +8382,7 @@ var EarnPercentageButtonsView = ({
|
|
|
8329
8382
|
var EarnWithdrawTokenSelectorView = ({
|
|
8330
8383
|
selectedToken,
|
|
8331
8384
|
onTokenClick,
|
|
8385
|
+
onNetworkAndAssetClick,
|
|
8332
8386
|
onNetworkClick,
|
|
8333
8387
|
selectTokenLabel,
|
|
8334
8388
|
chainLabel,
|
|
@@ -8342,7 +8396,7 @@ var EarnWithdrawTokenSelectorView = ({
|
|
|
8342
8396
|
"button",
|
|
8343
8397
|
{
|
|
8344
8398
|
type: "button",
|
|
8345
|
-
onClick: onTokenClick,
|
|
8399
|
+
onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
|
|
8346
8400
|
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",
|
|
8347
8401
|
children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
|
|
8348
8402
|
/* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -8360,7 +8414,7 @@ var EarnWithdrawTokenSelectorView = ({
|
|
|
8360
8414
|
] })
|
|
8361
8415
|
}
|
|
8362
8416
|
) }),
|
|
8363
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8417
|
+
!onNetworkAndAssetClick && /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
|
|
8364
8418
|
/* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
|
|
8365
8419
|
/* @__PURE__ */ jsxs(
|
|
8366
8420
|
"button",
|
|
@@ -8483,6 +8537,7 @@ var EarnDepositFormView = ({
|
|
|
8483
8537
|
// Token selector
|
|
8484
8538
|
selectedToken,
|
|
8485
8539
|
onTokenClick,
|
|
8540
|
+
onNetworkAndAssetClick,
|
|
8486
8541
|
isLoadingToken,
|
|
8487
8542
|
selectTokenLabel,
|
|
8488
8543
|
// Chain selector
|
|
@@ -8540,6 +8595,7 @@ var EarnDepositFormView = ({
|
|
|
8540
8595
|
{
|
|
8541
8596
|
selectedToken,
|
|
8542
8597
|
onTokenClick,
|
|
8598
|
+
onNetworkAndAssetClick,
|
|
8543
8599
|
isLoading: isLoadingToken,
|
|
8544
8600
|
selectTokenLabel,
|
|
8545
8601
|
chainLabel,
|
|
@@ -8614,14 +8670,14 @@ var EarnDepositFormView = ({
|
|
|
8614
8670
|
] });
|
|
8615
8671
|
var EarnTokenSelectorSimpleView = ({
|
|
8616
8672
|
selectedToken,
|
|
8617
|
-
|
|
8673
|
+
onNetworkAndAssetClick,
|
|
8618
8674
|
isLoading,
|
|
8619
8675
|
selectTokenLabel,
|
|
8620
8676
|
chainLabel,
|
|
8621
8677
|
chainImage
|
|
8622
8678
|
}) => {
|
|
8623
8679
|
const hasToken = selectedToken != null;
|
|
8624
|
-
const isInteractive = !!
|
|
8680
|
+
const isInteractive = !!onNetworkAndAssetClick;
|
|
8625
8681
|
const baseClasses = [
|
|
8626
8682
|
"inline-flex items-center gap-[10px]",
|
|
8627
8683
|
"h-[54px] px-[10px]",
|
|
@@ -8645,7 +8701,7 @@ var EarnTokenSelectorSimpleView = ({
|
|
|
8645
8701
|
type: "button",
|
|
8646
8702
|
"data-slot": "token-selector-simple",
|
|
8647
8703
|
"data-test-id": "earn-token-selector-simple-view",
|
|
8648
|
-
onClick:
|
|
8704
|
+
onClick: onNetworkAndAssetClick,
|
|
8649
8705
|
disabled: !isInteractive,
|
|
8650
8706
|
"aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
|
|
8651
8707
|
className: selectorClasses,
|
|
@@ -8971,6 +9027,7 @@ var EarnDepositFormViewSimple = ({
|
|
|
8971
9027
|
// Token selector
|
|
8972
9028
|
selectedToken,
|
|
8973
9029
|
onTokenClick,
|
|
9030
|
+
onNetworkAndAssetClick,
|
|
8974
9031
|
isLoadingToken,
|
|
8975
9032
|
selectTokenLabel,
|
|
8976
9033
|
// Chain selector
|
|
@@ -9113,6 +9170,7 @@ var EarnDepositFormViewSimple = ({
|
|
|
9113
9170
|
{
|
|
9114
9171
|
selectedToken,
|
|
9115
9172
|
onTokenClick,
|
|
9173
|
+
onNetworkAndAssetClick,
|
|
9116
9174
|
isLoading: isLoadingToken,
|
|
9117
9175
|
selectTokenLabel,
|
|
9118
9176
|
chainLabel,
|
|
@@ -9295,6 +9353,7 @@ var EarnWithdrawFormView = ({
|
|
|
9295
9353
|
// Token selector
|
|
9296
9354
|
selectedToken,
|
|
9297
9355
|
onTokenClick,
|
|
9356
|
+
onNetworkAndAssetClick,
|
|
9298
9357
|
selectTokenLabel,
|
|
9299
9358
|
// Chain selector
|
|
9300
9359
|
chainLabel,
|
|
@@ -9355,6 +9414,7 @@ var EarnWithdrawFormView = ({
|
|
|
9355
9414
|
{
|
|
9356
9415
|
selectedToken,
|
|
9357
9416
|
onTokenClick,
|
|
9417
|
+
onNetworkAndAssetClick,
|
|
9358
9418
|
selectTokenLabel,
|
|
9359
9419
|
chainLabel,
|
|
9360
9420
|
chainImage,
|
|
@@ -9432,6 +9492,7 @@ var EarnWithdrawFormViewSimple = ({
|
|
|
9432
9492
|
// Token selector
|
|
9433
9493
|
selectedToken,
|
|
9434
9494
|
onTokenClick,
|
|
9495
|
+
onNetworkAndAssetClick,
|
|
9435
9496
|
selectTokenLabel,
|
|
9436
9497
|
// Chain selector
|
|
9437
9498
|
chainLabel,
|
|
@@ -9567,6 +9628,7 @@ var EarnWithdrawFormViewSimple = ({
|
|
|
9567
9628
|
{
|
|
9568
9629
|
selectedToken,
|
|
9569
9630
|
onTokenClick,
|
|
9631
|
+
onNetworkAndAssetClick,
|
|
9570
9632
|
isLoading: false,
|
|
9571
9633
|
selectTokenLabel,
|
|
9572
9634
|
chainLabel,
|
|
@@ -10808,6 +10870,1040 @@ var EarnWithdrawFailedSimpleView = ({
|
|
|
10808
10870
|
}
|
|
10809
10871
|
) });
|
|
10810
10872
|
};
|
|
10873
|
+
function OnchainDepositFormView({
|
|
10874
|
+
selectedToken,
|
|
10875
|
+
onTokenClick,
|
|
10876
|
+
chainCount,
|
|
10877
|
+
selectedChain,
|
|
10878
|
+
onNetworkClick,
|
|
10879
|
+
isGenerating,
|
|
10880
|
+
showContent,
|
|
10881
|
+
depositAddress,
|
|
10882
|
+
showInfoBanner,
|
|
10883
|
+
selectedTokenName,
|
|
10884
|
+
selectedChainName,
|
|
10885
|
+
isSubmitDisabled,
|
|
10886
|
+
onSubmit,
|
|
10887
|
+
submitLabel,
|
|
10888
|
+
onBack,
|
|
10889
|
+
labels,
|
|
10890
|
+
className
|
|
10891
|
+
}) {
|
|
10892
|
+
const hasAllData = !!(selectedToken && selectedChain);
|
|
10893
|
+
return /* @__PURE__ */ jsx(
|
|
10894
|
+
"div",
|
|
10895
|
+
{
|
|
10896
|
+
className: twMerge(
|
|
10897
|
+
"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",
|
|
10898
|
+
className
|
|
10899
|
+
),
|
|
10900
|
+
"data-test-id": "onchain-deposit-form-view",
|
|
10901
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
|
|
10902
|
+
/* @__PURE__ */ jsx(
|
|
10903
|
+
SecondaryButton,
|
|
10904
|
+
{
|
|
10905
|
+
onClick: onBack,
|
|
10906
|
+
className: "mb-4 !border-0 max-w-[84px]",
|
|
10907
|
+
"aria-label": labels.backLabel,
|
|
10908
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
10909
|
+
/* @__PURE__ */ jsx(MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
|
|
10910
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
|
|
10911
|
+
] })
|
|
10912
|
+
}
|
|
10913
|
+
),
|
|
10914
|
+
/* @__PURE__ */ jsx(TextHeading, { variant: "h2", children: labels.title }),
|
|
10915
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
|
|
10916
|
+
/* @__PURE__ */ jsxs(
|
|
10917
|
+
"div",
|
|
10918
|
+
{
|
|
10919
|
+
className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded lg:!bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
10920
|
+
"data-test-id": "onchain-deposit-token-card",
|
|
10921
|
+
children: [
|
|
10922
|
+
/* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
|
|
10923
|
+
"button",
|
|
10924
|
+
{
|
|
10925
|
+
onClick: onTokenClick,
|
|
10926
|
+
className: "flex justify-between items-center border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full cursor-pointer",
|
|
10927
|
+
"data-test-id": "onchain-deposit-token-button",
|
|
10928
|
+
"aria-label": labels.tokenPlaceholder,
|
|
10929
|
+
children: [
|
|
10930
|
+
selectedToken ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
10931
|
+
/* @__PURE__ */ jsx(
|
|
10932
|
+
"img",
|
|
10933
|
+
{
|
|
10934
|
+
src: selectedToken.logoURI || "",
|
|
10935
|
+
alt: selectedToken.symbol,
|
|
10936
|
+
className: "w-6 h-6 rounded-full object-cover"
|
|
10937
|
+
}
|
|
10938
|
+
),
|
|
10939
|
+
/* @__PURE__ */ jsxs("div", { className: "text-left", children: [
|
|
10940
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }),
|
|
10941
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedToken.name })
|
|
10942
|
+
] })
|
|
10943
|
+
] }) : /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }),
|
|
10944
|
+
/* @__PURE__ */ jsx(MdOutlineArrowDropDown, {})
|
|
10945
|
+
]
|
|
10946
|
+
}
|
|
10947
|
+
) }),
|
|
10948
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center mt-6", children: [
|
|
10949
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.chainDirectionLabel }),
|
|
10950
|
+
/* @__PURE__ */ jsx("div", { className: "relative ml-4 flex-1", children: chainCount === 0 ? /* @__PURE__ */ jsxs(
|
|
10951
|
+
"div",
|
|
10952
|
+
{
|
|
10953
|
+
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",
|
|
10954
|
+
"data-test-id": "onchain-deposit-chain-disabled",
|
|
10955
|
+
children: [
|
|
10956
|
+
/* @__PURE__ */ jsx(TextAccent, { variant: "accent-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
|
|
10957
|
+
/* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "flex-shrink-0" })
|
|
10958
|
+
]
|
|
10959
|
+
}
|
|
10960
|
+
) : chainCount > 1 ? /* @__PURE__ */ jsxs(
|
|
10961
|
+
"button",
|
|
10962
|
+
{
|
|
10963
|
+
onClick: onNetworkClick,
|
|
10964
|
+
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",
|
|
10965
|
+
"data-test-id": "onchain-deposit-chain-dropdown",
|
|
10966
|
+
"aria-label": labels.chainPlaceholder,
|
|
10967
|
+
children: [
|
|
10968
|
+
selectedChain ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
10969
|
+
/* @__PURE__ */ jsx(
|
|
10970
|
+
"img",
|
|
10971
|
+
{
|
|
10972
|
+
src: selectedChain.iconUrl,
|
|
10973
|
+
alt: selectedChain.name,
|
|
10974
|
+
className: "w-4 h-4 rounded-full object-cover"
|
|
10975
|
+
}
|
|
10976
|
+
),
|
|
10977
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: selectedChain.name })
|
|
10978
|
+
] }) : /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
|
|
10979
|
+
/* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "flex-shrink-0" })
|
|
10980
|
+
]
|
|
10981
|
+
}
|
|
10982
|
+
) : selectedChain ? /* @__PURE__ */ jsxs(
|
|
10983
|
+
"div",
|
|
10984
|
+
{
|
|
10985
|
+
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]",
|
|
10986
|
+
"data-test-id": "onchain-deposit-chain-static",
|
|
10987
|
+
children: [
|
|
10988
|
+
/* @__PURE__ */ jsx(
|
|
10989
|
+
"img",
|
|
10990
|
+
{
|
|
10991
|
+
src: selectedChain.iconUrl,
|
|
10992
|
+
alt: selectedChain.name,
|
|
10993
|
+
className: "w-5 h-5 rounded-full object-cover"
|
|
10994
|
+
}
|
|
10995
|
+
),
|
|
10996
|
+
/* @__PURE__ */ jsx("span", { children: selectedChain.name })
|
|
10997
|
+
]
|
|
10998
|
+
}
|
|
10999
|
+
) : null })
|
|
11000
|
+
] })
|
|
11001
|
+
]
|
|
11002
|
+
}
|
|
11003
|
+
),
|
|
11004
|
+
showInfoBanner && /* @__PURE__ */ jsx(BannerNotification, { message: labels.infoBanner, variant: "info" }),
|
|
11005
|
+
hasAllData && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11006
|
+
isGenerating && /* @__PURE__ */ jsx(
|
|
11007
|
+
"div",
|
|
11008
|
+
{
|
|
11009
|
+
className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded",
|
|
11010
|
+
"data-test-id": "onchain-deposit-skeleton",
|
|
11011
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 animate-pulse", children: [
|
|
11012
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "1.3rem", variant: "text" }),
|
|
11013
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "70%", height: "1.3rem", variant: "text" }),
|
|
11014
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "2rem", variant: "text" }),
|
|
11015
|
+
/* @__PURE__ */ jsx(Skeleton, { width: "15rem", height: "15rem", variant: "rect", className: "rounded" })
|
|
11016
|
+
] })
|
|
11017
|
+
}
|
|
11018
|
+
),
|
|
11019
|
+
showContent && selectedChain && depositAddress && /* @__PURE__ */ jsxs(
|
|
11020
|
+
"div",
|
|
11021
|
+
{
|
|
11022
|
+
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)]",
|
|
11023
|
+
"data-test-id": "onchain-deposit-address-card",
|
|
11024
|
+
children: [
|
|
11025
|
+
/* @__PURE__ */ jsxs("p", { className: "text-center mb-6", children: [
|
|
11026
|
+
labels.depositInstructionPrefix,
|
|
11027
|
+
" ",
|
|
11028
|
+
/* @__PURE__ */ jsx("strong", { children: selectedChainName }),
|
|
11029
|
+
".",
|
|
11030
|
+
" ",
|
|
11031
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
11032
|
+
labels.depositInstructionSuffix
|
|
11033
|
+
] }),
|
|
11034
|
+
/* @__PURE__ */ jsx(AddressDisplay, { address: depositAddress, className: "mb-4", onCopy: () => {
|
|
11035
|
+
} }),
|
|
11036
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
|
|
11037
|
+
QRCode,
|
|
11038
|
+
{
|
|
11039
|
+
size: 174,
|
|
11040
|
+
value: depositAddress,
|
|
11041
|
+
className: "border-12 border-[var(--deframe-widget-color-bg-tertiary)] rounded"
|
|
11042
|
+
}
|
|
11043
|
+
) })
|
|
11044
|
+
]
|
|
11045
|
+
}
|
|
11046
|
+
)
|
|
11047
|
+
] }),
|
|
11048
|
+
!hasAllData && /* @__PURE__ */ jsx("div", { className: "my-4 p-8 w-full", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 mb-4 min-h-[320px]" }) }),
|
|
11049
|
+
hasAllData && selectedTokenName && selectedChainName && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: labels.warnBannerTokenChain, variant: "warning" }) }),
|
|
11050
|
+
/* @__PURE__ */ jsx(
|
|
11051
|
+
PrimaryButton,
|
|
11052
|
+
{
|
|
11053
|
+
disabled: isSubmitDisabled,
|
|
11054
|
+
onClick: onSubmit,
|
|
11055
|
+
"data-test-id": "onchain-deposit-submit",
|
|
11056
|
+
children: submitLabel
|
|
11057
|
+
}
|
|
11058
|
+
)
|
|
11059
|
+
] })
|
|
11060
|
+
}
|
|
11061
|
+
);
|
|
11062
|
+
}
|
|
11063
|
+
|
|
11064
|
+
// src/utils/truncate-address.ts
|
|
11065
|
+
function truncateAddress(address, startChars = 6, endChars = 4) {
|
|
11066
|
+
if (!address) return "";
|
|
11067
|
+
if (address.length <= startChars + endChars) return address;
|
|
11068
|
+
return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
|
|
11069
|
+
}
|
|
11070
|
+
function DepositSuccessIcon() {
|
|
11071
|
+
return /* @__PURE__ */ jsx(
|
|
11072
|
+
"div",
|
|
11073
|
+
{
|
|
11074
|
+
className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
|
|
11075
|
+
"data-test-id": "deposit-success-icon",
|
|
11076
|
+
children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
11077
|
+
"path",
|
|
11078
|
+
{
|
|
11079
|
+
d: "M10 5V15M10 15L6 11M10 15L14 11",
|
|
11080
|
+
stroke: "#121212",
|
|
11081
|
+
strokeWidth: "2",
|
|
11082
|
+
strokeLinecap: "round",
|
|
11083
|
+
strokeLinejoin: "round"
|
|
11084
|
+
}
|
|
11085
|
+
) })
|
|
11086
|
+
}
|
|
11087
|
+
);
|
|
11088
|
+
}
|
|
11089
|
+
function OnchainDepositSuccessView({
|
|
11090
|
+
tokenSymbol,
|
|
11091
|
+
chainName,
|
|
11092
|
+
formattedAmount,
|
|
11093
|
+
depositAddress,
|
|
11094
|
+
txHash,
|
|
11095
|
+
blockExplorerUrl,
|
|
11096
|
+
onViewHistory,
|
|
11097
|
+
onClose,
|
|
11098
|
+
labels,
|
|
11099
|
+
className,
|
|
11100
|
+
icon
|
|
11101
|
+
}) {
|
|
11102
|
+
const [showDetails, setShowDetails] = useState(true);
|
|
11103
|
+
const [copied, setCopied] = useState(false);
|
|
11104
|
+
const handleCopyAddress = async () => {
|
|
11105
|
+
try {
|
|
11106
|
+
await navigator.clipboard.writeText(depositAddress);
|
|
11107
|
+
setCopied(true);
|
|
11108
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
11109
|
+
} catch (e) {
|
|
11110
|
+
}
|
|
11111
|
+
};
|
|
11112
|
+
return /* @__PURE__ */ jsxs(
|
|
11113
|
+
"div",
|
|
11114
|
+
{
|
|
11115
|
+
className: twMerge(
|
|
11116
|
+
"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",
|
|
11117
|
+
className
|
|
11118
|
+
),
|
|
11119
|
+
"data-test-id": "onchain-deposit-success-view",
|
|
11120
|
+
children: [
|
|
11121
|
+
onClose && /* @__PURE__ */ jsx(
|
|
11122
|
+
"button",
|
|
11123
|
+
{
|
|
11124
|
+
onClick: onClose,
|
|
11125
|
+
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",
|
|
11126
|
+
"aria-label": labels.closeAriaLabel,
|
|
11127
|
+
"data-test-id": "onchain-deposit-success-close",
|
|
11128
|
+
children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
|
|
11129
|
+
}
|
|
11130
|
+
),
|
|
11131
|
+
/* @__PURE__ */ jsx("div", { className: "p-6 lg:!p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11132
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11133
|
+
icon != null ? icon : /* @__PURE__ */ jsx(DepositSuccessIcon, {}),
|
|
11134
|
+
/* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11135
|
+
/* @__PURE__ */ 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 })
|
|
11136
|
+
] }),
|
|
11137
|
+
/* @__PURE__ */ jsxs(
|
|
11138
|
+
"div",
|
|
11139
|
+
{
|
|
11140
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11141
|
+
"data-test-id": "onchain-deposit-success-info",
|
|
11142
|
+
children: [
|
|
11143
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11144
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.assetLabel }),
|
|
11145
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: tokenSymbol })
|
|
11146
|
+
] }),
|
|
11147
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11148
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.networkLabel }),
|
|
11149
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: chainName })
|
|
11150
|
+
] }),
|
|
11151
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11152
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.amountLabel }),
|
|
11153
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11154
|
+
formattedAmount,
|
|
11155
|
+
" ",
|
|
11156
|
+
tokenSymbol
|
|
11157
|
+
] })
|
|
11158
|
+
] }),
|
|
11159
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11160
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.addressLabel }),
|
|
11161
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
11162
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: truncateAddress(depositAddress) }),
|
|
11163
|
+
/* @__PURE__ */ jsx(
|
|
11164
|
+
"button",
|
|
11165
|
+
{
|
|
11166
|
+
onClick: handleCopyAddress,
|
|
11167
|
+
className: "text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
|
|
11168
|
+
"aria-label": labels.addressLabel,
|
|
11169
|
+
"data-test-id": "onchain-deposit-success-copy",
|
|
11170
|
+
children: /* @__PURE__ */ jsx(MdContentCopy, { className: "w-4 h-4" })
|
|
11171
|
+
}
|
|
11172
|
+
),
|
|
11173
|
+
copied && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[color:var(--deframe-widget-color-state-success)]", children: labels.copiedLabel })
|
|
11174
|
+
] })
|
|
11175
|
+
] }),
|
|
11176
|
+
txHash && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11177
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txIdLabel }),
|
|
11178
|
+
/* @__PURE__ */ jsx(
|
|
11179
|
+
"a",
|
|
11180
|
+
{
|
|
11181
|
+
href: `${blockExplorerUrl}/tx/${txHash}`,
|
|
11182
|
+
target: "_blank",
|
|
11183
|
+
rel: "noopener noreferrer",
|
|
11184
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
|
|
11185
|
+
"data-test-id": "onchain-deposit-success-explorer",
|
|
11186
|
+
children: labels.viewExplorerLabel
|
|
11187
|
+
}
|
|
11188
|
+
)
|
|
11189
|
+
] })
|
|
11190
|
+
]
|
|
11191
|
+
}
|
|
11192
|
+
),
|
|
11193
|
+
/* @__PURE__ */ jsxs(
|
|
11194
|
+
"div",
|
|
11195
|
+
{
|
|
11196
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11197
|
+
"data-test-id": "onchain-deposit-success-details",
|
|
11198
|
+
children: [
|
|
11199
|
+
/* @__PURE__ */ jsxs(
|
|
11200
|
+
"button",
|
|
11201
|
+
{
|
|
11202
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11203
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11204
|
+
"aria-label": labels.detailsTitle,
|
|
11205
|
+
"data-test-id": "onchain-deposit-success-details-toggle",
|
|
11206
|
+
children: [
|
|
11207
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11208
|
+
/* @__PURE__ */ jsx(
|
|
11209
|
+
MdOutlineExpandMore,
|
|
11210
|
+
{
|
|
11211
|
+
className: twMerge(
|
|
11212
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11213
|
+
showDetails && "rotate-180"
|
|
11214
|
+
)
|
|
11215
|
+
}
|
|
11216
|
+
)
|
|
11217
|
+
]
|
|
11218
|
+
}
|
|
11219
|
+
),
|
|
11220
|
+
showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
|
|
11221
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
|
|
11222
|
+
/* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] font-medium", children: labels.estimatedTimeLabel }),
|
|
11223
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
|
|
11224
|
+
] }),
|
|
11225
|
+
/* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
|
|
11226
|
+
var _a, _b;
|
|
11227
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
|
|
11228
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
|
|
11229
|
+
/* @__PURE__ */ 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__ */ jsx(IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) }),
|
|
11230
|
+
index < labels.steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
|
|
11231
|
+
] }),
|
|
11232
|
+
/* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
|
|
11233
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
|
|
11234
|
+
/* @__PURE__ */ jsx(
|
|
11235
|
+
"span",
|
|
11236
|
+
{
|
|
11237
|
+
className: twMerge(
|
|
11238
|
+
"text-[12px] font-semibold",
|
|
11239
|
+
step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
|
|
11240
|
+
),
|
|
11241
|
+
children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
|
|
11242
|
+
}
|
|
11243
|
+
)
|
|
11244
|
+
] })
|
|
11245
|
+
] }, step.label);
|
|
11246
|
+
}) })
|
|
11247
|
+
] })
|
|
11248
|
+
]
|
|
11249
|
+
}
|
|
11250
|
+
),
|
|
11251
|
+
/* @__PURE__ */ jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-deposit-success-action", children: labels.viewHistoryLabel }) })
|
|
11252
|
+
] }) })
|
|
11253
|
+
]
|
|
11254
|
+
}
|
|
11255
|
+
);
|
|
11256
|
+
}
|
|
11257
|
+
function OnchainWithdrawFormView({
|
|
11258
|
+
selectedToken,
|
|
11259
|
+
onTokenClick,
|
|
11260
|
+
isProcessing,
|
|
11261
|
+
chainCount,
|
|
11262
|
+
selectedChain,
|
|
11263
|
+
onNetworkClick,
|
|
11264
|
+
formattedBalance,
|
|
11265
|
+
amount,
|
|
11266
|
+
onAmountChange,
|
|
11267
|
+
isAmountInputDisabled,
|
|
11268
|
+
onMaxClick,
|
|
11269
|
+
showMaxButton,
|
|
11270
|
+
formattedAmountUsd,
|
|
11271
|
+
destinationNetwork,
|
|
11272
|
+
destinationAddress,
|
|
11273
|
+
onDestinationAddressChange,
|
|
11274
|
+
txDetails,
|
|
11275
|
+
isBelowMinAmount,
|
|
11276
|
+
walletError,
|
|
11277
|
+
transferError,
|
|
11278
|
+
showWarning,
|
|
11279
|
+
warningLabel,
|
|
11280
|
+
isSubmitDisabled,
|
|
11281
|
+
onSubmit,
|
|
11282
|
+
submitLabel,
|
|
11283
|
+
onBack,
|
|
11284
|
+
labels,
|
|
11285
|
+
className
|
|
11286
|
+
}) {
|
|
11287
|
+
const [showTxDetails, setShowTxDetails] = useState(false);
|
|
11288
|
+
return /* @__PURE__ */ jsx(
|
|
11289
|
+
"div",
|
|
11290
|
+
{
|
|
11291
|
+
className: twMerge(
|
|
11292
|
+
"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",
|
|
11293
|
+
className
|
|
11294
|
+
),
|
|
11295
|
+
"data-test-id": "onchain-withdraw-form-view",
|
|
11296
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
|
|
11297
|
+
/* @__PURE__ */ jsx(
|
|
11298
|
+
SecondaryButton,
|
|
11299
|
+
{
|
|
11300
|
+
onClick: onBack,
|
|
11301
|
+
className: "mb-4 !border-0 max-w-[84px]",
|
|
11302
|
+
"aria-label": labels.backLabel,
|
|
11303
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
11304
|
+
/* @__PURE__ */ jsx(MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
|
|
11305
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
|
|
11306
|
+
] })
|
|
11307
|
+
}
|
|
11308
|
+
),
|
|
11309
|
+
/* @__PURE__ */ jsx(TextHeading, { variant: "h2", children: labels.title }),
|
|
11310
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
|
|
11311
|
+
/* @__PURE__ */ jsx(
|
|
11312
|
+
"div",
|
|
11313
|
+
{
|
|
11314
|
+
className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11315
|
+
"data-test-id": "onchain-withdraw-token-card",
|
|
11316
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
|
|
11317
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
|
|
11318
|
+
/* @__PURE__ */ jsxs(
|
|
11319
|
+
"button",
|
|
11320
|
+
{
|
|
11321
|
+
onClick: onTokenClick,
|
|
11322
|
+
disabled: isProcessing,
|
|
11323
|
+
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",
|
|
11324
|
+
"data-test-id": "onchain-withdraw-token-button",
|
|
11325
|
+
"aria-label": labels.tokenPlaceholder,
|
|
11326
|
+
children: [
|
|
11327
|
+
selectedToken ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
|
|
11328
|
+
/* @__PURE__ */ jsx(
|
|
11329
|
+
"img",
|
|
11330
|
+
{
|
|
11331
|
+
src: selectedToken.logoURI || "",
|
|
11332
|
+
alt: selectedToken.symbol,
|
|
11333
|
+
className: "w-6 h-6 rounded-full object-cover"
|
|
11334
|
+
}
|
|
11335
|
+
),
|
|
11336
|
+
/* @__PURE__ */ jsx("div", { className: "text-left", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
|
|
11337
|
+
] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }) }),
|
|
11338
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11339
|
+
]
|
|
11340
|
+
}
|
|
11341
|
+
),
|
|
11342
|
+
/* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
|
|
11343
|
+
labels.balancePrefix,
|
|
11344
|
+
": ",
|
|
11345
|
+
formattedBalance
|
|
11346
|
+
] }),
|
|
11347
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
|
|
11348
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
|
|
11349
|
+
chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxs(
|
|
11350
|
+
"button",
|
|
11351
|
+
{
|
|
11352
|
+
disabled: true,
|
|
11353
|
+
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",
|
|
11354
|
+
"data-test-id": "onchain-withdraw-chain-disabled",
|
|
11355
|
+
children: [
|
|
11356
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
|
|
11357
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11358
|
+
]
|
|
11359
|
+
}
|
|
11360
|
+
) : chainCount > 1 ? /* @__PURE__ */ jsxs(
|
|
11361
|
+
"button",
|
|
11362
|
+
{
|
|
11363
|
+
onClick: onNetworkClick,
|
|
11364
|
+
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",
|
|
11365
|
+
"data-test-id": "onchain-withdraw-chain-dropdown",
|
|
11366
|
+
"aria-label": labels.chainPlaceholder,
|
|
11367
|
+
children: [
|
|
11368
|
+
/* @__PURE__ */ jsx(
|
|
11369
|
+
"img",
|
|
11370
|
+
{
|
|
11371
|
+
src: selectedChain.iconUrl,
|
|
11372
|
+
alt: selectedChain.name,
|
|
11373
|
+
className: "w-3 h-3 rounded-full object-cover"
|
|
11374
|
+
}
|
|
11375
|
+
),
|
|
11376
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
|
|
11377
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
|
|
11378
|
+
]
|
|
11379
|
+
}
|
|
11380
|
+
) : /* @__PURE__ */ jsxs(
|
|
11381
|
+
"div",
|
|
11382
|
+
{
|
|
11383
|
+
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)]",
|
|
11384
|
+
"data-test-id": "onchain-withdraw-chain-static",
|
|
11385
|
+
children: [
|
|
11386
|
+
/* @__PURE__ */ jsx(
|
|
11387
|
+
"img",
|
|
11388
|
+
{
|
|
11389
|
+
src: selectedChain.iconUrl,
|
|
11390
|
+
alt: selectedChain.name,
|
|
11391
|
+
className: "w-3 h-3 rounded-full object-cover"
|
|
11392
|
+
}
|
|
11393
|
+
),
|
|
11394
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
|
|
11395
|
+
]
|
|
11396
|
+
}
|
|
11397
|
+
)
|
|
11398
|
+
] })
|
|
11399
|
+
] }),
|
|
11400
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
|
|
11401
|
+
/* @__PURE__ */ jsx(
|
|
11402
|
+
Input2,
|
|
11403
|
+
{
|
|
11404
|
+
id: "withdraw-amount-input",
|
|
11405
|
+
placeholder: "0.00",
|
|
11406
|
+
inputMode: "decimal",
|
|
11407
|
+
autoComplete: "off",
|
|
11408
|
+
"aria-label": "Amount to withdraw",
|
|
11409
|
+
min: "0",
|
|
11410
|
+
step: "any",
|
|
11411
|
+
type: "number",
|
|
11412
|
+
value: amount,
|
|
11413
|
+
onChange: (e) => onAmountChange(e.target.value),
|
|
11414
|
+
onWheel: (event) => {
|
|
11415
|
+
event.currentTarget.blur();
|
|
11416
|
+
},
|
|
11417
|
+
disabled: isAmountInputDisabled,
|
|
11418
|
+
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",
|
|
11419
|
+
"data-test-id": "onchain-withdraw-amount-input"
|
|
11420
|
+
}
|
|
11421
|
+
),
|
|
11422
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
|
|
11423
|
+
showMaxButton && /* @__PURE__ */ jsx(
|
|
11424
|
+
"button",
|
|
11425
|
+
{
|
|
11426
|
+
onClick: onMaxClick,
|
|
11427
|
+
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",
|
|
11428
|
+
"data-test-id": "onchain-withdraw-max-button",
|
|
11429
|
+
"aria-label": "Max",
|
|
11430
|
+
children: "Max"
|
|
11431
|
+
}
|
|
11432
|
+
)
|
|
11433
|
+
] })
|
|
11434
|
+
] })
|
|
11435
|
+
}
|
|
11436
|
+
),
|
|
11437
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
|
|
11438
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
|
|
11439
|
+
/* @__PURE__ */ jsx(
|
|
11440
|
+
"div",
|
|
11441
|
+
{
|
|
11442
|
+
className: twMerge(
|
|
11443
|
+
"flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
|
|
11444
|
+
!destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
|
|
11445
|
+
),
|
|
11446
|
+
children: destinationNetwork ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11447
|
+
/* @__PURE__ */ jsx(
|
|
11448
|
+
"img",
|
|
11449
|
+
{
|
|
11450
|
+
src: destinationNetwork.iconUrl,
|
|
11451
|
+
alt: destinationNetwork.name,
|
|
11452
|
+
className: "w-5 h-5 rounded-full object-cover"
|
|
11453
|
+
}
|
|
11454
|
+
),
|
|
11455
|
+
/* @__PURE__ */ jsx("span", { children: destinationNetwork.name }),
|
|
11456
|
+
/* @__PURE__ */ jsx("span", { className: "ml-auto text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkSameHint })
|
|
11457
|
+
] }) : /* @__PURE__ */ jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
|
|
11458
|
+
}
|
|
11459
|
+
)
|
|
11460
|
+
] }),
|
|
11461
|
+
/* @__PURE__ */ jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsx(
|
|
11462
|
+
Input2,
|
|
11463
|
+
{
|
|
11464
|
+
type: "text",
|
|
11465
|
+
label: labels.destinationAddressLabel,
|
|
11466
|
+
placeholder: labels.destinationAddressPlaceholder,
|
|
11467
|
+
value: destinationAddress,
|
|
11468
|
+
onChange: (e) => onDestinationAddressChange(e.target.value),
|
|
11469
|
+
disabled: isProcessing,
|
|
11470
|
+
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"
|
|
11471
|
+
}
|
|
11472
|
+
) }),
|
|
11473
|
+
/* @__PURE__ */ jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
|
|
11474
|
+
isBelowMinAmount && /* @__PURE__ */ jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
|
|
11475
|
+
txDetails !== null && /* @__PURE__ */ jsxs(
|
|
11476
|
+
"div",
|
|
11477
|
+
{
|
|
11478
|
+
className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11479
|
+
"data-test-id": "onchain-withdraw-tx-details",
|
|
11480
|
+
children: [
|
|
11481
|
+
/* @__PURE__ */ jsxs(
|
|
11482
|
+
"button",
|
|
11483
|
+
{
|
|
11484
|
+
onClick: () => setShowTxDetails((v) => !v),
|
|
11485
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer",
|
|
11486
|
+
"aria-label": labels.txDetailsTitle,
|
|
11487
|
+
"data-test-id": "onchain-withdraw-tx-details-toggle",
|
|
11488
|
+
children: [
|
|
11489
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
|
|
11490
|
+
/* @__PURE__ */ jsx(MdOutlineExpandMore, { className: twMerge("transition-transform", showTxDetails && "rotate-180") })
|
|
11491
|
+
]
|
|
11492
|
+
}
|
|
11493
|
+
),
|
|
11494
|
+
showTxDetails && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
|
|
11495
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
|
|
11496
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
|
|
11497
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
|
|
11498
|
+
] }),
|
|
11499
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
|
|
11500
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
|
|
11501
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
|
|
11502
|
+
] }),
|
|
11503
|
+
/* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
|
|
11504
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
|
|
11505
|
+
/* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
|
|
11506
|
+
] })
|
|
11507
|
+
] })
|
|
11508
|
+
]
|
|
11509
|
+
}
|
|
11510
|
+
),
|
|
11511
|
+
walletError && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: walletError, variant: "error" }) }),
|
|
11512
|
+
transferError && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
|
|
11513
|
+
showWarning && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
|
|
11514
|
+
/* @__PURE__ */ jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11515
|
+
submitLabel,
|
|
11516
|
+
" ",
|
|
11517
|
+
/* @__PURE__ */ jsx(LoadingDots, {})
|
|
11518
|
+
] }) : submitLabel })
|
|
11519
|
+
] })
|
|
11520
|
+
}
|
|
11521
|
+
);
|
|
11522
|
+
}
|
|
11523
|
+
function OnchainWithdrawChainSelectorView({
|
|
11524
|
+
actionSheetId,
|
|
11525
|
+
isOpen,
|
|
11526
|
+
currentActionSheetId,
|
|
11527
|
+
onClose,
|
|
11528
|
+
chains,
|
|
11529
|
+
onChainClick,
|
|
11530
|
+
title,
|
|
11531
|
+
closeAriaLabel = "Close"
|
|
11532
|
+
}) {
|
|
11533
|
+
return /* @__PURE__ */ jsx(
|
|
11534
|
+
ActionSheet,
|
|
11535
|
+
{
|
|
11536
|
+
id: actionSheetId,
|
|
11537
|
+
isOpen,
|
|
11538
|
+
currentActionSheetId,
|
|
11539
|
+
onClose,
|
|
11540
|
+
height: "auto",
|
|
11541
|
+
position: "bottom",
|
|
11542
|
+
closeOnBackdropClick: true,
|
|
11543
|
+
children: /* @__PURE__ */ jsx(
|
|
11544
|
+
"div",
|
|
11545
|
+
{
|
|
11546
|
+
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",
|
|
11547
|
+
"data-test-id": "onchain-withdraw-chain-selector",
|
|
11548
|
+
children: /* @__PURE__ */ 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: [
|
|
11549
|
+
/* @__PURE__ */ 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__ */ jsx(
|
|
11550
|
+
"button",
|
|
11551
|
+
{
|
|
11552
|
+
onClick: onClose,
|
|
11553
|
+
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",
|
|
11554
|
+
"aria-label": closeAriaLabel,
|
|
11555
|
+
"data-test-id": "onchain-withdraw-chain-selector-close",
|
|
11556
|
+
children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
|
|
11557
|
+
}
|
|
11558
|
+
) }),
|
|
11559
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col flex-1 min-h-0", children: [
|
|
11560
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-none p-6 pb-0", children: [
|
|
11561
|
+
/* @__PURE__ */ jsx(
|
|
11562
|
+
"div",
|
|
11563
|
+
{
|
|
11564
|
+
className: "text-h5 text-[color:var(--deframe-widget-color-text-secondary)] font-bold",
|
|
11565
|
+
"data-test-id": "onchain-withdraw-chain-selector-title",
|
|
11566
|
+
children: title
|
|
11567
|
+
}
|
|
11568
|
+
),
|
|
11569
|
+
/* @__PURE__ */ jsx("br", {})
|
|
11570
|
+
] }),
|
|
11571
|
+
/* @__PURE__ */ 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__ */ jsxs(
|
|
11572
|
+
ListItem,
|
|
11573
|
+
{
|
|
11574
|
+
onClick: () => onChainClick(chain.chainId),
|
|
11575
|
+
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`,
|
|
11576
|
+
"data-test-id": `onchain-withdraw-chain-${chain.chainId}`,
|
|
11577
|
+
children: [
|
|
11578
|
+
/* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
|
|
11579
|
+
"img",
|
|
11580
|
+
{
|
|
11581
|
+
src: chain.iconUrl,
|
|
11582
|
+
alt: chain.name,
|
|
11583
|
+
className: "w-8 h-8 rounded-full object-cover"
|
|
11584
|
+
}
|
|
11585
|
+
) }),
|
|
11586
|
+
/* @__PURE__ */ jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-medium", children: chain.name }) }),
|
|
11587
|
+
/* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chain.formattedBalance }) })
|
|
11588
|
+
]
|
|
11589
|
+
},
|
|
11590
|
+
chain.chainId
|
|
11591
|
+
)) })
|
|
11592
|
+
] })
|
|
11593
|
+
] })
|
|
11594
|
+
}
|
|
11595
|
+
)
|
|
11596
|
+
}
|
|
11597
|
+
);
|
|
11598
|
+
}
|
|
11599
|
+
function WithdrawSuccessIcon() {
|
|
11600
|
+
return /* @__PURE__ */ jsx(
|
|
11601
|
+
"div",
|
|
11602
|
+
{
|
|
11603
|
+
className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
|
|
11604
|
+
"data-test-id": "withdraw-success-icon",
|
|
11605
|
+
children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
11606
|
+
"path",
|
|
11607
|
+
{
|
|
11608
|
+
d: "M10 15V5M10 5L6 9M10 5L14 9",
|
|
11609
|
+
stroke: "#121212",
|
|
11610
|
+
strokeWidth: "2",
|
|
11611
|
+
strokeLinecap: "round",
|
|
11612
|
+
strokeLinejoin: "round"
|
|
11613
|
+
}
|
|
11614
|
+
) })
|
|
11615
|
+
}
|
|
11616
|
+
);
|
|
11617
|
+
}
|
|
11618
|
+
function OnchainWithdrawSuccessView({
|
|
11619
|
+
tokenSymbol,
|
|
11620
|
+
tokenLogoURI,
|
|
11621
|
+
formattedAmount,
|
|
11622
|
+
chainName,
|
|
11623
|
+
chainIconUrl,
|
|
11624
|
+
destinationAddress,
|
|
11625
|
+
blockchainCost,
|
|
11626
|
+
txHash,
|
|
11627
|
+
blockExplorerUrl,
|
|
11628
|
+
onViewHistory,
|
|
11629
|
+
onClose,
|
|
11630
|
+
labels,
|
|
11631
|
+
className,
|
|
11632
|
+
icon
|
|
11633
|
+
}) {
|
|
11634
|
+
const [showDetails, setShowDetails] = useState(true);
|
|
11635
|
+
return /* @__PURE__ */ jsxs(
|
|
11636
|
+
"div",
|
|
11637
|
+
{
|
|
11638
|
+
className: twMerge(
|
|
11639
|
+
"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",
|
|
11640
|
+
className
|
|
11641
|
+
),
|
|
11642
|
+
"data-test-id": "onchain-withdraw-success-view",
|
|
11643
|
+
children: [
|
|
11644
|
+
onClose && /* @__PURE__ */ jsx(
|
|
11645
|
+
"button",
|
|
11646
|
+
{
|
|
11647
|
+
onClick: onClose,
|
|
11648
|
+
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",
|
|
11649
|
+
"aria-label": labels.closeAriaLabel,
|
|
11650
|
+
"data-test-id": "onchain-withdraw-success-close",
|
|
11651
|
+
children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
|
|
11652
|
+
}
|
|
11653
|
+
),
|
|
11654
|
+
/* @__PURE__ */ jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11655
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11656
|
+
icon != null ? icon : /* @__PURE__ */ jsx(WithdrawSuccessIcon, {}),
|
|
11657
|
+
/* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11658
|
+
/* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", children: labels.subtitle })
|
|
11659
|
+
] }),
|
|
11660
|
+
/* @__PURE__ */ jsx(
|
|
11661
|
+
"div",
|
|
11662
|
+
{
|
|
11663
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11664
|
+
"data-test-id": "onchain-withdraw-success-summary",
|
|
11665
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
|
|
11666
|
+
/* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
|
|
11667
|
+
/* @__PURE__ */ 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__ */ jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
|
|
11668
|
+
/* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
|
|
11669
|
+
] }),
|
|
11670
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
11671
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
|
|
11672
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
|
|
11673
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
|
|
11674
|
+
formattedAmount,
|
|
11675
|
+
" ",
|
|
11676
|
+
tokenSymbol
|
|
11677
|
+
] })
|
|
11678
|
+
] }),
|
|
11679
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
|
|
11680
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
|
|
11681
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
|
|
11682
|
+
] })
|
|
11683
|
+
] })
|
|
11684
|
+
] })
|
|
11685
|
+
}
|
|
11686
|
+
),
|
|
11687
|
+
/* @__PURE__ */ jsxs(
|
|
11688
|
+
"div",
|
|
11689
|
+
{
|
|
11690
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11691
|
+
"data-test-id": "onchain-withdraw-success-details",
|
|
11692
|
+
children: [
|
|
11693
|
+
/* @__PURE__ */ jsxs(
|
|
11694
|
+
"button",
|
|
11695
|
+
{
|
|
11696
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11697
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11698
|
+
"aria-label": labels.detailsTitle,
|
|
11699
|
+
"data-test-id": "onchain-withdraw-success-details-toggle",
|
|
11700
|
+
children: [
|
|
11701
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11702
|
+
/* @__PURE__ */ jsx(
|
|
11703
|
+
MdOutlineExpandMore,
|
|
11704
|
+
{
|
|
11705
|
+
className: twMerge(
|
|
11706
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11707
|
+
showDetails && "rotate-180"
|
|
11708
|
+
)
|
|
11709
|
+
}
|
|
11710
|
+
)
|
|
11711
|
+
]
|
|
11712
|
+
}
|
|
11713
|
+
),
|
|
11714
|
+
showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
|
|
11715
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11716
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
|
|
11717
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11718
|
+
formattedAmount,
|
|
11719
|
+
" ",
|
|
11720
|
+
tokenSymbol
|
|
11721
|
+
] })
|
|
11722
|
+
] }),
|
|
11723
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11724
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
|
|
11725
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
|
|
11726
|
+
] }),
|
|
11727
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11728
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
|
|
11729
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11730
|
+
formattedAmount,
|
|
11731
|
+
" ",
|
|
11732
|
+
tokenSymbol
|
|
11733
|
+
] })
|
|
11734
|
+
] }),
|
|
11735
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11736
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.transactionLabel }),
|
|
11737
|
+
/* @__PURE__ */ jsx(
|
|
11738
|
+
"a",
|
|
11739
|
+
{
|
|
11740
|
+
href: `${blockExplorerUrl}/tx/${txHash}`,
|
|
11741
|
+
target: "_blank",
|
|
11742
|
+
rel: "noopener noreferrer",
|
|
11743
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
|
|
11744
|
+
"data-test-id": "onchain-withdraw-success-explorer",
|
|
11745
|
+
children: labels.viewExplorerLabel
|
|
11746
|
+
}
|
|
11747
|
+
)
|
|
11748
|
+
] })
|
|
11749
|
+
] })
|
|
11750
|
+
]
|
|
11751
|
+
}
|
|
11752
|
+
),
|
|
11753
|
+
/* @__PURE__ */ jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-withdraw-success-action", children: labels.viewHistoryLabel }) })
|
|
11754
|
+
] }) })
|
|
11755
|
+
]
|
|
11756
|
+
}
|
|
11757
|
+
);
|
|
11758
|
+
}
|
|
11759
|
+
function WithdrawFailedIcon() {
|
|
11760
|
+
return /* @__PURE__ */ jsx(
|
|
11761
|
+
"div",
|
|
11762
|
+
{
|
|
11763
|
+
className: "w-20 h-20 rounded-full flex items-center justify-center bg-[var(--deframe-widget-color-state-error)]",
|
|
11764
|
+
"data-test-id": "withdraw-failed-icon",
|
|
11765
|
+
children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
11766
|
+
"path",
|
|
11767
|
+
{
|
|
11768
|
+
d: "M18 6L6 18M6 6L18 18",
|
|
11769
|
+
stroke: "#121212",
|
|
11770
|
+
strokeWidth: "2",
|
|
11771
|
+
strokeLinecap: "round",
|
|
11772
|
+
strokeLinejoin: "round"
|
|
11773
|
+
}
|
|
11774
|
+
) })
|
|
11775
|
+
}
|
|
11776
|
+
);
|
|
11777
|
+
}
|
|
11778
|
+
function OnchainWithdrawFailedView({
|
|
11779
|
+
tokenSymbol,
|
|
11780
|
+
tokenLogoURI,
|
|
11781
|
+
formattedAmount,
|
|
11782
|
+
chainName,
|
|
11783
|
+
chainIconUrl,
|
|
11784
|
+
destinationAddress,
|
|
11785
|
+
blockchainCost,
|
|
11786
|
+
errorMessage,
|
|
11787
|
+
onCancel,
|
|
11788
|
+
onTryAgain,
|
|
11789
|
+
labels,
|
|
11790
|
+
className,
|
|
11791
|
+
icon
|
|
11792
|
+
}) {
|
|
11793
|
+
const [showDetails, setShowDetails] = useState(true);
|
|
11794
|
+
return /* @__PURE__ */ jsxs(
|
|
11795
|
+
"div",
|
|
11796
|
+
{
|
|
11797
|
+
className: twMerge(
|
|
11798
|
+
"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",
|
|
11799
|
+
className
|
|
11800
|
+
),
|
|
11801
|
+
"data-test-id": "onchain-withdraw-failed-view",
|
|
11802
|
+
children: [
|
|
11803
|
+
/* @__PURE__ */ jsx(
|
|
11804
|
+
"button",
|
|
11805
|
+
{
|
|
11806
|
+
onClick: onCancel,
|
|
11807
|
+
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",
|
|
11808
|
+
"aria-label": labels.closeAriaLabel,
|
|
11809
|
+
"data-test-id": "onchain-withdraw-failed-close",
|
|
11810
|
+
children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
|
|
11811
|
+
}
|
|
11812
|
+
),
|
|
11813
|
+
/* @__PURE__ */ jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
|
|
11814
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11815
|
+
icon != null ? icon : /* @__PURE__ */ jsx(WithdrawFailedIcon, {}),
|
|
11816
|
+
/* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
|
|
11817
|
+
/* @__PURE__ */ 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 })
|
|
11818
|
+
] }),
|
|
11819
|
+
/* @__PURE__ */ jsx(
|
|
11820
|
+
"div",
|
|
11821
|
+
{
|
|
11822
|
+
className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11823
|
+
"data-test-id": "onchain-withdraw-failed-summary",
|
|
11824
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
|
|
11825
|
+
/* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
|
|
11826
|
+
/* @__PURE__ */ 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__ */ jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
|
|
11827
|
+
/* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
|
|
11828
|
+
] }),
|
|
11829
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
11830
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
|
|
11831
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
|
|
11832
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
|
|
11833
|
+
formattedAmount,
|
|
11834
|
+
" ",
|
|
11835
|
+
tokenSymbol
|
|
11836
|
+
] })
|
|
11837
|
+
] }),
|
|
11838
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
|
|
11839
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
|
|
11840
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
|
|
11841
|
+
] })
|
|
11842
|
+
] })
|
|
11843
|
+
] })
|
|
11844
|
+
}
|
|
11845
|
+
),
|
|
11846
|
+
/* @__PURE__ */ jsxs(
|
|
11847
|
+
"div",
|
|
11848
|
+
{
|
|
11849
|
+
className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
|
|
11850
|
+
"data-test-id": "onchain-withdraw-failed-details",
|
|
11851
|
+
children: [
|
|
11852
|
+
/* @__PURE__ */ jsxs(
|
|
11853
|
+
"button",
|
|
11854
|
+
{
|
|
11855
|
+
onClick: () => setShowDetails(!showDetails),
|
|
11856
|
+
className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
|
|
11857
|
+
"aria-label": labels.detailsTitle,
|
|
11858
|
+
"data-test-id": "onchain-withdraw-failed-details-toggle",
|
|
11859
|
+
children: [
|
|
11860
|
+
/* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
|
|
11861
|
+
/* @__PURE__ */ jsx(
|
|
11862
|
+
MdOutlineExpandMore,
|
|
11863
|
+
{
|
|
11864
|
+
className: twMerge(
|
|
11865
|
+
"transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
11866
|
+
showDetails && "rotate-180"
|
|
11867
|
+
)
|
|
11868
|
+
}
|
|
11869
|
+
)
|
|
11870
|
+
]
|
|
11871
|
+
}
|
|
11872
|
+
),
|
|
11873
|
+
showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
|
|
11874
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11875
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
|
|
11876
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11877
|
+
formattedAmount,
|
|
11878
|
+
" ",
|
|
11879
|
+
tokenSymbol
|
|
11880
|
+
] })
|
|
11881
|
+
] }),
|
|
11882
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
|
|
11883
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
|
|
11884
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
|
|
11885
|
+
] }),
|
|
11886
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
|
|
11887
|
+
/* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
|
|
11888
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
|
|
11889
|
+
formattedAmount,
|
|
11890
|
+
" ",
|
|
11891
|
+
tokenSymbol
|
|
11892
|
+
] })
|
|
11893
|
+
] })
|
|
11894
|
+
] })
|
|
11895
|
+
]
|
|
11896
|
+
}
|
|
11897
|
+
),
|
|
11898
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full mt-8 flex flex-col gap-3", children: [
|
|
11899
|
+
/* @__PURE__ */ jsx(SecondaryButton, { onClick: onCancel, "data-test-id": "onchain-withdraw-failed-cancel", children: labels.cancelLabel }),
|
|
11900
|
+
/* @__PURE__ */ jsx(PrimaryButton, { onClick: onTryAgain, "data-test-id": "onchain-withdraw-failed-retry", children: labels.tryAgainLabel })
|
|
11901
|
+
] })
|
|
11902
|
+
] }) })
|
|
11903
|
+
]
|
|
11904
|
+
}
|
|
11905
|
+
);
|
|
11906
|
+
}
|
|
10811
11907
|
var DashboardCard = ({ children, className }) => {
|
|
10812
11908
|
return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
|
|
10813
11909
|
};
|
|
@@ -12093,6 +13189,6 @@ var DashboardViewSimple = ({
|
|
|
12093
13189
|
);
|
|
12094
13190
|
};
|
|
12095
13191
|
|
|
12096
|
-
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, isDustValue };
|
|
13192
|
+
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OnchainDepositFormView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedView, OnchainWithdrawFormView, OnchainWithdrawSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WithdrawFailedIcon, WithdrawSuccessIcon, isDustValue, truncateAddress };
|
|
12097
13193
|
//# sourceMappingURL=index.mjs.map
|
|
12098
13194
|
//# sourceMappingURL=index.mjs.map
|