Unifi Apps Starter
Starting Mini App development can be challenging. The Unifi Apps Starter provides a solid foundation to kickstart your project.
This template includes the essential features needed for building a Mini App, allowing you to customize and build your own application efficiently. This guide covers:
Getting Started (Environment setup, Source code, Deployment)
Key features (Wallet connection, Payments, LIFF integration)
What is the Unifi Apps Starter?
The Unifi Apps Starter is a template project designed to help you easily integrate the dapp-portal-sdk. While you can always start your Mini App project from scratch, using this starter allows for a faster and smoother development experience.
It also follows a predefined design guide, which can help maintain consistency in UI/UX.
The project is built with Next.js. Even if you're planning to use a different framework, this repository can still serve as a useful reference for integrating the dapp-portal-sdk.
How to get started with the Unifi Apps Starter Environment
The Unifi Apps Starter requires Node.js to run. It uses pnpm as the package manager (compatible with npm).
Recommended Node.js version: >= 20.0.0
The version specified in
.nvmrc: v20.18.0Older versions may work partially, but for compatibility with Netlify deployment tools, Node.js >= 20.0.0 is required.
*Tip: Use nvm to manage Node versions easily.
Downloading and running the source code
You can clone or fork the repository from GitHub: https://github.com/techreadiness/unifi-apps-starter
To run the project locally, follow the instructions in the repository’s README.md.
Deploying to a server
Once you’ve run the Unifi Apps Starter locally and verified that it's working, you can deploy it to a live server using Netlify:
A netlify account is required
Netlify (opens new window)is a hosting service for static sites, open an account before deploying to Netlify. The content on this page can be run on Netlify's free plan.
The official published version is available at https://unifi-apps-starter.netlify.app.
Key features of the Unifi Apps starter
The Unifi Apps Starter comes with several basic features implemented out of the box.
These demonstrate how to use core functionalities from dapp-portal-sdk, but should be treated as reference code, not a final solution.
Connect/Disconnect wallet
Connecting and disconnecting a wallet is the most fundamental feature when using the SDK.
In the code, you’ll find how to use walletProvider and its methods.
reference code functions related to wallet connect and disconnect
Wallet Session Persistence
You can first check whether a login session exists by calling
walletProvider.request({ method: 'kaia_accounts' }), so that the wallet session remains active after a user logs in once for convenience.
reference code maintaining session using kaia_accounts
Crypto/Fiat payment
The template shows how to handle both crypto and fiat payments using paymentProvider.
You can see examples of:
Creating paymentId
Checking the payment status
Finalizing the payment
reference code
KAIA/STRIPE ratio
To support payments, your Mini App needs to apply proper price conversion logic between crypto (KAIA) and fiat (STRIPE).
The starter includes a usd-to-kaia function as a reference.
reference code
usd to kaia conversion
KAIA/USDT balance
The template shows how to get balance of both kaia and erc20 based token. reference code kaia balance erc20token balance
Smart Contract based USDT transfer
The USDT transfer via smart contract is implemented.
reference code
transfer parameter USDT smart contract
LIFF integration
If you're planning to integrate with LINE Front-end Framework (LIFF), this project includes useful examples such as:
When to initialize LIFF
How to use methods like
shareTargetPicker
reference code
Last updated