02-21-2023, 05:28 AM
How I Built My Own ERC-20 Token (1/2)
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1148734","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/how-i-built-my-own-erc-20-token-1-2/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FFfwjGQ3zUEg%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<h2>Project Scenario</h2>
<p>In this 2-part series, I’ll show you how I built my own ERC-20 token like ETH in this project. I share this because you may want to do the same and learn from my experience.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="768" height="641" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-298.png" alt="" class="wp-image-1149104" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-298.png 768w, https://blog.finxter.com/wp-content/uplo...00x250.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>
<p>I use Solidity to write a smart contract for my ERC-20 token, and then the contract will be deployed on a test net, for starters. </p>
<p>The token balance will be displayed on the user interface along with the wallet address. The front end will be formed with React & Tailwind CSS.</p>
<p>In the next part of this series, I’ll show you how to transfer tokens with the help of the <code><a rel="noreferrer noopener" href="https://blog.finxter.com/i-created-a-counter-smart-contract-with-ether-js-heres-how/" data-type="post" data-id="1002304" target="_blank">ether.js</a></code> library. You’ll be able to check the details regarding the transaction by using the transaction hash on the Etherscan website.</p>
<h2>Create the Smart Contract</h2>
<p>We will use the Openzeppelin framework to build our ERC-20 token.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/how-does-the-erc-20-token-work/" data-type="URL" data-id="https://blog.finxter.com/how-does-the-erc-20-token-work/" target="_blank" rel="noreferrer noopener">How Does the ERC-20 Token Work?</a></p>
<p>OpenZeppelin is a secured open-source framework that is used to build, manage, and inspect all aspects of software development for decentralized applications. OpenZeppelin’s ERC-20 <a rel="noreferrer noopener" href="https://blog.finxter.com/layout-of-a-solidity-source-file/" data-type="post" data-id="455693" target="_blank">solidity file</a> contains all the code to build the token.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="956" height="637" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-299.png" alt="" class="wp-image-1149107" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-299.png 956w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></figure>
</div>
<p>Move to the <a href="https://blog.finxter.com/solidity-remix-ide-quickstart/" data-type="post" data-id="946353" target="_blank" rel="noreferrer noopener">Remix IDE</a> and create a solidity file inside the contract folder. I am naming it as “<code>SilverToken.sol</code>”. Declare the <a href="https://blog.finxter.com/layout-of-a-solidity-source-file-spdx-license-identifier-and-version-pragmas/" data-type="post" data-id="703612" target="_blank" rel="noreferrer noopener">solidity version number</a> in the first line.</p>
<p>So, import Openzeppelin’s ERC-20 Solidity file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">pragma solidity >= 0.5.0 < 0.9.0;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";</pre>
<p>If you want to learn more about the OpenZeppelin implementation, you can follow <a rel="noreferrer noopener" href="https://docs.openzeppelin.com/contracts/4.x/erc20" data-type="URL" data-id="https://docs.openzeppelin.com/contracts/4.x/erc20" target="_blank">this link</a>.</p>
<p>Now create the contract named <code>SilverToken</code>. This token inherits the token structure from the ERC-20 implementation of Openzeppelin.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">contract SilverToken is ERC20 { constructor (uint256 initialSupply) ERC20("silver", "SLV"){ _mint(msg.sender, initialSupply); } function decimals() public pure override returns (uint8) { return 2; }
}
</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="277" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-293.png" alt="" class="wp-image-1149067" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-293.png 624w, https://blog.finxter.com/wp-content/uplo...00x133.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>As our token is a child of the ERC-20 class, we can access the different methods of that class now. We are calling the constructor method first. This method asks for the initial supply amount to the contract.</p>
<p>We called the base contractor ERC-20 with name and symbol parameters. This will pass the name and symbol of our token to the parent constructor. Silver is the name of our token, and SLV is the symbol.</p>
<p>To create the initial supply, we started minting tokens. The initial supply of the token will be minted to the <code>msg.sender</code> which is the address of the person who deploys the contract.</p>
<p>We usually can see the 18<sup>th</sup> decimal of precession for the ETH value. But here, for simplicity, we override that decimal function. We will get up to 2 decimal values.</p>
<h2>Deploy the Smart Contract</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="957" height="632" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-300.png" alt="" class="wp-image-1149109" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-300.png 957w, https://blog.finxter.com/wp-content/uplo...00x198.png 300w, https://blog.finxter.com/wp-content/uplo...68x507.png 768w" sizes="(max-width: 957px) 100vw, 957px" /></figure>
</div>
<p>Let’s compile the contract and move to the deployment section. </p>
<p>We will deploy this on the Goerli <a href="https://blog.finxter.com/how-to-deploy-a-smart-contract-to-the-ropsten-testnet-in-brownie/" data-type="post" data-id="63341">testnet</a>. It would be best if you had the goerli test network added to your browser. </p>
<p>If you don’t have the goerli test network on your browser, then move to the “add network” option of the <a rel="noreferrer noopener" href="https://blog.finxter.com/metamask-simple-tutorial/" data-type="post" data-id="38157" target="_blank">Metamask</a> and add the goerli test net from the networks option. </p>
<p>The configuration for the goerli network is given below:</p>
<ul>
<li><strong>Network name:</strong> Goerli test network</li>
<li><strong>New RPC URL:</strong> <a href="https://goerli.infura.io/v3/" target="_blank" rel="noreferrer noopener">https://goerli.infura.io/v3/</a></li>
<li><strong>Chain ID:</strong> 5</li>
<li><strong>Currency symbol:</strong> GoerliETH</li>
<li><strong>Block explorer URL (Optional):</strong> <a href="https://goerli.etherscan.io" target="_blank" rel="noreferrer noopener">https://goerli.etherscan.io</a></li>
</ul>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="469" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-294.png" alt="" class="wp-image-1149068" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-294.png 624w, https://blog.finxter.com/wp-content/uplo...00x225.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>Goerli testnet must be added to your browser by this time. </p>
<p>You can create a new account by clicking the <code>create account</code> option of Metamask. </p>
<p>We need some goerli Eth in your wallet for the deployment cost. You can quickly get some free goerli eth from <em><strong>goerliFaucet.com</strong></em>.</p>
<p>You may need to sign up in Alchemy to avail the opportunity. Just sign up on Alchemy and create an app. Move back to the goerli faucet and transfer some ETH to your wallet. It’s that simple. </p>
<p>Now get back to the Remix IDE. Choose the <strong><em>“Injected provider- Metamask”</em></strong> option from the environment dropdown menu. Make sure you are logged into the goerli testnet in Metamask. </p>
<p>You must see the goerli wallet address on the account section if you get connected to Remix IDE. Choose any account. You have to set an initial amount to supply at this address. </p>
<p>I am setting the initial supply amount as a million goerli ETH. <a href="https://blog.finxter.com/how-to-sell-coupons-on-eth-build-deploy-and-test-the-smart-contract-2-4/" data-type="post" data-id="952575" target="_blank" rel="noreferrer noopener">Deploy the contract</a>, and you will see all the functions and data types available under the menu.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="312" height="563" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-295.png" alt="" class="wp-image-1149070" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-295.png 312w, https://blog.finxter.com/wp-content/uplo...66x300.png 166w" sizes="(max-width: 312px) 100vw, 312px" /></figure>
</div>
<p>If you want to check the balance, you can check it from the <code>balanceOf</code> menu. Just enter the wallet address and press the menu. The current token balance will be displayed there.</p>
<p>If you don’t see the token balance in the Metamask, move to the assets option In the Metamask and click on the <code>import tokens</code> option. Then paste the contract address from the Remix IDE, and the tokens will be automatically imported. </p>
<p>You will get the contract address from the deployed contracts section of the Remix IDE.</p>
<p>So, our simple, smart contract is ready. Now let’s build the front end to do transactions to other accounts.</p>
<h2>Create a React App and Tailwind CSS</h2>
<p>We will use <a href="https://blog.finxter.com/learn-to-build-smart-contracts-in-react-with-web3-js-heres-how-1-2/" data-type="post" data-id="978706" target="_blank" rel="noreferrer noopener">React</a> and Tailwind CSS to build our front end. So, create our react app first.</p>
<p>Open the command prompt from your directory. Then type</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npx create-react-app silver_wallet</pre>
<p>Now the react is installed. But before initializing react, move to the installed directory and install the tailwind CSS for react.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">cd silver_wallet
npm install -D tailwindcss
npx tailwindcss init
</pre>
<p>Inside the <code>tailwind.config.js</code> file, configure the template paths</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">content: [ "./src/**/*.{js,jsx,ts,tsx}", ],
</pre>
<p>And inside the index.css file, add the tailwind directives.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">@tailwind base;
@tailwind components;
@tailwind utilities;
</pre>
<p>Tailwind is installed.</p>
<p>Now initiate the React App.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm start</pre>
<p>The React app should be running on the browser in the port 3000.</p>
<p>Now move to the <code>app.js</code> file and clear it for writing the contracts.</p>
<h2>Connect to Metamask</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="908" height="617" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-301.png" alt="" class="wp-image-1149116" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-301.png 908w, https://blog.finxter.com/wp-content/uplo...00x204.png 300w, https://blog.finxter.com/wp-content/uplo...68x522.png 768w" sizes="(max-width: 908px) 100vw, 908px" /></figure>
</div>
<p>The first thing we need to do is to establish a connection with the Metamask wallet.</p>
<p>Create a button and a container to show the account address to which we would be connected. The wallet’s address will be shown in the UI when connected to the wallet.</p>
<p>Let’s apply some styles also at the same time when we proceed. Get a nice button from the Flowbite website. Flowbite is one of the open-source UI libraries that will help us to build a front-end design faster.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><div> <div className="text-center mt-10"> <button type="button" onClick={connectMetamask} className="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" > Connect to Metamask </button>
{errorMessage} </div> <div className="items-center mt-5 py-3 px-4 text-sm font-medium text-center text-white bg-sky-500 rounded-lg hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 w-1/2 m-auto"> <h3>Wallet Address: {activeAccount} </h3> </div> </div> </div>
</pre>
<p>Our button is visible in the UI, and we need to add some functionalities to the connectMetamask event handler to make it work.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const connectMetamask = async () => { try { if (window.ethereum) { await window.ethereum .request({ method: "eth_requestAccounts" }) .then((result) => { setActiveAccount(result[0]); }); } else { console.log("Need to install Metamask"); } } catch (error) { console.log(error); } };
</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="450" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-296.png" alt="" class="wp-image-1149079" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-296.png 624w, https://blog.finxter.com/wp-content/uplo...00x216.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>An “if-else” condition is introduced to confirm if the Metamask is injected into the browser.</p>
<p>Inside the if condition, the <code>eth_requestAccounts</code> method of the Ethereum library is used to request the accounts of the Metamask. From the results, we choose the <code>results[0]</code>, that is, the connected account of Metamask.</p>
<p>We need to declare a state variable outside the event handler to show our account address to the UI. A <code>useState</code> hook of React would be helpful here. Import <code>useState</code> from React.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import React, { useState } from "react";</pre>
<p>Now create a <a href="https://blog.finxter.com/state-variables-in-solidity/" data-type="post" data-id="765838" target="_blank" rel="noreferrer noopener">state variable</a> to store the value of the active account address.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const [activeAccount, setActiveAccount] = useState(null);</pre>
<p>Now set the <code>results[0]</code> as the active account.</p>
<p>If the event handler fails to connect to Metamask, It will throw an error message in the console.</p>
<p>Now if you run the code you must get the wallet address displayed on the User Interface.</p>
<p>At the same time, we need to show the token balance. Under the address section, we can create another <code><div></code> container to show the balance of that wallet address. Let’s do this.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><div className="items-center mt-5 py-3 px-4 text-sm font-medium text-center text-white bg-sky-500 rounded-lg hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 w-1/2 m-auto"> <h3>Token Balance: {tokenBalance} </h3> </div>
</pre>
<p>Create another state variable outside the function to show balance in the UI.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const [tokenBalance, setTokenBalance] = useState(null);</pre>
<p>Our <code>balance</code> state variable is ready, but we need to connect with the contract to fetch the balance from the wallet.</p>
<p>We get connected with the smart contract and transfer some balance into a specific account in the next part.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Github</strong>: <a href="https://github.com/finxter/silver_wallet" data-type="URL" data-id="https://github.com/finxter/silver_wallet" target="_blank" rel="noreferrer noopener">https://github.com/finxter/silver_wallet</a></p>
</div>
https://www.sickgaming.net/blog/2023/02/...token-1-2/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1148734","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/how-i-built-my-own-erc-20-token-1-2/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FFfwjGQ3zUEg%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<h2>Project Scenario</h2>
<p>In this 2-part series, I’ll show you how I built my own ERC-20 token like ETH in this project. I share this because you may want to do the same and learn from my experience.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="768" height="641" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-298.png" alt="" class="wp-image-1149104" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-298.png 768w, https://blog.finxter.com/wp-content/uplo...00x250.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>
<p>I use Solidity to write a smart contract for my ERC-20 token, and then the contract will be deployed on a test net, for starters. </p>
<p>The token balance will be displayed on the user interface along with the wallet address. The front end will be formed with React & Tailwind CSS.</p>
<p>In the next part of this series, I’ll show you how to transfer tokens with the help of the <code><a rel="noreferrer noopener" href="https://blog.finxter.com/i-created-a-counter-smart-contract-with-ether-js-heres-how/" data-type="post" data-id="1002304" target="_blank">ether.js</a></code> library. You’ll be able to check the details regarding the transaction by using the transaction hash on the Etherscan website.</p>
<h2>Create the Smart Contract</h2>
<p>We will use the Openzeppelin framework to build our ERC-20 token.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/how-does-the-erc-20-token-work/" data-type="URL" data-id="https://blog.finxter.com/how-does-the-erc-20-token-work/" target="_blank" rel="noreferrer noopener">How Does the ERC-20 Token Work?</a></p>
<p>OpenZeppelin is a secured open-source framework that is used to build, manage, and inspect all aspects of software development for decentralized applications. OpenZeppelin’s ERC-20 <a rel="noreferrer noopener" href="https://blog.finxter.com/layout-of-a-solidity-source-file/" data-type="post" data-id="455693" target="_blank">solidity file</a> contains all the code to build the token.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="956" height="637" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-299.png" alt="" class="wp-image-1149107" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-299.png 956w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></figure>
</div>
<p>Move to the <a href="https://blog.finxter.com/solidity-remix-ide-quickstart/" data-type="post" data-id="946353" target="_blank" rel="noreferrer noopener">Remix IDE</a> and create a solidity file inside the contract folder. I am naming it as “<code>SilverToken.sol</code>”. Declare the <a href="https://blog.finxter.com/layout-of-a-solidity-source-file-spdx-license-identifier-and-version-pragmas/" data-type="post" data-id="703612" target="_blank" rel="noreferrer noopener">solidity version number</a> in the first line.</p>
<p>So, import Openzeppelin’s ERC-20 Solidity file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">pragma solidity >= 0.5.0 < 0.9.0;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";</pre>
<p>If you want to learn more about the OpenZeppelin implementation, you can follow <a rel="noreferrer noopener" href="https://docs.openzeppelin.com/contracts/4.x/erc20" data-type="URL" data-id="https://docs.openzeppelin.com/contracts/4.x/erc20" target="_blank">this link</a>.</p>
<p>Now create the contract named <code>SilverToken</code>. This token inherits the token structure from the ERC-20 implementation of Openzeppelin.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">contract SilverToken is ERC20 { constructor (uint256 initialSupply) ERC20("silver", "SLV"){ _mint(msg.sender, initialSupply); } function decimals() public pure override returns (uint8) { return 2; }
}
</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="277" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-293.png" alt="" class="wp-image-1149067" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-293.png 624w, https://blog.finxter.com/wp-content/uplo...00x133.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>As our token is a child of the ERC-20 class, we can access the different methods of that class now. We are calling the constructor method first. This method asks for the initial supply amount to the contract.</p>
<p>We called the base contractor ERC-20 with name and symbol parameters. This will pass the name and symbol of our token to the parent constructor. Silver is the name of our token, and SLV is the symbol.</p>
<p>To create the initial supply, we started minting tokens. The initial supply of the token will be minted to the <code>msg.sender</code> which is the address of the person who deploys the contract.</p>
<p>We usually can see the 18<sup>th</sup> decimal of precession for the ETH value. But here, for simplicity, we override that decimal function. We will get up to 2 decimal values.</p>
<h2>Deploy the Smart Contract</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="957" height="632" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-300.png" alt="" class="wp-image-1149109" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-300.png 957w, https://blog.finxter.com/wp-content/uplo...00x198.png 300w, https://blog.finxter.com/wp-content/uplo...68x507.png 768w" sizes="(max-width: 957px) 100vw, 957px" /></figure>
</div>
<p>Let’s compile the contract and move to the deployment section. </p>
<p>We will deploy this on the Goerli <a href="https://blog.finxter.com/how-to-deploy-a-smart-contract-to-the-ropsten-testnet-in-brownie/" data-type="post" data-id="63341">testnet</a>. It would be best if you had the goerli test network added to your browser. </p>
<p>If you don’t have the goerli test network on your browser, then move to the “add network” option of the <a rel="noreferrer noopener" href="https://blog.finxter.com/metamask-simple-tutorial/" data-type="post" data-id="38157" target="_blank">Metamask</a> and add the goerli test net from the networks option. </p>
<p>The configuration for the goerli network is given below:</p>
<ul>
<li><strong>Network name:</strong> Goerli test network</li>
<li><strong>New RPC URL:</strong> <a href="https://goerli.infura.io/v3/" target="_blank" rel="noreferrer noopener">https://goerli.infura.io/v3/</a></li>
<li><strong>Chain ID:</strong> 5</li>
<li><strong>Currency symbol:</strong> GoerliETH</li>
<li><strong>Block explorer URL (Optional):</strong> <a href="https://goerli.etherscan.io" target="_blank" rel="noreferrer noopener">https://goerli.etherscan.io</a></li>
</ul>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="469" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-294.png" alt="" class="wp-image-1149068" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-294.png 624w, https://blog.finxter.com/wp-content/uplo...00x225.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>Goerli testnet must be added to your browser by this time. </p>
<p>You can create a new account by clicking the <code>create account</code> option of Metamask. </p>
<p>We need some goerli Eth in your wallet for the deployment cost. You can quickly get some free goerli eth from <em><strong>goerliFaucet.com</strong></em>.</p>
<p>You may need to sign up in Alchemy to avail the opportunity. Just sign up on Alchemy and create an app. Move back to the goerli faucet and transfer some ETH to your wallet. It’s that simple. </p>
<p>Now get back to the Remix IDE. Choose the <strong><em>“Injected provider- Metamask”</em></strong> option from the environment dropdown menu. Make sure you are logged into the goerli testnet in Metamask. </p>
<p>You must see the goerli wallet address on the account section if you get connected to Remix IDE. Choose any account. You have to set an initial amount to supply at this address. </p>
<p>I am setting the initial supply amount as a million goerli ETH. <a href="https://blog.finxter.com/how-to-sell-coupons-on-eth-build-deploy-and-test-the-smart-contract-2-4/" data-type="post" data-id="952575" target="_blank" rel="noreferrer noopener">Deploy the contract</a>, and you will see all the functions and data types available under the menu.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="312" height="563" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-295.png" alt="" class="wp-image-1149070" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-295.png 312w, https://blog.finxter.com/wp-content/uplo...66x300.png 166w" sizes="(max-width: 312px) 100vw, 312px" /></figure>
</div>
<p>If you want to check the balance, you can check it from the <code>balanceOf</code> menu. Just enter the wallet address and press the menu. The current token balance will be displayed there.</p>
<p>If you don’t see the token balance in the Metamask, move to the assets option In the Metamask and click on the <code>import tokens</code> option. Then paste the contract address from the Remix IDE, and the tokens will be automatically imported. </p>
<p>You will get the contract address from the deployed contracts section of the Remix IDE.</p>
<p>So, our simple, smart contract is ready. Now let’s build the front end to do transactions to other accounts.</p>
<h2>Create a React App and Tailwind CSS</h2>
<p>We will use <a href="https://blog.finxter.com/learn-to-build-smart-contracts-in-react-with-web3-js-heres-how-1-2/" data-type="post" data-id="978706" target="_blank" rel="noreferrer noopener">React</a> and Tailwind CSS to build our front end. So, create our react app first.</p>
<p>Open the command prompt from your directory. Then type</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npx create-react-app silver_wallet</pre>
<p>Now the react is installed. But before initializing react, move to the installed directory and install the tailwind CSS for react.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">cd silver_wallet
npm install -D tailwindcss
npx tailwindcss init
</pre>
<p>Inside the <code>tailwind.config.js</code> file, configure the template paths</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">content: [ "./src/**/*.{js,jsx,ts,tsx}", ],
</pre>
<p>And inside the index.css file, add the tailwind directives.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">@tailwind base;
@tailwind components;
@tailwind utilities;
</pre>
<p>Tailwind is installed.</p>
<p>Now initiate the React App.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm start</pre>
<p>The React app should be running on the browser in the port 3000.</p>
<p>Now move to the <code>app.js</code> file and clear it for writing the contracts.</p>
<h2>Connect to Metamask</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="908" height="617" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-301.png" alt="" class="wp-image-1149116" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-301.png 908w, https://blog.finxter.com/wp-content/uplo...00x204.png 300w, https://blog.finxter.com/wp-content/uplo...68x522.png 768w" sizes="(max-width: 908px) 100vw, 908px" /></figure>
</div>
<p>The first thing we need to do is to establish a connection with the Metamask wallet.</p>
<p>Create a button and a container to show the account address to which we would be connected. The wallet’s address will be shown in the UI when connected to the wallet.</p>
<p>Let’s apply some styles also at the same time when we proceed. Get a nice button from the Flowbite website. Flowbite is one of the open-source UI libraries that will help us to build a front-end design faster.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><div> <div className="text-center mt-10"> <button type="button" onClick={connectMetamask} className="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" > Connect to Metamask </button>
{errorMessage} </div> <div className="items-center mt-5 py-3 px-4 text-sm font-medium text-center text-white bg-sky-500 rounded-lg hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 w-1/2 m-auto"> <h3>Wallet Address: {activeAccount} </h3> </div> </div> </div>
</pre>
<p>Our button is visible in the UI, and we need to add some functionalities to the connectMetamask event handler to make it work.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const connectMetamask = async () => { try { if (window.ethereum) { await window.ethereum .request({ method: "eth_requestAccounts" }) .then((result) => { setActiveAccount(result[0]); }); } else { console.log("Need to install Metamask"); } } catch (error) { console.log(error); } };
</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="624" height="450" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-296.png" alt="" class="wp-image-1149079" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-296.png 624w, https://blog.finxter.com/wp-content/uplo...00x216.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>An “if-else” condition is introduced to confirm if the Metamask is injected into the browser.</p>
<p>Inside the if condition, the <code>eth_requestAccounts</code> method of the Ethereum library is used to request the accounts of the Metamask. From the results, we choose the <code>results[0]</code>, that is, the connected account of Metamask.</p>
<p>We need to declare a state variable outside the event handler to show our account address to the UI. A <code>useState</code> hook of React would be helpful here. Import <code>useState</code> from React.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import React, { useState } from "react";</pre>
<p>Now create a <a href="https://blog.finxter.com/state-variables-in-solidity/" data-type="post" data-id="765838" target="_blank" rel="noreferrer noopener">state variable</a> to store the value of the active account address.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const [activeAccount, setActiveAccount] = useState(null);</pre>
<p>Now set the <code>results[0]</code> as the active account.</p>
<p>If the event handler fails to connect to Metamask, It will throw an error message in the console.</p>
<p>Now if you run the code you must get the wallet address displayed on the User Interface.</p>
<p>At the same time, we need to show the token balance. Under the address section, we can create another <code><div></code> container to show the balance of that wallet address. Let’s do this.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><div className="items-center mt-5 py-3 px-4 text-sm font-medium text-center text-white bg-sky-500 rounded-lg hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 w-1/2 m-auto"> <h3>Token Balance: {tokenBalance} </h3> </div>
</pre>
<p>Create another state variable outside the function to show balance in the UI.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const [tokenBalance, setTokenBalance] = useState(null);</pre>
<p>Our <code>balance</code> state variable is ready, but we need to connect with the contract to fetch the balance from the wallet.</p>
<p>We get connected with the smart contract and transfer some balance into a specific account in the next part.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Github</strong>: <a href="https://github.com/finxter/silver_wallet" data-type="URL" data-id="https://github.com/finxter/silver_wallet" target="_blank" rel="noreferrer noopener">https://github.com/finxter/silver_wallet</a></p>
</div>
https://www.sickgaming.net/blog/2023/02/...token-1-2/