Skip to content

Commit 87fd705

Browse files
author
Dan Forbes
authored
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
1 parent 75dda5b commit 87fd705

37 files changed

+20089
-27
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: web3js-react-dapp-demo Build & Test
2+
on:
3+
push:
4+
branches: [ main ]
5+
pull_request:
6+
branches: [ main ]
7+
types: [ opened, reopened, synchronize ]
8+
jobs:
9+
build:
10+
name: Build & Test
11+
runs-on: ubuntu-latest
12+
defaults:
13+
run:
14+
working-directory: templates/demo/web3js-react-dapp-demo
15+
steps:
16+
- uses: actions/checkout@v4
17+
- uses: actions/setup-node@v4
18+
with:
19+
node-version: 20
20+
- run: npm i
21+
- run: npm run build
22+
- run: npm test

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Usage: npx create-web3js-dapp [options]
1414

1515
Options:
1616
-f, --framework <name> front-end framework (choices: "angular", "react")
17-
-t, --template <type> template type (choices: "minimal")
17+
-t, --template <type> template type (choices: "demonstration", "minimal")
1818
-h, --help display help for command
1919
```
2020

@@ -30,5 +30,5 @@ can be used to build dApps.
3030

3131
This utility supports the following front-end frameworks:
3232

33-
- [Angular](https://angular.dev/)
33+
- [Angular](https://angular.dev/) (only available as a minimal template)
3434
- [React](https://react.dev/)

src/index.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Option, type OptionValues, program } from "commander";
99
import { select } from "@inquirer/prompts";
1010

1111
import { getSelectedOption } from "./lib";
12-
import type { Options } from "./types";
12+
import { Framework, TemplateType, type Options } from "./types";
1313

1414
program
1515
.addOption(
@@ -19,7 +19,10 @@ program
1919
]),
2020
)
2121
.addOption(
22-
new Option("-t, --template <type>", "template type").choices(["minimal"]),
22+
new Option("-t, --template <type>", "template type").choices([
23+
"demonstration",
24+
"minimal",
25+
]),
2326
);
2427

2528
program.parse();
@@ -62,26 +65,36 @@ async function inquire(cliOpts: OptionValues): Promise<Options> {
6265
choices: [
6366
{
6467
name: "Angular",
65-
value: "angular",
68+
value: Framework.Angular,
6669
},
6770
{
6871
name: "React",
69-
value: "react",
72+
value: Framework.React,
7073
},
7174
],
7275
});
7376
}
7477

7578
if (!options.template) {
79+
const choices = [
80+
{
81+
name: "Minimal",
82+
value: TemplateType.Minimal,
83+
description: "Starter project with minimal boilerplate",
84+
},
85+
];
86+
87+
if (options.framework === Framework.React) {
88+
choices.unshift({
89+
name: "Demonstration",
90+
value: TemplateType.Demonstration,
91+
description: "Demonstration dApp",
92+
});
93+
}
94+
7695
options.template = await select({
7796
message: "Select a template type",
78-
choices: [
79-
{
80-
name: "Minimal",
81-
value: "minimal",
82-
description: "Starter project with minimal boilerplate",
83-
},
84-
],
97+
choices,
8598
});
8699
}
87100

src/lib.spec.ts

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@ import { test } from "node:test";
33
import { join } from "path";
44

55
import { getSelectedOption } from "./lib";
6-
import type { Options, SelectedOption } from "./types";
6+
import {
7+
Framework,
8+
TemplateType,
9+
type Options,
10+
type SelectedOption,
11+
} from "./types";
712

813
test("getSelectedOption(angular, minimal)", () => {
9-
const opts: Options = { framework: "angular", template: "minimal" };
14+
const opts: Options = {
15+
framework: Framework.Angular,
16+
template: TemplateType.Minimal,
17+
};
1018
const result: SelectedOption = getSelectedOption(opts);
1119

1220
const expectedName: string = "web3js-angular-dapp-min";
@@ -30,8 +38,29 @@ test("getSelectedOption(angular, minimal)", () => {
3038
);
3139
});
3240

41+
test("getSelectedOption(angular, demonstration)", () => {
42+
const opts: Options = {
43+
framework: Framework.Angular,
44+
template: TemplateType.Demonstration,
45+
};
46+
try {
47+
const result: SelectedOption = getSelectedOption(opts);
48+
} catch (e) {
49+
assert.strictEqual(
50+
e.toString(),
51+
"Error: Angular demonstration dApp has not yet been implemented.",
52+
);
53+
return;
54+
}
55+
56+
assert.strictEqual(true, false);
57+
});
58+
3359
test("getSelectedOption(react, minimal)", () => {
34-
const opts: Options = { framework: "react", template: "minimal" };
60+
const opts: Options = {
61+
framework: Framework.React,
62+
template: TemplateType.Minimal,
63+
};
3564
const result: SelectedOption = getSelectedOption(opts);
3665

3766
const expectedName: string = "web3js-react-dapp-min";
@@ -54,3 +83,31 @@ test("getSelectedOption(react, minimal)", () => {
5483
"unexpected project location",
5584
);
5685
});
86+
87+
test("getSelectedOption(react, demonstration)", () => {
88+
const opts: Options = {
89+
framework: Framework.React,
90+
template: TemplateType.Demonstration,
91+
};
92+
const result: SelectedOption = getSelectedOption(opts);
93+
94+
const expectedName: string = "web3js-react-dapp-demo";
95+
assert.strictEqual(
96+
result.projectName,
97+
expectedName,
98+
"unexpected project name",
99+
);
100+
101+
const expectedLocation: string = join(
102+
__dirname,
103+
"..",
104+
"templates",
105+
"demo",
106+
expectedName,
107+
);
108+
assert.strictEqual(
109+
result.projectLocation,
110+
expectedLocation,
111+
"unexpected project location",
112+
);
113+
});

src/lib.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import { join } from "path";
22

3-
import type { Options, SelectedOption } from "./types";
3+
import {
4+
Framework,
5+
TemplateType,
6+
type Options,
7+
type SelectedOption,
8+
} from "./types";
49

510
export function getSelectedOption(opts: Options): SelectedOption {
611
switch (opts.framework) {
7-
case "angular": {
12+
case Framework.Angular: {
13+
if (opts.template === TemplateType.Demonstration) {
14+
throw new Error(
15+
"Angular demonstration dApp has not yet been implemented.",
16+
);
17+
}
18+
819
const projectName: string = "web3js-angular-dapp-min";
920
const projectLocation: string = join(
1021
__dirname,
@@ -15,13 +26,16 @@ export function getSelectedOption(opts: Options): SelectedOption {
1526
);
1627
return { projectName, projectLocation };
1728
}
18-
case "react": {
19-
const projectName: string = "web3js-react-dapp-min";
29+
case Framework.React: {
30+
const isDemo: boolean = opts.template === TemplateType.Demonstration;
31+
const projectName: string = isDemo
32+
? "web3js-react-dapp-demo"
33+
: "web3js-react-dapp-min";
2034
const projectLocation: string = join(
2135
__dirname,
2236
"..",
2337
"templates",
24-
"min",
38+
isDemo ? "demo" : "min",
2539
projectName,
2640
);
2741
return { projectName, projectLocation };

src/types.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
export type Framework = "angular" | "react";
2-
export type TemplateType = "minimal";
1+
export enum Framework {
2+
Angular = "angular",
3+
React = "react",
4+
}
5+
6+
export enum TemplateType {
7+
Demonstration = "demonstration",
8+
Minimal = "minimal",
9+
}
310

411
export interface Options {
512
framework: Framework;
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 web3js-react-dapp-demo
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)