@gearbox-protocol/ui-kit 3.14.0-next.25 → 3.14.0-next.27

package/dist/esm/components/layout/app-footer/app-footer.js

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
+import * as d from "react";
+import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
+import { cn as h } from "../../../utils/cn.js";
+const u = [
+  { label: "Docs", href: "https://docs.gearbox.finance" },
+  { label: "Support", href: "https://discord.com/invite/gearbox" },
+  { label: "Terms", href: "https://gearbox.finance/terms" },
+  { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
+], g = d.forwardRef(
+  ({
+    links: o = u,
+    copyright: s,
+    year: l = (/* @__PURE__ */ new Date()).getFullYear(),
+    showStatus: c = !0,
+    statusLabel: m = "Status",
+    blockSyncProps: t,
+    className: n,
+    ...i
+  }, p) => /* @__PURE__ */ e(
+    "footer",
+    {
+      ref: p,
+      className: h(
+        "border-t border-border/60 px-4 sm:px-6 lg:px-8",
+        n
+      ),
+      ...i,
+      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+          "© Gearbox Protocol, ",
+          l
+        ] }) }),
+        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
+          "a",
+          {
+            href: r.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "transition-colors hover:text-foreground",
+            children: r.label
+          },
+          r.label
+        )) })
+      ] })
+    }
+  )
+);
+g.displayName = "AppFooter";
+export {
+  g as AppFooter,
+  u as DEFAULT_APP_FOOTER_LINKS
+};

package/dist/esm/components/layout/app-footer/index.js

@@ -0,0 +1,5 @@
+import { AppFooter as r, DEFAULT_APP_FOOTER_LINKS as A } from "./app-footer.js";
+export {
+  r as AppFooter,
+  A as DEFAULT_APP_FOOTER_LINKS
+};

package/dist/esm/components/layout/app-header/app-header.js

@@ -0,0 +1,98 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import * as N from "react";
+import { AppBar as w, AppBarSidePanel as i, AppBarCenter as L, AppBarCenterContent as k } from "../../app-bar/app-bar.js";
+import { BaseLink as a } from "../../base-link/base-link.js";
+import { NavBarLogo as l } from "../../navbar-logo/navbar-logo.js";
+import { cn as v } from "../../../utils/cn.js";
+import { getStatic as e } from "../../../utils/static.js";
+function A({ href: r }) {
+  return /* @__PURE__ */ o(
+    a,
+    {
+      size: "unset",
+      variant: "unset",
+      color: "main",
+      href: r,
+      className: "inline-flex",
+      children: /* @__PURE__ */ o(
+        l,
+        {
+          src: e("/logo/logo_monochrome_white.png"),
+          srcSet: `${e(
+            "/logo/logo_monochrome_white.png"
+          )} 1x, ${e(
+            "/logo/logo_monochrome_white@2x.png"
+          )} 2x, ${e("/logo/logo_monochrome_white@2x.png")} 3x`,
+          alt: "Logo",
+          style: { height: "32px" },
+          className: "w-auto cursor-pointer"
+        }
+      )
+    }
+  );
+}
+function B({ href: r }) {
+  return /* @__PURE__ */ o(
+    a,
+    {
+      size: "unset",
+      variant: "unset",
+      color: "main",
+      href: r,
+      className: "inline-flex",
+      children: /* @__PURE__ */ o(
+        l,
+        {
+          src: e("/logo/sign_monochrome_white.png"),
+          srcSet: `${e(
+            "/logo/sign_monochrome_white.png"
+          )} 1x, ${e(
+            "/logo/sign_monochrome_white@2x.png"
+          )} 2x, ${e("/logo/sign_monochrome_white@2x.png")} 3x`,
+          alt: "Logo",
+          style: { height: "34px", marginLeft: "4px", marginTop: "4px" },
+          className: "w-auto cursor-pointer"
+        }
+      )
+    }
+  );
+}
+const $ = N.forwardRef(
+  ({
+    homeHref: r = "/",
+    desktopLogo: s,
+    mobileLogo: m,
+    mobileMenu: t,
+    tabs: c,
+    actions: p,
+    wallet: g,
+    leftTestId: h,
+    centerTestId: d,
+    rightTestId: x,
+    className: f,
+    ..._
+  }, u) => /* @__PURE__ */ n(
+    w,
+    {
+      ref: u,
+      className: v("!h-14 md:px-4 lg:px-10", f),
+      ..._,
+      children: [
+        /* @__PURE__ */ n(i, { "data-testid": h, children: [
+          t && /* @__PURE__ */ o("div", { className: "block lg:hidden", children: t }),
+          /* @__PURE__ */ o("div", { className: "hidden lg:block", children: s ?? /* @__PURE__ */ o(A, { href: r }) }),
+          /* @__PURE__ */ o("div", { className: "block lg:hidden", children: m ?? /* @__PURE__ */ o(B, { href: r }) })
+        ] }),
+        /* @__PURE__ */ o(L, { "data-testid": d, className: "md:px-0 lg:px-3", children: /* @__PURE__ */ o(k, { className: "md:hidden lg:block", children: c }) }),
+        /* @__PURE__ */ n(i, { "data-testid": x, className: "ml-auto", children: [
+          p,
+          g
+        ] })
+      ]
+    }
+  )
+);
+$.displayName = "AppHeader";
+export {
+  $ as AppHeader
+};

