feat: deploy upgradeable counter to mumbai network

.gitignore

@@ -29,6 +29,7 @@ node_modules
 apps/subgraph/subgraph.yaml
 apps/subgraph/build
 apps/contracts/data
+apps/contracts/broadcast/**
 
 packages/kit/operations.graphql
 

apps/contracts/deployments/1337/Counter.json

@@ -1 +1 @@
-{"address":"0xbCF26943C0197d2eE0E5D05c716Be60cc2761508"}
+{"address":"0x0f5D1ef48f12b6f691401bfe88c2037c690a6afe","startBlock":17}

apps/contracts/deployments/80001/Counter.json

@@ -0,0 +1 @@
+{"address":"0x4dEd60AC9C6859e19bb809026aFE8128DD810992","startBlock":43248929}

apps/contracts/foundry.toml

@@ -8,13 +8,15 @@ fs_permissions = [
 ]
 
 [etherscan]
+mumbai = { key = "${API_KEY_POLYGON}" }
 goerli = { key = "${API_KEY_ETHERSCAN}" }
 base_goerli = { key = "${API_KEY_BASESCAN}" }
 
 [rpc_endpoints]
 local = "http://localhost:8545"
-goerli = "https://eth-goerli.g.alchemy.com/v2/${ALCHEMY_GOERLI_API_KEY}"
-base_goerli = "https://base-goerli.g.alchemy.com/v2/${ALCHEMY_GOERLI_API_KEY}"
+mumbai = "https://polygon-mumbai.g.alchemy.com/v2/${ALCHEMY_KEY}"
+goerli = "https://eth-goerli.g.alchemy.com/v2/${ALCHEMY_KEY}"
+base_goerli = "https://base-goerli.g.alchemy.com/v2/${ALCHEMY_KEY}"
 
 
 # See more config options https://github.com/foundry-rs/foundry/blob/master/crates/config/README.md#all-options

apps/contracts/script/Base.s.sol

@@ -12,7 +12,8 @@ contract BaseScript is Script {
 
     enum DeployementChain {
         Anvil,
-        Goerli
+        Goerli,
+        Mumbai
     }
     string internal mnemonic =
         "test test test test test test test test test test test junk";
@@ -69,6 +70,7 @@ contract BaseScript is Script {
         );
 
         json = vm.serializeAddress(objectName, "address", contractAddress);
+        json = vm.serializeUint(objectName, "startBlock", block.number);
 
         vm.writeFile(filePathWithEncodePacked, json);
     }

apps/contracts/script/Counter.s.sol

@@ -12,6 +12,7 @@ contract CounterScript is BaseScript {
     function setUp() public {
         forks[DeployementChain.Anvil] = "local";
         forks[DeployementChain.Goerli] = "goerli";
+        forks[DeployementChain.Mumbai] = "mumbai";
     }
 
     function deployCounterLocal() public setEnvDeploy(Cycle.Local) {
@@ -21,7 +22,7 @@ contract CounterScript is BaseScript {
     }
 
     function deployCounterTesnet() public setEnvDeploy(Cycle.Testnet) {
-        deploymentChains.push(DeployementChain.Goerli);
+        deploymentChains.push(DeployementChain.Mumbai);
 
         _deployCounter(deploymentChains);
     }

apps/subgraph/config/1337.json

@@ -1,5 +1,5 @@
 {
-  "counterAddress": "0xbCF26943C0197d2eE0E5D05c716Be60cc2761508",
-  "startBlock": 0,
+  "counterAddress": "0x0f5D1ef48f12b6f691401bfe88c2037c690a6afe",
+  "startBlock": 17,
   "network": "localhost"
 }

apps/subgraph/config/5.json

@@ -1,5 +1,4 @@
 {
   "counterAddress": "0x5e28e947EcC3684b6F385Dd1bB0C7Fa6f66F8619",
-  "startBlock": 0,
   "network": "goerli"
 }

apps/subgraph/config/80001.json

@@ -0,0 +1,5 @@
+{
+  "counterAddress": "0x4dEd60AC9C6859e19bb809026aFE8128DD810992",
+  "startBlock": 43248929,
+  "network": "mumbai"
+}

apps/subgraph/copy-artifacts.ts

@@ -4,29 +4,51 @@ import fs from "fs/promises";
 const chainIdToNetwork = {
   1337: "localhost",
   5: "goerli",
+  80001: "mumbai",
   84531: "base-testnet",
 };
 
+/**
+ * This is a list of all the artifacts we want to copy over to the subgraph
+ * or any other package that needs them.
+ */
+const artifacts = [
+  {
+    name: "Counter",
+    abi: counterABI,
+    addresses: counterAddress,
+    chainIds: Object.keys(counterAddress).map((chainId) => parseInt(chainId)),
+  },
+] as const;
+
+const getDeploymentStartBlock = async (name: string, chainId: number) => {
+  return fs
+    .readFile(`../contracts/deployments/${chainId}/${name}.json`, "utf-8")
+    .then(JSON.parse)
+    .then((dep) => dep.startBlock);
+};
+
 const main = async () => {
-  for (const [chainId, address] of Object.entries(counterAddress)) {
-    await fs.writeFile(
-      `./config/${chainId}.json`,
-      JSON.stringify(
-        {
-          counterAddress: address,
-          startBlock: 0,
-          network: chainIdToNetwork[chainId],
-        },
-        null,
-        2
-      )
-    );
+  for (const artifact of artifacts) {
+    for (const chainId of artifact.chainIds) {
+      await fs.writeFile(
+        `./config/${chainId}.json`,
+        JSON.stringify(
+          {
+            counterAddress: artifact.addresses[chainId],
+            startBlock: await getDeploymentStartBlock(artifact.name, chainId),
+            network: chainIdToNetwork[chainId],
+          },
+          null,
+          2
+        )
+      );
+      await fs.writeFile(
+        `./abis/${artifact.name}.json`,
+        JSON.stringify(artifact.abi, null, 2)
+      );
+    }
   }
-
-  await fs.writeFile(
-    "./abis/Counter.json",
-    JSON.stringify(counterABI, null, 2)
-  );
 };
 
 main();

apps/subgraph/package.json

@@ -7,8 +7,11 @@
     "build": "graph build",
     "copy-artifacts": "npx tsx copy-artifacts.ts",
     "prepare:local": "yarn run copy-artifacts && mustache config/1337.json template.yaml > subgraph.yaml && yarn run codegen",
+    "prepare:mumbai": "yarn run copy-artifacts && mustache config/80001.json template.yaml > subgraph.yaml && yarn run codegen",
     "create-local": "graph create --node http://localhost:8020/ local-graph",
     "deploy:local": "yarn run prepare:local && yarn run create-local && graph deploy -l 0.0.1 --node http://localhost:8020/ --ipfs http://localhost:5001 local-graph",
+    "deploy:mumbai": "yarn run prepare:mumbai && graph deploy --product hosted-service nezz0746/starter-counter-mumbai",
+    "deploy:testnets": "yarn run deploy:mumbai",
     "test": "graph test"
   },
   "dependencies": {
@@ -18,6 +21,6 @@
     "wagmi-config": "*"
   },
   "devDependencies": {
-    "matchstick-as": "0.5.0"
+    "matchstick-as": "0.6.0"
   }
 }

apps/web/src/App.tsx

@@ -12,7 +12,11 @@ function App() {
 
   const { data: currentNumber, refetch: refetchCurrentNumber } = useNumberQuery(
     {
-      variables: { id: counterAddress[chainId as keyof typeof counterAddress] },
+      variables: {
+        id: counterAddress[
+          chainId as keyof typeof counterAddress
+        ].toLowerCase(),
+      },
       chainId,
     }
   );
@@ -49,22 +53,22 @@ function App() {
     <div className="h-full w-full">
       <section className="flex w-full flex-col md:flex-row gap-3 mx-auto p-2">
         <div className="w-full md:w-1/2 lg:w-1/3 ">
-          <Card className="fixed">
+          <Card>
             <div className="flex bg-white flex-col space-y-1.5 p-6 border-b-2 border-gray-300">
               <h3 className="text-2xl font-semibold leading-none tracking-tight">
                 Update Counter
               </h3>
             </div>
             <div className="p-6 flex flex-row justify-between items-center w-full gap-4 border-b">
-              <p className="text-sm font-medium leading-none">Current number</p>
+              <p className="text-sm font-medium leading-none">Current value</p>
               <p>{currentNumber?.number?.value}</p>
             </div>
             <div className="p-6 w-full">
               <label
                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 htmlFor="number-input"
               >
-                Number Input
+                New Input
               </label>
               <div className="flex gap-4 mt-2 w-full">
                 <input
@@ -90,18 +94,18 @@ function App() {
           <Card>
             <div className="flex flex-col space-y-1.5 p-6 border-b-2 border-gray-300">
               <h3 className="text-2xl font-semibold leading-none tracking-tight">
-                Number Updates History
+                Counter Updates History
               </h3>
             </div>
             <div className="">
               <ul className="divide-y divide-gray-200 dark:divide-gray-700">
                 {numberSets?.map((numberSet, _index) => {
                   return (
-                    <li className="p-3">
+                    <li className="px-3 flex flex-row items-center gap-2 justify-between">
+                      <div className="text-lg">{numberSet.newValue}</div>
                       <div className="text-xs text-gray-500 dark:text-gray-400">
                         Update {_index + 1} at block {numberSet?.blockNumber}
                       </div>
-                      <div className="text-lg">{numberSet.newValue}</div>
                     </li>
                   );
                 })}

package.json

@@ -6,11 +6,11 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "kit:codegen": "yarn workspace kit run codegen",
+    "kit:codegen": "yarn workspace web-kit run codegen",
     "chain": "cd apps/contracts && yarn run chain",
     "dev": "turbo run dev --parallel",
     "deploy:local": "yarn workspace contracts run deploy:local && yarn workspace wagmi-config run generate && yarn workspace subgraph run deploy:local && yarn run kit:codegen",
-    "deploy:testnets": "yarn workspace contracts run deploy:testnets && yarn workspace wagmi-config run generate",
+    "deploy:testnets": "yarn workspace contracts run deploy:testnets && yarn workspace wagmi-config run generate  && yarn workspace subgraph run deploy:testnets && yarn run kit:codegen",
     "lint": "turbo run lint",
     "test": "turbo run test",
     "test:force": "turbo run test --force",