@lifi/widget 2.0.0-beta.7 → 2.0.0-beta.9

package/hooks/useGasSufficiency.js

@@ -1,16 +1,24 @@
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useChains, useGetTokenBalancesWithRetry } from '.';
+import { useChains, useGasRefuel, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
+import { useSettings } from '../stores';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const { getChainById } = useChains();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
+    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;
         }
+        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+        // const refuelSteps = route.steps
+        //   .flatMap((step) => step.includedSteps)
+        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
             .reduce((groupedGasCosts, step) => {
@@ -66,8 +74,9 @@ export const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/hooks/useProcessMessage.js

@@ -99,6 +99,10 @@ export function getProcessMessage(t, getChainById, step, process, variant) {
                 title = t(`swap.error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.InsufficientFunds:
+                title = t(`swap.error.title.insufficientFunds`);
+                message = `${t(`swap.error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                break;
             case LifiErrorCode.SlippageError:
                 title = t(`swap.error.title.slippageNotMet`);
                 message = t(`swap.error.message.slippageThreshold`);

package/hooks/useRouteExecution.js

@@ -14,7 +14,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
     const routeExecutionStoreContext = useRouteExecutionStoreContext();
     const routeExecution = useRouteExecutionStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
-    const updateCallback = (updatedRoute) => {
+    const updateRouteHook = (updatedRoute) => {
         const routeExecution = routeExecutionStoreContext.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
@@ -68,7 +68,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         queryClient.removeQueries(['routes'], { exact: false });
         return lifi.executeRoute(account.signer, routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,
@@ -90,7 +90,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
             throw Error('Execution route not found.');
         }
         return lifi.resumeRoute(account.signer, resumedRoute ?? routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,

package/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,8 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
 interface SwapRoutesProps {
-    onSettled?: (data?: RoutesResponse) => void;
     insurableRoute?: Route;
 }
-export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
+export declare const useSwapRoutes: ({ insurableRoute }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;

package/hooks/useSwapRoutes.js

@@ -9,10 +9,10 @@ import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
-export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
+export const useSwapRoutes = ({ insurableRoute } = {}) => {
     const lifi = useLiFi();
     const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
     const swapOnly = useSwapOnly();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
@@ -38,7 +38,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
-    const { enabled: enabledRefuel, gasRecommendation } = useGasRefuel();
+    const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
     const contractCallQuoteEnabled = variant === 'nft'
@@ -71,7 +71,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         variant,
         sdkConfig?.defaultRouteOptions?.allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
-        gasRecommendation?.fromAmount,
+        gasRecommendationFromAmount,
         insurance,
         insurableRoute?.id,
     ];
@@ -79,7 +79,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         let toWalletAddress;
         try {
             toWalletAddress =
-                (await provider?.resolveName(toAddress)) ??
+                (await account.signer?.provider?.resolveName(toAddress)) ??
                     (isAddress(toAddress) ? toAddress : fromAddress);
         }
         catch {
@@ -204,7 +204,6 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
                 });
             }
         },
-        onSettled,
     });
     return {
         routes: data?.routes,

package/hooks/useTokenBalance.js

@@ -5,10 +5,10 @@ import { formatTokenAmount } from '../utils';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 const defaultRefetchInterval = 30000;
 export const useTokenBalance = (token, accountAddress) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
     const walletAddress = accountAddress || account.address;
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, async ({ queryKey: [, accountAddress] }) => {
         const cachedToken = queryClient

package/i18n/en.json

@@ -83,6 +83,7 @@
     "error": {
       "message": {
         "allowanceRequired": "Transfer amount for {{tokenSymbol}} exceeds your current allowance. Please increase your allowance and try again.",
+        "insufficientFunds": "You don't have enough gas to cover the cost of the transaction.",
         "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
         "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
@@ -95,6 +96,7 @@
         "chainSwitch": "Chain switch required",
         "failed": "Swap failed",
         "gasLimitIsTooLow": "The gas limit is too low",
+        "insufficientFunds": "Insufficient funds",
         "slippageNotMet": "Slippage conditions not met",
         "transactionCanceled": "Transaction canceled",
         "transactionFailed": "Transaction failed",
@@ -217,7 +219,7 @@
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
-    "tokenSearch": "Search your token",
+    "tokenSearch": "Search by token name or address",
     "valueLoss": "Value loss",
     "walletAddressOrEns": "Wallet address or ENS name",
     "warning": {

package/icons/InsuraceLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiFullLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiToolLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "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",
@@ -37,18 +37,18 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/react": "^11.11.0",
+    "@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.11",
-    "@lifi/wallet-management": "^2.0.0-beta.5",
+    "@lifi/sdk": "^2.0.0-beta.13",
+    "@lifi/wallet-management": "^2.0.0-beta.7",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.129",
-    "@mui/material": "^5.12.3",
-    "@tanstack/react-query": "^4.29.5",
+    "@mui/material": "^5.13.0",
+    "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
     "i18next": "^22.4.15",
@@ -61,7 +61,7 @@
     "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.11.1",
-    "react-timer-hook": "^3.0.5",
+    "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
     "zustand": "^4.3.8"
   },

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1 +1 @@
-export declare const ShowDestinationWallet: () => JSX.Element | null;
+export declare const ShowDestinationWallet: () => import("react/jsx-runtime").JSX.Element | null;

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -56,5 +56,5 @@ export const SwapDetailsPage = () => {
                         }).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: {
                             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.com/channels/849912621360218112/863689862514343946", 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('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') })] })] })] }));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -12,7 +12,7 @@ import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey, useWidgetConfig } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     const { t } = useTranslation();
@@ -79,7 +79,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             handlePrimaryButton = handleDone;
@@ -96,7 +96,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             handlePrimaryButton = handlePartialDone;
@@ -113,7 +113,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             break;

package/providers/SDKProvider/SDKProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LiFi } from '@lifi/sdk';
 import { createContext, useContext, useMemo } from 'react';
+import { version } from '../../config/version';
 import { useWidgetConfig } from '../WidgetProvider';
 let lifi;
 const SDKContext = createContext(null);
@@ -23,6 +24,7 @@ export const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version,
                 ...config,
             });
         }

package/providers/WalletProvider/WalletProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LiFiWalletManagement, readActiveWallets, supportedWallets, } from '@lifi/wallet-management';
+import { LiFiWalletManagement, readActiveWallets, supportedWallets, addChain as walletAgnosticAddChain, switchChainAndAddToken as walletAgnosticAddToken, switchChain as walletAgnosticSwitchChain, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { useWidgetConfig } from '../WidgetProvider';
 const liFiWalletManagement = new LiFiWalletManagement();
@@ -20,19 +20,6 @@ export const WalletProvider = ({ children }) => {
     const { walletManagement } = useWidgetConfig();
     const [account, setAccount] = useState({});
     const [currentWallet, setCurrentWallet] = useState();
-    useEffect(() => {
-        const autoConnect = async () => {
-            const persistedActiveWallets = readActiveWallets();
-            const activeWallets = supportedWallets.filter((wallet) => persistedActiveWallets.some((perstistedWallet) => perstistedWallet.name === wallet.name));
-            if (!activeWallets.length) {
-                return;
-            }
-            await liFiWalletManagement.autoConnect(activeWallets);
-            activeWallets[0].on('walletAccountChanged', handleWalletUpdate);
-            handleWalletUpdate(activeWallets[0]);
-        };
-        autoConnect();
-    }, []);
     const handleWalletUpdate = async (wallet) => {
         setCurrentWallet(wallet);
         const account = await extractAccountFromSigner(wallet?.account?.signer);
@@ -60,54 +47,102 @@ export const WalletProvider = ({ children }) => {
             currentWallet.removeAllListeners();
             handleWalletUpdate(undefined);
         }
-    }, [walletManagement, currentWallet]);
+    }, [currentWallet, walletManagement]);
     const switchChain = useCallback(async (chainId) => {
-        if (walletManagement?.switchChain) {
-            const signer = await walletManagement.switchChain(chainId);
-            const account = await extractAccountFromSigner(signer);
-            setAccount(account);
-            return true;
-        }
         try {
-            await currentWallet?.switchChain(chainId);
-            handleWalletUpdate(currentWallet);
+            if (walletManagement?.switchChain) {
+                const signer = await walletManagement.switchChain(chainId);
+                const account = await extractAccountFromSigner(signer);
+                setAccount(account);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Switch chain: No provider available`);
+                }
+                await walletAgnosticSwitchChain(provider, chainId);
+            }
+            else {
+                await currentWallet?.switchChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addChain = useCallback(async (chainId) => {
-        if (walletManagement?.addChain) {
-            return walletManagement.addChain(chainId);
-        }
         try {
-            await currentWallet?.addChain(chainId);
-            handleWalletUpdate(currentWallet);
+            if (walletManagement?.addChain) {
+                return walletManagement.addChain(chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add chain: No provider available`);
+                }
+                await walletAgnosticAddChain(provider, chainId);
+            }
+            else {
+                await currentWallet?.addChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addToken = useCallback(async (chainId, token) => {
-        if (walletManagement?.addToken) {
-            return walletManagement.addToken(token, chainId);
+        try {
+            if (walletManagement?.addToken) {
+                return walletManagement.addToken(token, chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add token: No provider available`);
+                }
+                await walletAgnosticAddToken(provider, chainId, token);
+            }
+            else {
+                await currentWallet?.addToken(chainId, token);
+                handleWalletUpdate(currentWallet);
+            }
         }
-        await currentWallet?.addToken(chainId, token);
-        handleWalletUpdate(currentWallet);
-        return;
-    }, [walletManagement, currentWallet]);
+        catch { }
+    }, [account.signer?.provider, currentWallet, walletManagement]);
+    useEffect(() => {
+        const autoConnect = async () => {
+            const persistedActiveWallets = readActiveWallets();
+            const activeWallets = supportedWallets.filter((wallet) => persistedActiveWallets.some((perstistedWallet) => perstistedWallet.name === wallet.name));
+            if (!activeWallets.length) {
+                return;
+            }
+            await liFiWalletManagement.autoConnect(activeWallets);
+            activeWallets[0].on('walletAccountChanged', handleWalletUpdate);
+            handleWalletUpdate(activeWallets[0]);
+        };
+        autoConnect();
+    }, []);
     // keep widget in sync with changing external signer object
     useEffect(() => {
         if (walletManagement) {
+            let ignore = false;
             const updateAccount = async () => {
                 const account = await extractAccountFromSigner(walletManagement?.signer);
-                setAccount(account);
+                // we should ignore the update if there is a newer one
+                if (!ignore) {
+                    setAccount(account);
+                }
             };
             updateAccount();
+            return () => {
+                ignore = true;
+            };
         }
-    }, [walletManagement, walletManagement?.signer]);
+    }, [walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,
@@ -115,16 +150,7 @@ export const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider: currentWallet?.account?.provider,
-    }), [
-        account,
-        addChain,
-        addToken,
-        connect,
-        disconnect,
-        currentWallet,
-        switchChain,
-    ]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return (_jsx(WalletContext.Provider, { value: value, children: children }));
 };
 export const extractAccountFromSigner = async (signer) => {

package/providers/WalletProvider/types.d.ts

@@ -1,10 +1,8 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { Provider } from '@ethersproject/providers';
 import type { StaticToken } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 export interface WalletContextProps {
     account: WalletAccount;
-    provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: StaticToken): Promise<void>;
     disconnect(wallet?: Wallet): void;

package/stores/routes/RouteExecutionStore.d.ts

@@ -4,6 +4,6 @@ import type { PersistStoreProviderProps } from '../types';
 import type { RouteExecutionState } from './types';
 export type RouteExecutionStore = UseBoundStore<StoreApi<RouteExecutionState>>;
 export declare const RouteExecutionStoreContext: import("react").Context<RouteExecutionStore | null>;
-export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useRouteExecutionStore<T>(selector: (state: RouteExecutionState) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export declare function useRouteExecutionStoreContext(): RouteExecutionStore;

package/stores/settings/useSplitSubvariantStore.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { SplitSubvariantProps, SplitSubvariantProviderProps, SplitSubvariantState, SplitSubvariantStore } from './types';
 export declare const SplitSubvariantStoreContext: import("react").Context<SplitSubvariantStore | null>;
-export declare function SplitSubvariantStoreProvider({ children, ...props }: SplitSubvariantProviderProps): JSX.Element;
+export declare function SplitSubvariantStoreProvider({ children, ...props }: SplitSubvariantProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSplitSubvariantStore<T>(selector: (state: SplitSubvariantState) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export declare function useSplitSubvariantStoreContext(): SplitSubvariantStore;
 export declare const createSplitSubvariantStore: ({ state }: SplitSubvariantProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<SplitSubvariantState>>;