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

package/App.js

@@ -7,7 +7,7 @@ import { AppContainer, AppExpandedContainer, FlexContainer, } from './components
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
-import { SwapRoutesExpanded } from './components/SwapRoutes';
+import { RoutesExpanded } from './components/Routes';
 import { useExpandableVariant } from './hooks';
 export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
     const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
@@ -15,5 +15,5 @@ export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref)
 });
 export const AppDefault = () => {
     const expandable = useExpandableVariant();
-    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(SwapRoutesExpanded, {}) : null] }));
+    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
 };

package/AppDrawer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { WidgetConfig } from './types';
+import type { WidgetConfig, WidgetSubvariant } from './types';
 export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
@@ -7,6 +7,7 @@ export interface WidgetDrawer {
     closeDrawer(): void;
 }
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
-export declare const DrawerButtonText: ({ open }: {
+export declare const DrawerButtonText: ({ open, subvariant, }: {
     open: boolean;
+    subvariant?: WidgetSubvariant | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/AppDrawer.js

@@ -34,7 +34,7 @@ export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, r
             height: '100%',
         },
     }), [config, integrator]);
-    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen })] })) : null, _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
@@ -47,7 +47,11 @@ export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, r
                     },
                 }, keepMounted: true, children: _jsx(AppDefault, {}) })] }));
 });
-export const DrawerButtonText = ({ open }) => {
+export const DrawerButtonText = ({ open, subvariant, }) => {
     const { t } = useTranslation();
-    return (_jsx(DrawerButtonTypography, { children: open ? t('button.hide') : t('button.lifiSwap') }));
+    return (_jsx(DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
 };

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: 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/AppProvider.js

@@ -3,14 +3,14 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
-import { I18nProvider, SDKProvider, SwapFormProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
+import { FormProvider, I18nProvider, SDKProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
 import { StoreProvider } from './stores';
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { config: config, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { config: config, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 export const AppRouter = ({ children }) => {
-    const { buildSwapUrl } = useWidgetConfig();
+    const { buildUrl } = useWidgetConfig();
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
-    return (_jsxs(Router, { children: [children, buildSwapUrl ? _jsx(URLSearchParamsBuilder, {}) : null] }));
+    return (_jsxs(Router, { children: [children, buildUrl ? _jsx(URLSearchParamsBuilder, {}) : null] }));
 };

package/AppRoutes.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRoutes } from 'react-router-dom';
 import { NotFound } from './components/NotFound';
-import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
 import { MainPage } from './pages/MainPage';
+import { RoutesPage } from './pages/RoutesPage';
 import { SelectChainPage } from './pages/SelectChainPage';
 import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
-import { SwapDetailsPage } from './pages/SwapDetailsPage';
-import { SwapHistoryPage } from './pages/SwapHistoryPage';
-import { SwapPage } from './pages/SwapPage';
-import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
+import { TransactionPage } from './pages/TransactionPage';
 import { navigationRoutes } from './utils';
 export const AppRoutes = () => {
     const element = useRoutes([
@@ -52,28 +52,28 @@ export const AppRoutes = () => {
             element: _jsx(SelectChainPage, { formType: "to" }),
         },
         {
-            path: navigationRoutes.swapRoutes,
-            element: _jsx(SwapRoutesPage, {}),
+            path: navigationRoutes.routes,
+            element: _jsx(RoutesPage, {}),
         },
         {
-            path: navigationRoutes.activeSwaps,
-            element: _jsx(ActiveSwapsPage, {}),
+            path: navigationRoutes.activeTransactions,
+            element: _jsx(ActiveTransactionsPage, {}),
         },
         {
-            path: navigationRoutes.swapHistory,
-            element: _jsx(SwapHistoryPage, {}),
+            path: navigationRoutes.transactionHistory,
+            element: _jsx(TransactionHistoryPage, {}),
         },
         {
-            path: `${navigationRoutes.swapHistory}?/${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.swapDetails}`,
-            element: _jsx(SwapDetailsPage, {}),
+            path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+            element: _jsx(TransactionDetailsPage, {}),
         },
         {
-            path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.selectWallet}`,
+            path: `${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.selectWallet}`,
             element: _jsx(SelectWalletPage, {}),
         },
         {
-            path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.activeSwaps}?/${navigationRoutes.swapExecution}`,
-            element: _jsx(SwapPage, {}),
+            path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+            element: _jsx(TransactionPage, {}),
         },
         {
             path: '*',

package/cjs/App.js

@@ -10,7 +10,7 @@ const AppContainer_1 = require("./components/AppContainer");
 const Header_1 = require("./components/Header");
 const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
-const SwapRoutes_1 = require("./components/SwapRoutes");
+const Routes_1 = require("./components/Routes");
 const hooks_1 = require("./hooks");
 exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
     const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
@@ -18,6 +18,6 @@ exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other
 });
 const AppDefault = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
 };
 exports.AppDefault = AppDefault;

package/cjs/AppDrawer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { WidgetConfig } from './types';
+import type { WidgetConfig, WidgetSubvariant } from './types';
 export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
@@ -7,6 +7,7 @@ export interface WidgetDrawer {
     closeDrawer(): void;
 }
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
-export declare const DrawerButtonText: ({ open }: {
+export declare const DrawerButtonText: ({ open, subvariant, }: {
     open: boolean;
+    subvariant?: WidgetSubvariant | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/cjs/AppDrawer.js

@@ -37,7 +37,7 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, con
             height: '100%',
         },
     }), [config, integrator]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
@@ -50,8 +50,12 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, con
                     },
                 }, keepMounted: true, children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) })] }));
 });
