@lifi/widget 2.0.0-beta.8 → 2.0.0

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "types": "./index.d.ts",
+  "scripts": {
+    "watch": "tsc -w -p ./tsconfig.json",
+    "build": "tsc --build --clean && yarn build:version && tsc --build && tsc --build tsconfig.cjs.json && yarn build:copy-files",
+    "build:copy-files": "node ../../scripts/copy-files.js && cpy 'src/**/*' '!src/**/*.ts*' build && cpy 'src/**/*' '!src/**/*.ts*' build/cjs",
+    "build:version": "node ../../scripts/version.js",
+    "pre-commit": "lint-staged",
+    "lint": "eslint --ext .tsx --ext .ts ./src",
+    "lint:fix": "eslint --ext .tsx --ext .ts ./src --fix",
+    "prettier:fix": "prettier --write ./src/."
+  },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
       "yarn run lint:fix",
@@ -37,34 +47,38 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0-beta.12",
-    "@lifi/wallet-management": "^2.0.0-beta.6",
+    "@lifi/sdk": "^2.0.0",
+    "@lifi/wallet-management": "^2.0.0",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.129",
-    "@mui/material": "^5.13.0",
-    "@tanstack/react-query": "^4.29.5",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.5",
+    "@tanstack/react-query": "^4.29.13",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^22.4.15",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next": "^23.0.1",
+    "i18next-browser-languagedetector": "^7.0.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
-    "react-i18next": "^12.2.2",
-    "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.11.1",
-    "react-timer-hook": "^3.0.5",
+    "react-hook-form": "^7.44.3",
+    "react-i18next": "^13.0.0",
+    "react-intersection-observer": "^9.4.4",
+    "react-router-dom": "^6.13.0",
+    "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
     "zustand": "^4.3.8"
   },
+  "devDependencies": {
+    "cpy-cli": "^4.2.0",
+    "typescript": "^5.1.3"
+  },
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
@@ -79,5 +93,5 @@
     "extends": "../../.eslintrc"
   },
   "sideEffects": false,
-  "private": false
-}
+  "gitHead": "7f3e7af8a4541f595a3012bdde0501086c0ccd90"
+}

package/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ActiveTransactionsEmpty: React.FC;

package/pages/{ActiveSwapsPage/ActiveSwapsEmpty.js → ActiveTransactionsPage/ActiveTransactionsEmpty.js}

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-export const ActiveSwapsEmpty = () => {
+export const ActiveTransactionsEmpty = () => {
     const { t } = useTranslation();
     return (_jsxs(Container, { sx: {
             display: 'flex',
@@ -11,5 +11,5 @@ export const ActiveSwapsEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(SwapHorizIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptyActiveSwaps') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptyActiveSwaps') })] }));
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(SwapHorizIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.emptyActiveTransactions') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.emptyActiveTransactions') })] }));
 };

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.d.ts

@@ -0,0 +1 @@
+export declare const ActiveTransactionsPage: () => import("react/jsx-runtime").JSX.Element;

package/pages/{ActiveSwapsPage/ActiveSwapsPage.js → ActiveTransactionsPage/ActiveTransactionsPage.js}

@@ -3,13 +3,13 @@ import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { useWallet } from '../../providers';
 import { useExecutingRoutesIds, useRouteExecutionStore } from '../../stores';
-import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
-export const ActiveSwapsPage = () => {
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
+export const ActiveTransactionsPage = () => {
     const { t } = useTranslation();
     const { account } = useWallet();
     const executingRoutes = useExecutingRoutesIds(account.address);
@@ -20,14 +20,14 @@ export const ActiveSwapsPage = () => {
     }, []);
     useEffect(() => {
         if (executingRoutes.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+            return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
-        return _jsx(ActiveSwapsEmpty, {});
+        return _jsx(ActiveTransactionsEmpty, {});
     }
     return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: executingRoutes.map((routeId) => (_jsx(ActiveSwapItem, { routeId: routeId }, routeId))) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
+                }, children: executingRoutes.map((routeId) => (_jsx(ActiveTransactionItem, { routeId: routeId }, routeId))) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteActiveTransactions') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteActiveTransactions') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };

package/pages/ActiveTransactionsPage/index.d.ts

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

package/pages/ActiveTransactionsPage/index.js

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

