@talismn/balances-react 0.0.0-pr593-20230303151944 → 0.0.0-pr595-20230305153032

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

@@ -1,162 +1,16 @@
-import { useContext, createContext, useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { db as db$1, balances, Balances } from '@talismn/balances';
-import { db, fetchTokenRates } from '@talismn/token-rates';
+import { Balances, db, balances } from '@talismn/balances';
+import { ChainConnector } from '@talismn/chain-connector';
+import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
 import { useLiveQuery } from 'dexie-react-hooks';
+import { useState, useEffect, useRef } from 'react';
 import { useDebounce } from 'react-use';
-import { ChaindataProviderExtension } from '@talismn/chaindata-provider-extension';
 import anylogger from 'anylogger';
-import { Observable, defer, shareReplay } from 'rxjs';
-import { ChainConnector } from '@talismn/chain-connector';
-import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
-
-const provideContext = useProviderContext => {
-  // automatic typing based on our hook's return type
-
-  const Context = /*#__PURE__*/createContext({
-    __provideContextInternalDefaultValue: true
-  });
-  const Provider = ({
-    children,
-    ...props
-  }) => {
-    const ctx = useProviderContext(props);
-    return /*#__PURE__*/jsx(Context.Provider, {
-      value: ctx,
-      children: children
-    });
-  };
-  const useProvidedContext = () => {
-    const context = useContext(Context);
-    if (typeof context === "object" && context && "__provideContextInternalDefaultValue" in context) throw new Error("This hook requires a provider to be present above it in the tree");
-    return context;
-  };
-  const result = [Provider, useProvidedContext];
-  return result;
-};
-
-const useAllAddressesProvider = () => useState([]);
-const [AllAddressesProvider, useAllAddresses] = provideContext(useAllAddressesProvider);
-
-const useBalanceModulesProvider = ({
-  balanceModules
-}) => balanceModules;
-const [BalanceModulesProvider, useBalanceModules] = provideContext(useBalanceModulesProvider);
-
-function useChaindataProvider(options = {}) {
-  const [chaindata, setChaindata] = useState();
-  useEffect(() => {
-    setChaindata(new ChaindataProviderExtension({
-      onfinalityApiKey: options.onfinalityApiKey
-    }));
-  }, [options.onfinalityApiKey]);
-  return chaindata;
-}
-const [ChaindataProvider, useChaindata] = provideContext(useChaindataProvider);
-
-const filterNoTestnet = ({
-  isTestnet
-}) => isTestnet === false;
-const DEFAULT_VALUE = {
-  chainsWithTestnets: [],
-  chainsWithoutTestnets: [],
-  evmNetworksWithTestnets: [],
-  evmNetworksWithoutTestnets: [],
-  tokensWithTestnets: [],
-  tokensWithoutTestnets: [],
-  chainsWithTestnetsMap: {},
-  chainsWithoutTestnetsMap: {},
-  evmNetworksWithTestnetsMap: {},
-  evmNetworksWithoutTestnetsMap: {},
-  tokensWithTestnetsMap: {},
-  tokensWithoutTestnetsMap: {},
-  tokenRatesMap: {},
-  balances: []
-};
-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
-  //          - EVM MOVR is a mirror of substrate MOVR
-  //          - EVM DEV is a mirror of substrate DEV
-  //          - EVM ACA is a mirror of substrate ACA
-  const mirrorTokenIds = {
-    "1284-evm-native-glmr": "moonbeam-substrate-native-glmr",
-    "1285-evm-native-movr": "moonriver-substrate-native-movr",
-    "1287-evm-native-dev": "moonbase-alpha-testnet-substrate-native-dev",
-    "787-evm-native-aca": "acala-substrate-native-aca"
-  };
-  Object.entries(mirrorTokenIds).filter(([mirrorToken]) => tokensMap[mirrorToken]).forEach(([mirrorToken, mirrorOf]) => tokensMap[mirrorToken].mirrorOf = mirrorOf);
-  // END: temp hack
-
-  const chainsWithTestnets = Object.values(chainsMap);
-  const chainsWithoutTestnets = chainsWithTestnets.filter(filterNoTestnet);
-  const chainsWithoutTestnetsMap = Object.fromEntries(chainsWithoutTestnets.map(network => [network.id, network]));
-  const evmNetworksWithTestnets = Object.values(evmNetworksMap);
-  const evmNetworksWithoutTestnets = evmNetworksWithTestnets.filter(filterNoTestnet);
-  const evmNetworksWithoutTestnetsMap = Object.fromEntries(evmNetworksWithoutTestnets.map(network => [network.id, network]));
-
-  // ensure that we have corresponding network for each token
-  const tokensWithTestnets = Object.values(tokensMap).filter(token => token.chain && chainsMap[token.chain.id] || token.evmNetwork && evmNetworksMap[token.evmNetwork.id]);
-  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]);
-  return {
-    chainsWithTestnets,
-    chainsWithoutTestnets,
-    evmNetworksWithTestnets,
-    evmNetworksWithoutTestnets,
-    tokensWithTestnets,
-    tokensWithoutTestnets,
-    chainsWithTestnetsMap: chainsMap,
-    chainsWithoutTestnetsMap,
-    evmNetworksWithTestnetsMap: evmNetworksMap,
-    evmNetworksWithoutTestnetsMap,
-    tokensWithTestnetsMap,
-    tokensWithoutTestnetsMap,
-    tokenRatesMap,
-    balances
-  };
-};
-const useDbCacheProvider = ({
-  useTestnets = false
-}) => {
-  const chaindataProvider = useChaindata();
-  const chainList = useLiveQuery(() => chaindataProvider === null || chaindataProvider === void 0 ? void 0 : chaindataProvider.chains(), [chaindataProvider]);
-  const evmNetworkList = useLiveQuery(() => chaindataProvider === null || chaindataProvider === void 0 ? void 0 : chaindataProvider.evmNetworks(), [chaindataProvider]);
-  const tokenList = useLiveQuery(() => chaindataProvider === null || chaindataProvider === void 0 ? void 0 : chaindataProvider.tokens(), [chaindataProvider]);
-  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, 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 && tokenRates && rawBalances) {
-      setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates, rawBalances));
-      refInitialized.current = true;
-    }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates, useTestnets]);
-  return dbData;
-};
-const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
+import { ChaindataProviderExtension } from '@talismn/chaindata-provider-extension';
+import { fetchTokenRates } from '@talismn/token-rates';
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.0.0-pr593-20230303151944",
+	version: "0.0.0-pr595-20230305153032",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -191,8 +45,7 @@ var packageJson = {
 		anylogger: "^1.0.11",
 		dexie: "^3.2.3",
 		"dexie-react-hooks": "^1.1.1",
-		"react-use": "^17.4.0",
-		rxjs: "^7.8.0"
+		"react-use": "^17.4.0"
 	},
 	devDependencies: {
 		"@talismn/eslint-config": "workspace:^",
@@ -219,312 +72,139 @@ var packageJson = {
 
 var log = anylogger(packageJson.name);
 
-/**
- * Creates a subscription function that can be used to subscribe to a multicast observable created from an upstream source.
- *
- * An example of when this is useful is when we want to subscribe to some data from multiple components, but we only want
- * to actively keep that data hydrated when at least one component is subscribed to it.
- *
- * When the first component subscribes, the `upstream` function will be called. It should then set up a subscription and return a teardown function.
- * When subsequent components subscribe, they will be added to the existing subscription.
- * When the last component unsubscribes, the teardown function returned from the `upstream` function will be called.
- *
- * @param upstream A function that takes a "next" callback function as an argument, and returns either an unsubscribe function or void.
- * @returns A subscription function that can be used to subscribe to the multicast observable.
- */
-const useMulticastSubscription = upstream => {
-  const subscribe = useMemo(() => createMulticastSubscription(upstream), [upstream]);
-  return subscribe;
-};
-const createMulticastSubscription = upstream => {
-  // Create an upstream observable using the provided function.
-  const upstreamObservable = new Observable(subscriber => {
-    const unsubscribe = upstream(val => subscriber.next(val));
-    return () => {
-      typeof unsubscribe === "function" && unsubscribe();
-    };
-  });
-
-  // Create a multicast observable from the upstream observable, using the shareReplay operator.
-  const multicastObservable = defer(() => upstreamObservable).pipe(shareReplay({
-    bufferSize: 1,
-    refCount: true
-  }));
+// TODO: Allow user to call useChaindata from multiple places
+function useChaindata(options = {}) {
+  const [chaindataProvider, setChaindataProvider] = useState(null);
 
-  // Create a subscription function that subscribes to the multicast observable and returns an unsubscribe function.
-  const subscribe = callback => {
-    const subscription = multicastObservable.subscribe(callback);
-    const unsubscribe = () => subscription.unsubscribe();
-    return unsubscribe;
-  };
-  return subscribe;
-};
-
-function useChainConnectorsProvider(options) {
-  // chaindata dependency
-  const chaindata = useChaindata();
-
-  // substrate connector
-  const [substrate, setSubstrate] = useState();
-  useEffect(() => {
-    if (!chaindata) return;
-    setSubstrate(new ChainConnector(chaindata));
-  }, [chaindata]);
-
-  // evm connector
-  const [evm, setEvm] = useState();
+  // this number is incremented each time the chaindataProvider has fetched new data
+  const [generation, setGeneration] = useState(0);
   useEffect(() => {
-    if (!chaindata) return;
-    setEvm(new ChainConnectorEvm(chaindata, {
+    const chaindataProvider = new ChaindataProviderExtension({
       onfinalityApiKey: options.onfinalityApiKey
-    }));
-  }, [chaindata, options.onfinalityApiKey]);
-  return useMemo(() => ({
-    substrate,
-    evm
-  }), [substrate, evm]);
-}
-const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
-
-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, subscribeTokenRates, subscribeBalances] = useSubscriptions();
-  useEffect(() => {
-    switch (subscribeTo) {
-      case "chains":
-        return subscribeHydrateChains();
-      case "evmNetworks":
-        return subscribeHydrateEvmNetworks();
-      case "tokens":
-        return subscribeHydrateTokens();
-      case "tokenRates":
-        return subscribeTokenRates();
-      case "balances":
-        return subscribeBalances();
-    }
-  }, [subscribeTo, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTokenRates, subscribeBalances]);
-};
-function useSubscribeChaindataHydrate(type) {
-  const chaindata =
-  // cheeky hack to give us access to the hydrate methods
-  useChaindata();
-  const createSubscription = useCallback(() => {
-    if (!chaindata) return;
-    let active = true;
-    const interval = 300_000; // 300_000ms = 300s = 5 minutes
-
+    });
+    let shouldHydrate = true;
+    const timer = 300_000; // 300_000ms = 300s = 5 minutes
     const hydrate = async () => {
-      if (!active) return;
+      if (!shouldHydrate) return;
       try {
-        if (type === "chains") await chaindata.hydrateChains();
-        if (type === "evmNetworks") await chaindata.hydrateEvmNetworks();
-        if (type === "tokens") await chaindata.hydrateTokens();
-        setTimeout(hydrate, interval);
+        const updated = await chaindataProvider.hydrate();
+        if (updated) setGeneration(generation => (generation + 1) % Number.MAX_SAFE_INTEGER);
+        setTimeout(hydrate, timer);
       } catch (error) {
         const retryTimeout = 5_000; // 5_000ms = 5 seconds
         log.error(`Failed to fetch chaindata, retrying in ${Math.round(retryTimeout / 1000)} seconds`, error);
         setTimeout(hydrate, retryTimeout);
       }
     };
+    setChaindataProvider(chaindataProvider);
     hydrate();
     return () => {
-      active = false;
-    };
-  }, [chaindata, type]);
-  const subscribe = useMulticastSubscription(createSubscription);
-  return subscribe;
-}
-function useSubscribeTokenRates() {
-  const chaindataProvider = useChaindata();
-  const tokens = useLiveQuery(() => chaindataProvider === null || chaindataProvider === void 0 ? void 0 : 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;
+      shouldHydrate = false;
     };
-  }, [chaindataProvider, tokens]);
-  const subscribe = useMulticastSubscription(createSubscription);
-  return subscribe;
+  }, [options.onfinalityApiKey]);
+  if (chaindataProvider) chaindataProvider.generation = generation;
+  return chaindataProvider;
 }
