@lifi/widget 2.0.0-beta.9 → 2.0.0

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,14 +2,14 @@
 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;
     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/AppDrawer.style.js

@@ -52,6 +52,11 @@ export const DrawerButton = styled(Button, {
             ? theme.palette.common.black
             : theme.palette.common.white,
     },
+    svg: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+    },
 }));
 export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
     borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,

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,14 +2,14 @@
 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;
     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/cjs/AppDrawer.style.js

@@ -55,6 +55,11 @@ exports.DrawerButton = (0, styles_1.styled)(material_1.Button, {
             ? theme.palette.common.black
             : theme.palette.common.white,
     },
+    svg: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+    },
 }));
 exports.DrawerButtonTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
     borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,

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}

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

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

package/cjs/components/AmountInput/AmountInput.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+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 AmountInput = ({ formType, ...props }) => {
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            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.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.AmountInput = AmountInput;
+const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const amountKey = providers_1.FormKeyHelper.getAmountKey(formType);
+    const { field: { onChange, onBlur, value }, } = (0, react_hook_form_1.useController)({
+        name: amountKey,
+    });
+    const ref = (0, react_1.useRef)(null);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        const formattedAmount = (0, utils_1.formatInputAmount)(value, token?.decimals, true);
+        onChange(formattedAmount);
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        const formattedAmount = (0, utils_1.formatInputAmount)(value, token?.decimals);
+        onChange(formattedAmount);
+        onBlur();
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        if (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('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.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,14 +2,14 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

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