Frontend Integration

Frontend Setup Guide

Download and configure the open-source SUI Token Creator frontend to integrate with your API key.

What You'll Build

A professional, production-ready Next.js frontend that allows users to create native SUI tokens using your API key. The frontend includes wallet integration, IPFS image upload, and automatic fee handling.

Open Source

Free to use and customize

Production Ready

Deploy to Vercel in minutes

Fully Customizable

White-label and rebrand

Prerequisites

Node.js 18.x or higher

SUILab API Key

Pinata Cloud Account

SUI Wallet Extension

Installation Steps

Clone the Repository

Download the frontend code from GitHub:

git clone https://github.com/Criptomaniaapp/sui-tokencreator.git
cd sui-tokencreator

Install Dependencies

Install all required packages:

npm install

Configure Environment Variables

Create your environment configuration file:

cp .env.example .env

Then edit .env with your configuration:

# API Configuration
API_ENDPOINT=https://apikey.suilab.fun/api/publish/token
API_KEY=YOUR_API_KEY_HERE

# Developer Configuration
DEV_WALLET=0xYOUR_WALLET_ADDRESS_HERE
DEV_FEE=3
PLATFORM_FEE=2
NETWORK_FEE=0.05

# SUI Network
NEXT_PUBLIC_SUI_NETWORK=mainnet

# Pinata Cloud
PINATA_API_KEY=YOUR_PINATA_API_KEY
PINATA_SECRET_API_KEY=YOUR_PINATA_SECRET_KEY
NEXT_PUBLIC_GATEWAY_URL=https://gateway.pinata.cloud/ipfs/

Run Development Server

Start the local development server:

npm run dev

Open http://localhost:3000 in your browser.

Configuration Details

API Configuration

API_ENDPOINT

The SUILab API endpoint: https://apikey.suilab.fun/api/publish/token

API_KEY

Your API key obtained from the request form

Developer Configuration

DEV_WALLET

Your SUI wallet address where you'll receive developer fees

DEV_FEE

Your fee in SUI per token creation (e.g., 3 = 3 SUI). This is YOUR revenue.

Pinata Cloud Setup

Pinata is used for IPFS image storage. Follow these steps:

1.Create account at pinata.cloud
2.Navigate to API Keys in dashboard
3.Create new key with pinFileToIPFS permission
4.Copy API Key and Secret to your .env file

Deploy to Production

Deploy to Vercel (Recommended)

Vercel is the easiest way to deploy Next.js applications:

Option 1: Via Dashboard

1.Push your code to GitHub
2.Go to vercel.com and import your repository
3.Add all environment variables from your .env file
4.Click Deploy and wait 2-3 minutes

Option 2: Via CLI

npm install -g vercel
vercel login
vercel

Post-Deployment Checklist

✓ Test wallet connection
✓ Test image upload to IPFS
✓ Create a test token with small amount
✓ Verify fees display correctly
✓ Confirm developer fee arrives in your wallet

Understanding the Fee Structure

When users create tokens through your frontend, they pay three types of fees:

Platform Fee: 2 SUI

Goes to SUILab (automatically charged by API)

Developer Fee: Customizable

Goes to YOUR wallet (set in DEV_FEE)

Network Fee: ~0.05 SUI

Goes to SUI validators (variable)

Additional Resources