@talismn/balances-react 0.0.0-pr557-20230216040942 → 0.0.0-pr563-20230221230003

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

@@ -1,16 +1,184 @@
-import { Balances, db, balances } from '@talismn/balances';
-import { ChainConnector } from '@talismn/chain-connector';
-import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
+import { useContext, createContext, useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { db, balances, Balances } from '@talismn/balances';
 import { useLiveQuery } from 'dexie-react-hooks';
-import { useState, useEffect, useRef } from 'react';
 import { useDebounce } from 'react-use';
-import anylogger from 'anylogger';
 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';
+import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
+
+const provideContext = useProviderContext => {
+  // automatic typing based on our hook's return type
+
+  const Context = /*#__PURE__*/createContext({
+    __provideContextInteralDefaultValue: 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 && "__provideContextInteralDefaultValue" 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);
+
+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;
+const DEFAULT_VALUE = {
+  chainsWithTestnets: [],
+  chainsWithoutTestnets: [],
+  evmNetworksWithTestnets: [],
+  evmNetworksWithoutTestnets: [],
+  tokensWithTestnets: [],
+  tokensWithoutTestnets: [],
+  chainsWithTestnetsMap: {},
+  chainsWithoutTestnetsMap: {},
+  evmNetworksWithTestnetsMap: {},
+  evmNetworksWithoutTestnetsMap: {},
+  tokensWithTestnetsMap: {},
+  tokensWithoutTestnetsMap: {},
+  balances: [],
+  tokenRatesMap: {}
+};
+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;
+
+  // 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]));
+
+  // 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,
+    balances,
+    tokenRatesMap: tokenRates ?? {}
+  };
+};
+const useDbCacheProvider = ({
+  useTestnets = false
+}) => {
+  const chaindataProvider = useChaindata();
+  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 [dbData, setDbData] = useState(DEFAULT_VALUE);
+
+  // debounce every 500ms to prevent hammering UI with updates
+  useDebounce(() => {
+    setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, rawBalances, tokenRates));
+  }, 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));
+      refInitialized.current = true;
+    }
+  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates, useTestnets]);
+  return dbData;
+};
+const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.0.0-pr557-20230216040942",
+	version: "0.0.0-pr563-20230221230003",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -45,7 +213,8 @@ var packageJson = {
 		anylogger: "^1.0.11",
 		dexie: "^3.2.2",
 		"dexie-react-hooks": "^1.1.1",
-		"react-use": "^17.4.0"
+		"react-use": "^17.4.0",
+		rxjs: "^7.8.0"
 	},
 	devDependencies: {
 		"@talismn/eslint-config": "workspace:^",
@@ -72,139 +241,259 @@ var packageJson = {
 
 var log = anylogger(packageJson.name);
 
-// TODO: Allow user to call useChaindata from multiple places
-function useChaindata(options = {}) {
-  const [chaindataProvider, setChaindataProvider] = useState(null);
+/**
+ * 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
+  }));
+
+  // 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]);
 
-  // this number is incremented each time the chaindataProvider has fetched new data
-  const [generation, setGeneration] = useState(0);
+  // evm connector
+  const [evm, setEvm] = useState();
   useEffect(() => {
-    const chaindataProvider = new ChaindataProviderExtension({
+    if (!chaindata) return;
+    setEvm(new ChainConnectorEvm(chaindata, {
       onfinalityApiKey: options.onfinalityApiKey
-    });
-    let shouldHydrate = true;
-    const timer = 300_000; // 300_000ms = 300s = 5 minutes
+    }));
+  }, [chaindata, options.onfinalityApiKey]);
+  return useMemo(() => ({
+    substrate,
+    evm
+  }), [substrate, evm]);
+}
+const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
+
+const useSubscriptionsProvider = () => [useSubscribeChaindataHydrate("chains"), useSubscribeChaindataHydrate("evmNetworks"), useSubscribeChaindataHydrate("tokens"), 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();
+  useEffect(() => {
+    switch (subscribeTo) {
+      case "chains":
+        return subscribeHydrateChains();
+      case "evmNetworks":
+        return subscribeHydrateEvmNetworks();
+      case "tokens":
+        return subscribeHydrateTokens();
+      case "balances":
+        return subscribeBalances();
+    }
+  }, [subscribeBalances, subscribeHydrateChains, subscribeHydrateEvmNetworks, subscribeHydrateTokens, subscribeTo]);
+};
+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
+
     const hydrate = async () => {
-      if (!shouldHydrate) return;
+      if (!active) return;
       try {
-        const updated = await chaindataProvider.hydrate();
-        if (updated) setGeneration(generation => (generation + 1) % Number.MAX_SAFE_INTEGER);
-        setTimeout(hydrate, timer);
+        if (type === "chains") await chaindata.hydrateChains();
+        if (type === "evmNetworks") await chaindata.hydrateEvmNetworks();
+        if (type === "tokens") await chaindata.hydrateTokens();
+        setTimeout(hydrate, interval);
       } 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 () => {
-      shouldHydrate = false;
+      active = false;
     };
-  }, [options.onfinalityApiKey]);
-  if (chaindataProvider) chaindataProvider.generation = generation;
-  return chaindataProvider;
+  }, [chaindata, type]);
+  const subscribe = useMulticastSubscription(createSubscription);
+  return subscribe;
 }
-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);
+function useSubscribeBalances() {
+  const balanceModules = useBalanceModules();
+  const chaindataProvider = useChaindata();
+  const chainConnectors = useChainConnectors();
+  const [allAddresses] = useAllAddresses();
+  const tokens = useLiveQuery(() => 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.transaction("rw", db.balances, async () => await db.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.transaction("rw", db.balances, async () => await db.balances.bulkPut(putBalances));
+      });
+      return unsubscribe;
     });
-  }, [chaindata, chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
-  return chains || {};
+    const unsubscribeAll = () => unsubs.forEach(unsub => unsub());
+    return unsubscribeAll;
+  }, [addressesByToken, balanceModules, chainConnectors, chaindataProvider, tokens]);
+  const subscribe = useMulticastSubscription(createSubscription);
+  return subscribe;
 }
-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 useChains(withTestnets) {
+  // keep db data up to date
+  useDbCacheSubscription("chains");
+  const {
+    chainsWithTestnetsMap,
+    chainsWithoutTestnetsMap
+  } = useDbCache();
+  return withTestnets ? chainsWithTestnetsMap : chainsWithoutTestnetsMap;
 }
-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 useChain(chainId, withTestnets) {
+  const chains = useChains(withTestnets);
+  return chainId ? chains[chainId] : 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 useEvmNetworks(withTestnets) {
+  // keep db data up to date
+  useDbCacheSubscription("evmNetworks");
+  const {
+    evmNetworksWithTestnetsMap,
+    evmNetworksWithoutTestnetsMap
+  } = useDbCache();
+  return withTestnets ? evmNetworksWithTestnetsMap : evmNetworksWithoutTestnetsMap;
 }
-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 useEvmNetwork(evmNetworkId, withTestnets) {
+  const evmNetworks = useEvmNetworks(withTestnets);
+  return evmNetworkId ? evmNetworks[evmNetworkId] : 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);
 
-    // 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 || {};
-}
+  // 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();
+  return useMemo(() => ({
+    chains,
+    evmNetworks,
+    tokens,
+    tokenRates
+  }), [chains, evmNetworks, tokens, tokenRates]);
+};
 
-// 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 => {
+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 => {
     // check that this balance is included in our queried balance modules
     if (!balanceModules.map(({
       type
@@ -221,137 +510,32 @@ balanceModules, chaindataProvider, addressesByToken, options = {}) {
 
     // keep this balance
     return true;
-  }).toArray(),
+  }),
   // hydrate balance chains, evmNetworks, tokens and tokenRates
-  {
-    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;
-}
-
-// 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]);
+  hydrate), [balances, hydrate, balanceModules, addressesByToken]);
 }
 
-// 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;
-}
+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
+          })
+        })
+      })
+    })
+  })
+});
 
-export { useBalances, useChain, useChaindata, useChains, useEvmNetwork, useEvmNetworks, 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, useTokenRates, useTokens };