@lifi/widget 2.0.0-beta.9 → 2.0.0

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -50,7 +50,7 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                 toToken: searchParams.toToken?.toLowerCase() || toToken?.toLowerCase(),
                 fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
-                    ? (0, utils_1.formatAmount)(searchParams.fromAmount)
+                    ? (0, utils_1.formatInputAmount)(searchParams.fromAmount)
                     : fromAmount,
                 elementId,
                 integrator,

package/cjs/providers/index.d.ts

@@ -1,6 +1,6 @@
+export * from './FormProvider';
 export * from './I18nProvider';
 export * from './SDKProvider';
-export * from './SwapFormProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';

package/cjs/providers/index.js

@@ -14,9 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FormProvider"), exports);
 __exportStar(require("./I18nProvider"), exports);
 __exportStar(require("./SDKProvider"), exports);
-__exportStar(require("./SwapFormProvider"), exports);
 __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./WalletProvider"), exports);
 __exportStar(require("./WidgetProvider"), exports);

package/cjs/stores/routes/createRouteExecutionStore.js

@@ -110,7 +110,7 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0,
             ...persistedState,
         };
         try {
-            // Move swaps to history after 1 day
+            // Move transactions to history after 1 day
             const currentTime = new Date().getTime();
             const oneDay = 1000 * 60 * 60 * 24;
             Object.values(state.routes).forEach((routeExecution) => {

package/cjs/stores/routes/index.d.ts

@@ -2,5 +2,5 @@ export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
 export * from './useSetExecutableRoute';
-export * from './useSwapHistory';
+export * from './useTransactionHistory';
 export * from './utils';

package/cjs/stores/routes/index.js

@@ -18,5 +18,5 @@ __exportStar(require("./RouteExecutionStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useExecutingRoutesIds"), exports);
 __exportStar(require("./useSetExecutableRoute"), exports);
-__exportStar(require("./useSwapHistory"), exports);
+__exportStar(require("./useTransactionHistory"), exports);
 __exportStar(require("./utils"), exports);

package/cjs/stores/routes/types.js

@@ -9,4 +9,4 @@ var RouteExecutionStatus;
     RouteExecutionStatus[RouteExecutionStatus["Failed"] = 4] = "Failed";
     RouteExecutionStatus[RouteExecutionStatus["Partial"] = 8] = "Partial";
     RouteExecutionStatus[RouteExecutionStatus["Refunded"] = 16] = "Refunded";
-})(RouteExecutionStatus = exports.RouteExecutionStatus || (exports.RouteExecutionStatus = {}));
+})(RouteExecutionStatus || (exports.RouteExecutionStatus = RouteExecutionStatus = {}));

package/cjs/stores/routes/useTransactionHistory.d.ts

@@ -0,0 +1,2 @@
+import type { RouteExecution } from './types';
+export declare const useTransactionHistory: (address?: string) => RouteExecution[];

package/cjs/stores/routes/{useSwapHistory.js → useTransactionHistory.js}

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSwapHistory = void 0;
+exports.useTransactionHistory = void 0;
 const shallow_1 = require("zustand/shallow");
 const utils_1 = require("../../utils");
 const RouteExecutionStore_1 = require("./RouteExecutionStore");
 const types_1 = require("./types");
-const useSwapHistory = (address) => {
+const useTransactionHistory = (address) => {
     return (0, RouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
         .filter((item) => item?.route.fromAddress === address &&
         (0, utils_1.hasEnumFlag)(item.status, types_1.RouteExecutionStatus.Done))
         .sort((a, b) => (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
         (a?.route.steps[0].execution?.process[0].startedAt ?? 0)), shallow_1.shallow);
 };
-exports.useSwapHistory = useSwapHistory;
+exports.useTransactionHistory = useTransactionHistory;

package/cjs/types/events.d.ts

@@ -3,14 +3,22 @@ export declare enum WidgetEvent {
     RouteExecutionStarted = "routeExecutionStarted",
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
-    RouteExecutionFailed = "routeExecutionFailed"
+    RouteExecutionFailed = "routeExecutionFailed",
+    RouteHighValueLoss = "routeHighValueLoss"
 }
 export type WidgetEvents = {
     routeExecutionStarted: Route;
     routeExecutionUpdated: RouteExecutionUpdate;
     routeExecutionCompleted: Route;
     routeExecutionFailed: RouteExecutionUpdate;
+    routeHighValueLoss: RouteHighValueLossUpdate;
 };
+export interface RouteHighValueLossUpdate {
+    fromAmountUsd: string;
+    gasCostUSD?: string;
+    toAmountUSD: string;
+    valueLoss: string;
+}
 export interface RouteExecutionUpdate {
     route: Route;
     process: Process;

package/cjs/types/events.js

@@ -7,4 +7,5 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionUpdated"] = "routeExecutionUpdated";
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
-})(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));
+    WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
+})(WidgetEvent || (exports.WidgetEvent = WidgetEvent = {}));

