@deframe-sdk/components 0.1.28 → 0.1.30

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(
@@ -8275,6 +8310,7 @@ var EarnInvestmentDetailsView = (props) => {
8275
8310
  var EarnTokenSelectorView = ({
8276
8311
  selectedToken,
8277
8312
  onTokenClick,
8313
+ onNetworkAndAssetClick,
8278
8314
  onNetworkClick,
8279
8315
  isLoading,
8280
8316
  selectTokenLabel,
@@ -8289,7 +8325,7 @@ var EarnTokenSelectorView = ({
8289
8325
  "button",
8290
8326
  {
8291
8327
  type: "button",
8292
- onClick: onTokenClick,
8328
+ onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
8293
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",
8294
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: [
8295
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: [
@@ -8307,7 +8343,7 @@ var EarnTokenSelectorView = ({
8307
8343
  ] })
8308
8344
  }
8309
8345
  ) }),
8310
- /* @__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: [
8311
8347
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
8312
8348
  /* @__PURE__ */ jsxRuntime.jsxs(
8313
8349
  "button",
@@ -8370,6 +8406,7 @@ var EarnPercentageButtonsView = ({
8370
8406
  var EarnWithdrawTokenSelectorView = ({
8371
8407
  selectedToken,
8372
8408
  onTokenClick,
8409
+ onNetworkAndAssetClick,
8373
8410
  onNetworkClick,
8374
8411
  selectTokenLabel,
8375
8412
  chainLabel,
@@ -8383,7 +8420,7 @@ var EarnWithdrawTokenSelectorView = ({
8383
8420
  "button",
8384
8421
  {
8385
8422
  type: "button",
8386
- onClick: onTokenClick,
8423
+ onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
8387
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",
8388
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: [
8389
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: [
@@ -8401,7 +8438,7 @@ var EarnWithdrawTokenSelectorView = ({
8401
8438
  ] })
8402
8439
  }
8403
8440
  ) }),
8404
- /* @__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: [
8405
8442
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
8406
8443
  /* @__PURE__ */ jsxRuntime.jsxs(
8407
8444
  "button",
@@ -8524,6 +8561,7 @@ var EarnDepositFormView = ({
8524
8561
  // Token selector
8525
8562
  selectedToken,
8526
8563
  onTokenClick,
8564
+ onNetworkAndAssetClick,
8527
8565
  isLoadingToken,
8528
8566
  selectTokenLabel,
8529
8567
  // Chain selector
@@ -8581,6 +8619,7 @@ var EarnDepositFormView = ({
8581
8619
  {
8582
8620
  selectedToken,
8583
8621
  onTokenClick,
8622
+ onNetworkAndAssetClick,
8584
8623
  isLoading: isLoadingToken,
8585
8624
  selectTokenLabel,
8586
8625
  chainLabel,
@@ -8655,14 +8694,14 @@ var EarnDepositFormView = ({
8655
8694
  ] });
8656
8695
  var EarnTokenSelectorSimpleView = ({
8657
8696
  selectedToken,
8658
- onTokenClick,
8697
+ onNetworkAndAssetClick,
8659
8698
  isLoading,
8660
8699
  selectTokenLabel,
8661
8700
  chainLabel,
8662
8701
  chainImage
8663
8702
  }) => {
8664
8703
  const hasToken = selectedToken != null;
8665
- const isInteractive = !!onTokenClick;
8704
+ const isInteractive = !!onNetworkAndAssetClick;
8666
8705
  const baseClasses = [
8667
8706
  "inline-flex items-center gap-[10px]",
8668
8707
  "h-[54px] px-[10px]",
@@ -8686,7 +8725,7 @@ var EarnTokenSelectorSimpleView = ({
8686
8725
  type: "button",
8687
8726
  "data-slot": "token-selector-simple",
8688
8727
  "data-test-id": "earn-token-selector-simple-view",
8689
- onClick: onTokenClick,
8728
+ onClick: onNetworkAndAssetClick,
8690
8729
  disabled: !isInteractive,
8691
8730
  "aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
8692
8731
  className: selectorClasses,
@@ -9012,6 +9051,7 @@ var EarnDepositFormViewSimple = ({
9012
9051
  // Token selector
9013
9052
  selectedToken,
9014
9053
  onTokenClick,
9054
+ onNetworkAndAssetClick,
9015
9055
  isLoadingToken,
9016
9056
  selectTokenLabel,
9017
9057
  // Chain selector
@@ -9154,6 +9194,7 @@ var EarnDepositFormViewSimple = ({
9154
9194
  {
9155
9195
  selectedToken,
9156
9196
  onTokenClick,
9197
+ onNetworkAndAssetClick,
9157
9198
  isLoading: isLoadingToken,
9158
9199
  selectTokenLabel,
9159
9200
  chainLabel,
@@ -9336,6 +9377,7 @@ var EarnWithdrawFormView = ({
9336
9377
  // Token selector
9337
9378
  selectedToken,
9338
9379
  onTokenClick,
9380
+ onNetworkAndAssetClick,
9339
9381
  selectTokenLabel,
9340
9382
  // Chain selector
9341
9383
  chainLabel,
@@ -9396,6 +9438,7 @@ var EarnWithdrawFormView = ({
9396
9438
  {
9397
9439
  selectedToken,
9398
9440
  onTokenClick,
9441
+ onNetworkAndAssetClick,
9399
9442
  selectTokenLabel,
9400
9443
  chainLabel,
9401
9444
  chainImage,
@@ -9473,6 +9516,7 @@ var EarnWithdrawFormViewSimple = ({
9473
9516
  // Token selector
9474
9517
  selectedToken,
9475
9518
  onTokenClick,
9519
+ onNetworkAndAssetClick,
9476
9520
  selectTokenLabel,
9477
9521
  // Chain selector
9478
9522
  chainLabel,
@@ -9608,6 +9652,7 @@ var EarnWithdrawFormViewSimple = ({
9608
9652
  {
9609
9653
  selectedToken,
9610
9654
  onTokenClick,
9655
+ onNetworkAndAssetClick,
9611
9656
  isLoading: false,
9612
9657
  selectTokenLabel,
9613
9658
  chainLabel,
@@ -10849,6 +10894,1995 @@ var EarnWithdrawFailedSimpleView = ({
10849
10894
  }
10850
10895
  ) });
10851
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
+ var OnchainDepositFormSimpleView = ({
11088
+ // Token selector
11089
+ selectedToken,
11090
+ onTokenClick,
11091
+ selectedChain,
11092
+ // Address
11093
+ depositAddress,
11094
+ onAddressCopy,
11095
+ // Navigation
11096
+ onBack,
11097
+ onClose,
11098
+ // Labels
11099
+ labels,
11100
+ // Tab switcher
11101
+ activeTab,
11102
+ cryptoHref,
11103
+ pixHref
11104
+ }) => {
11105
+ var _a;
11106
+ const hasToken = selectedToken != null;
11107
+ const showAddressSection = hasToken && !!depositAddress;
11108
+ const panelBaseClasses = [
11109
+ "relative flex flex-col overflow-hidden w-[420px]",
11110
+ "rounded-[var(--deframe-widget-size-radius-md)]",
11111
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11112
+ "font-[var(--deframe-widget-font-family)]"
11113
+ ].join(" ");
11114
+ const headerBaseClasses = [
11115
+ "flex items-center",
11116
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11117
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11118
+ ].join(" ");
11119
+ const titleBaseClasses = [
11120
+ "flex-1",
11121
+ "text-[15px]",
11122
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
11123
+ "text-[color:var(--deframe-widget-color-text-primary)]"
11124
+ ].join(" ");
11125
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
11126
+ const bodyBaseClasses = [
11127
+ "flex flex-col",
11128
+ "gap-[var(--deframe-widget-size-gap-md)]",
11129
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11130
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11131
+ ].join(" ");
11132
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11133
+ "div",
11134
+ {
11135
+ "data-slot": "onchain-deposit-simple-panel",
11136
+ "data-test-id": "onchain-deposit-form-simple-view",
11137
+ className: panelBaseClasses,
11138
+ children: [
11139
+ /* @__PURE__ */ jsxRuntime.jsxs(
11140
+ "header",
11141
+ {
11142
+ "data-slot": "onchain-deposit-simple-header",
11143
+ "data-test-id": "onchain-deposit-form-simple-view-header",
11144
+ className: headerBaseClasses,
11145
+ children: [
11146
+ /* @__PURE__ */ jsxRuntime.jsx(
11147
+ "span",
11148
+ {
11149
+ "data-slot": "onchain-deposit-simple-title",
11150
+ "data-test-id": "onchain-deposit-form-simple-view-title",
11151
+ className: titleBaseClasses,
11152
+ children: labels.title
11153
+ }
11154
+ ),
11155
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
11156
+ CloseButton_default,
11157
+ {
11158
+ onClick: onClose,
11159
+ ariaLabel: "Close deposit panel",
11160
+ testId: "onchain-deposit-form-simple-view-close"
11161
+ }
11162
+ )
11163
+ ]
11164
+ }
11165
+ ),
11166
+ /* @__PURE__ */ jsxRuntime.jsx(
11167
+ "div",
11168
+ {
11169
+ "data-slot": "onchain-deposit-simple-divider",
11170
+ "data-test-id": "onchain-deposit-form-simple-view-divider",
11171
+ className: dividerClasses
11172
+ }
11173
+ ),
11174
+ /* @__PURE__ */ jsxRuntime.jsx(
11175
+ "nav",
11176
+ {
11177
+ "data-slot": "onchain-deposit-simple-tabs",
11178
+ "data-test-id": "onchain-deposit-form-simple-view-tabs",
11179
+ className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
11180
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11181
+ "div",
11182
+ {
11183
+ role: "tablist",
11184
+ "data-test-id": "onchain-deposit-form-simple-view-tablist",
11185
+ className: tailwindMerge.twMerge(
11186
+ "inline-flex w-full rounded-[var(--deframe-widget-size-radius-md)]",
11187
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
11188
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11189
+ "p-[3px] gap-[2px]"
11190
+ ),
11191
+ children: [
11192
+ /* @__PURE__ */ jsxRuntime.jsx(
11193
+ "a",
11194
+ {
11195
+ href: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
11196
+ role: "tab",
11197
+ "aria-selected": activeTab === "crypto",
11198
+ "aria-current": activeTab === "crypto" ? "page" : void 0,
11199
+ "aria-label": "Cripto",
11200
+ "data-test-id": "onchain-deposit-form-simple-view-tab-crypto",
11201
+ className: tailwindMerge.twMerge(
11202
+ "inline-flex flex-1 items-center justify-center",
11203
+ "gap-[var(--deframe-widget-size-gap-xs)]",
11204
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11205
+ "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
11206
+ "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
11207
+ "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
11208
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
11209
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
11210
+ activeTab === "crypto" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
11211
+ ),
11212
+ children: "Cripto"
11213
+ }
11214
+ ),
11215
+ /* @__PURE__ */ jsxRuntime.jsx(
11216
+ "a",
11217
+ {
11218
+ href: pixHref != null ? pixHref : "/dashboard/deposit/onramp",
11219
+ role: "tab",
11220
+ "aria-selected": activeTab === "pix",
11221
+ "aria-current": activeTab === "pix" ? "page" : void 0,
11222
+ "aria-label": "PIX",
11223
+ "data-test-id": "onchain-deposit-form-simple-view-tab-pix",
11224
+ className: tailwindMerge.twMerge(
11225
+ "inline-flex flex-1 items-center justify-center",
11226
+ "gap-[var(--deframe-widget-size-gap-xs)]",
11227
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11228
+ "border-[length:var(--deframe-widget-size-border-sm)] border-solid border-transparent",
11229
+ "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
11230
+ "font-[var(--deframe-widget-font-family)] [font-weight:var(--deframe-widget-font-weight-medium)]",
11231
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
11232
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
11233
+ activeTab === "pix" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
11234
+ ),
11235
+ children: "PIX"
11236
+ }
11237
+ )
11238
+ ]
11239
+ }
11240
+ )
11241
+ }
11242
+ ),
11243
+ /* @__PURE__ */ jsxRuntime.jsx(
11244
+ "div",
11245
+ {
11246
+ "data-slot": "onchain-deposit-simple-divider-tabs",
11247
+ "data-test-id": "onchain-deposit-form-simple-view-divider-tabs",
11248
+ className: dividerClasses
11249
+ }
11250
+ ),
11251
+ /* @__PURE__ */ jsxRuntime.jsxs(
11252
+ "div",
11253
+ {
11254
+ "data-slot": "onchain-deposit-simple-body",
11255
+ "data-test-id": "onchain-deposit-form-simple-view-body",
11256
+ className: bodyBaseClasses,
11257
+ children: [
11258
+ /* @__PURE__ */ jsxRuntime.jsxs(
11259
+ "div",
11260
+ {
11261
+ "data-slot": "onchain-deposit-simple-token-card",
11262
+ "data-test-id": "onchain-deposit-form-simple-view-token-card",
11263
+ className: tailwindMerge.twMerge(
11264
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11265
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11266
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
11267
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
11268
+ ),
11269
+ children: [
11270
+ /* @__PURE__ */ jsxRuntime.jsx(
11271
+ EarnTokenSelectorSimpleView,
11272
+ {
11273
+ selectedToken,
11274
+ onTokenClick,
11275
+ onNetworkAndAssetClick: onTokenClick,
11276
+ isLoading: false,
11277
+ selectTokenLabel: "SELECIONE AQUI",
11278
+ chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
11279
+ chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
11280
+ }
11281
+ ),
11282
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
11283
+ "p",
11284
+ {
11285
+ "data-slot": "onchain-deposit-simple-empty-hint",
11286
+ "data-test-id": "onchain-deposit-form-simple-view-empty-hint",
11287
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
11288
+ children: labels.tokenPlaceholder
11289
+ }
11290
+ )
11291
+ ]
11292
+ }
11293
+ ),
11294
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showAddressSection && /* @__PURE__ */ jsxRuntime.jsxs(
11295
+ framerMotion.motion.div,
11296
+ {
11297
+ "data-slot": "onchain-deposit-simple-address-section",
11298
+ "data-test-id": "onchain-deposit-form-simple-view-address-section",
11299
+ initial: { opacity: 0, height: 0 },
11300
+ animate: { opacity: 1, height: "auto" },
11301
+ exit: { opacity: 0, height: 0 },
11302
+ transition: { duration: 0.2, ease: "easeOut" },
11303
+ style: { overflow: "hidden" },
11304
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
11305
+ children: [
11306
+ /* @__PURE__ */ jsxRuntime.jsxs(
11307
+ "div",
11308
+ {
11309
+ "data-slot": "onchain-deposit-simple-address-card",
11310
+ "data-test-id": "onchain-deposit-form-simple-view-address-card",
11311
+ className: tailwindMerge.twMerge(
11312
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11313
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11314
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
11315
+ "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)]"
11316
+ ),
11317
+ children: [
11318
+ /* @__PURE__ */ jsxRuntime.jsx(
11319
+ "p",
11320
+ {
11321
+ "data-test-id": "onchain-deposit-form-simple-view-address-label",
11322
+ className: "mb-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
11323
+ children: "Endere\xE7o de dep\xF3sito"
11324
+ }
11325
+ ),
11326
+ /* @__PURE__ */ jsxRuntime.jsx(
11327
+ AddressDisplay,
11328
+ {
11329
+ address: depositAddress,
11330
+ onCopy: onAddressCopy
11331
+ }
11332
+ )
11333
+ ]
11334
+ }
11335
+ ),
11336
+ /* @__PURE__ */ jsxRuntime.jsx(
11337
+ EarnInlineNotificationSimpleView,
11338
+ {
11339
+ variant: "warning",
11340
+ message: labels.warnBannerTokenChain
11341
+ }
11342
+ )
11343
+ ]
11344
+ }
11345
+ ) })
11346
+ ]
11347
+ }
11348
+ ),
11349
+ /* @__PURE__ */ jsxRuntime.jsx(
11350
+ "footer",
11351
+ {
11352
+ "data-slot": "onchain-deposit-simple-footer",
11353
+ "data-test-id": "onchain-deposit-form-simple-view-footer",
11354
+ className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]",
11355
+ children: /* @__PURE__ */ jsxRuntime.jsx(
11356
+ SecondaryButton,
11357
+ {
11358
+ type: "button",
11359
+ className: [
11360
+ "w-full h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
11361
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
11362
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
11363
+ "outline-none",
11364
+ "transition-[background,color,border-color] duration-150",
11365
+ "hover:opacity-100",
11366
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
11367
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
11368
+ ].join(" "),
11369
+ onClick: onBack,
11370
+ "aria-label": labels.backLabel,
11371
+ "data-test-id": "onchain-deposit-form-simple-view-cancel",
11372
+ children: labels.backLabel
11373
+ }
11374
+ )
11375
+ }
11376
+ )
11377
+ ]
11378
+ }
11379
+ );
11380
+ };
11381
+
11382
+ // src/utils/truncate-address.ts
11383
+ function truncateAddress(address, startChars = 6, endChars = 4) {
11384
+ if (!address) return "";
11385
+ if (address.length <= startChars + endChars) return address;
11386
+ return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
11387
+ }
11388
+ function DepositSuccessIcon() {
11389
+ return /* @__PURE__ */ jsxRuntime.jsx(
11390
+ "div",
11391
+ {
11392
+ className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
11393
+ "data-test-id": "deposit-success-icon",
11394
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
11395
+ "path",
11396
+ {
11397
+ d: "M10 5V15M10 15L6 11M10 15L14 11",
11398
+ stroke: "#121212",
11399
+ strokeWidth: "2",
11400
+ strokeLinecap: "round",
11401
+ strokeLinejoin: "round"
11402
+ }
11403
+ ) })
11404
+ }
11405
+ );
11406
+ }
11407
+ function OnchainDepositSuccessView({
11408
+ tokenSymbol,
11409
+ chainName,
11410
+ formattedAmount,
11411
+ depositAddress,
11412
+ txHash,
11413
+ blockExplorerUrl,
11414
+ onViewHistory,
11415
+ onClose,
11416
+ labels,
11417
+ className,
11418
+ icon
11419
+ }) {
11420
+ const [showDetails, setShowDetails] = React6.useState(true);
11421
+ const [copied, setCopied] = React6.useState(false);
11422
+ const handleCopyAddress = async () => {
11423
+ try {
11424
+ await navigator.clipboard.writeText(depositAddress);
11425
+ setCopied(true);
11426
+ setTimeout(() => setCopied(false), 2e3);
11427
+ } catch (e) {
11428
+ }
11429
+ };
11430
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11431
+ "div",
11432
+ {
11433
+ className: tailwindMerge.twMerge(
11434
+ "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",
11435
+ className
11436
+ ),
11437
+ "data-test-id": "onchain-deposit-success-view",
11438
+ children: [
11439
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
11440
+ "button",
11441
+ {
11442
+ onClick: onClose,
11443
+ 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",
11444
+ "aria-label": labels.closeAriaLabel,
11445
+ "data-test-id": "onchain-deposit-success-close",
11446
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
11447
+ }
11448
+ ),
11449
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:!p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
11450
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
11451
+ icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(DepositSuccessIcon, {}),
11452
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
11453
+ /* @__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 })
11454
+ ] }),
11455
+ /* @__PURE__ */ jsxRuntime.jsxs(
11456
+ "div",
11457
+ {
11458
+ className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11459
+ "data-test-id": "onchain-deposit-success-info",
11460
+ children: [
11461
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
11462
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.assetLabel }),
11463
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: tokenSymbol })
11464
+ ] }),
11465
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
11466
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.networkLabel }),
11467
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: chainName })
11468
+ ] }),
11469
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
11470
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.amountLabel }),
11471
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
11472
+ formattedAmount,
11473
+ " ",
11474
+ tokenSymbol
11475
+ ] })
11476
+ ] }),
11477
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
11478
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.addressLabel }),
11479
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
11480
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: truncateAddress(depositAddress) }),
11481
+ /* @__PURE__ */ jsxRuntime.jsx(
11482
+ "button",
11483
+ {
11484
+ onClick: handleCopyAddress,
11485
+ className: "text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
11486
+ "aria-label": labels.addressLabel,
11487
+ "data-test-id": "onchain-deposit-success-copy",
11488
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdContentCopy, { className: "w-4 h-4" })
11489
+ }
11490
+ ),
11491
+ copied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-[color:var(--deframe-widget-color-state-success)]", children: labels.copiedLabel })
11492
+ ] })
11493
+ ] }),
11494
+ txHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
11495
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txIdLabel }),
11496
+ /* @__PURE__ */ jsxRuntime.jsx(
11497
+ "a",
11498
+ {
11499
+ href: `${blockExplorerUrl}/tx/${txHash}`,
11500
+ target: "_blank",
11501
+ rel: "noopener noreferrer",
11502
+ className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
11503
+ "data-test-id": "onchain-deposit-success-explorer",
11504
+ children: labels.viewExplorerLabel
11505
+ }
11506
+ )
11507
+ ] })
11508
+ ]
11509
+ }
11510
+ ),
11511
+ /* @__PURE__ */ jsxRuntime.jsxs(
11512
+ "div",
11513
+ {
11514
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11515
+ "data-test-id": "onchain-deposit-success-details",
11516
+ children: [
11517
+ /* @__PURE__ */ jsxRuntime.jsxs(
11518
+ "button",
11519
+ {
11520
+ onClick: () => setShowDetails(!showDetails),
11521
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
11522
+ "aria-label": labels.detailsTitle,
11523
+ "data-test-id": "onchain-deposit-success-details-toggle",
11524
+ children: [
11525
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
11526
+ /* @__PURE__ */ jsxRuntime.jsx(
11527
+ md.MdOutlineExpandMore,
11528
+ {
11529
+ className: tailwindMerge.twMerge(
11530
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
11531
+ showDetails && "rotate-180"
11532
+ )
11533
+ }
11534
+ )
11535
+ ]
11536
+ }
11537
+ ),
11538
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
11539
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
11540
+ /* @__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 }),
11541
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
11542
+ ] }),
11543
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
11544
+ var _a, _b;
11545
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
11546
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
11547
+ /* @__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)]" }) }),
11548
+ index < labels.steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
11549
+ ] }),
11550
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
11551
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
11552
+ /* @__PURE__ */ jsxRuntime.jsx(
11553
+ "span",
11554
+ {
11555
+ className: tailwindMerge.twMerge(
11556
+ "text-[12px] font-semibold",
11557
+ step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
11558
+ ),
11559
+ children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
11560
+ }
11561
+ )
11562
+ ] })
11563
+ ] }, step.label);
11564
+ }) })
11565
+ ] })
11566
+ ]
11567
+ }
11568
+ ),
11569
+ /* @__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 }) })
11570
+ ] }) })
11571
+ ]
11572
+ }
11573
+ );
11574
+ }
11575
+ var OnchainDepositSuccessSimpleView = ({
11576
+ onClose
11577
+ }) => {
11578
+ React6__namespace.useEffect(() => {
11579
+ if (!onClose) return;
11580
+ const timer = setTimeout(onClose, 5e3);
11581
+ return () => clearTimeout(timer);
11582
+ }, [onClose]);
11583
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
11584
+ EarnFeedbackOverlaySimpleView,
11585
+ {
11586
+ variant: "success",
11587
+ title: "Dep\xF3sito Confirmado!",
11588
+ subtitle: "Seu saldo foi atualizado."
11589
+ }
11590
+ ) });
11591
+ };
11592
+ function OnchainWithdrawFormView({
11593
+ selectedToken,
11594
+ onTokenClick,
11595
+ isProcessing,
11596
+ chainCount,
11597
+ selectedChain,
11598
+ onNetworkClick,
11599
+ formattedBalance,
11600
+ amount,
11601
+ onAmountChange,
11602
+ isAmountInputDisabled,
11603
+ onMaxClick,
11604
+ showMaxButton,
11605
+ formattedAmountUsd,
11606
+ destinationNetwork,
11607
+ destinationAddress,
11608
+ onDestinationAddressChange,
11609
+ txDetails,
11610
+ isBelowMinAmount,
11611
+ walletError,
11612
+ transferError,
11613
+ showWarning,
11614
+ warningLabel,
11615
+ isSubmitDisabled,
11616
+ onSubmit,
11617
+ submitLabel,
11618
+ onBack,
11619
+ labels,
11620
+ className
11621
+ }) {
11622
+ const [showTxDetails, setShowTxDetails] = React6.useState(false);
11623
+ return /* @__PURE__ */ jsxRuntime.jsx(
11624
+ "div",
11625
+ {
11626
+ className: tailwindMerge.twMerge(
11627
+ "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",
11628
+ className
11629
+ ),
11630
+ "data-test-id": "onchain-withdraw-form-view",
11631
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
11632
+ /* @__PURE__ */ jsxRuntime.jsx(
11633
+ SecondaryButton,
11634
+ {
11635
+ onClick: onBack,
11636
+ className: "mb-4 !border-0 max-w-[84px]",
11637
+ "aria-label": labels.backLabel,
11638
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
11639
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
11640
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
11641
+ ] })
11642
+ }
11643
+ ),
11644
+ /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", children: labels.title }),
11645
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
11646
+ /* @__PURE__ */ jsxRuntime.jsx(
11647
+ "div",
11648
+ {
11649
+ className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11650
+ "data-test-id": "onchain-withdraw-token-card",
11651
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
11652
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
11653
+ /* @__PURE__ */ jsxRuntime.jsxs(
11654
+ "button",
11655
+ {
11656
+ onClick: onTokenClick,
11657
+ disabled: isProcessing,
11658
+ 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",
11659
+ "data-test-id": "onchain-withdraw-token-button",
11660
+ "aria-label": labels.tokenPlaceholder,
11661
+ children: [
11662
+ selectedToken ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
11663
+ /* @__PURE__ */ jsxRuntime.jsx(
11664
+ "img",
11665
+ {
11666
+ src: selectedToken.logoURI || "",
11667
+ alt: selectedToken.symbol,
11668
+ className: "w-6 h-6 rounded-full object-cover"
11669
+ }
11670
+ ),
11671
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
11672
+ ] }) : /* @__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 }) }),
11673
+ /* @__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)]" }) })
11674
+ ]
11675
+ }
11676
+ ),
11677
+ /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
11678
+ labels.balancePrefix,
11679
+ ": ",
11680
+ formattedBalance
11681
+ ] }),
11682
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
11683
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
11684
+ chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxRuntime.jsxs(
11685
+ "button",
11686
+ {
11687
+ disabled: true,
11688
+ 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",
11689
+ "data-test-id": "onchain-withdraw-chain-disabled",
11690
+ children: [
11691
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
11692
+ /* @__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)]" }) })
11693
+ ]
11694
+ }
11695
+ ) : chainCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
11696
+ "button",
11697
+ {
11698
+ onClick: onNetworkClick,
11699
+ 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",
11700
+ "data-test-id": "onchain-withdraw-chain-dropdown",
11701
+ "aria-label": labels.chainPlaceholder,
11702
+ children: [
11703
+ /* @__PURE__ */ jsxRuntime.jsx(
11704
+ "img",
11705
+ {
11706
+ src: selectedChain.iconUrl,
11707
+ alt: selectedChain.name,
11708
+ className: "w-3 h-3 rounded-full object-cover"
11709
+ }
11710
+ ),
11711
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
11712
+ /* @__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)]" }) })
11713
+ ]
11714
+ }
11715
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(
11716
+ "div",
11717
+ {
11718
+ 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)]",
11719
+ "data-test-id": "onchain-withdraw-chain-static",
11720
+ children: [
11721
+ /* @__PURE__ */ jsxRuntime.jsx(
11722
+ "img",
11723
+ {
11724
+ src: selectedChain.iconUrl,
11725
+ alt: selectedChain.name,
11726
+ className: "w-3 h-3 rounded-full object-cover"
11727
+ }
11728
+ ),
11729
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
11730
+ ]
11731
+ }
11732
+ )
11733
+ ] })
11734
+ ] }),
11735
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
11736
+ /* @__PURE__ */ jsxRuntime.jsx(
11737
+ Input2,
11738
+ {
11739
+ id: "withdraw-amount-input",
11740
+ placeholder: "0.00",
11741
+ inputMode: "decimal",
11742
+ autoComplete: "off",
11743
+ "aria-label": "Amount to withdraw",
11744
+ min: "0",
11745
+ step: "any",
11746
+ type: "number",
11747
+ value: amount,
11748
+ onChange: (e) => onAmountChange(e.target.value),
11749
+ onWheel: (event) => {
11750
+ event.currentTarget.blur();
11751
+ },
11752
+ disabled: isAmountInputDisabled,
11753
+ 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",
11754
+ "data-test-id": "onchain-withdraw-amount-input"
11755
+ }
11756
+ ),
11757
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
11758
+ showMaxButton && /* @__PURE__ */ jsxRuntime.jsx(
11759
+ "button",
11760
+ {
11761
+ onClick: onMaxClick,
11762
+ 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",
11763
+ "data-test-id": "onchain-withdraw-max-button",
11764
+ "aria-label": "Max",
11765
+ children: "Max"
11766
+ }
11767
+ )
11768
+ ] })
11769
+ ] })
11770
+ }
11771
+ ),
11772
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
11773
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
11774
+ /* @__PURE__ */ jsxRuntime.jsx(
11775
+ "div",
11776
+ {
11777
+ className: tailwindMerge.twMerge(
11778
+ "flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
11779
+ !destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
11780
+ ),
11781
+ children: destinationNetwork ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
11782
+ /* @__PURE__ */ jsxRuntime.jsx(
11783
+ "img",
11784
+ {
11785
+ src: destinationNetwork.iconUrl,
11786
+ alt: destinationNetwork.name,
11787
+ className: "w-5 h-5 rounded-full object-cover"
11788
+ }
11789
+ ),
11790
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: destinationNetwork.name }),
11791
+ /* @__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 })
11792
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
11793
+ }
11794
+ )
11795
+ ] }),
11796
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsxRuntime.jsx(
11797
+ Input2,
11798
+ {
11799
+ type: "text",
11800
+ label: labels.destinationAddressLabel,
11801
+ placeholder: labels.destinationAddressPlaceholder,
11802
+ value: destinationAddress,
11803
+ onChange: (e) => onDestinationAddressChange(e.target.value),
11804
+ disabled: isProcessing,
11805
+ 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"
11806
+ }
11807
+ ) }),
11808
+ /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
11809
+ isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
11810
+ txDetails !== null && /* @__PURE__ */ jsxRuntime.jsxs(
11811
+ "div",
11812
+ {
11813
+ className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
11814
+ "data-test-id": "onchain-withdraw-tx-details",
11815
+ children: [
11816
+ /* @__PURE__ */ jsxRuntime.jsxs(
11817
+ "button",
11818
+ {
11819
+ onClick: () => setShowTxDetails((v) => !v),
11820
+ className: "flex justify-between items-center w-full text-left cursor-pointer",
11821
+ "aria-label": labels.txDetailsTitle,
11822
+ "data-test-id": "onchain-withdraw-tx-details-toggle",
11823
+ children: [
11824
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
11825
+ /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineExpandMore, { className: tailwindMerge.twMerge("transition-transform", showTxDetails && "rotate-180") })
11826
+ ]
11827
+ }
11828
+ ),
11829
+ showTxDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
11830
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
11831
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
11832
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
11833
+ ] }),
11834
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
11835
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
11836
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
11837
+ ] }),
11838
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
11839
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
11840
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
11841
+ ] })
11842
+ ] })
11843
+ ]
11844
+ }
11845
+ ),
11846
+ walletError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: walletError, variant: "error" }) }),
11847
+ transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
11848
+ showWarning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
11849
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
11850
+ submitLabel,
11851
+ " ",
11852
+ /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
11853
+ ] }) : submitLabel })
11854
+ ] })
11855
+ }
11856
+ );
11857
+ }
11858
+ var OnchainWithdrawFormSimpleView = ({
11859
+ // Token selector
11860
+ selectedToken,
11861
+ onTokenClick,
11862
+ selectedChain,
11863
+ // Amount
11864
+ amount,
11865
+ onAmountChange,
11866
+ formattedAmountUsd,
11867
+ formattedBalance,
11868
+ // Percentage (new optional props)
11869
+ onPercentageClick,
11870
+ maxLabel,
11871
+ // Destination address
11872
+ destinationAddress,
11873
+ onDestinationAddressChange,
11874
+ // Errors
11875
+ isBelowMinAmount,
11876
+ walletError,
11877
+ transferError,
11878
+ // Submit
11879
+ isSubmitDisabled,
11880
+ isProcessing,
11881
+ onSubmit,
11882
+ submitLabel,
11883
+ // Navigation
11884
+ onBack,
11885
+ onClose,
11886
+ // Labels
11887
+ labels
11888
+ }) => {
11889
+ var _a;
11890
+ const hasToken = selectedToken != null;
11891
+ const hasAmountError = !!walletError || isBelowMinAmount;
11892
+ const hasAddressError = !!transferError;
11893
+ const isSubmitDisabledInternal = !hasToken || isSubmitDisabled || isProcessing || !amount || amount === "0" || amount === "" || !destinationAddress.trim();
11894
+ const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
11895
+ const hideTimerRef = React6__namespace.default.useRef(void 0);
11896
+ function handleHoverStart() {
11897
+ clearTimeout(hideTimerRef.current);
11898
+ setCardHovered(true);
11899
+ }
11900
+ function handleHoverEnd() {
11901
+ hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
11902
+ }
11903
+ React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
11904
+ const panelBaseClasses = [
11905
+ "relative flex flex-col overflow-hidden w-[420px]",
11906
+ "rounded-[var(--deframe-widget-size-radius-md)]",
11907
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
11908
+ "font-[var(--deframe-widget-font-family)]"
11909
+ ].join(" ");
11910
+ const headerBaseClasses = [
11911
+ "flex items-center",
11912
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11913
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11914
+ ].join(" ");
11915
+ const titleBaseClasses = [
11916
+ "flex-1",
11917
+ "text-[15px]",
11918
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]",
11919
+ "text-[color:var(--deframe-widget-color-text-primary)]"
11920
+ ].join(" ");
11921
+ const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
11922
+ const bodyBaseClasses = [
11923
+ "flex flex-col",
11924
+ "gap-[var(--deframe-widget-size-gap-md)]",
11925
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11926
+ "py-[var(--deframe-widget-size-padding-y-md)]"
11927
+ ].join(" ");
11928
+ const inputCardClasses = tailwindMerge.twMerge(
11929
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11930
+ "border",
11931
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
11932
+ "transition-[border-color,background] duration-200",
11933
+ hasAmountError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
11934
+ );
11935
+ const addressCardClasses = tailwindMerge.twMerge(
11936
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
11937
+ "border",
11938
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
11939
+ "transition-[border-color,background] duration-200",
11940
+ hasAddressError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
11941
+ );
11942
+ const footerBaseClasses = [
11943
+ "flex gap-[var(--deframe-widget-size-gap-sm)]",
11944
+ "px-[var(--deframe-widget-size-padding-x-md)]",
11945
+ "pb-[var(--deframe-widget-size-padding-y-md)]"
11946
+ ].join(" ");
11947
+ const cancelButtonClasses = [
11948
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
11949
+ "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
11950
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
11951
+ "outline-none",
11952
+ "transition-[background,color,border-color] duration-150",
11953
+ "hover:opacity-100",
11954
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
11955
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
11956
+ ].join(" ");
11957
+ const submitButtonClasses = [
11958
+ "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
11959
+ "border-none",
11960
+ "text-[15px]",
11961
+ isSubmitDisabledInternal ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
11962
+ "outline-none",
11963
+ "transition-[background,color] duration-200"
11964
+ ].join(" ");
11965
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11966
+ "div",
11967
+ {
11968
+ "data-slot": "onchain-withdraw-simple-panel",
11969
+ "data-test-id": "onchain-withdraw-form-simple-view",
11970
+ className: panelBaseClasses,
11971
+ children: [
11972
+ /* @__PURE__ */ jsxRuntime.jsxs(
11973
+ "header",
11974
+ {
11975
+ "data-slot": "onchain-withdraw-simple-header",
11976
+ "data-test-id": "onchain-withdraw-form-simple-view-header",
11977
+ className: headerBaseClasses,
11978
+ children: [
11979
+ /* @__PURE__ */ jsxRuntime.jsx(
11980
+ "span",
11981
+ {
11982
+ "data-slot": "onchain-withdraw-simple-title",
11983
+ "data-test-id": "onchain-withdraw-form-simple-view-title",
11984
+ className: titleBaseClasses,
11985
+ children: labels.title
11986
+ }
11987
+ ),
11988
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
11989
+ CloseButton_default,
11990
+ {
11991
+ onClick: onClose,
11992
+ ariaLabel: "Close withdrawal panel",
11993
+ testId: "onchain-withdraw-form-simple-view-close"
11994
+ }
11995
+ )
11996
+ ]
11997
+ }
11998
+ ),
11999
+ /* @__PURE__ */ jsxRuntime.jsx(
12000
+ "div",
12001
+ {
12002
+ "data-slot": "onchain-withdraw-simple-divider",
12003
+ "data-test-id": "onchain-withdraw-form-simple-view-divider",
12004
+ className: dividerClasses
12005
+ }
12006
+ ),
12007
+ /* @__PURE__ */ jsxRuntime.jsxs(
12008
+ "div",
12009
+ {
12010
+ "data-slot": "onchain-withdraw-simple-body",
12011
+ "data-test-id": "onchain-withdraw-form-simple-view-body",
12012
+ className: bodyBaseClasses,
12013
+ children: [
12014
+ /* @__PURE__ */ jsxRuntime.jsxs(
12015
+ "div",
12016
+ {
12017
+ "data-slot": "onchain-withdraw-simple-input-card",
12018
+ "data-test-id": "onchain-withdraw-form-simple-view-input-card",
12019
+ onMouseEnter: hasToken ? handleHoverStart : void 0,
12020
+ onMouseLeave: hasToken ? handleHoverEnd : void 0,
12021
+ className: inputCardClasses,
12022
+ children: [
12023
+ /* @__PURE__ */ jsxRuntime.jsxs(
12024
+ "div",
12025
+ {
12026
+ "data-slot": "onchain-withdraw-simple-input-top-row",
12027
+ "data-test-id": "onchain-withdraw-form-simple-view-top-row",
12028
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
12029
+ children: [
12030
+ /* @__PURE__ */ jsxRuntime.jsx(
12031
+ EarnTokenSelectorSimpleView,
12032
+ {
12033
+ selectedToken,
12034
+ onTokenClick,
12035
+ onNetworkAndAssetClick: onTokenClick,
12036
+ isLoading: false,
12037
+ selectTokenLabel: "SELECIONE AQUI",
12038
+ chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
12039
+ chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
12040
+ }
12041
+ ),
12042
+ /* @__PURE__ */ jsxRuntime.jsx(
12043
+ "div",
12044
+ {
12045
+ "data-test-id": "onchain-withdraw-form-simple-view-input-divider",
12046
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
12047
+ }
12048
+ ),
12049
+ /* @__PURE__ */ jsxRuntime.jsx(
12050
+ EarnAmountInputSimpleView,
12051
+ {
12052
+ value: amount,
12053
+ onChange: (e) => onAmountChange(e.target.value),
12054
+ ariaLabel: "Amount to withdraw",
12055
+ dollarAmountFormatted: formattedAmountUsd
12056
+ }
12057
+ )
12058
+ ]
12059
+ }
12060
+ ),
12061
+ hasToken && formattedBalance && /* @__PURE__ */ jsxRuntime.jsx(
12062
+ "div",
12063
+ {
12064
+ "data-slot": "onchain-withdraw-simple-balance-row",
12065
+ "data-test-id": "onchain-withdraw-form-simple-view-balance-row",
12066
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
12067
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
12068
+ "span",
12069
+ {
12070
+ className: hasAmountError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
12071
+ children: [
12072
+ labels.balancePrefix,
12073
+ ": ",
12074
+ formattedBalance
12075
+ ]
12076
+ }
12077
+ ) })
12078
+ }
12079
+ ),
12080
+ !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
12081
+ "p",
12082
+ {
12083
+ "data-slot": "onchain-withdraw-simple-empty-hint",
12084
+ "data-test-id": "onchain-withdraw-form-simple-view-empty-hint",
12085
+ className: "mt-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12086
+ children: labels.tokenPlaceholder
12087
+ }
12088
+ ),
12089
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && onPercentageClick && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
12090
+ framerMotion.motion.div,
12091
+ {
12092
+ "data-slot": "onchain-withdraw-simple-chips-row",
12093
+ "data-test-id": "onchain-withdraw-form-simple-view-chips-row",
12094
+ initial: { opacity: 0, height: 0, marginTop: 0 },
12095
+ animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
12096
+ exit: { opacity: 0, height: 0, marginTop: 0 },
12097
+ transition: { duration: 0.15, ease: "easeOut" },
12098
+ style: { overflow: "hidden" },
12099
+ onMouseEnter: handleHoverStart,
12100
+ onMouseLeave: handleHoverEnd,
12101
+ children: /* @__PURE__ */ jsxRuntime.jsx(
12102
+ EarnPercentageButtonsSimpleView,
12103
+ {
12104
+ onPercentageClick,
12105
+ maxLabel: maxLabel != null ? maxLabel : "M\xE1x."
12106
+ }
12107
+ )
12108
+ }
12109
+ ) }),
12110
+ (walletError || isBelowMinAmount) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
12111
+ EarnInlineNotificationSimpleView,
12112
+ {
12113
+ variant: "error",
12114
+ message: walletError != null ? walletError : labels.minAmountWarning
12115
+ }
12116
+ ) })
12117
+ ]
12118
+ }
12119
+ ),
12120
+ /* @__PURE__ */ jsxRuntime.jsxs(
12121
+ "div",
12122
+ {
12123
+ "data-slot": "onchain-withdraw-simple-address-card",
12124
+ "data-test-id": "onchain-withdraw-form-simple-view-address-card",
12125
+ className: addressCardClasses,
12126
+ children: [
12127
+ /* @__PURE__ */ jsxRuntime.jsx(
12128
+ "p",
12129
+ {
12130
+ "data-slot": "onchain-withdraw-simple-address-label",
12131
+ "data-test-id": "onchain-withdraw-form-simple-view-address-label",
12132
+ className: "mb-[var(--deframe-widget-size-gap-sm)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
12133
+ children: labels.destinationAddressLabel
12134
+ }
12135
+ ),
12136
+ /* @__PURE__ */ jsxRuntime.jsx(
12137
+ "input",
12138
+ {
12139
+ "data-slot": "onchain-withdraw-simple-address-input",
12140
+ "data-test-id": "onchain-withdraw-form-simple-view-address-input",
12141
+ type: "text",
12142
+ value: destinationAddress,
12143
+ onChange: (e) => onDestinationAddressChange(e.target.value),
12144
+ placeholder: labels.destinationAddressPlaceholder,
12145
+ disabled: isProcessing,
12146
+ "aria-label": labels.destinationAddressLabel,
12147
+ className: tailwindMerge.twMerge(
12148
+ "w-full bg-transparent outline-none",
12149
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-regular)]",
12150
+ "font-[var(--deframe-widget-font-family)]",
12151
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
12152
+ "text-[color:var(--deframe-widget-color-text-primary)]",
12153
+ '[font-feature-settings:"tnum"]',
12154
+ "disabled:opacity-50 disabled:cursor-not-allowed"
12155
+ ),
12156
+ spellCheck: false,
12157
+ autoComplete: "off"
12158
+ }
12159
+ ),
12160
+ transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "error", message: transferError }) })
12161
+ ]
12162
+ }
12163
+ ),
12164
+ /* @__PURE__ */ jsxRuntime.jsx(
12165
+ EarnInlineNotificationSimpleView,
12166
+ {
12167
+ variant: "warning",
12168
+ message: labels.infoBanner
12169
+ }
12170
+ )
12171
+ ]
12172
+ }
12173
+ ),
12174
+ /* @__PURE__ */ jsxRuntime.jsxs(
12175
+ "footer",
12176
+ {
12177
+ "data-slot": "onchain-withdraw-simple-footer",
12178
+ "data-test-id": "onchain-withdraw-form-simple-view-footer",
12179
+ className: footerBaseClasses,
12180
+ children: [
12181
+ onBack && /* @__PURE__ */ jsxRuntime.jsx(
12182
+ SecondaryButton,
12183
+ {
12184
+ type: "button",
12185
+ className: cancelButtonClasses,
12186
+ onClick: onBack,
12187
+ "aria-label": "Cancel withdrawal",
12188
+ "data-test-id": "onchain-withdraw-form-simple-view-cancel",
12189
+ children: labels.backLabel
12190
+ }
12191
+ ),
12192
+ /* @__PURE__ */ jsxRuntime.jsx(
12193
+ PrimaryButton,
12194
+ {
12195
+ type: "button",
12196
+ className: submitButtonClasses,
12197
+ disabled: isSubmitDisabledInternal,
12198
+ onClick: onSubmit,
12199
+ "aria-label": submitLabel,
12200
+ "data-test-id": "onchain-withdraw-form-simple-view-submit",
12201
+ children: submitLabel
12202
+ }
12203
+ )
12204
+ ]
12205
+ }
12206
+ )
12207
+ ]
12208
+ }
12209
+ );
12210
+ };
12211
+ function OnchainWithdrawChainSelectorView({
12212
+ actionSheetId,
12213
+ isOpen,
12214
+ currentActionSheetId,
12215
+ onClose,
12216
+ chains,
12217
+ onChainClick,
12218
+ title,
12219
+ closeAriaLabel = "Close"
12220
+ }) {
12221
+ return /* @__PURE__ */ jsxRuntime.jsx(
12222
+ ActionSheet,
12223
+ {
12224
+ id: actionSheetId,
12225
+ isOpen,
12226
+ currentActionSheetId,
12227
+ onClose,
12228
+ height: "auto",
12229
+ position: "bottom",
12230
+ closeOnBackdropClick: true,
12231
+ children: /* @__PURE__ */ jsxRuntime.jsx(
12232
+ "div",
12233
+ {
12234
+ 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",
12235
+ "data-test-id": "onchain-withdraw-chain-selector",
12236
+ 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: [
12237
+ /* @__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(
12238
+ "button",
12239
+ {
12240
+ onClick: onClose,
12241
+ 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",
12242
+ "aria-label": closeAriaLabel,
12243
+ "data-test-id": "onchain-withdraw-chain-selector-close",
12244
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
12245
+ }
12246
+ ) }),
12247
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col flex-1 min-h-0", children: [
12248
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none p-6 pb-0", children: [
12249
+ /* @__PURE__ */ jsxRuntime.jsx(
12250
+ "div",
12251
+ {
12252
+ className: "text-h5 text-[color:var(--deframe-widget-color-text-secondary)] font-bold",
12253
+ "data-test-id": "onchain-withdraw-chain-selector-title",
12254
+ children: title
12255
+ }
12256
+ ),
12257
+ /* @__PURE__ */ jsxRuntime.jsx("br", {})
12258
+ ] }),
12259
+ /* @__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(
12260
+ ListItem,
12261
+ {
12262
+ onClick: () => onChainClick(chain.chainId),
12263
+ 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`,
12264
+ "data-test-id": `onchain-withdraw-chain-${chain.chainId}`,
12265
+ children: [
12266
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
12267
+ "img",
12268
+ {
12269
+ src: chain.iconUrl,
12270
+ alt: chain.name,
12271
+ className: "w-8 h-8 rounded-full object-cover"
12272
+ }
12273
+ ) }),
12274
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-large", className: "font-medium", children: chain.name }) }),
12275
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chain.formattedBalance }) })
12276
+ ]
12277
+ },
12278
+ chain.chainId
12279
+ )) })
12280
+ ] })
12281
+ ] })
12282
+ }
12283
+ )
12284
+ }
12285
+ );
12286
+ }
12287
+ function WithdrawSuccessIcon() {
12288
+ return /* @__PURE__ */ jsxRuntime.jsx(
12289
+ "div",
12290
+ {
12291
+ className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
12292
+ "data-test-id": "withdraw-success-icon",
12293
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
12294
+ "path",
12295
+ {
12296
+ d: "M10 15V5M10 5L6 9M10 5L14 9",
12297
+ stroke: "#121212",
12298
+ strokeWidth: "2",
12299
+ strokeLinecap: "round",
12300
+ strokeLinejoin: "round"
12301
+ }
12302
+ ) })
12303
+ }
12304
+ );
12305
+ }
12306
+ function OnchainWithdrawSuccessView({
12307
+ tokenSymbol,
12308
+ tokenLogoURI,
12309
+ formattedAmount,
12310
+ chainName,
12311
+ chainIconUrl,
12312
+ destinationAddress,
12313
+ blockchainCost,
12314
+ txHash,
12315
+ blockExplorerUrl,
12316
+ onViewHistory,
12317
+ onClose,
12318
+ labels,
12319
+ className,
12320
+ icon
12321
+ }) {
12322
+ const [showDetails, setShowDetails] = React6.useState(true);
12323
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12324
+ "div",
12325
+ {
12326
+ className: tailwindMerge.twMerge(
12327
+ "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",
12328
+ className
12329
+ ),
12330
+ "data-test-id": "onchain-withdraw-success-view",
12331
+ children: [
12332
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
12333
+ "button",
12334
+ {
12335
+ onClick: onClose,
12336
+ 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",
12337
+ "aria-label": labels.closeAriaLabel,
12338
+ "data-test-id": "onchain-withdraw-success-close",
12339
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
12340
+ }
12341
+ ),
12342
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
12343
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
12344
+ icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(WithdrawSuccessIcon, {}),
12345
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
12346
+ /* @__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 })
12347
+ ] }),
12348
+ /* @__PURE__ */ jsxRuntime.jsx(
12349
+ "div",
12350
+ {
12351
+ className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12352
+ "data-test-id": "onchain-withdraw-success-summary",
12353
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
12354
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
12355
+ /* @__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() }) }),
12356
+ /* @__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" }) })
12357
+ ] }),
12358
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
12359
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
12360
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
12361
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
12362
+ formattedAmount,
12363
+ " ",
12364
+ tokenSymbol
12365
+ ] })
12366
+ ] }),
12367
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
12368
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
12369
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
12370
+ ] })
12371
+ ] })
12372
+ ] })
12373
+ }
12374
+ ),
12375
+ /* @__PURE__ */ jsxRuntime.jsxs(
12376
+ "div",
12377
+ {
12378
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12379
+ "data-test-id": "onchain-withdraw-success-details",
12380
+ children: [
12381
+ /* @__PURE__ */ jsxRuntime.jsxs(
12382
+ "button",
12383
+ {
12384
+ onClick: () => setShowDetails(!showDetails),
12385
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
12386
+ "aria-label": labels.detailsTitle,
12387
+ "data-test-id": "onchain-withdraw-success-details-toggle",
12388
+ children: [
12389
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
12390
+ /* @__PURE__ */ jsxRuntime.jsx(
12391
+ md.MdOutlineExpandMore,
12392
+ {
12393
+ className: tailwindMerge.twMerge(
12394
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
12395
+ showDetails && "rotate-180"
12396
+ )
12397
+ }
12398
+ )
12399
+ ]
12400
+ }
12401
+ ),
12402
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
12403
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
12404
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
12405
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
12406
+ formattedAmount,
12407
+ " ",
12408
+ tokenSymbol
12409
+ ] })
12410
+ ] }),
12411
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
12412
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
12413
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
12414
+ ] }),
12415
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
12416
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
12417
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
12418
+ formattedAmount,
12419
+ " ",
12420
+ tokenSymbol
12421
+ ] })
12422
+ ] }),
12423
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
12424
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.transactionLabel }),
12425
+ /* @__PURE__ */ jsxRuntime.jsx(
12426
+ "a",
12427
+ {
12428
+ href: `${blockExplorerUrl}/tx/${txHash}`,
12429
+ target: "_blank",
12430
+ rel: "noopener noreferrer",
12431
+ className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
12432
+ "data-test-id": "onchain-withdraw-success-explorer",
12433
+ children: labels.viewExplorerLabel
12434
+ }
12435
+ )
12436
+ ] })
12437
+ ] })
12438
+ ]
12439
+ }
12440
+ ),
12441
+ /* @__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 }) })
12442
+ ] }) })
12443
+ ]
12444
+ }
12445
+ );
12446
+ }
12447
+ function WithdrawFailedIcon() {
12448
+ return /* @__PURE__ */ jsxRuntime.jsx(
12449
+ "div",
12450
+ {
12451
+ className: "w-20 h-20 rounded-full flex items-center justify-center bg-[var(--deframe-widget-color-state-error)]",
12452
+ "data-test-id": "withdraw-failed-icon",
12453
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
12454
+ "path",
12455
+ {
12456
+ d: "M18 6L6 18M6 6L18 18",
12457
+ stroke: "#121212",
12458
+ strokeWidth: "2",
12459
+ strokeLinecap: "round",
12460
+ strokeLinejoin: "round"
12461
+ }
12462
+ ) })
12463
+ }
12464
+ );
12465
+ }
12466
+ function OnchainWithdrawFailedView({
12467
+ tokenSymbol,
12468
+ tokenLogoURI,
12469
+ formattedAmount,
12470
+ chainName,
12471
+ chainIconUrl,
12472
+ destinationAddress,
12473
+ blockchainCost,
12474
+ errorMessage,
12475
+ onCancel,
12476
+ onTryAgain,
12477
+ labels,
12478
+ className,
12479
+ icon
12480
+ }) {
12481
+ const [showDetails, setShowDetails] = React6.useState(true);
12482
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12483
+ "div",
12484
+ {
12485
+ className: tailwindMerge.twMerge(
12486
+ "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",
12487
+ className
12488
+ ),
12489
+ "data-test-id": "onchain-withdraw-failed-view",
12490
+ children: [
12491
+ /* @__PURE__ */ jsxRuntime.jsx(
12492
+ "button",
12493
+ {
12494
+ onClick: onCancel,
12495
+ 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",
12496
+ "aria-label": labels.closeAriaLabel,
12497
+ "data-test-id": "onchain-withdraw-failed-close",
12498
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
12499
+ }
12500
+ ),
12501
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
12502
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
12503
+ icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(WithdrawFailedIcon, {}),
12504
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
12505
+ /* @__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 })
12506
+ ] }),
12507
+ /* @__PURE__ */ jsxRuntime.jsx(
12508
+ "div",
12509
+ {
12510
+ className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12511
+ "data-test-id": "onchain-withdraw-failed-summary",
12512
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
12513
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
12514
+ /* @__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() }) }),
12515
+ /* @__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" }) })
12516
+ ] }),
12517
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
12518
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
12519
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
12520
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
12521
+ formattedAmount,
12522
+ " ",
12523
+ tokenSymbol
12524
+ ] })
12525
+ ] }),
12526
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
12527
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
12528
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
12529
+ ] })
12530
+ ] })
12531
+ ] })
12532
+ }
12533
+ ),
12534
+ /* @__PURE__ */ jsxRuntime.jsxs(
12535
+ "div",
12536
+ {
12537
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12538
+ "data-test-id": "onchain-withdraw-failed-details",
12539
+ children: [
12540
+ /* @__PURE__ */ jsxRuntime.jsxs(
12541
+ "button",
12542
+ {
12543
+ onClick: () => setShowDetails(!showDetails),
12544
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
12545
+ "aria-label": labels.detailsTitle,
12546
+ "data-test-id": "onchain-withdraw-failed-details-toggle",
12547
+ children: [
12548
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
12549
+ /* @__PURE__ */ jsxRuntime.jsx(
12550
+ md.MdOutlineExpandMore,
12551
+ {
12552
+ className: tailwindMerge.twMerge(
12553
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
12554
+ showDetails && "rotate-180"
12555
+ )
12556
+ }
12557
+ )
12558
+ ]
12559
+ }
12560
+ ),
12561
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", children: [
12562
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
12563
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
12564
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
12565
+ formattedAmount,
12566
+ " ",
12567
+ tokenSymbol
12568
+ ] })
12569
+ ] }),
12570
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
12571
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
12572
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
12573
+ ] }),
12574
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
12575
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
12576
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] font-semibold", children: [
12577
+ formattedAmount,
12578
+ " ",
12579
+ tokenSymbol
12580
+ ] })
12581
+ ] })
12582
+ ] })
12583
+ ]
12584
+ }
12585
+ ),
12586
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mt-8 flex flex-col gap-3", children: [
12587
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { onClick: onCancel, "data-test-id": "onchain-withdraw-failed-cancel", children: labels.cancelLabel }),
12588
+ /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onTryAgain, "data-test-id": "onchain-withdraw-failed-retry", children: labels.tryAgainLabel })
12589
+ ] })
12590
+ ] }) })
12591
+ ]
12592
+ }
12593
+ );
12594
+ }
12595
+ var OnchainWithdrawProcessingSimpleView = ({
12596
+ onClose: _onClose
12597
+ }) => {
12598
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
12599
+ EarnFeedbackOverlaySimpleView,
12600
+ {
12601
+ variant: "loading",
12602
+ title: "PROCESSANDO SAQUE...",
12603
+ subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada."
12604
+ }
12605
+ ) });
12606
+ };
12607
+ function WithdrawSignatureWarningIcon() {
12608
+ return /* @__PURE__ */ jsxRuntime.jsx(
12609
+ "div",
12610
+ {
12611
+ className: "w-20 h-20 rounded-full flex items-center justify-center",
12612
+ style: { background: "linear-gradient(180deg, #F6A700 0%, #F59E0B 100%)" },
12613
+ "data-test-id": "withdraw-signature-warning-icon",
12614
+ "data-slot": "withdraw-signature-warning-icon",
12615
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
12616
+ "path",
12617
+ {
12618
+ d: "M12 9V13M12 17H12.01M10.29 3.86L1.82 18A2 2 0 003.54 21H20.46A2 2 0 0022.18 18L13.71 3.86A2 2 0 0010.29 3.86Z",
12619
+ stroke: "#121212",
12620
+ strokeWidth: "2",
12621
+ strokeLinecap: "round",
12622
+ strokeLinejoin: "round"
12623
+ }
12624
+ ) })
12625
+ }
12626
+ );
12627
+ }
12628
+ function OnchainWithdrawSignatureWarningView({
12629
+ tokenSymbol,
12630
+ tokenLogoURI,
12631
+ formattedAmount,
12632
+ chainName,
12633
+ chainIconUrl,
12634
+ destinationAddress,
12635
+ blockchainCost,
12636
+ onCancel,
12637
+ onTryAgain,
12638
+ className
12639
+ }) {
12640
+ const [showDetails, setShowDetails] = React6.useState(true);
12641
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12642
+ "div",
12643
+ {
12644
+ className: tailwindMerge.twMerge(
12645
+ "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",
12646
+ className
12647
+ ),
12648
+ "data-test-id": "onchain-withdraw-signature-warning-view",
12649
+ children: [
12650
+ /* @__PURE__ */ jsxRuntime.jsx(
12651
+ "button",
12652
+ {
12653
+ onClick: onCancel,
12654
+ 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",
12655
+ "aria-label": "Fechar",
12656
+ "data-test-id": "onchain-withdraw-signature-warning-close",
12657
+ children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineClose, { className: "w-6 h-6" })
12658
+ }
12659
+ ),
12660
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full items-center", children: [
12661
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
12662
+ /* @__PURE__ */ jsxRuntime.jsx(WithdrawSignatureWarningIcon, {}),
12663
+ /* @__PURE__ */ jsxRuntime.jsx(
12664
+ "h2",
12665
+ {
12666
+ className: "text-[28px] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-[color:var(--deframe-widget-color-text-primary)] leading-tight",
12667
+ "data-test-id": "onchain-withdraw-signature-warning-title",
12668
+ children: "Saque n\xE3o assinado"
12669
+ }
12670
+ ),
12671
+ /* @__PURE__ */ jsxRuntime.jsx(
12672
+ "p",
12673
+ {
12674
+ className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center",
12675
+ "data-test-id": "onchain-withdraw-signature-warning-subtitle",
12676
+ children: "A assinatura da transa\xE7\xE3o foi cancelada. Nenhum valor foi enviado."
12677
+ }
12678
+ )
12679
+ ] }),
12680
+ /* @__PURE__ */ jsxRuntime.jsx(
12681
+ "div",
12682
+ {
12683
+ className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12684
+ "data-test-id": "onchain-withdraw-signature-warning-summary",
12685
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
12686
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", "data-test-id": "onchain-withdraw-signature-warning-token-icon", children: [
12687
+ /* @__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-weight:var(--deframe-widget-font-weight-bold)]", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
12688
+ chainIconUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsxRuntime.jsx(
12689
+ "img",
12690
+ {
12691
+ src: chainIconUrl,
12692
+ alt: chainName,
12693
+ className: "w-[16px] h-[16px] rounded-full object-cover",
12694
+ "data-test-id": "onchain-withdraw-signature-warning-chain-icon"
12695
+ }
12696
+ ) })
12697
+ ] }),
12698
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
12699
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
12700
+ /* @__PURE__ */ jsxRuntime.jsx(
12701
+ "span",
12702
+ {
12703
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
12704
+ "data-test-id": "onchain-withdraw-signature-warning-sending-label",
12705
+ children: "Voc\xEA est\xE1 enviando"
12706
+ }
12707
+ ),
12708
+ /* @__PURE__ */ jsxRuntime.jsxs(
12709
+ "span",
12710
+ {
12711
+ className: "text-[20px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-tight",
12712
+ "data-test-id": "onchain-withdraw-signature-warning-amount",
12713
+ children: [
12714
+ formattedAmount,
12715
+ " ",
12716
+ tokenSymbol
12717
+ ]
12718
+ }
12719
+ )
12720
+ ] }),
12721
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
12722
+ /* @__PURE__ */ jsxRuntime.jsx(
12723
+ "span",
12724
+ {
12725
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
12726
+ "data-test-id": "onchain-withdraw-signature-warning-destination-label",
12727
+ children: "Para o endere\xE7o"
12728
+ }
12729
+ ),
12730
+ /* @__PURE__ */ jsxRuntime.jsx(
12731
+ "span",
12732
+ {
12733
+ className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] break-all leading-snug",
12734
+ "data-test-id": "onchain-withdraw-signature-warning-destination-address",
12735
+ children: destinationAddress
12736
+ }
12737
+ )
12738
+ ] })
12739
+ ] })
12740
+ ] })
12741
+ }
12742
+ ),
12743
+ /* @__PURE__ */ jsxRuntime.jsxs(
12744
+ "div",
12745
+ {
12746
+ className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
12747
+ "data-test-id": "onchain-withdraw-signature-warning-details",
12748
+ children: [
12749
+ /* @__PURE__ */ jsxRuntime.jsxs(
12750
+ "button",
12751
+ {
12752
+ onClick: () => setShowDetails(!showDetails),
12753
+ className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
12754
+ "aria-label": "Detalhes da transa\xE7\xE3o",
12755
+ "data-test-id": "onchain-withdraw-signature-warning-details-toggle",
12756
+ children: [
12757
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: "Detalhes da transa\xE7\xE3o" }),
12758
+ /* @__PURE__ */ jsxRuntime.jsx(
12759
+ md.MdOutlineExpandMore,
12760
+ {
12761
+ className: tailwindMerge.twMerge(
12762
+ "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
12763
+ showDetails && "rotate-180"
12764
+ )
12765
+ }
12766
+ )
12767
+ ]
12768
+ }
12769
+ ),
12770
+ showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4", "data-test-id": "onchain-withdraw-signature-warning-details-content", children: [
12771
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[color:var(--deframe-widget-color-border-secondary)]", children: [
12772
+ /* @__PURE__ */ jsxRuntime.jsx(
12773
+ "span",
12774
+ {
12775
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
12776
+ "data-test-id": "onchain-withdraw-signature-warning-withdraw-amount-label",
12777
+ children: "Valor de retirada"
12778
+ }
12779
+ ),
12780
+ /* @__PURE__ */ jsxRuntime.jsxs(
12781
+ "span",
12782
+ {
12783
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
12784
+ "data-test-id": "onchain-withdraw-signature-warning-withdraw-amount-value",
12785
+ children: [
12786
+ formattedAmount,
12787
+ " ",
12788
+ tokenSymbol
12789
+ ]
12790
+ }
12791
+ )
12792
+ ] }),
12793
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[color:var(--deframe-widget-color-border-secondary)]", children: [
12794
+ /* @__PURE__ */ jsxRuntime.jsx(
12795
+ "span",
12796
+ {
12797
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
12798
+ "data-test-id": "onchain-withdraw-signature-warning-blockchain-cost-label",
12799
+ children: "Custo da blockchain"
12800
+ }
12801
+ ),
12802
+ /* @__PURE__ */ jsxRuntime.jsx(
12803
+ "span",
12804
+ {
12805
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
12806
+ "data-test-id": "onchain-withdraw-signature-warning-blockchain-cost-value",
12807
+ children: blockchainCost
12808
+ }
12809
+ )
12810
+ ] }),
12811
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
12812
+ /* @__PURE__ */ jsxRuntime.jsx(
12813
+ "span",
12814
+ {
12815
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]",
12816
+ "data-test-id": "onchain-withdraw-signature-warning-receive-label",
12817
+ children: "Voc\xEA receber\xE1"
12818
+ }
12819
+ ),
12820
+ /* @__PURE__ */ jsxRuntime.jsxs(
12821
+ "span",
12822
+ {
12823
+ className: "text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
12824
+ "data-test-id": "onchain-withdraw-signature-warning-receive-value",
12825
+ children: [
12826
+ formattedAmount,
12827
+ " ",
12828
+ tokenSymbol
12829
+ ]
12830
+ }
12831
+ )
12832
+ ] })
12833
+ ] })
12834
+ ]
12835
+ }
12836
+ ),
12837
+ /* @__PURE__ */ jsxRuntime.jsxs(
12838
+ "div",
12839
+ {
12840
+ className: "w-full mt-8 flex gap-3",
12841
+ "data-test-id": "onchain-withdraw-signature-warning-actions",
12842
+ children: [
12843
+ /* @__PURE__ */ jsxRuntime.jsx(
12844
+ SecondaryButton,
12845
+ {
12846
+ className: "flex-1",
12847
+ onClick: onCancel,
12848
+ "data-test-id": "onchain-withdraw-signature-warning-cancel",
12849
+ children: "Cancelar"
12850
+ }
12851
+ ),
12852
+ /* @__PURE__ */ jsxRuntime.jsx(
12853
+ PrimaryButton,
12854
+ {
12855
+ className: "flex-1",
12856
+ onClick: onTryAgain,
12857
+ "data-test-id": "onchain-withdraw-signature-warning-retry",
12858
+ children: "Tente novamente"
12859
+ }
12860
+ )
12861
+ ]
12862
+ }
12863
+ )
12864
+ ] }) })
12865
+ ]
12866
+ }
12867
+ );
12868
+ }
12869
+ var OnchainWithdrawSignatureWarningSimpleView = ({
12870
+ onCancel
12871
+ }) => {
12872
+ React6__namespace.useEffect(() => {
12873
+ if (!onCancel) return;
12874
+ const timer = setTimeout(onCancel, 5e3);
12875
+ return () => clearTimeout(timer);
12876
+ }, [onCancel]);
12877
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-signature-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
12878
+ EarnFeedbackOverlaySimpleView,
12879
+ {
12880
+ variant: "warning",
12881
+ title: "Saque n\xE3o assinado",
12882
+ subtitle: "A assinatura da transa\xE7\xE3o foi cancelada."
12883
+ }
12884
+ ) });
12885
+ };
10852
12886
  var DashboardCard = ({ children, className }) => {
10853
12887
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
10854
12888
  };
