@deframe-sdk/components 0.1.28 → 0.1.29

package/dist/index.mjs

@@ -4,9 +4,10 @@ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiA
 import * as React6 from 'react';
 import React6__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 import { PiClockCountdownBold } from 'react-icons/pi';
+import QRCode from 'react-qr-code';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -4339,9 +4340,9 @@ var ChooseAnAssetSwapView = ({
               /* @__PURE__ */ jsx(LoadingDots, {})
             ] }) }),
             displayedTokens.map((token, index) => {
-              const balance = findBalance(token);
-              const tokenPriceUSD = Number(balance == null ? void 0 : balance.priceUSD) || 0;
-              const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, tokenPriceUSD, 2) : "0";
+              const balance = findBalance == null ? void 0 : findBalance(token);
+              const priceUSD = Number(balance == null ? void 0 : balance.priceUSD) || token.priceInUSD || 0;
+              const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, priceUSD, token.decimals) : "0";
               return /* @__PURE__ */ jsxs(
                 ListItem,
                 {
@@ -4352,7 +4353,14 @@ var ChooseAnAssetSwapView = ({
                   "data-chain-id": token.chainId,
                   "data-symbol": token.symbol,
                   children: [
-                    /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
+                    /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-10 h-10 flex-shrink-0", children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: token.logoURI || "",
+                        alt: token.name,
+                        className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
+                      }
+                    ) }) }),
                     /* @__PURE__ */ jsxs(ListItemContent, { children: [
                       /* @__PURE__ */ jsx(TextBody, { children: token.name }),
                       /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
@@ -6232,7 +6240,11 @@ var ChooseANetworkView = ({
   autoFocus = true,
   chains,
   pageSize = 10,
-  onChainClick
+  onChainClick,
+  actionSheetId,
+  isOpen,
+  currentActionSheetId,
+  onClose
 }) => {
   const [searchValue, setSearchValue] = useState("");
   const [page, setPage] = useState(1);
@@ -6244,52 +6256,72 @@ var ChooseANetworkView = ({
   );
   const displayedChains = filteredChains.slice(0, page * pageSize);
   const hasMore = filteredChains.length > page * pageSize;
-  return /* @__PURE__ */ jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
-      /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx(
-        SearchInput,
+  const content = /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+    onClose && /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton_default, { testId: `choose-a-network-close-${actionSheetId != null ? actionSheetId : "default"}`, onClick: onClose }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+        /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            value: searchValue,
+            onChange: setSearchValue,
+            placeholder: labels.searchPlaceholder,
+            autoFocus
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          value: searchValue,
-          onChange: setSearchValue,
-          placeholder: labels.searchPlaceholder,
-          autoFocus
+          "data-testid": "choose-a-network-list",
+          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",
+          children: [
+            displayedChains.map((chain) => /* @__PURE__ */ jsxs(
+              ListItem,
+              {
+                className: "w-full flex-shrink-0",
+                onClick: () => onChainClick(chain.chainId),
+                "data-testid": `choose-network-item-${chain.chainId}`,
+                "data-chain-id": chain.chainId,
+                children: [
+                  /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: chain.imageUrl,
+                      alt: chain.name,
+                      className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
+                ]
+              },
+              `chain-${chain.chainId}`
+            )),
+            hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
+          ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "choose-a-network-list",
-        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",
-        children: [
-          displayedChains.map((chain) => /* @__PURE__ */ jsxs(
-            ListItem,
-            {
-              className: "w-full flex-shrink-0",
-              onClick: () => onChainClick(chain.chainId),
-              "data-testid": `choose-network-item-${chain.chainId}`,
-              "data-chain-id": chain.chainId,
-              children: [
-                /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: chain.imageUrl,
-                    alt: chain.name,
-                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
-              ]
-            },
-            `chain-${chain.chainId}`
-          )),
-          hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
-        ]
-      }
-    )
-  ] }) });
+    ] })
+  ] });
+  if (!actionSheetId) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-center", "data-testid": `choose-a-network-wrapper-${actionSheetId}`, children: /* @__PURE__ */ jsx(
+    ActionSheet,
+    {
+      id: actionSheetId,
+      currentActionSheetId: currentActionSheetId != null ? currentActionSheetId : null,
+      isOpen: isOpen != null ? isOpen : false,
+      onClose: onClose != null ? onClose : (() => {
+      }),
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: content
+    }
+  ) });
 };
 function useIsMobile(breakpoint = 640) {
   const [isMobile, setIsMobile] = useState(
@@ -8254,6 +8286,7 @@ var EarnInvestmentDetailsView = (props) => {
 var EarnTokenSelectorView = ({
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   onNetworkClick,
   isLoading,
   selectTokenLabel,
@@ -8268,7 +8301,7 @@ var EarnTokenSelectorView = ({
     "button",
     {
       type: "button",
-      onClick: onTokenClick,
+      onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
       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",
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8286,7 +8319,7 @@ var EarnTokenSelectorView = ({
       ] })
     }
   ) }),
-  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+  !onNetworkAndAssetClick && /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
     /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
     /* @__PURE__ */ jsxs(
       "button",
@@ -8349,6 +8382,7 @@ var EarnPercentageButtonsView = ({
 var EarnWithdrawTokenSelectorView = ({
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   onNetworkClick,
   selectTokenLabel,
   chainLabel,
@@ -8362,7 +8396,7 @@ var EarnWithdrawTokenSelectorView = ({
     "button",
     {
       type: "button",
-      onClick: onTokenClick,
+      onClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
       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",
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8380,7 +8414,7 @@ var EarnWithdrawTokenSelectorView = ({
       ] })
     }
   ) }),
-  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+  !onNetworkAndAssetClick && /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
     /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
     /* @__PURE__ */ jsxs(
       "button",
@@ -8503,6 +8537,7 @@ var EarnDepositFormView = ({
   // Token selector
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   isLoadingToken,
   selectTokenLabel,
   // Chain selector
@@ -8560,6 +8595,7 @@ var EarnDepositFormView = ({
           {
             selectedToken,
             onTokenClick,
+            onNetworkAndAssetClick,
             isLoading: isLoadingToken,
             selectTokenLabel,
             chainLabel,
@@ -8634,14 +8670,14 @@ var EarnDepositFormView = ({
 ] });
 var EarnTokenSelectorSimpleView = ({
   selectedToken,
-  onTokenClick,
+  onNetworkAndAssetClick,
   isLoading,
   selectTokenLabel,
   chainLabel,
   chainImage
 }) => {
   const hasToken = selectedToken != null;
-  const isInteractive = !!onTokenClick;
+  const isInteractive = !!onNetworkAndAssetClick;
   const baseClasses = [
     "inline-flex items-center gap-[10px]",
     "h-[54px] px-[10px]",
@@ -8665,7 +8701,7 @@ var EarnTokenSelectorSimpleView = ({
       type: "button",
       "data-slot": "token-selector-simple",
       "data-test-id": "earn-token-selector-simple-view",
-      onClick: onTokenClick,
+      onClick: onNetworkAndAssetClick,
       disabled: !isInteractive,
       "aria-label": hasToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
       className: selectorClasses,
@@ -8991,6 +9027,7 @@ var EarnDepositFormViewSimple = ({
   // Token selector
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   isLoadingToken,
   selectTokenLabel,
   // Chain selector
@@ -9133,6 +9170,7 @@ var EarnDepositFormViewSimple = ({
                             {
                               selectedToken,
                               onTokenClick,
+                              onNetworkAndAssetClick,
                               isLoading: isLoadingToken,
                               selectTokenLabel,
                               chainLabel,
@@ -9315,6 +9353,7 @@ var EarnWithdrawFormView = ({
   // Token selector
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   selectTokenLabel,
   // Chain selector
   chainLabel,
@@ -9375,6 +9414,7 @@ var EarnWithdrawFormView = ({
           {
             selectedToken,
             onTokenClick,
+            onNetworkAndAssetClick,
             selectTokenLabel,
             chainLabel,
             chainImage,
@@ -9452,6 +9492,7 @@ var EarnWithdrawFormViewSimple = ({
   // Token selector
   selectedToken,
   onTokenClick,
+  onNetworkAndAssetClick,
   selectTokenLabel,
   // Chain selector
   chainLabel,
@@ -9587,6 +9628,7 @@ var EarnWithdrawFormViewSimple = ({
                             {
                               selectedToken,
                               onTokenClick,
+                              onNetworkAndAssetClick,
                               isLoading: false,
                               selectTokenLabel,
                               chainLabel,
@@ -10828,6 +10870,1040 @@ var EarnWithdrawFailedSimpleView = ({
     }
   ) });
 };
+function OnchainDepositFormView({
+  selectedToken,
+  onTokenClick,
+  chainCount,
+  selectedChain,
+  onNetworkClick,
+  isGenerating,
+  showContent,
+  depositAddress,
+  showInfoBanner,
+  selectedTokenName,
+  selectedChainName,
+  isSubmitDisabled,
+  onSubmit,
+  submitLabel,
+  onBack,
+  labels,
+  className
+}) {
+  const hasAllData = !!(selectedToken && selectedChain);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "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",
+        className
+      ),
+      "data-test-id": "onchain-deposit-form-view",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
+        /* @__PURE__ */ jsx(
+          SecondaryButton,
+          {
+            onClick: onBack,
+            className: "mb-4 !border-0 max-w-[84px]",
+            "aria-label": labels.backLabel,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h2", children: labels.title }),
+        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded lg:!bg-[var(--deframe-widget-color-bg-tertiary)]",
+            "data-test-id": "onchain-deposit-token-card",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: onTokenClick,
+                  className: "flex justify-between items-center border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full cursor-pointer",
+                  "data-test-id": "onchain-deposit-token-button",
+                  "aria-label": labels.tokenPlaceholder,
+                  children: [
+                    selectedToken ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: selectedToken.logoURI || "",
+                          alt: selectedToken.symbol,
+                          className: "w-6 h-6 rounded-full object-cover"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                        /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }),
+                        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedToken.name })
+                      ] })
+                    ] }) : /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }),
+                    /* @__PURE__ */ jsx(MdOutlineArrowDropDown, {})
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center mt-6", children: [
+                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.chainDirectionLabel }),
+                /* @__PURE__ */ jsx("div", { className: "relative ml-4 flex-1", children: chainCount === 0 ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    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",
+                    "data-test-id": "onchain-deposit-chain-disabled",
+                    children: [
+                      /* @__PURE__ */ jsx(TextAccent, { variant: "accent-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
+                      /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "flex-shrink-0" })
+                    ]
+                  }
+                ) : chainCount > 1 ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: onNetworkClick,
+                    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",
+                    "data-test-id": "onchain-deposit-chain-dropdown",
+                    "aria-label": labels.chainPlaceholder,
+                    children: [
+                      selectedChain ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: selectedChain.iconUrl,
+                            alt: selectedChain.name,
+                            className: "w-4 h-4 rounded-full object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: selectedChain.name })
+                      ] }) : /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "whitespace-nowrap", children: labels.chainPlaceholder }),
+                      /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "flex-shrink-0" })
+                    ]
+                  }
+                ) : selectedChain ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    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]",
+                    "data-test-id": "onchain-deposit-chain-static",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: selectedChain.iconUrl,
+                          alt: selectedChain.name,
+                          className: "w-5 h-5 rounded-full object-cover"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: selectedChain.name })
+                    ]
+                  }
+                ) : null })
+              ] })
+            ]
+          }
+        ),
+        showInfoBanner && /* @__PURE__ */ jsx(BannerNotification, { message: labels.infoBanner, variant: "info" }),
+        hasAllData && /* @__PURE__ */ jsxs(Fragment, { children: [
+          isGenerating && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "my-4 p-8 w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded",
+              "data-test-id": "onchain-deposit-skeleton",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 animate-pulse", children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "1.3rem", variant: "text" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: "70%", height: "1.3rem", variant: "text" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "2rem", variant: "text" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: "15rem", height: "15rem", variant: "rect", className: "rounded" })
+              ] })
+            }
+          ),
+          showContent && selectedChain && depositAddress && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              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)]",
+              "data-test-id": "onchain-deposit-address-card",
+              children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-center mb-6", children: [
+                  labels.depositInstructionPrefix,
+                  " ",
+                  /* @__PURE__ */ jsx("strong", { children: selectedChainName }),
+                  ".",
+                  " ",
+                  /* @__PURE__ */ jsx("br", {}),
+                  labels.depositInstructionSuffix
+                ] }),
+                /* @__PURE__ */ jsx(AddressDisplay, { address: depositAddress, className: "mb-4", onCopy: () => {
+                } }),
+                /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+                  QRCode,
+                  {
+                    size: 174,
+                    value: depositAddress,
+                    className: "border-12 border-[var(--deframe-widget-color-bg-tertiary)] rounded"
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        !hasAllData && /* @__PURE__ */ jsx("div", { className: "my-4 p-8 w-full", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 mb-4 min-h-[320px]" }) }),
+        hasAllData && selectedTokenName && selectedChainName && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: labels.warnBannerTokenChain, variant: "warning" }) }),
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            disabled: isSubmitDisabled,
+            onClick: onSubmit,
+            "data-test-id": "onchain-deposit-submit",
+            children: submitLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/utils/truncate-address.ts
+function truncateAddress(address, startChars = 6, endChars = 4) {
+  if (!address) return "";
+  if (address.length <= startChars + endChars) return address;
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
+}
+function DepositSuccessIcon() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
+      "data-test-id": "deposit-success-icon",
+      children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 5V15M10 15L6 11M10 15L14 11",
+          stroke: "#121212",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+}
+function OnchainDepositSuccessView({
+  tokenSymbol,
+  chainName,
+  formattedAmount,
+  depositAddress,
+  txHash,
+  blockExplorerUrl,
+  onViewHistory,
+  onClose,
+  labels,
+  className,
+  icon
+}) {
+  const [showDetails, setShowDetails] = useState(true);
+  const [copied, setCopied] = useState(false);
+  const handleCopyAddress = async () => {
+    try {
+      await navigator.clipboard.writeText(depositAddress);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "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",
+        className
+      ),
+      "data-test-id": "onchain-deposit-success-view",
+      children: [
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            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",
+            "aria-label": labels.closeAriaLabel,
+            "data-test-id": "onchain-deposit-success-close",
+            children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-6 lg:!p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+            icon != null ? icon : /* @__PURE__ */ jsx(DepositSuccessIcon, {}),
+            /* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center mt-[-8px]", children: labels.subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-deposit-success-info",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.assetLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: tokenSymbol })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.networkLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: chainName })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.amountLabel }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
+                    formattedAmount,
+                    " ",
+                    tokenSymbol
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.addressLabel }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: truncateAddress(depositAddress) }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleCopyAddress,
+                        className: "text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition cursor-pointer",
+                        "aria-label": labels.addressLabel,
+                        "data-test-id": "onchain-deposit-success-copy",
+                        children: /* @__PURE__ */ jsx(MdContentCopy, { className: "w-4 h-4" })
+                      }
+                    ),
+                    copied && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[color:var(--deframe-widget-color-state-success)]", children: labels.copiedLabel })
+                  ] })
+                ] }),
+                txHash && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txIdLabel }),
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `${blockExplorerUrl}/tx/${txHash}`,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
+                      "data-test-id": "onchain-deposit-success-explorer",
+                      children: labels.viewExplorerLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-deposit-success-details",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setShowDetails(!showDetails),
+                    className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
+                    "aria-label": labels.detailsTitle,
+                    "data-test-id": "onchain-deposit-success-details-toggle",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
+                      /* @__PURE__ */ jsx(
+                        MdOutlineExpandMore,
+                        {
+                          className: twMerge(
+                            "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
+                            showDetails && "rotate-180"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] font-medium", children: labels.estimatedTimeLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.estimatedTimeValue })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children: labels.steps.map((step, index) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                        /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) }),
+                        index < labels.steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-[2px] h-6 bg-[var(--deframe-widget-color-state-success)]" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col", index < labels.steps.length - 1 && "pb-2"), children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.label }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: twMerge(
+                              "text-[12px] font-semibold",
+                              step.statusText && "text-[color:var(--deframe-widget-color-state-success)]"
+                            ),
+                            children: (_b = step.statusText) != null ? _b : (_a = labels.steps[index]) == null ? void 0 : _a.label
+                          }
+                        )
+                      ] })
+                    ] }, step.label);
+                  }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-deposit-success-action", children: labels.viewHistoryLabel }) })
+        ] }) })
+      ]
+    }
+  );
+}
+function OnchainWithdrawFormView({
+  selectedToken,
+  onTokenClick,
+  isProcessing,
+  chainCount,
+  selectedChain,
+  onNetworkClick,
+  formattedBalance,
+  amount,
+  onAmountChange,
+  isAmountInputDisabled,
+  onMaxClick,
+  showMaxButton,
+  formattedAmountUsd,
+  destinationNetwork,
+  destinationAddress,
+  onDestinationAddressChange,
+  txDetails,
+  isBelowMinAmount,
+  walletError,
+  transferError,
+  showWarning,
+  warningLabel,
+  isSubmitDisabled,
+  onSubmit,
+  submitLabel,
+  onBack,
+  labels,
+  className
+}) {
+  const [showTxDetails, setShowTxDetails] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "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",
+        className
+      ),
+      "data-test-id": "onchain-withdraw-form-view",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full px-2 py-0.5 rounded gap-1", children: [
+        /* @__PURE__ */ jsx(
+          SecondaryButton,
+          {
+            onClick: onBack,
+            className: "mb-4 !border-0 max-w-[84px]",
+            "aria-label": labels.backLabel,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(MdOutlineArrowBack, { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary)]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.backLabel })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h2", children: labels.title }),
+        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: labels.subtitle }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "my-4 p-[var(--deframe-widget-size-padding-x-md)] w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+            "data-test-id": "onchain-withdraw-token-card",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-[var(--deframe-widget-size-gap-md)] items-center", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: onTokenClick,
+                    disabled: isProcessing,
+                    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",
+                    "data-test-id": "onchain-withdraw-token-button",
+                    "aria-label": labels.tokenPlaceholder,
+                    children: [
+                      selectedToken ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: selectedToken.logoURI || "",
+                            alt: selectedToken.symbol,
+                            className: "w-6 h-6 rounded-full object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "text-left", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: selectedToken.symbol }) })
+                      ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.tokenPlaceholder }) }),
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
+                  labels.balancePrefix,
+                  ": ",
+                  formattedBalance
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.chainDirectionLabel }),
+                  chainCount === 0 || !selectedChain ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      disabled: true,
+                      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",
+                      "data-test-id": "onchain-withdraw-chain-disabled",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.chainPlaceholder }),
+                        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+                      ]
+                    }
+                  ) : chainCount > 1 ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: onNetworkClick,
+                      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",
+                      "data-test-id": "onchain-withdraw-chain-dropdown",
+                      "aria-label": labels.chainPlaceholder,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: selectedChain.iconUrl,
+                            alt: selectedChain.name,
+                            className: "w-3 h-3 rounded-full object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name }),
+                        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(MdOutlineArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      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)]",
+                      "data-test-id": "onchain-withdraw-chain-static",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: selectedChain.iconUrl,
+                            alt: selectedChain.name,
+                            className: "w-3 h-3 rounded-full object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: selectedChain.name })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-[var(--deframe-widget-size-gap-xs)] relative", children: [
+                /* @__PURE__ */ jsx(
+                  Input2,
+                  {
+                    id: "withdraw-amount-input",
+                    placeholder: "0.00",
+                    inputMode: "decimal",
+                    autoComplete: "off",
+                    "aria-label": "Amount to withdraw",
+                    min: "0",
+                    step: "any",
+                    type: "number",
+                    value: amount,
+                    onChange: (e) => onAmountChange(e.target.value),
+                    onWheel: (event) => {
+                      event.currentTarget.blur();
+                    },
+                    disabled: isAmountInputDisabled,
+                    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",
+                    "data-test-id": "onchain-withdraw-amount-input"
+                  }
+                ),
+                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: formattedAmountUsd }),
+                showMaxButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onMaxClick,
+                    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",
+                    "data-test-id": "onchain-withdraw-max-button",
+                    "aria-label": "Max",
+                    children: "Max"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-network", children: [
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "mb-2", children: labels.destinationNetworkLabel }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: twMerge(
+                "flex items-center gap-2 border border-[var(--deframe-widget-color-border-secondary)] rounded p-4 w-full",
+                !destinationNetwork ? "opacity-50 cursor-not-allowed" : "bg-[var(--deframe-widget-color-bg-tertiary)]"
+              ),
+              children: destinationNetwork ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: destinationNetwork.iconUrl,
+                    alt: destinationNetwork.name,
+                    className: "w-5 h-5 rounded-full object-cover"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: destinationNetwork.name }),
+                /* @__PURE__ */ jsx("span", { className: "ml-auto text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkSameHint })
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationNetworkEmpty })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-4", "data-test-id": "onchain-withdraw-destination-address", children: /* @__PURE__ */ jsx(
+          Input2,
+          {
+            type: "text",
+            label: labels.destinationAddressLabel,
+            placeholder: labels.destinationAddressPlaceholder,
+            value: destinationAddress,
+            onChange: (e) => onDestinationAddressChange(e.target.value),
+            disabled: isProcessing,
+            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"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(BannerNotification, { message: labels.infoBanner, variant: "info", className: "gap-3" }),
+        isBelowMinAmount && /* @__PURE__ */ jsx(BannerNotification, { message: labels.minAmountWarning, variant: "warning", className: "gap-3" }),
+        txDetails !== null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "my-4 p-6 w-full bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+            "data-test-id": "onchain-withdraw-tx-details",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setShowTxDetails((v) => !v),
+                  className: "flex justify-between items-center w-full text-left cursor-pointer",
+                  "aria-label": labels.txDetailsTitle,
+                  "data-test-id": "onchain-withdraw-tx-details-toggle",
+                  children: [
+                    /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-semibold", children: labels.txDetailsTitle }),
+                    /* @__PURE__ */ jsx(MdOutlineExpandMore, { className: twMerge("transition-transform", showTxDetails && "rotate-180") })
+                  ]
+                }
+              ),
+              showTxDetails && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsAmountLabel }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedAmount })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsFeeLabel }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "font-semibold", children: txDetails.formattedFee })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--deframe-widget-color-border-secondary)] pt-3 flex justify-between items-center", children: [
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.txDetailsReceiveLabel }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-bold", children: txDetails.formattedReceive })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        walletError && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: walletError, variant: "error" }) }),
+        transferError && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: transferError, variant: "error", className: "gap-3" }) }),
+        showWarning && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(BannerNotification, { message: warningLabel, variant: "warning" }) }),
+        /* @__PURE__ */ jsx(PrimaryButton, { disabled: isSubmitDisabled, onClick: onSubmit, "data-test-id": "onchain-withdraw-submit", children: isProcessing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          submitLabel,
+          " ",
+          /* @__PURE__ */ jsx(LoadingDots, {})
+        ] }) : submitLabel })
+      ] })
+    }
+  );
+}
+function OnchainWithdrawChainSelectorView({
+  actionSheetId,
+  isOpen,
+  currentActionSheetId,
+  onClose,
+  chains,
+  onChainClick,
+  title,
+  closeAriaLabel = "Close"
+}) {
+  return /* @__PURE__ */ jsx(
+    ActionSheet,
+    {
+      id: actionSheetId,
+      isOpen,
+      currentActionSheetId,
+      onClose,
+      height: "auto",
+      position: "bottom",
+      closeOnBackdropClick: true,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          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",
+          "data-test-id": "onchain-withdraw-chain-selector",
+          children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] text-[var(--deframe-widget-color-text-primary)] flex flex-col relative min-h-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[var(--deframe-widget-color-border-tertiary)] flex", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                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",
+                "aria-label": closeAriaLabel,
+                "data-test-id": "onchain-withdraw-chain-selector-close",
+                children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col flex-1 min-h-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-none p-6 pb-0", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "text-h5 text-[color:var(--deframe-widget-color-text-secondary)] font-bold",
+                    "data-test-id": "onchain-withdraw-chain-selector-title",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx("br", {})
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 w-full px-6 pb-6 flex-1 min-h-0 overflow-y-auto", children: chains.map((chain) => /* @__PURE__ */ jsxs(
+                ListItem,
+                {
+                  onClick: () => onChainClick(chain.chainId),
+                  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`,
+                  "data-test-id": `onchain-withdraw-chain-${chain.chainId}`,
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: chain.iconUrl,
+                        alt: chain.name,
+                        className: "w-8 h-8 rounded-full object-cover"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-large", className: "font-medium", children: chain.name }) }),
+                    /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chain.formattedBalance }) })
+                  ]
+                },
+                chain.chainId
+              )) })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+function WithdrawSuccessIcon() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-20 h-20 bg-[var(--deframe-widget-color-state-success)] rounded-full flex items-center justify-center",
+      "data-test-id": "withdraw-success-icon",
+      children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 15V5M10 5L6 9M10 5L14 9",
+          stroke: "#121212",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+}
+function OnchainWithdrawSuccessView({
+  tokenSymbol,
+  tokenLogoURI,
+  formattedAmount,
+  chainName,
+  chainIconUrl,
+  destinationAddress,
+  blockchainCost,
+  txHash,
+  blockExplorerUrl,
+  onViewHistory,
+  onClose,
+  labels,
+  className,
+  icon
+}) {
+  const [showDetails, setShowDetails] = useState(true);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "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",
+        className
+      ),
+      "data-test-id": "onchain-withdraw-success-view",
+      children: [
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            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",
+            "aria-label": labels.closeAriaLabel,
+            "data-test-id": "onchain-withdraw-success-close",
+            children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+            icon != null ? icon : /* @__PURE__ */ jsx(WithdrawSuccessIcon, {}),
+            /* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", children: labels.subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-withdraw-success-summary",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-[32px] h-[32px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: tokenLogoURI ? /* @__PURE__ */ jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
+                  ] })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-withdraw-success-details",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setShowDetails(!showDetails),
+                    className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
+                    "aria-label": labels.detailsTitle,
+                    "data-test-id": "onchain-withdraw-success-details-toggle",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
+                      /* @__PURE__ */ jsx(
+                        MdOutlineExpandMore,
+                        {
+                          className: twMerge(
+                            "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
+                            showDetails && "rotate-180"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.transactionLabel }),
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: `${blockExplorerUrl}/tx/${txHash}`,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "text-[12px] text-[color:var(--deframe-widget-color-state-success)] hover:underline font-semibold",
+                        "data-test-id": "onchain-withdraw-success-explorer",
+                        children: labels.viewExplorerLabel
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-full mt-8", children: /* @__PURE__ */ jsx(PrimaryButton, { onClick: onViewHistory, "data-test-id": "onchain-withdraw-success-action", children: labels.viewHistoryLabel }) })
+        ] }) })
+      ]
+    }
+  );
+}
+function WithdrawFailedIcon() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "w-20 h-20 rounded-full flex items-center justify-center bg-[var(--deframe-widget-color-state-error)]",
+      "data-test-id": "withdraw-failed-icon",
+      children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 6L6 18M6 6L18 18",
+          stroke: "#121212",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+}
+function OnchainWithdrawFailedView({
+  tokenSymbol,
+  tokenLogoURI,
+  formattedAmount,
+  chainName,
+  chainIconUrl,
+  destinationAddress,
+  blockchainCost,
+  errorMessage,
+  onCancel,
+  onTryAgain,
+  labels,
+  className,
+  icon
+}) {
+  const [showDetails, setShowDetails] = useState(true);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "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",
+        className
+      ),
+      "data-test-id": "onchain-withdraw-failed-view",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onCancel,
+            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",
+            "aria-label": labels.closeAriaLabel,
+            "data-test-id": "onchain-withdraw-failed-close",
+            children: /* @__PURE__ */ jsx(MdOutlineClose, { className: "w-6 h-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-6 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+            icon != null ? icon : /* @__PURE__ */ jsx(WithdrawFailedIcon, {}),
+            /* @__PURE__ */ jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children: labels.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", children: errorMessage || labels.defaultErrorMessage })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full mt-8 p-5 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-withdraw-failed-summary",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-[32px] h-[32px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: tokenLogoURI ? /* @__PURE__ */ jsx("img", { src: tokenLogoURI, alt: tokenSymbol, className: "w-[32px] h-[32px] object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-bold", children: tokenSymbol.slice(0, 2).toUpperCase() }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1", children: /* @__PURE__ */ jsx("img", { src: chainIconUrl, alt: chainName, className: "w-[16px] h-[16px] rounded-full object-cover" }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.sendingLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[20px] font-semibold leading-tight", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px] mt-4", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold break-all leading-snug", children: destinationAddress })
+                  ] })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "w-full mt-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded",
+              "data-test-id": "onchain-withdraw-failed-details",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setShowDetails(!showDetails),
+                    className: "flex justify-between items-center w-full text-left cursor-pointer p-4",
+                    "aria-label": labels.detailsTitle,
+                    "data-test-id": "onchain-withdraw-failed-details-toggle",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-semibold", children: labels.detailsTitle }),
+                      /* @__PURE__ */ jsx(
+                        MdOutlineExpandMore,
+                        {
+                          className: twMerge(
+                            "transition-transform text-[color:var(--deframe-widget-color-text-secondary)]",
+                            showDetails && "rotate-180"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showDetails && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.withdrawAmountLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 border-b border-[var(--deframe-widget-color-border-secondary)]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.blockchainCostLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold", children: blockchainCost })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.youReceiveLabel }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-semibold", children: [
+                      formattedAmount,
+                      " ",
+                      tokenSymbol
+                    ] })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "w-full mt-8 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx(SecondaryButton, { onClick: onCancel, "data-test-id": "onchain-withdraw-failed-cancel", children: labels.cancelLabel }),
+            /* @__PURE__ */ jsx(PrimaryButton, { onClick: onTryAgain, "data-test-id": "onchain-withdraw-failed-retry", children: labels.tryAgainLabel })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 var DashboardCard = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { "data-test-id": "dashboard-card", className: twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
 };
@@ -12113,6 +13189,6 @@ var DashboardViewSimple = ({
   );
 };
 
-export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, isDustValue };
+export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OnchainDepositFormView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedView, OnchainWithdrawFormView, OnchainWithdrawSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WithdrawFailedIcon, WithdrawSuccessIcon, isDustValue, truncateAddress };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map