@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/AppProvider.js

@@ -3,10 +3,10 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
-import { FormProvider, I18nProvider, SDKProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
+import { FormProvider, I18nProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
 import { StoreProvider } from './stores';
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { config: config, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(WidgetProvider, { config: config, children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(StoreProvider, { config: config, children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }));
 };
 export const AppRouter = ({ children }) => {
     const { buildUrl } = useWidgetConfig();

package/AppRoutes.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRoutes } from 'react-router-dom';
+import { useLocation, useRoutes } from 'react-router-dom';
 import { NotFound } from './components/NotFound';
 import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
+import { LanguagesPage } from './pages/LanguagesPage';
 import { MainPage } from './pages/MainPage';
 import { RoutesPage } from './pages/RoutesPage';
 import { SelectChainPage } from './pages/SelectChainPage';
@@ -13,72 +14,79 @@ import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
 import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
 import { TransactionPage } from './pages/TransactionPage';
 import { navigationRoutes } from './utils';
+// SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
+// Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
+const NotFoundRouteHandler = () => {
+    const { pathname } = useLocation();
+    return pathname.includes(navigationRoutes.selectWallet) ? (_jsx(SelectWalletPage, {})) : (_jsx(NotFound, {}));
+};
+const routes = [
+    {
+        path: '/',
+        element: _jsx(MainPage, {}),
+    },
+    {
+        path: navigationRoutes.settings,
+        element: _jsx(SettingsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Bridges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Exchanges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.languages}`,
+        element: _jsx(LanguagesPage, {}),
+    },
+    {
+        path: navigationRoutes.fromToken,
+        element: _jsx(SelectTokenPage, { formType: "from" }),
+    },
+    {
+        path: navigationRoutes.toToken,
+        element: _jsx(SelectTokenPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.toTokenNative,
+        element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
+    },
+    {
+        path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
+        element: _jsx(SelectChainPage, { formType: "from" }),
+    },
+    {
+        path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
+        element: _jsx(SelectChainPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.routes,
+        element: _jsx(RoutesPage, {}),
+    },
+    {
+        path: navigationRoutes.activeTransactions,
+        element: _jsx(ActiveTransactionsPage, {}),
+    },
+    {
+        path: navigationRoutes.transactionHistory,
+        element: _jsx(TransactionHistoryPage, {}),
+    },
+    {
+        path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+        element: _jsx(TransactionDetailsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+        element: _jsx(TransactionPage, {}),
+    },
+    {
+        path: '*',
+        element: _jsx(NotFoundRouteHandler, {}),
+    },
+];
 export const AppRoutes = () => {
-    const element = useRoutes([
-        {
-            path: '/',
-            element: _jsx(MainPage, {}),
-        },
-        {
-            path: navigationRoutes.settings,
-            element: _jsx(SettingsPage, {}),
-        },
-        {
-            path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
-            element: _jsx(SelectEnabledToolsPage, { type: "Bridges" }),
-        },
-        {
-            path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
-            element: _jsx(SelectEnabledToolsPage, { type: "Exchanges" }),
-        },
-        {
-            path: navigationRoutes.fromToken,
-            element: _jsx(SelectTokenPage, { formType: "from" }),
-        },
-        {
-            path: navigationRoutes.toToken,
-            element: _jsx(SelectTokenPage, { formType: "to" }),
-        },
-        {
-            path: navigationRoutes.toTokenNative,
-            element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
-        },
-        {
-            path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
-            element: _jsx(SelectChainPage, { formType: "from" }),
-        },
-        {
-            path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
-            element: _jsx(SelectChainPage, { formType: "to" }),
-        },
-        {
-            path: navigationRoutes.routes,
-            element: _jsx(RoutesPage, {}),
-        },
-        {
-            path: navigationRoutes.activeTransactions,
-            element: _jsx(ActiveTransactionsPage, {}),
-        },
-        {
-            path: navigationRoutes.transactionHistory,
-            element: _jsx(TransactionHistoryPage, {}),
-        },
-        {
-            path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
-            element: _jsx(TransactionDetailsPage, {}),
-        },
-        {
-            path: `${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.selectWallet}`,
-            element: _jsx(SelectWalletPage, {}),
-        },
-        {
-            path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
-            element: _jsx(TransactionPage, {}),
-        },
-        {
-            path: '*',
-            element: _jsx(NotFound, {}),
-        },
-    ]);
+    const element = useRoutes(routes);
     return element;
 };

package/cjs/AppProvider.js

@@ -9,7 +9,7 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const stores_1 = require("./stores");
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/AppRoutes.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const NotFound_1 = require("./components/NotFound");
 const ActiveTransactionsPage_1 = require("./pages/ActiveTransactionsPage");
+const LanguagesPage_1 = require("./pages/LanguagesPage");
 const MainPage_1 = require("./pages/MainPage");
 const RoutesPage_1 = require("./pages/RoutesPage");
 const SelectChainPage_1 = require("./pages/SelectChainPage");
@@ -16,73 +17,80 @@ const TransactionDetailsPage_1 = require("./pages/TransactionDetailsPage");
 const TransactionHistoryPage_1 = require("./pages/TransactionHistoryPage");
 const TransactionPage_1 = require("./pages/TransactionPage");
 const utils_1 = require("./utils");
+// SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
+// Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
+const NotFoundRouteHandler = () => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    return pathname.includes(utils_1.navigationRoutes.selectWallet) ? ((0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {})) : ((0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}));
+};
+const routes = [
+    {
+        path: '/',
+        element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.settings,
+        element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.bridges}`,
+        element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Bridges" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.exchanges}`,
+        element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Exchanges" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.languages}`,
+        element: (0, jsx_runtime_1.jsx)(LanguagesPage_1.LanguagesPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.fromToken,
+        element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
+    },
+    {
+        path: utils_1.navigationRoutes.toToken,
+        element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
+    },
+    {
+        path: utils_1.navigationRoutes.toTokenNative,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.fromToken}?/${utils_1.navigationRoutes.fromChain}`,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
+    },
+    {
+        path: `${utils_1.navigationRoutes.toToken}?/${utils_1.navigationRoutes.toChain}`,
+        element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
+    },
+    {
+        path: utils_1.navigationRoutes.routes,
+        element: (0, jsx_runtime_1.jsx)(RoutesPage_1.RoutesPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.activeTransactions,
+        element: (0, jsx_runtime_1.jsx)(ActiveTransactionsPage_1.ActiveTransactionsPage, {}),
+    },
+    {
+        path: utils_1.navigationRoutes.transactionHistory,
+        element: (0, jsx_runtime_1.jsx)(TransactionHistoryPage_1.TransactionHistoryPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.transactionHistory}?/${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.transactionDetails}`,
+        element: (0, jsx_runtime_1.jsx)(TransactionDetailsPage_1.TransactionDetailsPage, {}),
+    },
+    {
+        path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.activeTransactions}?/${utils_1.navigationRoutes.transactionExecution}`,
+        element: (0, jsx_runtime_1.jsx)(TransactionPage_1.TransactionPage, {}),
+    },
+    {
+        path: '*',
+        element: (0, jsx_runtime_1.jsx)(NotFoundRouteHandler, {}),
+    },
+];
 const AppRoutes = () => {
-    const element = (0, react_router_dom_1.useRoutes)([
-        {
-            path: '/',
-            element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.settings,
-            element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.bridges}`,
-            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Bridges" }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.exchanges}`,
-            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Exchanges" }),
-        },
-        {
-            path: utils_1.navigationRoutes.fromToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
-        },
-        {
-            path: utils_1.navigationRoutes.toToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
-        },
-        {
-            path: utils_1.navigationRoutes.toTokenNative,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.fromToken}?/${utils_1.navigationRoutes.fromChain}`,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.toToken}?/${utils_1.navigationRoutes.toChain}`,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
-        },
-        {
-            path: utils_1.navigationRoutes.routes,
-            element: (0, jsx_runtime_1.jsx)(RoutesPage_1.RoutesPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.activeTransactions,
-            element: (0, jsx_runtime_1.jsx)(ActiveTransactionsPage_1.ActiveTransactionsPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.transactionHistory,
-            element: (0, jsx_runtime_1.jsx)(TransactionHistoryPage_1.TransactionHistoryPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.transactionHistory}?/${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.transactionDetails}`,
-            element: (0, jsx_runtime_1.jsx)(TransactionDetailsPage_1.TransactionDetailsPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.selectWallet}`,
-            element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.activeTransactions}?/${utils_1.navigationRoutes.transactionExecution}`,
-            element: (0, jsx_runtime_1.jsx)(TransactionPage_1.TransactionPage, {}),
-        },
-        {
-            path: '*',
-            element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),
-        },
-    ]);
+    const element = (0, react_router_dom_1.useRoutes)(routes);
     return element;
 };
 exports.AppRoutes = AppRoutes;

package/cjs/components/ActiveTransactions/ActiveTransactionItem.js

@@ -19,11 +19,7 @@ const ActiveTransactionItem = ({ routeId, dense }) => {
         routeId,
         executeInBackground: true,
     });
-    // TODO: replace with ES2023 findLast
-    const lastActiveStep = route?.steps
-        .slice()
-        .reverse()
-        .find((step) => step.execution);
+    const lastActiveStep = route?.steps.findLast((step) => step.execution);
     const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
     const { title } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
     if (!route || !lastActiveStep) {

package/cjs/components/ActiveTransactions/ActiveTransactions.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const providers_1 = require("../../providers");
+const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
@@ -14,7 +14,7 @@ const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
 const ActiveTransactions = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { account } = (0, providers_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
     if (!executingRoutes?.length) {
         return null;

package/cjs/components/AmountInput/AmountInputEndAdornment.js

@@ -3,23 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AmountInputEndAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
-const utils_1 = require("../../utils");
 const AmountInputAdornment_style_1 = require("./AmountInputAdornment.style");
 const AmountInputEndAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.FormKeyHelper.getChainKey(formType),
             providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
+    // We get gas recommendations for the source chain to make sure that after pressing the Max button
+    // the user will have enough funds remaining to cover gas costs
     const { data } = (0, hooks_1.useGasRecommendation)(chainId);
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const handleMax = () => {
@@ -28,15 +29,13 @@ const AmountInputEndAdornment = ({ formType }) => {
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
-            const tokenAmount = (0, big_js_1.default)(token?.amount ?? 0);
-            const recommendedAmount = (0, big_js_1.default)(data.recommended.amount)
-                .div(10 ** data.recommended.token.decimals)
-                .div(2);
-            if (tokenAmount.gt(recommendedAmount)) {
-                maxAmount = (0, utils_1.formatTokenAmount)(tokenAmount.minus(recommendedAmount).toString());
+            const tokenAmount = token?.amount ?? 0n;
+            const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+            if (tokenAmount > recommendedAmount) {
+                maxAmount = tokenAmount - recommendedAmount;
             }
         }
-        setValue(providers_1.FormKeyHelper.getAmountKey(formType), maxAmount || '', {
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), maxAmount && token ? (0, viem_1.formatUnits)(maxAmount, token.decimals) : '', {
             shouldTouch: true,
         });
     };

package/cjs/components/AmountInput/FormPriceHelperText.js

@@ -31,7 +31,7 @@ const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) =
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: (0, utils_1.formatTokenAmount)(token?.amount),
+                    value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
                 })}` })) : null] }));
 };
 exports.FormPriceHelperTextBase = FormPriceHelperTextBase;

