move contract addresses to their own module

client/package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.6.7",
         "bootstrap": "^5.3.3",
         "bootswatch": "^5.3.3",
+        "contract-config": "file://../contract-config",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.1",
@@ -53,6 +54,10 @@
         "eslint-plugin-react-hooks": "^4.6.0"
       }
     },
+    "../contract-config": {
+      "version": "1.0.0",
+      "license": "ISC"
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -6627,6 +6632,10 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "peer": true
     },
+    "node_modules/contract-config": {
+      "resolved": "../contract-config",
+      "link": true
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "contract-config": "file://../contract-config",
     "@metamask/sdk-react": "^0.16.0",
     "@tanstack/react-table": "^8.13.2",
     "axios": "^1.6.7",

client/src/App.jsx

@@ -11,8 +11,9 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Stack from 'react-bootstrap/Stack';
 
+import { getContractByChainId } from 'contract-config';
+
 import Web3Context from './Web3Context';
-import contracts from './contracts';
 import DAOArtifact from './assets/DAO.json';
 import work1Artifact from './assets/Work1.json';
 import AvailabilityStakes from './AvailabilityStakes';
@@ -68,11 +69,11 @@ function App() {
   // In this effect, we initialize everything and add contract event listeners.
   useEffect(() => {
     if (!provider || !chainId || !account || balance === undefined) return;
-    if (!contracts[chainId]) return;
-
+    const DAOAddress = getContractByChainId(chainId, 'DAO');
+    const Work1Address = getContractByChainId(chainId, 'Work1');
     const web3 = new Web3(provider);
-    const DAOContract = new web3.eth.Contract(DAOArtifact.abi, contracts[chainId].DAO);
-    const work1Contract = new web3.eth.Contract(work1Artifact.abi, contracts[chainId].Work1);
+    const DAOContract = new web3.eth.Contract(DAOArtifact.abi, DAOAddress);
+    const work1Contract = new web3.eth.Contract(work1Artifact.abi, Work1Address);
 
     /* -------------------------------------------------------------------------------- */
     /* --------------------------- BEGIN FETCHERS ------------------------------------- */
@@ -284,7 +285,7 @@ function App() {
       params: {
         type: 'ERC20',
         options: {
-          address: contracts[chainId].DAO,
+          address: getContractByChainId(chainId, 'DAO'),
         },
       },
     });
@@ -342,7 +343,7 @@ function App() {
           <Container>
             <Row>
               <Col>
-                {!contracts[chainId] && (
+                {chainId !== '0xaa36a7' && (
                 <div>
                   Please switch MetaMask to Sepolia testnet!
                 </div>

client/src/AvailabilityStakes.jsx

@@ -2,8 +2,9 @@ import { useCallback, useContext } from 'react';
 import { PropTypes } from 'prop-types';
 import Button from 'react-bootstrap/Button';
 
+import { getContractByChainId } from 'contract-config';
+
 import Web3Context from './Web3Context';
-import contracts from './contracts';
 
 const getAvailabilityStatus = (stake) => {
   if (stake.reclaimed) return 'Reclaimed';
@@ -18,7 +19,7 @@ function AvailabilityStakes({ showActions, showAmount, onlyShowAvailable }) {
   } = useContext(Web3Context);
 
   const stakeAvailability = useCallback(async (duration) => {
-    const target = contracts[chainId].Work1;
+    const target = getContractByChainId(chainId, 'Work1');
     await DAO.methods.stakeAvailability(target, reputation / BigInt(2), duration).send({
       from: account,
       gas: 999999,

client/src/contracts.js

@@ -1,12 +0,0 @@
-const contracts = {
-  '0x539': { // Hardhat
-    DAO: '0x76Dfe9F47f06112a1b78960bf37d87CfbB6D6133',
-    Work1: '0xd2845aE812Ee42cF024fB4C55c052365792aBd78',
-  },
-  '0xaa36a7': { // Sepolia
-    DAO: '0x39B7522Ee1A5B13aE5580C40114239D4cE0e7D29',
-    Work1: '0xC0Bb36820Ba891DE4ed6D60f75066805361dbeB8',
-  },
-};
-
-export default contracts;

contract-config/addresses.json

@@ -0,0 +1,10 @@
+{
+  "localhost": {
+    "DAO": "0x76Dfe9F47f06112a1b78960bf37d87CfbB6D6133",
+    "Work1": "0xd2845aE812Ee42cF024fB4C55c052365792aBd78"
+  },
+  "sepolia": {
+    "DAO": "0x39B7522Ee1A5B13aE5580C40114239D4cE0e7D29",
+    "Work1": "0xC0Bb36820Ba891DE4ed6D60f75066805361dbeB8"
+  }
+}

contract-config/index.js

@@ -0,0 +1,18 @@
+import contractAddresses from './addresses.json';
+
+export const networks = {
+  localhost: '0x539',
+  sepolia: '0xaa36a7',
+};
+
+export const getContractByNetworkName = (networkName, contractName) => {
+  const address = contractAddresses[networkName][contractName];
+  if (!address) throw new Error(`Contract ${contractName} not recognized`);
+  return address;
+};
+
+export const getContractByChainId = (chainId, contractName) => {
+  const network = Object.entries(networks).find(([_, id]) => id === chainId)[0];
+  if (!network) throw new Error(`Chain ID ${chainId} not recognized`);
+  return getContractByNetworkName(network, contractName);
+};

contract-config/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "contract-config",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}