@lifi/widget 1.17.1 → 1.17.2

package/hooks/useGasSufficiency.js

@@ -9,27 +9,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import Big from 'big.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper, useLiFi, useWallet, } from '../providers';
+import { useChains } from '.';
+import { useLiFi, useWallet } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
     const lifi = useLiFi();
     const { account } = useWallet();
-    const [fromChainId, toChainId, fromToken] = useWatch({
-        name: [
-            SwapFormKeyHelper.getChainKey('from'),
-            SwapFormKeyHelper.getChainKey('to'),
-            SwapFormKey.FromToken,
-        ],
-    });
-    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const { getChainById } = useChains();
-    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(route === null || route === void 0 ? void 0 : route.fromChainId);
     const [insufficientGas, setInsufficientGas] = useState();
     const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!account.isActive || !route || !fromAmount) {
+        var _a, _b;
+        if (!account.isActive || !route) {
             setInsufficientGas(undefined);
             return;
         }
@@ -53,16 +44,15 @@ export const useGasSufficiency = (route) => {
             }
             return groupedGasCosts;
         }, {});
-        if (gasCosts[fromChainId] &&
-            route.fromToken.address === gasCosts[fromChainId].token.address) {
-            gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus(Big(fromAmount));
+        if (route.fromToken.address === ((_a = gasCosts[route.fromChainId]) === null || _a === void 0 ? void 0 : _a.token.address)) {
+            gasCosts[route.fromChainId].tokenAmount = (_b = gasCosts[route.fromChainId]) === null || _b === void 0 ? void 0 : _b.gasAmount.plus(Big(route.fromAmount).div(Math.pow(10, route.fromToken.decimals)));
         }
         const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             setInsufficientGas(undefined);
             return;
         }
-        [fromChainId, toChainId].forEach((chainId) => {
+        [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
                 const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
@@ -78,27 +68,17 @@ export const useGasSufficiency = (route) => {
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
         setInsufficientGas(gasCostResult);
-    }), [
-        account.address,
-        account.isActive,
-        fromAmount,
-        fromChainId,
-        getChainById,
-        lifi,
-        route,
-        toChainId,
-    ]);
+    }), [account.address, account.isActive, getChainById, lifi, route]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
-        if (!account.isActive ||
-            !fromToken ||
-            !fromAmount ||
-            !fromChainTokenBalances) {
+        if (!account.isActive || !fromChainTokenBalances || !route) {
             return false;
         }
-        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-        return Big(fromAmount).gt(balance);
-    }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === (route === null || route === void 0 ? void 0 : route.fromToken.address))) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
+        return Big(route.fromAmount)
+            .div(Math.pow(10, route.fromToken.decimals))
+            .gt(balance);
+    }, [account.isActive, fromChainTokenBalances, route]);
     useEffect(() => {
         checkInsufficientGas();
     }, [checkInsufficientGas]);

package/hooks/useTelemetry.js

@@ -1,11 +1,12 @@
 /* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
+import { name } from '../config/version';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'production') {
-                console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
+            if (process.env.NODE_ENV === 'development') {
+                console.warn(`[${name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }
         else {

package/hooks/useTokenBalances.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenBalances: (selectedChainId: number) => {
+export declare const useTokenBalances: (selectedChainId?: number) => {
     tokens: Token[] | undefined;
     tokensWithBalance: Token[] | undefined;
     featuredTokens: import("@lifi/types").Token[];

package/hooks/useTokenBalances.js

@@ -22,7 +22,9 @@ export const useTokenBalances = (selectedChainId) => {
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
     const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
-    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length);
+    const isBalanceLoadingEnabled = Boolean(account.address) &&
+        Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length) &&
+        Boolean(selectedChainId);
     const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!accountAddress || !tokens) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -41,9 +41,9 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
-    "@ethersproject/providers": "^5.7.0",
-    "@lifi/sdk": "^1.5.0",
-    "@lifi/wallet-management": "^1.1.9",
+    "@ethersproject/providers": "^5.7.1",
+    "@lifi/sdk": "^1.6.0",
+    "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.3",
     "@mui/lab": "^5.0.0-alpha.99",
     "@mui/material": "^5.10.5",
@@ -61,7 +61,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.35.0",
     "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.0",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"
   },

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/AdvancedPreferences.d.ts

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

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { useHeaderActionStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
-import { useSwapRoutes } from '../../hooks';
+import { useNavigateBack, useSwapRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
-    const navigate = useNavigate();
-    const { pathname } = useLocation();
+    const { navigateBack, navigate } = useNavigateBack();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
@@ -21,7 +19,7 @@ export const SwapRoutesPage = () => {
     };
     useEffect(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(pathname.substring(0, pathname.lastIndexOf('/')));
+            navigateBack();
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps