In this guide, we will walk through building a basic dApp using the , 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 page.
A fully functional demo of this dApp is also available in the repository.
Requirements
Before getting started, ensure you have the following installed:
(LTS version recommended) – Required for running the development environment and installing dependencies.
Setting up the Project
In this example, we will use 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:
Run the following command to start the development server:
npm run dev
Step 5: Open the Project in a Browser
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).
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
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
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.
Integrating the Abstraxion Library
To set up the Abstraxion Library, replace the contents of src/app/layout.tsx with the following code:
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:
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"?
Simplifies fee management by automatically estimating optimal fees.
Reduces errors related to underestimating or overestimating gas.
By default, the gas-adjustment applied to the auto value is typically 1.3. If transactions are still failing due to low fees, it may indicate that the gas adjustment, acting as a multiplier for the automatically calculated fee, is too low. In such cases, you may need to increase this value for specific transactions.
To update the gas adjustment in the execute call, replace auto with your desired adjustment value. The transaction will still use automatic gas estimation but will apply the specified gas adjustment instead of the default.
If everything is configured correctly, you should see the transaction results displayed as shown in the previous section.
Once the server is running, open in a web browser. You should see a Next.js welcome page with an animated React logo.
To resolve this issue, update your next.config.js file located at the root of your project with the configuration provided in this file:
Follow the steps in the following 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.
Login to the .
Learn more about Treasury Contracts .
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 .