@talismn/balances-react 0.0.0-pr563-20230221230003 → 0.0.0-pr563-20230222052739

package/CHANGELOG.md

@@ -1,12 +1,15 @@
 # @talismn/balances-react
 
-## 0.0.0-pr563-20230221230003
+## 0.0.0-pr563-20230222052739
 
 ### Patch Changes
 
+- 5ddeee95: fix: tokenRates in @talismn/balances-react
 - 536eddb5: fix: ported useDbCache related perf fixes to @talismn/balances-react
+- Updated dependencies [5ddeee95]
 - Updated dependencies [536eddb5]
-  - @talismn/balances@0.0.0-pr563-20230221230003
+  - @talismn/token-rates@0.0.0-pr563-20230222052739
+  - @talismn/balances@0.0.0-pr563-20230222052739
 
 ## 0.3.3
 

package/dist/declarations/src/hooks/useDbCache.d.ts

@@ -15,8 +15,8 @@ type DbCache = {
     evmNetworksWithoutTestnetsMap: Record<EvmNetworkId, EvmNetwork | CustomEvmNetwork>;
     tokensWithTestnetsMap: Record<TokenId, Token>;
     tokensWithoutTestnetsMap: Record<TokenId, Token>;
-    balances: BalanceJson[];
     tokenRatesMap: Record<TokenId, TokenRates>;
+    balances: BalanceJson[];
 };
 type DbCacheProviderProps = {
     useTestnets?: boolean;

package/dist/declarations/src/hooks/useDbCacheSubscription.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type DbEntityType = "chains" | "evmNetworks" | "tokens" | "balances";
+export type DbEntityType = "chains" | "evmNetworks" | "tokens" | "tokenRates" | "balances";
 export declare const SubscriptionsProvider: import("react").FC<{
     children?: import("react").ReactNode;
 }>, useSubscriptions: () => ((callback?: ((val: unknown) => void) | undefined) => import("../util").Unsubscribe)[];

package/dist/declarations/src/hooks/useTokenRates.d.ts

@@ -1,3 +1,3 @@
-import { IToken, TokenId } from "@talismn/chaindata-provider";
-import { TokenRatesList } from "@talismn/token-rates";
-export declare function useTokenRates(tokens?: Record<TokenId, IToken>): TokenRatesList;
+import { TokenId } from "@talismn/chaindata-provider";
+export declare function useTokenRates(): Record<string, import("@talismn/token-rates").TokenRates>;
+export declare function useTokenRate(tokenId?: TokenId): import("@talismn/token-rates").TokenRates | undefined;

package/dist/talismn-balances-react.cjs.dev.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var balances = require('@talismn/balances');
+var tokenRates = require('@talismn/token-rates');
 var dexieReactHooks = require('dexie-react-hooks');
 var reactUse = require('react-use');
 var chaindataProviderExtension = require('@talismn/chaindata-provider-extension');
-var tokenRates = require('@talismn/token-rates');
 var anylogger = require('anylogger');
 var rxjs = require('rxjs');
 var chainConnector = require('@talismn/chain-connector');
@@ -62,25 +62,6 @@ function useChaindataProvider(options = {}) {
 }
 const [ChaindataProvider, useChaindata] = provideContext(useChaindataProvider);
 
-function useTokenRates(tokens) {
-  const generation = react.useRef(0);
-  const [tokenRates$1, setTokenRates] = react.useState({});
-  react.useEffect(() => {
-    if (!tokens) return;
-    if (Object.keys(tokens).length < 1) return;
-
-    // when we make a new request, we want to ignore any old requests which haven't yet completed
-    // otherwise we risk replacing the most recent data with older data
-    generation.current = (generation.current + 1) % Number.MAX_SAFE_INTEGER;
-    const thisGeneration = generation.current;
-    tokenRates.fetchTokenRates(tokens).then(tokenRates => {
-      if (thisGeneration !== generation.current) return;
-      setTokenRates(tokenRates);
-    });
-  }, [tokens]);
-  return tokenRates$1;
-}
-
 const filterNoTestnet = ({
   isTestnet
 }) => isTestnet === false;
@@ -97,13 +78,11 @@ const DEFAULT_VALUE = {
   evmNetworksWithoutTestnetsMap: {},
   tokensWithTestnetsMap: {},
   tokensWithoutTestnetsMap: {},
-  balances: [],
-  tokenRatesMap: {}
+  tokenRatesMap: {},
+  balances: []
 };
-const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, tokenRates) => {
-  if (!chainsMap || !evmNetworksMap || !tokensMap || !allBalances
-  // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  /* || !tokenRates */) return DEFAULT_VALUE;
+const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
+  if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
 
   // BEGIN: temp hack to indicate that
   //          - EVM GLMR is a mirror of substrate GLMR
@@ -131,6 +110,10 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
   const tokensWithoutTestnets = tokensWithTestnets.filter(filterNoTestnet).filter(token => token.chain && chainsWithoutTestnetsMap[token.chain.id] || token.evmNetwork && evmNetworksWithoutTestnetsMap[token.evmNetwork.id]);
   const tokensWithTestnetsMap = Object.fromEntries(tokensWithTestnets.map(token => [token.id, token]));
   const tokensWithoutTestnetsMap = Object.fromEntries(tokensWithoutTestnets.map(token => [token.id, token]));
+  const tokenRatesMap = Object.fromEntries(tokenRates.map(({
+    tokenId,
+    rates
+  }) => [tokenId, rates]));
 
   // return only balances for which we have a token
   const balances = allBalances.filter(b => tokensWithTestnetsMap[b.tokenId]);
@@ -147,8 +130,8 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
     evmNetworksWithoutTestnetsMap,
     tokensWithTestnetsMap,
     tokensWithoutTestnetsMap,
-    balances,
-    tokenRatesMap: tokenRates ?? {}
+    tokenRatesMap,
+    balances
   };
 };
 const useDbCacheProvider = ({
@@ -158,35 +141,30 @@ const useDbCacheProvider = ({
   const chainList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.chains(), [chaindataProvider]);
   const evmNetworkList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.evmNetworks(), [chaindataProvider]);
   const tokenList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
+  const tokenRates$1 = dexieReactHooks.useLiveQuery(() => tokenRates.db.tokenRates.toArray(), []);
   const rawBalances = dexieReactHooks.useLiveQuery(() => balances.db.balances.toArray(), []);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  const tokenRates = useTokenRates();
   const [dbData, setDbData] = react.useState(DEFAULT_VALUE);
 
   // debounce every 500ms to prevent hammering UI with updates
   reactUse.useDebounce(() => {
-    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
-  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates, useTestnets]);
+    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
+  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates$1, useTestnets]);
   const refInitialized = react.useRef(false);
 
   // force an update as soon as all datasources are fetched, so UI can display data ASAP
   react.useEffect(() => {
-    if (!refInitialized.current && chainList && evmNetworkList && tokenList && rawBalances
-    // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-    // && tokenRates
-    ) {
-      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
+    if (!refInitialized.current && chainList && evmNetworkList && tokenList && tokenRates$1 && rawBalances) {
+      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
       refInitialized.current = true;
     }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates, useTestnets]);
+  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates$1, useTestnets]);
   return dbData;
 };
 const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.0.0-pr563-20230221230003",
