# 2. Storage Factory Alright, listen up. When you dive into my articles, you're jumping into the deep end. Here's the deal: we dissect a smart contract, piece by piece, then roll up our sleeves and craft one ourselves. I won't baby you with basic syntax. Nope. I’m just showing how I hustled, practised, and levelled up my Solidity skills. Ready to dive in? > These articles are build up in complexity. So this article is build **[on this one](https://www.razacodes.com/blog/Simple-Storage)**. > ### Why practising this smart contract is useful Let me start by saying that I got this example contract from **[Patrick Collins Course](https://www.youtube.com/watch?v=umepbfKp5rI&t=21276s).** Watch his course if you want a walkthrough of the contract and syntax. This contract explains how to deploy a smart contract through another smart contract. This is called a Factory Pattern. Factory patterns are used a lot in the web3 world. So you should be super familiar with this pattern. [Check out the Github repo here](https://github.com/razacodespython/practisesolidity/tree/main/storagefactory) for any reference or implemented code. ### How to use this article Like I said. We look at a contract. Deconstruct it. Do some practise. Then we craft one ourselves. This article is not just for reading. You need to do the exercises or else it’s pointless. Here’s what we’re going to do: 1. Take a contract and understand what it’s aiming to do. 2. Talk a bit about syntax if it hasn’t been covered by previous articles. Remember, these articles build on top of each other! 3. Practise, Practise, Practise 4. Then build the contract, based on a template with instructions ### The contract ******************SimpleStorage****************** ```solidity // I'm a comment! // SPDX-License-Identifier: MIT pragma solidity 0.8.19; // pragma solidity ^0.8.0; // pragma solidity >=0.8.0 <0.9.0; contract SimpleStorage { uint256 myFavoriteNumber; struct Person { uint256 favoriteNumber; string name; } // uint256[] public anArray; Person[] public listOfPeople; mapping(string => uint256) public nameToFavoriteNumber; function store(uint256 _favoriteNumber) public virtual { myFavoriteNumber = _favoriteNumber; } function retrieve() public view returns (uint256) { return myFavoriteNumber; } function addPerson(string memory _name, uint256 _favoriteNumber) public { listOfPeople.push(Person(_favoriteNumber, _name)); nameToFavoriteNumber[_name] = _favoriteNumber; } } ``` **************Factory************** ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.19; // import {SimpleStorage, SimpleStorage2} from "./SimpleStorage.sol"; import {SimpleStorage} from "./SimpleStorage.sol"; contract StorageFactory { SimpleStorage[] public listOfSimpleStorageContracts; function createSimpleStorageContract() public { SimpleStorage simpleStorageContractVariable = new SimpleStorage(); // SimpleStorage simpleStorage = new SimpleStorage(); listOfSimpleStorageContracts.push(simpleStorageContractVariable); } function sfStore( uint256 _simpleStorageIndex, uint256 _simpleStorageNumber ) public { // Address // ABI // SimpleStorage(address(simpleStorageArray[_simpleStorageIndex])).store(_simpleStorageNumber); listOfSimpleStorageContracts[_simpleStorageIndex].store( _simpleStorageNumber ); } function sfGet(uint256 _simpleStorageIndex) public view returns (uint256) { // return SimpleStorage(address(simpleStorageArray[_simpleStorageIndex])).retrieve(); return listOfSimpleStorageContracts[_simpleStorageIndex].retrieve(); } } ``` ### What does the contract DO Breaking it down simple. I like to look at the functions and then use that angle to define what the contract does. Looking at the contracts above we have our SimpleStorage we deconstructed in our last article. Now we’re going to use a so called “Factory” pattern to deploy that contract, from another contract. So we’re looking at **************StorageFactory.sol************** in this case: 1. CreateSimpleStorageContract - this creates the contract and stores the address inside an array. 2. sfStore - this function stores a "Favourite number", for a specific SimpleStorage contract that we deployed. This function is inherited from the SimpleStorage.sol 3. sfGet - this function gets the number we stored with sfStore for a specific Simple Storage smart contract. There is one fundamental aspect you should check out ********************SimpleStorage.sol******************** for. The function `store` has a new keyword: `virtual`. We’ll touch upon that in the next chapter. Or just watch [**this part of the course](https://youtu.be/umepbfKp5rI?t=14703).** ### Solidity syntax I should know For this level of contract I need to be familiar with: 1. Variables and typing (type + visibility) 2. Basics functions 3. Import 4. Functions from derived contract 5. Keyword: Virtual & Override ### Practise Cool now we know what the contract does. Next we’re going to cover some new syntax that we haven’t encountered in the previous chapters. #### Importing Contracts Often, one smart contract might need some functionality of other smart contracts. In these cases, we can use the `import` statement in Solidity. Following are some ways to import a smart contract into another one: **Importing a local contract** A contract can be imported using the path of that contract. ```solidity import "./SpeacialContract.sol"; ``` **Importing from GitHub** A contract stored on GitHub can be imported using the complete link of the contract file ```solidity import "https://github.com/aave/aave-v3-core/blob/master/contracts/flashloan/base/FlashLoanSimpleReceiverBase.sol"; ``` **Importing from NPM** A contract library published on NPM can be imported using the library's name along with the contract’s name ```solidity import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; ``` **Importing from IPFS** A contract stored on IPFS can be imported using the CID of the file along with `ipfs://` as the suffix. ```solidity import 'ipfs://Qmdyq9ZmWcaryd1mgGZ4PttRNctLGUSAMpPqufsk6uRMKh'; ``` #### Override The **`override`** keyword in Solidity is used to explicitly indicate that a function in a derived contract intentionally overrides a virtual function from a base contract or interface. It ensures that the function signature and visibility in the derived contract match those in the base contract, preventing accidental errors and providing clarity. To correctly use **`override`**, the function in the base contract/interface must be declared as **`virtual`**, and the function name, parameter types, and order must be identical in the derived contract. OK. That’s basically it for the fundamentals in syntax. Now I didn’t address everything for a simple reason, because I’m assuming you watch an actual tutorial before you came here. These are just my notes for when I was going through the course and served as a refresher before I dove into exercises. ### Exercises Alright, we covered some new Solidity syntax. If you go through these exercises and you find yourself in a pickle, because let’s say you might not know how to define a function. You need to go back to previous chapters. I can’t stress enough, that these chapters are build on top of each other. Exercise 1: Declare a state variable of type uint256 with the public visibility. Create a function to set the value of the variable. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract VariableExercise { uint256 public myNumber; // Public state variable of type uint256 function setNumber(uint256 _number) public { myNumber = _number; } } ``` Exercise 2: Declare a private state variable of type bool and create a function to toggle its value. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract VariableExercise { bool private isActivated; // Private state variable of type bool function toggleActivation() public { isActivated = !isActivated; // Toggle the value of isActivated } } ``` Exercise 3: Declare a constant state variable of type address and assign it a specific address. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract VariableExercise { address public constant myAddress = 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4; // Constant state variable // ... } ``` Exercise 4: Create a function that returns the sum of two input integers. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BasicFunctionsExercise { function addNumbers(uint256 a, uint256 b) public pure returns (uint256) { return a + b; } } ``` Exercise 5: Create a function that multiplies an input integer by 2 and returns the result. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BasicFunctionsExercise { function multiplyByTwo(uint256 number) public pure returns (uint256) { return number * 2; } } ``` Exercise 6: Create a function that checks if an input address is the contract creator. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BasicFunctionsExercise { address public contractOwner; constructor() { contractOwner = msg.sender; } function isContractOwner() public view returns (bool) { return msg.sender == contractOwner; } } ``` Exercise 7: Create a contract that imports and inherits functions from another contract. Helper.sol: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract Helper { function getDouble(uint256 number) public pure returns (uint256) { return number * 2; } } ``` Main Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./Helper.sol"; // Import the Helper contract contract ImportExercise is Helper { // This contract now has access to the functions from the Helper contract // ... } ``` Exercise 8: Create a new contract in a separate file named `Helper.sol`, and import it into the new contract. Generate a new Helper smart contract in the constructor of the new contract. In the **Helper.sol** include a function that multiplies the input by 2 and include a function that get's the address of the new Helper smart contract. Helper.sol: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract Helper { function getDouble(uint256 number) public pure returns (uint256) { return number * 2; } } ``` Main Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./Helper.sol"; // Import the Helper contract contract ImportExercise { Helper private helperContract; constructor() { helperContract = new Helper(); } function getContractAddress() public view returns (address) { return address(helperContract); } function useHelper(uint256 number) public view returns (uint256) { return helperContract.getDouble(number); } } ``` Exercise 9: Create a library named `MathLib` in a separate file and import it into a new contract. Inside the Mathlib.sol, include a function to sum 2 numbers. Use the Mathlib.sol function inside the new contract. MathLib.sol: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; library MathLib { function add(uint256 a, uint256 b) public pure returns (uint256) { return a + b; } } ``` Main Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./MathLib.sol"; // Import the MathLib library contract ImportExercise { function useMathLib(uint256 a, uint256 b) public pure returns (uint256) { return MathLib.add(a, b); } } ``` Exercise 10: Create a base contract with a function that returns the contract address. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BaseContract { function getContractAddress() public view returns (address) { return address(this); } } ``` Derived Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./BaseContract.sol"; // Import the BaseContract contract DerivedContract is BaseContract { // This contract now has access to the getContractAddress() function from the BaseContract // ... } ``` Exercise 11: Create a base contract with a function that accepts two integers and returns their sum. Create a derived contract based on the base contract. ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BaseContract { function addNumbers(uint256 a, uint256 b) public pure returns (uint256) { return a + b; } } ``` Derived Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./BaseContract.sol"; // Import the BaseContract contract DerivedContract is BaseContract { // This contract now has access to the addNumbers() function from the BaseContract // ... } ``` Exercise 12: Create a base contract with a virtual function and then override it in the derived contract. The function inside the base contract should return 100 and insinde the derived contract 200. Base Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract BaseContract { function getValue() public virtual pure returns (uint256) { return 100; } } ``` Derived Contract: ```solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; import "./BaseContract.sol"; // Import the BaseContract contract DerivedContract is BaseContract { function getValue() public override pure returns (uint256) { return 200; } } ``` ### Final Task Just like the last article, now we’re going to type up the contract. Below you will find a blank template with instructions. At this point, if you’re unclear how to write up a specific task, ask yourself what you ********don’t know********. That’s your weak point and what you should be working on Here’s a blank template with comments. Write it out. ```solidity // I'm a comment! // SPDX-License-Identifier: MIT pragma solidity 0.8.19; // pragma solidity ^0.8.0; // pragma solidity >=0.8.0 <0.9.0; //import the SimpleStorage contract //make sure you have a SimpleStorage.sol in the same directory! //define the contract //define an array using the type SimpleStorage to hold all the smartcontracts addresses that you deploy //write a function to create a SimpleStorage contract //inside the function push the contract to the array defined before //use the store function from the SimpleStorage.sol to store a favourite number at a certain index //so this function takes 2 params: index number and the favourite number //write a function that uses the retrieve function from SimpleStorage ``` ### Using Developer Tools I like **************Brownie************** better, because it’s Python. Python is much cleaner and easier to use. Having said that, probably most devs will opt for JavaScript. Then my preferred tool is ******Truffle******, because of Truffle dashboard. ### Truffle OK, let’s install Truffle and then use it to write some basic test and then deploy it. If you’ve never touched Truffle, no worries I got you. #### Install Truffle Truffle is a popular development environment, testing framework, and asset pipeline for Ethereum. To deploy with Truffle, follow the steps below: Install Truffle globally using npm: ```bash npm install -g truffle ``` You can run the following command to create a starter project: ```bash truffle unbox metacoin ``` If you want to create a complete blank project run: ```bash truffle init ``` Remove the old contracts and test files that came with the Metacoin project. **Replace the old contract file name with your contract.** This is the new contract you're deploying. #### Configure Truffle We’re going to use Truffle Dashboard, what that is, I’ll show in a minute. Truffle Dashboard should work out of the box, but just in case it doesn’t…adjust your ********truffle.config.js******** file like this: ```jsx // Configure your compilers compilers: { solc: { version: "0.8.17", // Fetch exact version from solc-bin } }, dashboard: { port: 24013, host:"localhost" , }, networks: { // ... network configurations, including the network named 'dashboard' ``` Now you if you know a little bit dev tools, you might be asking, where do i pass the rpc url. Well you don’t have to. Let’s take a look. #### Deploy Normally you test first, then deploy. But if you’re starting out, you might not be interested in tests. So we’ll do deploying first and then dive into tests. We’re going to need ********two******** windows in your terminal. In the first we run Truffle Dashboard, which spins up a local host server. The second where we will compile the contract and send it to the dashboard to deploy. ********************************Terminal 1: Run dashboard******************************** ```bash truffle dashboard ``` Go to your browser (if it doesn’t pop up automagically) and the dashboard should be running on localhost:24013 Connect your wallet. I use MetaMask, and connect to the network you want to use. ************************Terminal 2: Compile and send contract************************ ```bash truffle migrate --network dashboard ``` Now when you run the above command, go to your dashboard and you should see the metadata of your contract. Make sure your wallet is connected and you’re on the desired network (probably a test net). Click deploy and that’s it! #### Test your contract Tests basically run a function and check if the function returns the desired outcome. So you need to tell a test what function to run, the parameters(if any) and then what the desired outcome is. That’s it. In the ********test******** folder create a file. I usually stick with the name of the contract so: **********************simpleStorage.js********************** Use the following command in your terminal to run the tests: ```bash truffle test ``` If you want to run a specific test file use: ```bash $ truffle test ./path/to/test/file.js ``` Here are some example tests. Please note, be careful with GPT. I tried it with GPT and the first couple of tests were actually not working. ```jsx const SimpleStorage = artifacts.require("SimpleStorage"); const StorageFactory = artifacts.require("StorageFactory"); contract("TestStorageContracts", (accounts) => { // Test SimpleStorage contract it("should store and retrieve favorite number in SimpleStorage contract", async () => { const simpleStorageInstance = await SimpleStorage.new(); const favoriteNumber = 42; // Store the favorite number in SimpleStorage contract await simpleStorageInstance.store(favoriteNumber); // Retrieve the favorite number from SimpleStorage contract const retrievedFavoriteNumber = await simpleStorageInstance.retrieve(); // Assert the retrieved favorite number matches the stored value assert.equal(retrievedFavoriteNumber, favoriteNumber, "Stored and retrieved favorite numbers should match"); }); // Test StorageFactory contract it("should create and interact with SimpleStorage contracts via StorageFactory contract", async () => { const storageFactoryInstance = await StorageFactory.new(); const favoriteNumber = 100; // Create a new SimpleStorage contract via StorageFactory await storageFactoryInstance.createSimpleStorageContract(); // Get the first SimpleStorage contract address from the StorageFactory const simpleStorageAddress = await storageFactoryInstance.listOfSimpleStorageContracts(0); // Get the SimpleStorage contract instance from the address const simpleStorageInstance = await SimpleStorage.at(simpleStorageAddress); // Store the favorite number in the first SimpleStorage contract via StorageFactory await storageFactoryInstance.sfStore(0, favoriteNumber); // Retrieve the favorite number from the first SimpleStorage contract via StorageFactory const retrievedFavoriteNumber = await storageFactoryInstance.sfGet(0); // Assert the retrieved favorite number matches the stored value assert.equal(retrievedFavoriteNumber, favoriteNumber, "Stored and retrieved favorite numbers should match"); }); }); ``` ### Brownie Brownie is a Python framework for Ethereum smart contract testing, debugging, interaction and deployment. #### Install Brownie You can make use of the pipx library. It makes it easier to create a virtual environment on the fly. A virtual environment is just a sandbox on your computer, where you can install stuff locally, instead of globally. So its a closed play area. However I like to do it the standard way, which is creating your own python virtual environment and then installing everything. Just works everytime. ```bash python3 -m venv ./myv source ./myv/bin/activate ``` Then you can go ahead and use the **pip** to install brownie and the dotenv library at the same time. ```bash pip install python-dotenv eth-brownie ``` Set up a new Brownie project with a standard ERC20 smartcontract ```bash brownie bake token cd token ``` Rename the contract to **************************************simpleStorage.sol************************************** and paste the code in there. #### Configure Brownie There are different ways to add networks to Brownie. I like to do it like this. Create a `network-config.yaml` file with the Scroll Alpha Testnet information. ```yaml live: - name: Ethereum networks: - chainid: 534353 explorer: https://blockscout.scroll.io/ host: https://scroll-alphanet.public.blastapi.io id: testnet-scroll name: Testnet (scroll) ``` Import the network configuration and create a new account with your private key. **my-new-account** is the name I gave, you can pass any name you want here. After this prompt, you will be asked to input the private key and choose a password. ```bash brownie networks import ./network-config.yaml brownie accounts new my-new-account ``` #### Deploy with Brownie Run the following command: ```bash brownie compile ``` Make sure to adjust the [deploy.py](http://deploy.py) script. Our contract doesn’t take in any parameters to deploy, so we can remove everything, except for the account part. ```python from brownie import StorageFactory, accounts account = accounts.load("my-new-account") def main(): return StorageFactory.deploy({'from': account}) ``` Now go to your terminal and run: ```bash brownie run storagefactory.py --network testnet-scroll ``` That’s it ## Test with Brownie The following tests, go into the test folder. They are the same as the JavaScript tests, but instead written in Python. Make sure you have ganache installed, which is a local blockchain to test stuff: ```bash npm install -g ganache ``` Make sure your filename starts with test. Example: `test_factory.py`. As for the tests: ```python from brownie import accounts, SimpleStorage, StorageFactory def test_simple_storage_contract(): # Deploy the SimpleStorage contract simple_storage = SimpleStorage.deploy({'from': accounts[0]}) # Store a favorite number favorite_number = 42 simple_storage.store(favorite_number, {'from': accounts[0]}) # Retrieve the stored favorite number retrieved_favorite_number = simple_storage.retrieve() # Assert the retrieved favorite number matches the stored value assert retrieved_favorite_number == favorite_number, "Stored and retrieved favorite numbers should match" def test_storage_factory_contract(): # Deploy the StorageFactory contract storage_factory = StorageFactory.deploy({'from': accounts[0]}) # Create a new SimpleStorage contract via StorageFactory storage_factory.createSimpleStorageContract({'from': accounts[0]}) # Get the first SimpleStorage contract address from the StorageFactory simple_storage_address = storage_factory.listOfSimpleStorageContracts(0) # Get the SimpleStorage contract instance from the address simple_storage = SimpleStorage.at(simple_storage_address) # Store a favorite number in the first SimpleStorage contract via StorageFactory favorite_number = 100 storage_factory.sfStore(0, favorite_number, {'from': accounts[0]}) # Retrieve the favorite number from the first SimpleStorage contract via StorageFactory retrieved_favorite_number = storage_factory.sfGet(0) # Assert the retrieved favorite number matches the stored value assert retrieved_favorite_number == favorite_number, "Stored and retrieved favorite numbers should match" ``` ### How to build a dApp with this My goal was to go end to end. Building a smart contract was just a part of what I want to do. The cool thing is, that with simple smart contracts like this, it makes everything easier. From deploying, to tests, to building out the front end. So that’s what I’m sharing in this section. How to build out a frontend for this smart contract. We’re going to use 2 frameworks for that: 1. Ethers 2. NextJS I love nextJS, its easy to build with and easy to deploy. This is how I interact with the smart contract in a react framework like NextJS. Here is the [Github link](https://github.com/razacodespython/practisesolidity/tree/main/simplestorage1/simplestorage) if you want to go over the code. #### Install dependencies I’m going to assume you have nodeJS installed by now. If not…Google. I created a new project with: ```json npx create-next-app ``` I didn’t use TS, because I don’t like torturing myself and I used Next 13 with the App Router. Quick disclaimer, you can still choose to not use the App Router. All you need to do is, copy paste whatever is in the **************page.jsx************** file to ******************index.jsx.****************** I’ll write about it again in a bit. This is what the choices look like. **********************Again I chose NO for TypeScript and `src/` directory.********************** Install ethers, and a very specific version: ```json npm install ethers@5.7.2 ``` Why the specific version? Because in the latest version of ethers, they changed fundamental shit under the hood (how you instantiate the signer and provider I believe). At some point I’ll need to dive into that, but for now, this is just easier. #### Front end This is what the front end looks like: ![Screenshot 2023-08-13 at 21.37.29.png](/images/posts/storagefactory/Screenshot_2023-08-13_at_21.37.29.png) I didn’t include any styling (except some inline border colours), so you can play around with it however you want. Maybe later I’ll use Chakra later to spice it up. I didn’t use TS, because I don’t like torturing myself and I used Next 13 without the App Router. Quick disclaimer, you can still choose to use the App Router. All you need to do is, copy paste whatever is in the **************index.jsx************** file to ******************page.jsx.****************** I’ll write about it again in a bit. This is what the choices look like. **********************Again I chose NO for TypeScript and `src/` directory.********************** ![Screenshot 2023-07-29 at 11.21.27.png](/images/posts/simplestorage/Screenshot_2023-07-29_at_11.21.27.png) #### Connect Wallet First thing we need to do is connect our wallet. We’re going to use ethers for that. Please note that technically speaking the disconnect button doesn’t actually disconnects the users, but resets the state. If you go to metamask and check your wallet after using the disconnect button, you will see that it’s actually still connected. I will touch upon different libraries later that help with this. ```solidity import { useState } from "react"; import { ethers } from "ethers"; export default function WalletConnect() { const [provider, setProvider] = useState(null); const [signer, setSigner] = useState(null); const [connectedAddress, setConnectedAddress] = useState(null); const connectWallet = async () => { try { // Check if window.ethereum is available if (typeof window.ethereum !== "undefined") { // Request access to the user's MetaMask account await window.ethereum.request({ method: "eth_requestAccounts" }); const web3Provider = new ethers.providers.Web3Provider(window.ethereum); setProvider(web3Provider); // Get the connected signer const connectedSigner = web3Provider.getSigner(); setSigner(connectedSigner); // Get the connected address directly from the signer const connectedAddress = await connectedSigner.getAddress(); setConnectedAddress(connectedAddress); } else { console.error("MetaMask not found. Please install MetaMask to use this dApp."); } } catch (error) { console.error("Error connecting wallet:", error); } }; const disconnectWallet = () => { setProvider(null); setSigner(null); setConnectedAddress(null); }; return (

{connectedAddress ? ( <>

Connected with address: {connectedAddress}

) : ( )}

); } ``` #### Interacting with the smartcontract Create a new file called `abi.json` in the root folder of your Next.js project or store it in a folder called `contracts` . Now you need to get the ABI from your deployed smart contract. In your truffle or brownie project, you can find this under `build>contracts>StorageFactory.json`. You only need the abi part in that json. Here’s an example of my abi: ``` [ { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "listOfSimpleStorageContracts", "outputs": [ { "internalType": "contract SimpleStorage", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function", "constant": true }, { "inputs": [], "name": "createSimpleStorageContract", "outputs": [], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "_simpleStorageIndex", "type": "uint256" }, { "internalType": "uint256", "name": "_simpleStorageNumber", "type": "uint256" } ], "name": "sfStore", "outputs": [], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "_simpleStorageIndex", "type": "uint256" } ], "name": "sfGet", "outputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "stateMutability": "view", "type": "function", "constant": true } ] ``` This is what my code looks like in the `index.js` file inside the `pages` folder ```jsx import { useEffect, useState } from "react"; import { ethers } from "ethers"; import abi from "../contracts/abi.json" export default function Home() { const [provider, setProvider] = useState(null); const [accounts, setAccounts] = useState([]); const [contract, setContract] = useState(null); const [contractAddress, setContractAddress] = useState(""); const [favoriteNumber, setFavoriteNumber] = useState(0); useEffect(() => { initializeEthers(); }, []); const initializeEthers = async () => { try { // Check if window.ethereum is available if (typeof window.ethereum !== "undefined") { const web3Provider = new ethers.providers.Web3Provider(window.ethereum); setProvider(web3Provider); const signer = provider.getSigner() // Get the connected accounts const accounts = await web3Provider.listAccounts(); console.log(signer) setAccounts(accounts); // Initialize contract const contractAddress = "0xaAeC7c3a1Af1d5a7f9542D8199e26F95dFa88cAc"; const contractAbi = abi; const storageFactoryContract = new ethers.Contract( contractAddress, contractAbi, signer ); setContract(storageFactoryContract); setContractAddress(contractAddress); } else { console.error("MetaMask not found. Please install MetaMask to use this dApp."); } } catch (error) { console.error("Error initializing ethers:", error); } }; const handleCreateSimpleStorageContract = async () => { try { console.log(contract) // Call createSimpleStorageContract function on the contract await contract.createSimpleStorageContract(); } catch (error) { console.error("Error creating SimpleStorage contract:", error); } }; const handleStoreFavoriteNumber = async () => { try { // Call sfStore function on the contract to store the favorite number const index = 0; // Use 0 for the first SimpleStorage contract (modify as needed) await contract.sfStore(index, favoriteNumber); } catch (error) { console.error("Error storing favorite number:", error); } }; const handleRetrieveFavoriteNumber = async () => { try { // Call sfGet function on the contract to retrieve the favorite number const index = 0; // Use 0 for the first SimpleStorage contract (modify as needed) const retrievedNumber = await contract.sfGet(index); setFavoriteNumber(retrievedNumber.toNumber()); } catch (error) { console.error("Error retrieving favorite number:", error); } }; return (

Ethers.js and Next.js Example

{accounts.length > 0 ? (

Connected with address: {accounts[0]}

) : ( )}

StorageFactory Contract

Contract Address: {contractAddress}

Favorite Number: setFavoriteNumber(parseInt(e.target.value))} />

Favorite Number: {favoriteNumber}

); } ``` Make sure to replace the contract address with the actual address of your SimpleStorage Factory contract. To run the Next.js project, use the following command: ```bash npm run dev ``` Open your browser and visit `http://localhost:3000` to see the contract interaction page.