-function useSubscribeBalances() {
-  const balanceModules = useBalanceModules();
-  const chaindataProvider = useChaindata();
-  const chainConnectors = useChainConnectors();
-  const [allAddresses] = useAllAddresses();
-  const tokens = useLiveQuery(() => chaindataProvider === null || chaindataProvider === void 0 ? void 0 : chaindataProvider.tokens(), [chaindataProvider]);
-  const tokenIds = useMemo(() => Object.values(tokens ?? {}).map(({
-    id
-  }) => id), [tokens]);
-  const addressesByToken = useMemo(() => Object.fromEntries(tokenIds.map(tokenId => [tokenId, allAddresses])), [allAddresses, tokenIds]);
-  const generationRef = useRef(0);
-  const createSubscription = useCallback(() => {
-    if (!chainConnectors.substrate) return;
-    if (!chainConnectors.evm) return;
-    if (!chaindataProvider) return;
-    const generation = (generationRef.current + 1) % Number.MAX_SAFE_INTEGER;
-    generationRef.current = generation;
-    const unsubs = balanceModules.map(balanceModule => {
-      // filter out tokens to only include those which this module knows how to fetch balances for
-      const moduleTokenIds = Object.values(tokens ?? {}).filter(({
-        type
-      }) => type === balanceModule.type).map(({
-        id
-      }) => id);
-      const addressesByModuleToken = Object.fromEntries(Object.entries(addressesByToken).filter(([tokenId]) => moduleTokenIds.includes(tokenId)));
-      const subscribe = createMulticastSubscription(next => {
-        const unsub = balances(balanceModule, chainConnectors, chaindataProvider, addressesByModuleToken, (error, balances) => {
-          // log errors
-          if (error) return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
-          // ignore empty balance responses
-          if (!balances) return;
-          // ignore balances from old subscriptions which are still in the process of unsubscribing
-          if (generationRef.current !== generation) return;
-          next(balances);
-        });
-        return () => {
-          // unsubscribe from upstream
-          unsub.then(unsubscribe => unsubscribe());
-
-          // set this subscription's balances in the store to status: cache
-          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;
-            return true;
-          }).modify({
-            status: "cache"
-          }));
-        };
-      });
-      const unsubscribe = subscribe(balances => {
-        const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
-          id,
-          ...balance
-        }));
-        db$1.transaction("rw", db$1.balances, async () => await db$1.balances.bulkPut(putBalances));
-      });
-      return unsubscribe;
+function useChains(chaindata) {
+  const [chains, setChains] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.chains().then(chains => {
+      if (thisGeneration !== chaindata.generation) return;
+      setChains(chains);
     });
-    const unsubscribeAll = () => unsubs.forEach(unsub => unsub());
-    return unsubscribeAll;
-  }, [addressesByToken, balanceModules, chainConnectors, chaindataProvider, tokens]);
-  const subscribe = useMulticastSubscription(createSubscription);
-  return subscribe;
-}
-
-function useChains(withTestnets) {
-  // keep db data up to date
-  useDbCacheSubscription("chains");
-  const {
-    chainsWithTestnetsMap,
-    chainsWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? chainsWithTestnetsMap : chainsWithoutTestnetsMap;
+  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+  return chains || {};
 }
-function useChain(chainId, withTestnets) {
-  const chains = useChains(withTestnets);
-  return chainId ? chains[chainId] : undefined;
+function useChain(chaindata, chainId) {
+  const [chain, setChain] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!chainId) return;
+    chaindata.getChain(chainId).then(setChain);
+  }, [chainId, chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+  return chain;
 }
-
-function useEvmNetworks(withTestnets) {
-  // keep db data up to date
-  useDbCacheSubscription("evmNetworks");
-  const {
-    evmNetworksWithTestnetsMap,
-    evmNetworksWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? evmNetworksWithTestnetsMap : evmNetworksWithoutTestnetsMap;
+function useEvmNetworks(chaindata) {
+  const [evmNetworks, setEvmNetworks] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.evmNetworks().then(evmNetworks => {
+      if (thisGeneration !== chaindata.generation) return;
+      setEvmNetworks(evmNetworks);
+    });
+  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+  return evmNetworks || {};
 }
-function useEvmNetwork(evmNetworkId, withTestnets) {
-  const evmNetworks = useEvmNetworks(withTestnets);
-  return evmNetworkId ? evmNetworks[evmNetworkId] : undefined;
+function useEvmNetwork(chaindata, evmNetworkId) {
+  const [evmNetwork, setEvmNetwork] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!evmNetworkId) return;
+    chaindata.getEvmNetwork(evmNetworkId).then(setEvmNetwork);
+  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation, evmNetworkId]);
+  return evmNetwork;
 }
-
-function useTokenRates() {
-  // keep db data up to date
-  useDbCacheSubscription("tokenRates");
-  const {
-    tokenRatesMap
-  } = useDbCache();
-  return tokenRatesMap;
+function useTokens(chaindata) {
+  const [tokens, setTokens] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.tokens().then(tokens => {
+      if (thisGeneration !== chaindata.generation) return;
+      setTokens(tokens);
+    });
+  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+  return tokens || {};
 }
-function useTokenRate(tokenId) {
-  const tokenRates = useTokenRates();
-  return tokenId ? tokenRates[tokenId] : undefined;
+function useToken(chaindata, tokenId) {
+  const [token, setToken] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!tokenId) return;
+    chaindata.getToken(tokenId).then(setToken);
+  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation, tokenId]);
+  return token;
 }
 
