@lifi/widget 1.1.2 → 1.1.3

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",

package/pages/SelectTokenPage/ChainSelect.js

@@ -21,5 +21,5 @@ export const ChainSelect = ({ formType }) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
     };
-    return !isLoading ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 89, sx: { borderRadius: 1 } }));
+    return !isLoading ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
 };

package/utils/routes.d.ts

@@ -7,4 +7,5 @@ export declare const routes: {
     swapRoutes: string;
     swap: string;
 };
+export declare const routesValues: string[];
 export declare type RouteType = keyof typeof routes;

package/utils/routes.js

@@ -1,9 +1,10 @@
 export const routes = {
     home: '/',
-    selectWallet: '/select-wallet',
-    settings: '/settings',
-    fromToken: '/select-from-token',
-    toToken: '/select-to-token',
-    swapRoutes: '/swap-routes',
-    swap: '/swap',
+    selectWallet: 'select-wallet',
+    settings: 'settings',
+    fromToken: 'select-from-token',
+    toToken: 'select-to-token',
+    swapRoutes: 'swap-routes',
+    swap: 'swap',
 };
+export const routesValues = Object.values(routes);