@talismn/balances-react 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @talismn/balances-react
 
+## 0.4.1
+
+### Patch Changes
+
+- fb8ee962: feat: proxy dapp websocket requests to talisman wallet backend when available
+- f7aca48b: eslint rules
+- 01bf239b: feat: crowdloan and nom pool balances
+- 48f0222e: fix: removed some explicit `any`s
+- 01bf239b: fix: packages publishing with incorrect interdependency versions
+- Updated dependencies [fb8ee962]
+- Updated dependencies [c898da98]
+- Updated dependencies [f7aca48b]
+- Updated dependencies [01bf239b]
+- Updated dependencies [48f0222e]
+- Updated dependencies [01bf239b]
+  - @talismn/balances@0.4.1
+  - @talismn/chain-connector@0.4.4
+  - @talismn/chaindata-provider-extension@0.4.4
+  - @talismn/chain-connector-evm@0.4.4
+  - @talismn/chaindata-provider@0.4.4
+  - @talismn/connection-meta@0.0.3
+  - @talismn/token-rates@0.1.16
+
 ## 0.4.0
 
 ### Minor Changes

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

@@ -12,10 +12,10 @@ export * from "./useEvmNetworks";
 export * from "./useTokenRates";
 export * from "./useTokens";
 export * from "./useWithTestnets";
-import { BalanceModule, Hydrate } from "@talismn/balances";
+import { AnyBalanceModule, Hydrate } from "@talismn/balances";
 import { ReactNode } from "react";
 export type BalancesProviderProps = {
-    balanceModules: Array<(hydrate: Hydrate) => BalanceModule<any, any, any, any, any>>;
+    balanceModules: Array<(hydrate: Hydrate) => AnyBalanceModule>;
     onfinalityApiKey?: string;
     withTestnets?: boolean;
     children?: ReactNode;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { BalanceModule, Hydrate } from "@talismn/balances";
+import { AnyBalanceModule, Hydrate } from "@talismn/balances";
 export type BalanceModulesProviderOptions = {
-    balanceModules: Array<(hydrate: Hydrate) => BalanceModule<any, any, any, any, any>>;
+    balanceModules: Array<(hydrate: Hydrate) => AnyBalanceModule>;
 };
 export declare const BalanceModulesProvider: import("react").FC<BalanceModulesProviderOptions & {
     children?: import("react").ReactNode;
-}>, useBalanceModules: () => BalanceModule<any, any, any, any, any>[];
+}>, useBalanceModules: () => AnyBalanceModule[];

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

@@ -11,9 +11,8 @@ export type BalancesStatus = {
  * Given a collection of `Balances`, this hook returns a `BalancesStatus` summary for the collection.
  *
  * @param balances The collection of balances to get the status from.
- * @param isLoadingLocks Because the wallet currently fetches locks outside of the balances api, this param can be used to indicate that the locks are still loading, even if the `Balances` collection is not.
  * @returns An instance of `BalancesStatus` which represents the status of the balances collection.
 
  */
-export declare const useBalancesStatus: (balances: Balances, isLoadingLocks?: boolean) => BalancesStatus;
+export declare const useBalancesStatus: (balances: Balances) => BalancesStatus;
 export declare const getStaleChains: (balances: Balances) => string[];

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

@@ -121,21 +121,6 @@ const DEFAULT_VALUE = {
 };
 const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
   if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
-
-  // BEGIN: temp hack to indicate that
-  //          - EVM GLMR is a mirror of substrate GLMR
-  //          - 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]));
@@ -184,7 +169,7 @@ const useDbCacheProvider = () => {
   // debounce every 500ms to prevent hammering UI with updates
   reactUse.useDebounce(() => {
     setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
-  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates$1]);
+  }, 500, [chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances]);
   const refInitialized = react.useRef(false);
 
   // force an update as soon as all datasources are fetched, so UI can display data ASAP
@@ -193,14 +178,14 @@ const useDbCacheProvider = () => {
       setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
       refInitialized.current = true;
     }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates$1]);
+  }, [chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances]);
   return dbData;
 };
 const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.4.0",
+	version: "0.4.1",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -222,27 +207,27 @@ var packageJson = {
 	},
 	scripts: {
 		test: "jest",
-		lint: "eslint . --max-warnings 0",
+		lint: "eslint src --max-warnings 0",
 		clean: "rm -rf dist && rm -rf .turbo rm -rf 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/token-rates": "workspace:^",
+		"@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/token-rates": "workspace:*",
 		anylogger: "^1.0.11",
 		"blueimp-md5": "2.19.0",
 		dexie: "^3.2.3",
 		"dexie-react-hooks": "^1.1.3",
 		"react-use": "^17.4.0",
-		rxjs: "^7.8.0"
+		rxjs: "^7.8.1"
 	},
 	devDependencies: {
-		"@talismn/eslint-config": "workspace:^",
-		"@talismn/tsconfig": "workspace:^",
+		"@talismn/eslint-config": "workspace:*",
+		"@talismn/tsconfig": "workspace:*",
 		"@types/jest": "^27.5.1",
 		"@types/react": "^18.0.17",
 		eslint: "^8.4.0",
@@ -503,10 +488,25 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     id
   }) => id);
   const addressesByToken = Object.fromEntries(tokenIds.map(tokenId => [tokenId, addresses]));
+  const subscriptionId = balances.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 = () => {
+    balances.deleteSubscriptionId();
+  };
   const updateDb = balances$1 => {
     const putBalances = Object.entries(balances$1.toJSON()).map(([id, balance]) => ({
       id,
-      ...balance
+      ...balance,
+      status: balances.BalanceStatusLive(subscriptionId)
     }));
     balances.db.transaction("rw", balances.db.balances, async () => await balances.db.balances.bulkPut(putBalances));
   };
