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 Mobile Dapp
  • Set up Environment Variables

Was this helpful?

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

React Native Mobile Dapp on XION in 5 Minutes

PreviousLaunch a User Map Dapp on XION in 5 MinutesNextMobile dapp Development on XION

Last updated 10 days ago

Was this helpful?

Building a Mobile Dapp on XION typically involves three main components:

  • Smart contract – Contains the core business logic of your Dapp.

  • 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 experience through our OAuth2-style Abstraxion solution.

  • Mobile 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 that handles the creation of both the User Map and Treasury contracts with the Treasury contract being fully configured. We've also created a fully functional for interacting with the User Map contract.

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, ensure you have the following installed:

  • Android Emulator, iOS Simulator or a physical device for testing

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 Mobile dapp 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

These 4 environment variables will be generated which will you will need to add to the Mobile Dapp .env.local environment file:

EXPO_PUBLIC_USER_MAP_CONTRACT_ADDRESS="..."
EXPO_PUBLIC_TREASURY_CONTRACT_ADDRESS="..."
EXPO_PUBLIC_RPC_ENDPOINT="..."
EXPO_PUBLIC_REST_ENDPOINT="..."

Set up the Mobile Dapp

The Mobile Dapp will allow users to log in 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 mobile dapp in either the iOS Simulator or Android Emulator, execute the following commands in your terminal:

git clone https://github.com/burnt-labs/abstraxion-expo-demo.git
cd abstraxion-expo-demo

Set up Environment Variables

In the Quick Launch Frontend click the "Mobile" 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 the dependencies by executing the following:

npm install

To build and run the dapp, ensure your emulator, simulator, or physical device is running. Then, use one of the following commands based on your target platform to launch the Dapp:

npx expo run:android
npx expo run:ios

You should see something like the following:

Once logged in you should see something like the following:

You can find the source code here: .

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 Docker and xiond, 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 Mobile dapp.

Go to and log in using your Meta Account

github.com/burnt-labs/contracts/tree/main/contracts/user_map
Node.js (LTS version recommended) and NPM
Dev Portal
quick launch frontend solution
https://quickstart.dev.testnet.burnt.com
quick launch frontend solution
React Native Mobile Dapp