@lifi/widget 2.0.0-beta.14 → 2.0.0-beta.16

package/cjs/providers/{SwapFormProvider → FormProvider}/FormUpdater.js

@@ -4,7 +4,7 @@ exports.FormUpdater = void 0;
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
-const SwapFormProvider_1 = require("../SwapFormProvider");
+const _1 = require(".");
 const WalletProvider_1 = require("../WalletProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const FormUpdater = ({ defaultValues }) => {
@@ -20,23 +20,23 @@ const FormUpdater = ({ defaultValues }) => {
         if (!account.isActive || !account.chainId || !chainAllowed) {
             return;
         }
-        const { isTouched: isFromChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromChain);
-        const { isTouched: isToChainTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToChain);
-        const { isTouched: isFromTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromToken);
-        const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
-        const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
+        const { isTouched: isFromChainTouched } = getFieldState(_1.FormKey.FromChain);
+        const { isTouched: isToChainTouched } = getFieldState(_1.FormKey.ToChain);
+        const { isTouched: isFromTokenTouched } = getFieldState(_1.FormKey.FromToken);
+        const { isTouched: isToTokenTouched } = getFieldState(_1.FormKey.ToToken);
+        const { isTouched: isFromAmountTouched } = getFieldState(_1.FormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
-            resetField(SwapFormProvider_1.SwapFormKey.FromChain, { defaultValue: account.chainId });
-            setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
-            setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
+            resetField(_1.FormKey.FromChain, { defaultValue: account.chainId });
+            setValue(_1.FormKey.FromChain, account.chainId);
+            setValue(_1.FormKey.FromToken, '');
             if (isFromAmountTouched) {
-                setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+                setValue(_1.FormKey.FromAmount, '');
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
-            resetField(SwapFormProvider_1.SwapFormKey.ToChain, { defaultValue: account.chainId });
-            setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
-            setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
+            resetField(_1.FormKey.ToChain, { defaultValue: account.chainId });
+            setValue(_1.FormKey.ToChain, account.chainId);
+            setValue(_1.FormKey.ToToken, '');
         }
     }, [
         account.chainId,
@@ -56,7 +56,7 @@ const FormUpdater = ({ defaultValues }) => {
             if (previousDefaultValues.current[key] !== defaultValues[key]) {
                 const value = defaultValues[key] ||
                     // set the chain to the current user one if it is not present in the config
-                    (key === SwapFormProvider_1.SwapFormKey.FromChain || key === SwapFormProvider_1.SwapFormKey.ToChain
+                    (key === _1.FormKey.FromChain || key === _1.FormKey.ToChain
                         ? account.chainId || ''
                         : '');
                 setValue(key, value);

package/cjs/providers/{SwapFormProvider → FormProvider}/URLSearchParamsBuilder.js

@@ -6,12 +6,12 @@ const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const types_1 = require("./types");
 const formValueKeys = [
-    types_1.SwapFormKey.FromAmount,
-    types_1.SwapFormKey.FromChain,
-    types_1.SwapFormKey.FromToken,
-    types_1.SwapFormKey.ToAddress,
-    types_1.SwapFormKey.ToChain,
-    types_1.SwapFormKey.ToToken,
+    types_1.FormKey.FromAmount,
+    types_1.FormKey.FromChain,
+    types_1.FormKey.FromToken,
+    types_1.FormKey.ToAddress,
+    types_1.FormKey.ToChain,
+    types_1.FormKey.ToToken,
 ];
 const URLSearchParamsBuilder = () => {
     const { pathname } = (0, react_router_dom_1.useLocation)();

package/cjs/providers/{SwapFormProvider → FormProvider}/index.d.ts

@@ -1,3 +1,3 @@
-export * from './SwapFormProvider';
+export * from './FormProvider';
 export * from './URLSearchParamsBuilder';
 export * from './types';

package/cjs/providers/{SwapFormProvider → FormProvider}/index.js

@@ -14,6 +14,6 @@ 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("./SwapFormProvider"), exports);
+__exportStar(require("./FormProvider"), exports);
 __exportStar(require("./URLSearchParamsBuilder"), exports);
 __exportStar(require("./types"), exports);

package/cjs/providers/FormProvider/types.d.ts

@@ -0,0 +1,37 @@
+export declare enum FormKey {
+    ContractOutputsToken = "contractOutputsToken",
+    FromAmount = "fromAmount",
+    FromChain = "fromChain",
+    FromToken = "fromToken",
+    ToAddress = "toAddress",
+    ToAmount = "toAmount",
+    ToChain = "toChain",
+    ToContractAddress = "toContractAddress",
+    ToContractCallData = "toContractCallData",
+    ToContractGasLimit = "ToContractGasLimit",
+    ToToken = "toToken",
+    TokenSearchFilter = "tokenSearchFilter"
+}
+export type FormValues = {
+    [FormKey.ContractOutputsToken]: string;
+    [FormKey.FromAmount]: string;
+    [FormKey.FromChain]: number;
+    [FormKey.FromToken]: string;
+    [FormKey.ToAddress]: string;
+    [FormKey.ToAmount]: string;
+    [FormKey.ToChain]: number;
+    [FormKey.ToContractAddress]: string;
+    [FormKey.ToContractCallData]: string;
+    [FormKey.ToContractGasLimit]: string;
+    [FormKey.ToToken]: string;
+    [FormKey.TokenSearchFilter]: string;
+};
+export type FormType = 'from' | 'to';
+export declare const FormKeyHelper: {
+    getChainKey: (formType: FormType) => 'fromChain' | 'toChain';
+    getTokenKey: (formType: FormType) => 'fromToken' | 'toToken';
+    getAmountKey: (formType: FormType) => 'fromAmount' | 'toAmount';
+};
+export interface FormTypeProps {
+    formType: FormType;
+}

package/cjs/providers/FormProvider/types.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormKeyHelper = exports.FormKey = void 0;
+var FormKey;
+(function (FormKey) {
+    FormKey["ContractOutputsToken"] = "contractOutputsToken";
+    FormKey["FromAmount"] = "fromAmount";
+    FormKey["FromChain"] = "fromChain";
+    FormKey["FromToken"] = "fromToken";
+    FormKey["ToAddress"] = "toAddress";
+    FormKey["ToAmount"] = "toAmount";
+    FormKey["ToChain"] = "toChain";
+    FormKey["ToContractAddress"] = "toContractAddress";
+    FormKey["ToContractCallData"] = "toContractCallData";
+    FormKey["ToContractGasLimit"] = "ToContractGasLimit";
+    FormKey["ToToken"] = "toToken";
+    FormKey["TokenSearchFilter"] = "tokenSearchFilter";
+})(FormKey || (exports.FormKey = FormKey = {}));
+exports.FormKeyHelper = {
+    getChainKey: (formType) => `${formType}Chain`,
+    getTokenKey: (formType) => `${formType}Token`,
+    getAmountKey: (formType) => `${formType}Amount`,
+};

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/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/widget.d.ts

@@ -4,8 +4,8 @@ import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui
 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[];

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}

@@ -39,7 +39,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 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;

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/{SwapInput/SwapInput.d.ts → AmountInput/AmountInput.d.ts}

@@ -1,9 +1,9 @@
 import type { Token } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { ReactNode } from 'react';
-import type { SwapFormTypeProps } from '../../providers';
-export declare const SwapInput: React.FC<SwapFormTypeProps & BoxProps>;
-export declare const SwapInputBase: React.FC<SwapFormTypeProps & BoxProps & {
+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;

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

@@ -3,29 +3,29 @@ import { useLayoutEffect, useRef } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useToken } from '../../hooks';
-import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
+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';
-import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';
-import { SwapInputEndAdornment } from './SwapInputEndAdornment';
-import { SwapInputStartAdornment } from './SwapInputStartAdornment';
-export const SwapInput = ({ formType, ...props }) => {
+export const AmountInput = ({ formType, ...props }) => {
     const { disabledUI } = useWidgetConfig();
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token } = useToken(chainId, tokenAddress);
     const disabled = disabledUI?.includes(DisabledUI.FromAmount);
-    return (_jsx(SwapInputBase, { formType: formType, token: token, startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? _jsx(SwapInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: _jsx(FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+    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 SwapInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+export const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
     const { t } = useTranslation();
-    const amountKey = SwapFormKeyHelper.getAmountKey(formType);
+    const amountKey = FormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = useController({
         name: amountKey,
     });
@@ -46,7 +46,7 @@ export const SwapInputBase = ({ formType, token, startAdornment, endAdornment, b
             fitInputText(maxInputFontSize, minInputFontSize, ref.current);
         }
     }, [value, ref]);
-    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: startAdornment, endAdornment: endAdornment, inputProps: {
+    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,7 +2,7 @@
 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;

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,17 +4,17 @@ 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);
@@ -33,7 +33,7 @@ export const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || '', {
+        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);

package/components/AmountInput/FormPriceHelperText.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TokenAmount } from '@lifi/sdk';
+import type { FormTypeProps } from '../../providers';
+export declare const FormPriceHelperText: React.FC<FormTypeProps>;
+export declare const FormPriceHelperTextBase: React.FC<FormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+}>;

package/components/{SwapInput → AmountInput}/FormPriceHelperText.js

@@ -3,13 +3,13 @@ import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { formatTokenAmount, formatTokenPrice } from '../../utils';
-export const FormPriceHelperText = ({ formType, }) => {
+export const FormPriceHelperText = ({ formType }) => {
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
@@ -18,7 +18,7 @@ export const FormPriceHelperText = ({ formType, }) => {
 export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
     const { t } = useTranslation();
     const amount = useWatch({
-        name: SwapFormKeyHelper.getAmountKey(formType),
+        name: FormKeyHelper.getAmountKey(formType),
     });
     const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
     return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {

package/components/AmountInput/index.d.ts

@@ -0,0 +1 @@
+export * from './AmountInput';

package/components/AmountInput/index.js

@@ -0,0 +1 @@
+export * from './AmountInput';