@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_esm/hooks/useTransactionDetails.js

@@ -0,0 +1,52 @@
+import { getStatus } from '@lifi/sdk';
+import { keepPreviousData, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { useAccount } from './useAccount';
+export const useTransactionDetails = (transactionHash) => {
+    const { account } = useAccount();
+    const queryClient = useQueryClient();
+    const { data, isLoading } = useQuery({
+        queryKey: ['transaction-history', account.address, transactionHash],
+        queryFn: async ({ queryKey: [, accountAddress, transactionHash], signal, }) => {
+            if (!accountAddress) {
+                return;
+            }
+            if (transactionHash) {
+                const cachedHistory = queryClient.getQueryData([
+                    'transaction-history',
+                    accountAddress,
+                ]);
+                let transaction = cachedHistory?.find((t) => t.sending.txHash === transactionHash);
+                if (transaction) {
+                    return transaction;
+                }
+                transaction = await getStatus({
+                    txHash: transactionHash,
+                }, { signal });
+                if (cachedHistory && transaction) {
+                    queryClient.setQueryData(['transaction-history', accountAddress], (data) => {
+                        return [...data, transaction];
+                    });
+                }
+                return transaction;
+            }
+        },
+        refetchInterval: 300000,
+        enabled: Boolean(account.address),
+        initialData: () => {
+            const transaction = queryClient
+                .getQueryData([
+                'transaction-history',
+                account.address,
+            ])
+                ?.find((t) => t.sending.txHash === transactionHash);
+            if (transaction) {
+                return transaction;
+            }
+        },
+        placeholderData: keepPreviousData,
+    });
+    return {
+        transaction: data,
+        isLoading,
+    };
+};

package/_esm/hooks/useTransactionHistory.d.ts

@@ -0,0 +1,5 @@
+export declare const useTransactionHistory: () => {
+    data: import("@lifi/sdk").StatusResponse[];
+    isLoading: boolean;
+    refetch: (options?: import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").Z | undefined) => Promise<import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").ac<import("@lifi/sdk").StatusResponse[], Error>>;
+};

package/_esm/hooks/useTransactionHistory.js

@@ -0,0 +1,35 @@
+import { getTransactionHistory } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useAccount } from './useAccount';
+export const useTransactionHistory = () => {
+    const { account } = useAccount();
+    const { data, isLoading, refetch } = useQuery({
+        queryKey: ['transaction-history', account.address],
+        queryFn: async ({ queryKey: [, accountAddress], signal }) => {
+            if (!accountAddress) {
+                return [];
+            }
+            const date = new Date();
+            date.setFullYear(date.getFullYear() - 10);
+            const response = await getTransactionHistory({
+                wallet: accountAddress,
+                fromTimestamp: date.getTime() / 1000,
+                toTimestamp: Date.now() / 1000,
+            }, { signal });
+            const filteredTransactions = response.transfers
+                .filter((transaction) => transaction.receiving.chainId && transaction.sending.chainId)
+                .sort((a, b) => {
+                return ((b.sending?.timestamp ?? 0) -
+                    (a.sending?.timestamp ?? 0));
+            });
+            return filteredTransactions;
+        },
+        refetchInterval: 300000,
+        enabled: Boolean(account.address),
+    });
+    return {
+        data: data ?? [],
+        isLoading,
+        refetch,
+    };
+};

package/_esm/hooks/useWidgetEvents.js

@@ -0,0 +1,5 @@
+import mitt from 'mitt';
+export const widgetEvents = mitt();
+export const useWidgetEvents = () => {
+    return widgetEvents;
+};

package/_esm/i18n/index.js

@@ -0,0 +1,15 @@
+import bn from './bn.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import id from './id.json';
+import it from './it.json';
+import ko from './ko.json';
+import pt from './pt.json';
+import th from './th.json';
+import tr from './tr.json';
+import uk from './uk.json';
+import vi from './vi.json';
+import zh from './zh.json';
+export { bn, de, en, es, fr, id, it, ko, pt, th, tr, uk, vi, zh };

