@talismn/balances-react 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# @talismn/balances-react
+
+## 0.1.1
+
+### Patch Changes
+
+- Fixed publish config
+- Updated dependencies
+  - @talismn/balances@0.1.1
+  - @talismn/balances-evm-erc20@0.1.1
+  - @talismn/balances-evm-native@0.1.1
+  - @talismn/balances-example@0.1.1
+  - @talismn/balances-substrate-native@0.1.1
+  - @talismn/balances-substrate-orml@0.1.1
+  - @talismn/chain-connector@0.1.1
+  - @talismn/chaindata-provider@0.1.1
+  - @talismn/chaindata-provider-extension@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 43c1a3a: Initial release
+
+### Patch Changes
+
+- Updated dependencies [43c1a3a]
+  - @talismn/balances@0.1.0
+  - @talismn/balances-evm-erc20@0.1.0
+  - @talismn/balances-evm-native@0.1.0
+  - @talismn/balances-example@0.1.0
+  - @talismn/balances-substrate-native@0.1.0
+  - @talismn/balances-substrate-orml@0.1.0
+  - @talismn/chain-connector@0.1.0
+  - @talismn/chaindata-provider@0.1.0
+  - @talismn/chaindata-provider-extension@0.1.0

package/README.md

@@ -0,0 +1 @@
+# @talismn/balances-react

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useBalances.d.ts

@@ -0,0 +1,8 @@
+import { AddressesByToken, BalanceJson, BalanceModule, Balances } from "@talismn/balances";
+import { ChaindataProvider, Token } from "@talismn/chaindata-provider";
+import { Dexie } from "dexie";
+export declare function useBalances(balanceModules: Array<BalanceModule<any, any, any, any>>, chaindataProvider: ChaindataProvider | null, addressesByToken: AddressesByToken<Token> | null): Balances | undefined;
+export declare class BalancesDatabase extends Dexie {
+    balances: Dexie.Table<BalanceJson, string>;
+    constructor();
+}

package/dist/hooks/useBalances.js

@@ -0,0 +1,77 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Balances, balances as balancesFn, } from "@talismn/balances";
+import { ChainConnector } from "@talismn/chain-connector";
+import { Dexie } from "dexie";
+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";
+export function useBalances(
+// TODO: Make this array of BalanceModules more type-safe
+balanceModules, chaindataProvider, addressesByToken) {
+    const chainConnector = useChainConnector(chaindataProvider);
+    useEffect(() => {
+        if (chainConnector === null)
+            return;
+        if (chaindataProvider === null)
+            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()));
+        };
+    }, [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) {
+    const [chainConnector, setChainConnector] = useState(null);
+    useEffect(() => {
+        if (chaindataProvider === null)
+            return;
+        setChainConnector(new ChainConnector(chaindataProvider));
+    }, [chaindataProvider]);
+    return chainConnector;
+}
+export class BalancesDatabase extends Dexie {
+    constructor() {
+        super("Balances");
+        // https://dexie.org/docs/Tutorial/Design#database-versioning
+        this.version(1).stores({
+            // You only need to specify properties that you wish to index.
+            // The object store will allow any properties on your stored objects but you can only query them by indexed properties
+            // https://dexie.org/docs/API-Reference#declare-database
+            //
+            // Never index properties containing images, movies or large (huge) strings. Store them in IndexedDB, yes! but just don’t index them!
+            // https://dexie.org/docs/Version/Version.stores()#warning
+            balances: "id, source, status, address, tokenId",
+        });
+    }
+}
+const db = new BalancesDatabase();

package/dist/hooks/useChaindata.d.ts

@@ -0,0 +1,22 @@
+import { Chain, ChainId, ChainList, ChaindataProvider, EvmNetwork, EvmNetworkId, EvmNetworkList, Token, TokenId, TokenList } from "@talismn/chaindata-provider";
+export declare function useChaindata(): (ChaindataProvider & {
+    generation?: number | undefined;
+}) | null;
+export declare function useChains(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null): ChainList;
+export declare function useChain(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null, chainId?: ChainId): Chain | null | undefined;
+export declare function useEvmNetworks(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null): EvmNetworkList;
+export declare function useEvmNetwork(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null, evmNetworkId?: EvmNetworkId): EvmNetwork | null | undefined;
+export declare function useTokens(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null): TokenList;
+export declare function useToken(chaindata: (ChaindataProvider & {
+    generation?: number;
+}) | null, tokenId?: TokenId): Token | null | undefined;

package/dist/hooks/useChaindata.js

@@ -0,0 +1,120 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ChaindataProviderExtension } from "@talismn/chaindata-provider-extension";
+import { useEffect, useState } from "react";
+import log from "../log";
+export function useChaindata() {
+    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();
+        let shouldHydrate = true;
+        const timer = 300000; // 300_000ms = 300s = 5 minutes
+        const hydrate = () => __awaiter(this, void 0, void 0, function* () {
+            if (!shouldHydrate)
+                return;
+            try {
+                const updated = yield chaindataProvider.hydrate();
+                if (updated)
+                    setGeneration((generation) => (generation + 1) % Number.MAX_SAFE_INTEGER);
+                setTimeout(hydrate, timer);
+            }
+            catch (error) {
+                const retryTimeout = 5000; // 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;
+}
+export 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 === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return chains || {};
+}
+export function useChain(chaindata, chainId) {
+    const [chain, setChain] = useState();
+    useEffect(() => {
+        if (chaindata === null)
+            return;
+        if (!chainId)
+            return;
+        chaindata.getChain(chainId).then(setChain);
+    }, [chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return chain;
+}
+export 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 === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return evmNetworks || {};
+}
+export function useEvmNetwork(chaindata, evmNetworkId) {
+    const [evmNetwork, setEvmNetwork] = useState();
+    useEffect(() => {
+        if (chaindata === null)
+            return;
+        if (!evmNetworkId)
+            return;
+        chaindata.getEvmNetwork(evmNetworkId).then(setEvmNetwork);
+    }, [chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return evmNetwork;
+}
+export 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 === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return tokens || {};
+}
+export function useToken(chaindata, tokenId) {
+    const [token, setToken] = useState();
+    useEffect(() => {
+        if (chaindata === null)
+            return;
+        if (!tokenId)
+            return;
+        chaindata.getToken(tokenId).then(setToken);
+    }, [chaindata === null || chaindata === void 0 ? void 0 : chaindata.generation]);
+    return token;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./hooks";

package/dist/log.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("anylogger").Logger<import("anylogger").BaseLevels>;
+export default _default;

package/dist/log.js

@@ -0,0 +1,5 @@
+import anylogger from "anylogger";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { name } = require("../package.json");
+// import { name } from "../package.json"
+export default anylogger(name);

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@talismn/balances-react",
+  "version": "0.1.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/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "engines": {
+    "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.1.1",
+    "@talismn/balances-evm-erc20": "^0.1.1",
+    "@talismn/balances-evm-native": "^0.1.1",
+    "@talismn/balances-example": "^0.1.1",
+    "@talismn/balances-substrate-native": "^0.1.1",
+    "@talismn/balances-substrate-orml": "^0.1.1",
+    "@talismn/chain-connector": "^0.1.1",
+    "@talismn/chaindata-provider": "^0.1.1",
+    "@talismn/chaindata-provider-extension": "^0.1.1",
+    "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.0",
+    "@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"
+    ]
+  }
+}