@talismn/balances-react 0.3.0 → 0.3.1

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

@@ -0,0 +1,369 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var balances = require('@talismn/balances');
+var chainConnector = require('@talismn/chain-connector');
+var chainConnectorEvm = require('@talismn/chain-connector-evm');
+var dexieReactHooks = require('dexie-react-hooks');
+var react = require('react');
+var reactUse = require('react-use');
+var anylogger = require('anylogger');
+var chaindataProviderExtension = require('@talismn/chaindata-provider-extension');
+var tokenRates = require('@talismn/token-rates');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var anylogger__default = /*#__PURE__*/_interopDefault(anylogger);
+
+var packageJson = {
+	name: "@talismn/balances-react",
+	version: "0.3.1",
+	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__default["default"](packageJson.name);
+
+// TODO: Allow user to call useChaindata from multiple places
+
+function useChaindata() {
+  const [chaindataProvider, setChaindataProvider] = react.useState(null);
+
+  // this number is incremented each time the chaindataProvider has fetched new data
+  const [generation, setGeneration] = react.useState(0);
+  react.useEffect(() => {
+    const chaindataProvider = new chaindataProviderExtension.ChaindataProviderExtension();
+    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;
+    };
+  }, []);
+  if (chaindataProvider) chaindataProvider.generation = generation;
+  return chaindataProvider;
+}
+function useChains(chaindata) {
+  const [chains, setChains] = react.useState();
+  react.useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.chains().then(chains => {
+      if (thisGeneration !== chaindata.generation) return;
+      setChains(chains);
+    });
+  }, [chaindata?.generation]);
+  return chains || {};
+}
+function useChain(chaindata, chainId) {
+  const [chain, setChain] = react.useState();
+  react.useEffect(() => {
+    if (chaindata === null) return;
+    if (!chainId) return;
+    chaindata.getChain(chainId).then(setChain);
+  }, [chaindata?.generation]);
+  return chain;
+}
+function useEvmNetworks(chaindata) {
+  const [evmNetworks, setEvmNetworks] = react.useState();
+  react.useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.evmNetworks().then(evmNetworks => {
+      if (thisGeneration !== chaindata.generation) return;
+      setEvmNetworks(evmNetworks);
+    });
+  }, [chaindata?.generation]);
+  return evmNetworks || {};
+}
+function useEvmNetwork(chaindata, evmNetworkId) {
+  const [evmNetwork, setEvmNetwork] = react.useState();
+  react.useEffect(() => {
+    if (chaindata === null) return;
+    if (!evmNetworkId) return;
+    chaindata.getEvmNetwork(evmNetworkId).then(setEvmNetwork);
+  }, [chaindata?.generation]);
+  return evmNetwork;
+}
+function useTokens(chaindata) {
+  const [tokens, setTokens] = react.useState();
+  react.useEffect(() => {
+    if (!chaindata) return;
+    const thisGeneration = chaindata.generation;
+    chaindata.tokens().then(tokens => {
+      if (thisGeneration !== chaindata.generation) return;
+      setTokens(tokens);
+    });
+  }, [chaindata?.generation]);
+  return tokens || {};
+}
+function useToken(chaindata, tokenId) {
+  const [token, setToken] = react.useState();
+  react.useEffect(() => {
+    if (chaindata === null) return;
+    if (!tokenId) return;
+    chaindata.getToken(tokenId).then(setToken);
+  }, [chaindata?.generation]);
+  return token;
+}
+
+function useTokenRates(tokens) {
+  const generation = react.useRef(0);
+  const [tokenRates$1, setTokenRates] = react.useState();
+  react.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;
+    tokenRates.fetchTokenRates(tokens).then(tokenRates => {
+      if (thisGeneration !== generation.current) return;
+      setTokenRates(tokenRates);
+    });
+  }, [tokens]);
+  return tokenRates$1 || {};
+}
+
+// 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) {
+  useBalancesSubscriptions(balanceModules, chaindataProvider, addressesByToken);
+  const chains = useChains(chaindataProvider);
+  const evmNetworks = useEvmNetworks(chaindataProvider);
+  const tokens = useTokens(chaindataProvider);
+  const tokenRates = useTokenRates(tokens);
+  const balances$1 = dexieReactHooks.useLiveQuery(async () => new balances.Balances(await balances.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] = react.useState(balances$1);
+  reactUse.useDebounce(() => balances$1 && setDebouncedBalances(balances$1), 100, [balances$1]);
+  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 = balances.balances(balanceModule, chainConnectors, chaindataProvider, addressesByToken, (error, balances$1) => {
+        if (error) return log.error(`Failed to fetch ${balanceModule.type} balances`, error);
+        if (!balances$1) 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$1.toJSON()).map(([id, balance]) => ({
+          id,
+          ...balance
+        }));
+        balances.db.transaction("rw", balances.db.balances, async () => await balances.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
+      balances.db.transaction("rw", balances.db.balances, async () => await balances.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);
+  react.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$1, setChainConnector] = react.useState(null);
+  react.useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnector(new chainConnector.ChainConnector(chaindataProvider));
+  }, [chaindataProvider]);
+  return chainConnector$1;
+}
+// TODO: Allow advanced users of this library to provide their own chain connector
+function useChainConnectorEvm(chaindataProvider) {
+  const [chainConnectorEvm$1, setChainConnectorEvm] = react.useState(null);
+  react.useEffect(() => {
+    if (chaindataProvider === null) return;
+    setChainConnectorEvm(new chainConnectorEvm.ChainConnectorEvm(chaindataProvider));
+  }, [chaindataProvider]);
+  return chainConnectorEvm$1;
+}
+
+exports.useBalances = useBalances;
+exports.useChain = useChain;
+exports.useChaindata = useChaindata;
+exports.useChains = useChains;
+exports.useEvmNetwork = useEvmNetwork;
+exports.useEvmNetworks = useEvmNetworks;
+exports.useToken = useToken;
+exports.useTokenRates = useTokenRates;
+exports.useTokens = useTokens;