@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/esm/components/trading-view/trading-view.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import { useIsMobile } from '../../hooks/use-media-query.js';
+import { RangeButtons } from '../buttons/range-buttons/range-buttons.js';
+import { DEFAULT_SERIES_COLORS } from '../graph/graph.js';
+import { GraphViewWithData } from '../graph/graph-view.js';
+import { GraphDropdown } from './graph-dropdown.js';
+
+const FullscreenExpandIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-label": "Expand fullscreen",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Expand fullscreen" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+    ]
+  }
+);
+const FullscreenExitIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-label": "Exit fullscreen",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Exit fullscreen" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
+    ]
+  }
+);
+function TradingView({
+  data,
+  yMeasureUnit,
+  height = 306,
+  defaultGraph,
+  onGraphSelected,
+  graphs,
+  isMultipleSelect,
+  range,
+  rangeList,
+  setRange,
+  onGraphExpanded,
+  isGraphExpanded,
+  onUnselectSeries
+}) {
+  const dataArray = useMemo(() => {
+    return Array.isArray(data) ? data : data ? [data] : [];
+  }, [data]);
+  const isMultiple = useMemo(() => {
+    return Array.isArray(data) && data.length > 1;
+  }, [data]);
+  const isMobile = useIsMobile();
+  const yMeasureUnitSingle = useMemo(() => {
+    if (!yMeasureUnit) return void 0;
+    return Array.isArray(yMeasureUnit) ? yMeasureUnit[0] : yMeasureUnit;
+  }, [yMeasureUnit]);
+  const toolbar = /* @__PURE__ */ jsxs("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { children: onGraphSelected && graphs && defaultGraph && /* @__PURE__ */ jsx(
+      GraphDropdown,
+      {
+        onSelected: onGraphSelected,
+        items: graphs,
+        defaultItem: defaultGraph,
+        multiple: isMultipleSelect
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
+      /* @__PURE__ */ jsx(RangeButtons, { range, rangeList, setRange }),
+      !isMobile && onGraphExpanded && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center text-xs leading-[14px] font-medium text-center rounded-md border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted border-muted text-muted-foreground hover:border-secondary ml-1.5",
+          onClick: onGraphExpanded,
+          children: isGraphExpanded ? /* @__PURE__ */ jsx(FullscreenExitIcon, { size: 16 }) : /* @__PURE__ */ jsx(FullscreenExpandIcon, { size: 16 })
+        }
+      )
+    ] })
+  ] });
+  const labelColorMapRef = useRef(/* @__PURE__ */ new Map());
+  const nextColorIndexRef = useRef(0);
+  const seriesData = useMemo(() => {
+    const yMeasureUnitArray = Array.isArray(yMeasureUnit) ? yMeasureUnit : void 0;
+    return dataArray.map((graphData, index) => {
+      const label = graphData?.title || `Series ${index + 1}`;
+      if (!labelColorMapRef.current.has(label)) {
+        const usedColorIndices = new Set(
+          Array.from(labelColorMapRef.current.values())
+        );
+        let colorIndex2 = nextColorIndexRef.current;
+        for (let i = 0; i < DEFAULT_SERIES_COLORS.length; i++) {
+          const testIndex = (nextColorIndexRef.current + i) % DEFAULT_SERIES_COLORS.length;
+          if (!usedColorIndices.has(testIndex)) {
+            colorIndex2 = testIndex;
+            break;
+          }
+        }
+        labelColorMapRef.current.set(label, colorIndex2);
+        nextColorIndexRef.current = (colorIndex2 + 1) % DEFAULT_SERIES_COLORS.length;
+      }
+      const colorIndex = labelColorMapRef.current.get(label) ?? 0;
+      const colorPalette = DEFAULT_SERIES_COLORS[colorIndex % DEFAULT_SERIES_COLORS.length];
+      const rawData = graphData?.data || [];
+      const sortedData = [...rawData].sort((a, b) => {
+        const timeA = typeof a.time === "number" ? a.time : Number(a.time);
+        const timeB = typeof b.time === "number" ? b.time : Number(b.time);
+        return timeA - timeB;
+      });
+      const deduplicatedData = sortedData.reduce((acc, point) => {
+        const timeAsTime = point.time;
+        if (acc.length === 0 || acc[acc.length - 1].time !== timeAsTime) {
+          acc.push({
+            time: timeAsTime,
+            value: point.value
+          });
+        } else {
+          acc[acc.length - 1] = {
+            time: timeAsTime,
+            value: point.value
+          };
+        }
+        return acc;
+      }, []);
+      return {
+        data: deduplicatedData,
+        label,
+        yMeasureUnit: yMeasureUnitArray?.[index] ?? (Array.isArray(yMeasureUnit) ? void 0 : yMeasureUnit),
+        color: colorPalette.line,
+        topColor: colorPalette.top,
+        bottomColor: colorPalette.bottom
+      };
+    }).filter((series) => series.data.length > 0);
+  }, [dataArray, yMeasureUnit]);
+  const isLoading = isMultiple && dataArray.length > 0 ? dataArray.some((d) => !d) : !data;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: height ? `${height}px` : void 0
+      },
+      className: "w-full",
+      children: /* @__PURE__ */ jsx(
+        GraphViewWithData,
+        {
+          series: seriesData,
+          loading: isLoading,
+          toolbar,
+          size: height ? "full" : "default",
+          containerClassName: "h-full",
+          showLegend: isMultiple,
+          onUnselectSeries,
+          yMeasureUnit: yMeasureUnitSingle
+        }
+      )
+    }
+  );
+}
+
+export { TradingView };

