Skip to main content

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.

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 theimgproperty in the ourTeam section with MyImage.

Create a Fungible Asset page​

When you 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.

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 CLI .aptos/config.yaml file that holds a profile with the account private key, account address, and network configuration.
    • Configure your development environment and add a VITE_MODULE_ADDRESS variable into the .env file with the account address from the previous step.

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

  3. Run npm run move:publish

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 of 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 the 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 a create asset transaction​

Once everything has filled out, you should be able to click the “Create Asset” button and submit a create asset 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
    1. 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.
    2. 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.
  3. Check: open .aptos/config.yaml file and see that you have a profile under the mainnet name. In addition, open the .env file and check the VITE_MODULE_ADDRESS value is the same as the mainnet profile account account address.
  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_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 this account. Simply follow https://www.notion.so/aptoslabs/WIP-create-aptos-dapp-doc-41982c9e40e049cd962e1e0e42d0bdbd?pvs=4#20ef513460fb4452aedbece1a7523425

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: