Create Aptos Dapp Fungible Asset Template

The Fungible Asset template provides an end-to-end Fungible Asset minting dapp. With this dapp, you can learn how Fungible Assets work on Aptos, how to write a smart contract and how to write a front end connected to the contract. In addition, it offers a beautiful pre-made UI for a Fungible Asset minting dapp users can quickly adjust and deploy into a live server.

Read more about the Aptos Fungible Asset Standard

The Fungible Asset 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.

Public Mint Page

First run the dapp locally with npm run dev. You would see the public mint page with some data placeholders for content and images. Some of the content can be configured in the frontend/config.ts file and some will be pulled from an Aptos full node once you configure your collection.

npm run dev

Configure an asset address

For the public mint page to fetch the asset, you will need to configure the asset address. First, assign the asset_id variable in the frontend/config.ts file with the asset address. If you have created the asset with the tool, you should be able to find it on the My Assets Page.

Modify static content

Once the 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.

import MyImage from "@/assets/<my-new-folder>/my-image.png";

For example, to update an image in the “Our Team” section - add the image under the frontend/assets/<my-new-folder> folder, import the image as import MyImage from "@/assets/<my-new-folder>/my-image.png"; and change the img property in the ourTeam section with MyImage.

Create a Fungible Asset page

When first running npm run dev, you will see the Public Mint page. To create an asset, click the “Create Asset” button, which will navigate you to create a new fungible asset.

npm run dev

Publish the Move module

To create a new asset, we will need to publish the Move module on-chain.

The smart contract is built in a way that only the admin or a specific defined account can create a new asset.

Create or find the account you want to create an asset with. If you haven’t created an account - simply use a Wallet, for example Petra, to quickly create an account.

1. Run npm run move:init - a command to initialize an account to publish the Move contract. When you run that command it will generate a new .aptos/config.yaml file that holds a profile with the account private key, account address, and network configuration.

npm run move:init

2. To set who can create a new asset, edit the .env file and update VITE_FA_CREATOR_ADDRESS to be the address of the account allowed to create assets.

// .env file
VITE_FA_CREATOR_ADDRESS=<create-asset-account-address>

3. Run npm run move:publish to publish the contract. When you run that command it will save the module address to VITE_MODULE_ADDRESS in the .env file.

npm run move:publish

Upgrade the Move module

When you make changes to your Move module, there are 2 kinds of changes, compatible and incompatible. You can learn upgrade policy in details on docs. When you make compatible changes, you can run npm run move:upgrade to upgrade previous published module. When you make incompatible changes, you can run npm run move:publish to publish to a new address.

Connect a wallet

Once you have published the move module, you will need to connect your wallet to submit transactions. Make sure your Wallet is set to the same account you used in the previous section to publish your Move module. Also ensure that your wallet is set to the same network you selected to work with (e.g. testnet).

Now, you can connect your wallet by clicking on the “Connect Wallet” button at the top right, and start with creating your asset.

Upload an Asset File

To create an asset you will need an image file.

Image file can be any of the type - "png", "jpg", "jpeg", "gif".

Once you are ready to upload the asset image file, you can choose the file you want to upload through the file input UI.

When adding the file, it submits it 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.

Fill out asset details

Next, you want to fill out some asset details:

• Asset Name - which defines asset name
• Asset Symbol - which defines the asset symbol
• Max Supply - which defines the max supply of the asset
• Mint fee per fungible asset - which defines the mint fee cost per asset
• Max mint per account - which defines the maximum amount of assets an account can mint
• Decimal - which defines the number of decimals of the asset
• Project URL - the project URL
• (Optional) Mint for myself - which defines how many assets you would want to mint for yourself once the asset is created

Submit an asset creation transaction

Once everything has filled out, you should be able to click the “Create Asset” button and submit a asset creation transaction. The only next step would be to approve the transaction on the wallet.

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 asset_id 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.

1. Change the VITE_APP_NETWORK value to mainnet in the .env file
2. Run npm run move:init to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open .aptos/config.yaml file and see that you have a profile under the {PROJECT_NAME}-mainnet name (where PROJECT_NAME is specified in your .env file). In addition, open the .env file and check the VITE_MODULE_ADDRESS value is the same as the new profile’s account account address.
6. 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.
7. Finally, run npm run move:publish to publish your move module on Aptos mainnet.
8. The next step would be to create an asset using this account. Simply follow Create a Fungible Asset Page

Deploy to a live server

create-aptos-dapp utilizes Vite as the development tool. To deploy a Vite static site to a live server, you can simply follow 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:

• What is Tailwind CSS?
• What is shadcn/ui?
• How to modify the theme?
• How to add components?
• How to add colors?
• How to add dark mode?