diff --git a/docs/blockchain-development-tutorials/index.md b/docs/blockchain-development-tutorials/index.md index a5678f04a1..073676e0c9 100644 --- a/docs/blockchain-development-tutorials/index.md +++ b/docs/blockchain-development-tutorials/index.md @@ -169,7 +169,6 @@ Integration guides for third-party services and tools that enhance Flow blockcha - [Authentication Integration Guide] - Set up user authentication for your Flow application using Crossmint's integrated authentication system with email, social logins, and wallet connections for unified identity management. - [Payment Checkout Integration] - Enable fiat and cross-chain payments for Flow assets with credit cards, Apple Pay, Google Pay, and crypto across 40+ chains using hosted, embedded, or headless checkout solutions. - [Minting Platform Integration] - Create and distribute tokens at scale on Flow using Crossmint's no-code and API-based minting platform with smart contract deployment and airdrop capabilities. -- [Gelato Smart Wallet] - Learn how to use Gelato Smart Wallet to enable gasless transactions on Flow EVM through sponsored transactions with EIP-7702 support for enhanced user experience. ### Building in Web3 has never been easier @@ -248,4 +247,3 @@ Flow will continue to provide quality walkthroughs and tutorials to provide deve [Authentication Integration Guide]: ./integrations/crossmint/authentication.md [Payment Checkout Integration]: ./integrations/crossmint/payment-checkout.md [Minting Platform Integration]: ./integrations/crossmint/minting-platform.md -[Gelato Smart Wallet]: ./integrations/gelato-sw.md diff --git a/docs/blockchain-development-tutorials/integrations/gelato-sw.md b/docs/blockchain-development-tutorials/integrations/gelato-sw.md deleted file mode 100644 index 68136f4f21..0000000000 --- a/docs/blockchain-development-tutorials/integrations/gelato-sw.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -sidebar_position: 1 -title: Gelato Smart Wallet -description: Learn how to use Gelato Smart Wallet to enable gasless transactions on Flow EVM. -keywords: - - tutorials - - guides - - flow - - evm - - smart contracts - - blockchain - - gas efficiency - - gas free - - gasless - - EIP-7702 - - gelato - - smart wallet ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -# Gelato Smart Wallet - -Gas fees are one of the biggest barriers to blockchain adoption. Users often need to hold native tokens just to pay for transaction fees, which creates friction in onboarding and limits the types of applications that they can build. To solve this problem, Gelato Smart Wallet activates **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 how to set up Gelato Smart Wallet to activate 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. It maintains the same address as their EOA and adds Smart Wallet capabilities, which activates enhanced features like gasless transactions and improved user experience. - -::: - -## Objectives - -After you complete this guide, you'll be able to: - -- Configure a Gelato Smart Wallet account with proper API keys and funding setup. -- Implement gasless transaction functionality with 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 to use Gelato Smart Wallet - -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 to set up relay tasks and manage gas sponsorships. - -### Step 2. Deposit funds into 1Balance - -To use Gelato for sponsored transactions, you need to deposit funds into 1Balance as your target environment requires: - -- Mainnets: Deposit USDC. -- Testnets: Deposit Sepolia ETH. - -Click the `1Balance` tab to link your wallet first. - -![Link Wallet](./imgs/gelato-1balance-1.png) - -And then deposit some Sepolia ETH(SEP) testnet funds. - -![Deposit Funds into 1Balance](./imgs/gelato-1balance-2.png) - -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 3. Create a relay app - -Select the `Relay` tab in the Gelato App and switch to the `Testnet` environment. - -Now you can 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](./imgs/gelato-relay-1.png) - -:::warning - -You'll need to add more information for your smart contracts at a later date. - -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. - -::: - -### Step 4. Create or obtain an API key - -After you create the Relay App, navigate to its dashboard to locate your Sponsor API Key. - -![Create a Sponsor API Key](./imgs/gelato-relay-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, which allows seamless onboarding and interaction and doesn't require users to hold native tokens. - -:::info - -You can find the examples in the [Gelato Smart Wallet SDK] repository. - -::: - -### Step 1. Install all relevant dependencies - - - - ```bash - pnpm add @gelatonetwork/smartwallet viem - ``` - - - ```bash - bun add @gelatonetwork/smartwallet viem - ``` - - - ```bash - yarn add @gelatonetwork/smartwallet viem - ``` - - - ```bash - npm install @gelatonetwork/smartwallet viem - ``` - - - - -### Step 2. Set up a Smart Wallet account - -Import required dependencies: - -```ts -import { createGelatoSmartWalletClient, sponsored } from "@gelatonetwork/smartwallet"; -import { gelato } from "@gelatonetwork/smartwallet/accounts"; -import { createWalletClient, createPublicClient, http, type Hex } from "viem"; -import { generatePrivateKey, privateKeyToAccount } from "viem/accounts"; -import { flowTestnet } from "viem/chains"; - -// Create a public client for the Flow Testnet -const publicClient = createPublicClient({ - chain: flowTestnet, - transport: http(), -}); -``` - -You can set up a Smart Account as per your needs. After you create the `gelato` account, the Gelato Smart Account address will be the same as your EOA, which activates EIP-7702 features. - -```ts -// Prepare a normal EOA account -const privateKey = (process.env.PRIVATE_KEY ?? generatePrivateKey()) as Hex; -const owner = privateKeyToAccount(privateKey); - -// Wrap the EOA account into a Gelato Smart account -const account = await gelato({ - owner, - client: publicClient, -}); -``` - -Then you need to create a standard viem wallet client with the Gelato Smart Account. - -```ts -const client = createWalletClient({ - account, - chain: flowTestnet, - transport: http() -}); -``` - -After you have a standard viem wallet client, you can wrap it into a Gelato Smart Wallet client with the sponsor API key. - -```ts -const sponsorApiKey = process.env.SPONSOR_API_KEY; -if (!sponsorApiKey) { - throw new Error("SPONSOR_API_KEY is not set"); -} - -const swc = await createGelatoSmartWalletClient(client, { - apiKey: sponsorApiKey -}); -``` - -### Step 3. Estimate or send a gasless transaction - -Now you can estimate or send a gasless transaction with the Gelato Smart Wallet client. - -To estimate the fee and gas for a gasless transaction, you can use the `estimate` method. - -```ts -const response = await swc.estimate({ - payment: sponsored(sponsorApiKey), - calls: [ - { - to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E", - data: "0xd09de08a", - value: 0n - } - ] -}); - -console.log(`Estimated fee: ${formatEther(BigInt(response.fee.amount))} FLOW`); -console.log(`Estimated gas: ${JSON.stringify(response.gas)} GAS`); -``` - -To send a gasless transaction, you can use the `execute` method. - -```ts -const results = await smartWalletClient.execute({ - payment : sponsored(sponsorApiKey), - calls: [ - { - to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E", - data: "0xd09de08a", - value: 0n - } - ] -}); - -console.log("userOp hash:", results?.id); -const txHash = await results?.wait(); -console.log("transaction hash",txHash); -``` - -Or you can use `prepare` + `send` to send a gasless transaction. - -```ts -const preparedCalls = await swc.prepare({ - payment: sponsored(sponsorApiKey), - calls: [ - { - to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E", - data: "0xd09de08a", - value: 0n - } - ] -}); - -// Other actions can be performed here - -const results = await swc.send({ - preparedCalls -}); - -// You can listen for events from the Gelato Smart Wallet client -results.on("submitted", (status: GelatoTaskStatus) => { - console.log(`Transaction submitted: ${status.transactionHash}`); -}); -results.on("success", async (status: GelatoTaskStatus) => { - console.log(`Transaction successful: ${status.transactionHash}`); -}); -results.on("error", (error: Error) => { - console.error(`Transaction failed: ${error.message}`); -}); -``` - ---- - -## Conclusion - -In this tutorial, you successfully integrated Gelato Smart Wallet to activate 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 with 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 prices and Gelato's sponsored transaction infrastructure opens up new possibilities for you to build user-friendly dApps. When you eliminate the need for users to hold native tokens for gas fees, you can create onboarding experiences that rival traditional Web2 applications and maintain the security and transparency of blockchain technology. - - - -[Gelato App]: https://app.gelato.cloud/ -[Google Cloud Sepolia Faucet]: https://cloud.google.com/application/web3/faucet/ethereum/sepolia -[Alchemy Sepolia Faucet]: https://www.alchemy.com/faucets/ethereum-sepolia -[Chainlink Sepolia Faucet]: https://faucets.chain.link/sepolia -[Metamask Sepolia Faucet]: https://docs.metamask.io/developer-tools/faucet/ -[Gelato Smart Wallet SDK]: https://github.com/gelatodigital/smartwallet/tree/master/examples diff --git a/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-1.png b/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-1.png deleted file mode 100644 index 60b0878735..0000000000 Binary files a/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-1.png and /dev/null differ diff --git a/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-2.png b/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-2.png deleted file mode 100644 index fe9d73c294..0000000000 Binary files a/docs/blockchain-development-tutorials/integrations/imgs/gelato-1balance-2.png and /dev/null differ diff --git a/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-1.png b/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-1.png deleted file mode 100644 index 7dd100caeb..0000000000 Binary files a/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-1.png and /dev/null differ diff --git a/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-2.png b/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-2.png deleted file mode 100644 index 90a3058298..0000000000 Binary files a/docs/blockchain-development-tutorials/integrations/imgs/gelato-relay-2.png and /dev/null differ diff --git a/docs/blockchain-development-tutorials/integrations/index.md b/docs/blockchain-development-tutorials/integrations/index.md index f0abef0730..9f2f6b786e 100644 --- a/docs/blockchain-development-tutorials/integrations/index.md +++ b/docs/blockchain-development-tutorials/integrations/index.md @@ -3,11 +3,9 @@ title: Third-Party Integrations description: Comprehensive guides for integrating popular blockchain infrastructure platforms with Flow to enhance user experience and reduce development complexity. sidebar_position: 10 keywords: - - Gelato - Crossmint - integrations - infrastructure - - gasless transactions - payments - wallets - authentication @@ -17,14 +15,10 @@ keywords: Flow's developer-friendly ecosystem extends beyond core blockchain functionality through strategic integrations with leading infrastructure platforms. These integrations eliminate common Web3 friction points, which allows you to build sophisticated applications with traditional Web2 user experiences and leverage Flow's unique blockchain capabilities. -This section provides comprehensive integration guides for platforms that enhance Flow development by addressing key challenges like gas fees, payment processing, user onboarding, and wallet management. Each integration tutorial provides step-by-step implementation guidance, best practices, and real-world examples to help you quickly integrate these powerful services into your Flow applications. +This section provides comprehensive integration guides for platforms that enhance Flow development by addressing key challenges like payment processing, user onboarding, and wallet management. Each integration tutorial provides step-by-step implementation guidance, best practices, and real-world examples to help you quickly integrate these powerful services into your Flow applications. ## Available integrations -### [Gelato Smart Wallet] - -Eliminate gas fees and improve user experience with Gelato's sponsored transaction infrastructure on Flow EVM. This comprehensive guide shows you how to implement gasless transactions with EIP-7702 features, configure API keys and funding accounts, and integrate the Gelato Smart Wallet SDK for seamless user onboarding. Learn to leverage Flow's low gas costs combined with Gelato's sponsorship infrastructure to create applications that rival traditional Web2 experiences and maintain blockchain security and transparency. - ### [Crossmint Integration Platform] Build enterprise-grade Web3 applications on Flow with Crossmint's comprehensive blockchain infrastructure platform. This extensive integration guide covers four key areas: @@ -40,5 +34,4 @@ Crossmint allows you to create complete blockchain applications that feel famili These third-party integrations demonstrate Flow's commitment to provide developers with the tools they need to build mainstream-ready blockchain applications. When you combine Flow's innovative architecture with best-in-class infrastructure platforms, you can eliminate traditional Web3 barriers and create user experiences that drive adoption. Whether you want to build decentralized finance (DeFi) protocols, NFT marketplaces, or consumer applications, these integrations provide the foundation for scalable, user-friendly products that bridge the gap between Web2 expectations and Web3 capabilities. -[Gelato Smart Wallet]: ./gelato-sw.md [Crossmint Integration Platform]: ./crossmint/index.md \ No newline at end of file diff --git a/public/llms.txt b/public/llms.txt index bcf2b2f662..4020cf70bc 100644 --- a/public/llms.txt +++ b/public/llms.txt @@ -89,7 +89,7 @@ All documentation is available in Markdown format for AI agents: - [Token Standards](https://developers.flow.com/blockchain-development-tutorials/tokens): Creating fungible and non-fungible tokens. - [Native VRF](https://developers.flow.com/blockchain-development-tutorials/native-vrf): Flow's native verifiable random function for onchain randomness. - [Gasless Transactions](https://developers.flow.com/blockchain-development-tutorials/gasless-transactions): Sponsored transactions for better UX. -- [Integrations](https://developers.flow.com/blockchain-development-tutorials/integrations): Integration with external services like Crossmint and Gelato. +- [Integrations](https://developers.flow.com/blockchain-development-tutorials/integrations): Integration with external services like Crossmint. - [128-bit Fixed Point Math](https://developers.flow.com/blockchain-development-tutorials/forte/fixed-point-128-bit-math): Financial precision with 128-bit arithmetic. ## AI Development Tools diff --git a/vercel.json b/vercel.json index 9a224f144c..451e15c104 100644 --- a/vercel.json +++ b/vercel.json @@ -350,6 +350,11 @@ } ], "redirects": [ + { + "source": "/blockchain-development-tutorials/integrations/gelato-sw", + "destination": "/blockchain-development-tutorials/integrations", + "permanent": true + }, { "source": "/ecosystem/defi-liquidity/defi-contracts", "destination": "/defi/defi-contracts-mainnet",