diff --git a/docs/blockchain-development-tutorials/evm/frameworks/ethers.md b/docs/blockchain-development-tutorials/evm/frameworks/ethers.md index 1d3425cd8d..e955ceabb2 100644 --- a/docs/blockchain-development-tutorials/evm/frameworks/ethers.md +++ b/docs/blockchain-development-tutorials/evm/frameworks/ethers.md @@ -8,13 +8,13 @@ sidebar_position: 1 [ethers.js](https://docs.ethers.org/v5/) is a powerful JavaScript library for interacting with Ethereum and other EVM-compatible blockchain networks. -In this guide, we'll walk you through how to use ethers.js to interact with smart contracts on the Flow Blockchain. +In this guide, we'll walk you through how to use `ethers.js` to interact with smart contracts on the Flow Blockchain. --- ## Installation -To begin using ethers.js in your project, you'll need to install the package. You can do this by running the following command: +To begin using `ethers.js` in your project, you'll need to install the package. To do this, run the following command: ```bash bashCopy code @@ -24,17 +24,17 @@ npm install --save ethers ## Setup -After installing ethers.js, the next step is to import it into your project. +After you install `ethers.js`, the next step is to import it into your project. -You can do this by adding the following line of code at the beginning of your JavaScript file: +To do this, add the following line of code at the beginning of your JavaScript file: ```jsx const ethers = require('ethers'); ``` -## Connecting to Flow +## Connect to Flow -To connect to the Flow Blockchain using ethers.js, you need to create a new `JsonRpcProvider` instance with the appropriate RPC URL for Flow: +To connect to the Flow Blockchain with `ethers.js`, you need to create a new `JsonRpcProvider` instance with the appropriate RPC URL for Flow: ```jsx const ethers = require('ethers'); @@ -45,9 +45,9 @@ const provider = new ethers.providers.JsonRpcProvider(url); **Note:** If you want to connect to the Flow mainnet, replace the above URL with `https://mainnet.evm.nodes.onflow.org`. -## Reading Data from the Blockchain +## Read data from the Blockchain -Once your provider is set up, you can start reading data from the Flow Blockchain. For instance, to retrieve the latest block number, you can use the `getBlockNumber` method: +After you set up your provider, you can start reading data from the Flow Blockchain. For instance, to retrieve the latest block number, you can use the `getBlockNumber` method: ```jsx async function getLatestBlock() { @@ -56,9 +56,9 @@ async function getLatestBlock() { } ``` -## Writing Data to the Blockchain +## Write data to the Blockchain -To send transactions or write data to the Flow Blockchain, you need to create a `Signer`. This can be done by initializing a new `Wallet` object with your private key and the previously created `Provider`: +To send transactions or write data to the Flow Blockchain, you need to create a `Signer`. To do this, initialize a new `Wallet` object with your private key and the previously created `Provider`: ```jsx const privateKey = 'YOUR_PRIVATE_KEY'; @@ -67,9 +67,9 @@ const signer = new ethers.Wallet(privateKey, provider); **Note:** Replace `'YOUR_PRIVATE_KEY'` with the actual private key of the wallet you want to use. -## Interacting with Smart Contracts +## Interact with smart contracts -ethers.js also enables interaction with smart contracts on the Flow Blockchain. To do this, create a `Contract` object using the ABI (Application Binary Interface) and the address of the deployed contract: +ethers.js also allows interaction with smart contracts on the Flow Blockchain. To do this, create a `Contract` object using the Application Binary Interface (ABI) and the address of the deployed contract: ```jsx const abi = [ @@ -91,7 +91,7 @@ const contract = new ethers.Contract(contractAddress, abi, signer); **Note:** Replace `'CONTRACT_ADDRESS'` with the actual address of your deployed contract. -After setting up your `Contract` object, you can call methods on the smart contract as needed: +After you set up your `Contract` object, you can call methods on the smart contract as needed: ```jsx async function setValue(value) { diff --git a/docs/blockchain-development-tutorials/evm/frameworks/index.md b/docs/blockchain-development-tutorials/evm/frameworks/index.md index 0e01ddaeee..cc6220a27d 100644 --- a/docs/blockchain-development-tutorials/evm/frameworks/index.md +++ b/docs/blockchain-development-tutorials/evm/frameworks/index.md @@ -17,29 +17,29 @@ keywords: # Flow EVM Frameworks -Modern blockchain development relies on powerful JavaScript and React frameworks that simplify smart contract interactions and provide seamless user experiences. This section covers the most popular frontend frameworks and libraries for building Flow EVM applications, from low-level blockchain interaction libraries to high-level React components for wallet management and user interfaces. +Modern blockchain development relies on powerful JavaScript and React frameworks that simplify smart contract interactions and provide seamless user experiences. This section covers the most popular frontend frameworks and libraries that you can use to build Flow EVM applications, from low-level blockchain interaction libraries to high-level React components for wallet management and user interfaces. -These frameworks enable developers to build sophisticated decentralized applications using familiar JavaScript and React patterns while leveraging Flow's high-performance EVM environment. Whether you're building simple contract interfaces or complex multi-wallet applications, these tutorials provide practical implementation guidance for integrating proven blockchain development frameworks with Flow EVM. +These frameworks allow developers to build sophisticated decentralized applications with familiar JavaScript and React patterns while leveraging Flow's high-performance EVM environment. Whether you want to build simple contract interfaces or complex multi-wallet applications, these tutorials provide practical implementation guidance for you to integrate proven blockchain development frameworks with Flow EVM. ## [Ethers.js] -Discover how to use ethers.js, the most popular JavaScript library for blockchain interactions, to connect with Flow EVM and manage smart contracts. This guide covers provider setup, reading blockchain data, writing transactions with proper signers, and implementing both read-only queries and state-changing operations. Learn to leverage ethers.js's intuitive interface for comprehensive Flow EVM contract interactions. +Discover how to use `ethers.js`, the most popular JavaScript library for blockchain interactions, to connect with Flow EVM and manage smart contracts. This guide covers provider setup, how to read blockchain data, how to write transactions with proper signers, and how to implement both read-only queries and state-changing operations. Learn to leverage ethers.js's intuitive interface for comprehensive Flow EVM contract interactions. ## [Web3.js] -Master web3.js integration with Flow EVM for comprehensive smart contract development and blockchain interaction capabilities. This tutorial demonstrates initializing web3 instances with Flow endpoints, querying blockchain state, managing accounts with private keys, and executing contract transactions. You'll work through practical examples including a complete Storage contract implementation with read and write operations. +Master `web3.js` integration with Flow EVM for comprehensive smart contract development and blockchain interaction capabilities. This tutorial demonstrates how to initialize web3 instances with Flow endpoints, how to query blockchain state, how to manage accounts with private keys, and how to execute contract transactions. You'll work through practical examples, such as a complete Storage contract implementation with read and write operations. ## [Viem & Wagmi] -Build modern React applications on Flow EVM using wagmi and viem with built-in Flow network configurations and React hooks. This comprehensive guide walks through creating Next.js applications with wallet connection capabilities, smart contract interactions using React hooks, and proper error handling for blockchain operations. Learn to implement complete dApps with wagmi's powerful React integration and viem's efficient blockchain interactions. +Build modern React applications on Flow EVM with wagmi and viem with built-in Flow network configurations and React hooks. This comprehensive guide walks through how to create `Next.js` applications with wallet connection capabilities, smart contract interactions with React hooks, and proper error handling for blockchain operations. Learn to implement complete dApps with wagmi's powerful React integration and viem's efficient blockchain interactions. ## [RainbowKit] -Integrate advanced wallet connection experiences into your Flow EVM applications using RainbowKit with custom Flow Wallet support. This tutorial demonstrates creating custom wallet connectors, configuring WalletConnect integration for seamless mobile and desktop connections, and implementing comprehensive wallet onboarding flows. You'll build complete wallet connection interfaces that support Flow Wallet alongside other popular Ethereum wallets. +Integrate advanced wallet connection experiences into your Flow EVM applications using RainbowKit with custom Flow Wallet support. This tutorial demonstrates how to create custom wallet connectors, how to configure WalletConnect integration for seamless mobile and desktop connections, and how to implement comprehensive wallet onboarding flows. You'll build complete wallet connection interfaces that support Flow Wallet alongside other popular Ethereum wallets. ## Conclusion -These framework guides provide comprehensive coverage of the most popular JavaScript and React tools for Flow EVM development. From low-level blockchain interactions with ethers.js and web3.js to sophisticated React applications with wagmi and RainbowKit, these tutorials offer practical implementation patterns for building modern decentralized applications on Flow's EVM-compatible network. +These framework guides provide comprehensive coverage of the most popular JavaScript and React tools for Flow EVM development. From low-level blockchain interactions with ethers.js and web3.js to sophisticated React applications with wagmi and RainbowKit, these tutorials offer practical implementation patterns for you to build modern decentralized applications on Flow's EVM-compatible network. diff --git a/docs/blockchain-development-tutorials/evm/frameworks/rainbowkit.md b/docs/blockchain-development-tutorials/evm/frameworks/rainbowkit.md index 5cc8f1dc59..b427d01cb0 100644 --- a/docs/blockchain-development-tutorials/evm/frameworks/rainbowkit.md +++ b/docs/blockchain-development-tutorials/evm/frameworks/rainbowkit.md @@ -5,35 +5,37 @@ sidebar_position: 4 sidebar_label: Rainbowkit --- -Integrating Flow Wallet with [RainbowKit][1] allows users to seamlessly connect their Flow accounts through one of the most popular wallet connection interfaces. +# Using Rainbow Kit with FLow Wallet -This guide walks you through the process of defining Flow Wallet as a custom wallet in RainbowKit and testing the integration. You can follow along by setting up a new RainbowKit project or use the code in this guide to integrate these steps into your existing dApp. +When you integrate Flow Wallet with [RainbowKit][1], you can seamlessly connect your Flow accounts through one of the most popular wallet connection interfaces. + +This guide walks you through how to define Flow Wallet as a custom wallet in RainbowKit and testing the integration. As you follow along, you can set up up a new RainbowKit project or use the code in this guide to integrate these steps into your current dApp. ## Objectives -After completing this guide, you'll be able to: -- Create a custom Flow Wallet connector compatible with RainbowKit's interface -- Configure your Wagmi setup to support Flow Wallet connections -- Implement a complete wallet connection flow for Flow blockchain users -- Test and verify the Flow Wallet integration in your dApp +After you complete this guide, you'll be able to: +- Create a custom Flow Wallet connector compatible with RainbowKit's interface. +- Configure your Wagmi setup to support Flow Wallet connections. +- Implement a complete wallet connection flow for Flow blockchain users. +- Test and verify the Flow Wallet integration in your dApp. ## Prerequisites -### Next.js and Modern Frontend Development +### Next.js and modern frontend development -The RainbowKit starter is built on Next.js, so familiarity with React, hooks, and modern frontend development will help you follow along. +The RainbowKit starter is built on `Next.js`, so familiarity with React, hooks, and modern frontend development will help you follow along. ## A Flow Wallet To use Flow Wallet with RainbowKit, install the Flow Wallet browser extension from the [Chrome Web Store][2]. -Once installed, set up your wallet by creating or importing an account. For quick access, pin the extension to your browser toolbar. +After you install it, create or import an account to set up your wallet. For quick access, pin the extension to your browser toolbar. -## Setting Up Your Environment +## Set up your environment -### Initial Setup +### Initial setup -The RainbowKit starter is built on Next.js, following its standard project structure and conventions. Create a new project or ensure your existing one has the necessary dependencies: +The RainbowKit starter is built on`Next.js` and follows its standard project structure and conventions. Create a new project or ensure your current one has the necessary dependencies: ```bash $ npm init @rainbow-me/rainbowkit@latest @@ -44,7 +46,8 @@ $ npm run dev The [RainbowKit](https://www.rainbowkit.com/) components will be available throughout your application via the provided wrapper components. ### Creating the Flow Wallet Connector -The first major step is defining the Flow Wallet connector. Create a new file called `flowWallet.ts` in `src/flowWallet.ts` to house the wallet configuration: + +The first major step is to define the Flow Wallet connector. Create a new file called `flowWallet.ts` in `src/flowWallet.ts` to house the wallet configuration: ```tsx /* src/flowWallet.ts */ @@ -113,7 +116,7 @@ export const flowWallet = ({ projectId }: MyWalletOptions): Wallet => ({ }); ``` -### Configuring Wagmi Integration +### Configure your Wagmi integration Next, update your Wagmi configuration to include Flow Wallet support. Modify your `wagmi.ts` file: @@ -168,12 +171,12 @@ To get a Project ID, sign up at WalletConnect Cloud, create a new project, and c ## Testing Your Integration -After implementing the Flow Wallet connector and configuring Wagmi, follow these steps to verify that the integration works correctly in your dApp: +After you implement the Flow Wallet connector and configure Wagmi, follow these steps to verify that the integration works correctly in your dApp: -1. **Click "Connect Wallet"** – Open your application and click the "Connect Wallet" button. +1. **Click "Connect Wallet"** – Open your application and click "Connect Wallet." 2. **Check for Flow Wallet** – Ensure Flow Wallet appears as an option in the RainbowKit wallet selection modal. - If you haven't installed the browser extension and set up your wallet yet, you can find install it via the [Chrome Web Store][2]. -3. **Connect the Wallet** – Click on Flow Wallet in the selection modal. If using the browser extension, open it and press "Connect." +3. **Connect the Wallet** – Click on Flow Wallet in the selection modal. If you use the browser extension, open it and press "Connect." ![Rainbowkit dAPP UI](./imgs/rainbowkit-1.png) @@ -183,11 +186,11 @@ After implementing the Flow Wallet connector and configuring Wagmi, follow these ## Conclusion -In this tutorial, you learned how to integrate Flow Wallet with [RainbowKit](https://www.rainbowkit.com/), creating a seamless wallet connection experience for your users. You should now be able to: -- Create a custom Flow Wallet connector compatible with RainbowKit's interface -- Configure your Wagmi setup to support Flow Wallet connections -- Implement a complete wallet connection flow for Flow blockchain users -- Test and verify the Flow Wallet integration in your dApp +In this tutorial, you learned how to integrate Flow Wallet with [RainbowKit](https://www.rainbowkit.com/) and create a seamless wallet connection experience for your users. You should now be able to: +- Create a custom Flow Wallet connector compatible with RainbowKit's interface. +- Configure your Wagmi setup to support Flow Wallet connections. +- Implement a complete wallet connection flow for Flow blockchain users. +- Test and verify the Flow Wallet integration in your dApp. Now that you've completed this tutorial, you're ready to enhance your dApp with additional Flow blockchain features such as token transfers, NFT minting, and smart contract interactions. diff --git a/docs/blockchain-development-tutorials/evm/frameworks/wagmi.md b/docs/blockchain-development-tutorials/evm/frameworks/wagmi.md index 14138a472a..02a8760460 100644 --- a/docs/blockchain-development-tutorials/evm/frameworks/wagmi.md +++ b/docs/blockchain-development-tutorials/evm/frameworks/wagmi.md @@ -9,9 +9,9 @@ sidebar_position: 3 Make sure to use `viem` version `2.9.6` or greater. This version contains flow EVM networks ::: -# Using viem +# Viem & Wagmi -Flow networks have been added to viem chain definitions [viem networks](https://github.com/wevm/viem/tree/main/src/chains/definitions). This allows for convenient flow network configuration when using viem and wagmi. +Flow networks have been added to viem chain definitions [viem networks](https://github.com/wevm/viem/tree/main/src/chains/definitions). This allows for convenient flow network configuration when you use viem and wagmi. ## Viem Flow Config @@ -31,19 +31,20 @@ export const config = createConfig({ }); ``` -# Using Next.js and Wagmi +# Use Next.js and Wagmi -This tutorial will guide you through creating a simple web application, connect to an EVM capable wallet and interact with the "HelloWorld" smart contract to get and set greetings. We will not dive into managing transactions. +This tutorial will guide you through how to create a simple web application, connect to an EVM capable wallet and interact with the "HelloWorld" smart contract to get and set greetings. We will not dive into how to manage transactions. ## Prerequisites -- Node.js installed on your machine -- A code editor (e.g., Visual Studio Code) -- Basic knowledge of React and Next.js +- `Node.js` installed on your machine. +- A code editor (such as Visual Studio Code). +- Basic knowledge of React and `Next.js`. -## Step 1: Setting Up the Next.js Project +## Step 1: Set up the Next.js project + +This tutorial will follow [Wagmi getting-started manual tutorial](https://wagmi.sh/react/getting-started). -This tutorial will be following [Wagmi getting-started manual tutorial](https://wagmi.sh/react/getting-started) First, let's create a Wagmi project named `flow-evm-wagmi`. We will use npm but you are welcome to use yarn or bun. ```bash @@ -61,10 +62,10 @@ cd flow-evm-wagmi npm install ``` -## Step 2: Configuring Wagmi and Connecting the Wallet +## Step 2: Configure Wagmi and connect the Wallet Make sure you have Metamask installed and Flow network configured. [Metamask and Flow blockchain]. -Wagmi needs to know what networks to be aware of. Let's configure to use Flow Testnet by updating config.ts file with the following: +Wagmi needs to know what networks to be aware of. Let's configure to use Flow Testnet and update the `config.ts` file with the following: ```javascript import { http, createConfig } from '@wagmi/core'; @@ -80,7 +81,7 @@ export const config = createConfig({ }); ``` -By default Wagmi configures many wallets, MetaMask, Coinbase Wallet, and WalletConnect as wallet providers. Above we simplify the code to only be interested in the Injected Provider, which we are interested in Metamask. Verify `page.tsx` code looks like the following. +By default, Wagmi configures many wallets, MetaMask, Coinbase Wallet, and WalletConnect as wallet providers. Above, we simplify the code to only be interested in the Injected Provider, which we are interested in Metamask. Verify `page.tsx` code looks like the following. ```javascript 'use client'; @@ -135,14 +136,13 @@ export default App; ![Connect Metamask](./imgs/Connect-Metamask.gif) -This step relies on an already deployed HelloWorld contract. See [Using Remix](../development-tools/remix.md) to deploy a smart contract on flow evm blockchain. -Create or edit the simple `page.tsx` file in the app directory to have better styles, that's beyond this tutorial. We will modify `page.txs` to add a new `HelloWorld.tsx`. Replace `YOUR_CONTRACT_ADDRESS` with your deployed address. +This step relies on an already deployed HelloWorld contract. See [Using Remix](../development-tools/remix.md) to deploy a smart contract on flow evm blockchain. Create or edit the simple `page.tsx` file in the app directory to have better styles, that's beyond this tutorial. We will modify `page.txs` to add a new `HelloWorld.tsx`. Replace `YOUR_CONTRACT_ADDRESS` with your deployed address. -## Step 3: Creating the Interface for HelloWorld Contract +## Step 3: Create the interface for HelloWorld contract Now, let's create a component to interact with the HelloWorld contract. Assume your contract is already deployed, and you have its address and ABI. -- Create a new file, HelloWorld.ts, in the components directory. +- Create a new file, `HelloWorld.ts`, in the components directory. - Use Wagmi's hooks to read from and write to the smart contract: ```javascript @@ -195,7 +195,7 @@ const HelloWorld = () => { export default HelloWorld; ``` -Reminder: aReplace YOUR_CONTRACT_ADDRESS with the actual address of your deployed HelloWorld contract. +Reminder: Replace YOUR_CONTRACT_ADDRESS with the actual address of your deployed HelloWorld contract. Also notice you need the HelloWorld contract ABI, save this to a new file called `HelloWorld.json` in the app directory. @@ -250,7 +250,7 @@ Also notice you need the HelloWorld contract ABI, save this to a new file called } ``` -## Step 4: Integrating the HelloWorld Component +## Step 4: Integrate the HelloWorld Component Finally, import and use the HelloWorld component in your `pages.tsx`, throw it at the bottom of the render section. @@ -282,7 +282,7 @@ import HelloWorld from './helloWorld' Now, you have a functional App that can connect to Metamask, display the current greeting from the "HelloWorld" smart contract, and update the greeting. -Test it by updating the greeting, signing a transaction in your Metamask then wait a minute then refresh the website. Handling transactions are outside of this tutorial. We'll leave that as a future task. [Checkout Wagmi documentation](https://wagmi.sh/react/getting-started) +To test it, update the greeting, sign a transaction in your Metamask, wait a minute, then refresh the website. Handling transactions are outside of this tutorial. We'll leave that as a future task. [Checkout Wagmi documentation](https://wagmi.sh/react/getting-started) ![Update HelloWorld Greeting](./imgs/Update-HelloWorld-Greeting.gif) diff --git a/docs/blockchain-development-tutorials/evm/frameworks/web3-js.md b/docs/blockchain-development-tutorials/evm/frameworks/web3-js.md index c8a4190820..6260d6b7b0 100644 --- a/docs/blockchain-development-tutorials/evm/frameworks/web3-js.md +++ b/docs/blockchain-development-tutorials/evm/frameworks/web3-js.md @@ -22,9 +22,9 @@ To install `web3` in your project, run the following command: npm install web3 ``` -## Initializing Web3 with Flow +## Initialize Web3 with Flow -To use `web3` in your project, start by importing the module and initializing your `Web3` instance with a Flow RPC endpoint. +To use `web3` in your project, first import the module and initialize your `Web3` instance with a Flow RPC endpoint. ```js const { Web3 } = require('web3'); @@ -33,11 +33,11 @@ const web3 = new Web3('https://testnet.evm.nodes.onflow.org'); **Note:** If you want to connect to the Flow testnet, replace the above URL with `https://mainnet.evm.nodes.onflow.org`. -## Querying The Blockchain +## Query The blockchain -`web3` provides a number of methods for querying the blockchain, such as getting the latest block number, querying account balances, and more. +`web3` provides a number of methods for how to query the blockchain, such as to retrieve the latest block number, query account balances, and more. -You can try using some of these methods to verify that your `web3` instance is working correctly. +You can try with some of these methods to verify that your `web3` instance works correctly. ```js // Get the latest block number @@ -57,15 +57,15 @@ const gasPrice = await web3.eth.getGasPrice(); console.log(gasPrice); // Gas price in attoFlow ``` -For more information about other queries you can make `web3`, please see the [official documentation](https://docs.web3js.org/). +For more information about other queries you can make `web3`, see the [official documentation](https://docs.web3js.org/). -## Interacting with Smart Contracts +## Interact with smart contracts The `web3` library allows developers to interact with smart contracts via the `web3.eth.Contract` API. For this example we will use the following `Storage` contract. -We recommend deploying your own contract, which can be done using [Hardhat](../development-tools/hardhat.md) or [Remix](../development-tools/remix.md). +We recommend that you deploy your own contract, which you can do with [Hardhat](../development-tools/hardhat.md) or [Remix](../development-tools/remix.md). ```solidity // SPDX-License-Identifier: MIT @@ -84,7 +84,7 @@ contract Storage { } ``` -The ABI for this contract can be generated using the [`solc` compiler](https://docs.soliditylang.org/en/latest/installing-solidity.html), or another tool such as [Hardhat](../development-tools/hardhat.md) or [Remix](../development-tools/remix.md). +You can generate the ABI for this contract with the [`solc` compiler](https://docs.soliditylang.org/en/latest/installing-solidity.html), or another tool such as [Hardhat](../development-tools/hardhat.md) or [Remix](../development-tools/remix.md). Now that we have both the ABI and address of the contract, we can create a new `Contract` object for use in our application. @@ -131,11 +131,11 @@ const contractAddress = '0x4c7784ae96e7cfcf0224a95059573e96f03a4e70'; const contract = new web3.eth.Contract(abi, contractAddress); ``` -We can now interact with the contract on the network by using the `contract` object. +We can now interact with the contract on the network ith the `contract` object. -### Reading State +### Reading state -State can be read from the contract by using the `call` function with one of the contract's methods. This will not change the state and will not send a transaction. +State can be read from the contract via the `call` function with one of the contract's methods. This will not change the state and will not send a transaction. ```js // Retrieve the current value stored in the contract @@ -145,22 +145,23 @@ const result = await contract.methods.retrieve().call(); console.log(result); // Current value stored in the contract ``` -### Changing State +### Change state -We can mutate the state of the contract by sending a transaction to the network. +To mutate the state of the contract, we can send a transaction to the network. In order to send a transaction to the network, you will need an account with sufficient funds to pay for the transaction. :::info -If you do not have an account yet, you can create one using the following command from your project's root directory: + +If you do not have an account yet, you can create one with the following command from your project's root directory: ```sh node -e "console.log(require('web3').eth.accounts.create())" ``` -Note that this is not a secure way to generate an account, and you should use a more secure method in a production environment. +This is not a secure way to generate an account, and you should use a more secure method in a production environment. -You can fund your account using the [Flow Faucet](https://faucet.flow.com/fund-account). +You can fund your account with the [Flow Faucet](https://faucet.flow.com/fund-account). ::: We can use the `privateKeyToAccount` function to create an `Web3Account` object from our account's private key. @@ -170,7 +171,7 @@ We can use the `privateKeyToAccount` function to create an `Web3Account` object const account = web3.eth.accounts.privateKeyToAccount('0x1234'); ``` -Then, we can sign a transaction using the user's account and send it to the network. +Then, we can sign a transaction with the user's account and send it to the network. ```js const newValue = 1337; // Replace with any value you want to store @@ -193,7 +194,7 @@ const result = await web3.eth.sendSignedTransaction(signed.rawTransaction); console.log(result); ``` -Now that the transaction has been sent, the contract's state should have been updated. We can verify this by querying the contract's state again: +Now that the transaction has been sent, the contract's state will have been updated. To verify this, we can query the contract's state again: ```js const result = await contract.methods.retrieve().call();