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:
Last updated
In this tutorial we will cover the basics to build your very first app. Here is what it will look like when finished:
Last updated
The features of our app will be:
Display the balance of an ERC20 Token
Transfer tokens
Buy tokens from Uniswap
Go to the editor 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
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.
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:
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:
If you want to change the address to display the balance of the currently connected user you can get its address using userAddress:
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:
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:
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:
it will look like this:
Here is the complete code for our app:
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 the others included themes.
Our layout currently depends on Markdown to be styled. You can also use CSS and the included TailwindCSS to make your app looks awesome. See this same example styled here.
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.
You now have the power to build your own apps! Read more about the available components and see the examples.
