@talismn/balances-react 0.3.0 → 0.3.2

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

@@ -0,0 +1,356 @@
+import { Balances, db, balances } from '@talismn/balances';
+import { ChainConnector } from '@talismn/chain-connector';
+import { ChainConnectorEvm } from '@talismn/chain-connector-evm';
+import { useLiveQuery } from 'dexie-react-hooks';
+import { useState, useEffect, useRef } from 'react';
+import { useDebounce } from 'react-use';
+import anylogger from 'anylogger';
+import { ChaindataProviderExtension } from '@talismn/chaindata-provider-extension';
+import { fetchTokenRates } from '@talismn/token-rates';
+
+var packageJson = {
+	name: "@talismn/balances-react",
+	version: "0.3.2",
+	author: "Talisman",
+	homepage: "https://talisman.xyz",
+	license: "UNLICENSED",
+	publishConfig: {
+		access: "public"
+	},
+	repository: {
+		directory: "packages/balances-react",
+		type: "git",
+		url: "https://github.com/talismansociety/talisman.git"
+	},
+	main: "dist/talismn-balances-react.cjs.js",
+	module: "dist/talismn-balances-react.esm.js",
+	files: [
+		"/dist"
+	],
+	engines: {
+		node: ">=14"
+	},
+	scripts: {
+		test: "jest",
+		lint: "eslint . --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/token-rates": "workspace:^",
+		anylogger: "^1.0.11",
+		dexie: "^3.2.2",
+		"dexie-react-hooks": "^1.1.1",
+		"react-use": "^17.4.0"
+	},
+	devDependencies: {
+		"@talismn/eslint-config": "workspace:^",
+		"@talismn/tsconfig": "workspace:^",
+		"@types/jest": "^27.5.1",
+		"@types/react": "^18.0.17",
+		eslint: "^8.4.0",
+		jest: "^28.1.0",
+		react: "^18.2.0",
+		"ts-jest": "^28.0.2",
+		typescript: "^4.6.4"
+	},
+	peerDependencies: {
+		react: "*",
+		"react-dom": "*"
+	},
+	eslintConfig: {
+		root: true,
+		"extends": [
+			"@talismn/eslint-config/react"
+		]
+	}
+};
+
+var log = anylogger(packageJson.name);
+
+// TODO: Allow user to call useChaindata from multiple places
+function useChaindata(options = {}) {
+  const [chaindataProvider, setChaindataProvider] = useState(null);
+
+  // this number is incremented each time the chaindataProvider has fetched new data
+  const [generation, setGeneration] = useState(0);
+  useEffect(() => {
+    const chaindataProvider = new ChaindataProviderExtension({
+      onfinalityApiKey: options.onfinalityApiKey
+    });
+    let shouldHydrate = true;
+    const timer = 300_000; // 300_000ms = 300s = 5 minutes
+    const hydrate = async () => {
+      if (!shouldHydrate) return;
+      try {
+        const updated = await chaindataProvider.hydrate();
+        if (updated) setGeneration(generation => (generation + 1) % Number.MAX_SAFE_INTEGER);
+        setTimeout(hydrate, timer);
+      } catch (error) {
+        const retryTimeout = 5_000; // 5_000ms = 5 seconds
+        log.error(`Failed to fetch chaindata, retrying in ${Math.round(retryTimeout / 1000)} seconds`, error);
+        setTimeout(hydrate, retryTimeout);
+      }
+    };
+    setChaindataProvider(chaindataProvider);
+    hydrate();
+    return () => {
+      shouldHydrate = false;
+    };
+  }, [options.onfinalityApiKey]);
+  if (chaindataProvider) chaindataProvider.generation = generation;
+  return chaindataProvider;
+}
+function useChains(chaindata) {
+  const [chains, setChains] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.chains().then(chains => {
+      if (thisGeneration !== chaindata.generation) return;
+      setChains(chains);
+    });
+  }, [chaindata, chaindata?.generation]);
+  return chains || {};
+}
+function useChain(chaindata, chainId) {
+  const [chain, setChain] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!chainId) return;
+    chaindata.getChain(chainId).then(setChain);
+  }, [chainId, chaindata, chaindata?.generation]);
+  return chain;
+}
+function useEvmNetworks(chaindata) {
+  const [evmNetworks, setEvmNetworks] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.evmNetworks().then(evmNetworks => {
+      if (thisGeneration !== chaindata.generation) return;
+      setEvmNetworks(evmNetworks);
+    });
+  }, [chaindata, chaindata?.generation]);
+  return evmNetworks || {};
+}
+function useEvmNetwork(chaindata, evmNetworkId) {
+  const [evmNetwork, setEvmNetwork] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!evmNetworkId) return;
+    chaindata.getEvmNetwork(evmNetworkId).then(setEvmNetwork);
+  }, [chaindata, chaindata?.generation, evmNetworkId]);
+  return evmNetwork;
+}
+function useTokens(chaindata) {
+  const [tokens, setTokens] = useState();
+  useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.tokens().then(tokens => {
+      if (thisGeneration !== chaindata.generation) return;
+      setTokens(tokens);
+    });
+  }, [chaindata, chaindata?.generation]);
+  return tokens || {};
+}
+function useToken(chaindata, tokenId) {
+  const [token, setToken] = useState();
+  useEffect(() => {
+    if (chaindata === null) return;
+    if (!tokenId) return;
+    chaindata.getToken(tokenId).then(setToken);
+  }, [chaindata, chaindata?.generation, tokenId]);
+  return token;
+}
+
+function useTokenRates(tokens) {
+  const generation = useRef(0);
+  const [tokenRates, setTokenRates] = useState();
+  useEffect(() => {
+    if (!tokens) return;
+    if (Object.keys(tokens).length < 1) return;
+
+    // when we make a new request, we want to ignore any old requests which haven't yet completed
+    // otherwise we risk replacing the most recent data with older data
+    generation.current = (generation.current + 1) % Number.MAX_SAFE_INTEGER;
+    const thisGeneration = generation.current;
+    fetchTokenRates(tokens).then(tokenRates => {
+      if (thisGeneration !== generation.current) return;
+      setTokenRates(tokenRates);
+    });
+  }, [tokens]);
+  return tokenRates || {};
+}
+
+// TODO: Add the equivalent functionalty of `useDbCache` directly to this library.
+//
+//       How it will work:
+//
+//       useChains/useEvmNetworks/useTokens/useTokenRates will all make use of a
+//       useCachedDb hook, which internally subscribes to all of the db tables
+//       for everything, and then filters the subscribed data based on what params
+//       the caller of useChains/useTokens/etc has provided.
+function useBalances(
+// TODO: Make this array of BalanceModules more type-safe
+balanceModules, chaindataProvider, addressesByToken, options = {}) {
+  useBalancesSubscriptions(balanceModules, chaindataProvider, addressesByToken, options);
+  const chains = useChains(chaindataProvider);
+  const evmNetworks = useEvmNetworks(chaindataProvider);
+  const tokens = useTokens(chaindataProvider);
+  const tokenRates = useTokenRates(tokens);
+  const balances = useLiveQuery(async () => new Balances(await db.balances.filter(balance => {
+    // check that this balance is included in our queried balance modules
+    if (!balanceModules.map(({
+      type
+    }) => 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;
+  }).toArray(),
+  // hydrate balance chains, evmNetworks, tokens and tokenRates
+  {
+    chains,
+    evmNetworks,
+    tokens,
+    tokenRates
+  }), [balanceModules, addressesByToken, chains, evmNetworks, tokens, tokenRates]);
+
+  // debounce every 100ms to prevent hammering UI with updates
+  const [debouncedBalances, setDebouncedBalances] = useState(balances);
+  useDebounce(() => balances && setDebouncedBalances(balances), 100, [balances]);
+  return debouncedBalances;
+}
+
+// TODO: Turn into react context
+const subscriptions = {};
+
+// This hook is responsible for allowing us to call useBalances
+// from multiple components, without setting up unnecessary
+// balance subscriptions
+function useBalancesSubscriptions(
+// TODO: Make this array of BalanceModules more type-safe
+balanceModules, chaindataProvider, addressesByToken, options = {}) {
+  // const subscriptions = useRef<
+  //   Record<string, { unsub: Promise<() => void>; refcount: number; generation: number }>
+  // >({})
+
+  const addSubscription = (key, balanceModule, chainConnectors, chaindataProvider, addressesByToken) => {
+    // create subscription if it doesn't already exist
+    if (!subscriptions[key] || subscriptions[key].refcount === 0) {
+      const generation = ((subscriptions[key]?.generation || 0) + 1) % Number.MAX_SAFE_INTEGER;
+      const unsub = balances(balanceModule, chainConnectors, chaindataProvider, addressesByToken, (error, balances) => {
+        if (error) return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
+        if (!balances) return;
+
+        // ignore balances from old subscriptions which are still in the process of unsubscribing
+        if (subscriptions[key].generation !== generation) return;
+        const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
+          id,
+          ...balance
+        }));
+        db.transaction("rw", db.balances, async () => await db.balances.bulkPut(putBalances));
+      });
+      subscriptions[key] = {
+        unsub,
+        refcount: 0,
+        generation
+      };
+    }
+
+    // bump up the refcount by 1
+    subscriptions[key].refcount += 1;
+  };
+  const removeSubscription = (key, balanceModule, addressesByToken) => {
+    // ignore dead subscriptions
+    if (!subscriptions[key] || subscriptions[key].refcount === 0) return;
+
+    // drop the refcount by one
+    subscriptions[key].refcount -= 1;
+
+    // unsubscribe if refcount is now 0 (nobody wants this subcription anymore)
+    if (subscriptions[key].refcount < 1) {
+      // remove subscription
+      subscriptions[key].unsub.then(unsub => unsub());
+      delete subscriptions[key];
+
+      // set this subscription's balances in the store to status: cache
+      db.transaction("rw", db.balances, async () => await db.balances.filter(balance => {
+        if (balance.source !== balanceModule.type) return false;
+        if (!Object.keys(addressesByToken).includes(balance.tokenId)) return false;
+        if (!addressesByToken[balance.tokenId].includes(balance.address)) return false;
+        return true;
+      }).modify({
+        status: "cache"
+      }));
+    }
+  };
+  const chainConnector = useChainConnector(chaindataProvider);
+  const chainConnectorEvm = useChainConnectorEvm(chaindataProvider, options);
+  const tokens = useTokens(chaindataProvider);
+  useEffect(() => {
+    if (chainConnector === null) return;
+    if (chainConnectorEvm === null) return;
+    if (chaindataProvider === null) return;
+    if (addressesByToken === null) return;
+    const unsubs = balanceModules.map(balanceModule => {
+      const subscriptionKey = `${balanceModule.type}-${JSON.stringify(addressesByToken)}`;
+
+      // filter out tokens to only include those which this module knows how to fetch balances for
+      const moduleTokenIds = Object.values(tokens).filter(({
+        type
+      }) => type === balanceModule.type).map(({
+        id
+      }) => id);
+      const addressesByModuleToken = Object.fromEntries(Object.entries(addressesByToken).filter(([tokenId]) => moduleTokenIds.includes(tokenId)));
+
+      // add balance subscription for this module
+      addSubscription(subscriptionKey, balanceModule, {
+        substrate: chainConnector,
+        evm: chainConnectorEvm
+      }, chaindataProvider, addressesByModuleToken);
+
+      // return an unsub method, to be called when this effect unmounts
+      return () => removeSubscription(subscriptionKey, balanceModule, addressesByToken);
+    });
+    const unsubAll = () => unsubs.forEach(unsub => unsub());
+    return unsubAll;
+  }, [addressesByToken, balanceModules, chainConnector, chainConnectorEvm, chaindataProvider, tokens]);
+}
+
+// TODO: Allow advanced users of this library to provide their own chain connector
+function useChainConnector(chaindataProvider) {
+  const [chainConnector, setChainConnector] = useState(null);
+  useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnector(new ChainConnector(chaindataProvider));
+  }, [chaindataProvider]);
+  return chainConnector;
+}
+// TODO: Allow advanced users of this library to provide their own chain connector
+function useChainConnectorEvm(chaindataProvider, options = {}) {
+  const [chainConnectorEvm, setChainConnectorEvm] = useState(null);
+  useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnectorEvm(new ChainConnectorEvm(chaindataProvider, {
+      onfinalityApiKey: options.onfinalityApiKey
+    }));
+  }, [chaindataProvider, options.onfinalityApiKey]);
+  return chainConnectorEvm;
+}
+
+export { useBalances, useChain, useChaindata, useChains, useEvmNetwork, useEvmNetworks, useToken, useTokenRates, useTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talismn/balances-react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "author": "Talisman",
   "homepage": "https://talisman.xyz",
   "license": "UNLICENSED",
@@ -12,8 +12,8 @@
     "type": "git",
     "url": "https://github.com/talismansociety/talisman.git"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/talismn-balances-react.cjs.js",
+  "module": "dist/talismn-balances-react.esm.js",
   "files": [
     "/dist"
   ],
@@ -21,29 +21,25 @@
     "node": ">=14"
   },
   "scripts": {
-    "dev": "tsc --watch --declarationMap",
-    "build": "tsc --declarationMap",
-    "build:packages:prod": "rm -rf dist && tsc",
-    "prepack": "yarn build:packages:prod",
     "test": "jest",
     "lint": "eslint . --max-warnings 0",
     "clean": "rm -rf dist && rm -rf .turbo rm -rf node_modules"
   },
   "dependencies": {
-    "@talismn/balances": "^0.3.0",
-    "@talismn/chain-connector": "^0.2.1",
-    "@talismn/chain-connector-evm": "^0.4.0",
-    "@talismn/chaindata-provider": "^0.2.1",
-    "@talismn/chaindata-provider-extension": "^0.2.1",
-    "@talismn/token-rates": "^0.1.12",
+    "@talismn/balances": "^0.3.2",
+    "@talismn/chain-connector": "^0.4.1",
+    "@talismn/chain-connector-evm": "^0.4.1",
+    "@talismn/chaindata-provider": "^0.4.1",
+    "@talismn/chaindata-provider-extension": "^0.4.1",
+    "@talismn/token-rates": "^0.1.13",
     "anylogger": "^1.0.11",
     "dexie": "^3.2.2",
     "dexie-react-hooks": "^1.1.1",
     "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@talismn/eslint-config": "^0.0.0",
-    "@talismn/tsconfig": "^0.0.1",
+    "@talismn/eslint-config": "^0.0.1",
+    "@talismn/tsconfig": "^0.0.2",
     "@types/jest": "^27.5.1",
     "@types/react": "^18.0.17",
     "eslint": "^8.4.0",
@@ -59,7 +55,7 @@
   "eslintConfig": {
     "root": true,
     "extends": [
-      "@talismn/eslint-config"
+      "@talismn/eslint-config/react"
     ]
   }
 }

