@talismn/balances-react 0.6.1 → 0.7.1

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

@@ -1,182 +1,46 @@
-import { useContext, createContext, useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { atom, useSetAtom, useAtom, useAtomValue } from 'jotai';
+import { useEffect, useMemo } from 'react';
+import { defaultBalanceModules, configureStore, compress, decompress, MiniMetadataUpdater, EvmTokenFetcher, hydrateChaindataAndMiniMetadata, updateCustomMiniMetadata, updateEvmTokens, db, Balances, getBalanceId, balances } from '@talismn/balances';
+export { evmErc20TokenId, evmNativeTokenId, subAssetTokenId, subEquilibriumTokenId, subNativeTokenId, subPsp22TokenId, subTokensTokenId } from '@talismn/balances';
+import { DEFAULT_COINGECKO_CONFIG, db as db$1, fetchTokenRates } from '@talismn/token-rates';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { firstThenDebounce, isEthereumAddress } from '@talismn/util';
+import { atomEffect } from 'jotai-effect';
+import { atomWithObservable } from 'jotai/utils';
+import { isEqual as isEqual$1 } from 'lodash';
+import { Observable, distinctUntilChanged, map, combineLatest, BehaviorSubject, debounceTime, firstValueFrom } from 'rxjs';
+import anylogger from 'anylogger';
 import { ChainConnector } from '@talismn/chain-connector';
 import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
 import { connectionMetaDb } from '@talismn/connection-meta';
-import { ChaindataProviderExtension } from '@talismn/chaindata-provider-extension';
-import { db as db$1, createSubscriptionId, deleteSubscriptionId, balances, BalanceStatusLive, Balances, deriveStatuses, getValidSubscriptionIds } from '@talismn/balances';
-import { db, fetchTokenRates } from '@talismn/token-rates';
-import { useLiveQuery } from 'dexie-react-hooks';
-import { useDebounce } from 'react-use';
-import md5 from 'blueimp-md5';
-import anylogger from 'anylogger';
-import { Subject, Observable, defer, shareReplay } from 'rxjs';
-
-const provideContext = useProviderContext => {
-  // automatic typing based on our hook's return type
-
-  const Context = /*#__PURE__*/createContext({
-    __provideContextInternalDefaultValue: true
+import { ChaindataProvider } from '@talismn/chaindata-provider';
+import { cryptoWaitReady } from '@polkadot/util-crypto';
+import { liveQuery } from 'dexie';
+import isEqual from 'lodash/isEqual';
+
+const balanceModuleCreatorsAtom = atom(defaultBalanceModules);
+const onfinalityApiKeyAtom = atom(undefined);
+const innerCoingeckoConfigAtom = atom(DEFAULT_COINGECKO_CONFIG);
+const coingeckoConfigAtom = atom(get => get(innerCoingeckoConfigAtom), (_get, set, options) => {
+  const apiUrl = options.apiUrl ?? DEFAULT_COINGECKO_CONFIG.apiUrl;
+  const apiKeyName = options.apiKeyName ?? DEFAULT_COINGECKO_CONFIG.apiKeyName;
+  const apiKeyValue = options.apiKeyValue ?? DEFAULT_COINGECKO_CONFIG.apiKeyValue;
+  set(innerCoingeckoConfigAtom, {
+    apiUrl,
+    apiKeyName,
+    apiKeyValue
   });
-  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);
-
-function useChaindataProvider(options = {}) {
-  const [onfinalityApiKey, setOnfinalityApiKey] = useState(options.onfinalityApiKey);
-
-  // make sure we recreate provider only when the onfinalityApiKey changes
-  useEffect(() => {
-    if (options.onfinalityApiKey !== onfinalityApiKey) setOnfinalityApiKey(options.onfinalityApiKey);
-  }, [options.onfinalityApiKey, onfinalityApiKey]);
-  return useMemo(() => new ChaindataProviderExtension({
-    onfinalityApiKey
-  }), [onfinalityApiKey]);
-}
-const [ChaindataProvider, useChaindata] = provideContext(useChaindataProvider);
-
-function useChainConnectorsProvider(options) {
-  const [onfinalityApiKey, setOnfinalityApiKey] = useState(options.onfinalityApiKey);
-
-  // make sure we recreate provider only when the onfinalityApiKey changes
-  useEffect(() => {
-    if (options.onfinalityApiKey !== onfinalityApiKey) setOnfinalityApiKey(options.onfinalityApiKey);
-  }, [options.onfinalityApiKey, onfinalityApiKey]);
-
-  // chaindata dependency
-  const chaindata = useChaindata();
-
-  // substrate connector
-  const substrate = useMemo(() => new ChainConnector(chaindata, connectionMetaDb), [chaindata]);
-
-  // evm connector
-  const evm = useMemo(() => new ChainConnectorEvm(chaindata, {
-    onfinalityApiKey
-  }), [chaindata, onfinalityApiKey]);
-  return useMemo(() => ({
-    substrate,
-    evm
-  }), [substrate, evm]);
-}
-const [ChainConnectorsProvider, useChainConnectors] = provideContext(useChainConnectorsProvider);
-
-const useBalanceModulesProvider = ({
-  balanceModules
-}) => {
-  const chainConnectors = useChainConnectors();
-  const chaindataProvider = useChaindata();
-  const hydrated = useMemo(() => chainConnectors.substrate && chainConnectors.evm && chaindataProvider ? balanceModules.map(mod => mod({
-    chainConnectors,
-    chaindataProvider
-  })) : [], [balanceModules, chainConnectors, chaindataProvider]);
-  return hydrated;
-};
-const [BalanceModulesProvider, useBalanceModules] = provideContext(useBalanceModulesProvider);
-
-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;
-  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]));
+});
+const enableTestnetsAtom = atom(false);
+const enabledChainsAtom = atom(undefined);
+const enabledTokensAtom = atom(undefined);
 