package/cjs/types/widget.d.ts

@@ -1,11 +1,11 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken } from '@lifi/sdk';
+import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken, Token } from '@lifi/sdk';
 import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
-export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel' | 'nft';
-export type WidgetSubvariant = 'default' | 'split';
+export type WidgetVariant = 'default' | 'expandable' | 'drawer';
+export type WidgetSubvariant = 'default' | 'split' | 'nft' | 'refuel';
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -68,6 +68,7 @@ export interface WidgetConfig {
     toAmount?: number | string;
     contract?: WidgetContract;
     contractComponent?: ReactNode;
+    contractSecondaryComponent?: ReactNode;
     contractCompactComponent?: ReactNode;
     contractTool?: WidgetContractTool;
     fee?: number;
@@ -87,7 +88,7 @@ export interface WidgetConfig {
     useRecommendedRoute?: boolean;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: SDKConfig;
-    buildSwapUrl?: boolean;
+    buildUrl?: boolean;
     localStorageKeyPrefix?: string;
     bridges?: {
         allow?: string[];
@@ -103,6 +104,7 @@ export interface WidgetConfig {
     };
     tokens?: {
         featured?: StaticToken[];
+        include?: Token[];
         allow?: BaseToken[];
         deny?: BaseToken[];
     };

package/cjs/types/widget.js

@@ -7,7 +7,7 @@ var DisabledUI;
     DisabledUI["FromToken"] = "fromToken";
     DisabledUI["ToAddress"] = "toAddress";
     DisabledUI["ToToken"] = "toToken";
-})(DisabledUI = exports.DisabledUI || (exports.DisabledUI = {}));
+})(DisabledUI || (exports.DisabledUI = DisabledUI = {}));
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
@@ -18,8 +18,8 @@ var HiddenUI;
     HiddenUI["ToAddress"] = "toAddress";
     HiddenUI["ToToken"] = "toToken";
     HiddenUI["WalletMenu"] = "walletMenu";
-})(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
+})(HiddenUI || (exports.HiddenUI = HiddenUI = {}));
 var RequiredUI;
 (function (RequiredUI) {
     RequiredUI["ToAddress"] = "toAddress";
-})(RequiredUI = exports.RequiredUI || (exports.RequiredUI = {}));
+})(RequiredUI || (exports.RequiredUI = RequiredUI = {}));

package/cjs/utils/elements.js

@@ -5,6 +5,6 @@ var ElementId;
 (function (ElementId) {
     ElementId["ScrollableContainer"] = "widget-scrollable-container";
     ElementId["Header"] = "widget-header";
-})(ElementId = exports.ElementId || (exports.ElementId = {}));
+})(ElementId || (exports.ElementId = ElementId = {}));
 const createElementId = (ElementId, elementId) => `${ElementId}-${elementId}`;
 exports.createElementId = createElementId;

package/cjs/utils/format.d.ts

@@ -5,5 +5,5 @@
  */
 export declare const formatTokenAmount: (amount?: string, decimals?: number, decimalPlaces?: number) => string;
 export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