package/_esm/icons/InsuraceLogo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@mui/material/styles';
+export const InsuraceLogo = (props) => {
+    const theme = useTheme();
+    const insurColor = theme.palette.mode === 'light' ? '#1C4332' : theme.palette.common.white;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "58", height: "20", fill: "none", ...props, children: [_jsx("path", { fill: insurColor, fillRule: "evenodd", d: "M42.887 3.894a2.104 2.104 0 0 0-1.304.405 1.259 1.259 0 0 0-.544 1.046c0 .683.509 1.15 1.527 1.401.483.12.817.236 1 .345.184.11.276.234.276.373a.36.36 0 0 1-.227.331 1.25 1.25 0 0 1-.568.115c-.66 0-1.292-.25-1.896-.753V8.23c.473.418 1.082.637 1.826.656h.055c.46.01.912-.12 1.297-.37a1.19 1.19 0 0 0 .558-1.053c0-.734-.51-1.229-1.527-1.485a.532.532 0 0 1-.084-.02l-.097-.022a5.483 5.483 0 0 1-.826-.258c-.18-.079-.269-.192-.269-.341a.38.38 0 0 1 .23-.341c.178-.09.374-.133.572-.126.303.006.602.061.886.164a4 4 0 0 1 .906.443V4.41a3.55 3.55 0 0 0-1.791-.516Zm-11.621.056h1.052v4.88h-1.052V3.95Zm5.014 0 1.638 3.876V3.95h1.025v4.88h-1.625l-1.687-4.002V8.83h-1.025V3.95h1.674Zm10.56.007h1.053v2.9c-.007.28.102.55.3.746a.972.972 0 0 0 .711.3.982.982 0 0 0 .715-.3c.2-.196.31-.466.303-.746v-2.9h1.046v2.9c.013.543-.2 1.067-.59 1.447a2.158 2.158 0 0 1-2.941.007 1.934 1.934 0 0 1-.596-1.454v-2.9Zm9.283 1.653a.714.714 0 0 1-.718.71h-1.179V4.891h1.178a.7.7 0 0 1 .51.206.68.68 0 0 1 .209.505v.008ZM53.18 3.95v4.88h1.045V7.226h.823l.969 1.604h1.185l-1.046-1.736c.29-.114.538-.316.708-.578.176-.26.27-.565.268-.879a1.617 1.617 0 0 0-.505-1.185 1.673 1.673 0 0 0-1.224-.502h-2.223Z", clipRule: "evenodd" }), _jsx("path", { fill: "#28DA98", fillRule: "evenodd", d: "M32.366 13.05a1.27 1.27 0 0 0 .37.914c.238.252.57.391.917.383a1.317 1.317 0 0 0 1.296-1.296 1.267 1.267 0 0 0-.383-.913 1.233 1.233 0 0 0-.913-.393 1.216 1.216 0 0 0-.918.388c-.24.245-.373.575-.37.918Zm-.53-1.78a2.274 2.274 0 0 1 1.69-.721c.49-.01.966.166 1.332.493v-.411h1.324v4.838h-1.324v-.401c-.37.318-.845.488-1.333.475a2.252 2.252 0 0 1-1.684-.74 2.45 2.45 0 0 1-.708-1.752 2.471 2.471 0 0 1 .704-1.78v-.001Zm7.093 0c.461-.47 1.095-.73 1.753-.721.5-.006.99.148 1.397.438.408.284.72.685.895 1.15l-1.205.347a1.274 1.274 0 0 0-.434-.543 1.095 1.095 0 0 0-.652-.206 1.174 1.174 0 0 0-.895.393 1.31 1.31 0 0 0-.365.922c-.005.342.127.672.365.918.228.252.554.393.895.388.235.004.466-.068.657-.206a1.3 1.3 0 0 0 .429-.534l1.205.347c-.176.46-.486.858-.89 1.141a2.36 2.36 0 0 1-1.401.439 2.388 2.388 0 0 1-1.767-.736 2.501 2.501 0 0 1 .014-3.537Zm9.495 1.269h-2.346a1.16 1.16 0 0 1 .425-.585c.217-.16.482-.244.753-.237a1.195 1.195 0 0 1 1.168.822Zm.411-1.424a2.477 2.477 0 0 0-3.323.155 2.501 2.501 0 0 0-.013 3.537c.46.48 1.1.747 1.766.735a2.89 2.89 0 0 0 1.351-.342 2.08 2.08 0 0 0 .94-.908l-1.15-.33c-.313.28-.722.428-1.141.412a1.327 1.327 0 0 1-.758-.215 1.043 1.043 0 0 1-.429-.616h3.633c.037-.156.056-.315.055-.475a2.338 2.338 0 0 0-.064-.53 2.467 2.467 0 0 0-.867-1.423Z", clipRule: "evenodd" }), _jsx("path", { fill: "#28DA98", d: "M16.951 10a2.139 2.139 0 0 0-2.139-2.139l1.908-1.907c0 1.18.958 2.139 2.139 2.139L16.95 10ZM12.905 5.954a2.139 2.139 0 0 0-2.14-2.139l1.908-1.907c0 1.18.958 2.138 2.139 2.138l-1.907 1.908Z" }), _jsx("path", { fill: insurColor, d: "M16.951 18.093a2.139 2.139 0 0 0-2.138-2.14l1.907-1.907c0 1.181.958 2.139 2.139 2.139l-1.908 1.908ZM12.905 14.046a2.139 2.139 0 0 0-2.14-2.138L12.674 10c0 1.181.958 2.139 2.139 2.139l-1.907 1.907ZM16.938 2.147c.008-.078.013-.158.013-.24l-.014.24Z" }), _jsx("path", { fill: "#28DA98", d: "M20.207 8.651a1.907 1.907 0 0 0-2.698 0 1.901 1.901 0 0 0-.558 1.35c-.001 1.181-.958 2.138-2.14 2.138h.001c-.488 0-.976.186-1.349.559a1.9 1.9 0 0 0-.558 1.35c-.001 1.18-.957 2.135-2.136 2.137h-.004a2.139 2.139 0 0 1-2.138-2.138c0-.489-.186-.977-.559-1.35a1.901 1.901 0 0 0-1.349-.558 2.139 2.139 0 0 1-2.138-2.137v-.004c0-1.18.957-2.136 2.137-2.137.488 0 .977-.185 1.35-.558.373-.373.559-.861.559-1.35 0-1.18.958-2.138 2.139-2.138a1.907 1.907 0 1 0-1.907-1.907A2.139 2.139 0 0 1 6.72 4.046c-.488 0-.977.186-1.35.56-.372.372-.558.86-.558 1.348a2.139 2.139 0 0 1-2.138 2.139 1.907 1.907 0 1 0 .001 3.815 2.139 2.139 0 0 1 2.137 2.136c0 .489.185.978.559 1.351a1.9 1.9 0 0 0 1.354.559 2.139 2.139 0 0 1 2.133 2.139 1.908 1.908 0 0 0 3.815 0c0-1.182.958-2.14 2.139-2.14.488 0 .976-.185 1.349-.558.374-.374.56-.864.558-1.354a2.139 2.139 0 0 1 2.137-2.133 1.908 1.908 0 0 0 1.35-3.256Z" }), _jsx("path", { fill: insurColor, d: "M28.3 8.651a1.901 1.901 0 0 0-1.348-.558 2.139 2.139 0 0 1-2.139-2.139 1.9 1.9 0 0 0-.559-1.349 1.901 1.901 0 0 0-1.349-.559 2.139 2.139 0 0 1-2.138-2.135 1.907 1.907 0 1 0-3.815-.003c0 .082-.005.164-.014.244v-.005a2.13 2.13 0 0 1-.999 1.579l-.002.001a2.112 2.112 0 0 1-.16.09l-.012.006a2.11 2.11 0 0 1-.163.072l-.018.008c-.055.02-.11.04-.167.056l-.02.006c-.057.016-.115.03-.174.042l-.02.003c-.06.011-.12.02-.182.026l-.013.001c-.064.006-.129.01-.194.01-.06 0-.118.002-.176.008h-.007a1.909 1.909 0 0 0-.526.128l-.01.003a1.92 1.92 0 0 0-.166.077l-.003.002c-.046.024-.09.051-.135.08l-.027.016c-.045.029-.087.061-.13.095-.008.006-.017.011-.025.018a1.912 1.912 0 0 0-.39.43l-.046.08c-.016.027-.034.054-.05.083-.011.023-.02.047-.032.07-.015.033-.032.066-.046.1-.01.025-.018.053-.028.08-.01.03-.023.062-.033.094-.01.036-.018.073-.027.11-.005.023-.012.046-.016.068a1.9 1.9 0 0 0-.02.137l-.007.045a1.935 1.935 0 0 0-.007.154l-.001.029a2.139 2.139 0 0 1-2.138 2.139A1.907 1.907 0 1 0 12.675 10c0-1.18.956-2.138 2.136-2.139.243 0 .485-.045.713-.137l.006-.002c.052-.02.102-.045.152-.07l.018-.009c.045-.023.089-.05.132-.078l.03-.018c.042-.027.083-.058.123-.09l.032-.023a1.953 1.953 0 0 0 .276-.277c.01-.01.017-.023.026-.034.03-.04.06-.08.088-.12l.017-.03c.028-.044.055-.088.079-.133l.009-.02c.025-.049.049-.1.07-.15l.003-.01c.09-.227.136-.468.136-.71l.013-.236a2.139 2.139 0 0 1 4.264.237c0 .49.186.978.559 1.352.373.373.862.559 1.35.558a2.139 2.139 0 0 1-.001 4.278c-.488 0-.977.186-1.35.559-.372.373-.558.862-.558 1.35a2.139 2.139 0 0 1-2.136 2.137 1.908 1.908 0 0 0-1.352 3.256 1.908 1.908 0 0 0 3.257-1.349c0-1.18.958-2.138 2.139-2.138.488 0 .976-.186 1.349-.559.372-.372.558-.86.558-1.35 0-1.18.957-2.136 2.137-2.137a1.907 1.907 0 0 0 1.35-3.256Z" })] }));
+};

