Launch a User Map Dapp on XION in 5 Minutes
Last updated
Was this helpful?
Last updated
Was this helpful?
Building a dapp on XION typically involves three main components:
A smart contract – Contains the core business logic of your dapp.
A Treasury contract – Enables gasless transactions using Fee Grants, making onboarding smoother for users. It also handles Authorization Grants, which allow your frontend to execute transactions on behalf of the user, enabling a more traditional application-like experience through our OAuth2-style Abstraxion solution.
A frontend – This is your dapp’s interface, used to display data and trigger transactions via the smart contract.
As a beginner to XION development, getting a fully functional dapp up and running should be simple and shouldn’t require any complex setup. With this in mind, we’ve created a for the User Map dapp that handles the creation of both the User Map and Treasury contracts. Outside of this we have built a solution for interacting with the User Map contract.
The User Map contract is a lightweight and beginner friendly smart contract designed to help developers, especially those coming from traditional web or application development, understand how to manage per-user data in a decentralized environment.
Think of it like a basic key-value store:
Key: User's wallet address
Value: A JSON object (e.g., user profile, preferences, settings)
Before you begin, make sure you have the following installed:
Click the Launch User Map & Fund Treasury button
Behind the scenes, this:
Instantiates your User Map contract
Deploys a Treasury contract with a configured Fee Grant to enable gasless transactions and also Authorization Grants for users to give the frontend approval to interact with the User Map contract on their behalf
Funds the Treasury contract to pay transaction fees for users via the Fee Grant
The frontend allows users to log into your dapp using their Meta Account via multiple authenticators (Email, Social Login, Wallets, Passkeys). Once logged in, users can query contract data and execute transactions to update their User Map record, which is linked to their Meta Account address.
To run the frontend locally, execute the following commands in your terminal:
In the Quick Launch Frontend click the "webapp" template:
There are two options available for copying the variables into your project:
Option 1: One-liner (Recommended): Run the bash command provided in your terminal from within your project directory to automatically download and save the environment file into your project with the variables set to the correct values.
Option 2: Manual Copy & Paste: Copy and paste the actual variables into your .env.local file in the root of your project:
Install dependencies and start the local dev server:
Visit http://localhost:3000 in your browser to open the app. You should see the following:
Once logged in, you will be presented with an interface where you can enter a JSON object. When you click "Submit JSON," a transaction will be executed to update the User Map with the provided JSON data. You can also select from the other menu options that allow you to retrieve data from the contract.
You can find the source code here: .
(v18+)
Compiling and instantiating smart contracts can feel like huge tasks, especially for new developers. You typically need to set up your development environment with tools like and , and go through the full process of compiling, deploying, and instantiating your contracts manually. On top of that, creating and configuring a Treasury contract via the can be overwhelming if you're just getting started.
To make this much easier, we’ve created a for this User Map dapp that takes care of all the heavy lifting, so you can skip the setup pain and focus on experimenting with a real, working dapp.
Go to and log in using your Meta Account
These 4 environment variables will be generated which will you will need to add to the frontend project .env.local :
For a detailed breakdown of the contract’s design, execution messages, and frontend setup see .