+	version: "0.0.0-pr563-20230222052739",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -316,14 +294,14 @@ function useChainConnectorsProvider(options) {
 }
 const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
 
-const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeBalances()];
+const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeTokenRates(), useSubscribeBalances()];
 const [SubscriptionsProvider, useSubscriptions] = provideContext(useSubscriptionsProvider);
 
 /**
  * This hook is responsible for fetching the data used for balances and inserting it into the db.
  */
 const useDbCacheSubscription = subscribeTo => {
-  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeBalances] = useSubscriptions();
+  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances] = useSubscriptions();
   react.useEffect(() => {
     switch (subscribeTo) {
       case "chains":
@@ -332,10 +310,12 @@ const useDbCacheSubscription = subscribeTo => {
         return subscribeHydrateEvmNetworks();
       case "tokens":
         return subscribeHydrateTokens();
+      case "tokenRates":
+        return subscribeTokenRates();
       case "balances":
         return subscribeBalances();
     }
-  }, [subscribeBalances, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTo]);
+  }, [subscribeTo, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances]);
 };
 function useSubscribeChaindataHydrate(type) {
   const chaindata =
@@ -367,6 +347,49 @@ function useSubscribeChaindataHydrate(type) {
   const subscribe = useMulticastSubscription(createSubscription);
   return subscribe;
 }
+function useSubscribeTokenRates() {
+  const chaindataProvider = useChaindata();
+  const tokens = dexieReactHooks.useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
+  const generationRef = react.useRef(0);
+  const createSubscription = react.useCallback(() => {
+    if (!chaindataProvider) return;
+    if (!tokens) return;
+    if (Object.keys(tokens).length < 1) return;
+
+    // when we make a new request, we want to ignore any old requests which haven't yet completed
+    // otherwise we risk replacing the most recent data with older data
+    const generation = (generationRef.current + 1) % Number.MAX_SAFE_INTEGER;
+    generationRef.current = generation;
+    let active = true;
+    const REFRESH_INTERVAL = 300_000; // 300_000ms = 5 minutes
+    const RETRY_INTERVAL = 5_000; // 5_000ms = 5 seconds
+
+    const hydrate = async () => {
+      if (!active) return;
+      if (generationRef.current !== generation) return;
+      try {
+        const tokenRates$1 = await tokenRates.fetchTokenRates(tokens);
+        if (!active) return;
+        if (generationRef.current !== generation) return;
+        const putTokenRates = Object.entries(tokenRates$1).map(([tokenId, rates]) => ({
+          tokenId,
+          rates
+        }));
+        tokenRates.db.transaction("rw", tokenRates.db.tokenRates, async () => await tokenRates.db.tokenRates.bulkPut(putTokenRates));
+        setTimeout(hydrate, REFRESH_INTERVAL);
+      } catch (error) {
+        log.error(`Failed to fetch tokenRates, retrying in ${Math.round(RETRY_INTERVAL / 1000)} seconds`, error);
+        setTimeout(hydrate, RETRY_INTERVAL);
+      }
+    };
+    hydrate();
+    return () => {
+      active = false;
+    };
+  }, [chaindataProvider, tokens]);
+  const subscribe = useMulticastSubscription(createSubscription);
+  return subscribe;
+}
 function useSubscribeBalances() {
   const balanceModules = useBalanceModules();
   const chaindataProvider = useChaindata();
@@ -461,6 +484,19 @@ function useEvmNetwork(evmNetworkId, withTestnets) {
   return evmNetworkId ? evmNetworks[evmNetworkId] : undefined;
 }
 
+function useTokenRates() {
+  // keep db data up to date
+  useDbCacheSubscription("tokenRates");
+  const {
+    tokenRatesMap
+  } = useDbCache();
+  return tokenRatesMap;
+}
+function useTokenRate(tokenId) {
+  const tokenRates = useTokenRates();
+  return tokenId ? tokenRates[tokenId] : undefined;
+}
+
 function useTokens(withTestnets) {
   // keep db data up to date
   useDbCacheSubscription("tokens");
@@ -479,12 +515,7 @@ const useBalancesHydrate = withTestnets => {
   const chains = useChains(withTestnets);
   const evmNetworks = useEvmNetworks(withTestnets);
   const tokens = useTokens(withTestnets);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  // useDbCacheSubscription("tokenRates")
-  const {
-    tokenRatesMap: tokenRates
-  } = useDbCache();
+  const tokenRates = useTokenRates();
   return react.useMemo(() => ({
     chains,
     evmNetworks,
@@ -570,5 +601,6 @@ exports.useEvmNetworks = useEvmNetworks;
 exports.useMulticastSubscription = useMulticastSubscription;
 exports.useSubscriptions = useSubscriptions;
 exports.useToken = useToken;
+exports.useTokenRate = useTokenRate;
 exports.useTokenRates = useTokenRates;
 exports.useTokens = useTokens;

package/dist/talismn-balances-react.cjs.prod.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var balances = require('@talismn/balances');
+var tokenRates = require('@talismn/token-rates');
 var dexieReactHooks = require('dexie-react-hooks');
 var reactUse = require('react-use');
 var chaindataProviderExtension = require('@talismn/chaindata-provider-extension');
-var tokenRates = require('@talismn/token-rates');
 var anylogger = require('anylogger');
 var rxjs = require('rxjs');
 var chainConnector = require('@talismn/chain-connector');
@@ -62,25 +62,6 @@ function useChaindataProvider(options = {}) {
 }
 const [ChaindataProvider, useChaindata] = provideContext(useChaindataProvider);
 
-function useTokenRates(tokens) {
-  const generation = react.useRef(0);
-  const [tokenRates$1, setTokenRates] = react.useState({});
-  react.useEffect(() => {
-    if (!tokens) return;
-    if (Object.keys(tokens).length < 1) return;
-
-    // when we make a new request, we want to ignore any old requests which haven't yet completed
-    // otherwise we risk replacing the most recent data with older data
-    generation.current = (generation.current + 1) % Number.MAX_SAFE_INTEGER;
-    const thisGeneration = generation.current;
-    tokenRates.fetchTokenRates(tokens).then(tokenRates => {
-      if (thisGeneration !== generation.current) return;
-      setTokenRates(tokenRates);
-    });
-  }, [tokens]);
-  return tokenRates$1;
-}
-
 const filterNoTestnet = ({
   isTestnet
 }) => isTestnet === false;
@@ -97,13 +78,11 @@ const DEFAULT_VALUE = {
   evmNetworksWithoutTestnetsMap: {},
   tokensWithTestnetsMap: {},
   tokensWithoutTestnetsMap: {},
-  balances: [],
-  tokenRatesMap: {}
+  tokenRatesMap: {},
+  balances: []
 };
-const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, tokenRates) => {
-  if (!chainsMap || !evmNetworksMap || !tokensMap || !allBalances
-  // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  /* || !tokenRates */) return DEFAULT_VALUE;
+const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
+  if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
 
   // BEGIN: temp hack to indicate that
   //          - EVM GLMR is a mirror of substrate GLMR
@@ -131,6 +110,10 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
   const tokensWithoutTestnets = tokensWithTestnets.filter(filterNoTestnet).filter(token => token.chain && chainsWithoutTestnetsMap[token.chain.id] || token.evmNetwork && evmNetworksWithoutTestnetsMap[token.evmNetwork.id]);
   const tokensWithTestnetsMap = Object.fromEntries(tokensWithTestnets.map(token => [token.id, token]));
   const tokensWithoutTestnetsMap = Object.fromEntries(tokensWithoutTestnets.map(token => [token.id, token]));
+  const tokenRatesMap = Object.fromEntries(tokenRates.map(({
+    tokenId,
+    rates
+  }) => [tokenId, rates]));
 
   // return only balances for which we have a token
   const balances = allBalances.filter(b => tokensWithTestnetsMap[b.tokenId]);
@@ -147,8 +130,8 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
     evmNetworksWithoutTestnetsMap,
     tokensWithTestnetsMap,
     tokensWithoutTestnetsMap,
-    balances,
-    tokenRatesMap: tokenRates ?? {}
+    tokenRatesMap,
+    balances
   };
 };
 const useDbCacheProvider = ({
@@ -158,35 +141,30 @@ const useDbCacheProvider = ({
   const chainList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.chains(), [chaindataProvider]);
   const evmNetworkList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.evmNetworks(), [chaindataProvider]);
   const tokenList = dexieReactHooks.useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
+  const tokenRates$1 = dexieReactHooks.useLiveQuery(() => tokenRates.db.tokenRates.toArray(), []);
   const rawBalances = dexieReactHooks.useLiveQuery(() => balances.db.balances.toArray(), []);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  const tokenRates = useTokenRates();
   const [dbData, setDbData] = react.useState(DEFAULT_VALUE);
 
   // debounce every 500ms to prevent hammering UI with updates
   reactUse.useDebounce(() => {
-    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
-  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates, useTestnets]);
+    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
+  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates$1, useTestnets]);
   const refInitialized = react.useRef(false);
 
   // force an update as soon as all datasources are fetched, so UI can display data ASAP
   react.useEffect(() => {
-    if (!refInitialized.current && chainList && evmNetworkList && tokenList && rawBalances
-    // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-    // && tokenRates
-    ) {
-      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
+    if (!refInitialized.current && chainList && evmNetworkList && tokenList && tokenRates$1 && rawBalances) {
+      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
       refInitialized.current = true;
     }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates, useTestnets]);
+  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates$1, useTestnets]);
   return dbData;
 };
 const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.0.0-pr563-20230221230003",
+	version: "0.0.0-pr563-20230222052739",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -316,14 +294,14 @@ function useChainConnectorsProvider(options) {
 }
 const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
 
-const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeBalances()];
+const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeTokenRates(), useSubscribeBalances()];
 const [SubscriptionsProvider, useSubscriptions] = provideContext(useSubscriptionsProvider);
 
 /**
  * This hook is responsible for fetching the data used for balances and inserting it into the db.
  */
 const useDbCacheSubscription = subscribeTo => {
-  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeBalances] = useSubscriptions();
+  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances] = useSubscriptions();
   react.useEffect(() => {
     switch (subscribeTo) {
       case "chains":
@@ -332,10 +310,12 @@ const useDbCacheSubscription = subscribeTo => {
         return subscribeHydrateEvmNetworks();
       case "tokens":
         return subscribeHydrateTokens();
+      case "tokenRates":
+        return subscribeTokenRates();
       case "balances":
         return subscribeBalances();
     }
-  }, [subscribeBalances, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTo]);
+  }, [subscribeTo, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances]);
 };
 function useSubscribeChaindataHydrate(type) {
   const chaindata =
@@ -367,6 +347,49 @@ function useSubscribeChaindataHydrate(type) {
   const subscribe = useMulticastSubscription(createSubscription);
   return subscribe;
 }
+function useSubscribeTokenRates() {
+  const chaindataProvider = useChaindata();
+  const tokens = dexieReactHooks.useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
+  const generationRef = react.useRef(0);
+  const createSubscription = react.useCallback(() => {
+    if (!chaindataProvider) return;
+    if (!tokens) return;
+    if (Object.keys(tokens).length < 1) return;
+
+    // when we make a new request, we want to ignore any old requests which haven't yet completed
+    // otherwise we risk replacing the most recent data with older data
+    const generation = (generationRef.current + 1) % Number.MAX_SAFE_INTEGER;
+    generationRef.current = generation;
+    let active = true;
+    const REFRESH_INTERVAL = 300_000; // 300_000ms = 5 minutes
+    const RETRY_INTERVAL = 5_000; // 5_000ms = 5 seconds
+
+    const hydrate = async () => {
+      if (!active) return;
+      if (generationRef.current !== generation) return;
+      try {
+        const tokenRates$1 = await tokenRates.fetchTokenRates(tokens);
+        if (!active) return;
+        if (generationRef.current !== generation) return;
+        const putTokenRates = Object.entries(tokenRates$1).map(([tokenId, rates]) => ({
+          tokenId,
+          rates
+        }));
+        tokenRates.db.transaction("rw", tokenRates.db.tokenRates, async () => await tokenRates.db.tokenRates.bulkPut(putTokenRates));
+        setTimeout(hydrate, REFRESH_INTERVAL);
+      } catch (error) {
+        log.error(`Failed to fetch tokenRates, retrying in ${Math.round(RETRY_INTERVAL / 1000)} seconds`, error);
+        setTimeout(hydrate, RETRY_INTERVAL);
+      }
+    };
+    hydrate();
+    return () => {
+      active = false;
+    };
+  }, [chaindataProvider, tokens]);
+  const subscribe = useMulticastSubscription(createSubscription);
+  return subscribe;
+}
 function useSubscribeBalances() {
   const balanceModules = useBalanceModules();
   const chaindataProvider = useChaindata();
@@ -461,6 +484,19 @@ function useEvmNetwork(evmNetworkId, withTestnets) {
   return evmNetworkId ? evmNetworks[evmNetworkId] : undefined;
 }
 
+function useTokenRates() {
+  // keep db data up to date
+  useDbCacheSubscription("tokenRates");
+  const {
+    tokenRatesMap
+  } = useDbCache();
+  return tokenRatesMap;
+}
+function useTokenRate(tokenId) {
+  const tokenRates = useTokenRates();
+  return tokenId ? tokenRates[tokenId] : undefined;
+}
+
 function useTokens(withTestnets) {
   // keep db data up to date
   useDbCacheSubscription("tokens");
@@ -479,12 +515,7 @@ const useBalancesHydrate = withTestnets => {
   const chains = useChains(withTestnets);
   const evmNetworks = useEvmNetworks(withTestnets);
   const tokens = useTokens(withTestnets);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  // useDbCacheSubscription("tokenRates")
-  const {
-    tokenRatesMap: tokenRates
-  } = useDbCache();
+  const tokenRates = useTokenRates();
   return react.useMemo(() => ({
     chains,
     evmNetworks,
@@ -570,5 +601,6 @@ exports.useEvmNetworks = useEvmNetworks;
 exports.useMulticastSubscription = useMulticastSubscription;
 exports.useSubscriptions = useSubscriptions;
 exports.useToken = useToken;
+exports.useTokenRate = useTokenRate;
 exports.useTokenRates = useTokenRates;
 exports.useTokens = useTokens;

package/dist/talismn-balances-react.esm.js

@@ -1,10 +1,10 @@
 import { useContext, createContext, useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { db, balances, Balances } from '@talismn/balances';
+import { db as db$1, balances, Balances } from '@talismn/balances';
+import { db, fetchTokenRates } from '@talismn/token-rates';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { useDebounce } from 'react-use';
 import { ChaindataProviderExtension } from '@talismn/chaindata-provider-extension';
-import { fetchTokenRates } from '@talismn/token-rates';
 import anylogger from 'anylogger';
 import { Observable, defer, shareReplay } from 'rxjs';
 import { ChainConnector } from '@talismn/chain-connector';
@@ -54,25 +54,6 @@ function useChaindataProvider(options = {}) {
 }
 const [ChaindataProvider, useChaindata] = provideContext(useChaindataProvider);
 
-function useTokenRates(tokens) {
-  const generation = useRef(0);
-  const [tokenRates, setTokenRates] = useState({});
-  useEffect(() => {
-    if (!tokens) return;
-    if (Object.keys(tokens).length < 1) return;
-
-    // when we make a new request, we want to ignore any old requests which haven't yet completed
-    // otherwise we risk replacing the most recent data with older data
-    generation.current = (generation.current + 1) % Number.MAX_SAFE_INTEGER;
-    const thisGeneration = generation.current;
-    fetchTokenRates(tokens).then(tokenRates => {
-      if (thisGeneration !== generation.current) return;
-      setTokenRates(tokenRates);
-    });
-  }, [tokens]);
-  return tokenRates;
-}
-
 const filterNoTestnet = ({
   isTestnet
 }) => isTestnet === false;
@@ -89,13 +70,11 @@ const DEFAULT_VALUE = {
   evmNetworksWithoutTestnetsMap: {},
   tokensWithTestnetsMap: {},
   tokensWithoutTestnetsMap: {},
-  balances: [],
-  tokenRatesMap: {}
+  tokenRatesMap: {},
+  balances: []
 };
-const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, tokenRates) => {
-  if (!chainsMap || !evmNetworksMap || !tokensMap || !allBalances
-  // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  /* || !tokenRates */) return DEFAULT_VALUE;
+const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
+  if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
 
   // BEGIN: temp hack to indicate that
   //          - EVM GLMR is a mirror of substrate GLMR
@@ -123,6 +102,10 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
   const tokensWithoutTestnets = tokensWithTestnets.filter(filterNoTestnet).filter(token => token.chain && chainsWithoutTestnetsMap[token.chain.id] || token.evmNetwork && evmNetworksWithoutTestnetsMap[token.evmNetwork.id]);
   const tokensWithTestnetsMap = Object.fromEntries(tokensWithTestnets.map(token => [token.id, token]));
   const tokensWithoutTestnetsMap = Object.fromEntries(tokensWithoutTestnets.map(token => [token.id, token]));
+  const tokenRatesMap = Object.fromEntries(tokenRates.map(({
+    tokenId,
+    rates
+  }) => [tokenId, rates]));
 
   // return only balances for which we have a token
   const balances = allBalances.filter(b => tokensWithTestnetsMap[b.tokenId]);
@@ -139,8 +122,8 @@ const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, allBalances, t
     evmNetworksWithoutTestnetsMap,
     tokensWithTestnetsMap,
     tokensWithoutTestnetsMap,
-    balances,
-    tokenRatesMap: tokenRates ?? {}
+    tokenRatesMap,
+    balances
   };
 };
 const useDbCacheProvider = ({
@@ -150,25 +133,20 @@ const useDbCacheProvider = ({
   const chainList = useLiveQuery(() => chaindataProvider?.chains(), [chaindataProvider]);
   const evmNetworkList = useLiveQuery(() => chaindataProvider?.evmNetworks(), [chaindataProvider]);
   const tokenList = useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
-  const rawBalances = useLiveQuery(() => db.balances.toArray(), []);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  const tokenRates = useTokenRates();
+  const tokenRates = useLiveQuery(() => db.tokenRates.toArray(), []);
+  const rawBalances = useLiveQuery(() => db$1.balances.toArray(), []);
   const [dbData, setDbData] = useState(DEFAULT_VALUE);
 
   // debounce every 500ms to prevent hammering UI with updates
   useDebounce(() => {
-    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
+    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates, rawBalances));
   }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates, useTestnets]);
   const refInitialized = useRef(false);
 
   // force an update as soon as all datasources are fetched, so UI can display data ASAP
   useEffect(() => {
-    if (!refInitialized.current && chainList && evmNetworkList && tokenList && rawBalances
-    // TODO: Store tokenRates in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-    // && tokenRates
-    ) {
-      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
+    if (!refInitialized.current && chainList && evmNetworkList && tokenList && tokenRates && rawBalances) {
+      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates, rawBalances));
       refInitialized.current = true;
     }
   }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates, useTestnets]);
@@ -178,7 +156,7 @@ const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.0.0-pr563-20230221230003",
+	version: "0.0.0-pr563-20230222052739",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -308,14 +286,14 @@ function useChainConnectorsProvider(options) {
 }
 const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
 
-const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeBalances()];
+const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), useSubscribeTokenRates(), useSubscribeBalances()];
 const [SubscriptionsProvider, useSubscriptions] = provideContext(useSubscriptionsProvider);
 
 /**
  * This hook is responsible for fetching the data used for balances and inserting it into the db.
  */
 const useDbCacheSubscription = subscribeTo => {
-  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeBalances] = useSubscriptions();
+  const [subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances] = useSubscriptions();
   useEffect(() => {
     switch (subscribeTo) {
       case "chains":
@@ -324,10 +302,12 @@ const useDbCacheSubscription = subscribeTo => {
         return subscribeHydrateEvmNetworks();
       case "tokens":
         return subscribeHydrateTokens();
+      case "tokenRates":
+        return subscribeTokenRates();
       case "balances":
         return subscribeBalances();
     }
-  }, [subscribeBalances, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTo]);
+  }, [subscribeTo, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances]);
 };
 function useSubscribeChaindataHydrate(type) {
   const chaindata =
@@ -359,6 +339,49 @@ function useSubscribeChaindataHydrate(type) {
   const subscribe = useMulticastSubscription(createSubscription);
   return subscribe;
 }
+function useSubscribeTokenRates() {
+  const chaindataProvider = useChaindata();
+  const tokens = useLiveQuery(() => chaindataProvider?.tokens(), [chaindataProvider]);
+  const generationRef = useRef(0);
+  const createSubscription = useCallback(() => {
+    if (!chaindataProvider) return;
+    if (!tokens) return;
+    if (Object.keys(tokens).length < 1) return;
+
+    // when we make a new request, we want to ignore any old requests which haven't yet completed
+    // otherwise we risk replacing the most recent data with older data
+    const generation = (generationRef.current + 1) % Number.MAX_SAFE_INTEGER;
+    generationRef.current = generation;
+    let active = true;
+    const REFRESH_INTERVAL = 300_000; // 300_000ms = 5 minutes
+    const RETRY_INTERVAL = 5_000; // 5_000ms = 5 seconds
+
+    const hydrate = async () => {
+      if (!active) return;
+      if (generationRef.current !== generation) return;
+      try {
+        const tokenRates = await fetchTokenRates(tokens);
+        if (!active) return;
+        if (generationRef.current !== generation) return;
+        const putTokenRates = Object.entries(tokenRates).map(([tokenId, rates]) => ({
+          tokenId,
+          rates
+        }));
+        db.transaction("rw", db.tokenRates, async () => await db.tokenRates.bulkPut(putTokenRates));
+        setTimeout(hydrate, REFRESH_INTERVAL);
+      } catch (error) {
+        log.error(`Failed to fetch tokenRates, retrying in ${Math.round(RETRY_INTERVAL / 1000)} seconds`, error);
+        setTimeout(hydrate, RETRY_INTERVAL);
+      }
+    };
+    hydrate();
+    return () => {
+      active = false;
+    };
+  }, [chaindataProvider, tokens]);
+  const subscribe = useMulticastSubscription(createSubscription);
+  return subscribe;
+}
 function useSubscribeBalances() {
   const balanceModules = useBalanceModules();
   const chaindataProvider = useChaindata();
@@ -399,7 +422,7 @@ function useSubscribeBalances() {
           unsub.then(unsubscribe => unsubscribe());
 
           // set this subscription's balances in the store to status: cache
-          db.transaction("rw", db.balances, async () => await db.balances.filter(balance => {
+          db$1.transaction("rw", db$1.balances, async () => await db$1.balances.filter(balance => {
             if (balance.source !== balanceModule.type) return false;
             if (!Object.keys(addressesByModuleToken).includes(balance.tokenId)) return false;
             if (!addressesByModuleToken[balance.tokenId].includes(balance.address)) return false;
@@ -414,7 +437,7 @@ function useSubscribeBalances() {
           id,
           ...balance
         }));
-        db.transaction("rw", db.balances, async () => await db.balances.bulkPut(putBalances));
+        db$1.transaction("rw", db$1.balances, async () => await db$1.balances.bulkPut(putBalances));
       });
       return unsubscribe;
     });
@@ -453,6 +476,19 @@ function useEvmNetwork(evmNetworkId, withTestnets) {
   return evmNetworkId ? evmNetworks[evmNetworkId] : undefined;
 }
 
+function useTokenRates() {
+  // keep db data up to date
+  useDbCacheSubscription("tokenRates");
+  const {
+    tokenRatesMap
+  } = useDbCache();
+  return tokenRatesMap;
+}
+function useTokenRate(tokenId) {
+  const tokenRates = useTokenRates();
+  return tokenId ? tokenRates[tokenId] : undefined;
+}
+
 function useTokens(withTestnets) {
   // keep db data up to date
   useDbCacheSubscription("tokens");
@@ -471,12 +507,7 @@ const useBalancesHydrate = withTestnets => {
   const chains = useChains(withTestnets);
   const evmNetworks = useEvmNetworks(withTestnets);
   const tokens = useTokens(withTestnets);
-
-  // TODO: Store in a DB so that we don't have to wait for tokens before we can begin to fetch tokenRates
-  // useDbCacheSubscription("tokenRates")
-  const {
-    tokenRatesMap: tokenRates
-  } = useDbCache();
+  const tokenRates = useTokenRates();
   return useMemo(() => ({
     chains,
     evmNetworks,
@@ -538,4 +569,4 @@ const BalancesProvider = ({
   })
 });
 
-export { AllAddressesProvider, BalanceModulesProvider, BalancesProvider, ChainConnectorsProvider, ChaindataProvider, DbCacheProvider, SubscriptionsProvider, createMulticastSubscription, provideContext, useAllAddresses, useBalanceModules, useBalances, useBalancesHydrate, useChain, useChainConnectors, useChaindata, useChains, useDbCache, useDbCacheSubscription, useEvmNetwork, useEvmNetworks, useMulticastSubscription, useSubscriptions, useToken, useTokenRates, useTokens };
+export { AllAddressesProvider, BalanceModulesProvider, BalancesProvider, ChainConnectorsProvider, ChaindataProvider, DbCacheProvider, SubscriptionsProvider, createMulticastSubscription, provideContext, useAllAddresses, useBalanceModules, useBalances, useBalancesHydrate, useChain, useChainConnectors, useChaindata, useChains, useDbCache, useDbCacheSubscription, useEvmNetwork, useEvmNetworks, useMulticastSubscription, useSubscriptions, useToken, useTokenRate, useTokenRates, useTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talismn/balances-react",
-  "version": "0.0.0-pr563-20230221230003",
+  "version": "0.0.0-pr563-20230222052739",
   "author": "Talisman",
   "homepage": "https://talisman.xyz",
   "license": "UNLICENSED",
@@ -26,12 +26,12 @@
     "clean": "rm -rf dist && rm -rf .turbo rm -rf node_modules"
   },
   "dependencies": {
-    "@talismn/balances": "^0.0.0-pr563-20230221230003",
+    "@talismn/balances": "^0.0.0-pr563-20230222052739",
     "@talismn/chain-connector": "^0.4.2",
     "@talismn/chain-connector-evm": "^0.4.2",
     "@talismn/chaindata-provider": "^0.4.2",
     "@talismn/chaindata-provider-extension": "^0.4.2",
-    "@talismn/token-rates": "^0.1.14",
+    "@talismn/token-rates": "^0.0.0-pr563-20230222052739",
     "anylogger": "^1.0.11",
     "dexie": "^3.2.2",
     "dexie-react-hooks": "^1.1.1",