Merge pull request paritytech#33 from paritytech/yuri/hardhat-pnpm

Hardhat template + removing pnpm

Author: mutantcornholio

README.md

@@ -6,18 +6,21 @@ Create Polkadot DApp in one command:
 npx create-polkadot-dapp@latest
 ```
 
-(the templates use `pnpm` as a package manager, so maybe do `npm install -g pnpm` first)
-
 ## Templates
 
 * [react-papi-tailwind](https://github.com/paritytech/create-polkadot-dapp/tree/master/templates/react-papi-tailwind):<br/>
   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.
-* [react-solidity](https://github.com/paritytech/create-polkadot-dapp/tree/master/templates/react-solidity) a monorepo for smart contracts for AssetHub and a React, [Tailwind CSS](https://tailwindcss.com) and [ethers](https://docs.ethers.org/v6/)
+* [react-solidity-hardhat](https://github.com/paritytech/create-polkadot-dapp/tree/master/templates/react-solidity-hardhat) modern smart contract + react app template, with:
+  * [OpenZeppelin](https://docs.openzeppelin.com/contracts/5.x/) smart contract library.
+  * [hardhat](https://hardhat.org/) smart contract development tooling.
+  * [wagmi](https://wagmi.sh/) for smart contract interaction.
+  * [Tailwind CSS](https://tailwindcss.com) + [Tailwind UI](https://tailwindui.com/).
+  * [Vite](https://vite.dev/) for dev tooling.
+* [react-solidity](https://github.com/paritytech/create-polkadot-dapp/tree/master/templates/react-solidity) (deprecated) a monorepo for smart contracts for AssetHub and a React, [Tailwind CSS](https://tailwindcss.com) and [ethers](https://docs.ethers.org/v6/)
 
 ## Planned templates
-* react-tailwind-solidity: a unified setup for developing Solidity smart contracts on Asset Hub
 * papi-nodejs: pure server-side application with polkadot-api
 
 ## Development

src/bin/main.ts

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 import { ExitPromptError } from "@inquirer/core";
 import { inquireDappData } from "#src/util/dappData";
-import { ensurePnpm } from "#src/util/ensurePnpm";
 import { spawnTemplate } from "#src/util/spawnTemplate";
 
 /* This is somewhat a hack to automatically include
@@ -13,8 +12,6 @@ import * as pkg from "../../package.json";
 (async () => {
   console.log(`${pkg.name} ${pkg.version}`);
 
-  await ensurePnpm();
-
   const dappData = await inquireDappData();
 
   await spawnTemplate(dappData);

src/templateConfigs/index.ts

@@ -1,15 +1,18 @@
 import reactPapiTailwind from "./react-papi-tailwind";
 import reactSolidity from "./react-solidity";
+import reactSolidityHardhat from "./react-solidity-hardhat";
 
 export type TemplateConfig = {
   setupPapi: boolean;
   backSyncPatterns: RegExp[];
   instructions: string;
+  npmRoots: string[];
 };
 
 export const configs: Record<string, TemplateConfig> = {
   "react-papi-tailwind": reactPapiTailwind,
   "react-solidity": reactSolidity,
+  "react-solidity-hardhat": reactSolidityHardhat,
 };
 
 export type TemplateNames = keyof typeof configs;

src/templateConfigs/react-papi-tailwind.ts

@@ -4,9 +4,10 @@ import { colors as c } from "#src/util/log";
 const config: TemplateConfig = {
   setupPapi: true,
   backSyncPatterns: [/^src.*/],
+  npmRoots: ["/"],
   instructions: `
 ${c.secondary("Start app:")}
-${c.code("pnpm dev")}`,
+${c.code("npm run dev")}`,
 };
 
 export default config;

src/templateConfigs/react-solidity-hardhat.ts

