From 329856c74bd1e3ed20610efbfe16eddb3cad262c Mon Sep 17 00:00:00 2001 From: cshannon1218 Date: Wed, 12 Nov 2025 16:29:02 -0600 Subject: [PATCH 1/2] Crossmint doc edits --- .../integrations/crossmint/authentication.md | 72 +++++++-------- .../integrations/crossmint/index.md | 79 ++++++++-------- .../crossmint/minting-platform.md | 33 +++---- .../crossmint/payment-checkout.md | 90 +++++++++---------- .../integrations/gelato-sw.md | 74 +++++++-------- .../integrations/index.md | 19 ++-- 6 files changed, 187 insertions(+), 180 deletions(-) diff --git a/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md b/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md index fb0efab93a..ce27b9d91d 100644 --- a/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md +++ b/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md @@ -16,25 +16,25 @@ keywords: # Authentication Integration Guide -Crossmint provides a comprehensive user management solution tightly integrated with all other Crossmint products. Authenticate users using Web3 or traditional sign-in methods, with seamless wallet creation and unified identity management. +Crossmint provides a comprehensive user management solution tightly integrated with all other Crossmint products. Authenticate users with Web3 or traditional sign-in methods, with seamless wallet creation and unified identity management. **Why this matters:** -- **Unified identity system**: Single user account across your backend and Web3 app -- **Multiple auth methods**: Email OTP, social logins, wallet connections, and Farcaster -- **Automatic wallet creation**: Optionally create or link wallets with user accounts -- **Drag and drop integration**: Setup in under 5 minutes +- **Unified identity system**: Single user account across your backend and Web3 app. +- **Multiple auth methods**: Email OTP, social logins, wallet connections, and Farcaster. +- **Automatic wallet creation**: Optionally create or link wallets with user accounts. +- **Drag and drop integration**: Setup in under five minutes. -## 🎯 Available Authentication Methods +## 🎯 Available authentication methods -### 1. Email OTP Authentication +### 1. Email OTP authentication -Passwordless sign-in using one-time codes delivered to the user's email. +Passwordless sign-in with one-time codes delivered to the user's email. - No passwords required - Secure and user-friendly - Automatic account creation -### 2. Social Account Authentication +### 2. Social account authentication Sign in with popular social platforms: @@ -43,14 +43,14 @@ Sign in with popular social platforms: - X (Twitter) - And more -### 3. Farcaster Integration +### 3. Farcaster integration -Using the [Sign In With Farcaster (SIWF) standard] +Use the [Sign In With Farcaster (SIWF) standard] - Web3-native authentication - Decentralized identity support -### 4. External Wallet Authentication +### 4. External wallet authentication Connect with crypto wallets for Web3 authentication: @@ -59,7 +59,6 @@ Connect with crypto wallets for Web3 authentication: - Flow wallets - And other Web3 wallets - ## Prerequisites Make sure you have: @@ -75,18 +74,19 @@ Make sure you have: - TypeScript support (recommended) **Technical knowledge:** + - Basic React hooks and state management - Understanding of authentication flows -## Quick Start (5 minutes) +## Quick start (five minutes) -### Step 1: Install the SDK +### Step 1: install the SDK ```bash npm i @crossmint/client-sdk-react-ui ``` -### Step 2: Add Crossmint Providers +### Step 2: add crossmint providers ```tsx "use client"; @@ -108,7 +108,7 @@ export function Providers({ children }: { children: React.ReactNode }) { } ``` -### Step 3: Create Authentication Component +### Step 3: create authentication component ```tsx "use client"; @@ -152,7 +152,7 @@ export function AuthButton() { } ``` -### Environment Configuration +### Environment configuration ```typescript // Use environment-specific API keys @@ -164,30 +164,30 @@ const crossmintConfig = { }; ``` -## Production Deployment +## Production deployment -### 1. Create Production Account +### 1. Create production account -1. Create a developer account on the [Production Console] +1. Create a developer account on the [Production Console]. ![Production Console Login](./imgs/staging.png) -2. Complete account verification and KYB process +2. Complete account verification and KYB process. -### 2. Configure Production API Keys +### 2. Configure production API keys -1. Create a production client API key +1. Create a production client API key. Navigate to **Integrate > API Keys** ![API Keys](./imgs/api_keys.png) -2. Enable required scopes: +2. Activate required scopes: - `users.create` - `users.read` - `wallets.read` - `wallets.create` -### 3. Update Environment Variables +### 3. Update environment variables ```bash # Production @@ -199,7 +199,7 @@ CROSSMINT_API_KEY=your_staging_client_api_key CROSSMINT_ENVIRONMENT=staging ``` -### 4. Test Authentication Flow +### 4. Test authentication flow ```typescript // Test authentication in staging first @@ -218,19 +218,21 @@ const testAuth = async () => { ## 🔧 Troubleshooting -### Common Issues +### Common issues **Authentication fails:** -- Verify API key is correct -- Check authentication scopes are enabled -- Ensure you're using the right environment (staging vs production) + +- Verify API key is correct. +- Check authentication scopes are activated. +- Make sure you're using the right environment (staging vs. production) **Wallet creation fails:** -- Verify user is authenticated -- Check wallet creation scopes -- Ensure proper wallet configuration for Flow -### Getting Help +- Verify user is authenticated. +- Check wallet creation scopes. +- Ensure proper wallet configuration for Flow. + +### Get Help - **[Crossmint Authentication Docs](https://docs.crossmint.com/authentication/introduction)** - **[Flow Developer Portal](https://developers.flow.com/)** diff --git a/docs/blockchain-development-tutorials/integrations/crossmint/index.md b/docs/blockchain-development-tutorials/integrations/crossmint/index.md index 7fa44f8c86..e928c99e73 100644 --- a/docs/blockchain-development-tutorials/integrations/crossmint/index.md +++ b/docs/blockchain-development-tutorials/integrations/crossmint/index.md @@ -19,56 +19,53 @@ keywords: # Crossmint Integration Guide -Crossmint is an all-in-one platform that brings enterprise-grade blockchain infrastructure to Flow developers. Build complete Web3 applications without requiring users to understand crypto - from embedded wallets and gasless payments to AI agent commerce and stablecoin integration. +Crossmint is an all-in-one platform that brings enterprise-grade blockchain infrastructure to Flow developers. Build complete Web3 applications without a need for your users to understand crypto - from embedded wallets and gasless payments to AI agent commerce and stablecoin integration. **Why this matters:** -- **Eliminate barriers**: No gas fees, seed phrases, or complex wallet setup for your users -- **Enterprise ready**: Bank-grade security trusted by Fortune 500 companies +- **Eliminate barriers**: No gas fees, seed phrases, or complex wallet setup for your users. +- **Enterprise ready**: Bank-grade security trusted by Fortune 500 companies. -With Crossmint on Flow, you can create comprehensive blockchain applications that feel like traditional Web2 apps while leveraging Flow's unique capabilities. +With Crossmint on Flow, you can create comprehensive blockchain applications that feel like traditional Web2 apps and leverage Flow's unique capabilities. **Core features:** Gasless transactions, fiat payments, token minting - - ## 🎯 Available Features -### 1. Minting Platform +### 1. Minting platform Create and distribute tokens at scale via API and no-code tools. You'll be able to: -- Deploy secure smart contracts on Flow -- Mint, update, burn, and airdrop tokens at scale -- Manage metadata and collections -- API and no-code collection creation +- Deploy secure smart contracts on Flow. +- Mint, update, burn, and airdrop tokens at scale. +- Manage metadata and collections. +- API and no-code collection creation. ### 2. Authentication Create wallets for users with seamless authentication. This unlocks: -- Authentication with email, social logins, wallets, and passkeys -- Smart wallets with custodial and non-custodial options -- Gasless transactions and improved user experience -- Data APIs for fetching balances and activity +- Authentication with email, social logins, wallets, and passkeys. +- Smart wallets with custodial and non-custodial options. +- Gasless transactions and improved user experience. +- Data APIs to fetch balances and activity. -### 3. Fiat and Cross-chain Payment Checkout +### 3. Fiat and cross-chain payment checkout -Digital Asset Checkout supporting fiat and cross-chain payments. Allow your users to buy onchain assets using any of the following payment methods: +Digital Asset Checkout supports fiat and cross-chain payments. Allow your users to buy onchain assets with any of the following payment methods: -- Credit card, Apple Pay, Google Pay support -- Cross-chain crypto payments (40+ tokens) -- No KYC required for most transactions +- Credit card, Apple Pay, Google Pay support. +- Cross-chain crypto payments (40+ tokens). +- No KYC required for most transactions. -### 4. World Store +### 4. World store Access to real-world goods and services via crypto payments such as: -- Over 1 billion products from Amazon, Shopify, flights, and more -- Pay with FLOW, USDF, and other supported tokens -- Perfect for expanding crypto utility to real-world commerce -- API access to global commerce platforms - +- Over one billion products from Amazon, Shopify, flights, and more. +- Pay with FLOW, USDF, and other supported tokens. +- Perfect for expanding crypto utility to real-world commerce. +- API access to global commerce platforms. ## 🛠 Prerequisites @@ -76,37 +73,37 @@ Make sure you have: - **Crossmint account:** - - [Crossmint Console] account - - API keys configured for your project + - [Crossmint Console] account. + - API keys configured for your project. - **Flow development environment:** - - Flow CLI installed and configured + - Flow CLI installed and configured. - **Technical knowledge:** - - Basic JavaScript/TypeScript, React hooks - - Understanding of Flow (Cadence or EVM) + - Basic JavaScript/TypeScript, React hooks. + - Understanding of Flow (Cadence or EVM). - **Setup:** - 1. Clone or create your Flow project + 1. Clone or create your Flow project. 2. Install Crossmint SDK: `npm i @crossmint/client-sdk-react-ui` - 3. Configure environment variables for API keys - 4. Onboard thousands of users seamlessly + 3. Configure environment variables for API keys. + 4. Onboard thousands of users seamlessly. ## Guides -Get up and running with Crossmint on Flow in under 15 minutes: +Get started with Crossmint on Flow in under 15 minutes: -1. **[Set up authentication](./authentication.md)** for seamless user onboarding -3. **[Enable fiat payments](./payment-checkout.md)** for your Flow assets -4. **[Minting Platform](./minting-platform.md)** to create and distribute tokens at scale +1. **[Set up authentication](./authentication.md)** to seamlessly onboard users. +3. **[Enable fiat payments](./payment-checkout.md)** for your Flow assets. +4. **[Minting Platform](./minting-platform.md)** to create and distribute tokens at scale. -If you have trouble during the integrations process, please refer to these documentation sites: +If you have trouble during the integrations process, refer to these documentation sites: -- **[Crossmint Documentation](https://docs.crossmint.com/)** - Complete platform docs -- **[Flow Developer Portal](https://developers.flow.com/)** - Flow-specific resources +- **[Crossmint Documentation](https://docs.crossmint.com/)** - Complete platform docs. +- **[Flow Developer Portal](https://developers.flow.com/)** - Flow-specific resources. diff --git a/docs/blockchain-development-tutorials/integrations/crossmint/minting-platform.md b/docs/blockchain-development-tutorials/integrations/crossmint/minting-platform.md index 0aff213ea3..666f20beb2 100644 --- a/docs/blockchain-development-tutorials/integrations/crossmint/minting-platform.md +++ b/docs/blockchain-development-tutorials/integrations/crossmint/minting-platform.md @@ -14,29 +14,30 @@ keywords: # Minting Platform Integration Guide -Deploy secure smart contracts and mint tokens at scale on Flow using Crossmint's comprehensive minting platform. +Deploy secure smart contracts and mint tokens at scale on Flow with Crossmint's comprehensive minting platform. ## Overview Crossmint's minting platform provides no-code tools and powerful APIs to create, mint, update, burn, and airdrop tokens on Flow. -> **Key Benefits:** -> - Deploy secure smart contracts without coding -> - Mint, update, burn, and airdrop tokens at scale -> - Manage metadata and collections -> - Flow EVM and Cadence support +> **Key benefits:** + +> - Deploy secure smart contracts without coding. +> - Mint, update, burn, and airdrop tokens at scale. +> - Manage metadata and collections. +> - Flow EVM and Cadence support. --- ## Prerequisites -- Crossmint account with minting enabled -- Flow development environment -- Basic understanding of NFT standards +- Crossmint account with minting activated. +- Flow development environment. +- Basic understanding of NFT standards. -## Step 1: Deploy Smart Contract +## Step 1: Deploy smart contract -### No-Code Contract Deployment +### No-code contract deployment 1. Go to Crossmint Console > **Collections** 2. Click **Create Collection** @@ -46,7 +47,7 @@ Crossmint's minting platform provides no-code tools and powerful APIs to create, - Royalty settings - Access controls -### API Contract Deployment +### API contract deployment ```typescript // Deploy contract via API @@ -66,9 +67,9 @@ const contract = await crossmint.contracts.deploy({ }); ``` -## Step 2: Mint NFTs +## Step 2: mint NFTs -### Single NFT Minting +### Single NFT minting ```typescript const nft = await crossmint.nfts.mint({ @@ -86,7 +87,7 @@ const nft = await crossmint.nfts.mint({ }); ``` -### Batch Minting +### Batch minting ```typescript const batchMint = await crossmint.nfts.batchMint({ @@ -99,7 +100,7 @@ const batchMint = await crossmint.nfts.batchMint({ ``` -## Step 3: Airdrops +## Step 3: airdrops ```typescript const airdrop = await crossmint.airdrops.create({ diff --git a/docs/blockchain-development-tutorials/integrations/crossmint/payment-checkout.md b/docs/blockchain-development-tutorials/integrations/crossmint/payment-checkout.md index c51c7804b0..72a6dc123b 100644 --- a/docs/blockchain-development-tutorials/integrations/crossmint/payment-checkout.md +++ b/docs/blockchain-development-tutorials/integrations/crossmint/payment-checkout.md @@ -15,51 +15,51 @@ keywords: --- -# Payment Checkout Integration Guide +# Payment checkout integration guide Enable seamless fiat and cryptocurrency payments for your Flow assets. Crossmint's checkout solution supports credit cards, Apple Pay, Google Pay, and cross-chain crypto payments, allowing users to buy Flow NFTs and tokens without holding FLOW tokens. ## Overview -Crossmint Checkout eliminates payment friction by supporting multiple payment methods and handling complex blockchain interactions behind the scenes. Users can buy your Flow assets using familiar payment methods. +Crossmint Checkout supports multiple payment methods and handles complex blockchain interactions behind the scenes, which eliminates payment friction. Users can buy your Flow assets with familiar payment methods. -> **Key Benefits:** -> - **No wallet required** - guest checkout available -> - **Global coverage** - 197 countries supported -> - **No buyer KYC** for most transactions -> - **Cross-chain payments** - Pay with any crypto, receive on Flow +> **Key benefits:** +> - **No wallet required** - guest checkout available. +> - **Global coverage** - 197 countries supported. +> - **No buyer KYC** for most transactions. +> - **Cross-chain payments** - Pay with any crypto, receive on Flow. -## What You'll Build +## What you'll build -You'll integrate checkout functionality that enables: -- Credit card payments for Flow NFTs and tokens -- Apple Pay and Google Pay support -- Cross-chain crypto payments -- Guest checkout (no wallet required) +You'll integrate checkout functionality that activates: +- Credit card payments for Flow NFTs and tokens. +- Apple Pay and Google Pay support. +- Cross-chain crypto payments. +- Guest checkout (no wallet required). ## Prerequisites -- Crossmint account with checkout enabled -- Flow collection created or imported -- Basic understanding of payment flows -- For production: KYB verification completed +- Crossmint account with checkout activated. +- Flow collection created or imported. +- Basic understanding of payment flows. +- For production: KYB verification completed. -## Step 1: Collection Setup +## Step 1: Collection setup -### Create or Import Collection +### Create or import collection -**Option A: Create New Collection** +**Option A: create new collection** -1. Go to [Crossmint Console](https://staging.crossmint.com) > **Collections** -2. Click **Create Collection** -3. Choose **Flow** blockchain +1. Go to [Crossmint Console](https://staging.crossmint.com) > **Collections**. +2. Click **Create Collection**. +3. Choose **Flow** blockchain. 4. Configure collection settings: - Network: Flow Testnet/Mainnet - Contract type: ERC-721 (EVM) or Cadence NFT - Pricing in USD or FLOW - Maximum supply and metadata -**Option B: Import Existing Collection** +**Option B: Import current collection** ```javascript // Import existing Flow contract @@ -75,21 +75,21 @@ const collection = await crossmint.collections.import({ }); ``` -### Configure Payment Settings +### Configure payment settings In your collection settings: -1. Go to **Payments > Settings** +1. Go to **Payments > Settings**. 2. Choose fee structure: - - **Buyer pays fees**: User pays NFT price + fees - - **Seller pays fees**: User pays exact price, you pay fees -3. Set accepted payment methods -4. Configure webhooks for order updates + - **Buyer pays fees**: user pays NFT price + fees. + - **Seller pays fees**: user pays exact price, you pay fees. +3. Set accepted payment methods. +4. Configure webhooks for order updates. ## Step 2: Hosted Checkout Integration The fastest way to get started - Crossmint hosts the entire checkout experience. -### Basic Hosted Checkout +### Basic hosted checkout ```javascript // src/components/HostedCheckout.jsx @@ -133,7 +133,7 @@ export function HostedCheckout({ collectionId, nftId, onSuccess }) { } ``` -### Advanced Hosted Checkout +### Advanced hosted checkout ```javascript // More control over hosted checkout @@ -182,12 +182,12 @@ export function AdvancedHostedCheckout({ --- -## Step 3: Embedded Checkout Integration +## Step 3: embedded checkout integration Embed checkout directly in your application with full UI control. -### Basic Embedded Checkout +### Basic embedded checkout ```jsx // src/components/EmbeddedCheckout.jsx @@ -236,7 +236,7 @@ export function EmbeddedCheckout({ collectionId, nftId, recipient }) { } ``` -### Custom Styled Embedded Checkout +### Custom styled embedded checkout ```jsx // Advanced embedded checkout with custom styling @@ -320,7 +320,7 @@ export function CustomEmbeddedCheckout({ For maximum customization, use the headless API to build completely custom checkout flows. -### Order Creation Service +### Order creation service ```typescript // src/services/checkoutService.ts @@ -461,7 +461,7 @@ export class CheckoutService { export const checkoutService = new CheckoutService(); ``` -### Custom Checkout Component +### Custom checkout component ```tsx // src/components/CustomCheckout.tsx @@ -596,11 +596,11 @@ export function CustomCheckout(props: CheckoutFormProps) { --- -## Step 5: Webhook Integration +## Step 5: webhook integration Set up webhooks to handle order status updates in real-time. -### Webhook Handler +### Webhook handler ```typescript // src/api/webhooks/crossmint.ts (Next.js API route example) @@ -670,7 +670,7 @@ async function handleOrderDelivered(orderData: any) { --- -## Step 6: Multi-Payment Method Component +## Step 6: multi-payment method component Create a comprehensive checkout that supports all payment methods: @@ -789,9 +789,9 @@ export function UniversalCheckout({ } ``` -## Key Takeaways +## Key takeaways -- **Multiple Integration Options**: Hosted, embedded, or headless - choose what fits your needs -- **Universal Payment Support**: Credit cards, mobile payments, and 40+ cryptocurrencies -- **Flow Native**: Optimized for both Flow EVM and Cadence ecosystems -- **Global Scale**: Support for 197 countries with no buyer KYC +- **Multiple Integration Options**: hosted, embedded, or headless - choose what fits your needs. +- **Universal Payment Support**: credit cards, mobile payments, and over 40 cryptocurrencies. +- **Flow Native**: optimized for both Flow EVM and Cadence ecosystems. +- **Global Scale**: support for 197 countries with no buyer KYC. diff --git a/docs/blockchain-development-tutorials/integrations/gelato-sw.md b/docs/blockchain-development-tutorials/integrations/gelato-sw.md index 63e26045fa..40aa47298c 100644 --- a/docs/blockchain-development-tutorials/integrations/gelato-sw.md +++ b/docs/blockchain-development-tutorials/integrations/gelato-sw.md @@ -20,46 +20,46 @@ keywords: import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Gelato Smart Wallet Integration Guide +# 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, 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. +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 +- **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. +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 by maintaining the same address as their EOA while adding smart wallet capabilities, enabling enhanced features like gasless transactions and improved user experience. +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 completing this guide, you'll be able to: +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 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 +- 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 of using Gelato Smart Wallet +## 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 +### 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. +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 +### Step 2. deposit funds into 1Balance -To use Gelato for sponsored 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 as your target environment requires: - Mainnets: Deposit USDC. - Testnets: Deposit Sepolia ETH. @@ -79,7 +79,7 @@ If you need to fund your account, you can use one of the following third-party f - [Chainlink Sepolia Faucet] - [Metamask Sepolia Faucet] -### Step 3. Create a Relay App +### Step 3. create a relay app Select the `Relay` tab in the Gelato App and switch to the `Testnet` environment. @@ -96,9 +96,9 @@ When set to a specific contract instead of `Any contract`, the API keys will onl ::: -### Step 4. Create/Obtain an API Key +### Step 4. Create or obtain an API key -After creating the Relay App, navigate to its dashboard to locate your Sponsor 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) @@ -106,13 +106,13 @@ This key links your Gelato setup with 1Balance for gas sponsorship. Copy the API key to your clipboard. -## Send Gasless Transactions for your users +## 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. +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. -:::note +:::info You can find the examples in the [Gelato Smart Wallet SDK] repository. @@ -144,7 +144,7 @@ You can find the examples in the [Gelato Smart Wallet SDK] repository. -### Step 2. Setup Smart Wallet Account +### Step 2. set up a Smart Wallet account Import required dependencies: @@ -163,7 +163,7 @@ const publicClient = createPublicClient({ ``` You can set up a Smart Account as per your needs. -Once you create the `gelato` account, the Gelato Smart Account address will be the same as your EOA, enabling EIP-7702 features. +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 @@ -187,7 +187,7 @@ const client = createWalletClient({ }); ``` -Once you have a standard viem wallet client, you can wrap it into a Gelato Smart Wallet client with the sponsor API key. +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; @@ -200,7 +200,7 @@ const swc = await createGelatoSmartWalletClient(client, { }); ``` -### Step 3. Estimate or Send a Gasless Transaction +### Step 3. estimate or send a gasless transaction Now you can estimate or send a gasless transaction with the Gelato Smart Wallet client. @@ -277,17 +277,17 @@ results.on("error", (error: Error) => { ## Conclusion -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. +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 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 +- 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 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. +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 diff --git a/docs/blockchain-development-tutorials/integrations/index.md b/docs/blockchain-development-tutorials/integrations/index.md index bc320a0f71..f0abef0730 100644 --- a/docs/blockchain-development-tutorials/integrations/index.md +++ b/docs/blockchain-development-tutorials/integrations/index.md @@ -13,25 +13,32 @@ keywords: - authentication --- -# Third-Party Integrations +# Third-Party integrations -Flow's developer-friendly ecosystem extends beyond core blockchain functionality through strategic integrations with leading infrastructure platforms. These integrations eliminate common Web3 friction points, enabling you to build sophisticated applications with traditional Web2 user experiences while leveraging Flow's unique blockchain capabilities. +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. -## Available Integrations +## 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 using 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 while maintaining blockchain security and transparency. +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: authentication with email, social logins, and wallet connections; fiat payment processing supporting credit cards, Apple Pay, and Google Pay; NFT and token minting platform with no-code deployment tools; and access to real-world goods through crypto payments. Crossmint enables you to create complete blockchain applications that feel familiar to Web2 users while leveraging Flow's advanced capabilities. +Build enterprise-grade Web3 applications on Flow with Crossmint's comprehensive blockchain infrastructure platform. This extensive integration guide covers four key areas: + +- Authentication with email, Social logins, and wallet connections. +- Fiat payment processing supporting credit cards, Apple Pay, and Google Pay +- NFT and token minting platform with no-code deployment tools +- Access to real-world goods through crypto payments. + +Crossmint allows you to create complete blockchain applications that feel familiar to Web2 users and leverage Flow's advanced capabilities. ## Conclusion -These third-party integrations demonstrate Flow's commitment to providing developers with the tools needed to build mainstream-ready blockchain applications. By combining 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're building 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. +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 From ce068b42c2d722f83e29ffb6579baf84c9794f3a Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 14 Nov 2025 09:08:32 -0500 Subject: [PATCH 2/2] Apply suggestion from @briandoyle81 --- .../integrations/crossmint/authentication.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md b/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md index ce27b9d91d..a5d5cfb580 100644 --- a/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md +++ b/docs/blockchain-development-tutorials/integrations/crossmint/authentication.md @@ -78,7 +78,7 @@ Make sure you have: - Basic React hooks and state management - Understanding of authentication flows -## Quick start (five minutes) +## Quick start ### Step 1: install the SDK