-function useTokens(withTestnets) {
-  // keep db data up to date
-  useDbCacheSubscription("tokens");
-  const {
-    tokensWithTestnetsMap,
-    tokensWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? tokensWithTestnetsMap : tokensWithoutTestnetsMap;
-}
-function useToken(tokenId, withTestnets) {
-  const tokens = useTokens(withTestnets);
-  return tokenId ? tokens[tokenId] : undefined;
-}
+function useTokenRates(tokens) {
+  const generation = useRef(0);
+  const [tokenRates, setTokenRates] = useState();
+  useEffect(() => {
+    if (!tokens) return;
+    if (Object.keys(tokens).length < 1) return;
 
-const useBalancesHydrate = withTestnets => {
-  const chains = useChains(withTestnets);
-  const evmNetworks = useEvmNetworks(withTestnets);
-  const tokens = useTokens(withTestnets);
-  const tokenRates = useTokenRates();
-  return useMemo(() => ({
-    chains,
-    evmNetworks,
-    tokens,
-    tokenRates
-  }), [chains, evmNetworks, tokens, tokenRates]);
-};
+    // 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 || {};
+}
 
-function useBalances(addressesByToken) {
-  // keep db data up to date
-  useDbCacheSubscription("balances");
-  const balanceModules = useBalanceModules();
-  const {
-    balances
-  } = useDbCache();
-  const hydrate = useBalancesHydrate();
-  return useMemo(() => new Balances(balances.filter(balance => {
+// TODO: Add the equivalent functionalty of `useDbCache` directly to this library.
+//
+//       How it will work:
+//
+//       useChains/useEvmNetworks/useTokens/useTokenRates will all make use of a
+//       useCachedDb hook, which internally subscribes to all of the db tables
+//       for everything, and then filters the subscribed data based on what params
+//       the caller of useChains/useTokens/etc has provided.
+function useBalances(
+// TODO: Make this array of BalanceModules more type-safe
+balanceModules, chaindataProvider, addressesByToken, options = {}) {
+  useBalancesSubscriptions(balanceModules, chaindataProvider, addressesByToken, options);
+  const chains = useChains(chaindataProvider);
+  const evmNetworks = useEvmNetworks(chaindataProvider);
+  const tokens = useTokens(chaindataProvider);
+  const tokenRates = useTokenRates(tokens);
+  const balances = useLiveQuery(async () => new Balances(await db.balances.filter(balance => {
     // check that this balance is included in our queried balance modules
     if (!balanceModules.map(({
       type
@@ -541,32 +221,137 @@ function useBalances(addressesByToken) {
 
     // keep this balance
     return true;
-  }),
+  }).toArray(),
   // hydrate balance chains, evmNetworks, tokens and tokenRates
-  hydrate), [balances, hydrate, balanceModules, addressesByToken]);
+  {
+    chains,
+    evmNetworks,
+    tokens,
+    tokenRates
+  }), [balanceModules, addressesByToken, chains, evmNetworks, tokens, tokenRates]);
+
+  // debounce every 100ms to prevent hammering UI with updates
+  const [debouncedBalances, setDebouncedBalances] = useState(balances);
+  useDebounce(() => balances && setDebouncedBalances(balances), 100, [balances]);
+  return debouncedBalances;
 }
 
-const BalancesProvider = ({
-  balanceModules,
-  onfinalityApiKey,
-  useTestnets,
-  children
-}) => /*#__PURE__*/jsx(ChaindataProvider, {
-  onfinalityApiKey: onfinalityApiKey,
-  children: /*#__PURE__*/jsx(ChainConnectorsProvider, {
-    onfinalityApiKey: onfinalityApiKey,
-    children: /*#__PURE__*/jsx(AllAddressesProvider, {
-      children: /*#__PURE__*/jsx(BalanceModulesProvider, {
-        balanceModules: balanceModules,
-        children: /*#__PURE__*/jsx(DbCacheProvider, {
-          useTestnets: useTestnets,
-          children: /*#__PURE__*/jsx(SubscriptionsProvider, {
-            children: children
-          })
-        })
-      })
-    })
-  })
-});
+// TODO: Turn into react context
+const subscriptions = {};
+
+// This hook is responsible for allowing us to call useBalances
+// from multiple components, without setting up unnecessary
+// balance subscriptions
+function useBalancesSubscriptions(
+// TODO: Make this array of BalanceModules more type-safe
+balanceModules, chaindataProvider, addressesByToken, options = {}) {
+  // const subscriptions = useRef<
+  //   Record<string, { unsub: Promise<() => void>; refcount: number; generation: number }>
+  // >({})
+
+  const addSubscription = (key, balanceModule, chainConnectors, chaindataProvider, addressesByToken) => {
+    // create subscription if it doesn't already exist
+    if (!subscriptions[key] || subscriptions[key].refcount === 0) {
+      var _subscriptions$key;
+      const generation = ((((_subscriptions$key = subscriptions[key]) === null || _subscriptions$key === void 0 ? void 0 : _subscriptions$key.generation) || 0) + 1) % Number.MAX_SAFE_INTEGER;
+      const unsub = balances(balanceModule, chainConnectors, chaindataProvider, addressesByToken, (error, balances) => {
+        if (error) return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
+        if (!balances) return;
+
+        // ignore balances from old subscriptions which are still in the process of unsubscribing
+        if (subscriptions[key].generation !== generation) return;
+        const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
+          id,
+          ...balance
+        }));
+        db.transaction("rw", db.balances, async () => await db.balances.bulkPut(putBalances));
+      });
+      subscriptions[key] = {
+        unsub,
+        refcount: 0,
+        generation
+      };
+    }
+
+    // bump up the refcount by 1
+    subscriptions[key].refcount += 1;
+  };
+  const removeSubscription = (key, balanceModule, addressesByToken) => {
+    // ignore dead subscriptions
+    if (!subscriptions[key] || subscriptions[key].refcount === 0) return;
+
+    // drop the refcount by one
+    subscriptions[key].refcount -= 1;
+
+    // unsubscribe if refcount is now 0 (nobody wants this subcription anymore)
+    if (subscriptions[key].refcount < 1) {
+      // remove subscription
+      subscriptions[key].unsub.then(unsub => unsub());
+      delete subscriptions[key];
+
+      // set this subscription's balances in the store to status: cache
+      db.transaction("rw", db.balances, async () => await db.balances.filter(balance => {
+        if (balance.source !== balanceModule.type) return false;
+        if (!Object.keys(addressesByToken).includes(balance.tokenId)) return false;
+        if (!addressesByToken[balance.tokenId].includes(balance.address)) return false;
+        return true;
+      }).modify({
+        status: "cache"
+      }));
+    }
+  };
+  const chainConnector = useChainConnector(chaindataProvider);
+  const chainConnectorEvm = useChainConnectorEvm(chaindataProvider, options);
+  const tokens = useTokens(chaindataProvider);
+  useEffect(() => {
+    if (chainConnector === null) return;
+    if (chainConnectorEvm === null) return;
+    if (chaindataProvider === null) return;
+    if (addressesByToken === null) return;
+    const unsubs = balanceModules.map(balanceModule => {
+      const subscriptionKey = `${balanceModule.type}-${JSON.stringify(addressesByToken)}`;
+
+      // filter out tokens to only include those which this module knows how to fetch balances for
+      const moduleTokenIds = Object.values(tokens).filter(({
+        type
+      }) => type === balanceModule.type).map(({
+        id
+      }) => id);
+      const addressesByModuleToken = Object.fromEntries(Object.entries(addressesByToken).filter(([tokenId]) => moduleTokenIds.includes(tokenId)));
+
+      // add balance subscription for this module
+      addSubscription(subscriptionKey, balanceModule, {
+        substrate: chainConnector,
+        evm: chainConnectorEvm
+      }, chaindataProvider, addressesByModuleToken);
+
+      // return an unsub method, to be called when this effect unmounts
+      return () => removeSubscription(subscriptionKey, balanceModule, addressesByToken);
+    });
+    const unsubAll = () => unsubs.forEach(unsub => unsub());
+    return unsubAll;
+  }, [addressesByToken, balanceModules, chainConnector, chainConnectorEvm, chaindataProvider, tokens]);
+}
+
+// TODO: Allow advanced users of this library to provide their own chain connector
+function useChainConnector(chaindataProvider) {
+  const [chainConnector, setChainConnector] = useState(null);
+  useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnector(new ChainConnector(chaindataProvider));
+  }, [chaindataProvider]);
+  return chainConnector;
+}
+// TODO: Allow advanced users of this library to provide their own chain connector
+function useChainConnectorEvm(chaindataProvider, options = {}) {
+  const [chainConnectorEvm, setChainConnectorEvm] = useState(null);
+  useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnectorEvm(new ChainConnectorEvm(chaindataProvider, {
+      onfinalityApiKey: options.onfinalityApiKey
+    }));
+  }, [chaindataProvider, options.onfinalityApiKey]);
+  return chainConnectorEvm;
+}
 
-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 };
+export { useBalances, useChain, useChaindata, useChains, useEvmNetwork, useEvmNetworks, useToken, useTokenRates, useTokens };