@@ -0,0 +1,39 @@
+import { TemplateConfig } from "#src/templateConfigs/index";
+import { colors as c } from "#src/util/log";
+
+const config: TemplateConfig = {
+  setupPapi: false,
+  npmRoots: ["contracts", "frontend"],
+  backSyncPatterns: [
+    /^contracts$/,
+    /^contracts\/contracts.*/,
+    /^contracts\/ignition$/,
+    /^contracts\/ignition.*/,
+    /^contracts\/test.*/,
+    /^contracts\/package\.json/,
+    /^contracts\/package-lock\.json/,
+    /^contracts\/tsconfig\.json/,
+    /^contracts\/hardhat.config.ts/,
+    /^frontend$/,
+    /^frontend\/src.*/,
+    /^frontend\/package\.json/,
+    /^frontend\/package-lock\.json/,
+    /^README.md$/,
+  ],
+  instructions: `
+${c.primary("Develop smart contracts:")}
+${c.primary("1. ")}${c.secondary("set up hardhat environment (see README.md): ")}
+${c.primary("2. ")}${c.secondary("edit contracts in ")}${c.code("contracts/contracts")}
+${c.primary("3. ")}${c.secondary("edit ignition module in ")}${c.code("contracts/igniton/modules")}
+${c.primary("4. ")}${c.secondary("deploy the contract with ")}${c.code("npx hardhat ignition deploy")}
+
+${c.primary("Use the contract in the frontend app:")}
+${c.primary("1. ")}${c.secondary("go to ")}${c.code("frontend")}${c.secondary(" directory ")}
+${c.primary("2. ")}${c.secondary("generate the types with ")}${c.code("npm run generate")}
+${c.primary("3. ")}${c.secondary("start frontend app: ")}${c.code("npm run dev")}
+
+${c.secondary("See ")}${c.primary("README.md")}${c.secondary(" for more info")}
+`,
+};
+
+export default config;

src/templateConfigs/react-solidity.ts

@@ -3,6 +3,7 @@ import { colors as c } from "#src/util/log";
 
 const config: TemplateConfig = {
   setupPapi: false,
+  npmRoots: ["contracts", "frontend"],
   backSyncPatterns: [
     /^contracts$/,
     /^contracts\/.+.sol/,
@@ -13,7 +14,7 @@ const config: TemplateConfig = {
     /^frontend\/src.*/,
     /^frontend\/package\.json/,
     /^package\.json/,
-    /^pnpm-lock\.yaml/,
+    /^package-lock\.json/,
   ],
   instructions: `
 ${c.primary("For Remix environment:")}

src/util/ensurePnpm.ts

@@ -12,7 +12,7 @@ export async function spawnTemplate(dappData: DappData): Promise<void> {
 
   await copyTemplate(dappData, targetDir, templatesDir);
   await updateFiles(dappData, targetDir);
-  await installDeps(targetDir);
+  await installDeps(targetDir, dappData);
   if (dappData.config.setupPapi) {
     await setupPapi(targetDir);
   }
@@ -46,18 +46,22 @@ async function copyTemplate(dappData: DappData, targetDir: string, templatesDir:
 async function updateFiles(dappData: DappData, targetDir: string): Promise<void> {
   console.log(c.primary("Updating template files..."));
 
-  const pkgJsonPath = path.join(targetDir, "package.json");
-  const pkgJsonContent = JSON.parse(await fs.readFile(pkgJsonPath, "utf8")) as PackageJson;
+  for (const root of dappData.config.npmRoots) {
+    const pkgJsonPath = path.join(targetDir, root, "package.json");
+    const pkgJsonContent = JSON.parse(await fs.readFile(pkgJsonPath, "utf8")) as PackageJson;
 
-  pkgJsonContent.name = dappData.name;
+    pkgJsonContent.name = dappData.name;
 
-  await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJsonContent, null, 2));
+    await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJsonContent, null, 2));
+  }
 }
 
-async function installDeps(targetDir: string): Promise<void> {
+async function installDeps(targetDir: string, dappData: DappData): Promise<void> {
   console.log(c.primary("Installing dependencies..."));
 
-  await spawnAndWait("pnpm", ["install"], { cwd: targetDir });
+  for (const root of dappData.config.npmRoots) {
+    await spawnAndWait("npm", ["install"], { cwd: path.join(targetDir, root) });
+  }
 }
 
 async function setupPapi(targetDir: string): Promise<void> {