package/_esm/icons/lifi.js

@@ -0,0 +1 @@
+export const LiFiToolLogo = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3e %3ccircle cx='16' cy='16' r='16' fill='%23F5B5FF'/%3e %3cpath fill='black' d='m15.503 19.203-5.334 1.235a.468.468 0 0 0-.34.439v3.672c0 .308.243.503.55.438l7.443-1.722c.308-.065.437-.357.308-.634l-1.346-2.778c-.21-.439 0-.894.47-.991l4.864-1.17c.34-.081.632-.439.632-.796V13.5c0-.309-.243-.52-.551-.439l-7.02 1.674c-.438.097-.633.52-.438.926l1.232 2.551c.211.439 0 .877-.47.991'/%3e %3cpath fill='black' d='m11.985 10.023 1.394 2.86c.179.374 0 .764-.405.845l-2.578.601c-.324.081-.584.406-.584.731v3.07c0 .52.422.846.925.732l2.4-.552c.323-.065.583-.406.583-.732l.016-3.151c0-.44.357-.878.778-.975l7.863-1.885a.468.468 0 0 0 .34-.439V7.456c0-.309-.242-.52-.55-.439L12.293 9.39c-.308.065-.438.357-.308.633'/%3e %3c/svg%3e";

package/_esm/index.js

@@ -0,0 +1,11 @@
+export { useFormContext, useWatch } from 'react-hook-form';
+export { App as LiFiWidget } from './App';
+export * from './components/NFT';
+export * from './config/version';
+export { useAccount, useAvailableChains, useWidgetEvents, widgetEvents, } from './hooks';
+export * from './providers/FormProvider/types';
+export { formatChain } from './providers/WalletProvider';
+export * from './types';
+// ClassNameGenerator.configure((componentName) =>
+//   componentName.replace('Mui', 'LiFi'),
+// );

package/_esm/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as SwapHorizIcon } from '@mui/icons-material/SwapHoriz';
+import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const ActiveTransactionsEmpty = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Container, { sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingY: 12,
+        }, 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/_esm/pages/ActiveTransactionsPage/ActiveTransactionsPage.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as 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 { ActiveTransactionItem } from '../../components/ActiveTransactions';
+import { Dialog } from '../../components/Dialog';
+import { useAccount } from '../../hooks';
+import { useExecutingRoutesIds, useHeaderStoreContext, useRouteExecutionStore, } from '../../stores';
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
+export const ActiveTransactionsPage = () => {
+    const { t } = useTranslation();
+    const { account } = useAccount();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+    const headerStoreContext = useHeaderStoreContext();
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        if (executingRoutes.length) {
+            return headerStoreContext.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+        }
+    }, [executingRoutes.length, headerStoreContext, toggleDialog]);
+    if (!executingRoutes.length) {
+        return _jsx(ActiveTransactionsEmpty, {});
+    }
+    return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
+                    paddingLeft: 1.5,
+                    paddingRight: 1.5,
+                }, 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/_esm/pages/LanguagesPage/LanguagesPage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as CheckIcon } from '@mui/icons-material/Check';
+import { Container, List } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ListItemText } from '../../components/ListItemText';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton';
+import { useLanguages } from '../../hooks';
+export const LanguagesPage = () => {
+    const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = useLanguages();
+    const { t } = useTranslation();
+    if (availableLanguages.length < 1) {
+        return null;
+    }
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: availableLanguages.map((language) => (_jsxs(SettingsListItemButton, { onClick: () => setLanguageWithCode(language), children: [_jsx(ListItemText, { primary: t('language.name', { lng: language }) }), selectedLanguageCode === language && _jsx(CheckIcon, { color: "primary" })] }, language))) }) }));
+};

