@lifi/widget 2.0.0-beta.9 → 2.0.0

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveSwapsPage = void 0;
+exports.ActiveTransactionsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
-const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const ActiveTransactions_1 = require("../../components/ActiveTransactions");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
-const ActiveSwapsEmpty_1 = require("./ActiveSwapsEmpty");
-const ActiveSwapsPage = () => {
+const ActiveTransactionsEmpty_1 = require("./ActiveTransactionsEmpty");
+const ActiveTransactionsPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
@@ -23,15 +23,15 @@ const ActiveSwapsPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (executingRoutes.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+            return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
-        return (0, jsx_runtime_1.jsx)(ActiveSwapsEmpty_1.ActiveSwapsEmpty, {});
+        return (0, jsx_runtime_1.jsx)(ActiveTransactionsEmpty_1.ActiveTransactionsEmpty, {});
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
+                }, children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveTransactions_1.ActiveTransactionItem, { routeId: routeId }, routeId))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteActiveTransactions') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteActiveTransactions') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };
-exports.ActiveSwapsPage = ActiveSwapsPage;
+exports.ActiveTransactionsPage = ActiveTransactionsPage;

package/cjs/pages/ActiveTransactionsPage/index.d.ts

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

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

@@ -14,4 +14,4 @@ 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("./ActiveSwapsPage"), exports);
+__exportStar(require("./ActiveTransactionsPage"), exports);

package/cjs/pages/MainPage/MainGasMessage.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const GasMessage_1 = require("../../components/GasMessage");
 const hooks_1 = require("../../hooks");
 const MainGasMessage = (props) => {
-    const { routes } = (0, hooks_1.useSwapRoutes)();
+    const { routes } = (0, hooks_1.useRoutes)();
     const currentRoute = routes?.[0];
     return (0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { route: currentRoute, ...props });
 };

package/cjs/pages/MainPage/MainPage.js

@@ -3,22 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const ActiveTransactions_1 = require("../../components/ActiveTransactions");
+const AmountInput_1 = require("../../components/AmountInput");
 const ContractComponent_1 = require("../../components/ContractComponent");
 const GasMessage_1 = require("../../components/GasMessage");
+const Routes_1 = require("../../components/Routes");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
-const SwapInput_1 = require("../../components/SwapInput");
-const SwapRoutes_1 = require("../../components/SwapRoutes");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const MainGasMessage_1 = require("./MainGasMessage");
 const MainPage_style_1 = require("./MainPage.style");
-const MainSwapButton_1 = require("./MainSwapButton");
+const ReviewButton_1 = require("./ReviewButton");
 const MainPage = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    const nft = variant === 'nft';
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 1 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 2 }) : null, (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(GasMessage_1.GasRefuelMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(MainGasMessage_1.MainGasMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] }));
+    const { subvariant, contractComponent } = (0, providers_1.useWidgetConfig)();
+    const nft = subvariant === 'nft';
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveTransactions_1.ActiveTransactions, { mx: 3, mt: 1, mb: 1 }), nft ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1, children: contractComponent })) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? (0, jsx_runtime_1.jsx)(AmountInput_1.AmountInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(Routes_1.Routes, { mx: 3, mb: 2 }) : null, (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(GasMessage_1.GasRefuelMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(MainGasMessage_1.MainGasMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(ReviewButton_1.ReviewButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] }));
 };
 exports.MainPage = MainPage;

package/cjs/pages/MainPage/ReviewButton.d.ts

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