@@ -12169,6 +14203,7 @@ exports.DashboardTransactionsPlaceholder = DashboardTransactionsPlaceholder;
12169
14203
  exports.DashboardView = DashboardView;
12170
14204
  exports.DashboardViewSimple = DashboardViewSimple;
12171
14205
  exports.DeframeComponentsProvider = DeframeComponentsProvider;
14206
+ exports.DepositSuccessIcon = DepositSuccessIcon;
12172
14207
  exports.DetailsHeader = DetailsHeader;
12173
14208
  exports.EarnAmountInputView = EarnAmountInputView;
12174
14209
  exports.EarnBalanceCard = EarnBalanceCard;
@@ -12236,6 +14271,18 @@ exports.LoadingDots = LoadingDots;
12236
14271
  exports.LowRiskBadge = LowRiskBadge;
12237
14272
  exports.MediumRiskBadge = MediumRiskBadge;
12238
14273
  exports.Navbar = Navbar;
14274
+ exports.OnchainDepositFormSimpleView = OnchainDepositFormSimpleView;
14275
+ exports.OnchainDepositFormView = OnchainDepositFormView;
14276
+ exports.OnchainDepositSuccessSimpleView = OnchainDepositSuccessSimpleView;
14277
+ exports.OnchainDepositSuccessView = OnchainDepositSuccessView;
14278
+ exports.OnchainWithdrawChainSelectorView = OnchainWithdrawChainSelectorView;
14279
+ exports.OnchainWithdrawFailedView = OnchainWithdrawFailedView;
14280
+ exports.OnchainWithdrawFormSimpleView = OnchainWithdrawFormSimpleView;
14281
+ exports.OnchainWithdrawFormView = OnchainWithdrawFormView;
14282
+ exports.OnchainWithdrawProcessingSimpleView = OnchainWithdrawProcessingSimpleView;
14283
+ exports.OnchainWithdrawSignatureWarningSimpleView = OnchainWithdrawSignatureWarningSimpleView;
14284
+ exports.OnchainWithdrawSignatureWarningView = OnchainWithdrawSignatureWarningView;
14285
+ exports.OnchainWithdrawSuccessView = OnchainWithdrawSuccessView;
12239
14286
  exports.PercentageButton = PercentageButton;
12240
14287
  exports.PrimaryButton = PrimaryButton;
12241
14288
  exports.ProcessingBadge = ProcessingBadge;
@@ -12297,6 +14344,9 @@ exports.WalletConnectPanel = WalletConnectPanel;
12297
14344
  exports.WalletItem = WalletItem;
12298
14345
  exports.WalletList = ConnectWalletList;
12299
14346
  exports.WalletListContainer = WalletListContainer;
14347
+ exports.WithdrawFailedIcon = WithdrawFailedIcon;
14348
+ exports.WithdrawSuccessIcon = WithdrawSuccessIcon;
12300
14349
  exports.isDustValue = isDustValue;
14350
+ exports.truncateAddress = truncateAddress;
12301
14351
  //# sourceMappingURL=index.js.map
12302
14352
  //# sourceMappingURL=index.js.map