feat: init

tien · Jun 9, 2024 · ee305f8 · ee305f8
commit ee305f8
Show file tree

Hide file tree

Showing 45 changed files with 8,301 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.yarn
+.nx/cache
+.nx/workspace-data
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "eslint.experimental.useFlatConfig": true,
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ]
+}
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# reactive-dot
diff --git a/apps/example/.gitignore b/apps/example/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/apps/example/eslint.config.js b/apps/example/eslint.config.js
@@ -0,0 +1,4 @@
+import recommended from "@reactive-dot/eslint-config/react.js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(...recommended);
diff --git a/apps/example/index.html b/apps/example/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
diff --git a/apps/example/kusama.scale b/apps/example/kusama.scale
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reactive-dot/react": "workspace:^",
+    "polkadot-api": "^0.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@reactive-dot/eslint-config": "workspace:^",
+    "@tsconfig/recommended": "^1.0.6",
+    "@tsconfig/strictest": "^2.0.5",
+    "@tsconfig/vite-react": "^3.0.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^9.4.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.13"
+  }
+}
diff --git a/apps/example/polkadot-api.json b/apps/example/polkadot-api.json
@@ -0,0 +1,10 @@
+{
+  "polkadot": {
+    "chain": "polkadot",
+    "metadata": "polkadot.scale"
+  },
+  "kusama": {
+    "chain": "ksmcc3",
+    "metadata": "kusama.scale"
+  }
+}
diff --git a/apps/example/polkadot.scale b/apps/example/polkadot.scale
diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -0,0 +1,113 @@
+import { kusama, polkadot } from "@polkadot-api/descriptors";
+import {
+  ReDotChainProvider,
+  ReDotProvider,
+  useQuery,
+  useTypedApi,
+} from "@reactive-dot/react";
+import {
+  ksmcc3 as kusamaChainSpec,
+  polkadot as polkadotChainSpec,
+} from "polkadot-api/chains";
+import { getSmProvider } from "polkadot-api/sm-provider";
+import { startFromWorker } from "polkadot-api/smoldot/from-worker";
+import SmWorker from "polkadot-api/smoldot/worker?worker";
+import { Suspense } from "react";
+
+const Example = () => {
+  const [
+    currentBlock,
+    timestamp,
+    totalIssuance,
+    activeEra,
+    totalValueLocked,
+    poolMetadatum,
+  ] = useQuery((builder) =>
+    builder
+      .readStorage("System", "Number", [])
+      .readStorage("Timestamp", "Now", [])
+      .readStorage("Balances", "TotalIssuance", [])
+      .readStorage("Staking", "ActiveEra", [])
+      .readStorage("NominationPools", "TotalValueLocked", [])
+      .readStorages("NominationPools", "Metadata", [[0], [1], [2], [3], [4]]),
+  );
+
+  const totalStaked = useQuery((builder) =>
+    activeEra === undefined
+      ? undefined
+      : builder.readStorage("Staking", "ErasTotalStake", [activeEra.index]),
+  );
+
+  const client = useTypedApi({ chainId: "kusama" });
+
+  return (
+    <div>
+      <article>
+        <h3>Current block</h3>
+        <p>
+          {currentBlock} @ {new Date(Number(timestamp)).toLocaleString()}
+        </p>
+      </article>
+      <article>
+        <h3>Active era</h3>
+        <p>{activeEra?.index}</p>
+      </article>
+      <article>
+        <h3>Total issuance</h3>
+        <p>{totalIssuance.toString()} planck</p>
+      </article>
+      <article>
+        <h3>Total value staked</h3>
+        <p>{totalStaked?.toString()} planck</p>
+      </article>
+      <article>
+        <h3>Total value locked in nomination Pools</h3>
+        <p>{totalValueLocked.toString()} planck</p>
+      </article>
+      <article>
+        <h3>First 4 pools</h3>
+        {poolMetadatum.map((x, index) => (
+          <p key={index}>{x.asText()}</p>
+        ))}
+      </article>
+    </div>
+  );
+};
+
+const smoldot = startFromWorker(new SmWorker());
+
+const App = () => (
+  <ReDotProvider
+    config={{
+      chains: {
+        polkadot: {
+          descriptor: polkadot,
+          provider: getSmProvider(
+            smoldot.addChain({ chainSpec: polkadotChainSpec }),
+          ),
+        },
+        kusama: {
+          descriptor: kusama,
+          provider: getSmProvider(
+            smoldot.addChain({ chainSpec: kusamaChainSpec }),
+          ),
+        },
+      },
+    }}
+  >
+    <ReDotChainProvider chainId="polkadot">
+      <Suspense fallback={<h2>Loading Polkadot...</h2>}>
+        <h2>Polkadot</h2>
+        <Example />
+      </Suspense>
+    </ReDotChainProvider>
+    <ReDotChainProvider chainId="kusama">
+      <Suspense fallback={<h2>Loading Kusama...</h2>}>
+        <h2>Kusama</h2>
+        <Example />
+      </Suspense>
+    </ReDotChainProvider>
+  </ReDotProvider>
+);
+
+export default App;
diff --git a/apps/example/src/index.tsx b/apps/example/src/index.tsx
@@ -0,0 +1,9 @@
+import App from "./App.js";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/apps/example/src/redot.d.ts b/apps/example/src/redot.d.ts
@@ -0,0 +1,8 @@
+import { type polkadot, type kusama } from "@polkadot-api/descriptors";
+
+declare module "@reactive-dot/react" {
+  export interface Chain {
+    polkadot: typeof polkadot;
+    kusama: typeof kusama;
+  }
+}
diff --git a/apps/example/src/vite-env.d.ts b/apps/example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/example/tsconfig.json b/apps/example/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@tsconfig/recommended/tsconfig.json",
+    "@tsconfig/strictest/tsconfig.json",
+    "@tsconfig/vite-react/tsconfig.json"
+  ],
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/example/tsconfig.node.json b/apps/example/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/example/vite.config.ts b/apps/example/vite.config.ts
@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/nx.json b/nx.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "targetDefaults": {
+    "dev": {
+      "dependsOn": ["^build"]
+    },
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/build", "{projectRoot}/dist"],
+      "cache": true
+    },
+    "lint": {
+      "cache": true
+    },
+    "test": {
+      "cache": true
+    }
+  },
+  "defaultBase": "master"
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "reactive-dot",
+  "description": "Reactive library for building Substrate front-end",
+  "keywords": [
+    "substrate",
+    "polkadot",
+    "react"
+  ],
+  "homepage": "https://github.com/tien/reactive-dot#readme",
+  "bugs": {
+    "url": "https://github.com/tien/reactive-dot/issues",
+    "email": "[email protected]"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": "Tiến Nguyễn Khắc <[email protected]> (https://tien.zone/)",
+  "repository": "github:tien/reactive-dot",
+  "private": true,
+  "type": "module",
+  "packageManager": "[email protected]",
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "nx run-many -t dev",
+    "build": "nx run-many -t build",
+    "lint": "nx run-many -t lint",
+    "test": "nx run-many -t test"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "nx": "19.2.2",
+    "prettier": "^3.3.1"
+  }
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@reactive-dot/core",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "scripts": {
+    "dev": "tsup-node --watch",
+    "build": "tsup-node"
+  }
+}
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
@@ -0,0 +1,20 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+);
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@reactive-dot/eslint-config",
+  "version": "0.0.0",
+  "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",
+    "@types/eslint__js": "^8.42.3",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.12.0"
+  },
+  "peerDependencies": {
+    "eslint": "*"
+  }
+}
diff --git a/packages/eslint-config/react.js b/packages/eslint-config/react.js
@@ -0,0 +1,33 @@
+import base from "./index.js";
+import { fixupPluginRules, fixupConfigRules } from "@eslint/compat";
+import reactHooks from "eslint-plugin-react-hooks/index.js";
+import reactJsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
+import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  ...base,
+  ...fixupConfigRules(reactRecommended),
+  {
+    languageOptions: reactJsxRuntime.languageOptions,
+    rules: reactJsxRuntime.rules,
+  },
+  {
+    plugins: {
+      "react-hooks": fixupPluginRules(reactHooks),
+    },
+    rules: reactHooks.configs.recommended.rules,
+  },
+  {
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "react/display-name": "off",
+      "react/no-unescaped-entities": "off",
+      "react/no-unknown-property": ["error", { ignore: ["css"] }],
+    },
+  },
+);
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+dot.scale
+polkadot-api.json
diff --git a/packages/react/development.d.ts b/packages/react/development.d.ts
diff --git a/packages/react/eslint.config.js b/packages/react/eslint.config.js
@@ -0,0 +1,4 @@
+import recommended from "@reactive-dot/eslint-config/react.js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(...recommended);