@lifi/widget 1.1.1 → 1.2.0

package/App.js

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
 import { AppContainer } from './components/AppContainer';
 import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
 import { MainPage } from './pages/MainPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
@@ -14,5 +15,5 @@ export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) })] })] }));
+    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) })] }), _jsx(Initializer, {})] }));
 };

package/AppDrawer.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from 'react';
 import { WidgetConfig } from './types';
 export declare type AppDrawerProps = DrawerProps & {
     elementRef?: RefObject<HTMLDivElement>;
-    config: WidgetConfig;
+    config?: WidgetConfig;
 };
 export interface AppDrawerBase {
     isOpen(): void;

package/AppProvider.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { WidgetConfig } from '.';
 export interface AppProps {
-    config: WidgetConfig;
+    config?: WidgetConfig;
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;

package/AppProvider.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable camelcase */
+/* eslint-disable react/jsx-pascal-case */
+import { Fragment } from 'react';
 import { QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
 import { SwapFormProvider } from './providers/SwapFormProvider';
 import { ThemeProvider } from './providers/ThemeProvider';
@@ -8,5 +11,7 @@ import { WalletProvider } from './providers/WalletProvider';
 import { WidgetProvider } from './providers/WidgetProvider';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(MemoryRouter, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: children }) }) }) })) }) })));
+    const inRouterContext = useInRouterContext();
+    const Router = inRouterContext ? Fragment : MemoryRouter;
+    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(Router, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: children }) }) }) })) }) })));
 };

package/components/Header/Header.js

@@ -12,6 +12,6 @@ const stickyHeaderRoutes = [
 ];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
-    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.includes(pathname) }, { children: children })));
+    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 export const Header = () => (_jsxs(HeaderContainer, { children: [_jsx(WalletHeader, {}), _jsx(NavigationHeader, {})] }));

package/components/Header/NavigationHeader.js

@@ -3,7 +3,7 @@ import { ArrowBack as ArrowBackIcon, Settings as SettingsIcon, } from '@mui/icon
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { routes } from '../../utils/routes';
+import { routes, routesValues } from '../../utils/routes';
 import { SwapRoutesUpdateProgress } from '../SwapRoutes/SwapRoutesUpdateProgress';
 import { HeaderAppBar } from './Header.style';
 const backButtonRoutes = [
@@ -17,6 +17,8 @@ const backButtonRoutes = [
 export const NavigationHeader = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
+    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
+    const hasPath = routesValues.includes(path);
     const navigate = useNavigate();
     const handleSettings = () => {
         navigate(routes.settings);
@@ -25,7 +27,7 @@ export const NavigationHeader = () => {
         navigate(-1);
     };
     const handleHeaderTitle = () => {
-        switch (pathname) {
+        switch (path) {
             case routes.selectWallet:
                 return t(`header.selectWallet`);
             case routes.settings:
@@ -42,5 +44,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(pathname) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: pathname === '/' ? 32 : 24, align: pathname === '/' ? 'left' : 'center', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: routes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "/:empty", element: _jsx(Box, { width: 36, height: 48 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 24 : 32, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: routes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "/:empty", element: _jsx(Box, { width: 28, height: 48 }) })] })] })));
 };

package/components/Header/WalletHeader.js

@@ -24,5 +24,5 @@ const ConnectButton = () => {
     const connect = () => {
         navigate(routes.selectWallet);
     };
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: pathname !== routes.selectWallet ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(routes.selectWallet) ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
 };

package/components/Initializer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Initializer: React.FC;

package/components/Initializer.js

@@ -0,0 +1,5 @@
+import { useInitializer } from '../hooks/useInitializer';
+export const Initializer = () => {
+    useInitializer();
+    return null;
+};

package/components/StepToken.js

@@ -15,7 +15,7 @@ import { formatTokenAmount } from '../utils/format';
 import { TextFitter } from './TextFitter';
 export const StepToken = (_a) => {
     var { token } = _a, other = __rest(_a, ["token"]);
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ maxHeight: 32, textStyle: {
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
                             fontWeight: 700,
                         } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(Typography, Object.assign({ fontSize: 14, lineHeight: 1, fontWeight: "500", color: "text.secondary", mr: 1, ml: 6 }, { children: token.symbol }))] })));
 };

package/components/SwapButton/SwapButton.js

@@ -12,9 +12,10 @@ import { ChainId } from '@lifinance/sdk';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useCurrentRoute, useHasSufficientBalance, useSetExecutableRoute, useSwapRoutes, } from '../../hooks';
+import { useChains, useHasSufficientBalance, useSwapRoutes } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
+import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { ButtonTooltip } from './ButtonTooltip';
 import { Button } from './SwapButton.style';
@@ -43,7 +44,9 @@ export const SwapButton = () => {
         else if (currentRoute &&
             (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
             setExecutableRoute(currentRoute);
-            navigate(routes.swap, { state: { routeId: currentRoute.id } });
+            navigate(routes.swap, {
+                state: { routeId: currentRoute.id },
+            });
         }
     });
     const getButtonText = () => {

package/components/SwapInProgress/SwapInProgress.js

@@ -4,7 +4,7 @@ import { AvatarGroup, Box, Stack } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useExecutingRoutes } from '../../hooks';
+import { useExecutingRoutes } from '../../stores';
 import { routes } from '../../utils/routes';
 import { CardTitle } from '../Card';
 import { Card, RouteAvatar, RouteCard } from './SwapInProgress.style';

