@lifi/widget 2.0.0-beta.13 → 2.0.0-beta.15

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapFormProvider = exports.formDefaultValues = void 0;
+exports.FormProvider = exports.formDefaultValues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -8,16 +8,16 @@ const WidgetProvider_1 = require("../WidgetProvider");
 const FormUpdater_1 = require("./FormUpdater");
 const types_1 = require("./types");
 exports.formDefaultValues = {
-    [types_1.SwapFormKey.FromAmount]: '',
-    [types_1.SwapFormKey.ToAddress]: '',
-    [types_1.SwapFormKey.TokenSearchFilter]: '',
-    [types_1.SwapFormKey.ContractOutputsToken]: '',
-    [types_1.SwapFormKey.ToContractAddress]: '',
-    [types_1.SwapFormKey.ToContractCallData]: '',
-    [types_1.SwapFormKey.ToContractGasLimit]: '',
-    [types_1.SwapFormKey.ToAmount]: '',
+    [types_1.FormKey.FromAmount]: '',
+    [types_1.FormKey.ToAddress]: '',
+    [types_1.FormKey.TokenSearchFilter]: '',
+    [types_1.FormKey.ContractOutputsToken]: '',
+    [types_1.FormKey.ToContractAddress]: '',
+    [types_1.FormKey.ToContractCallData]: '',
+    [types_1.FormKey.ToContractGasLimit]: '',
+    [types_1.FormKey.ToAmount]: '',
 };
-const SwapFormProvider = ({ children, }) => {
+const FormProvider = ({ children, }) => {
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = (0, WidgetProvider_1.useWidgetConfig)();
     const defaultValues = (0, react_1.useMemo)(() => ({
         ...exports.formDefaultValues,
@@ -36,4 +36,4 @@ const SwapFormProvider = ({ children, }) => {
     });
     return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, { ...methods, children: [(0, jsx_runtime_1.jsx)(FormUpdater_1.FormUpdater, { defaultValues: defaultValues }), children] }));
 };
-exports.SwapFormProvider = SwapFormProvider;
+exports.FormProvider = FormProvider;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { FormValues } from '.';
+export declare const FormUpdater: React.FC<{
+    defaultValues: Partial<FormValues>;
+}>;

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/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.js

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

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/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/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/{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;