Token Minting Template

Watch on YouTube
Live Example

Create Aptos Dapp Token Minting Dapp Template

The Token minting dapp template provides an end-to-end Fungible Asset minting dapp.

With this dapp, you can:

  1. Create a Fungible Asset on Aptos.
  2. Modify a pre-made UI to build a Token minting dapp users can quickly adjust.
  3. Learn how to write a Move contract and front end connected to that contract.

Read more about the Aptos Fungible Asset Standard

The Token minting dapp template provides 3 pages:

  1. Public Mint Fungible Asset Page - A page for the public to mint Fungible Assets.
  2. Create Fungible Asset page - A page for creating new asset. This page is not accessible on production.
  3. My Fungible Assets page - A page to view all the assets created under the current Move module (smart contract). This page is not accessible on production.

Quick Start

Generate the Token minting dapp template

On your terminal, navigate to the directory you want to work in and run:

Follow the CLI prompts.

If you are using the Testnet network, you will need to fund a module publisher account manually through the faucet web view on https://aptos.dev/en/network/faucet and then fill out the MODULE_PUBLISHER_ACCOUNT_PRIVATE_KEY and MODULE_PUBLISHER_ACCOUNT_ADDRESS in your project .env file.

Publish the Move Contract

In the .env file, set VITE_FA_CREATOR_ADDRESS to be the same as your account address.

This determines which account is allowed to create assets using the dapp.

If you haven't set up an account, you can create one with an Aptos wallet like Petra. Make sure to set up the account on the same network as your template project.

For example:

On the project root folder, run the below command to publish the contract.

You will have to confirm the gas fee in the console.

This command will:

  1. Publish the contract to chain.
  2. Setting the VITE_MODULE_ADDRESS in the .env file to set the contract object address.

Publishing the asset on-chain

After you have published the Move contract to chain

Run the app and open the preview.

In the top-right corner, click "Connect a Wallet".

Use the same account that you set in .env for the VITE_FA_CREATOR_ADDRESS. Or, if you use a different account, set the VITE_FA_CREATOR_ADDRESS to the account you sign in with and republish the contract.

Do not use the "Google Account" option if it is available. he account generated from that will not work as the VITE_COLLECTION_CREATOR_ADDRESS. Use a wallet created with an Aptos wallet provider

such as Petra

.

In the app, go to the "Create Asset" page (if not on that page already)

Upload a token image.

Choose the required fields.

  1. Choose the asset name.
  2. Choose the asset symbol.
  3. Choose the max supply of the asset.
  4. Choose the max amount an address can mint.
  5. Choose the asset decimals.
  6. Enter the project url

The rest are optional fields to help customize your mint.

  • (Optional) Mint fee per asset - this defines the cost public users pay to mint this asset.
  • (Optional) Mint for myself - this defines how many assets you would want to mint for yourself once the asset is created.

Click "Create Asset"

When adding the image, it submits the file to Irys, a decentralized asset server, that will store your files.

During the upload process, you will need to sign a message to approve file uploading to Irys. Additionally, you may need to fund an Irys node. Read more about the process here.

Once you approve the transaction, you have successfully created a fungible asset on Aptos!

Customizing the Front-End

Most data on the front end is customizable in frontend/config.ts.

Set the fa_address config

In order to add a fungible asset to the public mint page, set fa_address in .env with the asset address.

You can use an assset that you have minted using the tool by going to the "My Assets" page and copying its address.

Modify static content

Once the fungible asset address has been configured, view the frontend/config.ts file to change any static content on the page. You can also modify the code itself as you wish.

How to add static images?

The public mint page uses static images in the UI. Initially, the images are imported from the frontend/assets/placeholder folder. To use custom images, you should add the image you want to use to the frontend/assets folder (under any new folder you want to create) and then import the image as seen below in the frontend/config.ts file and add it under the section you want to have it.

My Assets Page

This page displays all the assets that have been created under the current Move module. You can click on the asset address, which redirects you to the Aptos Explorer site where you can see your asset.

When you are ready to use an asset on the Public Mint Page, you need to copy the asset address and assign it to the fa_address on the frontend/config.ts file.

Some stats are available on this page, like the max supply of the asset and the number of asset minted.

How can I take it from here?

Remember, one of the goals of this template is to educate and provide a real life example on how a Fungible Asset minting dapp can be on Aptos. We provide some basic concepts and features but there is much more you can do for your dapp.

Some ideas you can try are:

  1. Allowlist mint stages
  2. Custom flows after someone mints an asset (or even token gated experiences)
  3. Check out our TS SDK to see what other API queries you can use to support more features and fetch more data.

Ready for Mainnet

If you started your dapp on testnet, and you are happy with your asset testing, you will want to get the asset on mainnet.

Creating a asset on mainnet is the same flow as creating on testnet, but we need to change some configuration.

Note: Make sure you have created an existing account on the Aptos mainnet

  1. Change the VITE_APP_NETWORK value to mainnet on the .env file
  2. Update the VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS to be the existing account address on the .env file
  3. Update the VITE_MODULE_PUBLISHER_PRIVATE_KEY to be the existing account private key on the .env file
  4. Create or get the account you want to create a asset with, open the .env file and assign the account address as the VITE_FA_CREATOR_ADDRESS value.
  5. Finally, run npm run move:publish to publish your move module on Aptos mainnet.
  6. The next step would be to create an asset using the account you set as the VITE_FA_CREATOR_ADDRESS. Simply follow Create a Fungible Asset Page

API Key

  1. If you are using an API Key, make sure to update the VITE_APTOS_API_KEY with your MAINNET API Key.
  2. If you are not using an API Key, make sure to create one and update the VITE_APTOS_API_KEY with your API Key.

Deploy to a live server

create-aptos-dapp provides an npm command to easily deploy the static site to Vercel.

At the root of the folder, simply run

Then, follow the prompts. Please refer to Vercel docs to learn more about the Vercel CLI

If you are looking for different services to deploy the static site to, create-aptos-dapp utilizes Vite as the development tool, so you can follow the Vite deployment guide. In a nutshell, you would need to:

  1. Run npm run build to build a static site
  2. Run npm run preview to see how your dapp would look like on a live server
  3. Next, all you need is to deploy your static site to a live server, there are some options for you to choose from and can follow this guide on how to use each

Update the look and feel of the dapp

This template is styled with Tailwind CSS and shadcn/ui. These libraries provide the app with a neutral and clean look and feel while leaving it open to a lot of customization so that you can make the app truly yours.

Please refer to the following questions in the FAQ to learn about how to customize the UI of your dapp: