Merge pull request #20 from tien/chore/update-template

chore: update React template

Author: mutantcornholio

.prettierrc.cjs

@@ -0,0 +1,6 @@
+import defaultConfiguration from "@eng-automation/js-style/src/prettier/configuration.js";
+
+export default {
+  ...defaultConfiguration,
+  plugins: ["prettier-plugin-tailwindcss"],
+};

.prettierrc.mjs

@@ -8,6 +8,8 @@
     "@eng-automation/js-style": "^3.1.0",
     "chokidar": "^4.0.1",
     "commander": "^12.1.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "type-fest": "^4.27.0",
     "typescript": "^5.4.5"
   },
@@ -26,9 +28,7 @@
     "lint": "npx eslint ./src/ --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "npx eslint ./src/ --ext .js,.jsx,.ts,.tsx --fix"
   },
-  "bin": {
-    "create-polkadot-dapp": "src/bin/main.js"
-  },
+  "bin": "src/bin/main.js",
   "imports": {
     "#src/*": "./src/*.js"
   }

package.json

@@ -1,11 +1,12 @@
 # react-papi-tailwind template
 
 This template describes a React front-end app with
-* [PAPI](papi.how) + [ReactiveDOT](https://reactivedot.dev) + [dotconnect](https://dotconnect.dev/) for chain and wallet interactions.<br/>
-* [Tailwind CSS](https://tailwindcss.com) + [Tailwind UI](https://tailwindui.com/). <br/>
-* [Vite](https://vite.dev/) for dev tooling.
 
+- [PAPI](papi.how) + [ReactiveDOT](https://reactivedot.dev) + [dotconnect](https://dotconnect.dev/) for chain and wallet interactions.<br/>
+- [Tailwind CSS](https://tailwindcss.com) + [Tailwind UI](https://tailwindui.com/). <br/>
+- [Vite](https://vite.dev/) for dev tooling.
 
 ### Note on wallet connection
+
 This template has PJS Apps, Talisman, SubWallet and Ledger enabled by default.
 In order to enable WalletConnect, set up WalletConnect project ID / metadata in [reactive-dot.ts](./templates/react-tailwind/src/reactive-dot.ts)

templates/react-papi-tailwind/README.md

@@ -1,28 +1,25 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
     },
   },
-)
+);

templates/react-papi-tailwind/eslint.config.js

@@ -11,30 +11,29 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.1.5",
-    "@reactive-dot/react": "^0.29.0",
-    "@reactive-dot/core": "^0.29.0",
-    "@reactive-dot/wallet-ledger": "^0.16.21",
-    "@reactive-dot/wallet-walletconnect": "^0.17.1",
-    "dot-connect": "^0.13.2",
-    "polkadot-api": "^1.7.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@heroicons/react": "^2.2.0",
+    "@reactive-dot/core": "^0.36.0",
+    "@reactive-dot/react": "^0.36.0",
+    "@reactive-dot/wallet-ledger": "^0.16.27",
+    "@reactive-dot/wallet-walletconnect": "^0.17.7",
+    "dot-connect": "^0.15.0",
+    "polkadot-api": "^1.9.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.14.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.14.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.12.2",
-    "vite": "^5.4.10"
+    "@eslint/js": "^9.21.0",
+    "@tailwindcss/vite": "^4.0.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "tailwindcss": "^4.0.9",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.2.0"
   }
 }

templates/react-papi-tailwind/package.json

@@ -10,23 +10,19 @@ import polkadotLogo from "./assets/polkadot-logo.svg";
 
 import { AccountList } from "./components/AccountList";
 
-function App({ chainId, setChainId }: {
-  chainId: ChainId;
-  setChainId: React.Dispatch<React.SetStateAction<ChainId>>
-}) {
-
+function App({ chainId, setChainId }: { chainId: ChainId; setChainId: React.Dispatch<React.SetStateAction<ChainId>> }) {
   return (
     <>
-      <div className="fixed top-10 right-10">
-        <div className="inline-block ml-5">
+      <div className="fixed right-10 top-10">
+        <div className="ml-5 inline-block">
           <ConnectionButton />
         </div>
-        <div className="inline-block ml-5">
+        <div className="ml-5 inline-block">
           <ChainSwitch chainId={chainId} setChainId={setChainId} />
         </div>
       </div>
 
-      <img src={polkadotLogo} className="mx-auto h-52	p-4 logo" alt="Polkadot logo" />
+      <img src={polkadotLogo} className="logo mx-auto h-52 p-4" alt="Polkadot logo" />
       <div className="container mx-auto p-2 leading-6">
         <ChainPage />
       </div>

templates/react-papi-tailwind/postcss.config.js

@@ -1,16 +1,14 @@
 import { useChainId, useLazyLoadQuery } from "@reactive-dot/react";
 
 export function ChainPage() {
-
   const chainId = useChainId();
 
   const [timestamp, blockNumber] = useLazyLoadQuery((builder) =>
-    builder
-      .readStorage("Timestamp", "Now", [])
-      .readStorage("System", "Number", [])
+    builder.readStorage("Timestamp", "Now", []).readStorage("System", "Number", []),
   );
 
-  return <>
+  return (
+    <>
       <h1>Your app is ready</h1>
       <p className="m-2">
         Connected to chain <strong>{chainId}</strong>
@@ -21,5 +19,6 @@ export function ChainPage() {
       <p className="m-2">
         Timestamp: <strong>{timestamp.toString()}</strong>
       </p>
-  </>;
+    </>
+  );
 }

templates/react-papi-tailwind/src/App.tsx

@@ -1,19 +1,21 @@
 import { useAccounts } from "@reactive-dot/react";
 import { getWalletMetadata } from "dot-connect";
 
-function AccountInfo({ address, name, wallet }: { address: string; name?: string, wallet: string }) {
-  return <div className="container md grid grid-cols-2 border rounded p-2 my-2">
-    <div className="static text-left font-bold text-lg">{name}</div>
-    <div className="static text-right font-light">{wallet}</div>
-    <div className="static col-span-2 text-left">{address}</div>
-  </div>;
+function AccountInfo({ address, name, wallet }: { address: string; name?: string; wallet: string }) {
+  return (
+    <div className="md container my-2 grid grid-cols-2 rounded-sm border p-2">
+      <div className="static text-left text-lg font-bold">{name}</div>
+      <div className="static text-right font-light">{wallet}</div>
+      <div className="static col-span-2 text-left">{address}</div>
+    </div>
+  );
 }
 
 export function AccountList() {
   const accounts = useAccounts();
 
   if (accounts.length === 0) {
-    return (<></>);
+    return <></>;
   }
 
   return (
@@ -33,5 +35,4 @@ export function AccountList() {
       </ul>
     </div>
   );
-
 }