@deframe-sdk/components 0.1.77 → 0.1.79

package/dist/index.js

@@ -7127,6 +7127,7 @@ var SwapFromCardViewSimple = ({
   onAmountChange,
   amountUsdFormatted,
   isAmountUsdLoading,
+  isBalanceLoading,
   field,
   percentageOptions,
   onPercentageClick,
@@ -7265,7 +7266,7 @@ var SwapFromCardViewSimple = ({
                     {
                       "data-test-id": "swap-from-card-simple-balance-value",
                       className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
-                      children: balanceFormatted
+                      children: isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : balanceFormatted
                     }
                   )
                 ]
@@ -7284,7 +7285,7 @@ var SwapFromCardViewSimple = ({
                     {
                       "data-test-id": "swap-from-card-simple-balance-value",
                       className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
-                      children: balanceFormatted
+                      children: isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : balanceFormatted
                     }
                   )
                 ]
@@ -7697,7 +7698,8 @@ var SwapToCardViewSimple = ({
   outputAmount,
   isOutputLoading,
   outputUsdFormatted,
-  isOutputUsdLoading
+  isOutputUsdLoading,
+  isBalanceLoading
 }) => {
   const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
   const isEmpty = !outputAmount || Number(outputAmount) === 0;
@@ -7909,7 +7911,7 @@ var SwapToCardViewSimple = ({
                 {
                   "data-test-id": "swap-to-simple-balance-value",
                   className: "text-[color:var(--deframe-widget-color-text-secondary)]",
-                  children: balanceFormatted
+                  children: isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : balanceFormatted
                 }
               )
             ]
@@ -12338,6 +12340,7 @@ var EarnAmountInputView = ({
   onChange,
   ariaLabel,
   dollarAmountFormatted,
+  disabled,
   availableBalanceFormatted
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
@@ -12351,6 +12354,7 @@ var EarnAmountInputView = ({
           autoComplete: "off",
           "aria-label": ariaLabel,
           value,
+          disabled,
           min: "0",
           step: "any",
           className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[105px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -13007,7 +13011,8 @@ var EarnAmountInputSimpleView = ({
   value,
   onChange,
   ariaLabel,
-  dollarAmountFormatted
+  dollarAmountFormatted,
+  disabled
 }) => {
   const isEmpty = !value || value === "0";
   const fontSizeClass = useResponsiveFontSize(value || "");
@@ -13048,9 +13053,10 @@ var EarnAmountInputSimpleView = ({
             placeholder: "0",
             "aria-label": ariaLabel,
             value,
+            disabled,
             onChange,
             onWheel: (e) => e.currentTarget.blur(),
-            className: inputClasses
+            className: tailwindMerge.twMerge(inputClasses, "disabled:cursor-not-allowed disabled:opacity-50")
           }
         ),
         dollarAmountFormatted && /* @__PURE__ */ jsxRuntime.jsx(
@@ -18935,6 +18941,388 @@ var OfframpFailedSimpleView = () => {
     }
   ) });
 };
+
+// src/stories/wallet-transfer-flow-view/layoutClasses.ts
+var walletTransferFrameClasses = [
+  "relative mx-auto mt-[40px] flex w-[620px] max-w-[calc(100vw-32px)] flex-col overflow-hidden",
+  "rounded-[var(--deframe-widget-size-radius-xs)]",
+  "bg-[var(--deframe-widget-color-bg-subtle)]",
+  "px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]",
+  "font-[var(--deframe-widget-font-family)]",
+  "text-[color:var(--deframe-widget-color-text-primary)]"
+].join(" ");
+var walletTransferHeaderClasses = [
+  "flex items-start gap-[var(--deframe-widget-size-gap-sm)]",
+  "px-[var(--deframe-widget-size-padding-x-sm)]"
+].join(" ");
+var walletTransferTitleClasses = [
+  "text-[21px]",
+  "[font-weight:var(--deframe-widget-font-weight-bold)]",
+  "leading-[1.2]",
+  "text-[color:var(--deframe-widget-color-text-primary)]"
+].join(" ");
+var walletTransferSubtitleClasses = [
+  "mt-[var(--deframe-widget-size-gap-xs)]",
+  "text-[14px]",
+  "leading-[1.35]",
+  "text-[color:var(--deframe-widget-color-text-primary)]"
+].join(" ");
+var walletTransferBodyClasses = [
+  "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+  "px-[var(--deframe-widget-size-padding-x-sm)]",
+  "py-[var(--deframe-widget-size-padding-y-md)]"
+].join(" ");
+var walletTransferInputCardClasses = [
+  "rounded-[var(--deframe-widget-size-radius-sm)]",
+  "border border-[color:var(--deframe-widget-color-border-secondary)]",
+  "bg-[var(--deframe-widget-color-bg-subtle)]",
+  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
+].join(" ");
+var walletTransferTokenSelectorClasses = [
+  "bg-[var(--deframe-widget-color-bg-raised)]",
+  "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-raised)_92%,transparent)]"
+].join(" ");
+var walletTransferFooterClasses = [
+  "px-[var(--deframe-widget-size-padding-x-sm)]",
+  "pt-[var(--deframe-widget-size-padding-y-md)]"
+].join(" ");
+function WalletOnchainDepositView({
+  token,
+  network,
+  depositAddress,
+  warningMessage,
+  isPreparing,
+  isReady,
+  qrCode,
+  onTokenClick,
+  onAddressCopy,
+  onSubmit,
+  labels,
+  className
+}) {
+  var _a;
+  const selectedToken = token ? { symbol: token.symbol, logoURI: token.logoURI } : null;
+  const hasSelection = Boolean(token && network);
+  const canSubmit = hasSelection && isReady;
+  const submitLabel = canSubmit ? labels.submitReady : labels.submitIdle;
+  const showAddress = canSubmit && depositAddress;
+  const showIdle = !isPreparing && !showAddress;
+  const addressCopyHandler = React6__namespace.useCallback(() => {
+    if (!depositAddress) return;
+    onAddressCopy == null ? void 0 : onAddressCopy(depositAddress);
+  }, [depositAddress, onAddressCopy]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "wallet-onchain-deposit-view",
+      className: tailwindMerge.twMerge(
+        walletTransferFrameClasses,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("header", { className: walletTransferHeaderClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: walletTransferTitleClasses, children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: walletTransferSubtitleClasses, children: labels.subtitle })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: walletTransferBodyClasses, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "section",
+            {
+              "data-test-id": "wallet-onchain-deposit-view-asset-card",
+              className: walletTransferInputCardClasses,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                EarnTokenSelectorSimpleView,
+                {
+                  selectedToken,
+                  onTokenClick,
+                  onNetworkAndAssetClick: onTokenClick,
+                  isLoading: false,
+                  selectTokenLabel: labels.tokenPlaceholder,
+                  chainLabel: (_a = network == null ? void 0 : network.name) != null ? _a : labels.networkPlaceholder,
+                  chainImage: network == null ? void 0 : network.iconUrl,
+                  className: tailwindMerge.twMerge(walletTransferTokenSelectorClasses, "w-full")
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EarnInlineNotificationSimpleView,
+            {
+              variant: "warning",
+              message: warningMessage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "section",
+            {
+              "data-test-id": "wallet-onchain-deposit-view-address-card",
+              className: walletTransferInputCardClasses,
+              children: [
+                isPreparing && /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
+                showAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.addressTitle }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[12px] leading-[1.35] text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.addressSubtitle })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { address: depositAddress, onCopy: addressCopyHandler }),
+                  qrCode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[var(--deframe-widget-size-radius-sm)] bg-white p-3", children: qrCode }) })
+                ] }),
+                showIdle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[180px] flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-xs)] text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.idleTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-[280px] text-[13px] leading-[1.4] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.idleSubtitle })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: walletTransferFooterClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            type: "button",
+            disabled: !canSubmit,
+            onClick: onSubmit,
+            className: "h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+            children: submitLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DepositSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[180px] flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-md)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "70%", height: "1rem", variant: "text", shimmer: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "2rem", variant: "text", shimmer: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "8rem", height: "8rem", variant: "rect", className: "rounded-[var(--deframe-widget-size-radius-sm)]", shimmer: true })
+  ] });
+}
+function WalletOnchainWithdrawView({
+  token,
+  network,
+  formattedBalance,
+  amount,
+  formattedAmountValue,
+  destinationAddress,
+  destinationNetwork,
+  details,
+  isProcessing,
+  isAmountDisabled,
+  showMaxButton,
+  minAmountWarning,
+  walletError,
+  transferError,
+  finalWarning,
+  submitDisabled,
+  submitLabel,
+  onTokenClick,
+  onAmountChange,
+  onMaxClick,
+  onDestinationAddressChange,
+  onSubmit,
+  labels,
+  className
+}) {
+  var _a;
+  const [isDetailsOpen, setIsDetailsOpen] = React6__namespace.useState(false);
+  const selectedToken = token ? { symbol: token.symbol, logoURI: token.logoURI } : null;
+  const hasToken = Boolean(token && network);
+  const hasAmountAlert = Boolean(minAmountWarning || walletError);
+  const hasAddressAlert = Boolean(transferError);
+  const tokenSelectorClick = isProcessing ? void 0 : onTokenClick;
+  const destinationNetworkText = destinationNetwork ? `${labels.destinationNetworkHint}: ${destinationNetwork.name}` : labels.destinationNetworkEmpty;
+  React6__namespace.useEffect(() => {
+    setIsDetailsOpen(Boolean(details));
+  }, [details]);
+  const amountCardClasses = tailwindMerge.twMerge(
+    walletTransferInputCardClasses,
+    "transition-[border-color,background] duration-200",
+    hasAmountAlert ? "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)]" : ""
+  );
+  const addressCardClasses = tailwindMerge.twMerge(
+    walletTransferInputCardClasses,
+    "transition-[border-color,background] duration-200",
+    hasAddressAlert ? "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)]" : ""
+  );
+  const addressInputWrapperClasses = tailwindMerge.twMerge(
+    "flex min-h-[34px] items-center border-0 bg-transparent transition-[color] duration-150",
+    hasAddressAlert ? "text-[color:var(--deframe-widget-color-state-error)]" : "focus-within:text-[color:var(--deframe-widget-color-text-primary)]"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "wallet-onchain-withdraw-view",
+      className: tailwindMerge.twMerge(
+        walletTransferFrameClasses,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("header", { className: walletTransferHeaderClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: walletTransferTitleClasses, children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: walletTransferSubtitleClasses, children: labels.subtitle })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: walletTransferBodyClasses, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-test-id": "wallet-onchain-withdraw-view-amount-card", className: amountCardClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EarnTokenSelectorSimpleView,
+                {
+                  selectedToken,
+                  onTokenClick,
+                  onNetworkAndAssetClick: tokenSelectorClick,
+                  isLoading: false,
+                  selectTokenLabel: labels.tokenPlaceholder,
+                  chainLabel: (_a = network == null ? void 0 : network.name) != null ? _a : labels.sourceNetworkPlaceholder,
+                  chainImage: network == null ? void 0 : network.iconUrl,
+                  className: walletTransferTokenSelectorClasses
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-px shrink-0 bg-[var(--deframe-widget-color-border-secondary)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EarnAmountInputSimpleView,
+                {
+                  value: amount,
+                  onChange: (event) => onAmountChange(event.target.value),
+                  ariaLabel: "Amount to withdraw",
+                  dollarAmountFormatted: formattedAmountValue,
+                  disabled: isAmountDisabled || isProcessing
+                }
+              )
+            ] }),
+            hasToken && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 truncate text-[13px] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+                labels.balanceLabel,
+                ": ",
+                formattedBalance
+              ] }),
+              showMaxButton && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMaxClick,
+                  disabled: isAmountDisabled || isProcessing,
+                  className: "shrink-0 cursor-pointer text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: labels.maxLabel
+                }
+              )
+            ] }),
+            minAmountWarning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "warning", message: minAmountWarning }) }),
+            walletError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "error", message: walletError }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-test-id": "wallet-onchain-withdraw-view-address-card", className: addressCardClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.destinationAddressLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: addressInputWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: destinationAddress,
+                  onChange: (event) => onDestinationAddressChange(event.target.value),
+                  placeholder: labels.destinationAddressPlaceholder,
+                  disabled: isProcessing,
+                  "aria-label": labels.destinationAddressLabel,
+                  spellCheck: false,
+                  autoComplete: "off",
+                  className: "w-full bg-transparent text-[14px] leading-[1.35] text-[color:var(--deframe-widget-color-text-primary)] outline-none placeholder:text-[color:var(--deframe-widget-color-text-secondary)] disabled:cursor-not-allowed disabled:opacity-50"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] border-t border-[color:var(--deframe-widget-color-border-secondary)] pt-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: labels.destinationNetworkLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-right text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children: destinationNetworkText })
+            ] }),
+            transferError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "error", message: transferError }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "info", message: labels.infoMessage }),
+          finalWarning && /* @__PURE__ */ jsxRuntime.jsx(EarnInlineNotificationSimpleView, { variant: "warning", message: finalWarning }),
+          details && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: walletTransferInputCardClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsDetailsOpen((value) => !value),
+                className: "flex w-full items-center justify-between gap-[var(--deframe-widget-size-gap-md)] text-left",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: labels.detailsTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    md.MdOutlineExpandMore,
+                    {
+                      className: tailwindMerge.twMerge("h-5 w-5 shrink-0 text-[color:var(--deframe-widget-color-text-secondary)] transition-transform", isDetailsOpen && "rotate-180"),
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            ),
+            isDetailsOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DetailRow2, { label: labels.detailsAmountLabel, value: details.amount }),
+              /* @__PURE__ */ jsxRuntime.jsx(DetailRow2, { label: labels.detailsFeeLabel, value: details.fee }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] pt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(DetailRow2, { label: labels.detailsReceiveLabel, value: details.receive, strong: true }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: walletTransferFooterClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            type: "button",
+            disabled: submitDisabled,
+            onClick: onSubmit,
+            className: "h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+            children: submitLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DetailRow2({ label, value, strong = false }) {
+  const valueClasses = strong ? "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]" : "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)]", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClasses, children: value })
+  ] });
+}
+function WalletTransferAssetNetworkPicker({
+  isOpen,
+  onClose,
+  networks,
+  selectedNetwork,
+  onNetworkSelect,
+  displayedTokens,
+  findBalance,
+  formatTokenAmount,
+  formatCurrencyValue,
+  onAssetClick,
+  onSearch,
+  autoFocus,
+  hasMore = false,
+  onLoadMore,
+  isFetching = false,
+  labels
+}) {
+  const handleLoadMore = onLoadMore != null ? onLoadMore : (() => void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChooseNetworkAndAssetViewSimple,
+    {
+      isOpen,
+      onClose,
+      networks,
+      selectedNetwork,
+      onNetworkSelect,
+      displayedTokens,
+      findBalance,
+      formatTokenAmount,
+      formatCurrencyValue,
+      onAssetClick,
+      onSearch,
+      autoFocus,
+      closeOnBackdropClick: true,
+      hasMore,
+      onLoadMore: handleLoadMore,
+      isFetching,
+      labels
+    }
+  );
+}
 var DashboardCard = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
 };
@@ -20355,6 +20743,9 @@ exports.WalletConnectPanel = WalletConnectPanel;
 exports.WalletItem = WalletItem;
 exports.WalletList = ConnectWalletList;
 exports.WalletListContainer = WalletListContainer;
+exports.WalletOnchainDepositView = WalletOnchainDepositView;
+exports.WalletOnchainWithdrawView = WalletOnchainWithdrawView;
+exports.WalletTransferAssetNetworkPicker = WalletTransferAssetNetworkPicker;
 exports.WithdrawFailedIcon = WithdrawFailedIcon;
 exports.WithdrawSuccessIcon = WithdrawSuccessIcon;
 exports.isBrlPeggedToken = isBrlPeggedToken;