-const DrawerButtonText = ({ open }) => {
+const DrawerButtonText = ({ open, subvariant, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open ? t('button.hide') : t('button.lifiSwap') }));
+    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
 };
 exports.DrawerButtonText = DrawerButtonText;

package/cjs/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: 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/cjs/AppProvider.js

@@ -9,13 +9,13 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const stores_1 = require("./stores");
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {
-    const { buildSwapUrl } = (0, providers_1.useWidgetConfig)();
+    const { buildUrl } = (0, providers_1.useWidgetConfig)();
     const inRouterContext = (0, react_router_dom_1.useInRouterContext)();
     const Router = inRouterContext ? react_1.Fragment : react_router_dom_1.MemoryRouter;
-    return ((0, jsx_runtime_1.jsxs)(Router, { children: [children, buildSwapUrl ? (0, jsx_runtime_1.jsx)(providers_1.URLSearchParamsBuilder, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(Router, { children: [children, buildUrl ? (0, jsx_runtime_1.jsx)(providers_1.URLSearchParamsBuilder, {}) : null] }));
 };
 exports.AppRouter = AppRouter;

package/cjs/AppRoutes.js

@@ -4,17 +4,17 @@ exports.AppRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const NotFound_1 = require("./components/NotFound");
-const ActiveSwapsPage_1 = require("./pages/ActiveSwapsPage");
+const ActiveTransactionsPage_1 = require("./pages/ActiveTransactionsPage");
 const MainPage_1 = require("./pages/MainPage");
+const RoutesPage_1 = require("./pages/RoutesPage");
 const SelectChainPage_1 = require("./pages/SelectChainPage");
 const SelectEnabledToolsPage_1 = require("./pages/SelectEnabledToolsPage");
 const SelectTokenPage_1 = require("./pages/SelectTokenPage");
 const SelectWalletPage_1 = require("./pages/SelectWalletPage");
 const SettingsPage_1 = require("./pages/SettingsPage");
-const SwapDetailsPage_1 = require("./pages/SwapDetailsPage");
-const SwapHistoryPage_1 = require("./pages/SwapHistoryPage");
-const SwapPage_1 = require("./pages/SwapPage");
-const SwapRoutesPage_1 = require("./pages/SwapRoutesPage");
+const TransactionDetailsPage_1 = require("./pages/TransactionDetailsPage");
+const TransactionHistoryPage_1 = require("./pages/TransactionHistoryPage");
+const TransactionPage_1 = require("./pages/TransactionPage");
 const utils_1 = require("./utils");
 const AppRoutes = () => {
     const element = (0, react_router_dom_1.useRoutes)([
@@ -55,28 +55,28 @@ const AppRoutes = () => {
             element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
         },
         {
-            path: utils_1.navigationRoutes.swapRoutes,
-            element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
+            path: utils_1.navigationRoutes.routes,
+            element: (0, jsx_runtime_1.jsx)(RoutesPage_1.RoutesPage, {}),
         },
         {
-            path: utils_1.navigationRoutes.activeSwaps,
-            element: (0, jsx_runtime_1.jsx)(ActiveSwapsPage_1.ActiveSwapsPage, {}),
+            path: utils_1.navigationRoutes.activeTransactions,
+            element: (0, jsx_runtime_1.jsx)(ActiveTransactionsPage_1.ActiveTransactionsPage, {}),
         },
         {
-            path: utils_1.navigationRoutes.swapHistory,
-            element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
+            path: utils_1.navigationRoutes.transactionHistory,
+            element: (0, jsx_runtime_1.jsx)(TransactionHistoryPage_1.TransactionHistoryPage, {}),
         },
         {
-            path: `${utils_1.navigationRoutes.swapHistory}?/${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.swapExecution}?/${utils_1.navigationRoutes.swapDetails}`,
-            element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
+            path: `${utils_1.navigationRoutes.transactionHistory}?/${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.transactionDetails}`,
+            element: (0, jsx_runtime_1.jsx)(TransactionDetailsPage_1.TransactionDetailsPage, {}),
         },
         {
-            path: `${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.swapExecution}?/${utils_1.navigationRoutes.selectWallet}`,
+            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.selectWallet}`,
             element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
         },
         {
-            path: `${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.activeSwaps}?/${utils_1.navigationRoutes.swapExecution}`,
-            element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),
+            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.activeTransactions}?/${utils_1.navigationRoutes.transactionExecution}`,
+            element: (0, jsx_runtime_1.jsx)(TransactionPage_1.TransactionPage, {}),
         },
         {
             path: '*',

package/cjs/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/cjs/components/{ActiveSwaps/ActiveSwapItem.js → ActiveTransactions/ActiveTransactionItem.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveSwapItem = void 0;
+exports.ActiveTransactionItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
 const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
@@ -12,8 +12,8 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const StepTimer_1 = require("../Step/StepTimer");
 const TokenAvatar_1 = require("../TokenAvatar");
-const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
-const ActiveSwapItem = ({ routeId, dense }) => {
+const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
+const ActiveTransactionItem = ({ routeId, dense }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { route, status } = (0, hooks_1.useRouteExecution)({
         routeId,
@@ -30,7 +30,7 @@ const ActiveSwapItem = ({ routeId, dense }) => {
         return null;
     }
     const handleClick = () => {
-        navigate(utils_1.navigationRoutes.swapExecution, { state: { routeId } });
+        navigate(utils_1.navigationRoutes.transactionExecution, { state: { routeId } });
     };
     const getStatusComponent = () => {
         switch (lastActiveProcess?.status) {
@@ -42,7 +42,7 @@ const ActiveSwapItem = ({ routeId, dense }) => {
                 return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
         }
     };
-    const ListItemComponent = dense ? ActiveSwaps_style_1.ListItem : ActiveSwaps_style_1.ListItemButton;
+    const ListItemComponent = dense ? ActiveTransactions_style_1.ListItem : ActiveTransactions_style_1.ListItemButton;
     return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
                         display: 'flex',
                         alignItems: 'center',
@@ -50,4 +50,4 @@ const ActiveSwapItem = ({ routeId, dense }) => {
                         height: 16,
                     }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
 };
-exports.ActiveSwapItem = ActiveSwapItem;
+exports.ActiveTransactionItem = ActiveTransactionItem;

package/cjs/{pages/SwapRoutesPage/SwapRoutesPage.d.ts → components/ActiveTransactions/ActiveTransactions.d.ts}

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveSwaps = void 0;
+exports.ActiveTransactions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
@@ -9,9 +9,9 @@ const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
-const ActiveSwapItem_1 = require("./ActiveSwapItem");
-const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
-const ActiveSwaps = (props) => {
+const ActiveTransactionItem_1 = require("./ActiveTransactionItem");
+const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
+const ActiveTransactions = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { account } = (0, providers_1.useWallet)();
@@ -20,9 +20,9 @@ const ActiveSwaps = (props) => {
         return null;
     }
     const handleShowAll = () => {
-        navigate(utils_1.navigationRoutes.activeSwaps);
+        navigate(utils_1.navigationRoutes.activeTransactions);
     };
     const hasShowAll = executingRoutes?.length > 2;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: "selected", selectionColor: "secondary", ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: "selected", selectionColor: "secondary", ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeTransactions') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveTransactionItem_1.ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveTransactions_style_1.ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
 };
-exports.ActiveSwaps = ActiveSwaps;
+exports.ActiveTransactions = ActiveTransactions;

package/cjs/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/cjs/components/ActiveTransactions/index.d.ts

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

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

@@ -14,5 +14,5 @@ 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("./ActiveSwapItem"), exports);
-__exportStar(require("./ActiveSwaps"), exports);
+__exportStar(require("./ActiveTransactionItem"), exports);
+__exportStar(require("./ActiveTransactions"), exports);

package/cjs/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/cjs/components/{SwapInput/SwapInput.js → AmountInput/AmountInput.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputBase = exports.SwapInput = void 0;
+exports.AmountInputBase = exports.AmountInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -10,26 +10,26 @@ const providers_1 = require("../../providers");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
+const AmountInput_style_1 = require("./AmountInput.style");
+const AmountInputEndAdornment_1 = require("./AmountInputEndAdornment");
+const AmountInputStartAdornment_1 = require("./AmountInputStartAdornment");
 const FormPriceHelperText_1 = require("./FormPriceHelperText");
-const SwapInput_style_1 = require("./SwapInput.style");
-const SwapInputEndAdornment_1 = require("./SwapInputEndAdornment");
-const SwapInputStartAdornment_1 = require("./SwapInputStartAdornment");
-const SwapInput = ({ formType, ...props }) => {
+const AmountInput = ({ formType, ...props }) => {
     const { disabledUI } = (0, providers_1.useWidgetConfig)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
     const disabled = disabledUI?.includes(types_1.DisabledUI.FromAmount);
-    return ((0, jsx_runtime_1.jsx)(exports.SwapInputBase, { formType: formType, token: token, startAdornment: (0, jsx_runtime_1.jsx)(SwapInputStartAdornment_1.SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(SwapInputEndAdornment_1.SwapInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
+    return ((0, jsx_runtime_1.jsx)(exports.AmountInputBase, { formType: formType, token: token, startAdornment: (0, jsx_runtime_1.jsx)(AmountInputStartAdornment_1.AmountInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(AmountInputEndAdornment_1.AmountInputEndAdornment, { formType: formType }) : undefined, bottomAdornment: (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { formType: formType }), disabled: disabled, ...props }));
 };
-exports.SwapInput = SwapInput;
-const SwapInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+exports.AmountInput = AmountInput;
+const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
+    const amountKey = providers_1.FormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = (0, react_hook_form_1.useController)({
         name: amountKey,
     });
@@ -47,11 +47,11 @@ const SwapInputBase = ({ formType, token, startAdornment, endAdornment, bottomAd
     };
     (0, react_1.useLayoutEffect)(() => {
         if (ref.current) {
-            (0, utils_1.fitInputText)(SwapInput_style_1.maxInputFontSize, SwapInput_style_1.minInputFontSize, ref.current);
+            (0, utils_1.fitInputText)(AmountInput_style_1.maxInputFontSize, AmountInput_style_1.minInputFontSize, ref.current);
         }
     }, [value, ref]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: startAdornment, endAdornment: endAdornment, inputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('main.fromAmount') }), (0, jsx_runtime_1.jsxs)(AmountInput_style_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(AmountInput_style_1.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] })] }));
 };
-exports.SwapInputBase = SwapInputBase;
+exports.AmountInputBase = AmountInputBase;

package/{components/SwapInput/SwapInput.style.d.ts → cjs/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/{components/SwapInput/SwapInputAdornment.style.d.ts → cjs/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/cjs/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/cjs/components/{SwapInput/SwapInputEndAdornment.js → AmountInput/AmountInputEndAdornment.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputEndAdornment = void 0;
+exports.AmountInputEndAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const big_js_1 = require("big.js");
@@ -9,15 +9,15 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
-const SwapInputEndAdornment = ({ formType }) => {
+const AmountInputAdornment_style_1 = require("./AmountInputAdornment.style");
+const AmountInputEndAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { getChainById } = (0, hooks_1.useChains)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { data } = (0, hooks_1.useGasRecommendation)(chainId);
@@ -36,10 +36,10 @@ const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = (0, utils_1.formatTokenAmount)(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), maxAmount || '', {
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), maxAmount || '', {
             shouldTouch: true,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? ((0, jsx_runtime_1.jsx)(AmountInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
 };
-exports.SwapInputEndAdornment = SwapInputEndAdornment;
+exports.AmountInputEndAdornment = AmountInputEndAdornment;

package/cjs/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/cjs/components/{SwapInput/SwapInputStartAdornment.js → AmountInput/AmountInputStartAdornment.js}

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputStartAdornment = void 0;
+exports.AmountInputStartAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenAvatar_1 = require("../TokenAvatar");
-const SwapInputStartAdornment = ({ formType, }) => {
+const AmountInputStartAdornment = ({ formType, }) => {
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain } = (0, hooks_1.useChain)(chainId);
@@ -18,4 +18,4 @@ const SwapInputStartAdornment = ({ formType, }) => {
     const isSelected = !!(chain && token);
     return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, { sx: { marginLeft: 2 } }));
 };
-exports.SwapInputStartAdornment = SwapInputStartAdornment;
+exports.AmountInputStartAdornment = AmountInputStartAdornment;