LogoLogo
  • Introduction to the Muse DAO
  • Developer Vision
  • DAPPS
    • Fast Dapp
      • Tutorials
        • Getting started
          • Make an ERC20 transfer app
      • Components
        • Contract Read
        • Contract Write
        • APICall
        • Events
        • Address Display
        • Block Number
        • Ethereum Balance
        • PleaseConnect (Request user connection)
        • Token Balance (ERC20)
        • WatchEvents
        • AirStack
        • Sweep NFT floor
        • Token amount (ERC20)
        • Token name (ERC20)
        • Uniswap tradebox
        • Moment (display date/time)
      • Variables
        • userAddress
        • ABIs
        • connectedChain
        • Passing arbitrary data in query URL parameters
        • location
        • Toast
      • Templates
        • ERC20 Token transfer
        • Nouns Auction
        • AAVE V3
        • Lido Staking page
        • DAI Saving Rate
        • ERC6551
        • Popular NFT collections buy button
        • Non Fungible Message
        • No Shit Sherlock
      • Style
    • Launch
      • How to Launch a project
      • How to buy from a Launch
      • How to sell into a Launch
      • FAQ
    • NFT20
      • Use Cases
      • Liquidity Incentives
      • Guides
        • Adding a project
          • Create Pool
      • Contracts
        • NFT20Factory
          • Source
        • NFT20Pair
          • Source
      • API
      • Fees
    • ETHCMD
    • RolodETH
    • The Very Nifty Gallery
    • CUDL Game
      • Pets
      • $CUDL
      • MILK
      • Bazaar
      • Battles and weapons
    • Feather NFT
    • Dreams of EVM NFT
    • Sudoswap,js
    • The Quest (Sword & Shield)
    • Royal Game
    • Space Goo
    • NFT API
    • Pepesea NFT Marketplace
  • Tokenomics
    • $MUSE
    • Treasury
  • Other resources
    • Governance
    • Links
Powered by GitBook
On this page
  • Getting started​
  • Display the token balance of the current user (TokenBalance)
  • Token transfers (ContractWrite)​
  • Buy tokens (Uniswap widget)​
  • Complete code​
  • Making it look beautiful (Styling)​
  • Publish your app​
  • Congratulations 🎉​
  1. DAPPS
  2. Fast Dapp
  3. Tutorials
  4. Getting started

Make an ERC20 transfer app

In this tutorial we will cover the basics to build your very first app. Here is what it will look like when finished:

PreviousGetting startedNextComponents

Last updated 1 year ago

The features of our app will be:

  • Display the balance of an ERC20 Token

  • Transfer tokens

  • Buy tokens from Uniswap

Getting started

Go to the page and connect your wallet:

On the right side you'll see the code of your app and on the left side the preview. Get started by erasing all the code and type

---
chain: 1
authors: grands_marquis
theme: cyberpunk
---

# My first app

Welcome to my first app.

You can click the Render button on use the keyboard shortcut ⌘ + Enter. You'll see your page rendered on the left part of the app.

Display the token balance of the current user (TokenBalance)

Let's use our first component to display the token balance. Components accepts parameters as props. The token Balance component accespts two props:

  • address: the wallet to display

  • token: the address of the token

Let's display the DAI balance of the Tornado Cash app:

<TokenBalance
    address={"0x23773e65ed146a459791799d01336db287f25334"}
    token={"0x6b175474e89094c44da98b954eedeac495271d0f"} />

You should see something similar to this once you render the code:

For convenience we can store variables in our code as we'll probably re-use the DAI contract address. You can create variables at the top of your code like this and then use the variables in your app:

---
chain: 1
authors: grands_marquis
theme: cyberpunk
---

<>{(() => { TOKEN_ADDRESS = "0x6b175474e89094c44da98b954eedeac495271d0f"})()}</> 

# My first app

Welcome to my first app. 

## Token balance

<TokenBalance
    address={"0x23773e65ed146a459791799d01336db287f25334"}
    token={TOKEN_ADDRESS} />

