@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.3

package/dist/esm/components/base/amount-input/amount-input.js

@@ -1,168 +1,200 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useState as f, useEffect as O } from "react";
-import { useTitleText as U } from "../text/use-title-text.js";
-import { SimpleDropdown as V } from "../../simple-dropdown/simple-dropdown.js";
-import { SimpleDropdownMenuItem as z } from "../../simple-dropdown/simple-dropdown-menu-item.js";
-import { TokenSymbol as $ } from "../../token-symbol/token-symbol.js";
-import { useIntlTyped as E, FormattedMessageTyped as L } from "../../typed-intl/index.js";
-import { bnToInputView as T } from "../../../utils/bn-to-input-view.js";
-import { cn as F } from "../../../utils/cn.js";
+import { jsxs as c, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { cva as g } from "class-variance-authority";
+import { useState as x, useEffect as q } from "react";
+import { useTitleText as G } from "../text/use-title-text.js";
+import { Modal as H } from "../../modal/modal.js";
+import { useIntlTyped as J, FormattedMessageTyped as K } from "../../typed-intl/index.js";
+import "@gearbox-protocol/sdk/common-utils";
+import { useIsMobile as Q } from "../../../hooks/use-media-query.js";
+import { bnToInputView as M } from "../../../utils/bn-to-input-view.js";
+import { cn as R } from "../../../utils/cn.js";
 import { parseInputToBN as S } from "../../../utils/parse-input-to-bn.js";
-import { BalanceIndicator as q } from "./balance-indicator.js";
-import { AmountInputTest as c } from "./constants.js";
-import { TokenButton as M } from "./token-button.js";
-function re({
-  amount: r,
+import { BalanceIndicator as W } from "./balance-indicator.js";
+import { AmountInputTest as m } from "./constants.js";
+import { TokenButton as k } from "./token-button.js";
+import { TokenSelectPanel as X } from "./token-select-panel.js";
+const Y = g(
+  "relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-[7px] min-h-[60px] rounded-[8px]",
+        md: "pl-4 pr-3 py-[10px] min-h-[82px] rounded-lg"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Z = g("font-medium text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), _ = g(
+  "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "text-[18px]! leading-[21px]!",
+        md: "text-[28px]! leading-[33px]!"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function ge({
+  amount: t,
   onAmount: s,
-  token: n,
-  tokens: o,
-  onToken: a,
+  token: r,
+  tokens: n,
+  onToken: o,
   balance: u,
-  label: g,
-  maxLabel: h,
-  usdPrice: x,
-  disabled: i = !1,
-  testId: k
+  balances: B,
+  usdPrices: j,
+  label: h,
+  maxLabel: v,
+  usdPrice: b,
+  size: A,
+  disabled: a = !1,
+  testId: D
 }) {
-  const B = E(), v = U(), l = n.decimals, [d, y] = f(
-    () => r === 0n ? "" : T(r, l)
-  ), [D, w] = f(!1), [b, p] = f(!1);
-  O(() => {
-    const [t] = S(d, l);
-    t !== r && y(r === 0n ? "" : T(r, l));
-  }, [r, l]);
-  const j = (t) => {
-    const [I, C] = S(t.target.value, l);
-    I === null || C === null || (y(C), s(I));
-  }, A = !!(o && o.length > 1 && a), N = x !== void 0 ? G(d, x) : null;
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      "data-testid": k ?? c.root,
-      "data-active": D,
-      "data-disabled": i,
-      className: F(
-        "relative w-full min-h-[82px] rounded-lg pl-4 pr-3 py-[10px]",
-        "text-foreground bg-gray-20 border border-gray-30",
-        "transition-[background-color] duration-100 ease-linear",
-        "[&:hover]:bg-gray-30 [&:hover]:border-gray-40",
-        "data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2",
-        "data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px]",
-        "data-[disabled=true]:cursor-not-allowed"
-      ),
-      children: [
-        /* @__PURE__ */ m("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: "grow shrink-0 basis-0 text-sm font-medium text-foreground",
-              "data-testid": c.label,
-              children: g !== void 0 ? v(g) : /* @__PURE__ */ e(L, { messageId: "components.amountInput.label" })
-            }
-          ),
-          u !== void 0 ? /* @__PURE__ */ e(
-            q,
+  const O = J(), y = G(), U = Q(), i = A ?? (U ? "sm" : "md"), l = r.decimals, [p, w] = x(
+    () => t === 0n ? "" : M(t, l)
+  ), [P, z] = x(!1), [N, f] = x(!1);
+  q(() => {
+    const [d] = S(p, l);
+    d !== t && w(t === 0n ? "" : M(t, l));
+  }, [t, l]);
+  const $ = (d) => {
+    const [F, V] = S(d.target.value, l);
+    F === null || V === null || (w(V), s(F));
+  }, I = !!(n && n.length > 1 && o && !a), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
+    o?.(d), f(!1);
+  }, C = () => f(!1);
+  return /* @__PURE__ */ c(L, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        "data-testid": D ?? m.root,
+        "data-active": P,
+        "data-disabled": a,
+        className: Y({ size: i }),
+        children: [
+          /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: R(
+                  Z({ size: i }),
+                  "grow shrink-0 basis-0"
+                ),
+                "data-testid": m.label,
+                children: h !== void 0 ? y(h) : /* @__PURE__ */ e(K, { messageId: "components.amountInput.label" })
+              }
+            ),
+            u !== void 0 ? /* @__PURE__ */ e(
+              W,
+              {
+                title: v !== void 0 ? y(v) : void 0,
+                token: r,
+                balance: u,
+                disabled: a,
+                onMax: () => s(u)
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ c("div", { className: "flex w-full max-w-full shrink-0 basis-full items-center", children: [
+            /* @__PURE__ */ e("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                autoComplete: "off",
+                autoCorrect: "off",
+                spellCheck: "false",
+                pattern: "^[0-9]*[.,]?[0-9]*$",
+                placeholder: "0",
+                value: p,
+                onChange: $,
+                onFocus: () => z(!0),
+                onBlur: () => z(!1),
+                disabled: a,
+                minLength: 1,
+                maxLength: 79,
+                title: O.formatMessage({
+                  messageId: "components.amountInput.inputTitle"
+                }),
+                "data-testid": m.input,
+                className: _({ size: i })
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "shrink-0", children: I ? /* @__PURE__ */ e(
+              k,
+              {
+                token: r,
+                size: i,
+                active: N,
+                onClick: () => f(!0)
+              }
+            ) : /* @__PURE__ */ e(
+              k,
+              {
+                token: r,
+                size: i,
+                disabled: a
+              }
+            ) })
+          ] }),
+          T ? /* @__PURE__ */ e(
+            "div",
             {
-              title: h !== void 0 ? v(h) : void 0,
-              token: n,
-              balance: u,
-              disabled: i,
-              onMax: () => s(u)
+              className: "mt-1 text-xs leading-[130%] text-secondary-foreground",
+              "data-testid": m.usd,
+              children: T
             }
           ) : null
-        ] }),
-        /* @__PURE__ */ m("div", { className: "flex w-full max-w-full shrink-0 basis-full items-center", children: [
-          /* @__PURE__ */ e("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ e(
-            "input",
-            {
-              type: "text",
-              inputMode: "decimal",
-              autoComplete: "off",
-              autoCorrect: "off",
-              spellCheck: "false",
-              pattern: "^[0-9]*[.,]?[0-9]*$",
-              placeholder: "0",
-              value: d,
-              onChange: j,
-              onFocus: () => w(!0),
-              onBlur: () => w(!1),
-              disabled: i,
-              minLength: 1,
-              maxLength: 79,
-              title: B.formatMessage({
-                messageId: "components.amountInput.inputTitle"
-              }),
-              "data-testid": c.input,
-              className: F(
-                "w-full p-0 bg-transparent border-none outline-none",
-                "text-[28px]! leading-[33px]! text-foreground",
-                "placeholder:text-secondary-foreground focus:outline-none",
-                i && "cursor-not-allowed"
-              )
-            }
-          ) }),
-          /* @__PURE__ */ e("div", { className: "shrink-0", children: A && a && o ? /* @__PURE__ */ e(
-            V,
-            {
-              open: b,
-              onOpenChange: p,
-              placement: "bottom",
-              align: "end",
-              asChild: !0,
-              title: /* @__PURE__ */ e(
-                M,
-                {
-                  token: n,
-                  active: b,
-                  disabled: i,
-                  onClick: () => p((t) => !t)
-                }
-              ),
-              children: o.map((t) => /* @__PURE__ */ e(
-                z,
-                {
-                  onSelect: () => {
-                    a(t), p(!1);
-                  },
-                  children: /* @__PURE__ */ m("span", { className: "flex min-w-0 items-center gap-2", children: [
-                    /* @__PURE__ */ e($, { token: t, size: 16, marginSize: "sm" }),
-                    /* @__PURE__ */ e("span", { className: "truncate", children: t.symbol })
-                  ] })
-                },
-                t.address
-              ))
-            }
-          ) : /* @__PURE__ */ e(M, { token: n, disabled: i }) })
-        ] }),
-        N ? /* @__PURE__ */ e(
-          "div",
+        ]
+      }
+    ),
+    I && n ? /* @__PURE__ */ e(
+      H,
+      {
+        show: N,
+        onClickOutside: C,
+        className: "sm:w-[440px]",
+        children: /* @__PURE__ */ e(
+          X,
           {
-            className: "mt-1 text-xs leading-[130%] text-secondary-foreground",
-            "data-testid": c.usd,
-            children: N
+            tokens: n,
+            balances: B,
+            usdPrices: j,
+            onSelect: E,
+            onClose: C
           }
-        ) : null
-      ]
-    }
-  );
+        )
+      }
+    ) : null
+  ] });
 }
