Account Abstraction with Gasless Transactions
In this guide, we will walk through building a basic dApp using the Abstraxion library, demonstrating how to create an Abstraxion account which can be done via a social account like Google, browser wallets (Keplr, Metamask, OKX etc.), email address, passkey and other authentication options. We will also implement a gasless transaction experience for users by leveraging XION's fee grants through a Treasury contract.
To better understand Account Abstraction you can visit the Introduction to Account Abstraction page.
A fully functional demo of this dApp is also available in the Xion.js repository.
Requirements
Before getting started, ensure you have the following installed:
Node.js (LTS version recommended) – Required for running the development environment and installing dependencies.
Setting up the Project
In this example, we will use Next.js to scaffold the project and set up a development environment with TypeScript, ESLint and Tailwind CSS.
Step 1: Create a New Next.js Project
Run the following command in your terminal to generate a Next.js project with the required settings:
Step 2: Navigate to the Project Directory
Step 3: Install the Abstraxion Package
Add the Abstraxion package to the project:
Step 4: Start the Development Server
Run the following command to start the development server:
Step 5: Open the Project in a Browser
Once the server is running, open http://localhost:3000 in a web browser. You should see a Next.js welcome page with an animated React logo.
NOTE:
A mismatch in package versions can lead to build failures, resulting in an error similar to the following:
Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
To resolve this issue, update your next.config.js
file located at the root of your project with the configuration provided in this file: https://gist.githubusercontent.com/probablyangg/4c520e376cdddf6991951e233d1f9bb6/raw/fa0ecaf1b2e52876610be9d36a8aeaaef53f0dd5/next.config.js
Deploying a Contract On-Chain
We need to deploy a smart contract on-chain for our dApp to interact with, so we'll deploy a basic Counter contract, which will allow you to:
Set an initial counter value
Increment or reset the counter
Query the current counter value
Follow the steps in the following guide to compile, deploy, and instantiate the contract on-chain. Once deployed, this contract will be referenced in the Treasury contract and the code updates that follow.
Deploying a Treasury Contract for Gasless Transactions
Before integrating the Abstraxion SDK into the application, we first need to deploy a Treasury Contract. This contract facilitates gasless transactions for your smart contract by handling fee grants on behalf of users.
Steps to Deploy a Treasury Contract
Login to the XION Developer Portal.
Click on "New Treasury" to create a new treasury contract.
Select the appropriate configuration based on your use case. The following "Fee Grant" and "Grant Config" images gives a recommended configuration that works for most scenarios:
Fee Grant
Enter a "Description" in the respective field. This will reflect the intended purpose of the request. This description will be displayed to users when they click "Allow" after connecting their account.
In the "Allowance Type" field, enter
"/cosmwasm.feegrant.v1beta1.BasicAllowance"
.In the "Spend Limit" field, enter
1000uxion
.Click the "Save" button to apply the configuration.
Grant Config
For the "Type URL" field, select
"/cosmwasm.wasm.v1.MsgExecuteContract"
.Enter a "Description" in the respective field. This will reflect the intended purpose of the request. This description will be displayed to users when they click "Allow" after connecting their account.
In the "Authorization Type" field, select
"/cosmwasm.wasm.v1.ContractExecutionAuthorization"
.Enter the contract address in the "Contract Address" field — this should be the NFT smart contract created above.
You must select at least one of the following::
"Max Call" – Limits the number of times a user can execute a transaction under this fee grant.
"Max Funds" – Specifies the maximum amount of funds allocated for covering transaction fees.
"Both" – Allows you to set both options.
Click the "Add Contract Grant" button to apply the configuration.
Then click the "Save" button which generates the "Treasury Instance Preview"
Treasury Instance Preview
Once the preview is to your liking click the "Create" button to create the Treasury contract.
Learn more about Treasury Contracts here.
Integrating the Abstraxion Library
To set up the Abstraxion Library, replace the contents of src/app/layout.tsx
with the following code:
Update "YOUR_TREASURY_CONTRACT_ADDRESS_HERE" with the the Treasury Contract Address you created above to enable gasless transactions for users.
"use client";
This directive is required to ensure that the file is treated as a client component in Next.js.
Omitting this will result in an error.
AbstraxionProvider
This component wraps the application and provides context for Abstraxion hooks, such as:
useAbstraxionAccount
useAbstraxionSigningClient
treasuryConfig
Set the Treasury Contract Address to enable gasless transactions for users.
Adding Hooks to the Homepage
Replace the contents of src/app/page.tsx
with the following code:
What does this do?
Displays a "CONNECT" button
Clicking the button initiates a Meta Account login.
If the user is connected, it shows "VIEW ACCOUNT" instead.
Shows the user's blockchain address when connected.
Handles connection state with
useAbstraxionAccount()
:bech32Address
: The user's address.isConnected
: Whether the user is connected.isConnecting
: Connection state status.
Now, click CONNECT and try it out!
Note: If the treasury contract address is changed within the dApp, users who are already logged in must log out and log back in. This ensures that their account goes through the approval process again, allowing the fee grants to function properly.
Querying the Contract
The contract provides a method to query the current count
value. Let's fetch this value and display it in the dApp.
Replace the contents of src/app/page.tsx
with the following code:
Update "YOUR_COUNTER_CONTRACT_ADDRESS_HERE" with the the Counter Contract Address you created above.
Submitting Transactions
Querying the blockchain is useful, but to fully interact with it, we need a way to modify the chain state. This section will implement transaction submission using the Abstraxion SDK.
Replace the contents of src/app/page.tsx
with the following code:
Update "YOUR_COUNTER_CONTRACT_ADDRESS_HERE" with the the NFT Contract Address you created above.
What does this do?
Implements transaction submission
The "INCREMENT" button sends a transaction using Abstraxion Signing Client.
Manages user connection state
Uses
useAbstraxionAccount()
to check if the user is connected.If the user isn’t connected, the "CONNECT" button appears instead.
Handles transaction execution
Defines a
increment()
function to interact with a CosmWasm smart contract.Sends an ExecuteContract transaction using
client.execute()
.
Displays transaction results
After submitting a transaction, it shows the Transaction Hash and Block Height.
Provides a link to view the transaction in XION’s Block Explorer.
Quick Note on Fee Configuration
In the increment
function, the .execute()
method is called as follows:
The fourth parameter in the function call represents the fee configuration. Instead of manually specifying the gas and fee amount, we use "auto"
, allowing the SDK to automatically handle fee estimation:
Why Use "auto"
?
"auto"
?Simplifies fee management by automatically estimating optimal fees.
Reduces errors related to underestimating or overestimating gas.
If everything is configured correctly, you should see the transaction results displayed as shown in the previous section.
These core components form the foundation for building and deploying a successful dApp! If you have any questions or need support, feel free to reach out to us on Discord or GitHub.
Last updated
Was this helpful?