package/cjs/components/BaseTransactionButton/BaseTransactionButton.js

@@ -5,26 +5,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lab_1 = require("@mui/lab");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const BaseTransactionButton = ({ onClick, text, disabled, loading, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { walletManagement } = (0, providers_1.useWidgetConfig)();
-    const { account, connect } = (0, providers_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const handleClick = async () => {
-        if (account.isActive) {
+        if (account.isConnected) {
             onClick?.();
         }
         else if (walletManagement) {
-            await connect();
+            await walletManagement.connect();
         }
         else {
             navigate(utils_1.navigationRoutes.selectWallet);
         }
     };
     const getButtonText = () => {
-        if (account.isActive) {
+        if (account.isConnected) {
             if (text) {
                 return text;
             }

package/cjs/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "active" | "insurance" | "insurance-icon" | undefined;
+    type?: "insurance" | "active" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/cjs/components/ChainSelect/ChainSelect.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChainSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../../providers");
@@ -16,11 +17,13 @@ const ChainSelect = ({ formType }) => {
     const [chainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-        setChainOrder(chainId);
-    }
+    (0, react_1.useEffect)(() => {
+        const hasChainInOrderedList = chainOrder.includes(chainId);
+        // If we don't have a chain in the ordered chain list we should add it.
+        if (!hasChainInOrderedList) {
+            setChainOrder(chainId);
+        }
+    }, [chainId, chainOrder, setChainOrder]);
     const showAllChains = () => {
         navigate(utils_1.navigationRoutes[`${formType}Chain`]);
     };

package/cjs/components/ChainSelect/useChainSelect.js

@@ -5,11 +5,13 @@ const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const types_1 = require("../../types");
 const useChainSelect = (formType) => {
+    const { requiredUI } = (0, providers_1.useWidgetConfig)();
     const chainKey = providers_1.FormKeyHelper.getChainKey(formType);
     const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: chainKey });
-    const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { chains, isLoading } = (0, hooks_1.useChains)();
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const { chains, isLoading, getChainById } = (0, hooks_1.useChains)();
     const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
     const swapOnly = (0, hooks_1.useSwapOnly)();
     const getChains = () => {
@@ -32,6 +34,23 @@ const useChainSelect = (formType) => {
         setValue(providers_1.FormKeyHelper.getTokenKey(formType), '');
         setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
         setValue(providers_1.FormKey.TokenSearchFilter, '');
+        const [fromChainId, toChainId] = getValues([
+            providers_1.FormKey.FromChain,
+            providers_1.FormKey.ToChain,
+        ]);
+        const fromChain = getChainById(fromChainId);
+        const toChain = getChainById(toChainId);
+        const differentChainType = fromChain && toChain && fromChain.chainType !== toChain.chainType;
+        const requiredToAddress = requiredUI?.includes(types_1.RequiredUI.ToAddress) || differentChainType;
+        // toAddress field is required (always visible) when bridging between
+        // two ecosystems (fromChain and toChain have different chain types).
+        // We clean up toAddress on every chain change if toAddress is not required.
+        // This is used when we switch between different chain ecosystems (chain types) and
+        // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
+        // but it keeps toAddress value set for the previous chain pair.
+        if (!requiredToAddress) {
+            setValue(providers_1.FormKey.ToAddress, '');
+        }
         setChainOrder(chainId);
     };
     return {

package/cjs/components/GasMessage/GasMessage.style.js

@@ -5,15 +5,14 @@ const material_1 = require("@mui/material");
 const Switch_1 = require("@mui/material/Switch");
 const styles_1 = require("@mui/material/styles");
 const Switch_2 = require("../Switch");
+const utils_1 = require("../../utils");
 const MessageCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     position: 'relative',
     whiteSpace: 'pre-line',
 }));
 exports.WarningMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? (0, styles_1.alpha)(theme.palette.warning.main, 0.32)
-        : (0, styles_1.alpha)(theme.palette.warning.main, 0.16),
+    backgroundColor: (0, utils_1.getWarningBackgroundColor)(theme),
 }));
 exports.WarningMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     color: theme.palette.mode === 'light'
@@ -21,9 +20,7 @@ exports.WarningMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme
         : (0, styles_1.alpha)(theme.palette.warning.main, 1),
 }));
 exports.InfoMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? (0, styles_1.alpha)(theme.palette.info.main, 0.12)