-function G(r, s) {
+function ee(t, s) {
   if (!s) return null;
-  const n = Number.parseFloat(r.replace(",", ".") || "0");
-  if (!Number.isFinite(n) || n === 0) return null;
-  const o = n * s, a = Math.abs(o) < 100;
+  const r = Number.parseFloat(t.replace(",", ".") || "0");
+  if (!Number.isFinite(r) || r === 0) return null;
+  const n = r * s, o = Math.abs(n) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-      minimumFractionDigits: a ? 2 : 0,
-      maximumFractionDigits: a ? 2 : 0
-    }).format(o);
+      minimumFractionDigits: o ? 2 : 0,
+      maximumFractionDigits: o ? 2 : 0
+    }).format(n);
   } catch {
     return "$0";
   }
 }
 export {
-  re as AmountInput,
-  c as AmountInputTest
+  ge as AmountInput,
+  m as AmountInputTest
 };

package/dist/esm/components/base/amount-input/constants.js

@@ -6,6 +6,8 @@ class a {
   static label = "amount-input-label";
   static balance = "amount-input-balance";
   static usd = "amount-input-usd";
+  static selectPanel = "amount-input-select-panel";
+  static selectOption = "amount-input-select-option";
 }
 export {
   a as AmountInputTest

package/dist/esm/components/base/amount-input/index.js

@@ -1,6 +1,8 @@
-import { AmountInput as m } from "./amount-input.js";
+import { AmountInput as e } from "./amount-input.js";
+import { TokenSelectPanel as r } from "./token-select-panel.js";
 import { AmountInputTest as p } from "./constants.js";
 export {
-  m as AmountInput,
-  p as AmountInputTest
+  e as AmountInput,
+  p as AmountInputTest,
+  r as TokenSelectPanel
 };

package/dist/esm/components/base/amount-input/token-button.js

@@ -1,53 +1,83 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { IconExpand as d } from "@gearbox-protocol/static";
-import { TokenSymbol as p } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as l } from "../../typed-intl/index.js";
-import { cn as a } from "../../../utils/cn.js";
-import { AmountInputTest as u } from "./constants.js";
-function h({
-  token: r,
-  onClick: o,
-  active: s = !1,
-  disabled: m
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { IconExpand as x } from "@gearbox-protocol/static";
+import { cva as l } from "class-variance-authority";
+import { TokenSymbol as f } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
+import { cn as d } from "../../../utils/cn.js";
+import { AmountInputTest as v } from "./constants.js";
+const y = l(
+  "flex flex-row items-center text-foreground cursor-[unset]",
+  {
+    variants: {
+      size: {
+        sm: "text-[16px] leading-[21px]",
+        md: "text-[21px] leading-[33px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), b = l(
+  "ml-0.5 leading-none text-gray-100 transition-transform duration-100 ease-[ease]",
+  {
+    variants: {
+      size: {
+        sm: "px-1",
+        md: "px-1.5"
+      },
+      active: {
+        true: "rotate-180",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", active: !1 }
+  }
+), w = {
+  sm: { symbol: 16, arrow: 8 },
+  md: { symbol: 28, arrow: 12 }
+};
+function V({
+  token: n,
+  onClick: e,
+  interactive: p = !1,
+  active: c = !1,
+  disabled: s,
+  size: o = "md"
 }) {
-  const e = !!(o && !m);
+  const m = !!((e || p) && !s), r = !!(e && !s), i = w[o];
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: reference markup uses a div block; role + keyboard added for a11y
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ u(
       "div",
       {
-        role: e ? "button" : void 0,
-        tabIndex: e ? 0 : void 0,
-        "data-testid": u.token,
-        onClick: e ? o : void 0,
-        onKeyDown: e && o ? (n) => {
-          (n.key === "Enter" || n.key === " ") && (n.preventDefault(), o());
+        role: r ? "button" : void 0,
+        tabIndex: r ? 0 : void 0,
+        "data-testid": v.token,
+        onClick: r ? e : void 0,
+        onKeyDown: r && e ? (a) => {
+          (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e());
         } : void 0,
-        className: a(
-          "group flex flex-row items-center text-[21px] leading-[33px] text-foreground",
-          e && "cursor-pointer hover:[&_.expand-wrap]:text-foreground"
+        className: d(
+          "group",
+          y({ size: o }),
+          m && "cursor-pointer hover:[&_.expand-wrap]:text-foreground"
         ),
         children: [
           /* @__PURE__ */ t(
-            p,
+            f,
             {
-              token: r,
+              token: n,
               showSymbol: !0,
-              size: 28,
-              marginSize: "md",
+              size: i.symbol,
+              marginSize: o,
               maxLength: 13
             }
           ),
-          r ? null : /* @__PURE__ */ t("span", { className: "text-muted-foreground truncate", children: /* @__PURE__ */ t(l, { messageId: "components.amountInput.selectToken" }) }),
-          e ? /* @__PURE__ */ t(
+          n ? null : /* @__PURE__ */ t("span", { className: "text-muted-foreground truncate", children: /* @__PURE__ */ t(g, { messageId: "components.amountInput.selectToken" }) }),
+          m ? /* @__PURE__ */ t(
             "span",
             {
-              className: a(
-                "expand-wrap ml-0.5 px-1.5 leading-none text-gray-100",
-                "transition-transform duration-100 ease-[ease]",
-                s && "rotate-180"
-              ),
-              children: /* @__PURE__ */ t(d, { size: 12 })
+              className: d("expand-wrap", b({ size: o, active: c })),
+              children: /* @__PURE__ */ t(x, { size: i.arrow })
             }
           ) : null
         ]
@@ -56,5 +86,5 @@ function h({
   );
 }
 export {
-  h as TokenButton
+  V as TokenButton
 };

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -0,0 +1,85 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
+import "react-intl";
+import "../../buttons/button/button.js";
+import { VSpace as b } from "../../vspace/vspace.js";
+import { GridTable as g, GridTableBody as v, GridTableRow as w, GridTableCell as s } from "../../table/grid-table.js";
+import "../../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { formatAssetAmount as T } from "../../../utils/format-asset-amount.js";
+import { formatMoney as y } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import "../../table/table.js";
+import { TokenSymbol as N } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as z } from "../../typed-intl/index.js";
+import { AmountInputTest as n } from "./constants.js";
+function d(o, i) {
+  if (o)
+    return o[i] ?? o[i.toLowerCase()];
+}
+function Q({
+  tokens: o,
+  balances: i,
+  usdPrices: p,
+  onSelect: c,
+  onClose: f
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": n.selectPanel,
+      className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
+      children: [
+        /* @__PURE__ */ e(
+          h,
+          {
+            title: /* @__PURE__ */ e(z, { messageId: "components.amountInput.selectToken" }),
+            onClose: f
+          }
+        ),
+        /* @__PURE__ */ e(b, { size: 16 }),
+        /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
+          g,
+          {
+            cols: "minmax(0,1fr) 120px",
+            gap: 0,
+            size: "sm",
+            wrapperClassName: "overflow-visible",
+            children: /* @__PURE__ */ e(v, { children: o.map((r, x) => {
+              const l = d(i, r.address) ?? 0n, m = d(p, r.address), u = Number(l) / 10 ** r.decimals, a = m !== void 0 ? y(u * m, 4) : void 0;
+              return /* @__PURE__ */ t(
+                w,
+                {
+                  last: x === o.length - 1,
+                  height: "56px",
+                  "data-testid": n.selectOption,
+                  onRowClick: () => c(r),
+                  children: [
+                    /* @__PURE__ */ e(s, { size: "sm", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(N, { token: r, size: 24, showSymbol: !1 }),
+                      /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
+                    ] }) }),
+                    /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: /* @__PURE__ */ t("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: T(l, r.decimals) }),
+                      a !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: a }) : null
+                    ] }) })
+                  ]
+                },
+                r.address
+              );
+            }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Q as TokenSelectPanel
+};