@@ -525,7 +525,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     const unsub = balances.balances(balanceModule, addressesByModuleToken, (error, balances$1) => {
       // log errors
       if (error) {
-        if (error?.type === "STALE_RPC_ERROR") return balances.db.balances.where({
+        if (error?.type === "STALE_RPC_ERROR" || error?.type === "WEBSOCKET_ALLOCATION_EXHAUSTED_ERROR") return balances.db.balances.where({
           source: balanceModule.type,
           chainId: error.chainId
         }).filter(balance => {
@@ -548,15 +548,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
       unsub.then(unsubscribe => {
         setTimeout(unsubscribe, 2_000);
       });
-      balances.db.balances.where({
-        source: balanceModule.type
-      }).filter(balance => {
-        if (!Object.keys(addressesByModuleToken).includes(balance.tokenId)) return false;
-        if (!addressesByModuleToken[balance.tokenId].includes(balance.address)) return false;
-        return true;
-      }).modify({
-        status: "cache"
-      });
+      balances.deleteSubscriptionId();
     };
   });
   const unsubscribeAll = () => {
@@ -645,7 +637,7 @@ function useBalances(addressesByToken) {
     balances: balances$1
   } = useDbCache();
   const hydrate = useBalancesHydrate();
-  return react.useMemo(() => new balances.Balances(balances$1.filter(balance => {
+  return react.useMemo(() => new balances.Balances(balances.deriveStatuses([...balances.getValidSubscriptionIds()], balances$1.filter(balance => {
     // check that this balance is included in our queried balance modules
     if (!balanceModules.map(({
       type
@@ -662,7 +654,7 @@ function useBalances(addressesByToken) {
 
     // keep this balance
     return true;
-  }),
+  })),
   // hydrate balance chains, evmNetworks, tokens and tokenRates
   hydrate), [balances$1, hydrate, balanceModules, addressesByToken]);
 }
@@ -671,11 +663,10 @@ function useBalances(addressesByToken) {
  * Given a collection of `Balances`, this hook returns a `BalancesStatus` summary for the collection.
  *
  * @param balances The collection of balances to get the status from.
- * @param isLoadingLocks Because the wallet currently fetches locks outside of the balances api, this param can be used to indicate that the locks are still loading, even if the `Balances` collection is not.
  * @returns An instance of `BalancesStatus` which represents the status of the balances collection.
 
  */
-const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
+const useBalancesStatus = balances => react.useMemo(() => {
   // stale
   const staleChains = getStaleChains(balances);
   if (staleChains.length > 0) return {
@@ -685,7 +676,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
 
   // fetching
   const hasCachedBalances = balances.each.some(b => b.status === "cache");
-  if (hasCachedBalances || isLoadingLocks) return {
+  if (hasCachedBalances) return {
     status: "fetching"
   };
 
@@ -693,7 +684,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
   return {
     status: "live"
   };
-}, [balances, isLoadingLocks]);
+}, [balances]);
 const getStaleChains = balances => [...new Set(balances.sorted.filter(b => b.status === "stale").map(b => b.chain?.name ?? b.chainId ?? "Unknown"))];
 
 const BalancesProvider = ({

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

@@ -121,21 +121,6 @@ const DEFAULT_VALUE = {
 };
 const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
   if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
-
-  // BEGIN: temp hack to indicate that
-  //          - EVM GLMR is a mirror of substrate GLMR
-  //          - 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]));
@@ -184,7 +169,7 @@ const useDbCacheProvider = () => {
   // debounce every 500ms to prevent hammering UI with updates
   reactUse.useDebounce(() => {
     setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
-  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates$1]);
+  }, 500, [chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances]);
   const refInitialized = react.useRef(false);
 
   // force an update as soon as all datasources are fetched, so UI can display data ASAP
@@ -193,14 +178,14 @@ const useDbCacheProvider = () => {
       setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances));
       refInitialized.current = true;
     }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates$1]);
+  }, [chainList, evmNetworkList, tokenList, tokenRates$1, rawBalances]);
   return dbData;
 };
 const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.4.0",
+	version: "0.4.1",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -222,27 +207,27 @@ var packageJson = {
 	},
 	scripts: {
 		test: "jest",
-		lint: "eslint . --max-warnings 0",
+		lint: "eslint src --max-warnings 0",
 		clean: "rm -rf dist && rm -rf .turbo rm -rf 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/token-rates": "workspace:^",
+		"@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/token-rates": "workspace:*",
 		anylogger: "^1.0.11",
 		"blueimp-md5": "2.19.0",
 		dexie: "^3.2.3",
 		"dexie-react-hooks": "^1.1.3",
 		"react-use": "^17.4.0",
-		rxjs: "^7.8.0"
+		rxjs: "^7.8.1"
 	},
 	devDependencies: {
-		"@talismn/eslint-config": "workspace:^",
-		"@talismn/tsconfig": "workspace:^",
+		"@talismn/eslint-config": "workspace:*",
+		"@talismn/tsconfig": "workspace:*",
 		"@types/jest": "^27.5.1",
 		"@types/react": "^18.0.17",
 		eslint: "^8.4.0",
@@ -503,10 +488,25 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     id
   }) => id);
   const addressesByToken = Object.fromEntries(tokenIds.map(tokenId => [tokenId, addresses]));
+  const subscriptionId = balances.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 = () => {
+    balances.deleteSubscriptionId();
+  };
   const updateDb = balances$1 => {
     const putBalances = Object.entries(balances$1.toJSON()).map(([id, balance]) => ({
       id,
-      ...balance
+      ...balance,
+      status: balances.BalanceStatusLive(subscriptionId)
     }));
     balances.db.transaction("rw", balances.db.balances, async () => await balances.db.balances.bulkPut(putBalances));
   };
@@ -525,7 +525,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     const unsub = balances.balances(balanceModule, addressesByModuleToken, (error, balances$1) => {
       // log errors
       if (error) {
-        if (error?.type === "STALE_RPC_ERROR") return balances.db.balances.where({
+        if (error?.type === "STALE_RPC_ERROR" || error?.type === "WEBSOCKET_ALLOCATION_EXHAUSTED_ERROR") return balances.db.balances.where({
           source: balanceModule.type,
           chainId: error.chainId
         }).filter(balance => {
@@ -548,15 +548,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
       unsub.then(unsubscribe => {
         setTimeout(unsubscribe, 2_000);
       });
-      balances.db.balances.where({
-        source: balanceModule.type
-      }).filter(balance => {
-        if (!Object.keys(addressesByModuleToken).includes(balance.tokenId)) return false;
-        if (!addressesByModuleToken[balance.tokenId].includes(balance.address)) return false;
-        return true;
-      }).modify({
-        status: "cache"
-      });
+      balances.deleteSubscriptionId();
     };
   });
   const unsubscribeAll = () => {
@@ -645,7 +637,7 @@ function useBalances(addressesByToken) {
     balances: balances$1
   } = useDbCache();
   const hydrate = useBalancesHydrate();
-  return react.useMemo(() => new balances.Balances(balances$1.filter(balance => {
+  return react.useMemo(() => new balances.Balances(balances.deriveStatuses([...balances.getValidSubscriptionIds()], balances$1.filter(balance => {
     // check that this balance is included in our queried balance modules
     if (!balanceModules.map(({
       type
@@ -662,7 +654,7 @@ function useBalances(addressesByToken) {
 
     // keep this balance
     return true;
-  }),
+  })),
   // hydrate balance chains, evmNetworks, tokens and tokenRates
   hydrate), [balances$1, hydrate, balanceModules, addressesByToken]);
 }
@@ -671,11 +663,10 @@ function useBalances(addressesByToken) {
  * Given a collection of `Balances`, this hook returns a `BalancesStatus` summary for the collection.
  *
  * @param balances The collection of balances to get the status from.
- * @param isLoadingLocks Because the wallet currently fetches locks outside of the balances api, this param can be used to indicate that the locks are still loading, even if the `Balances` collection is not.
  * @returns An instance of `BalancesStatus` which represents the status of the balances collection.
 
  */
-const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
+const useBalancesStatus = balances => react.useMemo(() => {
   // stale
   const staleChains = getStaleChains(balances);
   if (staleChains.length > 0) return {
@@ -685,7 +676,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
 
   // fetching
   const hasCachedBalances = balances.each.some(b => b.status === "cache");
-  if (hasCachedBalances || isLoadingLocks) return {
+  if (hasCachedBalances) return {
     status: "fetching"
   };
 
@@ -693,7 +684,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => react.useMemo(() => {
   return {
     status: "live"
   };
-}, [balances, isLoadingLocks]);
+}, [balances]);
 const getStaleChains = balances => [...new Set(balances.sorted.filter(b => b.status === "stale").map(b => b.chain?.name ?? b.chainId ?? "Unknown"))];
 
 const BalancesProvider = ({

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

@@ -4,7 +4,7 @@ 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, balances, Balances } from '@talismn/balances';
+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';
@@ -112,21 +112,6 @@ const DEFAULT_VALUE = {
 };
 const consolidateDbCache = (chainsMap, evmNetworksMap, tokensMap, tokenRates, allBalances) => {
   if (!chainsMap || !evmNetworksMap || !tokensMap || !tokenRates || !allBalances) return DEFAULT_VALUE;
-
-  // BEGIN: temp hack to indicate that
-  //          - EVM GLMR is a mirror of substrate GLMR
-  //          - 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]));
@@ -175,7 +160,7 @@ const useDbCacheProvider = () => {
   // debounce every 500ms to prevent hammering UI with updates
   useDebounce(() => {
     setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates, rawBalances));
-  }, 500, [chainList, evmNetworkList, tokenList, rawBalances, tokenRates]);
+  }, 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
@@ -184,14 +169,14 @@ const useDbCacheProvider = () => {
       setDbData(consolidateDbCache(chainList, evmNetworkList, tokenList, tokenRates, rawBalances));
       refInitialized.current = true;
     }
-  }, [chainList, evmNetworkList, rawBalances, tokenList, tokenRates]);
+  }, [chainList, evmNetworkList, tokenList, tokenRates, rawBalances]);
   return dbData;
 };
 const [DbCacheProvider, useDbCache] = provideContext(useDbCacheProvider);
 
 var packageJson = {
 	name: "@talismn/balances-react",
-	version: "0.4.0",
+	version: "0.4.1",
 	author: "Talisman",
 	homepage: "https://talisman.xyz",
 	license: "UNLICENSED",
@@ -213,27 +198,27 @@ var packageJson = {
 	},
 	scripts: {
 		test: "jest",
-		lint: "eslint . --max-warnings 0",
+		lint: "eslint src --max-warnings 0",
 		clean: "rm -rf dist && rm -rf .turbo rm -rf 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/token-rates": "workspace:^",
+		"@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/token-rates": "workspace:*",
 		anylogger: "^1.0.11",
 		"blueimp-md5": "2.19.0",
 		dexie: "^3.2.3",
 		"dexie-react-hooks": "^1.1.3",
 		"react-use": "^17.4.0",
-		rxjs: "^7.8.0"
+		rxjs: "^7.8.1"
 	},
 	devDependencies: {
-		"@talismn/eslint-config": "workspace:^",
-		"@talismn/tsconfig": "workspace:^",
+		"@talismn/eslint-config": "workspace:*",
+		"@talismn/tsconfig": "workspace:*",
 		"@types/jest": "^27.5.1",
 		"@types/react": "^18.0.17",
 		eslint: "^8.4.0",
@@ -494,10 +479,25 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     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();
+  };
   const updateDb = balances => {
     const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
       id,
-      ...balance
+      ...balance,
+      status: BalanceStatusLive(subscriptionId)
     }));
     db$1.transaction("rw", db$1.balances, async () => await db$1.balances.bulkPut(putBalances));
   };
@@ -516,7 +516,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
     const unsub = balances(balanceModule, addressesByModuleToken, (error, balances) => {
       // log errors
       if (error) {
-        if (error?.type === "STALE_RPC_ERROR") return db$1.balances.where({
+        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 => {
@@ -539,15 +539,7 @@ const subscribeBalances = (tokens, addresses, balanceModules) => {
       unsub.then(unsubscribe => {
         setTimeout(unsubscribe, 2_000);
       });
-      db$1.balances.where({
-        source: balanceModule.type
-      }).filter(balance => {
-        if (!Object.keys(addressesByModuleToken).includes(balance.tokenId)) return false;
-        if (!addressesByModuleToken[balance.tokenId].includes(balance.address)) return false;
-        return true;
-      }).modify({
-        status: "cache"
-      });
+      deleteSubscriptionId();
     };
   });
   const unsubscribeAll = () => {
@@ -636,7 +628,7 @@ function useBalances(addressesByToken) {
     balances
   } = useDbCache();
   const hydrate = useBalancesHydrate();
-  return useMemo(() => new Balances(balances.filter(balance => {
+  return useMemo(() => new Balances(deriveStatuses([...getValidSubscriptionIds()], balances.filter(balance => {
     // check that this balance is included in our queried balance modules
     if (!balanceModules.map(({
       type
@@ -653,7 +645,7 @@ function useBalances(addressesByToken) {
 
     // keep this balance
     return true;
-  }),
+  })),
   // hydrate balance chains, evmNetworks, tokens and tokenRates
   hydrate), [balances, hydrate, balanceModules, addressesByToken]);
 }
@@ -662,11 +654,10 @@ function useBalances(addressesByToken) {
  * Given a collection of `Balances`, this hook returns a `BalancesStatus` summary for the collection.
  *
  * @param balances The collection of balances to get the status from.
- * @param isLoadingLocks Because the wallet currently fetches locks outside of the balances api, this param can be used to indicate that the locks are still loading, even if the `Balances` collection is not.
  * @returns An instance of `BalancesStatus` which represents the status of the balances collection.
 
  */
-const useBalancesStatus = (balances, isLoadingLocks) => useMemo(() => {
+const useBalancesStatus = balances => useMemo(() => {
   // stale
   const staleChains = getStaleChains(balances);
   if (staleChains.length > 0) return {
@@ -676,7 +667,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => useMemo(() => {
 
   // fetching
   const hasCachedBalances = balances.each.some(b => b.status === "cache");
-  if (hasCachedBalances || isLoadingLocks) return {
+  if (hasCachedBalances) return {
     status: "fetching"
   };
 
@@ -684,7 +675,7 @@ const useBalancesStatus = (balances, isLoadingLocks) => useMemo(() => {
   return {
     status: "live"
   };
-}, [balances, isLoadingLocks]);
+}, [balances]);
 const getStaleChains = balances => [...new Set(balances.sorted.filter(b => b.status === "stale").map(b => b.chain?.name ?? b.chainId ?? "Unknown"))];
 
 const BalancesProvider = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talismn/balances-react",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "author": "Talisman",
   "homepage": "https://talisman.xyz",
   "license": "UNLICENSED",
@@ -22,27 +22,27 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "eslint . --max-warnings 0",
+    "lint": "eslint src --max-warnings 0",
     "clean": "rm -rf dist && rm -rf .turbo rm -rf node_modules"
   },
   "dependencies": {
-    "@talismn/balances": "^0.4.0",
-    "@talismn/chain-connector": "^0.4.3",
-    "@talismn/chain-connector-evm": "^0.4.3",
-    "@talismn/chaindata-provider": "^0.4.3",
-    "@talismn/chaindata-provider-extension": "^0.4.3",
-    "@talismn/connection-meta": "^0.0.2",
-    "@talismn/token-rates": "^0.1.15",
+    "@talismn/balances": "0.4.1",
+    "@talismn/chain-connector": "0.4.4",
+    "@talismn/chain-connector-evm": "0.4.4",
+    "@talismn/chaindata-provider": "0.4.4",
+    "@talismn/chaindata-provider-extension": "0.4.4",
+    "@talismn/connection-meta": "0.0.3",
+    "@talismn/token-rates": "0.1.16",
     "anylogger": "^1.0.11",
     "blueimp-md5": "2.19.0",
     "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.3",
     "react-use": "^17.4.0",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@talismn/eslint-config": "^0.0.1",
-    "@talismn/tsconfig": "^0.0.2",
+    "@talismn/eslint-config": "0.0.2",
+    "@talismn/tsconfig": "0.0.2",
     "@types/jest": "^27.5.1",
     "@types/react": "^18.0.17",
     "eslint": "^8.4.0",