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

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.js

@@ -15,7 +15,7 @@ const refetchTime = 60000;
 const useSwapRoutes = ({ onSettled, 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 {

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

@@ -217,7 +217,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/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/Header/Header.style.d.ts

@@ -1,13 +1,20 @@
 /// <reference types="react" />
-export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps, "classes" | "color" | "position"> & {
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<{
     classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
     color?: import("@mui/types").OverridableStringUnion<"transparent" | import("@mui/material").PropTypes.Color, import("@mui/material").AppBarPropsColorOverrides> | undefined;
     enableColorOnDark?: boolean | undefined;
     position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+} & Omit<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "elevation", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+}, "classes" | "color" | "position"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/components/Header/NavigationHeader.js

@@ -15,7 +15,7 @@ import { WalletMenuButton } from './WalletHeader';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { variant, subvariant, hiddenUI, walletManagement } = useWidgetConfig();
+    const { variant, subvariant, hiddenUI } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
     const { element } = useHeaderActionStore();

package/components/Header/NavigationTabs.d.ts

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

package/components/Header/NavigationTabs.style.d.ts

@@ -1,75 +1,8 @@
 /// <reference types="react" />
-export declare const NavbarTabs: import("@emotion/styled").StyledComponent<{
-    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
-    allowScrollButtonsMobile?: boolean | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    centered?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
-    slots?: {
-        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
-        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    slotProps?: {
-        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
-        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
-    } | undefined;
-    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
-    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
-    scrollButtons?: boolean | "auto" | undefined;
-    selectionFollowsFocus?: boolean | undefined;
-    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
-        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
-    textColor?: "inherit" | "primary" | "secondary" | undefined;
-    value?: any;
-    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
-    visibleScrollbar?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "sx" | "variant" | "value" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const NavbarTab: import("@emotion/styled").StyledComponent<{
+import type { StyledComponent } from '@emotion/styled';
+import type { TabsProps } from '@mui/material';
+export declare const NavbarTabs: StyledComponent<TabsProps>;
+export declare const NavbarTab: StyledComponent<{
     children?: null | undefined;
     classes?: Partial<import("@mui/material").TabClasses> | undefined;
     disabled?: boolean | undefined;

package/components/Header/WalletHeader.js

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { navigationRoutes, shortenWalletAddress } from '../../utils';
+import { navigationRoutes, shortenAddress } from '../../utils';
 import { HeaderAppBar, WalletButton } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 export const WalletHeader = () => {
@@ -42,7 +42,7 @@ const ConnectedButton = () => {
     const { t } = useTranslation();
     const { subvariant } = useWidgetConfig();
     const { account, disconnect } = useWallet();
-    const walletAddress = shortenWalletAddress(account.address);
+    const walletAddress = shortenAddress(account.address);
     const { chain } = useChain(account.chainId);
     const [anchorEl, setAnchorEl] = useState(null);
     const handleClick = (event) => {