reactive-dot

redot

Example

import { WsProvider } from "@polkadot/api";
import { Suspense } from "react";
import { ReDotProvider, ReDotChainProvider, useQueryStorage } from "redot";

const App = () => {
  // Fully typed/cached with auto-complete
  const account = useQueryStorage("system", "account", [
    "5CcU6DRpocLUWYJHuNLjB4gGyHJrkWuruQD5XFbRYffCfSAP",
  ]);

  // Fully typed/cached with auto-complete
  const totalValueLocked = useQueryStorage(
    "nominationPools",
    "totalValueLocked",
    [],
  );

  // Fully typed/cached with auto-complete
  const poolMetadatum = useQueryStorage(
    "nominationPools",
    "metadata",
    [0, 1, 2, 3],
    {
      multi: true,
    },
  );

  return (
    <div>
      <article>
        <h1>Account free balance</h1>
        <p>{account.data.free.toHuman()} planck</p>
      </article>
      <article>
        <h1>Total value locked in nomination Pools</h1>
        <p>{totalValueLocked.toHuman()} planck</p>
      </article>
      <article>
        <h1>First 4 pools</h1>
        {poolMetadatum.map((x, index) => (
          <p key={index}>{x.toUtf8()}</p>
        ))}
      </article>
    </div>
  );
};

const Root = () => (
  <ReDotProvider
    config={{
      providers: {
        "0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3":
          new WsProvider("wss://apps-rpc.polkadot.io"),
        "0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe":
          new WsProvider("wss://kusama-rpc.polkadot.io"),
      },
    }}
  >
    <ReDotChainProvider genesisHash="0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3">
      <Suspense fallback={<h1>Loading...</h1>}>
        <App />
      </Suspense>
    </ReDotChainProvider>
    <ReDotChainProvider genesisHash="0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe">
      <Suspense fallback={<h1>Loading...</h1>}>
        <App />
      </Suspense>
    </ReDotChainProvider>
  </ReDotProvider>
);