package/pages/MainPage/MainGasMessage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GasMessage } from '../../components/GasMessage';
-import { useSwapRoutes } from '../../hooks';
+import { useRoutes } from '../../hooks';
 export const MainGasMessage = (props) => {
-    const { routes } = useSwapRoutes();
+    const { routes } = useRoutes();
     const currentRoute = routes?.[0];
     return _jsx(GasMessage, { route: currentRoute, ...props });
 };

package/pages/MainPage/MainPage.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { ActiveSwaps } from '../../components/ActiveSwaps';
+import { ActiveTransactions } from '../../components/ActiveTransactions';
+import { AmountInput } from '../../components/AmountInput';
 import { ContractComponent } from '../../components/ContractComponent';
 import { GasRefuelMessage } from '../../components/GasMessage';
+import { Routes } from '../../components/Routes';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
-import { SwapInput } from '../../components/SwapInput';
-import { SwapRoutes } from '../../components/SwapRoutes';
 import { useExpandableVariant } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { MainGasMessage } from './MainGasMessage';
 import { FormContainer } from './MainPage.style';
-import { MainSwapButton } from './MainSwapButton';
+import { ReviewButton } from './ReviewButton';
 export const MainPage = () => {
     const expandable = useExpandableVariant();
-    const { variant } = useWidgetConfig();
-    const nft = variant === 'nft';
-    return (_jsxs(FormContainer, { disableGutters: true, children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 1 }), nft ? _jsx(ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? _jsx(SwapInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? _jsx(SwapRoutes, { mx: 3, mb: 2 }) : null, _jsx(SendToWallet, { mx: 3, mb: 2 }), _jsx(GasRefuelMessage, { mx: 3, mb: 2 }), _jsx(MainGasMessage, { mx: 3, mb: 2 }), _jsxs(Box, { display: "flex", mx: 3, mb: 1, children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] })] }));
+    const { subvariant, contractComponent } = useWidgetConfig();
+    const nft = subvariant === 'nft';
+    return (_jsxs(FormContainer, { disableGutters: true, children: [_jsx(ActiveTransactions, { mx: 3, mt: 1, mb: 1 }), nft ? (_jsx(ContractComponent, { mx: 3, mt: 1, mb: 1, children: contractComponent })) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? _jsx(AmountInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? _jsx(Routes, { mx: 3, mb: 2 }) : null, _jsx(SendToWallet, { mx: 3, mb: 2 }), _jsx(GasRefuelMessage, { mx: 3, mb: 2 }), _jsx(MainGasMessage, { mx: 3, mb: 2 }), _jsxs(Box, { display: "flex", mx: 3, mb: 1, children: [_jsx(ReviewButton, {}), _jsx(SendToWalletButton, {})] })] }));
 };

package/pages/MainPage/ReviewButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ReviewButton: React.FC;

