XION
DiscordGithub
  • Welcome to XION
  • XION'S Core
    • Concepts
      • Generalized Chain Abstraction
      • Intro to Account Abstraction
      • XION's Meta Accounts
      • Meta Accounts Design
      • Architecture & Tech Glossary
      • Use Cases
  • developers
    • Xion Quick Start
      • Zero to Dapp in 5 Minutes
        • Launch a User Map Dapp on XION in 5 Minutes
        • React Native Mobile Dapp on XION in 5 Minutes
    • Mobile dapp Development on XION
      • Set up your XION Mobile Development Environment
      • Create Mobile Dapp and Integrate Meta Account Authentication
    • Getting Started (Advanced)
      • Set Up Local Environment
        • Setting up your Local Smart Contract Development Environment for XION
          • Setting up your XION Smart Contract Development Environment on Windows (WSL2 + Ubuntu)
        • Set Up an Integrated Development Environment (IDE)
        • Interacting with Xion Chain using Xion Daemon
      • Your First Contract
        • Deploying Your First Smart Contract on XION
      • Gasless UX & Permission Grants
        • Enabling Gasless Transactions with Treasury Contracts
      • Dapp Development
        • Account Abstraction with Gasless Transactions
        • Interact with XION via your Backend Service
    • Re-using Existing Contracts
      • Deployed Contracts on XION
      • Non-Fungible Tokens (NFTs)
      • Fungible Tokens
      • Marketplace
      • Multisig
      • Proxy Contracts
      • Membership Management
      • Governance
      • Valuts
      • SCV Audited Contracts
    • Web3 for Web2 Developers
      • Web2 vs Web3 App Architecture: A Comparison
      • Misconceptions and Misapplied Web2 Patterns
      • Recommended Architecture for Dapps on XION
    • Building for Mainnet
      • Xion Testnet: Your Development Playground
      • Building with Audited & Battle-Tested Contracts
      • Community Engagement: Building Support for Your dApp
      • Deploying to Xion Mainnet
        • Smart Contract Audits: Process, Costs & Support
        • Governance Process to Deploying Smart Contracts to Mainnet
    • Learn & Build
      • Token Factory
        • Creating, Minting, and Interacting with a Token Factory Token
        • Building a React dApp to Interact with Token Factory Tokens
        • Integrating a Token Factory Token in a Smart Contract
      • Websockets
        • WebSockets with Xion: Real-Time Communication
      • Mobile Development
        • Building a React Native Mobile App with Abstraxion (Xion.js)
      • Oracles
        • Creating a Smart Contract with Pyth Oracle Integration
      • Indexers: Optimized Data Retrieval
        • SubQuery
      • Use Cases
        • Building a Per-User Data Storage Dapp
    • Reference and Resources
      • Requesting XION Testnet Tokens
      • Public Endpoints & Resources
      • Block Explorers
      • Governance
        • Deploying Smart Contracts to Mainnet
      • Developer Tools: Abstract
      • IBC Denoms on XION Networks
      • Frequently Asked Questions
      • XION Token Contract Addresses on EVM Chains
  • Nodes & Validators
    • Run a Node
      • System Specifications
      • Build the Xion Daemon
      • Download the Xion Daemon
      • Configure the Xion Daemon
        • app.toml
        • client.toml
        • config.toml
      • Join the XION Network
        • xion-testnet-1
      • Confirm node is running
    • Become a Validator
      • Initial Setup
      • Obtain a XION Wallet Address
      • Obtain Funds
        • Testnet
      • Create Validator
    • IBC Relayers and Tokens
  • Others
    • Resources
Powered by GitBook
On this page
  • What is the User Map dapp?
  • Prerequisites
  • Create Instance of User Map and Treasury Contracts
  • Set Up the Frontend
  • Set up Environment Variables

Was this helpful?

Edit on GitHub
  1. developers
  2. Xion Quick Start
  3. Zero to Dapp in 5 Minutes

Launch a User Map Dapp on XION in 5 Minutes

PreviousZero to Dapp in 5 MinutesNextReact Native Mobile Dapp on XION in 5 Minutes

Last updated 10 days ago

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.

You should have your demo dapp up and running in under 5 minutes. Once you're familiar with the workflow, you can move on to the advanced .

What is the User Map dapp?

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)

Prerequisites

Before you begin, make sure you have the following installed:

Create Instance of User Map and Treasury Contracts

  1. 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

NEXT_PUBLIC_CONTRACT_ADDRESS=...
NEXT_PUBLIC_TREASURY_ADDRESS=...
NEXT_PUBLIC_RPC_URL=...
NEXT_PUBLIC_REST_URL=...

Set Up the Frontend

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:

git clone https://github.com/burnt-labs/xion-user-map-json-store-frontend
cd xion-user-map-json-store-frontend

Set up Environment Variables

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:

npm install
npm run dev

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 .

github.com/burnt-labs/contracts/tree/main/contracts/user_map
Node.js
Git
Docker
xiond
Dev Portal
quick launch frontend solution
https://quickstart.dev.testnet.burnt.com
Full Guide – Building a Per-User Data Storage dApp
environment file
quick launch frontend solution
frontend
User Map guide