@lifi/widget 1.1.2 → 1.2.1

package/App.js

@@ -1,18 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 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';
 import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { useWallet } from './providers/WalletProvider';
 import { routes } from './utils/routes';
 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, {}) })] })] }));
+    const { attemptEagerConnect } = useWallet();
+    useEffect(() => {
+        attemptEagerConnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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/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

@@ -1,9 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AccountBalanceWallet as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
 import { routes } from '../../utils/routes';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {
@@ -20,9 +30,15 @@ export const WalletHeader = () => {
 };
 const ConnectButton = () => {
     const { pathname } = useLocation();
+    const config = useWidgetConfig();
+    const { connect: walletConnect } = useWallet();
     const navigate = useNavigate();
-    const connect = () => {
+    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            yield walletConnect();
+            return;
+        }
         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/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);

package/hooks/useSwapRoutes.js

@@ -14,23 +14,25 @@ import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
-import { useCurrentRoute } from './useRouteExecution';
+import { useCurrentRoute, useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
     const { account } = useWallet();
     const queryClient = useQueryClient();
     const [currentRoute, setCurrentRoute] = useCurrentRoute();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,] = useWatch({
+    const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
+        'slippage',
+        'routePriority',
+        'enabledBridges',
+        'enabledExchanges',
+    ]);
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
-            SwapFormKey.Slippage,
-            SwapFormKey.EnabledBridges,
-            SwapFormKey.EnabledExchanges,
-            SwapFormKey.RoutePriority,
         ],
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
@@ -42,7 +44,7 @@ export const useSwapRoutes = () => {
         Boolean(toTokenAddress) &&
         Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
-        !isNaN(slippage);
+        !Number.isNaN(slippage);
     const queryKey = [
         'routes',
         account.address,

package/hooks/useTools.d.ts

@@ -0,0 +1 @@
+export declare const useTools: () => import("@lifinance/types").ToolsResponse | undefined;

package/hooks/useTools.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-underscore-dangle */
+import { useQuery } from 'react-query';
+import { LiFi } from '../lifi';
+import { useSettingsStore } from '../stores';
+export const useTools = () => {
+    const initializeTools = useSettingsStore((state) => state.initializeTools);
+    const { data } = useQuery(['tools'], ({ signal }) => LiFi.getTools(undefined, { signal }), {
+        onSuccess(data) {
+            initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
+        },
+    });
+    return data;
+};

package/i18n/en/translation.json

@@ -37,7 +37,6 @@
     "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
     "currency": "{{value, currency(currency: USD)}}",
     "sendToRecipient": "Send to recipient",
-    "recipientsAddress": "Recipient's {{chain}} address",
     "addressConfirmation": "I confirm that the address above is correct",
     "gas": "gas fee",
     "minutes": "minutes",
@@ -126,7 +125,6 @@
       "fast": "Fast"
     },
     "advancedPreferences": "Advanced preferences",
-    "bridgePrioritization": "Bridge prioritization",
     "enabledBridges": "Enabled bridges",
     "selectEnabledBridges": "Select enabled bridges",
     "enabledExchanges": "Enabled exchanges",

package/i18n/index.d.ts

@@ -40,7 +40,6 @@ export declare const resources: {
                 approximateCurrency: string;
                 currency: string;
                 sendToRecipient: string;
-                recipientsAddress: string;
                 addressConfirmation: string;
                 gas: string;
                 minutes: string;
@@ -129,7 +128,6 @@ export declare const resources: {
                     fast: string;
                 };
                 advancedPreferences: string;
-                bridgePrioritization: string;
                 enabledBridges: string;
                 selectEnabledBridges: string;
                 enabledExchanges: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "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",
@@ -37,11 +37,11 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.2",
+    "@lifi/wallet-management": "^1.0.3",
     "@lifinance/sdk": "^1.0.0-beta.11",
     "@mui/icons-material": "^5.8.3",
     "@mui/lab": "^5.0.0-alpha.85",
@@ -51,8 +51,8 @@
     "immer": "^9.0.14",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-hook-form": "^7.31.3",
-    "react-i18next": "^11.16.10",
+    "react-hook-form": "^7.32.0",
+    "react-i18next": "^11.17.1",
     "react-query": "^4.0.0-beta.23",
     "react-resize-detector": "^7.1.1",
     "react-router-dom": "^6.3.0",

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/pages/SettingsPage/AdvancedPreferences.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
+import { useSetSettings, useSettings } from '../../stores';
 import { EnabledBridgesSelect } from './EnabledBridgesSelect';
 import { EnabledExchangesSelect } from './EnabledExchangesSelect';
 export const AdvancedPreferences = () => {
     const { t } = useTranslation();
-    const [advancedPreferences, setAdvancedPreferences] = useState(false);
+    const [setValue] = useSetSettings();
+    const { advancedPreferences } = useSettings(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
-        setAdvancedPreferences(checked);
+        setValue('advancedPreferences', checked);
     };
     return (_jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { value: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
 import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useAppearance } from '../../hooks';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useAppearance } from '../../stores';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 export const ColorSchemeButtonGroup = () => {
     const { t } = useTranslation();

package/pages/SettingsPage/EnabledBridgesSelect.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useBridges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledBridgesSelect = () => {
+    var _a;
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const bridges = useBridges();
-    return bridges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), defaultValue: bridges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledBridges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: bridges.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge }, { children: bridge }), bridge))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledBridges, setTools] = useSettingsStore((state) => [state.enabledBridges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
+                            setTools('Bridges', event.target.value, tools.bridges);
+                        }
+                    }, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge.key }, { children: bridge.key }), bridge.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/EnabledExchangesSelect.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useExchanges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledExchangesSelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const exchanges = useExchanges();
-    return exchanges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), defaultValue: exchanges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledExchanges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange }, { children: exchange }), exchange))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledExchanges, setTools] = useSettingsStore((state) => [state.enabledExchanges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
+                            setTools('Exchanges', event.target.value, tools.exchanges);
+                        }
+                    }, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };