@lifi/widget 1.0.0 → 1.1.1

package/README.md

@@ -0,0 +1,19 @@
+# @lifi/widget
+
+LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
+
+## Installation
+
+Install the package in your project directory with:
+
+```sh
+// with npm
+npm install @lifi/widget
+
+// with yarn
+yarn add @lifi/widget
+```
+
+## Documentation
+
+[The documentation.](https://docs.li.fi/)

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -2,20 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, IconButton, Tooltip, } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-const calculateTime = (updatedAt, timeToUpdate) => {
-    if (updatedAt === 0) {
-        return 0;
-    }
-    const progress = ((Date.now() - updatedAt) / timeToUpdate) * 100;
-    return Math.min(100, progress);
-};
+const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
+    ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
+    : 0;
+const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
 export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, sx }) => {
     const { t } = useTranslation();
-    const [value, setValue] = useState(() => calculateTime(updatedAt, timeToUpdate));
+    const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
     useEffect(() => {
+        setValue(getProgressValue(updatedAt, timeToUpdate));
         const id = setInterval(() => {
-            const time = calculateTime(updatedAt, timeToUpdate);
-            setValue(calculateTime(updatedAt, timeToUpdate));
+            const time = getProgressValue(updatedAt, timeToUpdate);
+            setValue(time);
             if (time >= 100) {
                 clearInterval(id);
             }
@@ -28,7 +26,7 @@ export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onCli
         }
     }, [isLoading]);
     return (_jsx(IconButton, Object.assign({ onClick: onClick, sx: sx, disabled: isLoading }, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
-                value: Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000),
+                value: getSecondsToUpdate(updatedAt, timeToUpdate),
             }), placement: "top", enterDelay: 250, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
                     display: 'grid',
                     position: 'relative',

package/components/SwapButton/ButtonTooltip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ButtonTooltip: ({ title, children, }: {
     title?: string | undefined;
     children: JSX.Element;

package/components/SwapInput/SwapInputAdornment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
 export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapRouteCard/SwapRouteCard.js

@@ -17,13 +17,17 @@ import { StepActions } from '../StepActions';
 import { StepToken } from '../StepToken';
 import { Card, Check, Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
+    var _b;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = useTranslation();
+    const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
+        ? t(`swap.tags.${route.tags[0].toLowerCase()}`).toUpperCase()
+        : t(`swap.tags.general`).toUpperCase();
     return (_jsx(Card, Object.assign({ active: active, dense: dense }, other, { children: _jsxs(Box, { children: [_jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    }, mb: 2 }, { children: [_jsx(Label, { children: "GENERAL" }), active ? (_jsx(Check, { children: _jsx(CheckIcon, { fontSize: "inherit" }) })) : null] })), _jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                    }, mb: 2 }, { children: [_jsx(Label, { children: label }), active ? (_jsx(Check, { children: _jsx(CheckIcon, { fontSize: "inherit" }) })) : null] })), _jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
                     ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
                     : null, _jsxs(Box, Object.assign({ sx: {
                         display: 'flex',

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -49,9 +49,9 @@ export const Label = styled(Typography, {
         : theme.palette.mode === 'light'
             ? theme.palette.common.black
             : theme.palette.grey[300],
-    padding: theme.spacing(0.5, 0.75),
+    padding: theme.spacing(0.75),
     fontSize: 12,
-    lineHeight: 1.2,
+    lineHeight: 1,
     fontWeight: '600',
     height: 24,
     letterSpacing: '0.05rem',

package/components/SwapRoutes/SwapRoutes.js

@@ -29,5 +29,5 @@ export const SwapRoutes = (props) => {
                 } }), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", py: 2, pl: 2, pr: 1 }, { children: isLoading || isFetching || !currentRoute ? (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 181, sx: (theme) => ({
                                 borderRadius: theme.shape.borderRadiusSecondary / theme.shape.borderRadius,
                                 minWidth: '100%',
-                            }) })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true }, currentRoute.id)) })), _jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))] }))] })));
+                            }) })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true })) })), _jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))] }))] })));
 };

package/components/TokenList/TokenList.js

@@ -12,12 +12,12 @@ import { createTokenAmountSkeletons, skeletonKey } from './utils';
 export const TokenList = ({ formType, height, onClick, }) => {
     const { t } = useTranslation();
     const { account } = useWallet();
-    const { setValue } = useFormContext();
+    const { setValue, getValues } = useFormContext();
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const [searchTokensFilter] = useDebouncedWatch([SwapFormKey.SearchTokensFilter], 250);
-    const { tokens, isLoading, isFetching } = useTokenBalances(selectedChainId);
+    const { tokens, isLoading } = useTokenBalances(selectedChainId);
     const chainTokens = useMemo(() => {
         var _a;
         let chainTokens = tokens !== null && tokens !== void 0 ? tokens : [];
@@ -46,8 +46,15 @@ export const TokenList = ({ formType, height, onClick, }) => {
     const handleTokenClick = useCallback((tokenAddress) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken] = getValues([
+            SwapFormKeyHelper.getTokenKey(oppositeFormType),
+        ]);
+        if (selectedOppositeToken === tokenAddress) {
+            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+        }
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, onClick, setValue]);
+    }, [formType, getValues, onClick, setValue]);
     return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!virtualItems.length ? (_jsx(Typography, Object.assign({ variant: "body1", align: "center", py: 2, px: 3 }, { children: t('swap.couldntFindTokens') }))) : null, _jsx(List, Object.assign({ style: { height: totalSize }, disablePadding: true }, { children: virtualItems.map((item) => {
                     const token = chainTokens[item.index];
                     if (token.name.includes(skeletonKey)) {

package/config/env.d.ts

@@ -1,12 +1,3 @@
 export declare const env: {
     LIFI_API_URL: string;
-    LIFI_RPC_URL_MAINNET: string;
-    LIFI_RPC_URL_ROPSTEN: string;
-    LIFI_RPC_URL_RINKEBY: string;
-    LIFI_RPC_URL_GORLI: string;
-    LIFI_RPC_URL_KOVAN: string;
-    LIFI_RPC_URL_ARBITRUM_RINKEBY: string;
-    LIFI_RPC_URL_OPTIMISM_KOVAN: string;
-    LIFI_RPC_URL_POLYGON_MUMBAI: string;
-    LIFI_RPC_URL_BSC_TESTNET: string;
 };

package/config/env.js

@@ -1,19 +1,3 @@
 export const env = {
-    LIFI_API_URL: 'https://li.quest/v1/',
-    // RPC - Mainnet (overwrites)
-    LIFI_RPC_URL_MAINNET: 'https://speedy-nodes-nyc.moralis.io/5ed6053dc39eba789ff466c9/eth/mainnet',
-    // LIFI_RPC_URL_POLYGON:
-    // LIFI_RPC_URL_BSC:
-    // LIFI_RPC_URL_XDAI:
-    // LIFI_RPC_URL_FANTOM:
-    // LIFI_RPC_URL_ARBITRUM:
-    // RPC - Testnet (overwrites)
-    LIFI_RPC_URL_ROPSTEN: 'https://ropsten.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_RINKEBY: 'https://rinkeby.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_GORLI: 'https://goerli.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_KOVAN: 'https://kovan.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_ARBITRUM_RINKEBY: 'https://arbitrum-rinkeby.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_OPTIMISM_KOVAN: 'https://optimism-kovan.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930',
-    LIFI_RPC_URL_POLYGON_MUMBAI: 'https://rpc-mumbai.maticvigil.com/v1/e4dadaac060844094a667194c20f79cc9bb0bc59',
-    LIFI_RPC_URL_BSC_TESTNET: 'https://data-seed-prebsc-1-s2.binance.org:8545',
+    LIFI_API_URL: 'https://li.quest/v1/', // 'https://developkub.li.finance/v1/',
 };

package/hooks/useChains.js

@@ -23,10 +23,10 @@ import { useQuery } from 'react-query';
 import { LiFi } from '../lifi';
 import { useWidgetConfig } from '../providers/WidgetProvider';
 export const useChains = () => {
-    const { enabledChains } = useWidgetConfig();
+    const { disabledChains } = useWidgetConfig();
     const _a = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
         const chains = yield LiFi.getChains();
-        return chains.filter((chain) => enabledChains.includes(chain.id));
+        return chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
     })), { data } = _a, other = __rest(_a, ["data"]);
     const getChainById = useCallback((chainId) => {
         const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);

package/hooks/useDebouncedWatch.js

@@ -5,18 +5,23 @@ export const useDebouncedWatch = (name, delay) => {
         name,
     });
     const [debouncedValue, setDebouncedValue] = useState(watchedValue);
+    const debouncedValueRef = useRef();
     const isMounted = useRef(false);
     useEffect(() => {
         if (isMounted.current) {
             const hasWatchedValue = Array.isArray(watchedValue)
                 ? watchedValue.some((value) => value)
-                : watchedValue;
-            if (hasWatchedValue) {
+                : Boolean(watchedValue);
+            const hasDebouncedValue = Array.isArray(debouncedValueRef.current)
+                ? debouncedValueRef.current.some((value) => value)
+                : Boolean(debouncedValueRef.current);
+            if (hasWatchedValue && hasDebouncedValue) {
                 const handler = setTimeout(() => {
                     setDebouncedValue(watchedValue);
                 }, delay);
                 return () => clearTimeout(handler);
             }
+            debouncedValueRef.current = watchedValue;
             setDebouncedValue(watchedValue);
             return undefined;
         }

package/hooks/useRouteExecution/useRouteExecution.js

@@ -15,9 +15,9 @@ import { useWallet } from '../../providers/WalletProvider';
 import { deepClone } from '../../utils/deepClone';
 import { useRouteStore } from './useRouteStore';
 export const useRouteExecution = (routeId) => {
+    const { account, switchChain } = useWallet();
     const { route, status } = useRouteStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
-    const { account, switchChain } = useWallet();
     const updateCallback = (updatedRoute) => {
         console.log('Route updated.', updatedRoute);
         updateRoute(deepClone(updatedRoute));
@@ -104,9 +104,9 @@ export const useRouteExecution = (routeId) => {
     }, [resumeRouteMutation, routeId]);
     const restartRouteMutation = useCallback(() => {
         restartRoute(routeId);
-        resumeRoute(useRouteStore.getState().routes[routeId].route);
+        resumeRoute(route);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resumeRoute, routeId]);
+    }, [resumeRoute, route, routeId]);
     const removeRouteMutation = useCallback(() => {
         removeRoute(routeId);
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/hooks/useSwapRoutes.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
@@ -17,9 +17,11 @@ import { useWallet } from '../providers/WalletProvider';
 import { useCurrentRoute } from './useRouteExecution';
 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,] = useWatch({
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
@@ -28,6 +30,7 @@ export const useSwapRoutes = () => {
             SwapFormKey.Slippage,
             SwapFormKey.EnabledBridges,
             SwapFormKey.EnabledExchanges,
+            SwapFormKey.RoutePriority,
         ],
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
@@ -40,7 +43,7 @@ export const useSwapRoutes = () => {
         Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
         !isNaN(slippage);
-    const { data, isLoading, isFetching, dataUpdatedAt, refetch } = useQuery([
+    const queryKey = [
         'routes',
         account.address,
         fromChainId,
@@ -51,13 +54,19 @@ export const useSwapRoutes = () => {
         slippage,
         enabledBridges,
         enabledExchanges,
-    ], ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        routePriority,
+    ];
+    const previousDataUpdatedAt = (_a = queryClient.getQueryState(queryKey)) === null || _a === void 0 ? void 0 : _a.dataUpdatedAt;
+    const refetchInterval = previousDataUpdatedAt
+        ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
+        : refetchTime;
+    const { data, isLoading, isFetching, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
         return LiFi.getRoutes({
             fromChainId,
             // TODO: simplify
             fromAmount: (Number(fromTokenAmount) *
-                Math.pow(10, ((_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 0))).toFixed(0),
+                Math.pow(10, ((_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 0))).toFixed(0),
             fromTokenAddress,
             toChainId,
             toTokenAddress,
@@ -71,14 +80,14 @@ export const useSwapRoutes = () => {
                 exchanges: {
                     allow: enabledExchanges,
                 },
+                order: routePriority,
             },
         }, { signal });
     }), {
         enabled: isEnabled,
         refetchIntervalInBackground: true,
-        refetchInterval: refetchTime,
+        refetchInterval,
         staleTime: refetchTime,
-        // TODO: probably should be removed
         cacheTime: refetchTime,
     });
     useEffect(() => {

package/i18n/en/translation.json

@@ -58,6 +58,13 @@
         "networkIsBusy": "Network is busy...",
         "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
         "swapStepDetails": "Swap on {{value}}",
+        "tags": {
+            "recommended": "Recommended",
+            "fastest": "Fast",
+            "cheapest": "Cheap",
+            "safest": "Safe",
+            "general": "General"
+        },
         "success": {
             "title": {
                 "fundsReceived": "Funds received"
@@ -110,10 +117,7 @@
         }
     },
     "settings": {
-        "routePriority": {
-            "title": "Route priority",
-            "recommended": "Recommended"
-        },
+        "routePriority": "Route priority",
         "slippage": "Slippage",
         "gasPrice": {
             "title": "Gas price",

package/i18n/index.d.ts

@@ -61,6 +61,13 @@ export declare const resources: {
                 networkIsBusy: string;
                 crossStepDetails: string;
                 swapStepDetails: string;
+                tags: {
+                    recommended: string;
+                    fastest: string;
+                    cheapest: string;
+                    safest: string;
+                    general: string;
+                };
                 success: {
                     title: {
                         fundsReceived: string;
@@ -113,10 +120,7 @@ export declare const resources: {
                 };
             };
             settings: {
-                routePriority: {
-                    title: string;
-                    recommended: string;
-                };
+                routePriority: string;
                 slippage: string;
                 gasPrice: {
                     title: string;

package/lifi.js

@@ -1,9 +1,6 @@
 import LIFI from '@lifinance/sdk';
-import { env } from './config/env';
-import { getRpcs } from './config/rpcs';
 export const LiFi = new LIFI({
-    apiUrl: env.LIFI_API_URL,
-    rpcs: getRpcs(),
+    // apiUrl: env.LIFI_API_URL,
     defaultRouteOptions: {
         integrator: 'li.fi',
     },

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@lifi/widget",
-  "version": "1.0.0",
+  "version": "1.1.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",
   "module": "./index.js",
@@ -14,7 +15,6 @@
     "access": "public"
   },
   "author": "Eugene Chybisov <eugene@li.finance>",
-  "license": "UNLICENSED",
   "homepage": "https://github.com/lifinance/widget",
   "repository": {
     "type": "git",
@@ -23,18 +23,30 @@
   "bugs": {
     "url": "https://github.com/lifinance/widget/issues"
   },
+  "keywords": [
+    "widget",
+    "lifi-widget",
+    "bridge",
+    "swap",
+    "cross-chain",
+    "multi-chain",
+    "metamask",
+    "ethereum",
+    "web3",
+    "lifi"
+  ],
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@ethersproject/experimental": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.0",
-    "@lifinance/sdk": "^1.0.0-beta.8",
-    "@mui/icons-material": "^5.8.2",
-    "@mui/lab": "^5.0.0-alpha.84",
-    "@mui/material": "^5.8.2",
+    "@lifi/wallet-management": "^1.0.1",
+    "@lifinance/sdk": "^1.0.0-beta.11",
+    "@mui/icons-material": "^5.8.3",
+    "@mui/lab": "^5.0.0-alpha.85",
+    "@mui/material": "^5.8.3",
     "big.js": "^6.2.0",
-    "i18next": "^21.8.7",
+    "i18next": "^21.8.9",
     "immer": "^9.0.14",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

package/pages/SelectTokenPage/ChainSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -1,16 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TokenList } from '../../components/TokenList';
 import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
 import { ChainSelect } from './ChainSelect';
 import { SearchTokenInput } from './SearchTokenInput';
 export const SelectTokenPage = ({ formType, }) => {
-    const navigate = useNavigate();
     useScrollableOverflowHidden();
+    const navigate = useNavigate();
+    const headerRef = useRef(null);
     const contentHeight = useContentHeight();
+    const [headerHeight, setHeaderHeight] = useState(0);
     const handleTokenClick = () => {
         navigate(-1);
     };
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: contentHeight - 184, onClick: handleTokenClick, formType: formType })] })));
+    useLayoutEffect(() => {
+        var _a, _b;
+        setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
+    }, [contentHeight]);
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: headerHeight, onClick: handleTokenClick, formType: formType })] })));
 };

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.js

@@ -5,9 +5,9 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
 export const GasPriceSelect = () => {
     const { t } = useTranslation();
     const { register } = useFormContext();
-    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ defaultValue: "normal", MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.GasPrice)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
+    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ defaultValue: formDefaultValues.gasPrice, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.GasPrice)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Orders } from '@lifinance/sdk';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
 export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
     const { register } = useFormContext();
-    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ defaultValue: 1, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.RoutePriority)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: _jsx(MenuItem, Object.assign({ value: 1 }, { children: t(`settings.routePriority.recommended`) })) })) }))] }));
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ defaultValue: formDefaultValues.routePriority, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.RoutePriority)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
 };

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/pages/SwapPage/CircularProgress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Status } from '@lifinance/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;

package/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,2 +1,9 @@
 /// <reference types="react" />
+export declare const formDefaultValues: {
+    fromAmount: string;
+    gasPrice: string;
+    slippage: string;
+    searchTokensFilter: string;
+    routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+};
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -2,18 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from 'react-hook-form';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
-const defaultValues = {
+export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
     [SwapFormKey.GasPrice]: 'normal',
     [SwapFormKey.Slippage]: '3',
     [SwapFormKey.SearchTokensFilter]: '',
+    [SwapFormKey.RoutePriority]: 'RECOMMENDED',
 };
 export const SwapFormProvider = ({ children, }) => {
     var _a;
     const { fromChain, fromToken, fromAmount, toChain, toToken } = useWidgetConfig();
     const methods = useForm({
-        defaultValues: Object.assign(Object.assign({}, defaultValues), { fromChain,
-            fromToken, fromAmount: (_a = fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()) !== null && _a !== void 0 ? _a : defaultValues.fromAmount, toChain,
+        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain,
+            fromToken, fromAmount: (_a = fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()) !== null && _a !== void 0 ? _a : formDefaultValues.fromAmount, toChain,
             toToken }),
     });
     return _jsx(FormProvider, Object.assign({}, methods, { children: children }));

package/providers/SwapFormProvider/types.d.ts

@@ -1,3 +1,4 @@
+import { Order } from '@lifinance/sdk';
 export declare enum SwapFormKey {
     BridgePrioritization = "bridgePrioritization",
     EnabledBridges = "enabledBridges",
@@ -26,7 +27,7 @@ export declare type SwapFormValues = {
     [SwapFormKey.IsAddressConfirmed]: boolean;
     [SwapFormKey.IsSendToRecipient]: boolean;
     [SwapFormKey.RecipientsAddress]: string;
-    [SwapFormKey.RoutePriority]: string;
+    [SwapFormKey.RoutePriority]: Order;
     [SwapFormKey.SearchTokensFilter]: string;
     [SwapFormKey.Slippage]: string;
     [SwapFormKey.ToChain]: number;

package/providers/WidgetProvider/WidgetProvider.js

@@ -16,24 +16,25 @@ const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };
 const initialContext = {
-    enabledChains: [],
+    disabledChains: [],
 };
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, { fromChain, toChain } = _b, other = __rest(_b, ["fromChain", "toChain"]);
     const value = useMemo(() => {
+        var _a, _b;
         const config = Object.assign({}, other);
         try {
             return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
                     ? fromChain
                     : typeof fromChain === 'string'
-                        ? getChainByKey(fromChain).id
+                        ? getChainByKey(fromChain.toLowerCase()).id
                         : ChainId.ETH, toChain: typeof toChain === 'number'
                     ? toChain
                     : typeof toChain === 'string'
-                        ? getChainByKey(toChain).id
-                        : ChainId.ETH });
+                        ? getChainByKey(toChain.toLowerCase()).id
+                        : ChainId.ETH, fromToken: (_a = config.fromToken) === null || _a === void 0 ? void 0 : _a.toLowerCase(), toToken: (_b = config.toToken) === null || _b === void 0 ? void 0 : _b.toLowerCase() });
         }
         catch (e) {
             console.warn(e);

package/types/widget.d.ts

@@ -15,7 +15,7 @@ export interface WidgetConfig {
     fromToken?: string;
     toChain?: `${ChainKey}` | number;
     toToken?: string;
-    enabledChains: number[];
+    disabledChains?: number[];
     disableInternalWalletManagement?: boolean;
     walletCallbacks?: {
         connect: {

package/config/rpcs.d.ts

@@ -1 +0,0 @@
-export declare const getRpcs: () => Record<number, string[]>;

package/config/rpcs.js

@@ -1,20 +0,0 @@
-import { ChainId } from '@lifinance/sdk';
-import { env } from './env';
-const rpcs = {
-    [ChainId.ETH]: [env.LIFI_RPC_URL_MAINNET],
-    // [ChainId.POL]: [env.LIFI_RPC_URL_POLYGON],
-    // [ChainId.BSC]: [env.LIFI_RPC_URL_BSC],
-    // [ChainId.DAI]: [env.LIFI_RPC_URL_XDAI],
-    // [ChainId.FTM]: [env.LIFI_RPC_URL_FANTOM],
-    // [ChainId.ARB]: [env.LIFI_RPC_URL_ARBITRUM],
-    // Testnet
-    [ChainId.ROP]: [env.LIFI_RPC_URL_ROPSTEN],
-    [ChainId.RIN]: [env.LIFI_RPC_URL_RINKEBY],
-    [ChainId.GOR]: [env.LIFI_RPC_URL_GORLI],
-    [ChainId.KOV]: [env.LIFI_RPC_URL_KOVAN],
-    [ChainId.ARBT]: [env.LIFI_RPC_URL_ARBITRUM_RINKEBY],
-    [ChainId.OPTT]: [env.LIFI_RPC_URL_OPTIMISM_KOVAN],
-    [ChainId.MUM]: [env.LIFI_RPC_URL_POLYGON_MUMBAI],
-    [ChainId.BSCT]: [env.LIFI_RPC_URL_BSC_TESTNET],
-};
-export const getRpcs = () => Object.fromEntries(Object.entries(rpcs).filter(([_, value]) => !value));