@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -0,0 +1,85 @@
+const designTokens = {
+  colors: {
+    primary: "rgb(59, 130, 246)",
+    secondary: "rgb(100, 116, 139)",
+    destructive: "rgb(239, 68, 68)",
+    success: "rgb(34, 197, 94)",
+    warning: "rgb(251, 191, 36)"
+  },
+  spacing: {
+    xs: "0.5rem",
+    // 8px
+    sm: "0.75rem",
+    // 12px
+    md: "1rem",
+    // 16px
+    lg: "1.5rem",
+    // 24px
+    xl: "2rem"
+    // 32px
+  },
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    full: "9999px"
+  },
+  typography: {
+    fontFamily: {
+      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+    },
+    fontSize: {
+      xs: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      base: "1rem",
+      // 16px
+      lg: "1.125rem",
+      // 18px
+      xl: "1.25rem",
+      // 20px
+      "2xl": "1.5rem",
+      // 24px
+      "3xl": "1.875rem",
+      // 30px
+      "4xl": "2.25rem"
+      // 36px
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    },
+    lineHeight: {
+      tight: "1.25",
+      normal: "1.5",
+      relaxed: "1.75"
+    }
+  },
+  animation: {
+    duration: {
+      fast: "150ms",
+      normal: "300ms",
+      slow: "500ms"
+    },
+    easing: {
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+  }
+};
+export {
+  designTokens
+};

package/dist/esm/configs/index.js

@@ -0,0 +1,9 @@
+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
+};

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

@@ -0,0 +1,128 @@
+import tailwindAnimate from "tailwindcss-animate";
+const preset = {
+  darkMode: "class",
+  safelist: [
+    // Grid columns - dynamically generated in Grid component
+    { pattern: /^grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
+    { pattern: /^(sm|md|lg|xl):grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
+    // Column spans - dynamically generated in Col component
+    { pattern: /^col-span-(1|2|3|4|5|6|7|8|9|10|11|12|full|auto)$/ },
+    {
+      pattern: /^(sm|md|lg|xl):col-span-(1|2|3|4|5|6|7|8|9|10|11|12|full|auto)$/
+    },
+    // Column start positions - dynamically generated in Col component
+    { pattern: /^col-start-(1|2|3|4|5|6|7|8|9|10|11|12|13|auto)$/ },
+    // Order utilities - dynamically generated in Col component
+    { pattern: /^order-(1|2|3|4|5|6|7|8|9|10|11|12|first|last|none)$/ },
+    // Gap utilities - dynamically generated in Grid component
+    { pattern: /^gap-(0|1|2|3|4|5|6|7|8|9|10|12|16|20|24)$/ },
+    { pattern: /^gap-(x|y)-(0|1|2|3|4|5|6|7|8|9|10|12|16|20|24)$/ }
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        success: "hsl(var(--success))",
+        warning: "hsl(var(--warning))",
+        liquidation: "hsl(var(--liquidation))",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        "text-secondary": "hsl(var(--text-secondary))",
+        "dropdown-dark-button": "hsl(var(--dropdown-dark-button))",
+        white: "hsl(var(--white))",
+        black: "hsl(var(--black))",
+        gray: {
+          10: "hsl(var(--gray-10))",
+          20: "hsl(var(--gray-20))",
+          30: "hsl(var(--gray-30))",
+          40: "hsl(var(--gray-40))",
+          50: "hsl(var(--gray-50))",
+          60: "hsl(var(--gray-60))",
+          70: "hsl(var(--gray-70))",
+          80: "hsl(var(--gray-80))",
+          90: "hsl(var(--gray-90))",
+          100: "hsl(var(--gray-100))",
+          110: "hsl(var(--gray-110))"
+        },
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))"
+        }
+      },
+      fontFamily: {
+        sans: [
+          "Rubik",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Oxygen",
+          "Ubuntu",
+          "Cantarell",
+          "Fira Sans",
+          "Droid Sans",
+          "Helvetica Neue",
+          "sans-serif"
+        ]
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out"
+      }
+    }
+  },
+  plugins: [tailwindAnimate]
+};
+var tailwind_preset_default = preset;
+export {
+  tailwind_preset_default as default,
+  preset
+};

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

@@ -1,68 +1,27 @@
-import animate from "tailwindcss-animate";
+import { preset } from "./tailwind-preset.js";
 const tailwindConfig = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}"