-        : (0, styles_1.alpha)(theme.palette.info.main, 0.16),
+    backgroundColor: (0, utils_1.getInfoBackgroundColor)(theme),
 }));
 exports.InfoMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     color: theme.palette.mode === 'light'

package/cjs/components/GasMessage/GasSufficiencyMessage.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const EvStation_1 = require("@mui/icons-material/EvStation");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
 const GasMessage_style_1 = require("./GasMessage.style");
 const GasSufficiencyMessage = ({ insufficientGas, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
@@ -13,7 +14,7 @@ const GasSufficiencyMessage = ({ insufficientGas, }) => {
                         } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography
             // eslint-disable-next-line react/no-array-index-key
             , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`main.tokenOnChainAmount`, {
-                    amount: item.insufficientAmount?.toString(),
+                    amount: (0, viem_1.formatUnits)(item.insufficientAmount ?? 0n, item.token.decimals),
                     tokenSymbol: item.token.symbol,
                     chainName: item.chain?.name,
                 }) }, index)))] }));

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

@@ -13,3 +13,11 @@ export declare const WalletButton: import("@emotion/styled").StyledComponent<imp
 export declare const DrawerWalletContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HeaderControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SplitTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "action" | "children" | "sx" | "aria-label" | "aria-labelledby" | "onChange" | "variant" | "value" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+    component?: import("react").ElementType<any> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Header/Header.style.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawerWalletContainer = exports.WalletButton = exports.Container = exports.HeaderAppBar = void 0;
+exports.SplitTabs = exports.HeaderControlsContainer = exports.DrawerWalletContainer = exports.WalletButton = exports.Container = exports.HeaderAppBar = void 0;
 const material_1 = require("@mui/material");
 const Button_1 = require("@mui/material/Button");
 const styles_1 = require("@mui/material/styles");
+const Tabs_1 = require("../Tabs");
 exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
     backgroundColor: 'transparent',
     color: theme.palette.text.primary,
@@ -45,6 +46,11 @@ exports.WalletButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
     [`.${Button_1.buttonClasses.startIcon} > *:nth-of-type(1)`]: {
         fontSize: '24px',
     },
+    [`&:hover .${material_1.badgeClasses.badge} > div`]: {
+        borderColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
 }));
 exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(() => ({
     width: '100%',
@@ -54,3 +60,12 @@ exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(() => ({
         marginLeft: '-0.5rem',
     },
 }));
+exports.HeaderControlsContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(0.5),
+}));
+exports.SplitTabs = (0, styles_1.styled)(Tabs_1.Tabs)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.paper
+        : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
+}));

package/cjs/components/Header/NavigationHeader.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
+export declare const TransactionHistoryButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const NavigationHeader: React.FC;