Building a React dApp to Interact with Token Factory Tokens
Last updated
Was this helpful?
This guide walks through creating a React-based decentralized application (dApp) that interacts with a token created using the XION Token Factory. This dApp will:
Authenticate users with a Meta Account that would have received a token created via the Token Factory. See the following on how to create your token.
Display the token balance for the logged-in user
Enable the logged in user to send tokens to another address
Setting Up the Project
Initialize a New Next.js Project
Run the following command to create a new Next.js project configured with TypeScript, ESLint, and Tailwind CSS:
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 by executing 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 this particular use case:
Fee Grant
Enter a "Description" in the description field. This will reflect the intended purpose of the request.
In the "Allowance Type" field, enter "/cosmwasm.feegrant.v1beta1.BasicAllowance".
You can apply a "Spend Limit" if you wish, which will be applied to each user .
Click the "Save" button to apply the configuration.
Grant Config
For this example the "Type URL" would be "/cosmos.bank.v1beta1.MsgSend" as this would allow for the dapp the send tokens on behalf of the user.
Enter a "Description" in the description 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 "/cosmos.authz.v1beta1.GenericAuthorization".
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.
Configuring Abstraxion for Authentication
To enable account abstraction and gasless transactions, integrate the Abstraxion provider into your application.
Configure the Abstraxion Provider
Replace the contents of src/app/layout.tsx with the following:
"use client";
import { Inter } from 'next/font/google';
import './globals.css';
import { AbstraxionProvider } from "@burnt-labs/abstraxion";
import "@burnt-labs/abstraxion/dist/index.css";
import "@burnt-labs/ui/dist/index.css";
const inter = Inter({ subsets: ['latin'] });
const treasuryConfig = {
treasury: "YOUR_TREASURY_CONTRACT_ADDRESS_HERE",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<AbstraxionProvider config={treasuryConfig}>
{children}
</AbstraxionProvider>
</body>
</html>
);
}
Replace YOUR_TREASURY_CONTRACT_ADDRESS_HERE with the actual treasury contract address.
Bringing it Together
Replace the contents of src/app/page.tsx with the following code:
Replace TOKEN_DENOM with the actual Token Factory token denomination. Also, replace DENOM_DISPLAY_NAME with the name of the token you want to display next to the balance.
The sections below will provide a walkthrough of the code above.
Displays transaction details after sending tokens.
Provides a block explorer link for verification.
A Quick Walkthrough
The following steps outline how to use the dApp.
Log into the dapp
Get Token Balance
After logging in, you will see your Meta Account address. You need to send some of your custom Token Factory tokens to that address.
Once the tokens have been sent, click the Get Token Balance button to retrieve the updated balance.
Sending Tokens
To send tokens to another address:
Enter a valid address in the Recipient Address text box.
Enter the amount to send in the Amount text box.
Click the Send Tokens button.
After submitting the transaction, you will see the transaction hash, the block height at which the transaction was executed, and a URL to view the transaction details in the block explorer.
You now have a functional React dApp that:
Authenticates users via Meta Accounts
Fetches and displays Token Factory token balance
Enables users to send tokens to another address
Open in your browser to view the default Next.js page.
Login to the .
Learn more about Treasury Contracts .
The first step after accessing the dApp at is to log in by clicking the CONNECT button.