-  // 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 = () => {
-  const chaindataProvider = useChaindata();
-  const chainList = useLiveQuery(() => chaindataProvider?.chains(), [chaindataProvider]);
-  const evmNetworkList = useLiveQuery(() => chaindataProvider?.evmNetworks(), [chaindataProvider]);
-  const tokenList = useLiveQuery(() => 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, tokenRates, rawBalances]);
-  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, tokenList, tokenRates, rawBalances]);
-  return dbData;
-};
-const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
+/** Sets the list of addresses for which token balances will be fetched by the balances subscription */
+const allAddressesAtom = atom([]);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.6.1",
+	version: "0.7.1",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "GPL-3.0-or-later",
@@ -199,35 +63,41 @@ var packageJson = {
 	scripts: {
 		test: "jest",
 		lint: "eslint src --max-warnings 0",
-		clean: "rm -rf dist && rm -rf .turbo rm -rf node_modules"
+		clean: "rm -rf dist .turbo node_modules"
 	},
 	dependencies: {
 		"@talismn/balances": "workspace:*",
 		"@talismn/chain-connector": "workspace:*",
 		"@talismn/chain-connector-evm": "workspace:*",
 		"@talismn/chaindata-provider": "workspace:*",
-		"@talismn/chaindata-provider-extension": "workspace:*",
 		"@talismn/connection-meta": "workspace:*",
+		"@talismn/scale": "workspace:*",
 		"@talismn/token-rates": "workspace:*",
+		"@talismn/util": "workspace:*",
 		anylogger: "^1.0.11",
 		"blueimp-md5": "2.19.0",
-		dexie: "^3.2.4",
+		dexie: "^4.0.9",
 		"dexie-react-hooks": "^1.1.7",
-		"react-use": "^17.4.0",
+		jotai: "~2",
+		"jotai-effect": "~1",
+		lodash: "4.17.21",
+		"react-use": "^17.5.1",
 		rxjs: "^7.8.1"
 	},
 	devDependencies: {
 		"@talismn/eslint-config": "workspace:*",
 		"@talismn/tsconfig": "workspace:*",
-		"@types/jest": "^27.5.1",
-		"@types/react": "^18.0.17",
-		eslint: "^8.4.0",
+		"@types/jest": "^29.5.14",
+		"@types/lodash": "^4.17.12",
+		"@types/react": "^18.3.12",
+		eslint: "^8.57.1",
 		jest: "^29.7.0",
-		react: "^18.2.0",
-		"ts-jest": "^29.1.1",
-		typescript: "^4.6.4"
+		react: "^18.3.1",
+		"ts-jest": "^29.2.5",
+		typescript: "^5.6.3"
 	},
 	peerDependencies: {
+		"@polkadot/util-crypto": "*",
 		react: "*",
 		"react-dom": "*"
 	},
@@ -241,449 +111,482 @@ var packageJson = {
 
 var log = anylogger(packageJson.name);
 
-// global data store containing all subscriptions
-const subscriptions = {};
-
-/**
- * This hook ensures a subscription is created only once, and unsubscribe automatically as soon as there is no consumer to the hook
- * @param key key that is unique to the subscription's parameters
- * @param subscribe // subscribe function that will be shared by all consumers of the key
- */
-const useSharedSubscription = (key, subscribe) => {
-  // create the rxJS subject if it doesn't exist
-  if (!subscriptions[key]) subscriptions[key] = {
-    subject: new Subject()
-  };
-  useEffect(() => {
-    // subscribe to subject.
-    // it won't change but we need to count subscribers, to unsubscribe main subscription when no more observers
-    const s = subscriptions[key].subject.subscribe();
-    return () => {
-      // unsubscribe from our local observable updates to prevent memory leaks
-      s.unsubscribe();
-      const {
-        subject,
-        unsubscribe
-      } = subscriptions[key];
-      if (!subject.observed && unsubscribe) {
-        log.debug(`[useSharedSubscription] unsubscribing ${key}`);
-
-        // unsubscribe from backend updates to prevent unnecessary network connections
-        unsubscribe();
-        delete subscriptions[key].unsubscribe;
-      }
-    };
-  }, [key]);
-
-  // Initialize subscription
-  useEffect(() => {
+/** 
+// Persistence backend for indexedDB
+// Add a new backend by implementing the BalancesPersistBackend interface
+// configureStore can be called with a different indexedDB table
+*/
+configureStore();
+
+/** 
+// Persistence backend for localStorage
+*/
+const localStoragePersist = async balances => {
+  const storedBalances = balances.map(b => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
-      unsubscribe
-    } = subscriptions[key];
-    // launch the subscription if it's a new key
-    if (!unsubscribe) {
-      const cb = subscribe();
-      log.debug(`[useSharedSubscription] subscribing ${key}`);
-      if (cb) subscriptions[key].unsubscribe = cb;
-      // this error should only happen when developping a new hook, let it bubble up
-      else throw new Error(`${key} subscribe did not return an unsubscribe callback`);
-    }
-  }, [key, subscribe]);
-};
-
-/**
- * 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();
-    };
+      status,
+      ...rest
+    } = b;
+    return rest;
   });
-
-  // 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;
+  const deflated = compress(storedBalances);
+  localStorage.setItem("talismanBalances", deflated.toString());
 };
-
-const useEnabledChainsProvider = ({
-  enabledChains
-}) => {
-  return {
-    enabledChains
-  };
+const localStorageRetrieve = async () => {
+  const deflated = localStorage.getItem("talismanBalances");
+  if (deflated) {
+    // deflated will be a long string of numbers separated by commas
+    const deflatedArray = deflated.split(",").map(n => parseInt(n, 10));
+    const deflatedBytes = new Uint8Array(deflatedArray.length);
+    deflatedArray.forEach((n, i) => deflatedBytes[i] = n);
+    return decompress(deflatedBytes).map(b => ({
+      ...b,
+      status: "cache"
+    }));
+  }
+  return [];
 };
-const [EnabledChainsProvider, useEnabledChains] = provideContext(useEnabledChainsProvider);
-
-const useWithTestnetsProvider = ({
-  withTestnets
-}) => {
-  return {
-    withTestnets
-  };
+const localStorageBalancesPersistBackend = {
+  persist: localStoragePersist,
+  retrieve: localStorageRetrieve
 };
-const [WithTestnetsProvider, useWithTestnets] = provideContext(useWithTestnetsProvider);
 
-/**
- * This hook is responsible for fetching the data used for balances and inserting it into the db.
- */
-const useDbCacheSubscription = subscribeTo => {
-  const provider = useChaindata();
-
-  // can't handle balances & tokenRates here as they have other dependencies, it would trigger to many subscriptions
-  const subscribe = useCallback(() => {
-    switch (subscribeTo) {
-      case "chains":
-        return subscribeChainDataHydrate(provider, "chains");
-      case "evmNetworks":
-        return subscribeChainDataHydrate(provider, "evmNetworks");
-      case "tokens":
-        return subscribeChainDataHydrate(provider, "tokens");
-    }
-  }, [provider, subscribeTo]);
-  useSharedSubscription(subscribeTo, subscribe);
-};
-
-/**
- * This hook is responsible for fetching the data used for token rates and inserting it into the db.
- */
-function useDbCacheTokenRatesSubscription() {
-  const {
-    withTestnets
-  } = useWithTestnets();
-  const tokens = useTokens$1(withTestnets);
-  const subscriptionKey = useMemo(
-  // not super sexy but we need key to change based on this stuff
-  () => {
-    const key = Object.values(tokens ?? {}).map(({
-      id
-    }) => id).sort().join();
-    return `tokenRates-${md5(key)}`;
-  }, [tokens]);
-  const subscription = useCallback(() => {
-    if (!Object.values(tokens ?? {}).length) return () => {};
-    return subscribeTokenRates(tokens);
-  }, [tokens]);
-  useSharedSubscription(subscriptionKey, subscription);
-}
+const cryptoWaitReadyAtom = atom(async () => await cryptoWaitReady());
 
-/**
- * This hook is responsible for fetching the data used for balances and inserting it into the db.
- */
-function useDbCacheBalancesSubscription() {
-  const {
-    withTestnets
-  } = useWithTestnets();
-  const {
-    enabledChains
-  } = useEnabledChains();
-  const balanceModules = useBalanceModules();
-  const chaindataProvider = useChaindata();
-  const chainConnectors = useChainConnectors();
-  const [allAddresses] = useAllAddresses();
-  const chains = useChains$1(withTestnets);
-  const allTokens = useTokens$1(withTestnets);
-  const tokens = useMemo(() => {
-    if (!enabledChains) return allTokens;
-    const chainsByGenesisHash = new Map(Object.values(chains).flatMap(chain => chain.genesisHash ? [[chain.genesisHash, chain.id]] : []));
-    const enabledChainIds = enabledChains.flatMap(genesisHash => chainsByGenesisHash.get(genesisHash) ?? []);
-    return Object.fromEntries(Object.entries(allTokens).flatMap(([id, token]) => token.chain && enabledChainIds.includes(token.chain.id) ? [[id, token]] : []));
-  }, [allTokens, chains, enabledChains]);
-  const subscriptionKey = useMemo(
-  // not super sexy but we need key to change based on this stuff
-  () => {
-    const key = allAddresses.sort().join().concat(...Object.values(tokens ?? {}).map(({
-      id
-    }) => id).sort()).concat(`evm:${!!chainConnectors.evm}`, `sub:${!!chainConnectors.substrate}`, ...balanceModules.map(m => m.type).sort(), `cd:${!!chaindataProvider}`);
-    return `balances-${md5(key)}`;
-  }, [allAddresses, balanceModules, chainConnectors, chaindataProvider, tokens]);
-  const subscription = useCallback(() => {
-    if (!Object.values(tokens ?? {}).length || !allAddresses.length) return () => {};
-    return subscribeBalances(tokens ?? {}, allAddresses, balanceModules);
-  }, [allAddresses, balanceModules, tokens]);
-  useSharedSubscription(subscriptionKey, subscription);
-}
+const chaindataProviderAtom = atom(get => {
+  // runs a timer to keep chaindata hydrated
+  get(chaindataHydrateAtomEffect);
+  return new ChaindataProvider({
+    onfinalityApiKey: get(onfinalityApiKeyAtom)
+  });
+});
+const miniMetadataHydratedAtom = atom(false);
 
-// subscriptionless version of useChains and useTokens, prevents circular dependency
-const useChains$1 = withTestnets => {
-  const {
-    chainsWithTestnetsMap,
-    chainsWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? chainsWithTestnetsMap : chainsWithoutTestnetsMap;
-};
-const useTokens$1 = withTestnets => {
-  const {
-    tokensWithTestnetsMap,
-    tokensWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? tokensWithTestnetsMap : tokensWithoutTestnetsMap;
-};
-const subscribeChainDataHydrate = (provider, type) => {
-  const chaindata = provider;
-  const delay = 300_000; // 300_000ms = 300s = 5 minutes
+/** This atomEffect keeps chaindata hydrated (i.e. up to date with the GitHub repo) */
+const chaindataHydrateAtomEffect = atomEffect((get, set) => {
+  const chaindataProvider = get(chaindataProviderAtom);
+  const miniMetadataUpdater = get(miniMetadataUpdaterAtom);
+  const evmTokenFetcher = get(evmTokenFetcherAtom);
+  const loopMs = 300_000; // 300_000ms = 300s = 5 minutes
+  const retryTimeout = 5_000; // 5_000ms = 5 seconds
 
   let timeout = null;
   const hydrate = async () => {
     try {
-      if (type === "chains") await chaindata.hydrateChains();
-      if (type === "evmNetworks") await chaindata.hydrateEvmNetworks();
-      if (type === "tokens") await chaindata.hydrateTokens();
-      timeout = setTimeout(hydrate, delay);
+      await get(cryptoWaitReadyAtom);
+      await hydrateChaindataAndMiniMetadata(chaindataProvider, miniMetadataUpdater);
+      await updateCustomMiniMetadata(chaindataProvider, miniMetadataUpdater);
+      await updateEvmTokens(chaindataProvider, evmTokenFetcher);
+      set(miniMetadataHydratedAtom, true);
+      timeout = setTimeout(hydrate, loopMs);
     } catch (error) {
-      const retryTimeout = 5_000; // 5_000ms = 5 seconds
-      log.error(`Failed to fetch chaindata, retrying in ${Math.round(retryTimeout / 1000)} seconds`, error);
+      log.error(`Failed to hydrate chaindata, retrying in ${Math.round(retryTimeout / 1000)} seconds`, error);
       timeout = setTimeout(hydrate, retryTimeout);
     }
   };
 
   // launch the loop
   hydrate();
-  return () => {
-    if (timeout) clearTimeout(timeout);
-  };
-};
-const subscribeTokenRates = tokens => {
-  const REFRESH_INTERVAL = 300_000; // 6 minutes
-  const RETRY_INTERVAL = 5_000; // 5 sec
 
-  let timeout = null;
-  const refreshTokenRates = async () => {
-    try {
-      if (timeout) clearTimeout(timeout);
-      const tokenRates = await fetchTokenRates(tokens);
-      const putTokenRates = Object.entries(tokenRates).map(([tokenId, rates]) => ({
-        tokenId,
-        rates
-      }));
-      await db.transaction("rw", db.tokenRates, async () => {
-        // override all tokenRates
-        await db.tokenRates.bulkPut(putTokenRates);
-
-        // delete tokenRates for tokens which no longer exist
-        const tokenIds = await db.tokenRates.toCollection().primaryKeys();
-        const validTokenIds = new Set(Object.keys(tokenRates));
-        const deleteTokenIds = tokenIds.filter(tokenId => !validTokenIds.has(tokenId));
-        if (deleteTokenIds.length > 0) await db.tokenRates.bulkDelete(deleteTokenIds);
-      });
-      timeout = setTimeout(() => {
-        refreshTokenRates();
-      }, REFRESH_INTERVAL);
-    } catch (error) {
-      log.error(`Failed to fetch tokenRates, retrying in ${Math.round(RETRY_INTERVAL / 1000)} seconds`, error);
-      setTimeout(async () => {
-        refreshTokenRates();
-      }, RETRY_INTERVAL);
-    }
-  };
+  // return an unsub function to shut down the loop
+  return () => timeout && clearTimeout(timeout);
+});
 
-  // launch the loop
-  refreshTokenRates();
-  return () => {
-    if (timeout) clearTimeout(timeout);
-  };
-};
-const subscribeBalances = (tokens, addresses, balanceModules) => {
-  const tokenIds = Object.values(tokens).map(({
-    id
-  }) => id);
-  const addressesByToken = Object.fromEntries(tokenIds.map(tokenId => [tokenId, addresses]));
-  const subscriptionId = createSubscriptionId();
-
-  // TODO: Create subscriptions in a service worker, where we can detect page closes
-  // and therefore reliably delete the subscriptionId when the user closes our dapp
-  //
-  // For more information, check out https://developer.chrome.com/blog/page-lifecycle-api/#faqs
-  // and scroll down to:
-  // - `What is the back/forward cache?`, and
-  // - `If I can't run asynchronous APIs in the frozen or terminated states, how can I save data to IndexedDB?
-  //
-  // For now, we'll just last-ditch remove the subscriptionId (it works surprisingly well!) in the beforeunload event
-  window.onbeforeunload = () => {
-    deleteSubscriptionId();
+/** MiniMetadataUpdater is a class used for hydrating chaindata */
+const miniMetadataUpdaterAtom = atom(get => {
+  const chainConnectors = get(chainConnectorsAtom);
+  const chaindataProvider = get(chaindataProviderAtom);
+  const balanceModules = get(balanceModulesAtom);
+  return new MiniMetadataUpdater(chainConnectors, chaindataProvider, balanceModules);
+});
+
+/** EvmTokenFetcher is a class used for hydrating chaindata */
+const evmTokenFetcherAtom = atom(get => {
+  const chaindataProvider = get(chaindataProviderAtom);
+  const balanceModules = get(balanceModulesAtom);
+  return new EvmTokenFetcher(chaindataProvider, balanceModules);
+});
+
+const chainConnectorsAtom = atom(get => {
+  const onfinalityApiKey = get(onfinalityApiKeyAtom);
+  const chaindataProvider = get(chaindataProviderAtom);
+  const substrate = new ChainConnector(chaindataProvider, connectionMetaDb);
+  const evm = new ChainConnectorEvm(chaindataProvider, {
+    onfinalityApiKey
+  });
+  return {
+    substrate,
+    evm
   };
-  const updateDb = balances => {
-    const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
-      id,
-      ...balance,
-      status: BalanceStatusLive(subscriptionId)
-    }));
-    db$1.transaction("rw", db$1.balances, async () => await db$1.balances.bulkPut(putBalances));
+});
+
+const balanceModulesAtom = atom(get => {
+  const balanceModuleCreators = get(balanceModuleCreatorsAtom);
+  const chainConnectors = get(chainConnectorsAtom);
+  const chaindataProvider = get(chaindataProviderAtom);
+  if (!chainConnectors.substrate) return [];
+  if (!chainConnectors.evm) return [];
+  if (!chaindataProvider) return [];
+  return balanceModuleCreators.map(mod => mod({
+    chainConnectors,
+    chaindataProvider
+  }));
+});
+
+/**
+ * Converts a dexie Observable into an rxjs Observable.
+ */
+function dexieToRxjs(o) {
+  return new Observable(observer => {
+    const subscription = o.subscribe({
+      next: value => observer.next(value),
+      error: error => observer.error(error)
+    });
+    return () => subscription.unsubscribe();
+  });
+}
+
+const chainsAtom = atom(async get => (await get(chaindataAtom)).chains);
+const chainsByIdAtom = atom(async get => (await get(chaindataAtom)).chainsById);
+const chainsByGenesisHashAtom = atom(async get => (await get(chaindataAtom)).chainsByGenesisHash);
+const evmNetworksAtom = atom(async get => (await get(chaindataAtom)).evmNetworks);
+const evmNetworksByIdAtom = atom(async get => (await get(chaindataAtom)).evmNetworksById);
+const tokensAtom = atom(async get => (await get(chaindataAtom)).tokens);
+const tokensByIdAtom = atom(async get => (await get(chaindataAtom)).tokensById);
+const miniMetadatasAtom = atom(async get => (await get(chaindataAtom)).miniMetadatas);
+const chaindataAtom = atomWithObservable(get => {
+  const enableTestnets = get(enableTestnetsAtom);
+  const filterTestnets = items => enableTestnets ? items : items.filter(({
+    isTestnet
+  }) => !isTestnet);
+  const filterMapTestnets = items => enableTestnets ? items : Object.fromEntries(Object.entries(items).filter(([, {
+    isTestnet
+  }]) => !isTestnet));
+  const filterEnabledTokens = tokens => tokens.filter(token => token.isDefault || "isCustom" in token && token.isCustom);
+  const filterMapEnabledTokens = tokensById => Object.fromEntries(Object.entries(tokensById).filter(([, token]) => token.isDefault || "isCustom" in token && token.isCustom));
+  const distinctUntilIsEqual = distinctUntilChanged((a, b) => isEqual(a, b));
+  const chains = get(chaindataProviderAtom).chainsObservable.pipe(distinctUntilIsEqual, map(filterTestnets), distinctUntilIsEqual);
+  const chainsById = get(chaindataProviderAtom).chainsByIdObservable.pipe(distinctUntilIsEqual, map(filterMapTestnets), distinctUntilIsEqual);
+  const chainsByGenesisHash = get(chaindataProviderAtom).chainsByGenesisHashObservable.pipe(distinctUntilIsEqual, map(filterMapTestnets), distinctUntilIsEqual);
+  const evmNetworks = get(chaindataProviderAtom).evmNetworksObservable.pipe(distinctUntilIsEqual, map(filterTestnets), distinctUntilIsEqual);
+  const evmNetworksById = get(chaindataProviderAtom).evmNetworksByIdObservable.pipe(distinctUntilIsEqual, map(filterMapTestnets), distinctUntilIsEqual);
+  const tokens = get(chaindataProviderAtom).tokensObservable.pipe(distinctUntilIsEqual, map(filterTestnets), map(filterEnabledTokens), distinctUntilIsEqual);
+  const tokensById = get(chaindataProviderAtom).tokensByIdObservable.pipe(distinctUntilIsEqual, map(filterMapTestnets), map(filterMapEnabledTokens), distinctUntilIsEqual);
+  const miniMetadatasObservable = dexieToRxjs(liveQuery(() => db.miniMetadatas.toArray()));
+  const miniMetadatas = combineLatest([miniMetadatasObservable.pipe(distinctUntilIsEqual), chainsById]).pipe(map(([miniMetadatas, chainsById]) => miniMetadatas.filter(m => chainsById[m.chainId])), distinctUntilIsEqual);
+  return combineLatest({
+    chains,
+    chainsById,
+    chainsByGenesisHash,
+    evmNetworks,
+    evmNetworksById,
+    tokens,
+    tokensById,
+    miniMetadatas
+  }).pipe(
+  // debounce to prevent hammering UI with updates
+  firstThenDebounce(1_000), distinctUntilIsEqual);
+});
+
+const tokenRatesAtom = atom(async get => {
+  // runs a timer to keep tokenRates up to date
+  get(tokenRatesFetcherAtomEffect);
+  return await get(tokenRatesDbAtom);
+});
+const tokenRatesDbAtom = atomWithObservable(() => {
+  const dbRatesToMap = dbRates => Object.fromEntries(dbRates.map(({
+    tokenId,
+    rates
+  }) => [tokenId, rates]));
+
+  // retrieve fetched tokenRates from the db
+  return dexieToRxjs(liveQuery(() => db$1.tokenRates.toArray())).pipe(map(dbRatesToMap));
+});
+const tokenRatesFetcherAtomEffect = atomEffect(get => {
+  // lets us tear down the existing timer when the effect is restarted
+  const abort = new AbortController();
+
+  // we have to get these synchronously so that jotai knows to restart our timer when they change
+  const coingeckoConfig = get(coingeckoConfigAtom);
+  const tokensByIdPromise = get(tokensByIdAtom);
+  (async () => {
+    const tokensById = await tokensByIdPromise;
+    const tokenIds = Object.keys(tokensById);
+    const loopMs = 300_000; // 300_000ms = 300s = 5 minutes
+    const retryTimeout = 5_000; // 5_000ms = 5 seconds
+
+    const hydrate = async () => {
+      try {
+        if (abort.signal.aborted) return; // don't fetch if aborted
+        const tokenRates = await fetchTokenRates(tokensById, coingeckoConfig);
+        const putTokenRates = Object.entries(tokenRates).map(([tokenId, rates]) => ({
+          tokenId,
+          rates
+        }));
+        if (abort.signal.aborted) return; // don't insert into db if aborted
+        await db$1.transaction("rw", db$1.tokenRates, async () => {
+          // override all tokenRates
+          await db$1.tokenRates.bulkPut(putTokenRates);
+
+          // delete tokenRates for tokens which no longer exist
+          const validTokenIds = new Set(tokenIds);
+          const tokenRatesIds = await db$1.tokenRates.toCollection().primaryKeys();
+          const deleteIds = tokenRatesIds.filter(id => !validTokenIds.has(id));
+          if (deleteIds.length > 0) await db$1.tokenRates.bulkDelete(deleteIds);
+        });
+        if (abort.signal.aborted) return; // don't schedule next loop if aborted
+        setTimeout(hydrate, loopMs);
+      } catch (error) {
+        const retrying = !abort.signal.aborted;
+        const messageParts = ["Failed to fetch tokenRates", retrying && `retrying in ${Math.round(retryTimeout / 1000)} seconds`, !retrying && `giving up (timer no longer needed)`].filter(Boolean);
+        log.error(messageParts.join(", "), error);
+        if (abort.signal.aborted) return; // don't schedule retry if aborted
+        setTimeout(hydrate, retryTimeout);
+      }
+    };
+
+    // launch the loop
+    hydrate();
+  })();
+  return () => abort.abort("Unsubscribed");
+});
+
+const allBalancesAtom = atom(async get => {
+  // set up our subscription to fetch balances from the various blockchains
+  get(balancesSubscriptionAtomEffect);
+  const [balances, hydrateData] = await Promise.all([get(balancesObservableAtom), get(balancesHydrateDataAtom)]);
+  return new Balances(Object.values(balances).filter(balance => !!hydrateData?.tokens?.[balance.tokenId]),
+  // hydrate balance chains, evmNetworks, tokens and tokenRates
+  hydrateData);
+});
+const balancesObservable = new BehaviorSubject({});
+const balancesObservableAtom = atomWithObservable(() => balancesObservable);
+const balancesPersistBackendAtom = atom(localStorageBalancesPersistBackend);
+const hydrateBalancesObservableAtom = atom(async get => {
+  const persistBackend = get(balancesPersistBackendAtom);
+  const balances = await persistBackend.retrieve();
+  balancesObservable.next(Object.fromEntries(balances.map(b => [getBalanceId(b), {
+    ...b,
+    status: "cache"
+  }])));
+});
+const balancesHydrateDataAtom = atom(async get => {
+  const [{
+    chainsById,
+    evmNetworksById,
+    tokensById
+  }, tokenRates] = await Promise.all([get(chaindataAtom), get(tokenRatesAtom)]);
+  return {
+    chains: chainsById,
+    evmNetworks: evmNetworksById,
+    tokens: tokensById,
+    tokenRates
   };
-  let unsubscribed = false;
-
-  // eslint-disable-next-line no-console
-  log.log("subscribing to balance changes for %d tokens and %d addresses", tokenIds.length, addresses.length);
-  const unsubs = balanceModules.map(async 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(({
+});
+const balancesSubscriptionAtomEffect = atomEffect(get => {
+  // lets us tear down the existing subscriptions when the atomEffect is restarted
+  const abort = new AbortController();
+
+  // we have to specify these synchronously, otherwise jotai won't know
+  // that it needs to restart our subscriptions when they change
+  const atomDependencies = Promise.all([get(cryptoWaitReadyAtom), get(balanceModulesAtom), get(miniMetadataHydratedAtom), get(allAddressesAtom), get(chainsAtom), get(chainsByIdAtom), get(evmNetworksAtom), get(evmNetworksByIdAtom), get(tokensAtom), get(tokensByIdAtom), get(miniMetadatasAtom), get(enabledChainsAtom), get(enabledTokensAtom), get(hydrateBalancesObservableAtom)]);
+  const persistBackend = get(balancesPersistBackendAtom);
+  const unsubsPromise = (async () => {
+    const [_cryptoReady, balanceModules, miniMetadataHydrated, allAddresses, chains, chainsById, evmNetworks, evmNetworksById, tokens, tokensById, _miniMetadatas, enabledChainsConfig, enabledTokensConfig] = await atomDependencies;
+    if (!miniMetadataHydrated) return;
+    if (abort.signal.aborted) return;
+
+    // persist data every thirty seconds
+    balancesObservable.pipe(debounceTime(10000)).subscribe(balancesUpdate => {
+      persistBackend.persist(Object.values(balancesUpdate));
+    });
+    const updateBalances = async balancesUpdates => {
+      if (abort.signal.aborted) return;
+      const updatesWithIds = new Balances(balancesUpdates);
+      const existing = balancesObservable.value;
+
+      // update initialising set here - before filtering out zero balances
+      // while this may include stale balances, the important thing is that the balance is no longer "initialising"
+      // balancesUpdates.forEach((b) => this.#initialising.delete(getBalanceId(b)))
+
+      const newlyZeroBalances = [];
+      const changedBalances = Object.fromEntries(updatesWithIds.each.filter(newB => {
+        const isZero = newB.total.tokens === "0";
+        // Keep new balances which are not zeros
+        const existingB = existing[newB.id];
+        if (!existingB && !isZero) return true;
+        const hasChanged = !isEqual$1(existingB, newB.toJSON());
+        // Collect balances now confirmed to be zero separately, so they can be filtered out from the main set
+        if (existingB && hasChanged && isZero) newlyZeroBalances.push(newB.id);
+        // Keep changed balances, which are not known zeros
+        return hasChanged && !isZero;
+      }).map(b => [b.id, b.toJSON()]));
+      if (Object.keys(changedBalances).length === 0 && newlyZeroBalances.length === 0) return;
+      const nonZeroBalances = newlyZeroBalances.length > 0 ? Object.fromEntries(Object.entries(existing).filter(([id]) => !newlyZeroBalances.includes(id))) : existing;
+      const newBalancesState = {
+        ...nonZeroBalances,
+        ...changedBalances
+      };
+      if (Object.keys(newBalancesState).length === 0) return;
+      balancesObservable.next(newBalancesState);
+    };
+    const deleteBalances = async balancesFilter => {
+      if (abort.signal.aborted) return;
+      const balancesToKeep = Object.fromEntries(new Balances(Object.values(await get(balancesObservableAtom))).each.filter(b => !balancesFilter(b)).map(b => [b.id, b.toJSON()]));
+      balancesObservable.next(balancesToKeep);
+    };
+    const enabledChainIds = enabledChainsConfig?.map(genesisHash => chains.find(chain => chain.genesisHash === genesisHash)?.id);
+    const enabledChainsFilter = enabledChainIds ? token => token.chain && enabledChainIds?.includes(token.chain.id) : () => true;
+    const enabledTokensFilter = enabledTokensConfig ? token => enabledTokensConfig.includes(token.id) : () => true;
+    const enabledTokenIds = tokens.filter(enabledChainsFilter).filter(enabledTokensFilter).map(({
       id
     }) => id);
-    const addressesByModuleToken = Object.fromEntries(Object.entries(addressesByToken).filter(([tokenId]) => moduleTokenIds.includes(tokenId)));
-    const unsub = balances(balanceModule, addressesByModuleToken, (error, balances) => {
-      // log errors
-      if (error) {
-        if (error?.type === "STALE_RPC_ERROR" || error?.type === "WEBSOCKET_ALLOCATION_EXHAUSTED_ERROR") return db$1.balances.where({
-          source: balanceModule.type,
-          chainId: error.chainId
-        }).filter(balance => {
-          if (!Object.keys(addressesByModuleToken).includes(balance.tokenId)) return false;
-          if (!addressesByModuleToken[balance.tokenId].includes(balance.address)) return false;
-          return true;
-        }).modify({
-          status: "stale"
-        });
-        return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
+    if (enabledTokenIds.length < 1 || allAddresses.length < 1) return;
+    const addressesByTokenByModule = {};
+    enabledTokenIds.flatMap(tokenId => tokensById[tokenId]).forEach(token => {
+      // filter out tokens on chains/evmNetworks which have no rpcs
+      const hasRpcs = token.chain?.id && (chainsById[token.chain.id]?.rpcs?.length ?? 0) > 0 || token.evmNetwork?.id && (evmNetworksById[token.evmNetwork.id]?.rpcs?.length ?? 0) > 0;
+      if (!hasRpcs) return;
+      if (!addressesByTokenByModule[token.type]) addressesByTokenByModule[token.type] = {};
+      addressesByTokenByModule[token.type][token.id] = allAddresses.filter(address => {
+        // for each address, fetch balances only from compatible chains
+        return isEthereumAddress(address) ? token.evmNetwork?.id || chainsById[token.chain?.id ?? ""]?.account === "secp256k1" : token.chain?.id && chainsById[token.chain?.id ?? ""]?.account !== "secp256k1";
+      });
+    });
+
+    // Delete invalid cached balances
+    const chainIds = new Set(chains.map(chain => chain.id));
+    const evmNetworkIds = new Set(evmNetworks.map(evmNetwork => evmNetwork.id));
+    await deleteBalances(balance => {
+      // delete cached balances for accounts which don't exist anymore
+      if (!balance.address || !allAddresses.includes(balance.address)) return true;
+
+      // delete cached balances when chain/evmNetwork doesn't exist
+      if (balance.chainId === undefined && balance.evmNetworkId === undefined) return true;
+      if (balance.chainId !== undefined && !chainIds.has(balance.chainId)) return true;
+      if (balance.evmNetworkId !== undefined && !evmNetworkIds.has(balance.evmNetworkId)) return true;
+
+      // delete cached balance when token doesn't exist / is disabled
+      if (!enabledTokenIds.includes(balance.tokenId)) return true;
+
+      // delete cached balance when module doesn't exist
+      if (!balanceModules.find(module => module.type === balance.source)) return true;
+
+      // delete cached balance for accounts on incompatible chains
+      // (substrate accounts shouldn't have evm balances)
+      // (evm accounts shouldn't have substrate balances (unless the chain uses secp256k1 accounts))
+      const chain = balance.chainId && chains.find(({
+        id
+      }) => id === balance.chainId) || null;
+      const hasChain = balance.chainId && chainIds.has(balance.chainId);
+      const hasEvmNetwork = balance.evmNetworkId && evmNetworkIds.has(balance.evmNetworkId);
+      const chainUsesSecp256k1Accounts = chain?.account === "secp256k1";
+      if (!isEthereumAddress(balance.address)) {
+        if (!hasChain) return true;
+        if (chainUsesSecp256k1Accounts) return true;
+      }
+      if (isEthereumAddress(balance.address)) {
+        if (!hasEvmNetwork && !chainUsesSecp256k1Accounts) return true;
       }
-      // ignore empty balance responses
-      if (!balances) return;
-      // ignore balances from old subscriptions which are still in the process of unsubscribing
-      if (unsubscribed) return;
-      updateDb(balances);
+
+      // keep balance
+      return false;
     });
-    return () => {
-      // wait 2 seconds before actually unsubscribing, allowing for websocket to be reused
-      unsub.then(unsubscribe => {
-        setTimeout(unsubscribe, 2_000);
+    if (abort.signal.aborted) return;
+
+    // after 30 seconds, change the status of all balances still initializing to stale
+    setTimeout(() => {
+      if (abort.signal.aborted) return;
+      const staleObservable = balancesObservable.pipe(map(val => Object.values(val).filter(({
+        status
+      }) => status === "cache").map(balance => ({
+        ...balance,
+        status: "stale"
+      }))));
+      firstValueFrom(staleObservable).then(v => {
+        if (v.length) updateBalances(v);
       });
-      deleteSubscriptionId();
-    };
-  });
-  const unsubscribeAll = () => {
-    unsubscribed = true;
-    unsubs.forEach(unsub => unsub.then(unsubscribe => unsubscribe()));
-  };
-  return unsubscribeAll;
-};
-
-function useChains(withTestnets) {
-  // keep db data up to date
-  useDbCacheSubscription("chains");
-  const {
-    chainsWithTestnetsMap,
-    chainsWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? chainsWithTestnetsMap : chainsWithoutTestnetsMap;
-}
-function useChain(chainId, withTestnets) {
-  const chains = useChains(withTestnets);
-  return chainId ? chains[chainId] : undefined;
-}
+    }, 30_000);
+    return balanceModules.map(balanceModule => {
+      const unsub = balances(balanceModule, addressesByTokenByModule[balanceModule.type] ?? {}, (error, balances) => {
+        // log errors
+        if (error) {
+          if (error?.type === "STALE_RPC_ERROR" || error?.type === "WEBSOCKET_ALLOCATION_EXHAUSTED_ERROR") {
+            const addressesByModuleToken = addressesByTokenByModule[balanceModule.type] ?? {};
+            const staleObservable = balancesObservable.pipe(map(val => Object.values(val).filter(balance => {
+              const {
+                tokenId,
+                address,
+                source
+              } = balance;
+              const chainComparison = error.chainId ? "chainId" in balance && error.chainId === balance.chainId : error.evmNetworkId ? "evmNetworkId" in balance && error.evmNetworkId === balance.evmNetworkId : true;
+              return chainComparison && addressesByModuleToken[tokenId]?.includes(address) && source === balanceModule.type;
+            }).map(balance => ({
+              ...balance,
+              status: "stale"
+            }))));
+            firstValueFrom(staleObservable).then(v => {
+              if (v.length) updateBalances(v);
+            });
+          }
+          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 (abort.signal.aborted) return;
+
+        // good balances
+        if (balances) {
+          if ("status" in balances) {
+            // For modules using the new SubscriptionResultWithStatus pattern
+            //TODO fix initialisin
+            // if (result.status === "initialising") this.#initialising.add(balanceModule.type)
+            // else this.#initialising.delete(balanceModule.type)
+            updateBalances(balances.data);
+          } else {
+            // add good ones to initialisedBalances
+            updateBalances(Object.values(balances.toJSON()));
+          }
+        }
+      });
+      return () => unsub.then(unsubscribe => unsubscribe());
+    });
+  })();
 
-function useEvmNetworks(withTestnets) {
-  // keep db data up to date
-  useDbCacheSubscription("evmNetworks");
-  const {
-    evmNetworksWithTestnetsMap,
-    evmNetworksWithoutTestnetsMap
-  } = useDbCache();
-  return withTestnets ? evmNetworksWithTestnetsMap : evmNetworksWithoutTestnetsMap;
-}
-function useEvmNetwork(evmNetworkId, withTestnets) {
-  const evmNetworks = useEvmNetworks(withTestnets);
-  return evmNetworkId ? evmNetworks[evmNetworkId] : undefined;
-}
+  // close the existing subscriptions when our effect unmounts
+  // (wait 2 seconds before actually unsubscribing, to allow the websocket to be reused in that time)
+  const unsubscribe = () => unsubsPromise.then(unsubs => {
+    persistBackend.persist(Object.values(balancesObservable.value));
+    unsubs?.forEach(unsub => unsub());
+  });
+  abort.signal.addEventListener("abort", () => setTimeout(unsubscribe, 2_000));
+  return () => abort.abort("Unsubscribed");
+});
 
-function useTokenRates() {
-  // keep db data up to date
-  useDbCacheTokenRatesSubscription();
-  const {
-    tokenRatesMap
-  } = useDbCache();
-  return tokenRatesMap;
-}
-function useTokenRate(tokenId) {
-  const tokenRates = useTokenRates();
-  return tokenId ? tokenRates[tokenId] : undefined;
-}
+const useSetBalancesAddresses = addresses => {
+  const setAllAddresses = useSetAtom(allAddressesAtom);
+  useEffect(() => {
+    setAllAddresses(a => JSON.stringify(a) === JSON.stringify(addresses) ? a : addresses);
+  }, [addresses, setAllAddresses]);
+};
 
-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;
-}
+/**
+ * @name useBalances
+ * @description Hook to get the current balances state.
+ * @param persistBackend an optional BalancesPersistBackend backend to use for persisting the balances state. By default, indexedDB is used.
+ * @returns a Balances object containing the current balances state.
+ */
 
-const useBalancesHydrate = () => {
-  const {
-    withTestnets
-  } = useWithTestnets();
-  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]);
+const useBalances = persistBackend => {
+  const [, setPersistBackend] = useAtom(balancesPersistBackendAtom);
+  if (persistBackend) setPersistBackend(persistBackend);
+  return useAtomValue(allBalancesAtom);
 };
 
-function useBalances(addressesByToken) {
-  // keep db data up to date
-  useDbCacheBalancesSubscription();
-  const balanceModules = useBalanceModules();
-  const {
-    balances
-  } = useDbCache();
-  const hydrate = useBalancesHydrate();
-  return useMemo(() => new Balances(deriveStatuses(getValidSubscriptionIds(), balances.filter(balance => {
-    // check that this balance is included in our queried balance modules
-    if (!balanceModules.map(({
-      type
-    }) => type).includes(balance.source)) return false;
-
-    // check that our query includes some tokens and addresses
-    if (!addressesByToken) return false;
-
-    // check that this balance is included in our queried tokens
-    if (!Object.keys(addressesByToken).includes(balance.tokenId)) return false;
-
-    // check that this balance is included in our queried addresses for this token
-    if (!addressesByToken[balance.tokenId].includes(balance.address)) return false;
-
-    // keep this balance
-    return true;
-  })),
-  // hydrate balance chains, evmNetworks, tokens and tokenRates
-  hydrate), [balances, hydrate, balanceModules, addressesByToken]);
-}
+// TODO: Extract to shared definition between extension and @talismn/balances-react
 
 /**
  * Given a collection of `Balances`, this hook returns a `BalancesStatus` summary for the collection.
@@ -713,31 +616,64 @@ const useBalancesStatus = balances => useMemo(() => {
 }, [balances]);
 const getStaleChains = balances => [...new Set(balances.sorted.filter(b => b.status === "stale").map(b => b.chain?.name ?? b.chainId ?? "Unknown"))];
 
+const useChainConnectors = () => useAtomValue(chainConnectorsAtom);
+
+const useChaindataProvider = () => useAtomValue(chaindataProviderAtom);
+const useChaindata = () => useAtomValue(chaindataAtom);
+const useChains = () => useAtomValue(chainsByIdAtom);
+const useChainsByGenesisHash = () => useAtomValue(chainsByGenesisHashAtom);
+const useEvmNetworks = () => useAtomValue(evmNetworksByIdAtom);
+const useTokens = () => useAtomValue(tokensByIdAtom);
+const useMiniMetadatas = () => useAtomValue(miniMetadatasAtom);
+const useChain = chainId => useChains()[chainId ?? ""] ?? undefined;
+const useEvmNetwork = evmNetworkId => useEvmNetworks()[evmNetworkId ?? ""] ?? undefined;
+const useToken = tokenId => useTokens()[tokenId ?? ""] ?? undefined;
+
+const useTokenRates = () => useAtomValue(tokenRatesAtom);
+const useTokenRate = tokenId => useTokenRates()[tokenId ?? ""] ?? undefined;
+
 const BalancesProvider = ({
   balanceModules,
   onfinalityApiKey,
+  coingeckoApiUrl,
+  coingeckoApiKeyName,
+  coingeckoApiKeyValue,
   withTestnets,
   enabledChains,
+  enabledTokens,
   children
-}) => /*#__PURE__*/jsx(WithTestnetsProvider, {
-  withTestnets: withTestnets,
-  children: /*#__PURE__*/jsx(EnabledChainsProvider, {
-    enabledChains: enabledChains,
-    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, {
-              children: children
-            })
-          })
-        })
-      })
-    })
-  })
-});
+}) => {
+  const setBalanceModules = useSetAtom(balanceModuleCreatorsAtom);
+  useEffect(() => {
+    if (balanceModules !== undefined) setBalanceModules(balanceModules);
+  }, [balanceModules, setBalanceModules]);
+  const setOnfinalityApiKey = useSetAtom(onfinalityApiKeyAtom);
+  useEffect(() => {
+    setOnfinalityApiKey(onfinalityApiKey);
+  }, [onfinalityApiKey, setOnfinalityApiKey]);
+  const setCoingeckoConfig = useSetAtom(coingeckoConfigAtom);
+  useEffect(() => {
+    setCoingeckoConfig({
+      apiUrl: coingeckoApiUrl,
+      apiKeyName: coingeckoApiKeyName,
+      apiKeyValue: coingeckoApiKeyValue
+    });
+  }, [coingeckoApiKeyName, coingeckoApiKeyValue, coingeckoApiUrl, setCoingeckoConfig]);
+  const setEnableTestnets = useSetAtom(enableTestnetsAtom);
+  useEffect(() => {
+    setEnableTestnets(withTestnets ?? false);
+  }, [setEnableTestnets, withTestnets]);
+  const setEnabledChains = useSetAtom(enabledChainsAtom);
+  useEffect(() => {
+    setEnabledChains(enabledChains);
+  }, [enabledChains, setEnabledChains]);
+  const setEnabledTokens = useSetAtom(enabledTokensAtom);
+  useEffect(() => {
+    setEnabledTokens(enabledTokens);
+  }, [enabledTokens, setEnabledTokens]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
 
-export { AllAddressesProvider, BalanceModulesProvider, BalancesProvider, ChainConnectorsProvider, ChaindataProvider, DbCacheProvider, WithTestnetsProvider, createMulticastSubscription, getStaleChains, provideContext, useAllAddresses, useBalanceModules, useBalances, useBalancesHydrate, useBalancesStatus, useChain, useChainConnectors, useChaindata, useChains, useDbCache, useDbCacheBalancesSubscription, useDbCacheSubscription, useDbCacheTokenRatesSubscription, useEvmNetwork, useEvmNetworks, useMulticastSubscription, useToken, useTokenRate, useTokenRates, useTokens, useWithTestnets };
+export { BalancesProvider, allAddressesAtom, allBalancesAtom, balanceModuleCreatorsAtom, balanceModulesAtom, balancesPersistBackendAtom, chainConnectorsAtom, chaindataAtom, chaindataProviderAtom, chainsAtom, chainsByGenesisHashAtom, chainsByIdAtom, coingeckoConfigAtom, cryptoWaitReadyAtom, enableTestnetsAtom, enabledChainsAtom, enabledTokensAtom, evmNetworksAtom, evmNetworksByIdAtom, getStaleChains, miniMetadataHydratedAtom, miniMetadatasAtom, onfinalityApiKeyAtom, tokenRatesAtom, tokensAtom, tokensByIdAtom, useBalances, useBalancesStatus, useChain, useChainConnectors, useChaindata, useChaindataProvider, useChains, useChainsByGenesisHash, useEvmNetwork, useEvmNetworks, useMiniMetadatas, useSetBalancesAddresses, useToken, useTokenRate, useTokenRates, useTokens };