Clear cache on cache serialization problem or wrong version + handle …

packages/react-app/src/components/field-input/amount-field-input.tsx

@@ -9,7 +9,6 @@ import { fetchRewardTokens } from 'src/services/quest.service';
 import { arrayDistinctBy } from 'src/utils/array.util';
 import { getTokenInfo } from 'src/utils/contract.util';
 import { GUpx } from 'src/utils/style.util';
-import { Logger } from 'src/utils/logger';
 import { includesCaseInsensitive } from 'src/utils/string.util';
 import { isAddress } from 'src/utils/web3.utils';
 import styled from 'styled-components';
@@ -197,7 +196,7 @@ function AmountFieldInput({
   error,
 }: Props) {
   const isMountedRef = useIsMountedRef();
-  const { networkId } = getNetwork();
+  const { networkId, name } = getNetwork();
   const [tokens, setTokens] = useState<TokenModel[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>();
   const [amount, setAmount] = useState<number | undefined>(value?.parsedAmount);
@@ -206,6 +205,7 @@ function AmountFieldInput({
   const [_hasFocused, _setHasFocused] = useState<boolean>();
   const tokenInputId = tokenEditable ? id : `token-${id}`; // Handle label for
   const amountInputId = !tokenEditable ? id : `amount-${id}`; // Handle label for
+  const [errorState, setErrorState] = useState<string | false | undefined>(error);
 
   // Needed since the access of state in event handlers is not working
   const hasFocusedRef = React.useRef(_hasFocused);
@@ -225,15 +225,22 @@ function AmountFieldInput({
   }, [isEdit, tokenEditable, token]);
 
   useEffect(() => {
-    if (availableTokens.length && _hasFocused) {
+    const handleSearch = async () => {
       if (searchTerm && isAddress(searchTerm)) {
         setTokens([]);
-        getTokenInfo(searchTerm)
-          .then((tokenInfo) => {
-            if (typeof tokenInfo !== 'string')
-              if (tokenInfo && isMountedRef.current) setTokens([tokenInfo]);
-          })
-          .catch(Logger.exception);
+        let tokenInfo;
+        try {
+          tokenInfo = await getTokenInfo(searchTerm);
+        } catch {
+          tokenInfo = null;
+        }
+        if (isMountedRef.current) {
+          if (tokenInfo) {
+            setTokens([tokenInfo]);
+          } else {
+            setErrorState(`No token found with this address on ${name}`);
+          }
+        }
       } else {
         setTokens(
           availableTokens.filter(
@@ -242,6 +249,9 @@ function AmountFieldInput({
           ),
         );
       }
+    };
+    if (availableTokens.length && _hasFocused) {
+      handleSearch();
     }
   }, [searchTerm, availableTokens, _hasFocused]);
 
@@ -267,6 +277,7 @@ function AmountFieldInput({
     const networkDefaultTokens =
       Object.values<TokenModel>(TOKENS[networkId]).filter((x) => !!x.token) ?? [];
     const questsUsedTokens = await fetchRewardTokens();
+
     if (isMountedRef.current) {
       setAvailableTokens(
         arrayDistinctBy([...networkDefaultTokens, ...questsUsedTokens], (x) => x.token),
@@ -404,7 +415,7 @@ function AmountFieldInput({
       wide={wide}
       compact={compact}
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
-      error={error}
+      error={errorState}
       className={!isEdit ? 'fit-content' : ''}
     >
       {reversed ? [tokenField, amountField] : [amountField, tokenField]}

packages/react-app/src/components/wallet-balance.tsx

@@ -35,6 +35,7 @@ export function WalletBallance({ askedTokenAmount, setIsEnoughBalance, isLoading
   const [isEnoughBalance, _setIsEnoughBalance] = useState(true);
   const { currentTheme } = useThemeContext();
   const isMountedRef = useIsMountedRef();
+  const [error, setError] = useState<string>();
 
   useEffect(() => {
     if (askedTokenAmount?.token && askedTokenAmount.token.token !== tokenBalance?.token.token) {
@@ -61,13 +62,17 @@ export function WalletBallance({ askedTokenAmount, setIsEnoughBalance, isLoading
     setTokenBalance(undefined);
     const balance = (await getBalanceOf({ ..._token }, walletAddress)) ?? undefined;
     if (isMountedRef.current) {
-      setTokenBalance(balance);
+      if (balance) {
+        setTokenBalance(balance);
+      } else {
+        setError('Token not found');
+      }
     }
   };
 
   return (
     <WrapperStyled theme={currentTheme} isEnoughBalance={isEnoughBalance}>
-      {askedTokenAmount?.token && askedTokenAmount !== null ? (
+      {askedTokenAmount?.token && askedTokenAmount !== null && !error ? (
         <AmountFieldInput
           isLoading={!tokenBalance || isLoading}
           id={`balance-${tokenBalance?.token.symbol}`}
@@ -84,7 +89,7 @@ export function WalletBallance({ askedTokenAmount, setIsEnoughBalance, isLoading
           compact
           isLoading={isLoading}
         >
-          <i>No token selected</i>
+          <i>{error ?? 'No token selected'}</i>
         </FieldInput>
       )}
     </WrapperStyled>

packages/react-app/src/services/cache.service.ts

@@ -6,6 +6,8 @@ import { ONE_HOUR_IN_MS } from 'src/utils/date.utils';
 import { Logger } from 'src/utils/logger';
 import { fetchRoutePairWithStable } from './uniswap.service';
 
+const cacheVersion = 1;
+
 let cacheMap: Map<
   string,
   Map<string, { value: any; expirationMs?: number } | null>
@@ -112,21 +114,29 @@ function reviver(key: string, value: any) {
 
 function saveCacheAsync() {
   const { networkId } = getNetwork();
-  localStorage.setItem(`cache-${networkId}`, JSON.stringify(cacheMap, replacer));
+  localStorage.setItem(`cache-${networkId}`, JSON.stringify({ cacheVersion, cacheMap }, replacer));
 }
 
 function retrieveCache() {
+  const { networkId } = getNetwork();
+  const cacheId = `cache-${networkId}`;
   try {
-    const { networkId } = getNetwork();
-    const cacheJson = localStorage.getItem(`cache-${networkId}`);
+    const cacheJson = localStorage.getItem(cacheId);
     if (cacheJson) {
-      const map = JSON.parse(cacheJson, reviver) as Map<string, Map<string, any>>;
-      if (map.size > 0) {
-        return map;
+      const result = JSON.parse(cacheJson, reviver) as {
+        cacheVersion: number;
+        map: Map<string, Map<string, any>>;
+      };
+      if (result.cacheVersion !== cacheVersion) {
+        Logger.debug('Cache version mismatch, clearing cache');
+        localStorage.removeItem(cacheId);
+      } else if (result.map.size > 0) {
+        return result.map;
       }
     }
   } catch (error) {
-    Logger.debug('Error retrieving cache from storage', error);
+    Logger.debug('Error retrieving cache from storage, clearing cache', error);
+    localStorage.removeItem(cacheId);
   }
   return new Map<string, Map<string, any>>();
 }

packages/react-app/src/services/quest.service.ts

@@ -562,8 +562,11 @@ export async function getBalanceOf(
           price === undefined ? undefined : parsedAmount * fromBigNumber(price, tokenInfo.decimals),
       };
     }
-  } catch (error) {
-    Logger.exception(error);
+  } catch (error: any) {
+    Logger.exception(
+      error,
+      `Failed to fetch balance of ${(token as any).token ? (token as any).token : token}`,
+    );
   }
   return null;
 }