feat: hook and utility class to easily deal with planck denominated n…

…umber

apps/example/src/App.tsx

@@ -11,12 +11,31 @@ import {
   useQuery,
   useQueryWithRefresh,
   useWallets,
+  useChainSpecData,
 } from "@reactive-dot/react";
+import { DenominatedNumber } from "@reactive-dot/utils";
 import { formatDistance } from "date-fns";
 import { Binary } from "polkadot-api";
 import { Suspense, useState, useTransition } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
+const useNativeTokenNumberWithPlanck = (planck: bigint) => {
+  const chainSpecData = useChainSpecData();
+
+  return new DenominatedNumber(
+    planck,
+    chainSpecData.properties.tokenDecimals,
+    chainSpecData.properties.tokenSymbol,
+  );
+};
+
+const PendingRewards = (props: { address: string; rewards: bigint }) => (
+  <li>
+    {props.address}:{" "}
+    {useNativeTokenNumberWithPlanck(props.rewards).toLocaleString()}
+  </li>
+);
+
 const PendingPoolRewards = () => {
   const accounts = useAccounts();
 
@@ -47,9 +66,11 @@ const PendingPoolRewards = () => {
       </button>
       <ul>
         {pendingRewards.map((rewards, index) => (
-          <li key={index}>
-            {accounts.at(index)?.address}: {rewards.toLocaleString()} planck
-          </li>
+          <PendingRewards
+            key={index}
+            address={accounts.at(index)?.address ?? ""}
+            rewards={rewards}
+          />
         ))}
       </ul>
     </article>
@@ -111,19 +132,23 @@ const Query = () => {
       </article>
       <article>
         <h4>Total issuance</h4>
-        <p>{totalIssuance.toLocaleString()} planck</p>
+        <p>{useNativeTokenNumberWithPlanck(totalIssuance).toLocaleString()}</p>
       </article>
       <article>
         <h4>Bonding duration</h4>
         <p>{formatDistance(0, bondingDurationMs)}</p>
       </article>
       <article>
         <h4>Total value staked</h4>
-        <p>{totalStaked?.toLocaleString()} planck</p>
+        <p>
+          {useNativeTokenNumberWithPlanck(totalStaked ?? 0n).toLocaleString()}
+        </p>
       </article>
       <article>
         <h4>Total value locked in nomination Pools</h4>
-        <p>{totalValueLocked.toLocaleString()} planck</p>
+        <p>
+          {useNativeTokenNumberWithPlanck(totalValueLocked).toLocaleString()}
+        </p>
       </article>
       <article>
         <h4>First 4 pools</h4>

nx.json

@@ -14,8 +14,9 @@
       "cache": true
     },
     "test": {
+      "dependsOn": ["^build"],
       "cache": true
     }
   },
-  "parallel": 5
+  "parallel": 6
 }

packages/core/package.json

@@ -47,5 +47,8 @@
     "@walletconnect/universal-provider": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "@reactive-dot/utils": "workspace:^"
   }
 }

packages/eslint-config/package.json

@@ -4,9 +4,6 @@
   "private": true,
   "type": "module",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "devDependencies": {
     "@eslint/compat": "^1.0.3",
     "@eslint/js": "^9.4.0",

packages/react/src/hooks/useChainSpecData.ts

@@ -0,0 +1,23 @@
+import { ChainIdContext } from "../context.js";
+import { chainSpecDataAtomFamily } from "../stores/client.js";
+import type { ChainHookOptions } from "./types.js";
+import { ReDotError } from "@reactive-dot/core";
+import { useAtomValue } from "jotai";
+import { useContext } from "react";
+
+/**
+ * Hook for fetching the [JSON-RPC spec](https://paritytech.github.io/json-rpc-interface-spec/api/chainSpec.html).
+ *
+ * @param options - Additional options
+ * @returns The [JSON-RPC spec](https://paritytech.github.io/json-rpc-interface-spec/api/chainSpec.html)
+ */
+export const useChainSpecData = (options?: ChainHookOptions) => {
+  const contextChainId = useContext(ChainIdContext);
+  const chainId = options?.chainId ?? contextChainId;
+
+  if (chainId === undefined) {
+    throw new ReDotError("No chain Id provided");
+  }
+
+  return useAtomValue(chainSpecDataAtomFamily(chainId));
+};

packages/react/src/index.ts

@@ -9,6 +9,7 @@ export {
 export type { ChainHookOptions } from "./hooks/types.js";
 export { useAccounts } from "./hooks/useAccounts.js";
 export { useBlock } from "./hooks/useBlock.js";
+export { useChainSpecData } from "./hooks/useChainSpecData.js";
 export { useClient } from "./hooks/useClient.js";
 export { useMutation } from "./hooks/useMutation.js";
 export { useQuery, useQueryWithRefresh } from "./hooks/useQuery.js";

packages/utils/.gitignore

@@ -0,0 +1 @@
+build

packages/utils/eslint.config.js

@@ -0,0 +1,4 @@
+import recommended from "@reactive-dot/eslint-config";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(...recommended);

packages/utils/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@reactive-dot/utils",
+  "version": "0.0.0",
+  "type": "module",
+  "files": [
+    "src",
+    "build"
+  ],
+  "exports": {
+    ".": {
+      "default": "./build/index.js",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "dev": "tsc --build --watch",
+    "build": "rm -rf build && tsc --build",
+    "lint": "eslint src",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@reactive-dot/eslint-config": "workspace:^",
+    "@tsconfig/recommended": "^1.0.6",
+    "@tsconfig/strictest": "^2.0.5",
+    "eslint": "^9.4.0",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
+  }
+}