package/components/SwapRoutes/SwapRoutes.js

@@ -5,7 +5,8 @@ import { Box, IconButton, Skeleton } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useCurrentRoute, useSwapRoutes } from '../../hooks';
+import { useSwapRoutes } from '../../hooks';
+import { useCurrentRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { CardContainer, CardTitle } from '../Card';
 import { SwapRouteCard } from '../SwapRouteCard';

package/components/TextFitter/TextFitter.js

@@ -11,7 +11,7 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
     const theme = useTheme();
     const textRef = useRef(null);
     const [viewBox, setViewBox] = useState(initialState);
-    const [textRect, setTextRect] = useState(initialState);
+    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
     const calculateBox = useCallback(() => {
         if (!textRef.current) {
             return;
@@ -25,7 +25,7 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        setTextRect(textRef.current.getBoundingClientRect());
+        // setTextRect(textRef.current.getBoundingClientRect());
         onFit === null || onFit === void 0 ? void 0 : onFit();
     }, [cropBottom, cropTop, onFit]);
     useLayoutEffect(() => {
@@ -38,7 +38,11 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             });
         }
     }, [calculateBox]);
-    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: textRect.height && maxHeight && textRect.height >= maxHeight
-            ? maxHeight
-            : height, preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
+        // height={
+        //   textRect.height && maxHeight && textRect.height >= maxHeight
+        //     ? maxHeight
+        //     : height
+        // }
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
 };

package/fonts/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
+       url("Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
+       url("Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
+       url("Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.19") format("woff2");
+}

package/hooks/index.d.ts

@@ -1,15 +1,13 @@
-export * from './useBridges';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useExchanges';
 export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
-export * from './useSettings';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTools';

package/hooks/index.js

@@ -1,15 +1,13 @@
-export * from './useBridges';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useExchanges';
 export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
-export * from './useSettings';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTools';

package/hooks/useContentHeight.js

@@ -1,15 +1,23 @@
-import { useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { ElementId } from '../utils/elements';
+const getContentHeight = () => {
+    const headerElement = document.getElementById(ElementId.Header);
+    const containerElement = document.getElementById(ElementId.ScrollableContainer);
+    if (!containerElement || !headerElement) {
+        console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
+        return 0;
+    }
+    const { height: containerHeight } = containerElement.getBoundingClientRect();
+    const { height: headerHeight } = headerElement.getBoundingClientRect();
+    return containerHeight - headerHeight;
+};
 export const useContentHeight = () => {
-    const [contentHeight] = useState(() => {
-        const headerElement = document.getElementById(ElementId.Header);
-        const containerElement = document.getElementById(ElementId.ScrollableContainer);
-        if (!containerElement || !headerElement) {
-            throw Error(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
+    const [contentHeight, setContentHeight] = useState(getContentHeight);
+    useLayoutEffect(() => {
+        if (!contentHeight) {
+            setContentHeight(getContentHeight());
         }
-        const { height: containerHeight } = containerElement.getBoundingClientRect();
-        const { height: headerHeight } = headerElement.getBoundingClientRect();
-        return containerHeight - headerHeight;
-    });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return contentHeight;
 };

package/hooks/useHasSufficientBalance.js

@@ -3,7 +3,7 @@ import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useCurrentRoute } from './useRouteExecution';
+import { useCurrentRoute } from '../stores';
 import { useTokenBalances } from './useTokenBalances';
 export const useHasSufficientBalance = () => {
     var _a;

package/hooks/useInitializer.d.ts

@@ -0,0 +1 @@
+export declare const useInitializer: () => void;

package/hooks/useInitializer.js

@@ -0,0 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+import { useTools } from './useTools';
+export const useInitializer = () => {
+    useTools();
+};

package/hooks/{useRouteExecution/useRouteExecution.d.ts → useRouteExecution.d.ts}

@@ -4,5 +4,5 @@ export declare const useRouteExecution: (routeId: string) => {
     restartRoute: () => void;
     removeRoute: () => void;
     route: Route;
-    status: import("./types").RouteExecutionStatus;
+    status: import("../stores").RouteExecutionStatus;
 };

package/hooks/{useRouteExecution/useRouteExecution.js → useRouteExecution.js}

@@ -10,13 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useCallback, useEffect } from 'react';
 import { useMutation } from 'react-query';
 import shallow from 'zustand/shallow';
-import { LiFi } from '../../lifi';
-import { useWallet } from '../../providers/WalletProvider';
-import { deepClone } from '../../utils/deepClone';
-import { useRouteStore } from './useRouteStore';
+import { LiFi } from '../lifi';
+import { useWallet } from '../providers/WalletProvider';
+import { useRouteStore } from '../stores';
+import { deepClone } from '../utils/deepClone';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
-    const { route, status } = useRouteStore((state) => state.routes[routeId]);
+    const { route, status } = useRouteStore((state) => { var _a; return (_a = state.routes[routeId]) !== null && _a !== void 0 ? _a : {}; });
     const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
     const updateCallback = (updatedRoute) => {
         console.log('Route updated.', updatedRoute);