Add Minimal React Template (#8)

* Add Minimal React Template

* Fix Tests

Author: danforbes

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

@@ -0,0 +1,22 @@
+name: web3js-react-dapp-min 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/min/web3js-react-dapp-min
+        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

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

src/index.ts

@@ -15,6 +15,7 @@ program
   .addOption(
     new Option("-f, --framework <name>", "front-end framework").choices([
       "angular",
+      "react",
     ]),
   )
   .addOption(
@@ -63,6 +64,10 @@ async function inquire(cliOpts: OptionValues): Promise<Options> {
           name: "Angular",
           value: "angular",
         },
+        {
+          name: "React",
+          value: "react",
+        },
       ],
     });
   }

src/lib.spec.ts

@@ -29,3 +29,28 @@ test("getSelectedOption(angular, minimal)", () => {
     "unexpected project location",
   );
 });
+
+test("getSelectedOption(react, minimal)", () => {
+  const opts: Options = { framework: "react", template: "minimal" };
+  const result: SelectedOption = getSelectedOption(opts);
+
+  const expectedName: string = "web3js-react-dapp-min";
+  assert.strictEqual(
+    result.projectName,
+    expectedName,
+    "unexpected project name",
+  );
+
+  const expectedLocation: string = join(
+    __dirname,
+    "..",
+    "templates",
+    "min",
+    expectedName,
+  );
+  assert.strictEqual(
+    result.projectLocation,
+    expectedLocation,
+    "unexpected project location",
+  );
+});

src/lib.ts

@@ -15,5 +15,16 @@ export function getSelectedOption(opts: Options): SelectedOption {
       );
       return { projectName, projectLocation };
     }
+    case "react": {
+      const projectName: string = "web3js-react-dapp-min";
+      const projectLocation: string = join(
+        __dirname,
+        "..",
+        "templates",
+        "min",
+        projectName,
+      );
+      return { projectName, projectLocation };
+    }
   }
 }

src/types.ts

@@ -1,4 +1,4 @@
-export type Framework = "angular";
+export type Framework = "angular" | "react";
 export type TemplateType = "minimal";
 
 export interface Options {

templates/min/web3js-react-dapp-min/.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/min/web3js-react-dapp-min/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 web3js-react-dapp-min
+
+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.

templates/min/web3js-react-dapp-min/README.md

@@ -0,0 +1,28 @@
+# Web3.js + React Minimal dApp Template
+
+This project is a minimal template for using [Web3.js](https://web3js.org/) with
+[React](https://react.dev/).
+
+- [Web3.js Docs](https://docs.web3js.org/)
+- [React Docs](https://react.dev/learn)
+
+This project was bootstrapped with
+[Create React App](https://github.com/facebook/create-react-app).
+
+## Getting Started
+
+Install the project dependencies with a dependency manager like npm or Yarn. Use
+`npm start` to start a local development server and navigate to
+http://localhost:3000 to view the dApp.
+
+## Project Design
+
+This project defines a service in
+[./src/web3/web3-service.ts](./src/web3/web3-service.ts) that exposes an
+instance of the [`Web3` class](https://docs.web3js.org/api/web3/class/Web3) and
+an [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider, if present. If
+the provider is present, it's used by the `Web3` instance to communicate with
+the network and the service registers a
+[`chainChanged` handler](https://docs.metamask.io/wallet/reference/provider-api/#chainchanged)
+that reloads the page. Refer to [./src/App.tsx](./src/App.tsx) for an example of
+using the service.