package/_esm/pages/MainPage/MainGasMessage.js

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

package/_esm/pages/MainPage/MainPage.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+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 { useExpandableVariant } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { MainGasMessage } from './MainGasMessage';
+import { FormContainer } from './MainPage.style';
+import { ReviewButton } from './ReviewButton';
+export const MainPage = () => {
+    const expandable = useExpandableVariant();
+    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/_esm/pages/MainPage/MainPage.style.js

@@ -0,0 +1,8 @@
+import { Container } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const FormContainer = styled(Container)({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    position: 'relative',
+});

package/_esm/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 { BaseTransactionButton } from '../../components/BaseTransactionButton';
+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(BaseTransactionButton, { text: getButtonText(), onClick: handleClick, disabled: currentRoute && (isValidating || !isValid) }));
+};

package/_esm/pages/RoutesPage/RoutesPage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard, } from '../../components/RouteCard';
+import { useNavigateBack, useRoutes } from '../../hooks';
+import { useHeaderStoreContext, useSetExecutableRoute } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Stack } from './RoutesPage.style';
+export const RoutesPage = () => {
+    const { navigateBack, navigate } = useNavigateBack();
+    const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes();
+    const setExecutableRoute = useSetExecutableRoute();
+    const headerStoreContext = useHeaderStoreContext();
+    const handleRouteClick = (route) => {
+        setExecutableRoute(route);
+        navigate(navigationRoutes.transactionExecution, {
+            state: { routeId: route.id },
+        });
+    };
+    useEffect(() => {
+        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 headerStoreContext
+            .getState()
+            .setAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+    }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);
+    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/_esm/pages/RoutesPage/RoutesPage.style.js

@@ -0,0 +1,6 @@
+import { Stack as MuiStack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Stack = styled(MuiStack)(({ theme }) => ({
+    position: 'relative',
+    padding: theme.spacing(1, 3),
+}));

package/_esm/pages/SelectChainPage/SelectChainPage.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
+import { useChainSelect } from '../../components/ChainSelect';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { useTokenSelect } from '../../components/TokenList';
+import { useNavigateBack } from '../../hooks';
+export const SelectChainPage = ({ formType, selectNativeToken, }) => {
+    const { navigateBack } = useNavigateBack();
+    const { chains, setCurrentChain } = useChainSelect(formType);
+    const selectToken = useTokenSelect(formType, navigateBack);
+    const handleClick = async (chain) => {
+        if (selectNativeToken) {
+            selectToken(chain.nativeToken.address, chain.id);
+        }
+        else {
+            setCurrentChain(chain.id);
+            navigateBack();
+        }
+    };
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => handleClick(chain), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] }) }), _jsx(ListItemText, { primary: chain.name })] }, chain.id))) }) }));
+};

