Version: v2

Gas Estimation with Checkout SDK

Demonstrates how to use the Immutable Checkout SDK to estimate gas fees for different types of transactions such as swaps and bridging to Layer 2.

💡Who is this for?

This guide is primarily for developers and potentially project managers who want to understand the Checkout integration process.

Gas Estimation with Checkout SDK and Next.js

This example app demonstrates how to use the Immutable Checkout SDK to estimate gas fees for different types of transactions such as swaps and bridging to Layer 2.

View app on Github →

Features Overview

Gas estimation for swap transactions
Gas estimation for bridge to Layer 2 transactions

SDK Integration Details

Gas Estimation for Transactions

Feature Name: Using the Checkout SDK to estimate gas fees for swap and bridge transactions.

Source Code: Source code file

Implementation:

// Get gas estimate for Swap type of transaction
const swapEstimate = await checkoutSDK.gasEstimate({ gasEstimateType: checkout.GasEstimateType.SWAP });
// Get gas estimate for Bridge type of transaction
const bridgeEstimate = await checkoutSDK.gasEstimate({ gasEstimateType: checkout.GasEstimateType.BRIDGE_TO_L2 });

Explanation: The code demonstrates how to use the Checkout SDK's gasEstimate method to calculate estimated gas fees for different transaction types. The example shows two types of gas estimations:

Swap Gas Estimation: Calculates the estimated fees for a token swap transaction, providing total fees and token information.
Bridge to L2 Gas Estimation: Provides detailed breakdown of fees for bridging assets to Layer 2, including source chain gas, approval fee, bridge fee, IMTBL fee, and total fees.

The app displays these estimates in a table format after connecting to MetaMask, allowing users to see the estimated costs before initiating actual transactions.

Running the App

Prerequisites

Node.js (version 16 or higher)
MetaMask browser extension installed
A Publishable API Key from Immutable Hub

Setup and Run

Clone the repository:

git clone https://github.com/immutable/ts-immutable-sdk.git

Navigate to the example app directory:

cd ts-immutable-sdk/examples/checkout/sdk-gas-estimation-with-nextjs

Install dependencies:
```
pnpm install
```

Create a .env.local file based on the .env.example file:

NEXT_PUBLIC_PUBLISHABLE_KEY=your_publishable_key_from_hub

Start the development server:
```
pnpm dev
```
Open http://localhost:3000 in your browser.
Click the "Gas Estimation with MetaMask" button on the homepage.
Click "Connect MetaMask" to connect your wallet and view the gas estimates.

Summary

This example app demonstrates how to integrate the Immutable Checkout SDK's gas estimation functionality in a Next.js application. By using the gasEstimate method, developers can provide users with estimated gas fees for different transaction types, allowing for better transparency and user experience.

The app shows how to estimate gas for both swap transactions and bridge transactions to Layer 2, and how to display these estimates in a user-friendly way. This functionality is particularly useful for applications that need to provide users with cost estimates before they commit to transactions on the blockchain.

Gas Estimation with Checkout SDK

Gas Estimation with Checkout SDK and Next.js

Features Overview​

SDK Integration Details​

Gas Estimation for Transactions​

Running the App​

Prerequisites​

Setup and Run​

Summary​