-  ],
+  ...preset,
+  content: {
+    files: [
+      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+      "./components/**/*.{js,ts,jsx,tsx,mdx}",
+      "./app/**/*.{js,ts,jsx,tsx,mdx}",
+      "./src/**/*.{js,ts,jsx,tsx,mdx}"
+    ]
+  },
   theme: {
+    ...preset.theme,
     extend: {
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
-        },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          "1": "hsl(var(--chart-1))",
-          "2": "hsl(var(--chart-2))",
-          "3": "hsl(var(--chart-3))",
-          "4": "hsl(var(--chart-4))",
-          "5": "hsl(var(--chart-5))"
-        }
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)"
-      },
+      ...preset.theme?.extend,
       fontFamily: {
+        ...preset.theme?.extend?.fontFamily,
         mono: ["var(--font-geist-mono)", "monospace"]
       }
     }
-  },
-  plugins: [animate]
+  }
 };
 var tailwind_config_default = tailwindConfig;
 export {
-  tailwind_config_default as default
+  tailwind_config_default as default,
+  preset
 };

package/dist/esm/configs/variants.js

@@ -0,0 +1,31 @@
+const sizeVariants = {
+  xs: "text-xs",
+  sm: "text-sm",
+  default: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+const stateVariants = {
+  default: "",
+  error: "border-red-500 text-red-500 focus-visible:ring-red-500",
+  success: "border-green-500 text-green-500 focus-visible:ring-green-500",
+  warning: "border-yellow-500 text-yellow-500 focus-visible:ring-yellow-500"
+};
+const paddingVariants = {
+  none: "p-0",
+  xs: "p-2",
+  sm: "p-4",
+  default: "p-6",
+  lg: "p-8",
+  xl: "p-10"
+};
+const interactiveVariants = {
+  default: "transition-colors duration-200",
+  disabled: "opacity-50 cursor-not-allowed pointer-events-none"
+};
+export {
+  interactiveVariants,
+  paddingVariants,
+  sizeVariants,
+  stateVariants
+};

package/dist/esm/hooks/index.js

@@ -0,0 +1,7 @@
+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";

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

@@ -0,0 +1,26 @@
+"use client";
+import { useCallback, useState } from "react";
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = useCallback(
+    (nextValue) => {
+      const setter = nextValue;
+      const value2 = typeof nextValue === "function" ? setter(uncontrolledValue) : nextValue;
+      if (!isControlled) {
+        setUncontrolledValue(value2);
+      }
+      onChange?.(value2);
+    },
+    [isControlled, onChange, uncontrolledValue]
+  );
+  return [value, setValue];
+}
+export {
+  useControllableState
+};

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

@@ -0,0 +1,43 @@
+"use client";
+import { useCallback, useEffect, useMemo } from "react";
+const debounce = (func, delay) => {
+  let timer = null;
+  const cleanup = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const makeSyncTask = (arg) => () => {
+    func(arg);
+    cleanup();
+  };
+  const setTask = (arg) => {
+    cleanup();
+    timer = window.setTimeout(makeSyncTask(arg), delay);
+  };
+  return [setTask, cleanup];
+};
+function useDebounce(call, delay = 1e3) {
+  const [set, clean] = useMemo(() => debounce(call, delay), [call, delay]);
+  useEffect(() => {
+    return function cleanOnUnmount() {
+      clean();
+    };
+  }, [clean]);
+  return set;
+}
+const anyCall = (c) => c();
+function useDebounceCall(delay) {
+  const debounced = useDebounce(anyCall, delay);
+  return useCallback(
+    (call) => {
+      debounced(call);
+    },
+    [debounced]
+  );
+}
+export {
+  useDebounce,
+  useDebounceCall
+};

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

@@ -0,0 +1,52 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+function useRangeFilter() {
+  const [range, setRange] = useState(null);
+  const resetRange = useCallback(() => setRange(null), []);
+  return [range, setRange, resetRange];
+}
+function useSelectFilter(initialState = null) {
+  const [list, setList] = useState(initialState);
+  const resetList = useCallback(() => setList(null), []);
+  return [list, setList, resetList];
+}
+const getNextSortType = (s) => s === "asc" ? "desc" : "asc";
+const getSortForField = (s, state) => {
+  if (s !== state?.field) return void 0;
+  return state.sort;
+};
+function useSort(initialState = null) {
+  const [currentSort, setCurrentSort] = useState(
+    initialState
+  );
+  const sort = useCallback(
+    (field, startFromSort = "asc") => {
+      if (field === currentSort?.field) {
+        setCurrentSort({ field, sort: getNextSortType(currentSort.sort) });
+      } else {
+        setCurrentSort({ field, sort: startFromSort });
+      }
+    },
+    [currentSort]
+  );
+  return [currentSort, sort];
+}
+function useFilterAllSelected(filterState) {
+  const r = useMemo(() => {
+    return Object.values(filterState).reduce(
+      ([s, a], i) => {
+        const selected = !!i.state;
+        return [s || selected, a && selected];
+      },
+      [false, true]
+    );
+  }, [filterState]);
+  return r;
+}
+export {
+  getSortForField,
+  useFilterAllSelected,
+  useRangeFilter,
+  useSelectFilter,
+  useSort
+};

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

