@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

package/dist/types/hooks/use-hf.d.ts

@@ -9,7 +9,8 @@ export interface UseHFProps {
     underlyingToken: Address;
     debt: bigint;
     tokensList: Record<Address, TokenData>;
+    allowZeroDebt?: boolean;
 }
-export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, tokensList, }: UseHFProps): {
+export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, allowZeroDebt, tokensList, }: UseHFProps): {
     hf: number;
 };

package/dist/types/hooks/use-media-query.d.ts

@@ -11,6 +11,10 @@
  * ```
  */
 export declare function useMediaQuery(query: string): boolean;
+/**
+ * Checks if the viewport is mobile-sized (max-width: 500px-)
+ */
+export declare const useIsExtraSmall: () => boolean;
 /**
  * Checks if the viewport is mobile-sized (max-width: 768px)
  */
@@ -19,6 +23,10 @@ export declare const useIsMobile: () => boolean;
  * Checks if the viewport is tablet-sized (768px - 1024px)
  */
 export declare const useIsTablet: () => boolean;
+/**
+ * Checks if the viewport is medium-sized or smaller (max-width: 1024px)
+ */
+export declare const useIsMedium: () => boolean;
 /**
  * Checks if the viewport is desktop-sized (min-width: 1024px)
  */

package/dist/types/hooks/use-smart-number-input.d.ts

@@ -0,0 +1 @@
+export declare function useSmartNumberInput(initialAmount?: bigint, initialView?: string): readonly [bigint, string, (value: bigint, valueView: string) => void];

package/dist/types/index.d.ts

@@ -1,7 +1,9 @@
+import { default as EnglishLocale } from './locale/en.json';
 export * from './components/accordion';
 export * from './components/alert-badge';
 export * from './components/alert-dialog';
 export * from './components/alert-modal';
+export * from './components/app-bar';
 export * from './components/apy';
 export * from './components/arc-loader';
 export * from './components/asset-line';
@@ -53,13 +55,17 @@ export * from './components/help-tip';
 export * from './components/hide-on';
 export * from './components/horizontal-indicator';
 export * from './components/icon-button';
+export * from './components/icons';
 export * from './components/input';
 export * from './components/label';
 export * from './components/layout';
 export * from './components/legal-agreement';
+export * from './components/link';
 export * from './components/liquidation';
+export * from './components/liquidation-price';
 export * from './components/loader-guard';
 export * from './components/markdown-viewer';
+export * from './components/modal';
 export * from './components/navbar';
 export * from './components/navbar-logo';
 export * from './components/navitem';
@@ -83,17 +89,21 @@ export * from './components/search-bar';
 export * from './components/search-line';
 export * from './components/segmented-control';
 export * from './components/select';
+export * from './components/separate-line';
 export * from './components/separator';
 export * from './components/short-string';
 export * from './components/signatures';
+export * from './components/simple-dropdown';
 export * from './components/skeleton';
 export * from './components/slider';
 export * from './components/slider-token';
 export * from './components/smart-number-input';
 export * from './components/spinner';
+export * from './components/spinner-loader';
 export * from './components/split-list';
 export * from './components/stat-badge';
 export * from './components/status-dot';
+export * from './components/status-elements';
 export * from './components/status-triangle';
 export * from './components/stepper';
 export * from './components/styled-dropdown';
@@ -105,7 +115,9 @@ export * from './components/text-button';
 export * from './components/textarea';
 export * from './components/theme-provider';
 export * from './components/theme-toggle';
+export * from './components/time-to-liquidation';
 export * from './components/tip-card';
+export * from './components/toggle';
 export * from './components/token-icon';
 export * from './components/token-symbol';
 export * from './components/token-template';
@@ -122,10 +134,13 @@ export * from './components/with-title';
 export * from './configs/design-tokens';
 export * from './configs/variants';
 export * from './hooks';
+export type { LocaleKeys } from './locale';
+export * from './locale';
+export { EnglishLocale };
 export * from './utils';
 export * from './utils/a11y';
 export { cn } from './utils/cn';
 export * from './utils/copy';
 export * from './utils/format';
-export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from './utils/format-money';
+export { formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
 export * from './utils/templates';

package/dist/types/locale/en.json.d.ts

@@ -0,0 +1,70 @@
+declare const _default: {
+  "errors.networkError": "Network error. Can't fetch data",
+  "errors.incorrectAddressError": "Incorrect address. Please, check url",
+  "errors.noOpenedAccountsError": "You have no opened Credit Accounts. Perhaps, you have recently been liquidated? Check notification centre to see more.",
+  "errors.notFound": "Not found",
+  "errors.tooManyRequests": "Too many requests",
+  "errors.incorrectAddress": "Incorrect address",
+  "components.errorMessage.oops": "Oops...",
+
+  "components.alertModal.ok": "Ok",
+
+  "components.footer.privacy": "Privacy Notice",
+  "components.footer.terms": "Terms of Service",
+  "components.footer.disclosure": "Risk Disclosure Statement",
+  "components.footer.legalNotice": "Legal Notice",
+  "components.footer.legal": "Legal Info",
+  "components.footer.gearbox": "Copyright © Gearbox Foundation 2023-2026.",
+  "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
+  "components.footer.version": "Version {value}",
+
+  "components.liquidationPrice.check": "Check Area",
+
+  "components.loading.loading": "Loading",
+  "components.loading.wait": "Please wait...",
+
+  "components.smartNumberInput.balance": "Balance",
+  "components.smartNumberInput.inputTitle": "Token Amount",
+  "components.smartNumberInput.confirm.input": "Input",
+
+  "components.tipWindow.title": "Tip",
+
+  "components.healthFactor.low": "Extremely low! This HF may not cover possible oracle deviations.",
+
+  "components.headCell": "Sort by {value}",
+
+  "components.graphView.noData": "Can't get data for this graph",
+
+  "components.filterBlock.reset": "Reset All",
+
+  "components.APY.tip": "These APYs are derived from the underlying protocols’ APIs and may differ in reality. Check respective protocols for their methodology.",
+
+  "components.creditSessionDetailedLiquidation.graph.noData": "No data",
+  "components.creditSessionDetailedLiquidation.graph.legend.point": "Current price",
+  "components.creditSessionDetailedLiquidation.graph.legend.area": "Liquidation Area",
+  "components.creditSessionDetailedLiquidation.graph.tip.hf": "Health Factor",
+  "components.creditSessionDetailedLiquidation.graph.tip.price": "Price",
+  "components.creditSessionDetailedLiquidation.table.noData": "No data",
+  "components.creditSessionDetailedLiquidation.table.seeGraph": "See graph",
+  "components.creditSessionDetailedLiquidation.table.asset": "Asset",
+  "components.creditSessionDetailedLiquidation.table.currentPrice": "Current price",
+  "components.creditSessionDetailedLiquidation.table.modelPrice": "Model price",
+
+  "components.apyParts.features.points": "Points",
+  "components.apyParts.features.incent": "Incent.",
+  "components.apyParts.supplyAPY": "Organic APY",
+  "components.apyParts.title": "APY type",
+  "components.apyParts.supplyAPY.tip": "Yield from lending funds",
+  "components.apyParts.tokenYield": "Intrinsic APY",
+  "components.apyParts.tokenYield.tip": "Yield from holding wstETH",
+  "components.apyParts.extraAPY": "{symbol} Incentive",
+  "components.apyParts.extraAPY.tip": "Calculated at the current rate",
+  "components.apyParts.totalAPY": "Overall APY",
+  "components.apyParts.points": "{symbol} Incentive",
+  "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
+
+  "components.openCopyButtons.copy": "Copy to clipboard"
+}
+;
+
+export default _default;

package/dist/types/locale/index.d.ts

@@ -0,0 +1,10 @@
+import { default as en } from './en.json';
+type LocaleType = typeof en;
+export interface LocaleRegistry {
+    base: LocaleType;
+}
+type RegistryKeys<T> = {
+    [K in keyof T]: keyof T[K];
+}[keyof T];
+export default en;
+export type LocaleKeys = RegistryKeys<LocaleRegistry>;

package/dist/types/types/component-props.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { default as React } from '../../node_modules/.pnpm/react@19.2.0/node_modules/react';
+import { default as React } from 'react';
 /**
  * Utility for extracting variants from CVA
  */

package/dist/types/types/footer.d.ts

@@ -21,7 +21,7 @@ export interface NetworkById {
     [chainId: number]: string;
 }
 export interface BlockSyncProps {
-    blockByChain: BlockByChain;
+    blockByChain: BlockByChain | undefined;
     explorerAddresses: ExplorerAddresses;
     networkById: NetworkById;
 }

package/dist/types/utils/bn-to-pretty-view.d.ts

@@ -1,3 +1,4 @@
+import { ParseSmallNumberResult } from './parse-input-to-bn';
 /**
  * Formats a BigInt value to a pretty human-readable string with locale formatting
  *
@@ -12,4 +13,4 @@
  * bnToPrettyView(1000000000000000000n, 18) // "1"
  * ```
  */
