@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/esm/utils/colors.js

@@ -0,0 +1,69 @@
+function resolveCSSColor(color, fallback = "#000000") {
+  if (!color.includes("var(")) {
+    return color;
+  }
+  try {
+    const tempElement = document.createElement("div");
+    tempElement.style.color = color;
+    tempElement.style.display = "none";
+    document.body.appendChild(tempElement);
+    const computedColor = window.getComputedStyle(tempElement).color;
+    document.body.removeChild(tempElement);
+    if (computedColor && computedColor !== "rgba(0, 0, 0, 0)") {
+      return computedColor;
+    }
+  } catch (error) {
+    console.warn(`Failed to resolve CSS color: ${color}`, error);
+  }
+  return fallback;
+}
+function getCSSVariable(variableName, fallback = "#000000") {
+  const name = variableName.startsWith("--") ? variableName : `--${variableName}`;
+  try {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    if (value) {
+      if (/^[\d\s.%]+$/.test(value)) {
+        return `hsl(${value})`;
+      }
+      return value;
+    }
+  } catch (error) {
+    console.warn(`Failed to get CSS variable: ${name}`, error);
+  }
+  return fallback;
+}
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function generateColorsFromBase(color) {
+  if (color.startsWith("rgba")) {
+    const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (rgbaMatch) {
+      const [, r, g, b] = rgbaMatch;
+      return {
+        topColor: `rgba(${r}, ${g}, ${b}, 0.56)`,
+        bottomColor: `rgba(${r}, ${g}, ${b}, 0.04)`
+      };
+    }
+  }
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const fullHex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+    return {
+      topColor: hexToRgba(fullHex, 0.56),
+      bottomColor: hexToRgba(fullHex, 0.04)
+    };
+  }
+  return {
+    topColor: color,
+    bottomColor: color
+  };
+}
+export {
+  generateColorsFromBase,
+  getCSSVariable,
+  hexToRgba,
+  resolveCSSColor
+};

package/dist/esm/utils/format-asset-amount.js

@@ -0,0 +1,19 @@
+import { formatBN } from "@gearbox-protocol/sdk";
+const AMOUNT_PRECISION = 3;
+function isZero(precision) {
+  const zero = `0.${"0".repeat(precision)}`;
+  return (formattedBn) => zero === formattedBn;
+}
+function formatAssetAmount(amount, decimals, precision = AMOUNT_PRECISION) {
+  const formatted = formatBN(amount, decimals, precision);
+  if (amount < 10n) {
+    return `0.${"0".repeat(precision)}`;
+  }
+  if (isZero(precision)(formatted)) {
+    return `< 0.${"0".repeat(precision - 1)}1`;
+  }
+  return formatted;
+}
+export {
+  formatAssetAmount
+};

package/dist/esm/utils/format-money.js

@@ -0,0 +1,40 @@
+import { BigIntMath, formatBN, WAD_DECIMALS_POW } from "@gearbox-protocol/sdk";
+const ONE_CENT = 10000000000000000n;
+function moneyToBn(money) {
+  return BigInt(money.toFixed(18).replace(".", ""));
+}
+function formatMoney(money, precision) {
+  const isNegative = typeof money === "number" && money < 0 || typeof money === "bigint" && money < 0n;
+  const sign = isNegative ? "-" : "";
+  const moneyBn = typeof money === "number" ? moneyToBn(Math.abs(money)) : BigIntMath.abs(money);
+  const lessThanCent = moneyBn < ONE_CENT && moneyBn > 0n;
+  const formattedBn = lessThanCent ? "0.01" : formatBN(moneyBn, WAD_DECIMALS_POW, precision);
+  const moneyTemplated = `${sign}$${formattedBn}`;
+  return lessThanCent ? `< ${moneyTemplated}` : moneyTemplated;
+}
+const MAX_EXPONENTIAL_PERCENT_THRESHOLD = 1e4;
+function formatPercentAmount(value, decimals) {
+  const numValue = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(numValue) || numValue === void 0 || numValue === null) {
+    return "0";
+  }
+  if (numValue === 0) return 0;
+  if (numValue > MAX_EXPONENTIAL_PERCENT_THRESHOLD)
+    return numValue.toExponential(decimals);
+  return numValue.toFixed(decimals);
+}
+function percentTemplate(value, decimals = 2) {
+  return `${formatPercentAmount(value, decimals)}%`;
+}
+const PERCENTAGE_FACTOR = 1e4;
+function percentageTemplate(value, decimals = 2) {
+  const formatted = Number(value) / Number(PERCENTAGE_FACTOR);
+  return `${formatPercentAmount(formatted, decimals)}%`;
+}
+export {
+  PERCENTAGE_FACTOR,
+  formatMoney,
+  formatPercentAmount,
+  percentTemplate,
+  percentageTemplate
+};

