From 3a30c3d9e3bcd9f7e9437659740c5f9bc5f43c9d Mon Sep 17 00:00:00 2001
From: Dan Forbes <dan.forbes@chainsafe.io>
Date: Mon, 9 Sep 2024 13:02:42 -0400
Subject: [PATCH] feat(web3js-plugin): existing-contract

Add docs for instantiating and interacting with an existing smart
contract.
---
 content/10.js/01.web3js/07.contracts.md | 111 +++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 3 deletions(-)

diff --git a/content/10.js/01.web3js/07.contracts.md b/content/10.js/01.web3js/07.contracts.md
index 286c3f9..e36a8cc 100644
--- a/content/10.js/01.web3js/07.contracts.md
+++ b/content/10.js/01.web3js/07.contracts.md
@@ -48,24 +48,25 @@ async function main() {
 
   // replace with actual values
   const contractAbi: ContractAbi = [];
-  const constractByteCode: Bytes = "";
+  const contractByteCode: Bytes = "";
 
   // create a ContractFactory that uses the default create deployment type
   const contractFactory: ContractFactory<ContractAbi> = new ContractFactory(
     contractAbi,
-    constractByteCode,
+    contractByteCode,
     wallet,
   );
 
   // or specify the deployment type
   // const contractFactory: ContractFactory<ContractAbi> = new ContractFactory(
   //   contractAbi,
-  //   constractByteCode,
+  //   contractByteCode,
   //   wallet,
   //   "createAccount",
   // );
 
   const contract: Contract<ContractAbi> = await contractFactory.deploy();
+  console.log("Contract address:", contract.options.address);
   console.log("Contract methods:", contract.methods);
 }
 
@@ -114,3 +115,107 @@ const returnValue = await contract.methods
   .contractMethod(/* method parameters, if any */)
   .call();
 ```
+
+## Interact with an existing smart contract
+
+The example above demonstrates interacting with a new smart contract that was deployed with a `ContractFactory`. The
+following examples demonstrate instantiating and interacting with an existing smart contract.
+
+To instantiate an existing smart contract from a server-side environment (e.g. Node.js), use a `ZKsyncWallet` and its
+`provider` property to construct a new `Contract` object as demonstrated in the following code sample:
+
+```ts
+import { Contract, ContractAbi, Web3 } from "web3";
+import {
+  types,
+  Web3ZKsyncL2,
+  ZKsyncPlugin,
+  ZKsyncWallet,
+} from "web3-plugin-zksync";
+
+async function main() {
+  const web3: Web3 = new Web3(/* optional L1 provider */);
+  web3.registerPlugin(
+    new ZKsyncPlugin(
+      Web3ZKsyncL2.initWithDefaultProvider(types.Network.Sepolia),
+    ),
+  );
+  const zksync: ZKsyncPlugin = web3.ZKsync;
+
+  const PRIVATE_KEY: string = "<PRIVATE_KEY>";
+  const wallet: ZKsyncWallet = new zksync.Wallet(PRIVATE_KEY);
+
+  // replace with actual values
+  const contractAbi: ContractAbi = [];
+  const contractAddress: string = "<CONTRACT_ADDRESS>";
+
+  // use the wallet and its provider to instantiate the contract
+  const contract: Contract<ContractAbi> = new wallet.provider!.eth.Contract(
+    contractAbi,
+    contractAddress,
+  );
+
+  const returnValue = await contract.methods
+    .contractMethod(/* method parameters, if any */)
+    .call();
+}
+
+main()
+  .then(() => console.log("✅ Script executed successfully"))
+  .catch((error) => console.error(`❌ Error executing script: ${error}`));
+```
+
+The following React component demonstrates instantiating and interacting with an existing smart contract using an
+injected provider (e.g. MetaMask):
+
+```ts
+import { useEffect, useState } from "react";
+
+import { Contract, ContractAbi } from "web3";
+import { ZKsyncPlugin } from "web3-plugin-zksync";
+
+function App() {
+  const [zksync, setZKsync] = useState<ZKsyncPlugin | null>(null);
+  useEffect(() => {
+    if (window.ethereum) {
+      setZKsync(new ZKsyncPlugin(window.ethereum));
+    } else {
+      console.error("No injected providers");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!zksync) {
+      return;
+    }
+
+    // replace with actual values
+    const contractAbi: ContractAbi = [];
+    const contractAddress: string = "<CONTRACT_ADDRESS>";
+
+    // use the plugin and its provider to instantiate the contract
+    const contract: Contract<ContractAbi> = new zksync.L2.eth.Contract(
+      contractAbi,
+      contractAddress,
+    );
+
+    const callContract = async () => {
+      // use an injected account to interact with the smart contract
+      const allAccounts = await zksync.L2.eth.requestAccounts();
+      // send a transaction that updates the state of the smart contract
+      const transactionReceipt = await contract.methods
+        .contractMethod(/* method parameters, if any */)
+        .send({ from: allAccounts[0] });
+      // call a smart contract to inspect its state
+      const returnValue = await contract.methods
+        .contractMethod(/* method parameters, if any */)
+        .call();
+    };
+
+    callContract();
+  }, [zksync]);
+  return <div className="App"></div>;
+}
+
+export default App;
+```