Add Demonstration React Template (#9)

* Add Demonstration React Template

* Rework Use of Numbers and BigInts

* Display Network ID

* Remove Unused App.css Files

* Remove More Unused CSS Files

Author: Dan Forbes

.github/workflows/web3js-react-dapp-demo.yml

@@ -0,0 +1,22 @@
+name: web3js-react-dapp-demo Build & Test
+on:
+    push:
+        branches: [ main ]
+    pull_request:
+        branches: [ main ]
+        types: [ opened, reopened, synchronize ]
+jobs:
+    build:
+        name: Build & Test
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: templates/demo/web3js-react-dapp-demo
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                node-version: 20
+            - run: npm i
+            - run: npm run build
+            - run: npm test

README.md

@@ -14,7 +14,7 @@ Usage: npx create-web3js-dapp [options]
 
 Options:
   -f, --framework <name>  front-end framework (choices: "angular", "react")
-  -t, --template <type>   template type (choices: "minimal")
+  -t, --template <type>   template type (choices: "demonstration", "minimal")
   -h, --help              display help for command
 ```
 
@@ -30,5 +30,5 @@ can be used to build dApps.
 
 This utility supports the following front-end frameworks:
 
-- [Angular](https://angular.dev/)
+- [Angular](https://angular.dev/) (only available as a minimal template)
 - [React](https://react.dev/)

src/index.ts

@@ -9,7 +9,7 @@ import { Option, type OptionValues, program } from "commander";
 import { select } from "@inquirer/prompts";
 
 import { getSelectedOption } from "./lib";
-import type { Options } from "./types";
+import { Framework, TemplateType, type Options } from "./types";
 
 program
   .addOption(
@@ -19,7 +19,10 @@ program
     ]),
   )
   .addOption(
-    new Option("-t, --template <type>", "template type").choices(["minimal"]),
+    new Option("-t, --template <type>", "template type").choices([
+      "demonstration",
+      "minimal",
+    ]),
   );
 
 program.parse();
@@ -62,26 +65,36 @@ async function inquire(cliOpts: OptionValues): Promise<Options> {
       choices: [
         {
           name: "Angular",
-          value: "angular",
+          value: Framework.Angular,
         },
         {
           name: "React",
-          value: "react",
+          value: Framework.React,
         },
       ],
     });
   }
 
   if (!options.template) {
+    const choices = [
+      {
+        name: "Minimal",
+        value: TemplateType.Minimal,
+        description: "Starter project with minimal boilerplate",
+      },
+    ];
+
+    if (options.framework === Framework.React) {
+      choices.unshift({
+        name: "Demonstration",
+        value: TemplateType.Demonstration,
+        description: "Demonstration dApp",
+      });
+    }
+
     options.template = await select({
       message: "Select a template type",
-      choices: [
-        {
-          name: "Minimal",
-          value: "minimal",
-          description: "Starter project with minimal boilerplate",
-        },
-      ],
+      choices,
     });
   }
 

src/lib.spec.ts

@@ -3,10 +3,18 @@ import { test } from "node:test";
 import { join } from "path";
 
 import { getSelectedOption } from "./lib";
-import type { Options, SelectedOption } from "./types";
+import {
+  Framework,
+  TemplateType,
+  type Options,
+  type SelectedOption,
+} from "./types";
 
 test("getSelectedOption(angular, minimal)", () => {
-  const opts: Options = { framework: "angular", template: "minimal" };
+  const opts: Options = {
+    framework: Framework.Angular,
+    template: TemplateType.Minimal,
+  };
   const result: SelectedOption = getSelectedOption(opts);
 
   const expectedName: string = "web3js-angular-dapp-min";
@@ -30,8 +38,29 @@ test("getSelectedOption(angular, minimal)", () => {
   );
 });
 
+test("getSelectedOption(angular, demonstration)", () => {
+  const opts: Options = {
+    framework: Framework.Angular,
+    template: TemplateType.Demonstration,
+  };
+  try {
+    const result: SelectedOption = getSelectedOption(opts);
+  } catch (e) {
+    assert.strictEqual(
+      e.toString(),
+      "Error: Angular demonstration dApp has not yet been implemented.",
+    );
+    return;
+  }
+
+  assert.strictEqual(true, false);
+});
+
 test("getSelectedOption(react, minimal)", () => {
-  const opts: Options = { framework: "react", template: "minimal" };
+  const opts: Options = {
+    framework: Framework.React,
+    template: TemplateType.Minimal,
+  };
   const result: SelectedOption = getSelectedOption(opts);
 
   const expectedName: string = "web3js-react-dapp-min";
@@ -54,3 +83,31 @@ test("getSelectedOption(react, minimal)", () => {
     "unexpected project location",
   );
 });
+
+test("getSelectedOption(react, demonstration)", () => {
+  const opts: Options = {
+    framework: Framework.React,
+    template: TemplateType.Demonstration,
+  };
+  const result: SelectedOption = getSelectedOption(opts);
+
+  const expectedName: string = "web3js-react-dapp-demo";
+  assert.strictEqual(
+    result.projectName,
+    expectedName,
+    "unexpected project name",
+  );
+
+  const expectedLocation: string = join(
+    __dirname,
+    "..",
+    "templates",
+    "demo",
+    expectedName,
+  );
+  assert.strictEqual(
+    result.projectLocation,
+    expectedLocation,
+    "unexpected project location",
+  );
+});

src/lib.ts

@@ -1,10 +1,21 @@
 import { join } from "path";
 
-import type { Options, SelectedOption } from "./types";
+import {
+  Framework,
+  TemplateType,
+  type Options,
+  type SelectedOption,
+} from "./types";
 
 export function getSelectedOption(opts: Options): SelectedOption {
   switch (opts.framework) {
-    case "angular": {
+    case Framework.Angular: {
+      if (opts.template === TemplateType.Demonstration) {
+        throw new Error(
+          "Angular demonstration dApp has not yet been implemented.",
+        );
+      }
+
       const projectName: string = "web3js-angular-dapp-min";
       const projectLocation: string = join(
         __dirname,
@@ -15,13 +26,16 @@ export function getSelectedOption(opts: Options): SelectedOption {
       );
       return { projectName, projectLocation };
     }
-    case "react": {
-      const projectName: string = "web3js-react-dapp-min";
+    case Framework.React: {
+      const isDemo: boolean = opts.template === TemplateType.Demonstration;
+      const projectName: string = isDemo
+        ? "web3js-react-dapp-demo"
+        : "web3js-react-dapp-min";
       const projectLocation: string = join(
         __dirname,
         "..",
         "templates",
-        "min",
+        isDemo ? "demo" : "min",
         projectName,
       );
       return { projectName, projectLocation };

src/types.ts

@@ -1,5 +1,12 @@
-export type Framework = "angular" | "react";
-export type TemplateType = "minimal";
+export enum Framework {
+  Angular = "angular",
+  React = "react",
+}
+
+export enum TemplateType {
+  Demonstration = "demonstration",
+  Minimal = "minimal",
+}
 
 export interface Options {
   framework: Framework;

templates/demo/web3js-react-dapp-demo/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

templates/demo/web3js-react-dapp-demo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 web3js-react-dapp-demo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.