@0xsquid/ui 0.14.0 → 0.15.1

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

@@ -1,11 +1,31 @@
-import type { InputHTMLAttributes } from 'react';
-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;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    direction?: SwapDirection;
+    amountUsd?: string;
 }
-export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...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,7 +4,7 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
-    swapAmountUsd?: string;
+    amountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -23,13 +23,11 @@ interface SwapConfigurationProps {
     onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
-    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
-    onSwapAmountButtonClick?: () => void;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, 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

@@ -0,0 +1,23 @@
+/**
+ * Convert token amount to USD
+ * @param {string|number} tokenAmount - The amount of tokens
+ * @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, 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, maxDecimals: number): string;
+/**
+ * Formats a number to the en-US number format
+ *
+ * @param amount - The number to format
+ * @returns The formatted string
+ */
+export declare function formatAmount(amount: number | bigint | string): string;
+export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;

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

@@ -26,3 +26,4 @@ export declare enum SwapState {
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+export type InputMode = 'token' | 'price';

package/dist/index.css

@@ -677,6 +677,10 @@ video {
   left: 2px;
 }
 
+.tw-left-\[30px\] {
+  left: 30px;
+}
+
 .tw-left-\[54px\] {
   left: 54px;
 }
@@ -733,6 +737,10 @@ video {
   top: 1.75rem;
 }
 
+.tw-top-\[11px\] {
+  top: 11px;
+}
+
 .tw-top-\[52px\] {
   top: 52px;
 }
@@ -872,6 +880,10 @@ video {
   height: 2rem;
 }
 
+.tw-h-\[100vh\] {
+  height: 100vh;
+}
+
 .tw-h-\[10px\] {
   height: 10px;
 }
@@ -1113,6 +1125,10 @@ video {
   width: 1.5px;
 }
 
+.tw-w-\[100vw\] {
+  width: 100vw;
+}
+
 .tw-w-\[1260px\] {
   width: 1260px;
 }
@@ -2152,6 +2168,10 @@ video {
   padding-left: 20px;
 }
 
+.tw-pl-\[33px\] {
+  padding-left: 33px;
+}
+
 .tw-pl-\[44px\] {
   padding-left: 44px;
 }
@@ -2343,6 +2363,10 @@ video {
   line-height: 13px;
 }
 
+.tw-leading-\[43px\] {
+  line-height: 43px;
+}
+
 .tw-leading-body-large {
   line-height: 39.34px;
 }

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;
@@ -124,15 +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;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    direction?: SwapDirection;
+    amountUsd?: string;
 }
-declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...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;
@@ -405,7 +425,7 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
-    swapAmountUsd?: string;
+    amountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -424,15 +444,13 @@ interface SwapConfigurationProps {
     onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
-    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
-    onSwapAmountButtonClick?: () => void;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, 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;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "author": "",
   "license": "MIT",
   "resolutions": {
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "3.5.0",
+    "bignumber.js": "9.1.2",
     "clsx": "2.1.0",
     "color": "4.2.3",
     "tailwind-merge": "2.3.0"