-export declare function bnToPrettyView(value: bigint, decimals: number, options?: Intl.NumberFormatOptions): string;
+export declare function bnToPrettyView(number: bigint | undefined | string | number, decimals: number, precision?: number, allowNegative?: boolean): ParseSmallNumberResult;

package/dist/types/utils/format-money.d.ts

@@ -44,10 +44,6 @@ export declare function formatPercentAmount(value: number, decimals: number, all
  * ```
  */
 export declare function percentTemplate(value: number, decimals?: number): string;
-/**
- * The factor used for percentage values in basis points (10000 = 100%)
- */
-export declare const PERCENTAGE_FACTOR = 10000;
 /**
  * Formats a percentage value from basis points
  * Use this when your value is in basis points (10000 = 100%)
@@ -64,23 +60,24 @@ export declare const PERCENTAGE_FACTOR = 10000;
  * ```
  */
 export declare function percentageTemplate(value: number | bigint, decimals?: number): string;
-/**
- * The factor used for slippage values (1000 = 1%)
- */
-export declare const SLIPPAGE_DECIMALS = 1000n;
-/**
- * Formats a number or bigint as a money amount with currency formatting
- * Compatible with legacy API that accepts options object
- *
- * @param value - The number or bigint to format
- * @param options - Number of decimal places or Intl.NumberFormatOptions
- * @returns Formatted string like "$1,234.56"
- *
- * @example
- * ```ts
- * formatMoneyAmount(1234.56) // "$1,234.56"
- * formatMoneyAmount(1234.56, 0) // "$1,235"
- * formatMoneyAmount(1234.56, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) // "$1,234.56"
- * ```
- */
-export declare function formatMoneyAmount(value: number | bigint | string, options?: number | Intl.NumberFormatOptions): string;
+export declare const DEFAULT_FORMAT_MONEY_CONSTANTS: {
+    minimumFractionDigits: number;
+    maximumFractionDigits: number;
+    decimalPrecision: number;
+    minDecimalThreshold: number;
+    minExponentialThreshold: number;
+    maxExponentialThreshold: number;
+    locale: string;
+};
+export interface FormatMoneyAmountProps {
+    amount: number | bigint;
+    format?: "short" | "full";
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    decimalPrecision?: number;
+    minDecimalThreshold?: number;
+    minExponentialThreshold?: number;
+    maxExponentialThreshold?: number;
+    locale?: string;
+}
+export declare const formatMoneyAmount: ({ amount, format, maximumFractionDigits, minimumFractionDigits, decimalPrecision, minDecimalThreshold, minExponentialThreshold, maxExponentialThreshold, locale, }: FormatMoneyAmountProps) => string;

package/dist/types/utils/index.d.ts

@@ -7,10 +7,11 @@ export * from './colors';
 export * from './copy';
 export * from './format';
 export * from './format-asset-amount';
-export { formatMoney, formatMoney as formatMoneyAmount, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, SLIPPAGE_DECIMALS, } from './format-money';
+export { formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
 export { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
 export * from './format-slippage';
 export * from './interface';
+export * from './loading';
 export * from './network-icons';
 export * from './parse-input-to-bn';
 export * from './plural';
@@ -24,3 +25,4 @@ export type { SortField as UtilsSortField, SortType } from './sort';
 export * from './templates';
 export * from './ttl';
 export * from './window';
+export * from './z-index';

package/dist/types/utils/loading.d.ts

@@ -0,0 +1,3 @@
+export declare function allLoaded(itemsToLoad: Array<unknown>): boolean;
+export declare function round5(value: number): number;
+export declare function loadingProgress(itemsToLoad: Array<unknown>): number;

package/dist/types/utils/network-icons.d.ts

@@ -1,19 +1,10 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
 /**
- * Network icon paths mapping
+ * Known network icons type.
+ * Accepts any NetworkType from SDK plus "AllNetworks" and arbitrary strings
+ * for forward compatibility with new networks.
  */
-export type NetworkType = "Mainnet" | "Arbitrum" | "Optimism" | "Sonic" | "Monad" | "AllNetworks" | string;
-/**
- * Alias for backward compatibility
- */
-export type NetworkIcons = NetworkType;
-/**
- * Network configuration
- */
-export interface NetworkConfig {
-    name: string;
-    icon: string;
-    chainId: number;
-}
+export type NetworkIcons = NetworkType | "AllNetworks";
 /**
  * Get network icon path by network name
  *
@@ -26,22 +17,4 @@ export interface NetworkConfig {
  * getNetworkIcon("Unknown") // ""
  * ```
  */
-export declare function getNetworkIcon(network: NetworkType): string;
-/**
- * Get network name by chain ID
- *
- * @param chainId - Chain ID
- * @returns Network name or undefined if not found
- */
-export declare function getNetworkByChainId(chainId: number): string | undefined;
-/**
- * Get network config by name
- *
- * @param network - Network name
- * @returns Network config or undefined if not found
- */
-export declare function getNetworkConfig(network: NetworkType): NetworkConfig | undefined;
-/**
- * Get all available networks
- */
-export declare function getAllNetworks(): NetworkConfig[];
+export declare function getNetworkIcon(network: NetworkIcons): string;

package/dist/types/utils/parse-input-to-bn.d.ts

@@ -1,16 +1,13 @@
-/**
- * Parses a string input to BigInt with decimal support
- *
- * @param input - The input string to parse (e.g., "123.45")
- * @param decimals - Number of decimal places for the token
- * @param allowNegative - Whether to allow negative values
- * @returns Tuple of [bigint value, cleaned input string] or [null, null] on error
- *
- * @example
- * ```ts
- * parseInputToBN("123.45", 18) // [123450000000000000000n, "123.45"]
- * parseInputToBN("", 18) // [0n, ""]
- * parseInputToBN("invalid", 18) // [null, null]
- * ```
- */
-export declare function parseInputToBN(input: string | undefined | null, decimals: number, allowNegative?: boolean): [bigint | null, string | null];
+export declare function isPositiveFloat(val: string): boolean;
+export type ParseOutput = [bigint | null, string | null];
+export declare const parseInputToBN: (input: string, decimals: number, allowNegative?: boolean) => ParseOutput;
+export interface SmallNumberParseResult {
+    integer: string;
+    repeat: number;
+    decimal: string | undefined;
+}
+export type ParseSmallNumberResult = SmallNumberParseResult | {
+    originalValue: string;
+};
+export declare function parseSmallNumber(numStr: string): ParseSmallNumberResult;
+export declare function bnToLiquidationPriceView(number: bigint, precision?: number): ParseSmallNumberResult;

package/dist/types/utils/ranges.d.ts

@@ -1,17 +1,33 @@
 /**
  * Color interval for slider or progress visualization
- * Supports both from/to (new API) and start/end (legacy API)
  */
 export interface ColorInterval {
-    /** Start of interval (legacy API) */
+    /** Start of interval */
     start?: number;
-    /** End of interval (legacy API) */
+    /** End of interval */
     end?: number;
-    /** Start of interval (new API) */
-    from?: number;
-    /** End of interval (new API) */
-    to?: number;
     color?: string;
-    [key: string]: unknown;
 }
+/**
+ * Filters and clips intervals to fit within min/max bounds
+ *
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @param intervals - Array of intervals to filter
+ * @returns Filtered intervals that overlap with [min, max], clipped to bounds
+ *
+ * @example
+ * ```ts
+ * getAvailableRanges(0, 100, [
+ *   { start: -10, end: 30, color: "red" },
+ *   { start: 50, end: 150, color: "green" },
+ *   { start: 200, end: 300, color: "blue" },
+ * ])
+ * // Returns:
+ * // [
+ * //   { start: 0, end: 30, color: "red" },
+ * //   { start: 50, end: 100, color: "green" },
+ * // ]
+ * ```
+ */
 export declare function getAvailableRanges(min: number, max: number, intervals: ColorInterval[]): ColorInterval[];

package/dist/types/utils/shorten-string.d.ts

@@ -12,4 +12,5 @@
  * shortenString("A very long string", 10) // "A very lon..."
  * ```
  */
-export declare function shortenString(str: string, maxLength?: number): string;
+export declare function shortenString(str: string, maxLength: number): string;
+export declare function isLongString(str: string, maxLength: number): boolean;

package/dist/types/utils/static.d.ts

@@ -0,0 +1,3 @@
+export declare const STATIC_SERVER = "https://static.gearbox.finance";
+export declare const buildStaticUrl: (domain?: string) => (url: string) => string;
+export declare const getStatic: (url: string) => string;

package/dist/types/utils/templates.d.ts

@@ -38,7 +38,7 @@ type PartialTokenData = Pick<TokenData, "title" | "decimals"> & {
  * // "1.00 Very..." (truncated to 10 chars)
  * ```
  */
-export declare function tokenTemplate(value: bigint | string | number | undefined, token: PartialTokenData | undefined, precision?: number, spaceSymbol?: string, maxLength?: number): React.ReactElement;
+export declare function tokenTemplate(value: bigint | string | number | undefined, token: PartialTokenData | undefined, precision?: number, spaceSymbol?: string, maxLength?: number): string;
 /**
  * Formats a token amount and returns it as a string with token title
  * Use this when you need a formatted number string with token name (not a React element)

package/dist/types/utils/ttl.d.ts

@@ -7,12 +7,12 @@ export type TTLZones = "good" | "medium" | "bad";
  *
  * @example
  * ```ts
- * getTTLZone(40 * DAY) // "good"
- * getTTLZone(14 * DAY) // "medium"
- * getTTLZone(3 * DAY)  // "bad"
+ * getTTLZones(40 * DAY) // "good"
+ * getTTLZones(14 * DAY) // "medium"
+ * getTTLZones(3 * DAY)  // "bad"
  * ```
  */
-export declare function getTTLZone(ttl: number | bigint | undefined): TTLZones | undefined;
+export declare function getTTLZones(ttl: number | bigint | undefined): TTLZones | undefined;
 /**
  * Format remaining time as a human-readable string
  *
@@ -21,13 +21,13 @@ export declare function getTTLZone(ttl: number | bigint | undefined): TTLZones |
  *
  * @example
  * ```ts
- * ttlLeft(5 * DAY + 12 * HOUR) // "5d 12h"
- * ttlLeft(3 * HOUR + 45 * MINUTE) // "3h 45m"
- * ttlLeft(30 * SECOND) // "< 1m"
- * ttlLeft(0) // "Expired"
+ * ttlLeftHuman(5 * DAY + 12 * HOUR) // "5d 12h"
+ * ttlLeftHuman(3 * HOUR + 45 * MINUTE) // "3h 45m"
+ * ttlLeftHuman(30 * SECOND) // "< 1m"
+ * ttlLeftHuman(0) // "Expired"
  * ```
  */
-export declare function ttlLeft(ttl: number | bigint | undefined): string;
+export declare function ttlLeftHuman(ttl: number | bigint | undefined): string;
 /**
  * Format timestamp to remaining time string
  *
@@ -60,12 +60,12 @@ export type TTLLeftResult = {
  *
  * @example
  * ```ts
- * ttlLeftParsed(100 * DAY) // { months: 3 }
- * ttlLeftParsed(15 * DAY)  // { day: 15 }
- * ttlLeftParsed(12 * HOUR) // undefined
+ * ttlLeft(100 * DAY) // { months: 3 }
+ * ttlLeft(15 * DAY)  // { day: 15 }
+ * ttlLeft(12 * HOUR) // undefined
  * ```
  */
-export declare function ttlLeftParsed(ttl: number | bigint | undefined): TTLLeftResult;
+export declare function ttlLeft(ttl: number | bigint): TTLLeftResult;
 export declare const TTL_CONSTANTS: {
     readonly SECOND: 1000;
     readonly MINUTE: number;

package/dist/types/utils/window.d.ts

@@ -12,4 +12,6 @@
  * openInNewWindow("https://example.com")
  * ```
  */
-export declare function openInNewWindow(url: string): void;
+type Target = "_blank" | "_self" | "_parent" | "_top";
+export declare function openInNewWindow(url: string, target?: Target, features?: string): void;
+export {};

package/dist/types/utils/z-index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * TODO: remove me
+ * Temporary added to avoid conflicts with other libraries
+ */
+export declare const Z_INDEX: {
+    readonly MODAL: "z-[50]";
+    readonly TOOLTIP: "z-[9999]";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.7",
+  "version": "1.22.0-next.70",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -75,17 +75,20 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@gearbox-protocol/static": "^1.117.2",
     "lightweight-charts": "^4.1.3",
-    "lucide-react": "^0.471.1",
     "luxon": "^3.5.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.3",
     "react-markdown-math": "^1.0.2",
     "react-slick": "^0.31.0",
-    "slick-carousel": "^1.8.1",
     "remark-gfm": "^4.0.0",
+    "slick-carousel": "^1.8.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {
@@ -105,6 +108,9 @@
     "wagmi": "^2.0.0"
   },
   "peerDependenciesMeta": {
+    "connectkit": {
+      "optional": true
+    },
     "next": {
       "optional": true
     },
@@ -124,7 +130,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "*",
+    "@gearbox-protocol/sdk": "12.6.6",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
@@ -136,9 +142,9 @@
     "@tanstack/react-query": "^5.64.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/luxon": "^3.4.2",
-    "@types/react-slick": "^0.23.13",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
+    "@types/react-slick": "^0.23.13",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-v8": "^4.0.14",
@@ -165,7 +171,7 @@
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",
-    "viem": "^2.39.0",
+    "viem": "^2.45.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",

package/src/styles/base.css

@@ -45,6 +45,7 @@ html.dark {
     --background: 225 15% 98%;
     --foreground: 240 5% 12%;
     --card: 0 0% 100%;
+    --modal: 0 0% 95%;
     --card-foreground: 240 5% 12%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 5% 12%;
@@ -90,7 +91,8 @@ html.dark {
 
     --background: 240 3% 8%;
     --foreground: 0 0% 100%;
-    --card: 240 4% 10%;
+    --card: 240 3.85% 10.2%;
+    --modal: 240 4.92% 11.96%;
     --card-foreground: 0 0% 100%;
     --popover: 240 6% 12%;
     --popover-foreground: 0 0% 100%;
@@ -102,13 +104,13 @@ html.dark {
     --muted-foreground: 240 2% 75%;
     --accent: 323.83 100% 58.04%;
     --accent-foreground: 0 0% 100%;
-    --destructive: 3 93% 63%;
+    --destructive: 0 100% 65.69%;
     --success: 136.51 100% 78.63%;
     --success-foreground: 0 0% 0%;
     --success-hover: 136.58 100% 85.1%;
     --destructive-foreground: 0 0% 100%;
-    --warning: 44 100% 69%;
-    --liquidation: 274 67% 58%;
+    --warning: 43.12 100% 68.63%;
+    --liquidation: 277.22 74.53% 58.43%;
     --input: 225 6% 19%;
     --ring: 330 100% 59%;
     --gray-10: 225 5.26% 14.9%;
@@ -127,7 +129,7 @@ html.dark {
     --white: 0 0% 100%;
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
-    --border: 0 0% 100% / 0.05;
+    --border: 0 0% 100% / 0.07;
   }
 }
 
@@ -180,6 +182,11 @@ html.dark {
     padding-right: 0 !important;
   }
 
+  /* Lock page scroll when our Modal is open */
+  body.gb-modal-open {
+    overflow: hidden !important;
+  }
+
   html.dark {
     color-scheme: dark;
   }