@@ -0,0 +1,38 @@
+import { CreditAccountData_Legacy } from "@gearbox-protocol/sdk";
+import { useMemo } from "react";
+function useHF({
+  assets,
+  quotas,
+  prices,
+  liquidationThresholds,
+  underlyingToken,
+  debt,
+  quotasInfo,
+  tokensList
+}) {
+  const hf = useMemo(() => {
+    return CreditAccountData_Legacy.calcHealthFactor({
+      assets,
+      quotas,
+      prices,
+      liquidationThresholds,
+      underlyingToken,
+      debt,
+      quotasInfo,
+      tokensList
+    });
+  }, [
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingToken,
+    debt,
+    quotasInfo,
+    tokensList
+  ]);
+  return { hf };
+}
+export {
+  useHF
+};

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

@@ -0,0 +1,188 @@
+"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";
+const RESOLUTION = 35;
+function useLiquidationHeatmap({
+  xMin,
+  xMax,
+  yMin,
+  yMax,
+  xLabel,
+  yLabel,
+  assets,
+  quotas,
+  prices,
+  liquidationThresholds,
+  quotasInfo,
+  underlyingTokenAddress,
+  debt,
+  tokensList
+}) {
+  const heatmap = useMemo(() => {
+    const intervalX = xMax - xMin;
+    const intervalY = yMax - yMin;
+    const stepX = intervalX / RESOLUTION;
+    const stepY = intervalY / RESOLUTION;
+    const GRID = Array.from(Array(RESOLUTION));
+    const pricesCopy = { ...prices };
+    return GRID.flatMap((_, i) => {
+      const x = xMin + i * stepX;
+      const xEnd = xMin + (i + 1) * stepX;
+      if (xLabel) {
+        pricesCopy[xLabel.address] = toBN(
+          String((x + xEnd) / 2),
+          PRICE_DECIMALS_POW
+        );
+      }
+      return GRID.map((__, j) => {
+        const y = yMin + j * stepY;
+        const yEnd = yMin + (j + 1) * stepY;
+        if (yLabel) {
+          pricesCopy[yLabel.address] = toBN(
+            String((y + yEnd) / 2),
+            PRICE_DECIMALS_POW
+          );
+        }
+        return {
+          x,
+          xEnd,
+          y,
+          yEnd,
+          value: CreditAccountData_Legacy.calcHealthFactor({
+            assets,
+            quotas,
+            prices: pricesCopy,
+            liquidationThresholds,
+            underlyingToken: underlyingTokenAddress,
+            debt,
+            quotasInfo,
+            tokensList
+          })
+        };
+      });
+    });
+  }, [
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  ]);
+  return heatmap;
+}
+function useEditPriceManually({ prices }) {
+  const [editedPrices, setEditedPrices] = useState({});
+  const allPrices = useMemo(
+    () => ({ ...prices, ...editedPrices }),
+    [prices, editedPrices]
+  );
+  const handleEditPrice = useCallback(
+    (newPrice, token) => {
+      setEditedPrices({ ...editedPrices, [token]: newPrice });
+    },
+    [editedPrices]
+  );
+  return [allPrices, handleEditPrice];
+}
+function useLiquidationGraphParams({
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  tokensList,
+  prices
+}) {
+  const [fixedBalances] = useFixedAssets({
+    assets,
+    liquidationThresholds,
+    quotas,
+    quotasInfo
+  });
+  const [priceX, tokenX] = usePriceInNumber({
+    asset: fixedBalances[0],
+    tokensList,
+    prices
+  });
+  const [priceY, tokenY] = usePriceInNumber({
+    asset: fixedBalances[1],
+    tokensList,
+    prices
+  });
+  const xAxis = useAxis({ currentPrice: priceX, token: tokenX });
+  const yAxis = useAxis({ currentPrice: priceY, token: tokenY });
+  return {
+    xAxis,
+    yAxis,
+    currentPoint: [
+      priceX || DEFAULT_AXIS_MAX / 2,
+      priceY || DEFAULT_AXIS_MAX / 2
+    ],
+    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
+};