package/cjs/pages/MainPage/ReviewButton.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const DefaultTransactionButton_1 = require("../../components/DefaultTransactionButton");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const ReviewButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
+    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const splitState = (0, stores_1.useSplitSubvariantStore)((state) => state.state);
+    const { routes } = (0, hooks_1.useRoutes)();
+    const currentRoute = routes?.[0];
+    const handleClick = async () => {
+        if (currentRoute) {
+            setExecutableRoute(currentRoute);
+            navigate(utils_1.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 ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+};
+exports.ReviewButton = ReviewButton;

package/{components/SwapRoutes/SwapRoutes.d.ts → cjs/pages/RoutesPage/RoutesPage.d.ts}

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

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

@@ -1,38 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRoutesPage = void 0;
+exports.RoutesPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Header_1 = require("../../components/Header");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
-const SwapRouteCard_1 = require("../../components/SwapRouteCard");
+const RouteCard_1 = require("../../components/RouteCard");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
-const SwapRoutesPage_style_1 = require("./SwapRoutesPage.style");
-const SwapRoutesPage = () => {
+const RoutesPage_style_1 = require("./RoutesPage.style");
+const RoutesPage = () => {
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
-    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = (0, hooks_1.useRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(utils_1.navigationRoutes.swapExecution, {
+        navigate(utils_1.navigationRoutes.transactionExecution, {
             state: { routeId: route.id },
         });
     };
     (0, react_1.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
     }, []);
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore
+        return Header_1.useHeaderStore
             .getState()
             .setAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.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 ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
+    const routeNotFound = !routes?.length && !isLoading && !isFetching;
+    return ((0, jsx_runtime_1.jsx)(RoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(RouteCard_1.RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) }));
 };
-exports.SwapRoutesPage = SwapRoutesPage;
+exports.RoutesPage = RoutesPage;

package/cjs/pages/RoutesPage/index.d.ts

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

package/cjs/{components/SwapInput → pages/RoutesPage}/index.js

@@ -14,4 +14,4 @@ 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("./SwapInput"), exports);
+__exportStar(require("./RoutesPage"), exports);

package/cjs/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/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -44,7 +44,7 @@ const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
+        return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,

package/cjs/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/cjs/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/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -17,6 +17,6 @@ const SelectNativeTokenPage = ({ formType, }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };
 exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -14,11 +14,11 @@ const SearchTokenInput = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { register, setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => () => {
-        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
+        setValue(providers_1.FormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`main.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
                     inputMode: 'search',
-                    ...register(providers_1.SwapFormKey.TokenSearchFilter),
+                    ...register(providers_1.FormKey.TokenSearchFilter),
                 }, autoComplete: "off" }) }) }));
 };
 exports.SearchTokenInput = SearchTokenInput;

package/cjs/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/cjs/pages/SelectTokenPage/types.js

@@ -5,4 +5,4 @@ var TokenFilterType;
 (function (TokenFilterType) {
     TokenFilterType[TokenFilterType["My"] = 0] = "My";
     TokenFilterType[TokenFilterType["All"] = 1] = "All";
-})(TokenFilterType = exports.TokenFilterType || (exports.TokenFilterType = {}));
+})(TokenFilterType || (exports.TokenFilterType = TokenFilterType = {}));

package/cjs/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/cjs/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/cjs/pages/SettingsPage/LanguageSelect.js

@@ -27,7 +27,7 @@ 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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, { mb: 2, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDown_1.default, dense: true, children: filteredLanguages.map((lng) => {

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -24,6 +24,6 @@ const ResetSettingsButton = () => {
         }
         toggleDialog();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, mb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
 };
 exports.ResetSettingsButton = ResetSettingsButton;

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -15,7 +15,7 @@ const RoutePrioritySelect = () => {
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
     const value = routePriority ?? '';
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDown_1.default, dense: true, children: sdk_1.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 ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: order, children: tagName }, order));
                     }) }) })] }));

package/cjs/pages/TransactionDetailsPage/TransactionDetailsPage.d.ts

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapDetailsPage = void 0;
+exports.TransactionDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
 const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
@@ -18,11 +18,12 @@ const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
-const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
-const SwapDetailsPage = () => {
+const utils_1 = require("../../utils");
+const TransactionDetailsPage_style_1 = require("./TransactionDetailsPage.style");
+const TransactionDetailsPage = () => {
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { subvariant, contractComponent, contractSecondaryComponent } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state?.routeId], store.deleteRoute], shallow_1.shallow);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -47,18 +48,18 @@ const SwapDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+        return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
     }, [toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
-    return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(TransactionDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), variant === 'nft' ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('main.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteTransaction') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
-exports.SwapDetailsPage = SwapDetailsPage;
+exports.TransactionDetailsPage = TransactionDetailsPage;

package/cjs/pages/TransactionDetailsPage/index.d.ts

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

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

@@ -14,4 +14,4 @@ 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("./SwapDetailsPage"), exports);
+__exportStar(require("./TransactionDetailsPage"), exports);

package/cjs/pages/TransactionHistoryPage/TransactionHistoryEmpty.d.ts

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

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapHistoryEmpty = void 0;
+exports.TransactionHistoryEmpty = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ReceiptLongRounded_1 = require("@mui/icons-material/ReceiptLongRounded");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
-const SwapHistoryEmpty = () => {
+const TransactionHistoryEmpty = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
             display: 'flex',
@@ -14,6 +14,6 @@ const SwapHistoryEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(ReceiptLongRounded_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(ReceiptLongRounded_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.emptyTransactionHistory') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.emptyTransactionHistory') })] }));
 };
-exports.SwapHistoryEmpty = SwapHistoryEmpty;
+exports.TransactionHistoryEmpty = TransactionHistoryEmpty;

package/cjs/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/cjs/pages/{SwapHistoryPage/SwapHistoryItem.js → TransactionHistoryPage/TransactionHistoryItem.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapHistoryItem = void 0;
+exports.TransactionHistoryItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
@@ -8,11 +8,11 @@ const react_router_dom_1 = require("react-router-dom");
 const Card_1 = require("../../components/Card");
 const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
-const SwapHistoryItem = ({ route }) => {
+const TransactionHistoryItem = ({ route }) => {
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
-        navigate(utils_1.navigationRoutes.swapDetails, {
+        navigate(utils_1.navigationRoutes.transactionDetails, {
             state: { routeId: route.id },
         });
     };
@@ -30,4 +30,4 @@ const SwapHistoryItem = ({ route }) => {
                             timeStyle: 'short',
                         }).format(startedAt) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] })] }));
 };
-exports.SwapHistoryItem = SwapHistoryItem;
+exports.TransactionHistoryItem = TransactionHistoryItem;

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.d.ts

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

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionHistoryPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Dialog_1 = require("../../components/Dialog");
+const Header_1 = require("../../components/Header");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const routes_1 = require("../../stores/routes");
+const TransactionHistoryEmpty_1 = require("./TransactionHistoryEmpty");
+const TransactionHistoryItem_1 = require("./TransactionHistoryItem");
+const TransactionHistoryPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account } = (0, providers_1.useWallet)();
+    const transactions = (0, routes_1.useTransactionHistory)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (transactions.length) {
+            return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+        }
+    }, [transactions.length, toggleDialog]);
+    if (!transactions.length) {
+        return (0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, mt: 1, children: transactions.length ? (transactions.map(({ route }) => ((0, jsx_runtime_1.jsx)(TransactionHistoryItem_1.TransactionHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {})) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteTransactionHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
+};
+exports.TransactionHistoryPage = TransactionHistoryPage;

package/cjs/pages/TransactionHistoryPage/index.d.ts

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

package/cjs/pages/TransactionHistoryPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./TransactionHistoryPage"), exports);