@0xsquid/ui 0.14.0 → 0.15.0

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

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes } from 'react';
+import { InputMode } from '../../types/components';
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
     onParsedValueChanged: (value: string) => void;
     initialValue?: string;
@@ -6,6 +7,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
     maxDecimals?: number;
     balance?: string;
     tokenPrice?: number;
+    numericInputMode?: InputMode;
 }
-export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, numericInputMode, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,6 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
-    swapAmountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -29,7 +28,6 @@ interface SwapConfigurationProps {
     };
     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({ 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 {};

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

@@ -0,0 +1,22 @@
+/**
+ * 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): 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
+ * @returns {BigNumber} - The equivalent amount of tokens
+ */
+export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number): string;
+/**
+ * Formats a number to USD
+ *
+ * @param amount - The amount to format
+ * @returns The formatted currency string
+ */
+export declare function formatUSD(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

@@ -74,6 +74,7 @@ declare enum SwapState {
 }
 type ThemeType = 'light' | 'dark';
 type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+type InputMode = 'token' | 'price';
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -131,8 +132,9 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
     maxDecimals?: number;
     balance?: string;
     tokenPrice?: number;
+    numericInputMode?: InputMode;
 }
-declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...props }: Props) => react_jsx_runtime.JSX.Element;
+declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, numericInputMode, ...props }: Props) => react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number;
@@ -405,7 +407,6 @@ interface SwapConfigurationProps {
     priceImpactPercentage?: string;
     amount?: string;
     forcedAmount?: string;
-    swapAmountUsd?: string;
     tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
@@ -430,9 +431,8 @@ interface SwapConfigurationProps {
     };
     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({ priceImpactPercentage, amount, forcedAmount: _forcedAmount, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: 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.0",
   "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"