package/_esm/pages/SelectChainPage/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as CheckIcon } from '@mui/icons-material/Check';
+import { default as CheckBoxOutlineBlankOutlinedIcon } from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import { default as CheckBoxOutlinedIcon } from '@mui/icons-material/CheckBoxOutlined';
+import { default as IndeterminateCheckBoxOutlinedIcon } from '@mui/icons-material/IndeterminateCheckBoxOutlined';
+import { Avatar, Container, IconButton, List, ListItemAvatar, Tooltip, } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+import { ListItemText } from '../../components/ListItemText';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton';
+import { useTools } from '../../hooks';
+import { useHeaderStoreContext, useSettingsStore } from '../../stores';
+const SelectAllCheckbox = ({ allCheckboxesSelected, anyCheckboxesSelected, onClick, }) => {
+    const { t } = useTranslation();
+    const tooltipTitle = allCheckboxesSelected
+        ? t('tooltip.deselectAll')
+        : t('tooltip.selectAll');
+    return (_jsx(Tooltip, { title: tooltipTitle, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "end", onClick: onClick, children: allCheckboxesSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : anyCheckboxesSelected ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }) }));
+};
+export const SelectEnabledToolsPage = ({ type }) => {
+    const typeKey = type.toLowerCase();
+    const { tools } = useTools();
+    const [enabledTools, setTools] = useSettingsStore((state) => [state[`enabled${type}`], state.setTools], shallow);
+    const headerStoreContext = useHeaderStoreContext();
+    const handleClick = (key) => {
+        if (!tools) {
+            return;
+        }
+        const toolKeys = tools[typeKey].map((tool) => tool.key);
+        if (enabledTools?.includes(key)) {
+            setTools(type, enabledTools.filter((toolKey) => toolKey !== key), toolKeys);
+        }
+        else {
+            setTools(type, [...enabledTools, key], toolKeys);
+        }
+    };
+    useEffect(() => {
+        const allToolsSelected = tools?.[typeKey].length === enabledTools.length;
+        const toggleCheckboxes = () => {
+            if (!tools) {
+                return;
+            }
+            const toolKeys = tools[typeKey].map((tool) => tool.key);
+            if (allToolsSelected) {
+                setTools(type, [], toolKeys);
+            }
+            else {
+                setTools(type, toolKeys, toolKeys);
+            }
+        };
+        return headerStoreContext
+            .getState()
+            .setAction(_jsx(SelectAllCheckbox, { allCheckboxesSelected: allToolsSelected, anyCheckboxesSelected: !!enabledTools.length, onClick: toggleCheckboxes }));
+    }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: tools?.[typeKey].map((tool) => (_jsxs(SettingsListItemButton, { onClick: () => handleClick(tool.key), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) && _jsx(CheckIcon, { color: "primary" })] }, tool.name))) }) }));
+};

package/_esm/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, List, ListItemAvatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { TokenAvatar } from '../../components/TokenAvatar';
+import { useTokenSelect } from '../../components/TokenList';
+import { useChains, useNavigateBack } from '../../hooks';
+export const SelectNativeTokenPage = ({ formType, }) => {
+    const { t } = useTranslation();
+    const { navigateBack } = useNavigateBack();
+    const { chains } = useChains();
+    const selectToken = useTokenSelect(formType, navigateBack);
+    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('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+};

package/_esm/pages/SelectTokenPage/SearchTokenInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as SearchIcon } from '@mui/icons-material/Search';
+import { FormControl, InputAdornment } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../../components/Card';
+import { FormKey } from '../../providers';
+import { Input } from './SearchTokenInput.style';
+export const SearchTokenInput = () => {
+    const { t } = useTranslation();
+    const { register, setValue } = useFormContext();
+    useEffect(() => () => {
+        setValue(FormKey.TokenSearchFilter, '');
+    }, [setValue]);
+    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(FormKey.TokenSearchFilter),
+                }, autoComplete: "off" }) }) }));
+};