package/dist/esm/components/layout/app-header/index.js

@@ -0,0 +1,4 @@
+import { AppHeader as r } from "./app-header.js";
+export {
+  r as AppHeader
+};

package/dist/esm/components/layout/index.js

@@ -1,31 +1,36 @@
-import { AppLogo as e, AppLogoLink as t } from "./app-logo/app-logo.js";
-import { Block as m } from "./block/block.js";
-import { Col as f } from "./col/col.js";
-import { Container as a } from "./container/container.js";
-import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as u } from "./footer/footer.js";
-import { Grid as k } from "./grid/grid.js";
-import { Header as F, useMobileMenu as d } from "./header/header.js";
-import { Layout as A } from "./layout/layout.js";
-import { LegalDisclaimer as b } from "./legal-disclaimer/legal-disclaimer.js";
+import { AppFooter as e, DEFAULT_APP_FOOTER_LINKS as t } from "./app-footer/app-footer.js";
+import { AppHeader as m } from "./app-header/app-header.js";
+import { AppLogo as f, AppLogoLink as a } from "./app-logo/app-logo.js";
+import { Block as L } from "./block/block.js";
+import { Col as A } from "./col/col.js";
+import { Container as l } from "./container/container.js";
+import { Footer as u, FooterLink as d, FooterLinkSection as g, GearboxFooter as k } from "./footer/footer.js";
+import { Grid as y } from "./grid/grid.js";
+import { Header as P, useMobileMenu as S } from "./header/header.js";
+import { Layout as b } from "./layout/layout.js";
+import { LegalDisclaimer as D } from "./legal-disclaimer/legal-disclaimer.js";
 import { MainAsideLayout as G } from "./main-aside-layout/main-aside-layout.js";
-import { PageLayout as B } from "./page-layout/page-layout.js";
-import { SocialIcons as H } from "./social-icons/social-icons.js";
+import { PageLayout as I } from "./page-layout/page-layout.js";
+import { SocialIcons as T } from "./social-icons/social-icons.js";
 export {
-  e as AppLogo,
-  t as AppLogoLink,
-  m as Block,
-  f as Col,
-  a as Container,
-  L as Footer,
-  l as FooterLink,
-  c as FooterLinkSection,
-  u as GearboxFooter,
-  k as Grid,
-  F as Header,
-  A as Layout,
-  b as LegalDisclaimer,
+  e as AppFooter,
+  m as AppHeader,
+  f as AppLogo,
+  a as AppLogoLink,
+  L as Block,
+  A as Col,
+  l as Container,
+  t as DEFAULT_APP_FOOTER_LINKS,
+  u as Footer,
+  d as FooterLink,
+  g as FooterLinkSection,
+  k as GearboxFooter,
+  y as Grid,
+  P as Header,
+  b as Layout,
+  D as LegalDisclaimer,
   G as MainAsideLayout,
-  B as PageLayout,
-  H as SocialIcons,
-  d as useMobileMenu
+  I as PageLayout,
+  T as SocialIcons,
+  S as useMobileMenu
 };