package/dist/esm/utils/index.js

@@ -1,7 +1,27 @@
+export * from "./a11y.js";
+export * from "./bn-to-input-view.js";
 export * from "./cn.js";
 import { cn } from "./cn.js";
+export * from "./colors.js";
 export * from "./copy.js";
 export * from "./format.js";
+export * from "./format-asset-amount.js";
+import {
+  formatMoney,
+  formatPercentAmount,
+  PERCENTAGE_FACTOR,
+  percentageTemplate,
+  percentTemplate
+} from "./format-money.js";
+export * from "./interface.js";
+export * from "./react.js";
+export * from "./short-sha.js";
+export * from "./templates.js";
 export {
-  cn as default
+  PERCENTAGE_FACTOR,
+  cn as default,
+  formatMoney,
+  formatPercentAmount,
+  percentTemplate,
+  percentageTemplate
 };

package/dist/esm/utils/react.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+function extractTextFromLabel(label) {
+  if (label === null || label === void 0) {
+    return "";
+  }
+  if (typeof label === "string" || typeof label === "number") {
+    return String(label);
+  }
+  if (typeof label === "boolean") {
+    return label ? "true" : "false";
+  }
+  if (React.isValidElement(label)) {
+    const props = label.props;
+    const children = props?.children;
+    if (children === void 0 || children === null) {
+      return "";
+    }
+    if (Array.isArray(children)) {
+      return children.map(extractTextFromLabel).join(" ");
+    }
+    return extractTextFromLabel(children);
+  }
+  if (Array.isArray(label)) {
+    return label.map(extractTextFromLabel).join(" ");
+  }
+  try {
+    return String(label);
+  } catch {
+    return "";
+  }
+}
+function serializeValue(value) {
+  if (value === null || value === void 0) {
+    return String(value);
+  }
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "number" || valueType === "boolean") {
+    return String(value);
+  }
+  if (valueType === "bigint") {
+    return `bigint:${value.toString()}`;
+  }
+  if (valueType === "symbol" || valueType === "function") {
+    return `${valueType}:${String(value)}`;
+  }
+  try {
+    return JSON.stringify(value, (_, val) => {
+      if (typeof val === "bigint") {
+        return `bigint:${val.toString()}`;
+      }
+      if (typeof val === "symbol") {
+        return `symbol:${String(val)}`;
+      }
+      if (typeof val === "function") {
+        return `function:${val.name || "anonymous"}`;
+      }
+      return val;
+    });
+  } catch {
+    try {
+      return `${valueType}:${String(value)}`;
+    } catch {
+      return `[unserializable:${valueType}]`;
+    }
+  }
+}
+export {
+  extractTextFromLabel,
+  serializeValue
+};

package/dist/esm/utils/short-sha.js

@@ -0,0 +1,4 @@
+const shortSHA = (sha) => sha.slice(0, 7);
+export {
+  shortSHA
+};

package/dist/esm/utils/templates.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { formatBN } from "@gearbox-protocol/sdk";
+import { percentTemplate } from "./format-money.js";
+function percentageTemplate(value, decimals = 2) {
+  return /* @__PURE__ */ jsx(Fragment, { children: percentTemplate(value, decimals) });
+}
+function tokenTemplate(value, token, precision, spaceSymbol = " ") {
+  const { decimals = 18 } = token || {};
+  const formattedBn = formatBN(value, decimals, precision);
+  const tokenName = token?.title || token?.symbol || "undefined";
+  return /* @__PURE__ */ jsx(Fragment, { children: formattedBn === "-" ? formattedBn : `${formattedBn}${spaceSymbol}${tokenName}` });
+}
+function tokenTemplateNumber(value, token, precision = 2) {
+  if (value === void 0) return "-";
+  const formattedValue = value.toFixed(precision);
+  const sign = Math.abs(Number(formattedValue)) > 0 ? "" : "< ";
+  const result = sign ? `${formattedValue.slice(0, formattedValue.length - 1)}1` : formattedValue;
+  return `${sign}${result} ${token?.title}`;
+}
+export {
+  percentageTemplate,
+  tokenTemplate,
+  tokenTemplateNumber
+};

package/dist/globals.css