-export declare const formatAmount: (amount?: string, returnInitial?: boolean) => string;
+export declare const formatInputAmount: (amount: string, decimals?: number | null, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/cjs/utils/format.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatTokenPrice = exports.formatAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
+exports.formatTokenPrice = exports.formatInputAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
 const big_js_1 = require("big.js");
 // JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
 big_js_1.default.PE = 42;
@@ -24,7 +24,7 @@ const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
     while (absAmount < 1 / 10 ** decimalPlaces) {
         decimalPlaces++;
     }
-    return (0, big_js_1.default)(parseFloat((0, big_js_1.default)(parsedAmount).toFixed(decimalPlaces + 1, 0))).toString();
+    return parsedAmount.toFixed(decimalPlaces + 1);
 };
 exports.formatTokenAmount = formatTokenAmount;
 const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
@@ -50,7 +50,7 @@ const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false)
     return parsedSlippage.toString();
 };
 exports.formatSlippage = formatSlippage;
-const formatAmount = (amount = '', returnInitial = false) => {
+const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
     if (!amount) {
         return amount;
     }
@@ -62,23 +62,21 @@ const formatAmount = (amount = '', returnInitial = false) => {
     if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
         return parsedAmount.toString();
     }
-    if (isNaN(parsedAmount)) {
+    if (isNaN(Math.abs(Number(formattedAmount)))) {
         return '';
     }
-    if (parsedAmount < 0) {
-        return Math.abs(parsedAmount).toString();
-    }
-    try {
-        if (returnInitial && (0, big_js_1.default)(formattedAmount)) {
-            return formattedAmount;
-        }
+    if (returnInitial) {
+        return formattedAmount;
     }
-    catch {
-        return '';
+    let [integer, fraction = ''] = formattedAmount.split('.');
+    if (decimals !== null && fraction.length > decimals) {
+        fraction = fraction.slice(0, decimals);
     }
-    return (0, big_js_1.default)(parsedAmount).toString();
+    integer = integer.replace(/^0+|-/, '');
+    fraction = fraction.replace(/(0+)$/, '');
+    return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
 };
-exports.formatAmount = formatAmount;
+exports.formatInputAmount = formatInputAmount;
 const formatTokenPrice = (amount, price) => {
     if (!amount || !price) {
         return 0;

package/cjs/utils/navigationRoutes.d.ts

@@ -1,19 +1,19 @@
 export declare const navigationRoutes: {
     home: string;
-    activeSwaps: string;
+    activeTransactions: string;
     bridges: string;
     exchanges: string;
     fromChain: string;
     fromToken: string;
+    routes: string;
     selectWallet: string;
     settings: string;
-    swapDetails: string;
-    swapExecution: string;
-    swapHistory: string;
-    swapRoutes: string;
     toChain: string;
     toToken: string;
     toTokenNative: string;
+    transactionDetails: string;
+    transactionExecution: string;
+    transactionHistory: string;
 };
 export declare const navigationRoutesValues: string[];
 export declare const stickyHeaderRoutes: string[];

package/cjs/utils/navigationRoutes.js

@@ -3,50 +3,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.backButtonRoutes = exports.stickyHeaderRoutes = exports.navigationRoutesValues = exports.navigationRoutes = void 0;
 exports.navigationRoutes = {
     home: '/',
-    activeSwaps: 'active-swaps',
+    activeTransactions: 'active-transactions',
     bridges: 'bridges',
     exchanges: 'exchanges',
     fromChain: 'from-chain',
     fromToken: 'from-token',
+    routes: 'routes',
     selectWallet: 'wallet',
     settings: 'settings',
-    swapDetails: 'swap-details',
-    swapExecution: 'swap-execution',
-    swapHistory: 'swap-history',
-    swapRoutes: 'swap-routes',
     toChain: 'to-chain',
     toToken: 'to-token',
     toTokenNative: 'to-token-native',
+    transactionDetails: 'transaction-details',
+    transactionExecution: 'transaction-execution',
+    transactionHistory: 'transaction-history',
 };
 exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
 exports.stickyHeaderRoutes = [
-    exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.activeTransactions,
     exports.navigationRoutes.bridges,
     exports.navigationRoutes.exchanges,
     exports.navigationRoutes.fromChain,
     exports.navigationRoutes.home,
+    exports.navigationRoutes.routes,
     exports.navigationRoutes.selectWallet,
     exports.navigationRoutes.settings,
-    exports.navigationRoutes.swapDetails,
-    exports.navigationRoutes.swapExecution,
-    exports.navigationRoutes.swapHistory,
-    exports.navigationRoutes.swapRoutes,
     exports.navigationRoutes.toChain,
     exports.navigationRoutes.toTokenNative,
+    exports.navigationRoutes.transactionDetails,
+    exports.navigationRoutes.transactionExecution,
+    exports.navigationRoutes.transactionHistory,
 ];
 exports.backButtonRoutes = [
-    exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.activeTransactions,
     exports.navigationRoutes.bridges,
     exports.navigationRoutes.exchanges,
     exports.navigationRoutes.fromChain,
     exports.navigationRoutes.fromToken,
+    exports.navigationRoutes.routes,
     exports.navigationRoutes.selectWallet,
     exports.navigationRoutes.settings,
-    exports.navigationRoutes.swapDetails,
-    exports.navigationRoutes.swapExecution,
-    exports.navigationRoutes.swapHistory,
-    exports.navigationRoutes.swapRoutes,
     exports.navigationRoutes.toChain,
     exports.navigationRoutes.toToken,
     exports.navigationRoutes.toTokenNative,
+    exports.navigationRoutes.transactionDetails,
+    exports.navigationRoutes.transactionExecution,
+    exports.navigationRoutes.transactionHistory,
 ];

package/components/{ActiveSwaps/ActiveSwapItem.d.ts → ActiveTransactions/ActiveTransactionItem.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const ActiveSwapItem: React.FC<{
+export declare const ActiveTransactionItem: React.FC<{
     routeId: string;
     dense?: boolean;
 }>;

package/components/{ActiveSwaps/ActiveSwapItem.js → ActiveTransactions/ActiveTransactionItem.js}

@@ -9,8 +9,8 @@ import { RouteExecutionStatus } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { StepTimer } from '../Step/StepTimer';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
-import { ListItem, ListItemButton } from './ActiveSwaps.style';
-export const ActiveSwapItem = ({ routeId, dense }) => {
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+export const ActiveTransactionItem = ({ routeId, dense }) => {
     const navigate = useNavigate();
     const { route, status } = useRouteExecution({
         routeId,
@@ -27,7 +27,7 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
         return null;
     }
     const handleClick = () => {
-        navigate(navigationRoutes.swapExecution, { state: { routeId } });
+        navigate(navigationRoutes.transactionExecution, { state: { routeId } });
     };
     const getStatusComponent = () => {
         switch (lastActiveProcess?.status) {

package/components/ActiveTransactions/ActiveTransactions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const ActiveTransactions: React.FC<BoxProps>;

package/components/{ActiveSwaps/ActiveSwaps.js → ActiveTransactions/ActiveTransactions.js}

@@ -6,9 +6,9 @@ import { useWallet } from '../../providers';
 import { useExecutingRoutesIds } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { ActiveSwapItem } from './ActiveSwapItem';
-import { ShowAllButton } from './ActiveSwaps.style';
-export const ActiveSwaps = (props) => {
+import { ActiveTransactionItem } from './ActiveTransactionItem';
+import { ShowAllButton } from './ActiveTransactions.style';
+export const ActiveTransactions = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { account } = useWallet();
@@ -17,8 +17,8 @@ export const ActiveSwaps = (props) => {
         return null;
     }
     const handleShowAll = () => {
-        navigate(navigationRoutes.activeSwaps);
+        navigate(navigationRoutes.activeTransactions);
     };
     const hasShowAll = executingRoutes?.length > 2;
-    return (_jsxs(Card, { variant: "selected", selectionColor: "secondary", ...props, children: [_jsx(CardTitle, { children: t('header.activeSwaps') }), _jsx(Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? (_jsx(ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
+    return (_jsxs(Card, { variant: "selected", selectionColor: "secondary", ...props, children: [_jsx(CardTitle, { children: t('header.activeTransactions') }), _jsx(Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? (_jsx(ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
 };

package/components/{ActiveSwaps/ActiveSwaps.style.d.ts → ActiveTransactions/ActiveTransactions.style.d.ts}

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -35,18 +35,18 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "divider" | "components" | "dense" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

package/components/ActiveTransactions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActiveTransactionItem';
+export * from './ActiveTransactions';

package/components/ActiveTransactions/index.js

@@ -0,0 +1,2 @@
+export * from './ActiveTransactionItem';
+export * from './ActiveTransactions';

package/components/AmountInput/AmountInput.d.ts

@@ -0,0 +1,12 @@
+import type { Token } from '@lifi/sdk';
+import type { BoxProps } from '@mui/material';
+import type { ReactNode } from 'react';
+import type { FormTypeProps } from '../../providers';
+export declare const AmountInput: React.FC<FormTypeProps & BoxProps>;
+export declare const AmountInputBase: React.FC<FormTypeProps & BoxProps & {
+    token?: Token;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    bottomAdornment?: ReactNode;
+    disabled?: boolean;
+}>;

package/components/AmountInput/AmountInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
+import { fitInputText, formatInputAmount } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './AmountInput.style';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment';
+import { FormPriceHelperText } from './FormPriceHelperText';
+export const AmountInput = ({ formType, ...props }) => {
+    const { disabledUI } = useWidgetConfig();
+    const [chainId, tokenAddress] = useWatch({
+        name: [
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { token } = useToken(chainId, tokenAddress);
+    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+    return (_jsx(AmountInputBase, { formType: formType, token: token, startAdornment: _jsx(AmountInputStartAdornment, { formType: formType }), endAdornment: !disabled ? _jsx(AmountInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: _jsx(FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+};
+export const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+    const { t } = useTranslation();
+    const amountKey = FormKeyHelper.getAmountKey(formType);
+    const { field: { onChange, onBlur, value }, } = useController({
+        name: amountKey,
+    });
+    const ref = useRef(null);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals, true);
+        onChange(formattedAmount);
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals);
+        onChange(formattedAmount);
+        onBlur();
+    };
+    useLayoutEffect(() => {
+        if (ref.current) {
+            fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+        }
+    }, [value, ref]);
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('main.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: startAdornment, endAdornment: endAdornment, inputProps: {
+                            inputMode: 'decimal',
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), bottomAdornment] })] }));
+};

package/{cjs/components/SwapInput/SwapInput.style.d.ts → components/AmountInput/AmountInput.style.d.ts}

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").FormControlPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").FormControlPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/{cjs/components/SwapInput/SwapInputAdornment.style.d.ts → components/AmountInput/AmountInputAdornment.style.d.ts}

@@ -2,14 +2,14 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

package/components/AmountInput/AmountInputEndAdornment.d.ts

@@ -0,0 +1,2 @@
+import type { FormTypeProps } from '../../providers';
+export declare const AmountInputEndAdornment: ({ formType }: FormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/{SwapInput/SwapInputEndAdornment.js → AmountInput/AmountInputEndAdornment.js}

@@ -4,24 +4,24 @@ import Big from 'big.js';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { formatTokenAmount } from '../../utils';
-import { Button } from './SwapInputAdornment.style';
-export const SwapInputEndAdornment = ({ formType }) => {
+import { Button } from './AmountInputAdornment.style';
+export const AmountInputEndAdornment = ({ formType }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     const { getChainById } = useChains();
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { data } = useGasRecommendation(chainId);
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
         const chain = getChainById(chainId);
-        let maxAmount;
+        let maxAmount = token?.amount;
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
@@ -33,7 +33,7 @@ export const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || token?.amount || '', {
+        setValue(FormKeyHelper.getAmountKey(formType), maxAmount || '', {
             shouldTouch: true,
         });
     };

package/components/AmountInput/AmountInputStartAdornment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FormTypeProps } from '../../providers';
+export declare const AmountInputStartAdornment: React.FC<FormTypeProps>;

package/components/{SwapInput/SwapInputStartAdornment.js → AmountInput/AmountInputStartAdornment.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWatch } from 'react-hook-form';
 import { useChain, useToken } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-export const SwapInputStartAdornment = ({ formType, }) => {
+export const AmountInputStartAdornment = ({ formType, }) => {
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain } = useChain(chainId);