Merge pull request #1562 from onflow/evm_framework_docs_cws

EVM framework doc edits.

Author: briandoyle81

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) {

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.
 
 <!-- Reference-style links, will not render on page. -->
 

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.