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

package/cjs/hooks/useGasRefuel.js

@@ -10,12 +10,11 @@ const useGasRecommendation_1 = require("./useGasRecommendation");
 const useTokenBalance_1 = require("./useTokenBalance");
 const useGasRefuel = () => {
     const { getChainById } = (0, _1.useChains)();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromChainId, fromTokenAddress, toChainId, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.FromToken,
             providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.ToToken,
             providers_1.SwapFormKey.ToAddress,
         ],
     });
@@ -27,10 +26,7 @@ const useGasRefuel = () => {
         // We don't allow same chain refuel.
         // If a user runs out of gas, he can't send a source chain transaction.
         fromChainId === toChainId ||
-            // We don't want to apply auto refuel when swapping to native tokens
-            toChain?.nativeToken.address === toTokenAddress ||
             !gasRecommendation?.available ||
-            !gasRecommendation.recommended ||
             !nativeToken) {
             return false;
         }
@@ -41,21 +37,15 @@ const useGasRefuel = () => {
             .div(2);
         const insufficientGas = tokenBalance.lt(recommendedAmount);
         return insufficientGas;
-    }, [
-        fromChainId,
-        gasRecommendation?.available,
-        gasRecommendation?.recommended,
-        nativeToken,
-        toChain?.nativeToken.address,
-        toChainId,
-        toTokenAddress,
-    ]);
+    }, [fromChainId, gasRecommendation, nativeToken, toChainId]);
     return {
         enabled: enabled,
         availble: gasRecommendation?.available,
         isLoading: isLoading,
         chain: toChain,
-        gasRecommendation,
+        fromAmount: gasRecommendation?.available
+            ? gasRecommendation.fromAmount
+            : undefined,
     };
 };
 exports.useGasRefuel = useGasRefuel;

package/cjs/hooks/useGasSufficiency.js

@@ -5,15 +5,23 @@ const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const _1 = require(".");
 const providers_1 = require("../providers");
+const stores_1 = require("../stores");
 const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
-    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(provider);
+    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(account.signer?.provider);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = (0, _1.useGasRefuel)();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = (0, react_query_1.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) => {
@@ -69,8 +77,9 @@ const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/cjs/hooks/useProcessMessage.js

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

package/cjs/hooks/useRouteExecution.js

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

package/cjs/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/cjs/hooks/useSwapRoutes.js

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

package/cjs/hooks/useTokenBalance.js

@@ -8,10 +8,10 @@ const utils_1 = require("../utils");
 const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry");
 const defaultRefetchInterval = 30000;
 const useTokenBalance = (token, accountAddress) => {
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const walletAddress = accountAddress || account.address;
-    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(provider);
+    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const tokenBalanceQueryKey = (0, react_1.useMemo)(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
     const { data, isLoading, refetch } = (0, react_query_1.useQuery)(tokenBalanceQueryKey, async ({ queryKey: [, accountAddress] }) => {
         const cachedToken = queryClient

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

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

package/cjs/pages/SettingsPage/SettingsPage.d.ts

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

package/cjs/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/cjs/pages/SettingsPage/SlippageInput.d.ts

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

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

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -82,7 +82,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             handlePrimaryButton = handleDone;
@@ -99,7 +99,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             handlePrimaryButton = handlePartialDone;
@@ -116,7 +116,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
+                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
                 });
             }
             break;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -4,6 +4,7 @@ exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const version_1 = require("../../config/version");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;
 const SDKContext = (0, react_1.createContext)(null);
@@ -27,6 +28,7 @@ const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new sdk_1.LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version_1.version,
                 ...config,
             });
         }

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -24,19 +24,6 @@ const WalletProvider = ({ children }) => {
     const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
     const [account, setAccount] = (0, react_1.useState)({});
     const [currentWallet, setCurrentWallet] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const autoConnect = async () => {
-            const persistedActiveWallets = (0, wallet_management_1.readActiveWallets)();
-            const activeWallets = wallet_management_1.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 (0, exports.extractAccountFromSigner)(wallet?.account?.signer);
@@ -64,54 +51,102 @@ const WalletProvider = ({ children }) => {
             currentWallet.removeAllListeners();
             handleWalletUpdate(undefined);
         }
-    }, [walletManagement, currentWallet]);
+    }, [currentWallet, walletManagement]);
     const switchChain = (0, react_1.useCallback)(async (chainId) => {
-        if (walletManagement?.switchChain) {
-            const signer = await walletManagement.switchChain(chainId);
-            const account = await (0, exports.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 (0, exports.extractAccountFromSigner)(signer);
+                setAccount(account);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Switch chain: No provider available`);
+                }
+                await (0, wallet_management_1.switchChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.switchChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addChain = (0, react_1.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 (0, wallet_management_1.addChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.addChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addToken = (0, react_1.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 (0, wallet_management_1.switchChainAndAddToken)(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]);
+    (0, react_1.useEffect)(() => {
+        const autoConnect = async () => {
+            const persistedActiveWallets = (0, wallet_management_1.readActiveWallets)();
+            const activeWallets = wallet_management_1.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
     (0, react_1.useEffect)(() => {
         if (walletManagement) {
+            let ignore = false;
             const updateAccount = async () => {
                 const account = await (0, exports.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 = (0, react_1.useMemo)(() => ({
         connect,
         disconnect,
@@ -119,16 +154,7 @@ const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider: currentWallet?.account?.provider,
-    }), [
-        account,
-        addChain,
-        addToken,
-        connect,
-        disconnect,
-        currentWallet,
-        switchChain,
-    ]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, { value: value, children: children }));
 };
 exports.WalletProvider = WalletProvider;

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

package/cjs/types/widget.d.ts

@@ -20,6 +20,7 @@ export declare enum HiddenUI {
     Language = "language",
     PoweredBy = "poweredBy",
     ToAddress = "toAddress",
+    ToToken = "toToken",
     WalletMenu = "walletMenu"
 }
 export type HiddenUIType = `${HiddenUI}`;

package/cjs/types/widget.js

@@ -16,6 +16,7 @@ var HiddenUI;
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
+    HiddenUI["ToToken"] = "toToken";
     HiddenUI["WalletMenu"] = "walletMenu";
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
 var RequiredUI;

package/cjs/utils/wallet.d.ts

@@ -1 +1 @@
-export declare const shortenWalletAddress: (address?: string) => string | null;
+export declare const shortenAddress: (address?: string) => string | null;

package/cjs/utils/wallet.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shortenWalletAddress = void 0;
-const shortenWalletAddress = (address) => address
+exports.shortenAddress = void 0;
+const shortenAddress = (address) => address
     ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
     : null;
-exports.shortenWalletAddress = shortenWalletAddress;
+exports.shortenAddress = shortenAddress;

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,2 +1,2 @@
 import type { SwapFormTypeProps } from '../../providers';
-export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;
+export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/GasMessage/FundsSufficiencyMessage.d.ts

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

package/components/GasMessage/GasMessage.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Collapse } from '@mui/material';
-import { useFundsSufficiency, useGasRefuel, useGasSufficiency, } from '../../hooks';
-import { useSettings } from '../../stores';
+import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
     const { insufficientFunds } = useFundsSufficiency(route);
-    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
-    const enabledRefuel = enabled && enabledAutoRefuel;
-    const showGasSufficiencyMessage = insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || showGasSufficiencyMessage), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : showGasSufficiencyMessage ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : insufficientGas?.length ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };