@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.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 tokenPriceUSD = Number(balance == null ? void 0 : balance.priceUSD) || 0;
4365
- const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, tokenPriceUSD, 2) : "0";
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("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
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
- return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
6269
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
6270
- /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
6271
- /* @__PURE__ */ jsxRuntime.jsx("br", {}),
6272
- /* @__PURE__ */ jsxRuntime.jsx(
6273
- SearchInput,
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
- value: searchValue,
6276
- onChange: setSearchValue,
6277
- placeholder: labels.searchPlaceholder,
6278
- autoFocus
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
- /* @__PURE__ */ jsxRuntime.jsxs(
6283
- "div",
6284
- {
6285
- "data-testid": "choose-a-network-list",
6286
- 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",
6287
- children: [
6288
- displayedChains.map((chain) => /* @__PURE__ */ jsxRuntime.jsxs(
6289
- ListItem,
6290
- {
6291
- className: "w-full flex-shrink-0",
6292
- onClick: () => onChainClick(chain.chainId),
6293
- "data-testid": `choose-network-item-${chain.chainId}`,
6294
- "data-chain-id": chain.chainId,
6295
- children: [
6296
- /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
6297
- "img",
6298
- {
6299
- src: chain.imageUrl,
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.jsx(
7046
- "span",
7047
- {
7048
- "data-test-id": "sheet-title",
7049
- 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)]",
7050
- children: labels.title
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.jsx(
7154
- "span",
7155
- {
7156
- "data-test-id": "modal-title",
7157
- 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)]",
7158
- children: labels.title
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
- onTokenClick,
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 = !!onTokenClick;
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: onTokenClick,
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