@@ -1,88 +1,266 @@
-/** biome-ignore-all lint/suspicious/noUnknownAtRules: <> */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  @apply dark;
-}
+@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+@import "./grid-safelist.css";
 
 @layer base {
   :root {
+    color-scheme: light dark;
+
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
+    --primary: 330 98% 48%;
     --primary-foreground: 0 0% 98%;
-
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
+    --muted: 0 0% 89.8%;
     --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
+    --accent: 330 100% 59%;
     --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
+    --destructive: 0 100% 65%;
     --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
+    --success: 143 100% 78%;
+    --warning: 44 100% 69%;
     --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
+    --ring: 330 98% 48%;
+    --radius: 0.75rem;
+    --text-secondary: 0 0% 60%;
+    --dropdown-dark-button: 0 0% 20%;
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+    --border: 0 0% 89.8%;
   }
 
   .dark {
-    --background: 0 0% 0%;
-    --foreground: 0 0% 98%;
+    color-scheme: dark;
 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --background: 240 7% 7.5%;
+    --foreground: 0 0% 100%;
+    --card: 240 7% 10%;
+    --card-foreground: 0 0% 100%;
+    --popover: 240 6% 12%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 330 98% 48%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 7% 17%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 225 6% 19%;
+    --muted-foreground: 240 2% 75%;
+    --accent: 330 100% 59%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 100% 65%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 143 100% 78%;
+    --warning: 44 100% 69%;
+    --liquidation: 274 67% 58%;
+    --input: 225 6% 19%;
+    --ring: 330 100% 59%;
+    --gray-10: 240 7% 17%;
+    --gray-20: 225 6% 19%;
+    --gray-30: 225 7% 22%;
+    --gray-40: 225 8% 26%;
+    --gray-50: 225 8% 30%;
+    --gray-60: 225 8% 34%;
+    --gray-70: 225 7% 38%;
+    --gray-80: 225 6% 42%;
+    --gray-90: 225 6% 47%;
+    --gray-100: 225 7% 51%;
+    --gray-110: 225 8% 70%;
+    --text-secondary: 240 2% 75%;
+    --dropdown-dark-button: 225 6% 19%;
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+    --border: 225 7% 22%;
+  }
+}
 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family:
+      "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+    font-size: 1rem;
+    line-height: 1.1875rem;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    font-feature-settings:
+      "ss01" on,
+      "ss02" on,
+      "cv01" on,
+      "cv03" on;
+  }
 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
+  html.dark {
+    color-scheme: dark;
+  }
 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
+  /* Custom scrollbar styles */
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    border-radius: 8px;
+  }
 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+  *::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-90));
+    border-radius: 8px;
+  }
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+  *::-webkit-scrollbar-track {
+    background: hsl(var(--gray-20));
+  }
+}
+
+/* Table responsive grid with CSS variables */
+.table-sm-grid {
+  grid-template-columns: repeat(var(--grid-cols-xs, 1), minmax(0, 1fr));
+}
 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+@media (min-width: 640px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(
+        var(--grid-cols-sm, var(--grid-cols-xs, 1)),
+        minmax(0, 1fr)
+      );
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
+@media (min-width: 768px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(
+        var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1))),
+        minmax(0, 1fr)
+      );
   }
-  body {
-    @apply bg-background text-foreground;
+}
+
+@media (min-width: 1024px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(
+        var(
+          --grid-cols-lg,
+          var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1)))
+        ),
+        minmax(0, 1fr)
+      );
   }
 }
 
-/* Add these styles to fix white background under scroll */
-@layer base {
-  html.dark {
-    color-scheme: dark;
+/* Liquidation Graph Styles */
+.liquidation-graph-container .rct-xy-plot {
+  .rct-chart-background {
+    fill: transparent;
+  }
+
+  .rct-chart-inner {
+    .rct-plot-background {
+      fill: transparent;
+    }
+
+    /* Crosshair lines */
+    .rct-chart-line-x.rct-crosshair-x,
+    .rct-chart-line-y.rct-crosshair-y {
+      stroke: black;
+      stroke-dasharray: 1px, 1px;
+    }
+
+    /* Axis text styling */
+    & > g:not([class]) > text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y,
+    .rct-chart-axis.rct-chart-axis-x {
+      cursor: pointer;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-value-labels-y text,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-value-labels-x text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y > g:not([class]) > text,
+    .rct-chart-axis.rct-chart-axis-x > g:not([class]) > text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-grid-x .rct-chart-line-x.rct-chart-grid-line:first-of-type,
+    .rct-chart-grid-y .rct-chart-line-y.rct-chart-grid-line:first-of-type {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-ticks-y line,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-ticks-x line {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    /* Heatmap cell colors */
+    .rct-chart__heatmap-cell--current {
+      fill: white !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--liquidation {
+      fill: rgb(244, 67, 54) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--bad {
+      fill: rgb(255, 152, 0) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--ok {
+      fill: rgb(255, 193, 7) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--good {
+      fill: rgb(67, 160, 71) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--hovered {
+      opacity: 0.6;
+    }
   }
 }