Merge pull request #321 from Taombawkry/main

feat: Add ABI sync automation for React frontend

packages/hardhat/README.md

@@ -55,3 +55,33 @@ npx hardhat verify <CONTRACT_ADDRESS>  <CONSTRUCTOR_ARGS> --network celo
 ```
 
 Check the file `hardhat.config.js` for Celo specific hardhat configuration.
+
+5. ABI Synchronization
+
+
+The project includes automatic ABI synchronization with your React frontend. ABIs are synced to `../react-app/src/abis/` during compilation.
+
+- **Automatic Syncing**:
+  - The ABIs only sync automatically when you run:
+    ```bash
+    yarn compile
+    ```
+    or
+    ```bash
+    npm run compile
+    ```
+
+- **Manual Syncing**:
+  - To sync ABIs manually without compilation:
+    - With npm:
+      ```bash
+      npm run sync:abis
+      ```
+    - With Yarn:
+      ```bash
+      yarn sync:abis
+      ```
+
+##### Configuration
+- The sync script (`sync-abis.js`) is made executable automatically during `npm install` or `yarn install` by the `postinstall` hook in `package.json`.
+- **To disable automatic syncing**, remove the `sync-abis.js` call from the `compile` script in `package.json`. This configuration provides a flexible and consistent workflow for both `yarn` and `npm` users.

packages/hardhat/package.json

@@ -29,12 +29,14 @@
     "dotenv": "^16.4.5"
   },
   "scripts": {
-    "compile": "hardhat compile",
+    "postinstall": "chmod +x sync-abis.js",
+    "compile": "hardhat compile && node sync-abis.js",
     "tsc": "npx tsc -p . && cp typechain/*.d.ts dist/typechain/",
     "build": "yarn compile && yarn tsc",
     "clean": "hardhat clean",
     "run:node": "hardhat node",
     "test": "hardhat test",
-    "prettier": "prettier --write 'contracts/**/*.sol' '**/*.ts'"
+    "prettier": "prettier --write 'contracts/**/*.sol' '**/*.ts'",
+    "sync:abis": "node sync-abis.js"
   }
 }

packages/hardhat/sync-abis.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// Configuration - directory files
+const HARDHAT_ARTIFACTS_PATH = './artifacts/contracts';
+const REACT_ABI_PATH = '../react-app/abis';
+
+// Create the React ABI directory if it doesn't exist
+if (!fs.existsSync(REACT_ABI_PATH)) {
+    fs.mkdirSync(REACT_ABI_PATH, { recursive: true });
+}
+
+// Function to walk through directories recursively
+function walkDir(dir) {
+    let results = [];
+    const list = fs.readdirSync(dir);
+    list.forEach(file => {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+        if (stat && stat.isDirectory()) {
+            results = results.concat(walkDir(filePath));
+        } else {
+            if (file.endsWith('.json') && !file.includes('.dbg.')) {
+                results.push(filePath);
+            }
+        }
+    });
+    return results;
+}
+
+// Main script
+console.log("🔄 Syncing ABIs to React app...");
+
+try {
+    // Find all artifact JSON files
+    const artifactFiles = walkDir(HARDHAT_ARTIFACTS_PATH);
+
+    artifactFiles.forEach(filepath => {
+        // Read and parse the artifact file
+        const artifact = JSON.parse(fs.readFileSync(filepath, 'utf8'));
+        const filename = path.basename(filepath);
+        const contractName = filename.replace('.json', '');
+
+        // Extract and save just the ABI
+        const abiPath = path.join(REACT_ABI_PATH, `${contractName}.json`);
+        fs.writeFileSync(abiPath, JSON.stringify(artifact.abi, null, 2));
+        console.log(`Copied ABI for ${contractName}`);
+    });
+
+    console.log("✅ ABI sync complete!");
+} catch (error) {
+    console.error("❌ Error syncing ABIs:", error);
+    process.exit(1);
+}