package/dist/esm/components/loader-guard/loader-guard.js

@@ -1,5 +1,7 @@
 import { jsx as m, jsxs as o } from "react/jsx-runtime";
 import { Guard as p } from "../guard/guard.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "react";
 import "@gearbox-protocol/sdk";
@@ -20,12 +22,12 @@ import "../buttons/back-button/back-button.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import { Skeleton as r } from "../skeleton/skeleton.js";
-function B({
+function E({
   showGuard: s,
   children: i,
-  loader: a
+  loader: t
 }) {
-  const t = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+  const a = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
     /* @__PURE__ */ m(r, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
     /* @__PURE__ */ o("div", { className: "space-y-2 mb-4", children: [
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
@@ -37,8 +39,8 @@ function B({
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) }), l = s;
-  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (a || t), children: i });
+  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (t || a), children: i });
 }
 export {
-  B as LoaderGuard
+  E as LoaderGuard
 };

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -2,6 +2,8 @@ import { jsx as r } from "react/jsx-runtime";
 import { useEffect as y } from "react";
 import h from "react-markdown";
 import k from "remark-gfm";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
@@ -182,7 +184,7 @@ function a(o) {
   }
   return { id: T(l), displayText: o };
 }
-function Ar({
+function zr({
   content: o,
   title: l,
   backButton: s,
@@ -394,5 +396,5 @@ function Ar({
   return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
 }
 export {
-  Ar as MarkdownViewer
+  zr as MarkdownViewer
 };

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -114,6 +114,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -113,6 +113,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -161,7 +163,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function qr({
+function Br({
   balances: a,
   tokensList: l,
   maxAssets: p = 3,
@@ -224,5 +226,5 @@ function qr({
   ] });
 }
 export {
-  qr as TokensListCell
+  Br as TokensListCell
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -113,6 +113,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -161,7 +163,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function Dr({
+function Kr({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -243,5 +245,5 @@ function Dr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  Dr as WithCopy
+  Kr as WithCopy
 };

package/dist/esm/hooks/index.js

@@ -1,56 +1,59 @@
-import { useCheckboxSelect as t } from "./use-checkbox-select.js";
+import { useCheckboxSelect as r } from "./use-checkbox-select.js";
 import { useControllableState as i } from "./use-controllable-state.js";
 import { useDebounce as u } from "./use-debounce.js";
 import { useDebounceCall as l } from "./use-debounce-call.js";
-import { getSortForField as p, useFilterAllSelected as L, useRangeFilter as x, useSelectFilter as n, useSort as A } from "./use-filter.js";
-import { useHF as f } from "./use-hf.js";
-import { useEditPriceManually as C, useLiquidationGraphParams as E, useLiquidationHeatmap as d } from "./use-liquidation/index.js";
-import { useIsDesktop as b, useIsExtraSmall as _, useIsMedium as D, useIsMobile as F, useIsTablet as P, useMediaQuery as T } from "./use-media-query.js";
-import { useOpenedState as M } from "./use-opened-state.js";
-import { usePrevious as q } from "./use-previous.js";
-import { useSmartNumberInput as G } from "./use-smart-number-input.js";
-import { CELL_BAD as R, CELL_CURRENT as U, CELL_GOOD as g, CELL_HOVERED as H, CELL_LIQUIDATION as X, CELL_OK as k, DEFAULT_AXIS_MAX as y, DEFAULT_AXIS_MIN as Q, formatAxisLabel as V, formatAxisTipLabel as B, formatAxisTipPrice as K, getCellClass as W, isPointInCell as j, useAxis as w, useFixedAssets as z, useIsAxisInRelativeUnits as J, useLiquidationGraphActivePrice as Y, useLiquidationGraphCurrentActiveValue as Z, usePriceInNumber as $, useWithLiquidationGraphActivePrices as ee } from "./use-liquidation/utils.js";
+import { getSortForField as p, getSortForFields as L, nextMultiSortState as x, useFilterAllSelected as n, useMultiSort as A, useRangeFilter as I, useSelectFilter as f, useSort as S } from "./use-filter.js";
+import { useHF as C } from "./use-hf.js";
+import { useEditPriceManually as E, useLiquidationGraphParams as F, useLiquidationHeatmap as b } from "./use-liquidation/index.js";
+import { useIsDesktop as D, useIsExtraSmall as M, useIsMedium as P, useIsMobile as T, useIsTablet as h, useMediaQuery as O } from "./use-media-query.js";
+import { useOpenedState as v } from "./use-opened-state.js";
+import { usePrevious as N } from "./use-previous.js";
+import { useSmartNumberInput as U } from "./use-smart-number-input.js";
+import { CELL_BAD as H, CELL_CURRENT as X, CELL_GOOD as k, CELL_HOVERED as y, CELL_LIQUIDATION as Q, CELL_OK as V, DEFAULT_AXIS_MAX as B, DEFAULT_AXIS_MIN as K, formatAxisLabel as W, formatAxisTipLabel as j, formatAxisTipPrice as w, getCellClass as z, isPointInCell as J, useAxis as Y, useFixedAssets as Z, useIsAxisInRelativeUnits as $, useLiquidationGraphActivePrice as ee, useLiquidationGraphCurrentActiveValue as te, usePriceInNumber as re, useWithLiquidationGraphActivePrices as se } from "./use-liquidation/utils.js";
 export {
-  R as CELL_BAD,
-  U as CELL_CURRENT,
-  g as CELL_GOOD,
-  H as CELL_HOVERED,
-  X as CELL_LIQUIDATION,
-  k as CELL_OK,
-  y as DEFAULT_AXIS_MAX,
-  Q as DEFAULT_AXIS_MIN,
-  V as formatAxisLabel,
-  B as formatAxisTipLabel,
-  K as formatAxisTipPrice,
-  W as getCellClass,
+  H as CELL_BAD,
+  X as CELL_CURRENT,
+  k as CELL_GOOD,
+  y as CELL_HOVERED,
+  Q as CELL_LIQUIDATION,
+  V as CELL_OK,
+  B as DEFAULT_AXIS_MAX,
+  K as DEFAULT_AXIS_MIN,
+  W as formatAxisLabel,
+  j as formatAxisTipLabel,
+  w as formatAxisTipPrice,
+  z as getCellClass,
   p as getSortForField,
-  j as isPointInCell,
-  w as useAxis,
-  t as useCheckboxSelect,
+  L as getSortForFields,
+  J as isPointInCell,
+  x as nextMultiSortState,
+  Y as useAxis,
+  r as useCheckboxSelect,
   i as useControllableState,
   u as useDebounce,
   l as useDebounceCall,
-  C as useEditPriceManually,
-  L as useFilterAllSelected,
-  z as useFixedAssets,
-  f as useHF,
-  J as useIsAxisInRelativeUnits,
-  b as useIsDesktop,
-  _ as useIsExtraSmall,
-  D as useIsMedium,
-  F as useIsMobile,
-  P as useIsTablet,
-  Y as useLiquidationGraphActivePrice,
-  Z as useLiquidationGraphCurrentActiveValue,
-  E as useLiquidationGraphParams,
-  d as useLiquidationHeatmap,
-  T as useMediaQuery,
-  M as useOpenedState,
-  q as usePrevious,
-  $ as usePriceInNumber,
-  x as useRangeFilter,
-  n as useSelectFilter,
-  G as useSmartNumberInput,
-  A as useSort,
-  ee as useWithLiquidationGraphActivePrices
+  E as useEditPriceManually,
+  n as useFilterAllSelected,
+  Z as useFixedAssets,
+  C as useHF,
+  $ as useIsAxisInRelativeUnits,
+  D as useIsDesktop,
+  M as useIsExtraSmall,
+  P as useIsMedium,
+  T as useIsMobile,
+  h as useIsTablet,
+  ee as useLiquidationGraphActivePrice,
+  te as useLiquidationGraphCurrentActiveValue,
+  F as useLiquidationGraphParams,
+  b as useLiquidationHeatmap,
+  O as useMediaQuery,
+  A as useMultiSort,
+  v as useOpenedState,
+  N as usePrevious,
+  re as usePriceInNumber,
+  I as useRangeFilter,
+  f as useSelectFilter,
+  U as useSmartNumberInput,
+  S as useSort,
+  se as useWithLiquidationGraphActivePrices
 };

package/dist/esm/hooks/use-filter.js

@@ -1,40 +1,74 @@
-import { useState as u, useCallback as c, useMemo as l } from "react";
-function f() {
-  const [t, e] = u(null), r = c(() => e(null), []);
-  return [t, e, r];
+import { useState as i, useCallback as c, useMemo as a } from "react";
+function F() {
+  const [e, t] = i(null), r = c(() => t(null), []);
+  return [e, t, r];
 }
-function S(t = null) {
-  const [e, r] = u(t), s = c(() => r(null), []);
-  return [e, r, s];
+function y(e = null) {
+  const [t, r] = i(e), n = c(() => r(null), []);
+  return [t, r, n];
 }
-const i = (t) => t === "asc" ? "desc" : "asc", d = (t, e) => {
-  if (t === e?.field)
-    return e.sort;
+const S = (e) => e === "asc" ? "desc" : "asc", M = (e, t) => {
+  if (e === t?.field)
+    return t.sort;
 };
-function g(t = null) {
-  const [e, r] = u(
-    t
-  ), s = c(
-    (n, o = "asc") => {
-      n === e?.field ? r({ field: n, sort: i(e.sort) }) : r({ field: n, sort: o });
+function R(e = null) {
+  const [t, r] = i(
+    e
+  ), n = c(
+    (o, s = "asc") => {
+      o === t?.field ? r({ field: o, sort: S(t.sort) }) : r({ field: o, sort: s });
     },
-    [e]
+    [t]
   );
-  return [e, s];
+  return [t, n];
 }
-function F(t) {
-  return l(() => Object.values(t).reduce(
-    ([r, s], n) => {
-      const o = !!n.state;
-      return [r || o, s && o];
+const b = (e, t) => {
+  const r = t?.findIndex((n) => n.field === e) ?? -1;
+  return !t || r === -1 ? { sort: void 0, priority: void 0 } : { sort: t[r].sort, priority: r + 1 };
+};
+function g(e, t, r = "asc", n = 2) {
+  const o = e.findIndex((u) => u.field === t);
+  if (o !== -1) {
+    if (e[o].sort === r) {
+      const u = [...e];
+      return u[o] = { field: t, sort: S(e[o].sort) }, u;
+    }
+    return e.filter((u) => u.field !== t);
+  }
+  const s = [{ field: t, sort: r }, ...e];
+  return s.length > n ? s.slice(0, n) : s;
+}
+function p(e = null, { maxFields: t = 2 } = {}) {
+  const [r, n] = i(
+    e ?? []
+  ), o = c(
+    (l, d = "asc") => {
+      n(
+        (f) => g(f, l, d, t)
+      );
+    },
+    [t]
+  ), s = c((l) => {
+    n((d) => d.filter((f) => f.field !== l));
+  }, []), u = c(() => n([]), []);
+  return [r, o, { removeSortField: s, resetSort: u }];
+}
+function C(e) {
+  return a(() => Object.values(e).reduce(
+    ([r, n], o) => {
+      const s = !!o.state;
+      return [r || s, n && s];
     },
     [!1, !0]
-  ), [t]);
+  ), [e]);
 }
 export {
-  d as getSortForField,
-  F as useFilterAllSelected,
-  f as useRangeFilter,
-  S as useSelectFilter,
-  g as useSort
+  M as getSortForField,
+  b as getSortForFields,
+  g as nextMultiSortState,
+  C as useFilterAllSelected,
+  p as useMultiSort,
+  F as useRangeFilter,
+  y as useSelectFilter,
+  R as useSort
 };