@lifi/widget 1.18.1 → 1.18.3

package/hooks/useTokenBalances.js

@@ -26,9 +26,6 @@ export const useTokenBalances = (selectedChainId) => {
         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;
-        }
         const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
@@ -36,7 +33,7 @@ export const useTokenBalances = (selectedChainId) => {
             setRefetchInterval((interval) => interval === defaultRefetchInterval
                 ? minRefetchInterval
                 : interval * 2);
-            return;
+            throw Error('Could not get tokens balance.');
         }
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         const sortFn = (a, b) => {

package/i18n/en/translation.json

@@ -78,7 +78,7 @@
         "fundsReceived": "Funds received"
       },
       "message": {
-        "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
+        "fundsReceived": "There are now {{amount}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
       }
     },
     "info": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.1",
+  "version": "1.18.3",
   "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",
@@ -45,12 +45,12 @@
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
     "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.100",
-    "@mui/material": "^5.10.6",
+    "@mui/lab": "^5.0.0-alpha.101",
+    "@mui/material": "^5.10.7",
     "@sentry/integrations": "^7.13.0",
     "@sentry/react": "^7.13.0",
     "@sentry/tracing": "^7.13.0",
-    "@tanstack/react-query": "^4.3.9",
+    "@tanstack/react-query": "^4.6.1",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
     "i18next": "^21.9.2",
@@ -59,7 +59,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.36.0",
+    "react-hook-form": "^7.36.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.4.1",
     "react-timer-hook": "^3.0.5",

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
-import { useLayoutEffect, useRef, useState } from 'react';
 import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
+import { useNavigateBack } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
-const minTokenListHeight = 330;
 export const SelectTokenPage = ({ formType }) => {
-    useScrollableOverflowHidden();
     const { navigateBack } = useNavigateBack();
-    const headerRef = useRef(null);
-    const contentHeight = useContentHeight();
-    const [tokenListHeight, setTokenListHeight] = useState(0);
-    useLayoutEffect(() => {
-        var _a, _b;
-        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
-    }, [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: tokenListHeight, onClick: navigateBack, formType: formType })] })));
+    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: 360, onClick: navigateBack, formType: formType })] })));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable consistent-return */
 import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
@@ -8,17 +9,18 @@ import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey } from '../../providers';
+import { navigationRoutes, shortenWalletAddress } from '../../utils';
 import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
-    const { navigateBack } = useNavigateBack();
+    const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
-    const { token, refetch: refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toToken, route.toAddress);
     const { setValue } = useFormContext();
     const clearFromAmount = () => {
-        refetchBalance();
+        refetchAllBalances();
         setValue(SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {
@@ -30,6 +32,13 @@ export const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
+    const handleSeeDetails = () => {
+        handleClose();
+        navigate(navigationRoutes.swapDetails, {
+            state: { routeId: route.id },
+            replace: true,
+        });
+    };
     let title;
     let message;
     switch (status) {
@@ -39,6 +48,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                 amount: token === null || token === void 0 ? void 0 : token.amount,
                 tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
                 chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                walletAddress: shortenWalletAddress(route.toAddress),
             });
             break;
         case 'error': {
@@ -59,9 +69,12 @@ export const StatusBottomSheet = ({ status, route, }) => {
         var _a, _b;
         if ((status === 'success' || status === 'error') &&
             !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
-            refetchBalance();
+            if (status === 'success') {
+                refetchNewBalance();
+                refetch();
+            }
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
-    }, [refetchBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    }, [refetch, refetchNewBalance, status]);
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };