@0xsquid/ui 0.15.0 → 0.15.2

package/dist/esm/types/components/controls/NumericInput.d.ts

@@ -1,13 +1,31 @@
-import type { InputHTMLAttributes } from 'react';
-import { InputMode } from '../../types/components';
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
-    onParsedValueChanged: (value: string) => void;
-    initialValue?: string;
-    forcedUpdateValue?: string;
-    maxDecimals?: number;
+import { SwapDirection } from '../../types/components';
+interface Token {
+    price: number;
+    symbol: string;
+    decimals: number;
+}
+interface NumericInputProps {
+    token: Token;
+    onAmountChange: (tokenAmount: string) => void;
+    forcedAmount?: string;
+    maxDecimals?: {
+        token: number;
+        usd: number;
+    };
+    formatIfVerySmall?: {
+        token: string;
+        usd: string;
+    };
+    showDetails?: boolean;
+    isLoading?: boolean;
+    error?: {
+        message: string;
+    };
     balance?: string;
-    tokenPrice?: number;
-    numericInputMode?: InputMode;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    direction?: SwapDirection;
+    amountUsd?: string;
 }
-export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, numericInputMode, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -4,6 +4,7 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
+    amountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -22,12 +23,11 @@ interface SwapConfigurationProps {
     onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
-    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount: _forcedAmount, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/core/numbers.d.ts

@@ -4,19 +4,20 @@
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-export declare function convertTokenAmountToUSD(tokenAmount: string | number, tokenPrice: string | number): string;
+export declare function convertTokenAmountToUSD(tokenAmount: string | number, tokenPrice: string | number, maxDecimals?: number): string;
 /**
  * Convert USD to token amount
  * @param {string|number} usdAmount - The amount in USD
  * @param {string|number} tokenPrice - The price of one token in USD
+ * @param {number} maxDecimals - The maximum number of decimals
  * @returns {BigNumber} - The equivalent amount of tokens
  */
-export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number): string;
+export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
 /**
- * Formats a number to USD
+ * Formats a number to the en-US number format
  *
- * @param amount - The amount to format
- * @returns The formatted currency string
+ * @param amount - The number to format
+ * @returns The formatted string
  */
-export declare function formatUSD(amount: number | bigint | string): string;
-export declare function trimExtraDecimals(value: string, maxDecimals: number): string;
+export declare function formatAmount(amount: number | bigint | string): string;
+export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;

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

@@ -1,2 +1,2 @@
 export type { SquidTheme } from './config';
-export type { SwapState, ThemeType, SwapStep } from './components';
+export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, } from './components';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { InputHTMLAttributes } from 'react';
+import React$1 from 'react';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -74,7 +74,6 @@ declare enum SwapState {
 }
 type ThemeType = 'light' | 'dark';
 type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
-type InputMode = 'token' | 'price';
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -125,16 +124,35 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
-    onParsedValueChanged: (value: string) => void;
-    initialValue?: string;
-    forcedUpdateValue?: string;
-    maxDecimals?: number;
+interface Token$1 {
+    price: number;
+    symbol: string;
+    decimals: number;
+}
+interface NumericInputProps {
+    token: Token$1;
+    onAmountChange: (tokenAmount: string) => void;
+    forcedAmount?: string;
+    maxDecimals?: {
+        token: number;
+        usd: number;
+    };
+    formatIfVerySmall?: {
+        token: string;
+        usd: string;
+    };
+    showDetails?: boolean;
+    isLoading?: boolean;
+    error?: {
+        message: string;
+    };
     balance?: string;
-    tokenPrice?: number;
-    numericInputMode?: InputMode;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    direction?: SwapDirection;
+    amountUsd?: string;
 }
-declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, numericInputMode, ...props }: Props) => react_jsx_runtime.JSX.Element;
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number;
@@ -407,6 +425,7 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
+    amountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -425,14 +444,13 @@ interface SwapConfigurationProps {
     onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
-    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount: _forcedAmount, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -547,4 +565,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "author": "",
   "license": "MIT",
   "resolutions": {