package/pages/MainPage/ReviewButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute, useSplitSubvariantStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+export const ReviewButton = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { subvariant } = useWidgetConfig();
+    const splitState = useSplitSubvariantStore((state) => state.state);
+    const { routes } = useRoutes();
+    const currentRoute = routes?.[0];
+    const handleClick = async () => {
+        if (currentRoute) {
+            setExecutableRoute(currentRoute);
+            navigate(navigationRoutes.transactionExecution, {
+                state: { routeId: currentRoute.id },
+            });
+        }
+    };
+    const getButtonText = () => {
+        if (currentRoute) {
+            switch (subvariant) {
+                case 'nft':
+                    return t(`button.reviewPurchase`);
+                case 'refuel':
+                    return t(`button.reviewBridge`);
+                default:
+                    const transactionType = currentRoute.fromChainId === currentRoute.toChainId
+                        ? 'Swap'
+                        : 'Bridge';
+                    return t(`button.review${transactionType}`);
+            }
+        }
+        else {
+            switch (subvariant) {
+                case 'nft':
+                    return t(`button.buy`);
+                case 'refuel':
+                    return t(`button.getGas`);
+                case 'split':
+                    if (splitState) {
+                        return t(`button.${splitState}`);
+                    }
+                    return t(`button.exchange`);
+                default:
+                    return t(`button.exchange`);
+            }
+        }
+    };
+    return (_jsx(DefaultTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+};

package/{components/ActiveSwaps/ActiveSwaps.d.ts → pages/RoutesPage/RoutesPage.d.ts}

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

package/pages/{SwapRoutesPage/SwapRoutesPage.js → RoutesPage/RoutesPage.js}

@@ -1,34 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
-import { useNavigateBack, useSwapRoutes } from '../../hooks';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard, } from '../../components/RouteCard';
+import { useNavigateBack, useRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { Stack } from './SwapRoutesPage.style';
-export const SwapRoutesPage = () => {
+import { Stack } from './RoutesPage.style';
+export const RoutesPage = () => {
     const { navigateBack, navigate } = useNavigateBack();
-    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(navigationRoutes.swapExecution, {
+        navigate(navigationRoutes.transactionExecution, {
             state: { routeId: route.id },
         });
     };
     useEffect(() => {
-        if (!swapRoutes?.length && !isLoading && !isFetching) {
+        if (!routes?.length && !isLoading && !isFetching) {
             navigateBack();
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        return useHeaderActionStore
+        return useHeaderStore
             .getState()
             .setAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
-    const routeNotFound = !swapRoutes?.length && !isLoading && !isFetching;
-    return (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
+    const routeNotFound = !routes?.length && !isLoading && !isFetching;
+    return (_jsx(Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) }));
 };

package/pages/RoutesPage/index.d.ts

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

package/pages/RoutesPage/index.js

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

package/pages/SelectChainPage/types.d.ts

@@ -1,4 +1,4 @@
-import type { SwapFormTypeProps } from '../../providers';
-export interface SelectChainPageProps extends SwapFormTypeProps {
+import type { FormTypeProps } from '../../providers';
+export interface SelectChainPageProps extends FormTypeProps {
     selectNativeToken?: boolean;
 }

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -4,7 +4,7 @@ import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlin
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import { Avatar, Container, IconButton, List, ListItemAvatar, } from '@mui/material';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../../components/ListItemText';
@@ -41,7 +41,7 @@ export const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
+        return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.style.d.ts

@@ -17,4 +17,4 @@ 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/styles").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/styles").Theme>, {}, {}>;

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.d.ts

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

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -14,5 +14,5 @@ export const SelectNativeTokenPage = ({ formType, }) => {
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -5,16 +5,16 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../../components/Card';
-import { SwapFormKey } from '../../providers';
+import { FormKey } from '../../providers';
 import { Input } from './SearchTokenInput.style';
 export const SearchTokenInput = () => {
     const { t } = useTranslation();
     const { register, setValue } = useFormContext();
     useEffect(() => () => {
-        setValue(SwapFormKey.TokenSearchFilter, '');
+        setValue(FormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return (_jsx(Card, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(SearchIcon, {}) }), inputProps: {
+    return (_jsx(Card, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`main.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(SearchIcon, {}) }), inputProps: {
                     inputMode: 'search',
-                    ...register(SwapFormKey.TokenSearchFilter),
+                    ...register(FormKey.TokenSearchFilter),
                 }, autoComplete: "off" }) }) }));
 };

package/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
-import type { SwapFormTypeProps } from '../../providers';
-export declare const SelectTokenPage: FC<SwapFormTypeProps>;
+import type { FormTypeProps } from '../../providers';
+export declare const SelectTokenPage: FC<FormTypeProps>;

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,14 +2,14 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard", import("@mui/material").ToggleButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "error" | "warning" | "info" | "success" | "standard", import("@mui/material").ToggleButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
     onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     selected?: boolean | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     value: {};
 } & Omit<{

package/pages/SettingsPage/EnabledToolsButton.style.d.ts

@@ -17,5 +17,5 @@ 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 ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SettingsPage/LanguageSelect.js

@@ -24,7 +24,7 @@ export const LanguageSelect = () => {
     if (filteredLanguages.length <= 1) {
         return null;
     }
-    const value = filteredLanguages.includes(language || i18n.resolvedLanguage)
+    const value = filteredLanguages.includes(language || i18n.resolvedLanguage || '')
         ? language || i18n.resolvedLanguage
         : languages?.default || languages?.allow?.[0];
     return (_jsxs(Card, { mb: 2, children: [_jsx(CardTitle, { children: t(`language.title`) }), _jsx(FormControl, { fullWidth: true, children: _jsx(Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDownIcon, dense: true, children: filteredLanguages.map((lng) => {

package/pages/SettingsPage/ResetSettingsButton.js

@@ -21,5 +21,5 @@ export const ResetSettingsButton = () => {
         }
         toggleDialog();
     };
-    return (_jsxs(Box, { px: 3, mt: 1.5, children: [_jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+    return (_jsxs(Box, { px: 3, mt: 1.5, mb: 1, children: [_jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
 };

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -12,7 +12,7 @@ export const RoutePrioritySelect = () => {
     const { routePriority } = useSettings(['routePriority']);
     const value = routePriority ?? '';
     return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, { fullWidth: true, children: _jsx(Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true, children: Orders.map((order) => {
-                        const tag = t(`swap.tags.${order.toLowerCase()}`);
+                        const tag = t(`main.tags.${order.toLowerCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return (_jsx(MenuItem, { value: order, children: tagName }, order));
                     }) }) })] }));

package/pages/TransactionDetailsPage/TransactionDetailsPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TransactionDetailsPage: React.FC;

package/pages/{SwapDetailsPage/SwapDetailsPage.js → TransactionDetailsPage/TransactionDetailsPage.js}

@@ -9,17 +9,18 @@ import { shallow } from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { ContractComponent } from '../../components/ContractComponent';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderActionStore } from '../../components/Header';
+import { useHeaderStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
-import { Container } from './SwapDetailsPage.style';
-export const SwapDetailsPage = () => {
+import { formatTokenAmount } from '../../utils';
+import { Container } from './TransactionDetailsPage.style';
+export const TransactionDetailsPage = () => {
     const { t, i18n } = useTranslation();
     const { navigateBack } = useNavigateBack();
-    const { variant } = useWidgetConfig();
+    const { subvariant, contractComponent, contractSecondaryComponent } = useWidgetConfig();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state?.routeId], store.deleteRoute], shallow);
     const [open, setOpen] = useState(false);
@@ -44,7 +45,7 @@ export const SwapDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     useEffect(() => {
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+        return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
     }, [toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
     return (_jsxs(Container, { children: [_jsxs(Box, { sx: {
@@ -53,8 +54,8 @@ export const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), getStepList(routeExecution?.route), variant === 'nft' ? _jsx(ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [_jsx(CardTitle, { flex: 1, children: t('main.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteTransaction') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };

package/pages/TransactionDetailsPage/index.d.ts

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

package/pages/TransactionDetailsPage/index.js

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

package/pages/TransactionHistoryPage/TransactionHistoryEmpty.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TransactionHistoryEmpty: React.FC;

package/pages/{SwapHistoryPage/SwapHistoryEmpty.js → TransactionHistoryPage/TransactionHistoryEmpty.js}

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-export const SwapHistoryEmpty = () => {
+export const TransactionHistoryEmpty = () => {
     const { t } = useTranslation();
     return (_jsxs(Container, { sx: {
             display: 'flex',
@@ -11,5 +11,5 @@ export const SwapHistoryEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(ReceiptLongRoundedIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(ReceiptLongRoundedIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.emptyTransactionHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.emptyTransactionHistory') })] }));
 };

package/pages/{SwapHistoryPage/SwapHistoryItem.d.ts → TransactionHistoryPage/TransactionHistoryItem.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { Route } from '@lifi/sdk';
-export declare const SwapHistoryItem: React.FC<{
+export declare const TransactionHistoryItem: React.FC<{
     route: Route;
 }>;

package/pages/{SwapHistoryPage/SwapHistoryItem.js → TransactionHistoryPage/TransactionHistoryItem.js}

@@ -5,11 +5,11 @@ import { useNavigate } from 'react-router-dom';
 import { Card } from '../../components/Card';
 import { Token, TokenDivider } from '../../components/Token';
 import { navigationRoutes } from '../../utils';
-export const SwapHistoryItem = ({ route }) => {
+export const TransactionHistoryItem = ({ route }) => {
     const { i18n } = useTranslation();
     const navigate = useNavigate();
     const handleClick = () => {
-        navigate(navigationRoutes.swapDetails, {
+        navigate(navigationRoutes.transactionDetails, {
             state: { routeId: route.id },
         });
     };

package/pages/TransactionHistoryPage/TransactionHistoryPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TransactionHistoryPage: React.FC;