@talismn/balances-react 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @talismn/balances-react
 
+## 0.1.8
+
+### Patch Changes
+
+- 3db774a: fix: useBalances creating too many subscriptions when called from multiple components
+- Updated dependencies [cbd4770]
+- Updated dependencies [3db774a]
+  - @talismn/balances-substrate-native@0.1.8
+  - @talismn/balances-substrate-orml@0.1.8
+  - @talismn/balances@0.1.8
+  - @talismn/balances-evm-erc20@0.1.8
+  - @talismn/balances-evm-native@0.1.8
+  - @talismn/balances-example@0.1.8
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/hooks/useBalances.js

@@ -18,6 +18,89 @@ import { useChains, useEvmNetworks, useTokens } from "./useChaindata";
 export function useBalances(
 // TODO: Make this array of BalanceModules more type-safe
 balanceModules, chaindataProvider, addressesByToken) {
+    useBalancesSubscriptions(balanceModules, chaindataProvider, addressesByToken);
+    const chains = useChains(chaindataProvider);
+    const evmNetworks = useEvmNetworks(chaindataProvider);
+    const tokens = useTokens(chaindataProvider);
+    const balances = useLiveQuery(() => __awaiter(this, void 0, void 0, function* () {
+        return new Balances(yield db.balances
+            .filter((balance) => {
+            if (!balanceModules.map(({ type }) => type).includes(balance.source))
+                return false;
+            if (!addressesByToken)
+                return false;
+            if (!Object.keys(addressesByToken).includes(balance.tokenId))
+                return false;
+            if (!addressesByToken[balance.tokenId].includes(balance.address))
+                return false;
+            return true;
+        })
+            .toArray(), { chains, evmNetworks, tokens });
+    }), [balanceModules, addressesByToken, chains, evmNetworks, tokens]);
+    // 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) {
+    // const subscriptions = useRef<
+    //   Record<string, { unsub: Promise<() => void>; refcount: number; generation: number }>
+    // >({})
+    const addSubscription = (key, balanceModule, chainConnector, chaindataProvider, addressesByToken) => {
+        var _a;
+        // create subscription if it doesn't already exist
+        if (!subscriptions[key] || subscriptions[key].refcount === 0) {
+            const generation = ((((_a = subscriptions[key]) === null || _a === void 0 ? void 0 : _a.generation) || 0) + 1) % Number.MAX_SAFE_INTEGER;
+            const unsub = balancesFn(balanceModule, chainConnector, 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]) => (Object.assign({ id }, balance)));
+                db.transaction("rw", db.balances, () => __awaiter(this, void 0, void 0, function* () { return yield 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, () => __awaiter(this, void 0, void 0, function* () {
+                return yield 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);
     useEffect(() => {
         if (chainConnector === null)
@@ -26,28 +109,16 @@ balanceModules, chaindataProvider, addressesByToken) {
             return;
         if (addressesByToken === null)
             return;
-        const unsubscribePromises = balanceModules.map((balanceModule) => balancesFn(balanceModule, chainConnector, chaindataProvider, addressesByToken, (error, balances) => {
-            if (error)
-                return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
-            if (!balances)
-                return;
-            db.transaction("rw", db.balances, () => __awaiter(this, void 0, void 0, function* () {
-                yield db.balances.bulkPut(Object.entries(balances.toJSON()).map(([id, balance]) => (Object.assign({ id }, balance))));
-            }));
-        }));
-        // TODO: Set balances status to cache on unmount
-        return () => {
-            unsubscribePromises.forEach((unsubscribePromise) => unsubscribePromise.then((unsub) => unsub()));
-        };
+        const unsubs = balanceModules.map((balanceModule) => {
+            const subscriptionKey = `${balanceModule.type}-${JSON.stringify(addressesByToken)}`;
+            // add balance subscription for this module
+            addSubscription(subscriptionKey, balanceModule, chainConnector, chaindataProvider, addressesByToken);
+            // 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, chainConnector]);
-    const chains = useChains(chaindataProvider);
-    const evmNetworks = useEvmNetworks(chaindataProvider);
-    const tokens = useTokens(chaindataProvider);
-    const balances = useLiveQuery(() => __awaiter(this, void 0, void 0, function* () { return new Balances(yield db.balances.toArray(), { chains, evmNetworks, tokens }); }), [chains, evmNetworks, tokens]);
-    // debounce every 100ms to prevent hammering UI with updates
-    const [debouncedBalances, setDebouncedBalances] = useState(balances);
-    useDebounce(() => balances && setDebouncedBalances(balances), 100, [balances]);
-    return debouncedBalances;
 }
 // TODO: Allow advanced users of this library to provide their own chain connector
 function useChainConnector(chaindataProvider) {

package/dist/hooks/useChaindata.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { ChaindataProviderExtension } from "@talismn/chaindata-provider-extension";
 import { useEffect, useState } from "react";
 import log from "../log";
+// TODO: Allow user to call useChaindata from multiple places
 export function useChaindata() {
     const [chaindataProvider, setChaindataProvider] = useState(null);
     // this number is incremented each time the chaindataProvider has fetched new data

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talismn/balances-react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "Talisman",
   "homepage": "https://talisman.xyz",
   "license": "UNLICENSED",
@@ -30,12 +30,12 @@
     "clean": "rm -rf dist && rm -rf .turbo rm -rf node_modules"
   },
   "dependencies": {
-    "@talismn/balances": "^0.1.7",
-    "@talismn/balances-evm-erc20": "^0.1.7",
-    "@talismn/balances-evm-native": "^0.1.7",
-    "@talismn/balances-example": "^0.1.7",
-    "@talismn/balances-substrate-native": "^0.1.7",
-    "@talismn/balances-substrate-orml": "^0.1.7",
+    "@talismn/balances": "^0.1.8",
+    "@talismn/balances-evm-erc20": "^0.1.8",
+    "@talismn/balances-evm-native": "^0.1.8",
+    "@talismn/balances-example": "^0.1.8",
+    "@talismn/balances-substrate-native": "^0.1.8",
+    "@talismn/balances-substrate-orml": "^0.1.8",
     "@talismn/chain-connector": "^0.1.4",
     "@talismn/chaindata-provider": "^0.1.4",
     "@talismn/chaindata-provider-extension": "^0.1.4",