Fix bugs in token price fetching which cause excessive API calls (#3258)

* fix race condition where we make duplicate reqs

* make tokenPricesToFetch a state variable

Author: artursapek

wormhole-connect/src/config/tokens.ts

@@ -156,9 +156,12 @@ export class TokenMapping<T> {
   // Mapping of Chain -> token address -> T
   _mapping: Map<Chain, Map<string, T>>;
 
+  size: number;
+
   constructor() {
     this.lastUpdate = new Date();
     this._mapping = new Map();
+    this.size = 0;
   }
 
   add(token: TokenId, value: T) {
@@ -168,6 +171,7 @@ export class TokenMapping<T> {
 
     this._mapping.get(token.chain)!.set(token.address.toString(), value);
     this.lastUpdate = new Date();
+    this.size += 1;
   }
 
   // You can get a token either using its string key, TokenId, or with (chain, address)
@@ -233,6 +237,14 @@ export class TokenMapping<T> {
     );
   }
 
+  getAllTokenIds(): TokenId[] {
+    return Array.from(this._mapping.keys()).flatMap((chain) =>
+      Array.from(this._mapping.get(chain)!.keys()).map((address) =>
+        Wormhole.tokenId(chain, address),
+      ),
+    );
+  }
+
   get chains(): Chain[] {
     return Array.from(this._mapping.keys());
   }
@@ -242,6 +254,13 @@ export class TokenMapping<T> {
     other.forEach(this.add);
   }
 
+  // Removes all records from the TokenMapping
+  clear() {
+    this.lastUpdate = new Date();
+    this._mapping = new Map();
+    this.size = 0;
+  }
+
   forEach(callback: (tokenId: TokenId, val: T) => void) {
     this._mapping.forEach((nextLevel, chain) => {
       nextLevel.forEach((val, addr) => {
@@ -250,6 +269,10 @@ export class TokenMapping<T> {
       });
     });
   }
+
+  get empty(): boolean {
+    return this.size === 0;
+  }
 }
 
 export class TokenCache extends TokenMapping<Token> {

wormhole-connect/src/contexts/TokensContext.tsx

@@ -47,6 +47,7 @@ interface TokensProviderProps {
 export interface TokenPrice {
   price: number | undefined; // USD price
   timestamp: Date;
+  isFetching?: boolean;
 }
 
 export const TokensProvider: React.FC<TokensProviderProps> = ({ children }) => {
@@ -58,6 +59,10 @@ export const TokensProvider: React.FC<TokensProviderProps> = ({ children }) => {
   const [tokenPrices, _setTokenPrices] = useState<TokenMapping<TokenPrice>>(
     new TokenMapping(),
   );
+  const [tokenPricesToFetch, _setTokenPricesToFetch] = useState<
+    TokenMapping<boolean>
+  >(new TokenMapping());
+
   const [isFetchingTokenPrices, setIsFetchingPrices] = useState(false);
   const [lastTokenPriceUpdate, setLastPriceUpdate] = useState(new Date());
 
@@ -104,21 +109,32 @@ export const TokensProvider: React.FC<TokensProviderProps> = ({ children }) => {
     [],
   );
 
-  const tokenPricesToFetch: Set<TokenId> = new Set();
-
   const updateTokenPrices = useDebouncedCallback(async () => {
-    if (tokenPricesToFetch.size === 0) return;
+    if (tokenPricesToFetch.empty) return;
 
-    const tokens = Array.from(tokenPricesToFetch);
+    const tokens = tokenPricesToFetch.getAllTokenIds();
     console.info('Fetching token prices', tokens);
 
     try {
       setIsFetchingPrices(true);
+      const timestamp = new Date();
+
+      // Flag that this price is being fetched, so that we don't start another concurrent request for it in getTokenPrice
+      for (const token of tokens) {
+        tokenPrices.add(token, {
+          timestamp,
+          price: undefined,
+          isFetching: true,
+        });
+      }
+
+      // Clear list for future invocations of getTokenPrice
+      tokenPricesToFetch.clear();
+
       const prices = await fetchTokenPrices(tokens);
 
-      for (const token of tokenPricesToFetch.values()) {
+      for (const token of tokens) {
         const price = prices.get(token);
-        const timestamp = new Date();
         if (price) {
           tokenPrices.add(token, {
             timestamp,
@@ -134,7 +150,6 @@ export const TokensProvider: React.FC<TokensProviderProps> = ({ children }) => {
     } catch (e) {
       console.error(e);
     } finally {
-      tokenPricesToFetch.clear();
       setIsFetchingPrices(false);
       setLastPriceUpdate(new Date());
     }
@@ -148,7 +163,7 @@ export const TokensProvider: React.FC<TokensProviderProps> = ({ children }) => {
     if (cachedPrice) {
       return cachedPrice.price;
     } else {
-      tokenPricesToFetch.add(tokenId);
+      tokenPricesToFetch.add(tokenId, true);
       updateTokenPrices();
       return undefined;
     }