# 3. Ether Wallet 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-Factory)**. > ### Why practising this smart contract is useful Let me start by saying that I got this example contract from **[Solidity by Example](https://solidity-by-example.org/app/ether-wallet/).** This website was a great help for me to practise Solidity. This contract mimics a wallet. It’s a smart contract that can receive crypto and the owner can withdraw crypto. The basics around the **************address, msg.sender and payable************** keywords are covered here. These are fundamental concepts that are used in DeFi and a lot of apps. [**Make sure to checkout the Github Repo**](https://github.com/razacodespython/practisesolidity/tree/main/etherwallet), if you’re looking for a working example of the 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 pragma solidity ^0.8.17; contract EtherWallet { address payable public owner; constructor() { owner = payable(msg.sender); } receive() external payable {} function withdraw(uint _amount) external { require(msg.sender == owner, "caller is not owner"); payable(msg.sender).transfer(_amount); } function getBalance() external view returns (uint) { return address(this).balance; } } ``` This is my visual of what the contract does: ![Screenshot 2023-06-25 at 16.51.02.png](/images/posts/etherwallet/Screenshot_2023-06-25_at_16.51.02.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 4 functions: 1. Constructor: make sure that the deployer owns the contract. 2. Receive: make sure that the contract can receive crypto 3. Withdraw: get crypto out of wallet. Only owner allowed to do this. 4. getBalance: balance of the wallet ### Solidity syntax I should know For this level of contract I need to be familiar with: 1. Variables and typing (type + visibility) 2. Payable property 3. Constructor 4. Basics functions 5. the require statement ### 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. #### ******************Variables****************** So for this contract we need to own the **************address************** type of variable. If you’re looking for notes on variables, you can find my notes here. Here’s a snippet: 1. **Public:** An address variable marked as public can be accessed by anyone, both inside and outside the contract. 2. **Private:** A private address variable is only accessible within the contract itself. 3. **Internal:** An internal address variable can be accessed by other contracts derived from the same contract. 4. **External**: An external address variable is meant to be called from external contracts or accounts, not within the contract itself. Q: Define the **********owner********** ```solidity address owner; ``` Q: Make the owner accessible to anyone ```solidity address public owner ``` #### **********Payable********** Payable is a unique keyword that can be used with the variable type address, next to contracts and functions. In the context of functions: 1. **Public payable address**: A public payable address allows anyone to send Ether (crypto) to that address, both inside and outside the contract. 2. **Private payable address**: A private payable address enables the contract itself to receive Ether, but it cannot be accessed or used by external contracts or accounts. 3. **Internal payable address**: An internal payable address can receive Ether and is accessible by contracts derived from the same contract, allowing them to send Ether to that address. 4. **External payable address**: An external payable address is designed to receive Ether from external contracts or accounts, and it cannot be accessed internally within the contract. Q: an owner that can receive crypto by anyone ```solidity address payable public owner; ``` > I know this is very elaborate. But this is how I learn. It’s not for everyone. > The last exercise is for me what it is all about. In normal language you want to do something, ie the owner should receive crypto from anyone. Then you translate it to code. Pausing here. Now comes the time where I did brain dead stuff. Type out every visibility for the type of address make them payable. Write behind each variable in comments what the visibility allows. Here is where I ************learn.************ ```solidity address payable public owner; //address that anyone can see and anyone can send crypto to address payable internal owner; //if a contract creates another contract and the newly created contract wants to send Ether to an internal payable address in the parent contract, it is allowed to do so. address payable external owner; //cant be accessed from within contract, only external contracts or accounts address payable private owner; //cant be accessed by external contract or account, only from within contract ``` #### ****************Keywords**************** Before we get into the constructor, I want to talk about keywords. When you come from another programming language, you know this. In my own words, there’s a bunch of words that the programming language you’re using called **************DIBS************** on. You can use them, but only in the way the programming language wants you to use them. In the context of this contract that applies to: 1. msg.sender: is the address of the one doing something (calling a function, deploying a smartcontract, etc.) 2. receive(): Generic function that receives crypto. I will dive into this one later 3. payable(): converts an address to the type **************payable************** #### **********************Constructor********************** Constructor is a special function that is automatically executed when a contract is deployed, used to initialise the contract's state and perform setup tasks. It’s always defined in the same way: ```solidity constructor(){ } ``` It takes parameters and inside you can set the rules or perform specific actions upon creation of the contract. This is probably the function I practised the least stand alone, but more specific to context. For that reason, I’m going to touch upon it later on. #### ********************************The require statement******************************** I want to spend some time on the require statement. The syntax is pretty straightforward. But it’s good to emphasise how it’s used. It’s a way to enforce a condition within a smart contract function. It will revert the transaction if the condition is false and gives an error message as the reason for reverting. ```solidity require(msg.sender == owner, "caller is not owner"); ``` 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. Again my purpose is to deconstruct smart contracts and then practise them. I’m just giving you my notes. With more complex smart contracts, I won’t go over variables for example. ### 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: Add a parameter to the constructor that sets the initial owner address. ******When deploying a contract with this type of construct, it would allow you to make the owner a different address then your own.****** Code Answer: ```solidity constructor(address payable _initialOwner) { owner = _initialOwner; } ``` Exercise 2: Send Ether to a new contract. Transfer a portion of that ether to the owner of the contract. In this case do not pass an address for the owner. The owner should be equal to the deployer (hint use **msg.sender**). Write a function to get the balance of the owner and the contract. Code Answer: ```solidity address payable public owner; constructor(uint _initialBalance) payable { owner = payable(msg.sender); uint transferToOwner = _initialBalance; owner.transfer(transferToOwner); } function getBalance() public view returns(uint){ return owner.balance; } function getBalanceContract() public view returns(uint){ return address(this).balance; } ``` Exercise 3: Extend the constructor to assign a custom message to the `owner` address. Code Answer: ```solidity constructor() { owner = payable(msg.sender); string memory message = "Welcome, owner!"; // Additional logic using the message variable } ``` Exercise 4: Write a `receive()` function in your current exercise contract and allow it to emit a log message when Ether is received. Code Answer: ```solidity receive() external payable { emit EtherReceived(msg.value); } ``` Exercise 5: Implement a condition in the `receive()` function to reject Ether transfers below a certain amount. Code Answer: ```solidity receive() external payable { require(msg.value >= 0.01 ether, "Minimum transfer amount not met."); } ``` Exercise 6: Add a requirement in the `receive()` function to only accept Ether transfers from a specific address. Code Answer: ```solidity receive() external payable { require(msg.sender == specificAddress, "Sender not authorized."); } ``` Exercise 7: Create a `withdraw()` function to allow the owner to withdraw all of the Ether. Code Answer: ```solidity function withdraw() external { require(msg.sender == owner, "Caller is not owner."); owner.transfer(address(this).balance); } ``` Exercise 8: Implement a check in the `withdraw()` function to only allow withdrawals when the contract's balance is above 0. Code Answer: ```solidity function withdraw() external { require(address(this).balance >= 0, "Insufficient balance."); require(msg.sender == owner, "Caller is not owner."); owner.transfer(_amount); } ``` Exercise 9: Extend the `withdraw()` function to transfer the withdrawn amount to an address other than `msg.sender`. Code Answer: ```solidity function withdraw(address payable _recipient, uint256 _amount) external { require(msg.sender == owner, "Caller is not owner."); _recipient.transfer(_amount); } ``` Exercise 10: Update the `getBalance()` function to return the balance of a specific address other than `address(this)`. Code Answer: ```solidity function getBalance(address _targetAddress) external view returns (uint256) { return _targetAddress.balance; } ``` ### Concluding Based on going through these concepts and exercises, I was able to code an Ether Wallet smart contract. If you want to test yourself, create the smart contract with the following functions: 1. Constructor: make sure that the deployer owns the contract. 2. Receive: make sure that the contract can receive crypto 3. Withdraw: get crypto out of wallet. Only owner allowed to do this. 4. getBalance: balance of the wallet Here’s a blank template to follow ```solidity // SPDX-License-Identifier: MIT //define pragma //define the contract //declare a variable for the owner //use the constructor to set the owner of the contract to the deployer //ensure that this contract can receive crypto //write a function to withdraw funds only by the owner //write a function to get the balance ``` ### 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. #### Installing additional packages #### 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-05 at 18.59.52.png](/images/posts/etherwallet/Screenshot_2023-08-05_at_18.59.52.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 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 EtherWallet = await hre.ethers.getContractFactory("EtherWallet"); const etherwallet = await EtherWallet.deploy(); await etherwallet.deployed(); console.log( `deployed to ${etherwallet.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 } = require("chai"); describe("EtherWallet", () => { let etherWallet; let accounts; beforeEach(async () => { accounts = await ethers.getSigners(); const EtherWalletContract = await ethers.getContractFactory("EtherWallet"); etherWallet = await EtherWalletContract.deploy(); await etherWallet.deployed(); }); it("should have an initial balance of zero", async () => { const balance = await etherWallet.getBalance(); expect(balance).to.equal(0, "Initial balance should be zero"); }); it("should deposit funds correctly", async () => { const depositAmount = ethers.utils.parseEther("1"); await accounts[0].sendTransaction({ to: etherWallet.address, value: depositAmount }); const balance = await etherWallet.getBalance(); expect(balance).to.equal(depositAmount, "Wallet balance should be equal to the deposit amount"); }); it("should withdraw funds correctly", async () => { const initialBalance = ethers.utils.parseEther("1"); await accounts[0].sendTransaction({ to: etherWallet.address, value: initialBalance }); const withdrawalAmount = ethers.utils.parseEther("0.5"); await etherWallet.withdraw(withdrawalAmount); const expectedBalance = initialBalance.sub(withdrawalAmount); const balance = await etherWallet.getBalance(); expect(balance).to.equal(expectedBalance, "Wallet balance should be equal to the initial balance minus the withdrawal amount"); }); it("should only allow the owner to withdraw funds", async () => { const attacker = accounts[1]; const initialBalance = ethers.utils.parseEther("1"); await accounts[0].sendTransaction({ to: etherWallet.address, value: initialBalance }); const withdrawalAmount = ethers.utils.parseEther("0.5"); try { await etherWallet.connect(attacker).withdraw(withdrawalAmount); expect.fail("Withdrawal should fail since the caller is not the owner"); } catch (error) { expect(error.message).to.include("caller is not owner", "Withdrawal should fail since the caller is not the owner"); } }); }); ``` 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 **************************************simpleStorage.sol************************************** and paste the code in there. Rename the contract to **************************************EtherWallet.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 EtherWallet, accounts account = accounts.load("my-new-account") def main(): return EtherWallet.deploy({'from': account}) ``` Now go to your terminal and run: ```bash brownie run etherwallet.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 import pytest from brownie import Wei, EtherWallet, accounts @pytest.fixture(scope="module") def ether_wallet(): return EtherWallet.deploy({'from': accounts[0]}) def test_initial_balance(ether_wallet): assert ether_wallet.getBalance() == Wei("0"), "Initial balance should be zero" def test_deposit_funds(ether_wallet, accounts): print(ether_wallet.getBalance()) deposit_amount = Wei("1 ether") accounts[0].transfer(ether_wallet, deposit_amount) print(ether_wallet.getBalance()) assert ether_wallet.getBalance() == deposit_amount, "Wallet balance should be equal to the deposit amount" def test_withdraw_funds(ether_wallet, accounts): initial_balance = ether_wallet.getBalance() transfer_amount = Wei("1 ether") accounts[0].transfer(ether_wallet, transfer_amount) print(ether_wallet.getBalance()) withdrawal_amount = Wei("0.5 ether") ether_wallet.withdraw(withdrawal_amount, {'from': accounts[0]}) print(ether_wallet.getBalance()) expected_balance = initial_balance + transfer_amount - withdrawal_amount # Fix the calculation here assert ether_wallet.getBalance() == expected_balance, "Wallet balance should be equal to the initial balance minus the withdrawal amount" def test_only_owner_can_withdraw_funds(ether_wallet, accounts): attacker = accounts[1] initial_balance = Wei("1 ether") accounts[0].transfer(ether_wallet, initial_balance) withdrawal_amount = Wei("0.5 ether") with pytest.raises(Exception, match="caller is not owner"): ether_wallet.withdraw(withdrawal_amount, {'from': attacker}) ``` ### 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/etherwallet/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/etherwallet/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>EtherWallet.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" }, { "inputs": [], "name": "owner", "outputs": [ { "internalType": "address payable", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "_amount", "type": "uint256" } ], "name": "withdraw", "outputs": [], "stateMutability": "nonpayable", "type": "function" }, { "stateMutability": "payable", "type": "receive" } ] ``` #### Adding the functions ```solidity import { useState } from "react"; import { ethers } from "ethers"; import abi from "../abi.json"; const contractAddress = "0x2D12D63706D76F4510D1B2391F81ac42210105F9"; // Replace this with the deployed contract address const contractAbi = abi; export default function Home() { const [provider, setProvider] = useState(null); const [contract, setContract] = useState(null); const [connectedAddress, setConnectedAddress] = useState(null); const [withdrawAmount, setWithdrawAmount] = useState(""); const [amountEth, setAmountEth] = useState(0) const [balance, setBalance] = useState(0); const connectWallet = async () => { try { if (typeof window.ethereum !== "undefined") { await window.ethereum.request({ method: "eth_requestAccounts" }); const web3Provider = new ethers.providers.Web3Provider(window.ethereum); setProvider(web3Provider); const signer = web3Provider.getSigner(); const etherWalletContract = new ethers.Contract(contractAddress, contractAbi, signer); setContract(etherWalletContract); const connectedAddress = await signer.getAddress(); setConnectedAddress(connectedAddress); const balance = await etherWalletContract.getBalance(); setBalance(balance.toString()); } else { console.error("MetaMask not found. Please install MetaMask to use this dApp."); } } catch (error) { console.error("Error connecting wallet:", error); } }; const handleWithdraw = async () => { try { if (contract) { await contract.withdraw(ethers.utils.parseEther(withdrawAmount)); const balance = await contract.getBalance(); setBalance(balance.toString()); } else { console.error("Contract is not initialized."); } } catch (error) { console.error("Error withdrawing:", error); } }; const sendEth = async () =>{ const web3Provider = new ethers.providers.Web3Provider(window.ethereum); const signer = web3Provider.getSigner(); const recipientAddress = '0x2D12D63706D76F4510D1B2391F81ac42210105F9'; // Replace with the recipient address const transaction = { to: recipientAddress, value: ethers.utils.parseEther(amountEth), }; const tx = await signer?.sendTransaction(transaction); } return (

{connectedAddress ? ( <>

Connected with address: {connectedAddress}

EtherWallet address: {contractAddress}

Balance: {ethers.utils.formatEther(balance)} ETH

setWithdrawAmount(e.target.value)} placeholder="Enter the amount to withdraw in ETH" /> setAmountEth(e.target.value)} placeholder="Enter the amount to withdraw in ETH" /> ) : ( )}

); } ```