Updating react-solidity-remix template

* Deps upgrade
* Importing contracts instead of exporting; this allows to drop monorepo and pnpm

Fixes #28

Author: mutantcornholio

README.md

@@ -18,7 +18,7 @@ npx create-polkadot-dapp@latest
   * [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/)
+* [react-solidity-remix](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
 * papi-nodejs: pure server-side application with polkadot-api
@@ -40,4 +40,4 @@ Add new configuration to `src/templateConfigs/` and export it from `index.ts`. T
 ### Back sync
 It can be more convenient to develop template code outside of `create-polkadot-dapp`.  
 Use `yarn back-sync --source <spawned_repo_path> --template <template_name>` to sync files from a spawned repo back into the template.  
-`backSyncPatterns` in template configuration defines an array of regexp for files that are synced.  
+`back-sync` uses `.gitignore` to filter out files that need syncing.  

src/scripts/backSync.ts

@@ -25,6 +25,11 @@ const alwaysIgnorePatterns = [/^\.papi\/metadata.*/];
 const gitignoreContents = fs.readFileSync(path.join(options.source, ".gitignore"), "utf-8");
 const gitignoreIg = ignore().add(gitignoreContents);
 
+if (!fs.existsSync(options.source)) {
+  console.error(`Directory ${options.source} doesn't exist`);
+  process.exit(1);
+}
+
 const watcher = chokidar.watch(options.source, {
   persistent: true,
   cwd: options.source,
@@ -92,3 +97,5 @@ if (options.rm) {
   watcher.on("unlink", unlinkHandler);
   watcher.on("unlinkDir", unlinkHandler);
 }
+
+watcher.on("error", (error) => console.error(`Watcher error: ${error}`));

src/templateConfigs/index.ts

@@ -1,6 +1,6 @@
 import reactPapiTailwind from "./react-papi-tailwind";
-import reactSolidity from "./react-solidity";
 import reactSolidityHardhat from "./react-solidity-hardhat";
+import reactSolidityRemix from "./react-solidity-remix";
 
 export type TemplateConfig = {
   setupPapi: boolean;
@@ -10,8 +10,8 @@ export type TemplateConfig = {
 
 export const configs: Record<string, TemplateConfig> = {
   "react-papi-tailwind": reactPapiTailwind,
-  "react-solidity": reactSolidity,
   "react-solidity-hardhat": reactSolidityHardhat,
+  "react-solidity-remix": reactSolidityRemix,
 };
 
 export type TemplateNames = keyof typeof configs;

src/templateConfigs/react-solidity-remix.ts

@@ -0,0 +1,27 @@
+import { TemplateConfig } from "#src/templateConfigs/index";
+import { colors as c } from "#src/util/log";
+
+const config: TemplateConfig = {
+  setupPapi: false,
+  npmRoots: ["contracts", "frontend"],
+  instructions: `
+${c.primary("For Remix environment:")}
+${c.primary("1. ")}${c.secondary("install remixd globally: ")}${c.code("npm install -g @remix-project/remixd")}
+${c.primary("2. ")}${c.secondary("go to contracts dir: ")}${c.code("cd contracts")}
+${c.primary("3. ")}${c.secondary("start remixd environment: ")}${c.code("npm run remixd")}
+${c.primary("4. ")}${c.secondary("edit, deploying and pin smart contracts in Remix")}
+
+${c.primary("For local environment:")}
+${c.primary("1. ")}${c.secondary("go to contracts dir: ")}${c.code("cd contracts")}
+${c.primary("2. ")}${c.secondary("edit and build smart contracts: ")}${c.code("npm run build")}
+${c.primary("3. ")}${c.secondary("deploy smart contracts to chain: ")}${c.code("npm run deploy-contracts")}
+
+${c.primary("Use the contract in the frontend app:")}
+${c.primary("1. ")}${c.secondary("go to frontend dir: ")}${c.code("cd frontend")}
+${c.primary("2. ")}${c.secondary("import contracts: ")}${c.code("npm run import-contracts")}
+${c.primary("3. ")}${c.secondary("use smart contract address in ")}${c.code("src/App.tsx")}
+${c.primary("4. ")}${c.secondary("start frontend app: ")}${c.code("npm run dev")}
+`,
+};
+
+export default config;

src/templateConfigs/react-solidity.ts

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# generated by npm run import-contracts
+frontend/src/contracts.js

templates/react-solidity/.gitignore templates/react-solidity-remix/.gitignoretemplates/react-solidity/.gitignore renamed to templates/react-solidity-remix/.gitignore

@@ -1,4 +1,4 @@
-# react-solidity template
+# react-solidity-remix template
 
 This template sets up a combination of Solidity smart contracts and a React front-end app that interacts with these
 smart contracts.  
@@ -10,35 +10,35 @@ This template includes
 
 ## Writing smart contracts
 
-Currently, two ways of developing smart contracts are supported. Both are deploying to Westend Asset Hub.
+Currently, two ways of developing smart contracts are supported. Both are deploying to Passet Hub.
 
 ### Remix
 
-1. Run `npm run remixd` in `contracts` dir to start remixd environment.
-2. Go to https://remix.polkadot.io and activate REMIXD plugin.
-3. Start hacking! Changes performed in Remix will be synced to local file system.
-4. After deploying and pinning a smart contract, it'll be saved on your file system, run `npm run export` to
-   export contract data.
+1. Install remixd globally: `npm install -g @remix-project/remixd`
+2. Run `npm run remixd` in `contracts` dir to start remixd environment.
+3. Go to https://remix.polkadot.io and activate REMIXD plugin.
+4. Start hacking! Changes performed in Remix will be synced to local file system.
+5. Deploy **and pin** your smart contract; it'll be saved on your file system.
 
 ### Local development
 
-1. Edit smart contracts in root directory
-2. Run `npm run contracts:build` to compile smart contracts
-3. Run `npm run contracts:deploy` to deploy them  
+1. Edit smart contracts in `contracts` dir.
+2. Run `npm run build` to compile smart contracts.
+3. Run `npm run deploy-contracts` to deploy them.  
    Required environment variables:
   * `ACCOUNT_SEED`: seed phrase for the account that will sign the deployment.
-  * `RPC_URL`: for Westend Asset Hub, probably `https://westend-asset-hub-eth-rpc.polkadot.io`, for kitchensink, probably `http://localhost:8545`
-4. Run `npm run contracts:export` to export contract data.
+  * `RPC_URL`: for Passet Hub, `https://testnet-passet-hub-eth-rpc.polkadot.io`, for kitchensink, probably `http://localhost:8545`.
 
 ## Interacting with smart contracts from frontend app
 
-1. Run `npm run dev` to start `vite` environment
-2. You can import all exported contracts using `import { contracts } from "contracts"`
-3. You can call your contracts like this:
+1. Run `npm run import-contracts` to generate contracts data from deployed contracts
+2. Run `npm run dev` to start `vite` environment
+3. You can import all exported contracts using `import { contracts } from "./contracts"`
+4. You can call your contracts like this:
 
 ```ts
 import { Contract, formatEther } from "ethers";
-import { contracts, ContractData } from "contracts"
+import { contracts, ContractData } from "./contracts"
 
 const contractData: ContractData = contracts["1b5b93a223026219f4f75e5b90c20970ab976451"];
 const contract = new Contract(contractData.address, contractData.abi, signer);

templates/react-solidity/README.md templates/react-solidity-remix/README.mdtemplates/react-solidity/README.md renamed to templates/react-solidity-remix/README.md

@@ -0,0 +1,44 @@
+{
+  "abi": [
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "num",
+          "type": "uint256"
+        }
+      ],
+      "name": "addMoney",
+      "outputs": [],
+      "stateMutability": "payable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "retrieve",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "num",
+          "type": "uint256"
+        }
+      ],
+      "name": "store",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    }
+  ],
+  "bytecode": "0x50564d0000d506000000000000010700c13000c0008004808f08000000000e0000001c0000002a0000003500000040000000520000005d00000063616c6c5f646174615f636f707963616c6c5f646174615f6c6f616463616c6c5f646174615f73697a656765745f73746f726167657365616c5f72657475726e7365745f696d6d757461626c655f646174617365745f73746f7261676576616c75655f7472616e7366657272656405110285130463616c6c851a066465706c6f790686160d02854e3900bf01c401ea01540260029002ad0378049a0403051a052205390808000251084402330730000383770a052837029511d87b10207b15187b161082897b19088289087b198285108286183308205010023c016f686f59821a6faa821b086fbb787b18787a10787908787898bc38787c1f98bc30787c1e98bc28787c1d98bc20787c1c98bc18787c1b98bc10787c1a98bb08787b1998ab38787b1798ab30787b1698ab28787b1598ab20787b1498ab18787b1398ab10787b1298aa08787a11989a38787a0f989a30787a0e989a28787a0d989a20787a0c989a18787a0b989a10787a0a98990878790998893878790798893078790698892878790598892078790498891878790398891078790298880878780182102082151882161095112832009511a07b10587b15509515608411e08272827a08827b108277188283828908828c108288186f746fbb6faa6f276f826fcc6f996f387b17187b1a107b1b087b147b18387b19307b1c287b12208318831a203309ff330b2033070a069551a082105882155095116032008b7910520931c8780883881f8488e05638000001253309040002390a040002ae8a093d080400020133081000028377c887073200009511f07b10087b158475010a02013d0700000251050750100409501006a1009511a07b10587b15509515608411e049111849111049018000330740641849110850100830fe4911384911304911284911208317200a0701821730821838821928821a20d49808d4a707d4870751071633081000028388330701330933000c0a04283b390804000256187f0c2003040002800001330710000283778000330833090a28bafd33078000330850100a21ff83783307330933000c0a0401951140fe7b10b8017b15b0017b16a8019515c0018411e04911584911504911408000330740c8710849114850100e8afd330600000239070000025317046983176033080a010181177c5147881abcd0ae005147c1ce642e6c52471d3657604b4921d8004921d0004921c8004921c0008317c0000a07018217d0008218d8008219c800821ac000d49808d4a707d487075107dc003308100002838833070133090a04281c3308100002838833070133090a04280c838833070133090a040149219800492190004921880049218000831780000a0701821790008218980082198800821a8000d49808d4a707d48707510770330810000228be39070000025617230b330810000228ae831740013308040a01821740018218480182195001821a5801492178014921700149216801492160017b1a98017b1990017b1888017b17800195176001951880015010105ffd33081000028388330733090a042863ff81675617031e3308100002284bff3907000002561723ed0033081000022839ff4921b8004921b0004921a8004921a0009517209518a0003300129511a07b10587b15507b16489515608411e06476828718828910828a0882886f776f996faa6f887b18187b1a107b19087b17491138491130491128491120481140208318831a20831b403309ff33070a03821738821830821928821a206f776f886f996faa7b6a187b69107b68087b679551a08210588215508216489511603200821920821728821830821a387b1a187b18107b17083307800064187b1950101480fb390804000256289f000d2003040002a0000133071000028378800033092033070a04018317e0003308040a018217e0008218e8008219f000821af800492118014921100149210801492100017b1a38017b1930017b1828017b172001951700019518200150101609fc33081000028388330733090a04280dfe330750101890fc33070150101a88fc82ab7b1b1882ab087b1b2082ab107b1b2882aa187b1a308296829a087b1a829a107b1a088299187b19103202214225494a4a12aa529292244992244992244992244992244992244992244992a42449494a525595a424294925494992208484a134290d89902449222524499a2449124aa91081216aa250a511119124240921446a02028188886844449208a50aa52a3522221a119124a110a148111111111111112154a50809212422229124494a52559292244a52495295a424494992242a84101822355244444444444444085529249424494a491200"
+}

templates/react-solidity-remix/contracts/.build/contracts/Storage.json

@@ -1,6 +1,6 @@
 {
   "name": "Storage",
-  "address": "0x12d7b1015d6888edbeb19610cfe518310405c685",
+  "address": "0xf7b90aa295bcf3b17e2ac37e881c50f4c8e7ee73",
   "abi": [
     {
       "inputs": [
@@ -43,5 +43,5 @@
     }
   ],
   "filePath": " - connect to localhost - /Storage.sol",
-  "pinnedAt": 1733225540743
+  "pinnedAt": 1752525690151
 }