If you want to change the address to display the balance of the currently connected user you can get its address using userAddress:

<TokenBalance
    address={userAddress}
    token={TOKEN_ADDRESS} />

In order to enable the user to transfer his tokens using your app let's use the ContractWrite component. It accepts several parameters:

  • address: the address of the smart contract

  • abi: the ABI of the smart contract

  • functionName: the function you want to call

  • args an array containing the default parameters you want to display

In our case, adding the component to our app will look like this:

## Send tokens

<ContractWrite 
    address={TOKEN_ADDRESS}
    abi={[
        {
        "constant": false,
        "inputs": [
            {
                "name": "_to",
                "type": "address",
            },
            {
                "name": "_amount",
                "type": "uint256",
            }
        ],
        "name": "transfer",
        "outputs": [
            {
                "name": "",
                "type": "bool"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
        }
    ]}
    functionName="transfer"
    args={["0x0000000000000000000000000000000000000000", 1]}
/>

This will render:

You can customize the ABI to make it more user friendly. In the inputs, let's change the inputs names (_to and _amount) to something more friendly. And in the amount input we can add a token property that will make our app understands that the amount is in DAI so it will properly handle the number of decimals:

## Send tokens

<ContractWrite 
    address={TOKEN_ADDRESS}
    abi={[
        {
        "constant": false,
        "inputs": [
            {
                "name": "Reciever:",
                "type": "address",
            },
            {
                "name": "Amount to send:",
                "type": "uint256",
                "token": TOKEN_ADDRESS
            }
        ],
        "name": "transfer",
        "outputs": [
            {
                "name": "",
                "type": "bool"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
        }
    ]}
    functionName="transfer"
    args={["0x0000000000000000000000000000000000000000", 1]}
/>

Now it looks better:

One of the available component is the Uniswap trade box. It accepts two parameters:

  • defaultOutputTokenAddress the address of the token to buy

  • defaultInputAmount the preset amount of eth to buy with

add it to your app:

## Get tokens
<Uniswap
    defaultInputAmount={0.1}
    defaultOutputTokenAddress={TOKEN_ADDRESS}  /> 

it will look like this:

Here is the complete code for our app:

---
chain: 1
authors: grands_marquis
theme: cyberpunk
---

<>{(() => { TOKEN_ADDRESS = "0x6b175474e89094c44da98b954eedeac495271d0f"})()}</> 

# My first app

Welcome to my first app. 

## Token balance

<TokenBalance
    address={"0x23773e65ed146a459791799d01336db287f25334"}
    token={TOKEN_ADDRESS} />

## Send tokens

<ContractWrite 
    address={TOKEN_ADDRESS}
    abi={[
        {
        "constant": false,
        "inputs": [
            {
                "name": "Reciever:",
                "type": "address",
            },
            {
                "name": "Amount to send:",
                "type": "uint256",
                "token": TOKEN_ADDRESS
            }
        ],
        "name": "transfer",
        "outputs": [
            {
                "name": "",
                "type": "bool"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
        }
    ]}
    functionName="transfer"
    args={["0x0000000000000000000000000000000000000000", 1]}
/>

## Get tokens
<Uniswap
    defaultInputAmount={0.1}
    defaultOutputTokenAddress={TOKEN_ADDRESS}  /> 

Once you are happy with your app, click on the publish button. We'll upload your code to IPFS and give you an URL to share it with others.

Token transfers (ContractWrite)

Buy tokens (Uniswap widget)

Complete code

Making it look beautiful (Styling)

At the begining of the file you can notice that we have a theme defined. You can change it to light or dark or any of .

Our layout currently depends on Markdown to be styled. You can also use CSS and the included TailwindCSS to make your app looks awesome. .

Publish your app

Congratulations 🎉

You now have the power to build your own apps! Read more about the and see the .

​
​
​
​
the others included themes
See this same example styled here
​
​
available components
examples
​
editor