# 5. Fund me 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. Check out the previous ones **[here.](https://www.razacodes.com/smartcontract)** > In this article, we will take you through understanding, testing, and deploying a Fund me smart contract on Scroll. I teamed up with **[Rahat](https://twitter.com/rahatcodes)** to bring you this article. **[Rahat](https://twitter.com/rahatcodes)** is the head of developer relations at Biconomy. **[Make sure to follow him](https://twitter.com/rahatcodes)** for awesome Web3 content! Let’s dive in. **[Make sure to checkout the Github Repo](https://github.com/razacodespython/practisesolidity/tree/main/fundme)**, if you’re looking for a working example of the code. ### 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 start using oracles for price feeds, convert crypto dollar amounts, fund and withdraw crypto and protecting your contract from **********Overflow**********. If you don’t know what that is, we’re going to cover that. **************Note, that we’re building on the knowledge of the previous chapters!************** Stuff like ****************payable**************** or ******msg.sender******, has already been covered. If that’s new to you, check out the previous articles. Skim through each, until you know what level you’re comfortable at. [Check out the Github repo here](https://github.com/razacodespython/practisesolidity/tree/main/fundme) 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 Le code: ```solidity // SPDX-License-Identifier: MIT // Smart contract that lets anyone deposit ETH into the contract // Only the owner of the contract can withdraw the ETH pragma solidity ^0.6.6 <0.9.0; // Get the latest ETH/USD price from chainlink price feed // IMPORTANT: This contract has been updated to use the Goerli testnet // Please see: https://docs.chain.link/docs/get-the-latest-price/ // For more information import "@chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol"; import "@chainlink/contracts/src/v0.6/vendor/SafeMathChainlink.sol"; contract FundMe { // safe math library check uint256 for integer overflows using SafeMathChainlink for uint256; //mapping to store which address depositeded how much ETH mapping(address => uint256) public addressToAmountFunded; // array of addresses who deposited address[] public funders; //address of the owner (who deployed the contract) address public owner; // the first person to deploy the contract is // the owner constructor() public { owner = msg.sender; } function fund() public payable { // 18 digit number to be compared with donated amount uint256 minimumUSD = 50 * 10**18; //is the donated amount less than 50USD? require( getConversionRate(msg.value) >= minimumUSD, "You need to spend more ETH!" ); //if not, add to mapping and funders array addressToAmountFunded[msg.sender] += msg.value; funders.push(msg.sender); } //function to get the version of the chainlink pricefeed function getVersion() public view returns (uint256) { AggregatorV3Interface priceFeed = AggregatorV3Interface( 0xD4a33860578De61DBAbDc8BFdb98FD742fA7028e ); return priceFeed.version(); } function getPrice() public view returns (uint256) { AggregatorV3Interface priceFeed = AggregatorV3Interface( 0xD4a33860578De61DBAbDc8BFdb98FD742fA7028e ); (, int256 answer, , , ) = priceFeed.latestRoundData(); // ETH/USD rate in 18 digit return uint256(answer * 10000000000); } // 1000000000 function getConversionRate(uint256 ethAmount) public view returns (uint256) { uint256 ethPrice = getPrice(); uint256 ethAmountInUsd = (ethPrice * ethAmount) / 1000000000000000000; // the actual ETH/USD conversation rate, after adjusting the extra 0s. return ethAmountInUsd; } //modifier: https://medium.com/coinmonks/solidity-tutorial-all-about-modifiers-a86cf81c14cb modifier onlyOwner() { //is the message sender owner of the contract? require(msg.sender == owner); _; } // onlyOwner modifer will first check the condition inside it // and // if true, withdraw function will be executed function withdraw() public payable onlyOwner { msg.sender.transfer(address(this).balance); //iterate through all the mappings and make them 0 //since all the deposited amount has been withdrawn for ( uint256 funderIndex = 0; funderIndex < funders.length; funderIndex++ ) { address funder = funders[funderIndex]; addressToAmountFunded[funder] = 0; } //funders array will be initialized to 0 funders = new address[](0); } } ``` This is my visual of what the contract does: ![Screen Shot 2023-07-30 at 8.18.06 AM.png](/images/posts/fundme/Screen_Shot_2023-07-30_at_8.18.06_AM.png) ### 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 above visual we have four core functions and a fifth function that is set up from the moment we deploy the contract. 1. Fund - allows anyone to fund at least $50 worth of ETH to this contract 2. Get Version - this will fetch the version of the price feed of ETH to USD that we are using in the contract 3. Get Price - gets the current USD price of eth 4. Get Conversion Rate - takes an input of any eth amount and converts it to its USD amount 5. Withdraw - allows only the owner of the contract (this is set during deployment) to withdraw funds from the contract ### Solidity syntax I should know For this level of contract I need to be familiar with: 1. Imports 1. Chainlink Safemath 2. Chainlink AggregatorV3Interface 2. Constructors 3. The `using` keyword 4. The `payable` keyword 5. Modifiers ### My notes on Solidity Lets take a look at the key items we’ll need to understand before diving into this contract. There might be some new syntax in here that might be a little unfamiliar. We’ll tackle each of those now: #### Imports Ok you might have already covered imports before but hear me out on this one. It’s important to understand the two thing we are importing here and why we’re doing it. 1. **Chainlink** **Safemath:** numbers in solidity are represented by a specific number of bits. We determine the number of bits when we define the integer variable such as uint256 ethPrice. This means that the integer for the price of eth can be a number between 0 and 2^256 -1. That is quite expansive but there are two major errors that can occur: 1. An Overflow Error occurs when we reach the largest number in the range and add one to it. When this happens the result will be the value from the beginning of this range. So if we take (2^256 -1) and add 1 to it the result would be 0. This would be a horrible bug to have to deal with. 2. Similarly we also have Underflow errors. Since the lowest result in this variable is 0 if we subtract 1 from it we actually rotate over to the highest possible number in the range instead of -1. Think of this as a clock: (this clock is not drawn to scale) ![Screen Shot 2023-07-30 at 8.57.39 AM.png](/images/posts/fundme/Screen_Shot_2023-07-30_at_8.57.39_AM.png) Adding or subtracting numbers will only take you clockwise or counterclockwise on the clock but never to any values outside of it. If you go to high you start over from 0 and if you go too low you’re now working with astronomically large numbers. In most high level languages protection from this is usually built into the language and the code would usually fail if you find yourself on the wrong end of the circle. In this contract we allow for compilers to use Solidity versions as low as 0.6.6. In these earlier versions of solidity this protection was not built in on the language level and because of this we import the Safemath library which will do all the reverting we need if we find ourselves too far on either end of the circle. It’s important to note that if you are using solidity version 0.8 or above this library no longer becomes necessary as safemath is now built into the language itself. 2. **Chainlink AggregatorV3Interface:** ok now this one is a juicy one. This is a cool import because we’re not actually importing an implementation of a full contract. An interface gives us the definitions of all the functions available on a Chainlink Price feed aggregator as well as the inputs and return values from each function. We don’t need to actually care about the implementation of the functions themselves. Think of it this way: when you send an email do you think about all of the underlying protocols that are called to send all the data from your email through the vast interwebs to your friends computer? I mean…I haven’t ever thought of that and if you have then maybe uh…touch some grass. Anyway similarly in this case we don’t need to worry about the full implementation we just want to access functions that give us information about the price feed of ETH to USD. We’ll let the gigabrains at Chainlink handle everything else. #### Constructors Constructors in solidity are nice, they allow you to define some logic that can be executed when the smart contract is getting deployed. So a nice way to remember this - constructor - is constructing or creating the contract and helping you set up initial state and logic. Constructors are entirely optional, if you don’t need anything fancy on your smart contract state then you might not use it at all. In our case we’re setting up our contract to eventually restrict the usage of a function based on ownership of the contract. Lets take a look at the example ```jsx constructor() public { owner = msg.sender; } ``` We defined an owner variable which needs to be an address earlier in the contract and with this line of code what we’re saying is that the address attached to the msg.sender object should be the owner of this contract. The msg.sender is whoever is currently interacting with the contract and when we place this inside the constructor this refers to whomever is deploying the contract. #### Using This is a very useful keyword in solidity. Remember the safemath library that we imported at the top of the contract? Well the `using` keyword is going to help us well..use it. Let’s see where this is used in the contract: ```solidity using SafeMathChainlink for uint256; ``` Remember: for older versions of solidity there are no protections against overflow and underflow errors so we are going to be using SafeMathChainlink to extend the capabilities of uint256. The using keyword allows the uint256 type to inherit the functionality needed to protect against these errors. Anytime you need to extend the capabilities of a type or variable, the using keyword will allow you to take libraries you have imported and attach those newfound powers in the library to the type. #### Payable This is one of the most powerful parts of solidity. The first time I used this it blew my mind how easy this one word made it to access funds from solidity code. The Payable keyword is what is known as a modifier. Modifiers can be attached to functions to allow them to check on certain things or extend what they can do. The payable function taps into the power of solidity and lets you handle sending payments in your code. Adding a payable modifier means that an end user can add a certain value to the function when they execute it to create a transaction. All this is possible with just simply adding the payable keyword at the end of your function definition. ```solidity function fund() public payable { // 18 digit number to be compared with donated amount uint256 minimumUSD = 50 * 10**18; //is the donated amount less than 50USD? require( getConversionRate(msg.value) >= minimumUSD, "You need to spend more ETH!" ); //if not, add to mapping and funders array addressToAmountFunded[msg.sender] += msg.value; funders.push(msg.sender); } ``` Whenever you are going to be dealing with funds you need to make sure this payable keyword is added to the function. Remember the msg.sender value we talked about earlier? With payable you can access msg.value which will tell you the value of the funds being sent. In the require statement above we’re checking that the msg.value which is given from the end user is greater than $50. Hopefully that blew your mind the way it did mine the first time I saw this. #### Modifiers So we just went through one example of a modifier but sometimes we want to build our own custom modifiers to do some quick checks. One core bit of logic this contract needs is the ability for only the owner of the contract to withdraw funds. Otherwise anyone can simply call our contract’s withdraw function and take all of our hard earned funded money away from us. We did some set up already, we initialized an owner variable, and then we set the owner in the constructor. Now how do we actually use that information? ```solidity modifier onlyOwner() { //is the message sender owner of the contract? require(msg.sender == owner); _; } ``` Here we are creating our own modifier that can be added to a function to make sure that the function can only ever be called by a single owner. The syntax works very similarly to defining a function, we use modifier instead of the function keyword then name it and structure things similar to a function definition. Within the modifier we require that the msg.sender (whomever is interacting with the contract) is the actual owner we saved in the constructor. Thanks to the require statement if this condition is not met the transaction will revert. We then add an underscore which signifies that once the check is met we should then execute the rest of the logic on the function that this is attached to. ### 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: Write a function to return the total number of funders who have deposited ETH. ```solidity function getFundersCount() public view returns (uint256) { return funders.length; } ``` Exercise 2: Implement a function to check if a specific address has deposited any ETH. ```solidity function hasFunded(address _address) public view returns (bool) { return addressToAmountFunded[_address] > 0; } ``` Exercise 3: Create a function that allows anyone to check their own balance in USD. ```solidity function getBalanceInUSD() public view returns (uint256) { uint256 balanceInEth = addressToAmountFunded[msg.sender]; return getConversionRate(balanceInEth); } ``` Exercise 4: Implement a function that allows the owner to change the minimum USD amount required for funding. ```solidity function changeMinimumUSD(uint256 newMinimumUSD) public onlyOwner { uint256 minimumUSD = newMinimumUSD * 10**18; require(minimumUSD > 0, "Invalid minimum USD amount"); minimumUSD = newMinimumUSD; } ``` Exercise 5: Write a modifier that checks if the caller has funded an amount greater than the specified USD value. ```solidity modifier requireMinimumUSD(uint256 minimumUSD) { require(getBalanceInUSD() >= minimumUSD, "You need to spend more ETH!"); _; } function withdraw() public payable onlyOwner requireMinimumUSD(100) { // Your withdrawal logic here } ``` Exercise 6: Create a function to get the ETH balance of the contract. ```solidity function getContractBalance() public view returns (uint256) { return address(this).balance; } ``` Exercise 7: Implement a function to get the current owner of the contract. ```solidity function getContractOwner() public view returns (address) { return owner; } ``` ### Concluding Based on going through these concepts and exercises, I was able to code a FundMe smart contract. If you want to test yourself, write the smart contract yourself, without looking at the example above. Here’s a blank template to follow ```solidity // SPDX-License-Identifier: MIT //define pragma //define the contract //use safe math library check uint256 for integer overflows //mapping to store which address depositeded how much ETH // array of addresses who deposited //address of the owner (who deployed the contract) // the first person to deploy the contract is // the owner //function to fund the contract. Use the getConversionRate function //dont forget to add the address of the funder to the list of depositers //function to get the version of the pricefeed //use the AggregatorV3Interface and the function ".version()" //write a function to getPrice() //use the AggregatorV3Interface and the function ".latestRoundData()" //write function to getConversionRate. Call the function getPrice() to get the ethprice // calculate the eth prize in usd //write a modifier to apply to functions //modifier makes sure onlyOwner can execute the function //function to withdraw, with the above modifier //make sure to update the mapping where you keep track which address funded how much //as everything is being withdrawn //initialise the list with funders back to 0, ie no one is in the list anymore ``` ### 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. In this article I’m using Hardhat to test my contract, but to deploy I’m going to use Truffle dashboard. Using Truffle dashboard prevents the need to pass my private keys! More on that later. ### Hardhat OK, let’s install hardhat and then use it to write some basic test and then deploy it. If you’ve never touched hardhat, no worries I got you. #### Install Hardhat Hardhat is a popular development environment, testing framework, and asset pipeline for Ethereum. To deploy with hardhat, follow the steps below: Install hardhat using npm: ```bash npm install --save-dev hardhat yarn add --dev hardhat ``` You can run the following command to create a hardhat project: ```bash npx hardhat ``` #### Configure Hardhat We’re going to use Truffle Dashboard with hardhat, what that is, I’ll show in a minute. Adjust your ********hardhat.config.js******** file like this: ``` require("@nomicfoundation/hardhat-toolbox"); /** @type import('hardhat/config').HardhatUserConfig */ module.exports = { solidity: "0.8.10", localhost: { timeout: 100_000 }, networks: { 'truffle-dashboard': { url: "http://localhost:24012/rpc", timeout: 400_000 }, hardhat: { forking: { url: "https://scroll-alphanet.public.blastapi.io", }, } }, settings: { optimizer: { enabled: true, runs: 200, }, evmVersion: "istanbul", debug: { // Enable Solidity stack traces stacktrace: true, }, }, }; ``` Now you if you know a little bit dev tools, you might be asking, where do i pass the rpc url to deploy to a live network. Well you don’t have to. Let’s take a look. Side note, I am passing an rpc url in the ******************hardhat: forking****************** part. That’s for the testing part. Hardhat will fork the chain and simulate the transactions locally. This is handy if you’re interacting with contracts deployed on that chain. #### Compiling the contract So before we can deploy the contract, we need to compile it. Make sure to do a couple of checks, like the solidity the version in the contract should be the same as in the config file. Also make sure that the name defined inside the smart contract is the same as the name of the smart contract file. ![Screenshot 2023-08-06 at 07.43.58.png](/images/posts/fundme/Screenshot_2023-08-06_at_07.43.58.png) Once you’ve done your checks, run the following command to compile the contract: ```bash npx hardhat compile ``` After compiling the contract you should have an **********artifacts********** folder inside your project. #### Deploy We’re importing contracts from the chainlink packages. Solidity doesn’t do native importing, so we need to download an npm package for support. ```bash npm install @chainlink/contracts ``` 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. First make sure you’re script to deploy refers to the right contract. You can find your script in the ****************scripts**************** and it’s usually called ******************deploy.js.****************** This is what the script looks like for the EtherWallet contract: ```jsx const hre = require("hardhat"); async function main() { const FundMe = await hre.ethers.getContractFactory("FundMe"); const fundme = await FundMe.deploy(); await fundme.deployed(); console.log( `deployed to ${fundme.address}` ); } // We recommend this pattern to be able to use async/await everywhere // and properly handle errors. main().catch((error) => { console.error(error); process.exitCode = 1; }); ``` Next 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. Before we start make sure you have truffle installed: ```bash npm install -g truffle ``` Next, spin up the dashboard. ********************************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:24012](http://localhost:24012) or localhost:24013 Connect your wallet. I use MetaMask, and connect to the network you want to use. ************************Terminal 2: Compile and send contract************************ ```bash npx hardhat run --network truffle-dashboard scripts/deploy.js ``` 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! ************************************************************************************************It might look like your terminal is “stuck”, but it’s not.************************************************************************************************ If your browser doesn’t pop up ‘auto-magically’, go to your [localhost:24012](http://localhost:24012) and then you should see a prompt to deploy the contract. #### 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. Here are some example (generated with gpt) for this contract: ```jsx const { ethers } = require("hardhat"); const { expect, assert } = require("chai"); const { parseEther } = ethers.utils; describe("FundMe", () => { let FundMe; let fundMe; let owner; let addr1; let addr2; beforeEach(async () => { [owner, addr1, addr2] = await ethers.getSigners(); // Deploy a mock contract for the Chainlink price feed const PriceFeedMock = await ethers.getContractFactory("MockV3Aggregator"); const priceFeedMock = await PriceFeedMock.deploy("8", "200000000000"); // 2000 await priceFeedMock.deployed(); // Deploy the FundMe contract and pass the mock price feed address as an argument FundMe = await ethers.getContractFactory("FundMe"); fundMe = await FundMe.deploy(); await fundMe.deployed(); }); it("should set the owner correctly", async () => { expect(await fundMe.owner()).to.equal(owner.address); }); it("should accept and record the funds", async () => { const amount = parseEther("1"); await fundMe.connect(addr1).fund({ value: amount }); const balance = await ethers.provider.getBalance(fundMe.address); expect(balance).to.equal(amount); expect(await fundMe.addressToAmountFunded(addr1.address)).to.equal(amount); expect(await fundMe.funders(0)).to.equal(addr1.address); }); it("should require a minimum of 50 USD worth of ETH to fund", async () => { const invalidAmount = parseEther("0.01"); await expect(fundMe.connect(addr1).fund({ value: invalidAmount })).to.be.revertedWith( "You need to spend more ETH!" ); const validAmount = parseEther("2"); await expect(fundMe.connect(addr1).fund({ value: validAmount })).to.not.be.reverted; }); it("should allow the owner to withdraw the funds", async () => { const initialBalance = await ethers.provider.getBalance(owner.address); console.log('initial balance',initialBalance) const amount = parseEther("1"); await fundMe.connect(addr1).fund({ value: amount }); const balanceBefore = await ethers.provider.getBalance(owner.address); console.log('balance before', balanceBefore) let gasPrice = await ethers.provider.getGasPrice() console.log('gasprice', gasPrice) const withdrawTx = await fundMe.connect(owner).withdraw(); const receipt = await withdrawTx.wait(); //const {gasUsed, effectiveGasPrice} = receipt const actGas = await receipt.gasUsed.mul(await ethers.provider.getGasPrice()) //const actGas = await receipt.gasUsed.mul(gasPrice); const balanceAfter = await ethers.provider.getBalance(owner.address); console.log('balanceafter', balanceAfter) const consoleExpecBalance = balanceBefore.add(amount.sub(receipt.gasUsed.mul(gasPrice))) console.log('checkbalance', consoleExpecBalance) const expectedBalanceChange = amount.sub(actGas); const expectedBalanceAfter = balanceBefore.add(expectedBalanceChange) const finalCheck = balanceAfter.sub(consoleExpecBalance) console.log('final',finalCheck) //expect(balanceAfter).to.equal(expectedBalanceAfter); expect(balanceAfter).to.equal(consoleExpecBalance) //check if funders array is empty await expect(fundMe.funders(0)).to.be.reverted; //check if mapping for sender which funded is set to 0 assert.equal(await fundMe.addressToAmountFunded(addr1.address),0) //check if only owner can withdraw amount const attacker = await fundMe.connect(addr1) await expect(attacker.withdraw()).to.be.reverted }); }); ``` To run the test, use the following command in your terminal ```bash npx hardhat test ``` ### 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 **************************************FundMe.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 Before we compile our contract we need to install the chainlink package, just like we did for hardhat. ```bash npm install @chainlink/contracts ``` Next make sure to update the **************************brownie-config.yaml************************** ```yaml dependencies: - smartcontractkit/chainlink-brownie-contracts@1.1.1 compiler: solc: remappings: - "@chainlink=smartcontractkit/chainlink-brownie-contracts@1.1.1" ``` 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 FundMe, accounts account = accounts.load("my-new-account") def main(): return FundMe.deploy({'from': account}) ``` Now go to your terminal and run: ```bash brownie run fundme.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. ```python from brownie import accounts, FundMe, MockV3Aggregator, exceptions import pytest def test_can_fund_and_withdraw(): # Deployer's account deployer = accounts[0] # Accounts for testing addr1 = accounts[1] addr2 = accounts[2] # Deploy the MockV3Aggregator contract for the Chainlink price feed price_feed_mock = MockV3Aggregator.deploy(8, 200000000000, {"from": deployer}) # Deploy the FundMe contract and pass the mock price feed address as an argument fund_me = FundMe.deploy({"from": deployer}) entrance_fee = 1000000000000000000 tx = fund_me.fund({"from": addr1, "value": entrance_fee}) tx.wait(1) assert fund_me.addressToAmountFunded(addr1.address) == entrance_fee tx2 = fund_me.withdraw({"from": deployer}) tx2.wait(1) assert fund_me.addressToAmountFunded(addr1.address) == 0 def test_only_owner_can_withdraw(): # Deployer's account deployer = accounts[0] # Accounts for testing addr1 = accounts[1] addr2 = accounts[2] # Deploy the FundMe contract and pass the mock price feed address as an argument fund_me = FundMe.deploy({"from": deployer}) bad_actor = addr2 with pytest.raises(exceptions.VirtualMachineError): fund_me.withdraw({"from": bad_actor}) ``` ### 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-05 at 20.00.03.png](/images/posts/fundme/Screenshot_2023-08-05_at_20.00.03.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/fundme/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 smart contract Next we need to connect our dapp with our smart contract. To this we need to pass the ABI and contract address. #### ABI 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>FundMe.json`. You only need the abi part in that json. Here’s an example of an abi: ``` [ { "inputs": [], "stateMutability": "nonpayable", "type": "constructor" }, { "inputs": [], "name": "getBalance", "outputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "stateMutability": "view", "type": "function" } ] ``` #### Adding the functions ```solidity import { useEffect, useState } from 'react'; import { ethers } from 'ethers'; export default function FundMe() { const [amount, setAmount] = useState(''); const [message, setMessage] = useState(''); const [price, setPrice] = useState(0); const [funders, setFunders] = useState([]); const contractAddress = '0x7d423F8c407a4473A3B7dab6FD0300a523a2CA3D'; // Replace with your actual FundMe contract address const contractAbi = []; // Replace with your actual contract ABI useEffect(() => { getPrice(); getFunders(); }, []); const getPrice = async () => { try { const provider = new ethers.providers.JsonRpcProvider('https://goerli.infura.io/v3/YOUR_INFURA_PROJECT_ID'); const priceFeedContract = new ethers.Contract('0xD4a33860578De61DBAbDc8BFdb98FD742fA7028e', [], provider); const priceData = await priceFeedContract.latestRoundData(); setPrice(priceData.answer.toNumber() / 100000000); } catch (error) { console.error(error); } }; const getFunders = async () => { try { const provider = new ethers.providers.JsonRpcProvider('https://goerli.infura.io/v3/YOUR_INFURA_PROJECT_ID'); const contract = new ethers.Contract(contractAddress, contractAbi, provider); const fundersCount = await contract.fundersCount(); const fundersList = []; for (let i = 0; i < fundersCount.toNumber(); i++) { const funderAddress = await contract.funders(i); fundersList.push(funderAddress); } setFunders(fundersList); } catch (error) { console.error(error); } }; const handleFund = async () => { try { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); const contract = new ethers.Contract(contractAddress, contractAbi, signer); const value = ethers.utils.parseEther(amount); const tx = await contract.fund({ value }); await tx.wait(); setMessage('Funded successfully!'); } catch (error) { console.error(error); setMessage('Failed to fund. Please try again.'); } }; const handleWithdraw = async () => { try { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); const contract = new ethers.Contract(contractAddress, contractAbi, signer); const tx = await contract.withdraw(); await tx.wait(); setMessage('Withdrawn successfully!'); } catch (error) { console.error(error); setMessage('Failed to withdraw. Please try again.'); } }; return (

FundMe

setAmount(e.target.value)} />

ETH/USD Price: ${price}

{funder}

{message &&

{message}

}

); } ```