package/_esm/pages/SelectTokenPage/SearchTokenInput.style.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { Input as InputBase } from '../../components/Input';
+export const Input = styled(InputBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1.5),
+}));

package/_esm/pages/SelectTokenPage/SelectTokenPage.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container } from '@mui/material';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { ChainSelect } from '../../components/ChainSelect';
+import { TokenList } from '../../components/TokenList';
+import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, useSwapOnly, } from '../../hooks';
+import { SearchTokenInput } from './SearchTokenInput';
+const minTokenListHeight = 360;
+export const SelectTokenPage = ({ formType }) => {
+    useScrollableOverflowHidden();
+    const { navigateBack } = useNavigateBack();
+    const headerRef = useRef(null);
+    const contentHeight = useContentHeight();
+    const [tokenListHeight, setTokenListHeight] = useState(0);
+    const swapOnly = useSwapOnly();
+    useLayoutEffect(() => {
+        setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
+    }, [contentHeight]);
+    const hideChainSelect = swapOnly && formType === 'to';
+    return (_jsxs(Container, { disableGutters: true, children: [_jsxs(Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [!hideChainSelect ? _jsx(ChainSelect, { formType: formType }) : null, _jsx(Box, { mt: !hideChainSelect ? 2 : 0, children: _jsx(SearchTokenInput, {}) })] }), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
+};

package/_esm/pages/SelectTokenPage/types.js

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

package/_esm/pages/SelectWalletPage/EVMListItemButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainType } from '@lifi/sdk';
+import { getWalletIcon, isWalletInstalledAsync } from '@lifi/wallet-management';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import { useConnect, useDisconnect } from 'wagmi';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { useNavigateBack, useWidgetEvents } from '../../hooks';
+import { WidgetEvent } from '../../types';
+export const EVMListItemButton = ({ connectedConnector, connector, onNotInstalled, }) => {
+    const { navigateBack } = useNavigateBack();
+    const emitter = useWidgetEvents();
+    const { connectAsync } = useConnect();
+    const { disconnectAsync } = useDisconnect();
+    const handleEVMConnect = async () => {
+        const identityCheckPassed = await isWalletInstalledAsync(connector.id);
+        if (!identityCheckPassed) {
+            onNotInstalled(connector);
+            return;
+        }
+        if (connectedConnector) {
+            await disconnectAsync({ connector: connectedConnector });
+        }
+        await connectAsync({ connector }, {
+            onSuccess(data) {
+                emitter.emit(WidgetEvent.WalletConnected, {
+                    address: data.accounts[0],
+                    chainId: data.chainId,
+                    chainType: ChainType.EVM,
+                });
+            },
+        });
+        navigateBack();
+    };
+    return (_jsxs(ListItemButton, { onClick: handleEVMConnect, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: connector.icon || getWalletIcon(connector.id), alt: connector.name, children: connector.name[0] }) }), _jsx(ListItemText, { primary: connector.name })] }, connector.uid));
+};

package/_esm/pages/SelectWalletPage/SVMListItemButton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainId, ChainType } from '@lifi/sdk';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { useNavigateBack, useWidgetEvents } from '../../hooks';
+import { WidgetEvent } from '../../types';
+export const SVMListItemButton = ({ wallet }) => {
+    const { navigateBack } = useNavigateBack();
+    const emitter = useWidgetEvents();
+    const { select, disconnect, connected } = useWallet();
+    const connect = async () => {
+        if (connected) {
+            await disconnect();
+        }
+        select(wallet.adapter.name);
+        // We use autoConnect on wallet selection
+        // await solanaConnect();
+        wallet.adapter.once('connect', (publicKey) => {
+            emitter.emit(WidgetEvent.WalletConnected, {
+                address: publicKey?.toString(),
+                chainId: ChainId.SOL,
+                chainType: ChainType.SVM,
+            });
+        });
+        navigateBack();
+    };
+    return (_jsxs(ListItemButton, { onClick: connect, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.adapter.icon, alt: wallet.adapter.name, children: wallet.adapter.name[0] }) }), _jsx(ListItemText, { primary: `${wallet.adapter.name} (Solana)` })] }, wallet.adapter.name));
+};