package/dist/esm/components/typed-intl/index.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { jsx } from 'react/jsx-runtime';
+import { useCallback, useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 const renderStrong = (chunks) => /* @__PURE__ */ jsx("strong", { children: chunks });
 function FormattedMessageTyped({
   messageId,
@@ -26,7 +27,5 @@ function useIntlTyped() {
   );
   return intlTyped;
 }
-export {
-  FormattedMessageTyped,
-  useIntlTyped
-};
+
+export { FormattedMessageTyped, useIntlTyped };

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

@@ -0,0 +1 @@
+export { VSpace } from './vspace.js';

package/dist/esm/components/vspace/vspace.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function VSpace({ height }) {
+  return /* @__PURE__ */ jsx("div", { style: { height: `${height}px` } });
+}
+
+export { VSpace };

package/dist/esm/components/with-filter-button/index.js

@@ -0,0 +1 @@
+export { WithFilterButton } from './with-filter-button.js';

package/dist/esm/components/with-filter-button/with-filter-button.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from '../buttons/button/button.js';
+import { FilterButton } from '../buttons/filter-button/filter-button.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const WithFilterButton = React.forwardRef(
+  ({
+    children,
+    onClick,
+    buttonVariant = "outline",
+    buttonSize = "default",
+    buttonLabel = "Filter",
+    showIcon = true,
+    className,
+    buttonClassName,
+    onClearAll
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full flex items-center justify-between gap-4",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "default", onClick: onClearAll, children: "Clear all" }),
+            /* @__PURE__ */ jsx(
+              FilterButton,
+              {
+                variant: buttonVariant,
+                size: buttonSize,
+                onClick,
+                className: buttonClassName,
+                label: buttonLabel,
+                showIcon
+              }
+            )
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+WithFilterButton.displayName = "WithFilterButton";
+
+export { WithFilterButton };

package/dist/esm/configs/design-tokens.js

@@ -80,6 +80,5 @@ const designTokens = {
     xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
   }
 };
-export {
-  designTokens
-};
+
+export { designTokens };

package/dist/esm/configs/index.js

@@ -1,9 +1,4 @@
-export * from "./design-tokens.js";
-import { default as default2, preset } from "./tailwind.config.js";
-import { default as default3 } from "./tailwind-preset.js";
-export * from "./variants.js";
-export {
-  preset,
-  default2 as tailwindConfig,
-  default3 as tailwindPreset
-};
+export { designTokens } from './design-tokens.js';
+export { default as tailwindConfig } from './tailwind.config.js';
+export { preset, preset as tailwindPreset } from './tailwind-preset.js';
+export { interactiveVariants, paddingVariants, sizeVariants, stateVariants } from './variants.js';

package/dist/esm/configs/tailwind-preset.js

@@ -1,4 +1,5 @@
-import tailwindAnimate from "tailwindcss-animate";
+import tailwindAnimate from 'tailwindcss-animate';
+
 const preset = {
   darkMode: "class",
   safelist: [
@@ -121,8 +122,5 @@ const preset = {
   },
   plugins: [tailwindAnimate]
 };
-var tailwind_preset_default = preset;
-export {
-  tailwind_preset_default as default,
-  preset
-};
+
+export { preset as default, preset };

package/dist/esm/configs/tailwind.config.js

@@ -1,4 +1,5 @@
-import { preset } from "./tailwind-preset.js";
+import { preset } from './tailwind-preset.js';
+
 const tailwindConfig = {
   ...preset,
   content: {
@@ -20,8 +21,5 @@ const tailwindConfig = {
     }
   }
 };
-var tailwind_config_default = tailwindConfig;
-export {
-  tailwind_config_default as default,
-  preset
-};
+
+export { tailwindConfig as default, preset };

package/dist/esm/configs/variants.js

@@ -23,9 +23,5 @@ const interactiveVariants = {
   default: "transition-colors duration-200",
   disabled: "opacity-50 cursor-not-allowed pointer-events-none"
 };
-export {
-  interactiveVariants,
-  paddingVariants,
-  sizeVariants,
-  stateVariants
-};
+
+export { interactiveVariants, paddingVariants, sizeVariants, stateVariants };

package/dist/esm/hooks/index.js

@@ -1,7 +1,8 @@
-export * from "./use-controllable-state.js";
-export * from "./use-debounce.js";
-export * from "./use-filter.js";
-export * from "./use-hf.js";
-export * from "./use-liquidation/index.js";
-export * from "./use-media-query.js";
-export * from "./use-previous.js";
+export { useControllableState } from './use-controllable-state.js';
+export { useDebounce, useDebounceCall } from './use-debounce.js';
+export { getSortForField, useFilterAllSelected, useRangeFilter, useSelectFilter, useSort } from './use-filter.js';
+export { useHF } from './use-hf.js';
+export { useEditPriceManually, useLiquidationGraphParams, useLiquidationHeatmap } from './use-liquidation/index.js';
+export { useIsDesktop, useIsMobile, useIsTablet, useMediaQuery } from './use-media-query.js';
+export { usePrevious } from './use-previous.js';
+export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices } from './use-liquidation/utils.js';

package/dist/esm/hooks/use-controllable-state.js

@@ -1,5 +1,5 @@
-"use client";
-import { useCallback, useState } from "react";
+import { useState, useCallback } from 'react';
+
 function useControllableState({
   value: controlledValue,
   defaultValue,
@@ -21,6 +21,5 @@ function useControllableState({
   );
   return [value, setValue];
 }
-export {
-  useControllableState
-};
+
+export { useControllableState };

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

@@ -1,5 +1,5 @@
-"use client";
-import { useCallback, useEffect, useMemo } from "react";
+import { useMemo, useEffect, useCallback } from 'react';
+
 const debounce = (func, delay) => {
   let timer = null;
   const cleanup = () => {
@@ -37,7 +37,5 @@ function useDebounceCall(delay) {
     [debounced]
   );
 }
-export {
-  useDebounce,
-  useDebounceCall
-};
+
+export { useDebounce, useDebounceCall };

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

@@ -1,5 +1,5 @@
-"use client";
-import { useCallback, useMemo, useState } from "react";
+import { useState, useCallback, useMemo } from 'react';
+
 function useRangeFilter() {
   const [range, setRange] = useState(null);
   const resetRange = useCallback(() => setRange(null), []);
@@ -43,10 +43,5 @@ function useFilterAllSelected(filterState) {
   }, [filterState]);
   return r;
 }
-export {
-  getSortForField,
-  useFilterAllSelected,
-  useRangeFilter,
-  useSelectFilter,
-  useSort
-};
+
+export { getSortForField, useFilterAllSelected, useRangeFilter, useSelectFilter, useSort };

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

@@ -1,5 +1,6 @@
-import { CreditAccountData_Legacy } from "@gearbox-protocol/sdk";
-import { useMemo } from "react";
+import { CreditAccountData_Legacy } from '@gearbox-protocol/sdk';
+import { useMemo } from 'react';
+
 function useHF({
   assets,
   quotas,
@@ -33,6 +34,5 @@ function useHF({
   ]);
   return { hf };
 }
-export {
-  useHF
-};
+
+export { useHF };

package/dist/esm/hooks/use-liquidation/index.js

@@ -1,38 +1,8 @@
-"use client";
-import {
-  CreditAccountData_Legacy,
-  PRICE_DECIMALS_POW,
-  toBN
-} from "@gearbox-protocol/sdk";
-import { useCallback, useMemo, useState } from "react";
-import {
-  DEFAULT_AXIS_MAX,
-  useAxis,
-  useFixedAssets,
-  usePriceInNumber
-} from "./utils.js";
-import {
-  CELL_BAD,
-  CELL_CURRENT,
-  CELL_GOOD,
-  CELL_HOVERED,
-  CELL_LIQUIDATION,
-  CELL_OK,
-  DEFAULT_AXIS_MAX as DEFAULT_AXIS_MAX2,
-  DEFAULT_AXIS_MIN,
-  formatAxisLabel,
-  formatAxisTipLabel,
-  formatAxisTipPrice,
-  getCellClass,
-  isPointInCell,
-  useAxis as useAxis2,
-  useFixedAssets as useFixedAssets2,
-  useIsAxisInRelativeUnits,
-  useLiquidationGraphActivePrice,
-  useLiquidationGraphCurrentActiveValue,
-  usePriceInNumber as usePriceInNumber2,
-  useWithLiquidationGraphActivePrices
-} from "./utils.js";
+import { toBN, PRICE_DECIMALS_POW, CreditAccountData_Legacy } from '@gearbox-protocol/sdk';
+import { useMemo, useState, useCallback } from 'react';
+import { useFixedAssets, usePriceInNumber, useAxis, DEFAULT_AXIS_MAX } from './utils.js';
+export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, useWithLiquidationGraphActivePrices } from './utils.js';
+
 const RESOLUTION = 35;
 function useLiquidationHeatmap({
   xMin,
@@ -161,28 +131,5 @@ function useLiquidationGraphParams({
     fixedBalances
   };
 }
-export {
-  CELL_BAD,
-  CELL_CURRENT,
-  CELL_GOOD,
-  CELL_HOVERED,
-  CELL_LIQUIDATION,
-  CELL_OK,
-  DEFAULT_AXIS_MAX2 as DEFAULT_AXIS_MAX,
-  DEFAULT_AXIS_MIN,
-  formatAxisLabel,
-  formatAxisTipLabel,
-  formatAxisTipPrice,
-  getCellClass,
-  isPointInCell,
-  useAxis2 as useAxis,
-  useEditPriceManually,
-  useFixedAssets2 as useFixedAssets,
-  useIsAxisInRelativeUnits,
-  useLiquidationGraphActivePrice,
-  useLiquidationGraphCurrentActiveValue,
-  useLiquidationGraphParams,
-  useLiquidationHeatmap,
-  usePriceInNumber2 as usePriceInNumber,
-  useWithLiquidationGraphActivePrices
-};
+
+export { DEFAULT_AXIS_MAX, useAxis, useEditPriceManually, useFixedAssets, useLiquidationGraphParams, useLiquidationHeatmap, usePriceInNumber };

package/dist/esm/hooks/use-liquidation/types.js

@@ -0,0 +1 @@
+

package/dist/esm/hooks/use-liquidation/utils.js

@@ -1,11 +1,8 @@
-import {
-  formatBN,
-  PERCENTAGE_FACTOR,
-  PRICE_DECIMALS_POW,
-  toBN
-} from "@gearbox-protocol/sdk";
-import { useCallback, useMemo, useState } from "react";
-import { bnToInputView } from "../../utils/bn-to-input-view.js";
+import { formatBN, toBN, PRICE_DECIMALS_POW, PERCENTAGE_FACTOR } from '@gearbox-protocol/sdk';
+import { useState, useCallback, useMemo } from 'react';
+import { bnToInputView } from '../../utils/bn-to-input-view.js';
+import { formatPrice } from '../../utils/format-number.js';
+
 const CELL_HOVERED = "rct-chart__heatmap-cell--hovered";
 const CELL_CURRENT = "rct-chart__heatmap-cell--current";
 const CELL_GOOD = "rct-chart__heatmap-cell--good";
@@ -82,16 +79,9 @@ function useIsAxisInRelativeUnits(axis, underlying) {
   return r;
 }
 const DECIMALS = 2;
-const MIN_NON_EXP = 1 / 10 ** DECIMALS;
 const MAX_SMALL_DECIMALS = 6;
 function formatAxisTipPrice(v) {
-  if (!Number.isFinite(v)) return "\u221E";
-  if (v < MIN_NON_EXP && v !== 0) {
-    const formatted = v.toFixed(MAX_SMALL_DECIMALS);
-    return formatted.replace(/\.?0+$/, "");
-  }
-  if (v > 1) return formatBN(toBN(v.toString(), DECIMALS), DECIMALS);
-  return v.toFixed(DECIMALS);
+  return formatPrice(v, DECIMALS, MAX_SMALL_DECIMALS);
 }
 function formatAxisTipLabel(token, underlyingToken, order) {
   const [t, u] = order === "straight" ? [token, underlyingToken] : [underlyingToken, token];
@@ -191,25 +181,5 @@ function getCellClass(p, currentPoint, activePointX, activePointY) {
   }
   return classes.join(" ");
 }
-export {
-  CELL_BAD,
-  CELL_CURRENT,
-  CELL_GOOD,
-  CELL_HOVERED,
-  CELL_LIQUIDATION,
-  CELL_OK,
-  DEFAULT_AXIS_MAX,
-  DEFAULT_AXIS_MIN,
-  formatAxisLabel,
-  formatAxisTipLabel,
-  formatAxisTipPrice,
-  getCellClass,
-  isPointInCell,
-  useAxis,
-  useFixedAssets,
-  useIsAxisInRelativeUnits,
-  useLiquidationGraphActivePrice,
-  useLiquidationGraphCurrentActiveValue,
-  usePriceInNumber,
-  useWithLiquidationGraphActivePrices
-};
+
+export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices };

package/dist/esm/hooks/use-media-query.js

@@ -1,5 +1,5 @@
-"use client";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from 'react';
+
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -16,9 +16,5 @@ function useMediaQuery(query) {
 const useIsMobile = () => useMediaQuery("(max-width: 768px)");
 const useIsTablet = () => useMediaQuery("(min-width: 768px) and (max-width: 1024px)");
 const useIsDesktop = () => useMediaQuery("(min-width: 1024px)");
-export {
-  useIsDesktop,
-  useIsMobile,
-  useIsTablet,
-  useMediaQuery
-};
+
+export { useIsDesktop, useIsMobile, useIsTablet, useMediaQuery };

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

@@ -1,5 +1,5 @@
-"use client";
-import { useEffect, useRef } from "react";
+import { useRef, useEffect } from 'react';
+
 function usePrevious(value) {
   const ref = useRef(void 0);
   useEffect(() => {
@@ -7,6 +7,5 @@ function usePrevious(value) {
   }, [value]);
   return ref.current;
 }
-export {
-  usePrevious
-};
+
+export { usePrevious };