package/dist/hooks/index.js

@@ -1,3 +0,0 @@
-export * from "./useBalances";
-export * from "./useChaindata";
-export * from "./useTokenRates";

package/dist/hooks/useBalances.d.ts

@@ -1,3 +0,0 @@
-import { AddressesByToken, BalanceModule, Balances } from "@talismn/balances";
-import { ChaindataProvider, Token } from "@talismn/chaindata-provider";
-export declare function useBalances(balanceModules: Array<BalanceModule<any, any, any, any>>, chaindataProvider: ChaindataProvider | null, addressesByToken: AddressesByToken<Token> | null): Balances | undefined;

package/dist/hooks/useBalances.js

@@ -1,158 +0,0 @@
-import { Balances, balances as balancesFn, } from "@talismn/balances";
-import { db } from "@talismn/balances";
-import { ChainConnector } from "@talismn/chain-connector";
-import { ChainConnectorEvm } from "@talismn/chain-connector-evm";
-import { useLiveQuery } from "dexie-react-hooks";
-import { useEffect, useState } from "react";
-import { useDebounce } from "react-use";
-import log from "../log";
-import { useChains, useEvmNetworks, useTokens } from "./useChaindata";
-import { useTokenRates } from "./useTokenRates";
-// TODO: Add the equivalent functionalty of `useDbCache` directly to this library.
-//
-//       How it will work:
-//
-//       useChains/useEvmNetworks/useTokens/useTokenRates will all make use of a
-//       useCachedDb hook, which internally subscribes to all of the db tables
-//       for everything, and then filters the subscribed data based on what params
-//       the caller of useChains/useTokens/etc has provided.
-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 tokenRates = useTokenRates(tokens);
-    const balances = useLiveQuery(async () => new Balances(await db.balances
-        .filter((balance) => {
-        // check that this balance is included in our queried balance modules
-        if (!balanceModules.map(({ type }) => 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;
-    })
-        .toArray(), 
-    // hydrate balance chains, evmNetworks, tokens and tokenRates
-    { chains, evmNetworks, tokens, tokenRates }), [balanceModules, addressesByToken, chains, evmNetworks, tokens, tokenRates]);
-    // debounce every 100ms to prevent hammering UI with updates
-    const [debouncedBalances, setDebouncedBalances] = useState(balances);
-    useDebounce(() => balances && setDebouncedBalances(balances), 100, [balances]);
-    return debouncedBalances;
-}
-// TODO: Turn into react context
-const subscriptions = {};
-// This hook is responsible for allowing us to call useBalances
-// from multiple components, without setting up unnecessary
-// balance subscriptions
-function useBalancesSubscriptions(
-// TODO: Make this array of BalanceModules more type-safe
-balanceModules, chaindataProvider, addressesByToken) {
-    // const subscriptions = useRef<
-    //   Record<string, { unsub: Promise<() => void>; refcount: number; generation: number }>
-    // >({})
-    const addSubscription = (key, balanceModule, chainConnectors, chaindataProvider, addressesByToken) => {
-        // create subscription if it doesn't already exist
-        if (!subscriptions[key] || subscriptions[key].refcount === 0) {
-            const generation = ((subscriptions[key]?.generation || 0) + 1) % Number.MAX_SAFE_INTEGER;
-            const unsub = balancesFn(balanceModule, chainConnectors, chaindataProvider, addressesByToken, (error, balances) => {
-                if (error)
-                    return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
-                if (!balances)
-                    return;
-                // ignore balances from old subscriptions which are still in the process of unsubscribing
-                if (subscriptions[key].generation !== generation)
-                    return;
-                const putBalances = Object.entries(balances.toJSON()).map(([id, balance]) => ({
-                    id,
-                    ...balance,
-                }));
-                db.transaction("rw", db.balances, async () => await db.balances.bulkPut(putBalances));
-            });
-            subscriptions[key] = { unsub, refcount: 0, generation };
-        }
-        // bump up the refcount by 1
-        subscriptions[key].refcount += 1;
-    };
-    const removeSubscription = (key, balanceModule, addressesByToken) => {
-        // ignore dead subscriptions
-        if (!subscriptions[key] || subscriptions[key].refcount === 0)
-            return;
-        // drop the refcount by one
-        subscriptions[key].refcount -= 1;
-        // unsubscribe if refcount is now 0 (nobody wants this subcription anymore)
-        if (subscriptions[key].refcount < 1) {
-            // remove subscription
-            subscriptions[key].unsub.then((unsub) => unsub());
-            delete subscriptions[key];
-            // set this subscription's balances in the store to status: cache
-            db.transaction("rw", db.balances, async () => await db.balances
-                .filter((balance) => {
-                if (balance.source !== balanceModule.type)
-                    return false;
-                if (!Object.keys(addressesByToken).includes(balance.tokenId))
-                    return false;
-                if (!addressesByToken[balance.tokenId].includes(balance.address))
-                    return false;
-                return true;
-            })
-                .modify({ status: "cache" }));
-        }
-    };
-    const chainConnector = useChainConnector(chaindataProvider);
-    const chainConnectorEvm = useChainConnectorEvm(chaindataProvider);
-    const tokens = useTokens(chaindataProvider);
-    useEffect(() => {
-        if (chainConnector === null)
-            return;
-        if (chainConnectorEvm === null)
-            return;
-        if (chaindataProvider === null)
-            return;
-        if (addressesByToken === null)
-            return;
-        const unsubs = balanceModules.map((balanceModule) => {
-            const subscriptionKey = `${balanceModule.type}-${JSON.stringify(addressesByToken)}`;
-            // filter out tokens to only include those which this module knows how to fetch balances for
-            const moduleTokenIds = Object.values(tokens)
-                .filter(({ type }) => type === balanceModule.type)
-                .map(({ id }) => id);
-            const addressesByModuleToken = Object.fromEntries(Object.entries(addressesByToken).filter(([tokenId]) => moduleTokenIds.includes(tokenId)));
-            // add balance subscription for this module
-            addSubscription(subscriptionKey, balanceModule, { substrate: chainConnector, evm: chainConnectorEvm }, chaindataProvider, addressesByModuleToken);
-            // return an unsub method, to be called when this effect unmounts
-            return () => removeSubscription(subscriptionKey, balanceModule, addressesByToken);
-        });
-        const unsubAll = () => unsubs.forEach((unsub) => unsub());
-        return unsubAll;
-    }, [addressesByToken, chainConnector, chainConnectorEvm, chaindataProvider, tokens]);
-}
-// TODO: Allow advanced users of this library to provide their own chain connector
-function useChainConnector(chaindataProvider) {
-    const [chainConnector, setChainConnector] = useState(null);
-    useEffect(() => {
-        if (chaindataProvider === null)
-            return;
-        setChainConnector(new ChainConnector(chaindataProvider));
-    }, [chaindataProvider]);
-    return chainConnector;
-}
-// TODO: Allow advanced users of this library to provide their own chain connector
-function useChainConnectorEvm(chaindataProvider) {
-    const [chainConnectorEvm, setChainConnectorEvm] = useState(null);
-    useEffect(() => {
-        if (chaindataProvider === null)
-            return;
-        setChainConnectorEvm(new ChainConnectorEvm(chaindataProvider));
-    }, [chaindataProvider]);
-    return chainConnectorEvm;
-}