Merge pull request #1353 from onflow/integration-gelato

Smooth out Gelato Tutorial

Author: briandoyle81

docs/tutorials/integrations/gelato-sw.mdx

@@ -22,59 +22,88 @@ import TabItem from '@theme/TabItem';
 
 # Gelato Smart Wallet Integration Guide
 
-You can use Gelato Smart Wallet to enable gasless transactions on Flow EVM. It supports features like: EIP-7702 or ERC-4337 depending on the wallet you use.
+Gas fees are one of the biggest barriers to blockchain adoption. Users often need to hold native tokens just to pay for transaction fees, creating friction in onboarding and limiting the types of applications that can be built. Gelato Smart Wallet solves this problem by enabling **gasless transactions** on Flow EVM through sponsored transactions.
+
+With Gelato Smart Wallet, you can:
+- **Eliminate gas fees** for your users by sponsoring their transactions
+- **Improve user experience** with seamless onboarding that doesn't require users to hold FLOW tokens
+- **Support EIP-7702** for enhanced smart wallet functionality
+- **Scale your dApp** by removing the cost barrier for user interactions
+- **Leverage Flow's low gas costs** to provide affordable sponsored transactions
+
+This tutorial will guide you through setting up Gelato Smart Wallet to enable gasless transactions on Flow EVM. You'll learn how to configure the necessary API keys, fund your sponsorship account, and implement gasless transaction functionality in your applications.
+
+:::info
+
+This tutorial focuses on **EIP-7702** implementation with Gelato Smart Wallet on Flow EVM. EIP-7702 provides a streamlined experience for users by maintaining the same address as their EOA while adding smart wallet capabilities, enabling enhanced features like gasless transactions and improved user experience.
+
+:::
+
+## Objectives
+
+After completing this guide, you'll be able to:
+
+- Configure a Gelato Smart Wallet account with proper API keys and funding setup
+- Implement gasless transaction functionality using the Gelato Smart Wallet SDK
+- Estimate and execute sponsored transactions on Flow EVM
+- Integrate EIP-7702 features for enhanced user experience
+- Troubleshoot common issues with Gelato Smart Wallet integration
 
 ## Prerequisites of using Gelato Smart Wallet
 
-You need to setup all the followings in the Gelato App to create a Gelato Sponsor API Key.
+You need to set up the following in the Gelato App to create a Gelato Sponsor API Key:
 
 ### Step 1. Create Your Gelato Account
 
 Sign up on the [Gelato App] to establish an account. This account is the foundation for setting up relay tasks and managing gas sponsorships.
 
 ### Step 2. Create a Relay App
 
-Within your Gelato account, create a new Relay App with the Flow EVM network.  
+Within your Gelato account, create a new _Relay App_ with the Flow EVM network.  
 For Testnet, you can first allow `Any contract` to call your relay app.
 
 ![Create a Relay App](./images/gelato-1.png)
 
-:::note
-
-You can add more smart contract information and its associated chain information later in this App.  
-When set to a specific contract instead of `Any contract`, the API keys will only allow gasless transactions for calls to the designated methods within the ABI of the contract.
-
-:::
-
-### Step 3. Create/Obtain a Sponsor API Key
+:::warning
 
-After creating the relay app, navigate to its dashboard to locate your Sponsor API Key.
+You'll need to add more information for your smart contracts at a later date.
 
-![Create a Sponsor API Key](./images/gelato-2.png)
+When set to a specific contract instead of `Any contract`, the API keys will only allow sponsored transactions for calls to the designated methods within the ABI of that contract.
 
-This key links your Gelato setup with 1Balance for gas sponsorship.
+:::
 
-### Step 4. Deposit Funds into 1Balance
+### Step 3. Deposit Funds into 1Balance
 
-To use Gelato sponsoring transactions, you need to deposit funds into 1Balance according to your target environment:
+To use Gelato for sponsored transactions, you need to deposit funds into 1Balance according to your target environment:
 
 - Mainnets: Deposit USDC.
 - Testnets: Deposit Sepolia ETH.
 
-Here we use Sepolia ETH as the gas fee for Testnet‘s gasless transactions.
+Click the `1Balance` tab to deposit `.001` Sepolia ETH testnet funds.
 
 ![Deposit Funds into 1Balance](./images/gelato-3.png)
 
-Here are some third party Sepolia ETH faucets you can use:
+If you need to fund your account, you can use one of the following third-party faucets:
 
 - [Google Cloud Sepolia Faucet]
 - [Alchemy Sepolia Faucet]
 - [Chainlink Sepolia Faucet]
 - [Metamask Sepolia Faucet]
 
+### Step 4. Create/Obtain an API Key
+
+After creating the Relay App, navigate to its dashboard to locate your Sponsor API Key.
+
+![Create a Sponsor API Key](./images/gelato-2.png)
+
+This key links your Gelato setup with 1Balance for gas sponsorship.
+
+Copy the API key to your clipboard.
+
 ## Send Gasless Transactions for your users
 
 After you have created a Sponsor API Key and deposited funds into 1Balance, you can use gasless transactions features for your users.  
+
 With the Gelato Smart Wallet SDK, developers can easily set up sponsored transactions for their applications in just a few simple steps, enabling seamless onboarding and interaction without requiring users to hold native tokens.
 
 :::note
@@ -88,22 +117,22 @@ You can find the examples in the [Gelato Smart Wallet SDK] repository.
 <Tabs>
   <TabItem value="pnpm" label="pnpm" default>
     ```bash
-    pnpm add @gelatodigital/smartwallet viem
+    pnpm add @gelatonetwork/smartwallet viem
     ```
   </TabItem>
   <TabItem value="bun" label="bun">
     ```bash
-    bun add @gelatodigital/smartwallet viem
+    bun add @gelatonetwork/smartwallet viem
     ```
   </TabItem>
   <TabItem value="yarn" label="yarn">
     ```bash
-    yarn add @gelatodigital/smartwallet viem
+    yarn add @gelatonetwork/smartwallet viem
     ```
   </TabItem>
   <TabItem value="npm" label="npm">
     ```bash
-    npm install @gelatodigital/smartwallet viem
+    npm install @gelatonetwork/smartwallet viem
     ```
   </TabItem>
 </Tabs>
@@ -242,7 +271,17 @@ results.on("error", (error: Error) => {
 
 ## Conclusion
 
-So far, you’ve learned how to send sponsored EIP-7702 transactions using a Gelato Smart Wallet on Flow EVM.
+In this tutorial, you successfully integrated Gelato Smart Wallet to enable gasless transactions on Flow EVM. You learned how to set up the necessary infrastructure, configure API keys, fund sponsorship accounts, and implement gasless transaction functionality in your applications. The implementation demonstrates how Flow's low gas costs combined with Gelato's sponsored transaction infrastructure can create seamless user experiences that eliminate the friction of gas fees.
+
+Now that you have completed the tutorial, you should be able to:
+
+- Configure a Gelato Smart Wallet account with proper API keys and funding setup
+- Implement gasless transaction functionality using the Gelato Smart Wallet SDK
+- Estimate and execute sponsored transactions on Flow EVM
+- Integrate EIP-7702 features for enhanced user experience
+- Troubleshoot common issues with Gelato Smart Wallet integration
+
+The combination of Flow's efficient gas pricing and Gelato's sponsored transaction infrastructure opens up new possibilities for building user-friendly dApps. By eliminating the need for users to hold native tokens for gas fees, you can create onboarding experiences that rival traditional Web2 applications while maintaining the security and transparency of blockchain technology.
 
 [Gelato App]: https://app.gelato.network/
 [Google Cloud Sepolia Faucet]: https://cloud.google.com/application/web3/faucet/ethereum/sepolia