{"id":2238,"date":"2022-01-25T17:57:38","date_gmt":"2022-01-25T17:57:38","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2238"},"modified":"2022-01-25T17:57:38","modified_gmt":"2022-01-25T17:57:38","slug":"building-a-web3-frontend-with-react","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2238","title":{"rendered":"Building a web3 frontend with React"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

In a previous tutorial<\/a>, we covered how to create and deploy an NFT collectible smart contract from scratch. We also explored how to verify our contract on etherscan and enable yourself as well as your users to call functions directly from the contract\u2019s etherscan page.<\/p>\n\n\n\n\n\n\n\n

However, most serious projects tend to deploy their own websites and allow users to mint directly from the website.<\/p>\n\n\n\n

This is exactly what we will be covering in this tutorial. More specifically, this tutorial will show you how to:<\/p>\n\n\n\n

  1. Let users connect their Metamask wallet to your website<\/li>
  2. Allow users to call a contract function, make a payment, and mint an NFT from your collection.<\/li><\/ol>\n\n\n\n

    By the end of this tutorial, you\u2019ll have a fully functioning web3 frontend built with React. You will have also gained the foundational knowledge required to build any general-purpose web3 frontend (beyond an NFT minter).<\/p>\n\n\n\n

    <\/a>Prerequisites<\/h2>\n\n\n\n
    \"React<\/a><\/figure>\n\n\n\n

    This tutorial assumes you have already developed and deployed your smart contract to the Rinkeby test network. If you haven\u2019t, we strongly suggest you go through this tutorial<\/a>. In order to follow along with this tutorial, you will need the following:<\/p>\n\n\n\n

    1. The ABI file for your smart contract (which is available in the artifacts<\/em> folder of your smart contract project).<\/li>
    2. The address of your smart contract.<\/li><\/ol>\n\n\n\n

      We also assume that you have experience working with React and Javascript. If not, we strongly suggest you go through the official tutorial on React\u2019s website<\/a> first.<\/p>\n\n\n\n

      <\/a>Setting up the project<\/h2>\n\n\n\n

      Let\u2019s start off by creating a React project using create-react-app<\/code>. Open your terminal and run the following command:<\/p>\n\n\n\n

      npx create-react-app nft-collectible-frontend\n<\/code><\/pre>\n\n\n\n
      The installation process will take anywhere between 2\u201310 minutes. Once its done, check that everything is working by running the following:<\/p>\n\n\n\n
      cd nft-collectible-frontend\nnpm start\n<\/code><\/pre>\n\n\n\n
      If all goes well, you should see your browser open a new tab at localhost:\/\/3000<\/a> with the following screen. Pretty standard React stuff.<\/p>\n\n\n\n
      \"React<\/a><\/figure>\n\n\n\n
      Let\u2019s do a little cleanup now.<\/p>\n\n\n\n
      Go to public\/index.html<\/code> and change the title and meta description of your website. This step is optional.<\/p>\n\n\n\n
      Next, go to the src folder and delete the App.test.js<\/code>, logo.svg<\/code>, and setupTests.js<\/code> files. We will not be needing these files for this tutorial.<\/p>\n\n\n\n
      Go to the App.js<\/code> file and replace its contents with the following boilerplate.<\/p>\n\n\n\n
      import '.\/App.css';\n\nfunction App() {\n    return (\n        <h1>Hello World<\/h1>\n    );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
      Remove all the contents of App.css<\/code> as well. Do not, however, delete this file. In a later section, we will provide you with some basic styling that should be good enough for this demo project.<\/p>\n\n\n\n
      If you go back to localhost, you should see a screen that says Hello World<\/strong>. We now have a basic react project set up and good to go.<\/p>\n\n\n\n
      <\/a>Getting contract ABI and address<\/h2>\n\n\n\n
      For our React frontend to be able to connect and communicate with our smart contract, it needs the contract\u2019s ABI and address.<\/p>\n\n\n\n
      ABI (or Application Binary Interface) is a JSON file that is automatically generated during contract compilation. The blockchain we deploy to stores our smart contract in the form of bytecode. In order to invoke functions on it, pass the correct parameters, and parse return values using a high-level language, we need to specify details about the functions and the contract (such as name, arguments, types, etc.) to our frontend. This is exactly what the ABI file does. In order to learn more about the ABI, we suggest you go through this excellent post<\/a>.<\/p>\n\n\n\n
      To find your ABI file, go to your hardhat project and navigate to artifacts\/contracts\/NFTCollectible.sol\/NFTCollectible.json<\/code>.<\/p>\n\n\n\n
      \"Folder<\/a><\/figure>\n\n\n\n
      We need to now copy the JSON file to our React project. Create a new folder called contracts<\/code> in the src<\/code> folder and paste the NFTCollectible.json<\/code> file.<\/p>\n\n\n\n
      You should already have the address of your deployed smart contract. (If you don\u2019t just deploy it to Rinkeby again, and get the latest address and ABI file).<\/p>\n\n\n\n
      Our contract address from the previous tutorial is 0x355638a4eCcb777794257f22f50c289d4189F245. We will be using this contract in this tutorial too.<\/p>\n\n\n\n
      Let us now import the contract ABI and define the contract address in the App.js<\/code> file.<\/p>\n\n\n\n
      \"App.js\"\/<\/a><\/figure>\n\n\n\n
      <\/a>Setting up boilerplate HTML, CSS, and JS<\/h2>\n\n\n\n
      Our website is going to be incredibly simple. All it will have is a heading and a Connect Wallet<\/em> button. Once the wallet is connected, the Connect Wallet<\/em> button will be replaced by a Mint NFT<\/em> button.<\/p>\n\n\n\n
      We\u2019re not going to bother with creating separate component files. Instead, we will write all our HTML and logic in App.js<\/code> and all our CSS in App.css<\/code><\/p>\n\n\n\n
      Copy the contents of the following Github gist into your App.js<\/code> file.<\/p>\n\n\n\n
      import { useEffect } from 'react';\nimport '.\/App.css';\nimport contract from '.\/contracts\/NFTCollectible.json';\n\nconst contractAddress = \"0x355638a4eCcb777794257f22f50c289d4189F245\";\nconst abi = contract.abi;\n\nfunction App() {\n\n  const checkWalletIsConnected = () => { }\n\n  const connectWalletHandler = () => { }\n\n  const mintNftHandler = () => { }\n\n  const connectWalletButton = () => {\n    return (\n      <button onClick={connectWalletHandler} className='cta-button connect-wallet-button'>\n        Connect Wallet\n      <\/button>\n    )\n  }\n\n  const mintNftButton = () => {\n    return (\n      <button onClick={mintNftHandler} className='cta-button mint-nft-button'>\n        Mint NFT\n      <\/button>\n    )\n  }\n\n  useEffect(() => {\n    checkWalletIsConnected();\n  }, [])\n\n  return (\n    <div className='main-app'>\n      <h1>Scrappy Squirrels Tutorial<\/h1>\n      <div>\n        {connectWalletButton()}\n      <\/div>\n    <\/div>\n  )\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
      (Remember to set the correct contract address on line 5)<\/p>\n\n\n\n
      Notice that we have defined a few functions for you which do not do a lot at the moment. We will be explaining their purpose and populating them with logic as we proceed with this tutorial.<\/p>\n\n\n\n
      We have a small amount of CSS for you to use too. Copy the following into your App.css<\/code> file.<\/p>\n\n\n\n
      .main-app {\n    text-align: center;\n    margin: 100px;\n}\n\n.cta-button {\n    padding: 15px;\n    border: none;\n    border-radius: 12px;\n    min-width: 250px;\n    color: white;\n    font-size: 18px;\n    cursor: pointer;\n}\n\n.connect-wallet-button {\n    background: rgb(32, 129, 226);\n}\n\n.mint-nft-button {\n    background: orange;\n}\n<\/code><\/pre>\n\n\n\n
      Your website should now look like this:<\/p>\n\n\n\n
      \"Frontend\"\/<\/a><\/figure>\n\n\n\n
      Feel free to customize the look of the website by adding more styles and static elements (images, header, footer, social media links, etc.).<\/p>\n\n\n\n
      We\u2019ve put together most of the foundational blocks of the project. We are now in a good position to tackle one of the first major objectives of this tutorial: allowing a user to connect their wallet to our website.<\/p>\n\n\n\n
      <\/a>Connecting Metamask Wallet<\/h2>\n\n\n\n
      \"Metamask\"\/<\/a><\/figure>\n\n\n\n
      For a user to call functions from our contract, they need to be able to connect their wallet to our website. The wallet will enable the user to pay gas and the sale price in order to mint an NFT from our collection.<\/p>\n\n\n\n
      In this tutorial, we will be working exclusively with the Metamask wallet and its suite of APIs. Off-the-shelf solutions like Moralis<\/a> and web3modal<\/a> exist that allow you to add support for multiple wallets with very few lines of code. But for this project, we will focus on implementing connect wallet functionality from scratch. We will cover solutions like Moralis in a later tutorial.<\/p>\n\n\n\n
      We assume you already have the Metamask wallet extension installed in your browser. If you do, Metamask injects an ethereum<\/code> object into your browser\u2019s global window<\/code> object. We will be accessing window.ethereum<\/code> to perform the bulk of our functionality.<\/p>\n\n\n\n
      <\/a>Checking if Metamask Wallet Exists<\/h3>\n\n\n\n
      A user cannot mint NFTs on our website unless they have a Metamask wallet. Let\u2019s populate the checkWalletIsConnected<\/code> function within the App<\/code> component that checks if the Metamask wallet exists.<\/p>\n\n\n\n
      \"Code\"\/<\/a><\/figure>\n\n\n\n
      Note that we have also defined the useEffect<\/code> hook that checks Metamask\u2019s existence when the App component loads.<\/p>\n\n\n\n
      Open the console on your app\u2019s localhost page. If you have Metamask installed, you should see a message that says Wallet exists! We\u2019re ready to go!<\/em><\/p>\n\n\n\n
      \"Browser<\/a><\/figure>\n\n\n\n
      <\/a>Connecting Metamask Programmatically<\/h3>\n\n\n\n
      Just because we have the Metamask extension installed doesn\u2019t mean that Metamask will automatically connect to every website we visit. We need to prompt Metamask to ask the user to do so.<\/p>\n\n\n\n
      This is where the Connect Wallet<\/em> functionality comes in. It is the web3 equivalent of a login button. It allows the user to connect and send contract function call requests through the website frontend.<\/p>\n\n\n\n
      Metamask makes this process remarkably simple with the window.ethereum.request<\/code> method.<\/p>\n\n\n\n
      Let\u2019s first define a variable in App()<\/code> with the useState hook that will keep track of the user\u2019s wallet address. (Don\u2019t forget to import useState<\/code> from React!)<\/p>\n\n\n\n
      const [currentAccount, setCurrentAccount] = useState(null);\n<\/code><\/pre>\n\n\n\n
      Now, let\u2019s define the connectWalletHandler<\/code> function.<\/p>\n\n\n\n
      \"Code\"\/<\/a><\/figure>\n\n\n\n
      Let\u2019s briefly go through what this function does.<\/p>\n\n\n\n
      1. It checks if you have Metamask installed. If not, the website displays a pop-up asking you to install Metamask.<\/li>
      2. It requests Metamask for the user\u2019s wallet addresses.<\/li>
      3. Once the user has consented to connect with the website, it takes the first wallet address that is available and sets it as the value of the currentAccount variable.<\/li>
      4. If something goes wrong (such as the user refusing to connect), it fails and prints an error message to the console.<\/li><\/ol>\n\n\n\n
        At the moment, if you open the Metamask extension on your website, it will tell you that you\u2019re not connected.<\/p>\n\n\n\n
        \"Metamask<\/a><\/figure>\n\n\n\n
        It is now time for the moment of truth. Click on the Connect Wallet<\/em> button on your website. Metamask will prompt you to connect with the website. Once you agree to do so, your extension screen will look like this.<\/p>\n\n\n\n
        \"Metamask<\/a><\/figure>\n\n\n\n
        Congratulations! We have successfully connected our wallet to our website.<\/p>\n\n\n\n
        Once the wallet is connected, we should ideally replace the Connect Wallet<\/em> button with a Mint NFT<\/em> button. In the return value of App , let\u2019s replace the render of a Connect Wallet<\/em> button with a conditional render.<\/p>\n\n\n\n
        {currentAccount ? mintNftButton() : connectWalletButton()}\n<\/code><\/pre>\n\n\n\n
        Our website should now look like this:<\/p>\n\n\n\n
        \"Mint<\/a><\/figure>\n\n\n\n
        Let\u2019s refresh our page and check our extension. You will see that Metamask tells us that we are still connected to the website but our website still displays a Connect Wallet<\/em> button.<\/p>\n\n\n\n
        If you\u2019re familiar with React, it should be obvious why this is happening. After all, we are setting the currentAccount<\/code> state only within the connectWallet<\/code> function.<\/p>\n\n\n\n
        Ideally what should happen is that the website should check if the wallet is connected every time the App<\/code> component is loaded (i.e every time we refresh).<\/p>\n\n\n\n
        Let us extend the checkWalletIsConnected<\/code> function to check for accounts as soon as the website is loaded and set currentAccount if the wallet has already been connected.<\/p>\n\n\n\n
        \"Code\"\/<\/a><\/figure>\n\n\n\n
        (Note that we have marked this function async ). Let\u2019s briefly touch upon what this function does:<\/p>\n\n\n\n
        1. It checks if Metamask is installed and outputs result to the console.<\/li>
        2. It attempts to request Metamask for accounts that are connected.<\/li>
        3. If Metamask is already connected, it obliges by giving the function a list of accounts. If not, an empty list is returned.<\/li>
        4. If the list is not empty, the function picks the first account sent over by Metamask and sets it as the current account.<\/li><\/ol>\n\n\n\n
          If you now refresh the page, you will see that the website indeed displays the Mint NFT<\/em> button as it should.<\/p>\n\n\n\n
          <\/a>Mint NFTs from the website<\/h2>\n\n\n\n
          Let us now implement the core functionality of our website. When a user clicks on the Mint NFT<\/em> button, we expect the following to happen:<\/p>\n\n\n\n
          1. Metamask prompts the user to pay the NFT\u2019s price + gas.<\/li>
          2. Once the user accepts, Metamask calls the mintNFT function of our contract on behalf of the user.<\/li>
          3. It notifies the user about the success\/failure of the transaction once it is complete.<\/li><\/ol>\n\n\n\n
            To do this, we will require the ethers<\/code> library from our smart contract project. In your terminal, run the following command:<\/p>\n\n\n\n
            npm install ethers\n<\/code><\/pre>\n\n\n\n
            Let us import this library in App.js<\/code>.<\/p>\n\n\n\n
            import { ethers } from 'ethers';\n<\/code><\/pre>\n\n\n\n
            Finally, let\u2019s populate the mintNftHandler<\/code> function.<\/p>\n\n\n\n
            \"Code\"\/<\/a><\/figure>\n\n\n\n
            (Don\u2019t forget to mark this function as async<\/code>)<\/p>\n\n\n\n
            As usual, let\u2019s touch upon what this function does.<\/p>\n\n\n\n
            1. It tries to access the ethereum object injected by Metamask.<\/li>
            2. If ethereum exists, it sets Metamask as the RPC provider. This means that you will be issuing requests to the miners using your Metamask wallet.<\/li>
            3. To issue requests, the user will need to sign transactions using their private key. We access signer for this purpose.<\/li>
            4. We then initiate an ethers Contract instance using the deployed contract\u2019s address, the contract ABI, and the signer.<\/li>
            5. We can now call functions on our contract through the aforementioned contract object. We call the mintNFT function and ask Metamask to send 0.01 ETH (which is the price we set for our NFT).<\/li>
            6. We wait for the transaction to be processed and once it\u2019s done, we output the transaction hash to the console.<\/li>
            7. If anything fails (the wrong function called, wrong parameters passed, < 0.01 ETH sent, user rejected transaction, etc.), an error is printed to the console.<\/li><\/ol>\n\n\n\n
              On your website, open your browser\u2019s console so that you are able to view the mining status in real-time.<\/p>\n\n\n\n
              Now, click on the Mint NFT<\/em> button. Metamask will prompt you to pay 0.01 ETH + gas. The transaction will take approximately 15\u201320 seconds to process. Once it\u2019s done, the transaction will be confirmed both by a Metamask popup and the console output.<\/p>\n\n\n\n
              \"Website<\/a><\/figure>\n\n\n\n
              You can now view the NFT on Opensea too. Navigate to your account on testnets.opensea.io<\/a> and you should be able to see your latest NFT.<\/p>\n\n\n\n
              \"Scrappy<\/a><\/figure>\n\n\n\n
              <\/a>UX Improvements & Conclusion<\/h2>\n\n\n\n
              Congratulations! You now have a fully functioning web3 frontend that users can mint NFTs from.<\/p>\n\n\n\n
              However, as you may have noticed, the UX of the website leaves a lot to be desired. Here are a few improvements that you should consider doing.<\/p>\n\n\n\n
              <\/a>Ensure the user is connected to the right network<\/h3>\n\n\n\n
              Our website assumes that the user is connected to the Rinkeby Network when interacting with our website. This may not always be the case.<\/p>\n\n\n\n
              \"Change<\/a><\/figure>\n\n\n\n
              Can you implement functionality that gently alerts the user if s\/he is not connected to Rinkeby (like OpenSea does)? Also, ensure that the user is not able to see the Mint NFT<\/em> button when connected to the wrong network.<\/p>\n\n\n\n
              <\/a>Show transaction status<\/h3>\n\n\n\n
              Currently, our website prints the transaction status onto the console. In a real project, you cannot really expect your users to open their console while interacting with the website.<\/p>\n\n\n\n
              Can you implement state which tracks the transaction status and gives feedback to the user in real-time? It should show a loader when the transaction is processing, notify the user if the transaction has failed, and display the transaction hash\/Opensea link if the transaction has succeeded.<\/p>\n\n\n\n
              <\/a>Prompt Metamask even if funds are non-existent<\/h3>\n\n\n\n
              If you do not have any ETH in your Metamask wallet, clicking on Mint NFT will not prompt Metamask at all. In fact, the user will receive no feedback.<\/p>\n\n\n\n
              Can you ensure that Metamask is prompted even when the user has insufficient funds? It should ideally be Metamask that informs the user how much ETH is required and how much s\/he is short by.<\/p>\n\n\n\n
              <\/a>Other Quality of life changes<\/h3>\n\n\n\n
              Here are a few other quality of life changes that you can consider.<\/p>\n\n\n\n
              1. Allow users to mint more than 1 NFT at a time.<\/li>
              2. Add a few sample artworks from your NFT collection.<\/li>
              3. Add a link to your collection on Opensea.<\/li>
              4. Add the verified smart contract address so people can double-check what\u2019s really happening behind the scenes.<\/li>
              5. Add links to your Twitter, IG, and Discord.<\/li><\/ol>\n\n\n\n
                \"Rinkeby<\/a><\/figure>\n\n\n\n
                Our NFT sandbox project, Rinkeby Squirrels<\/a>, implements a majority of the UX upgrades mentioned here. Try and mint one here<\/a> and see if you can notice the difference between it and the website we built.<\/p>\n\n\n\n
                We will be launching future tutorials showing you how to implement a few of these upgrades. But we really suggest you try doing this yourself. You\u2019ll be one step closer to becoming a web3 frontend master.<\/p>\n\n\n\n
                If you have any questions or are stuck, reach out to us on our Discord<\/a>.<\/p>\n\n\n\n
                If you don\u2019t have questions, come say hi to us on our Discord<\/a> anyway! Also, if you liked our content, we would be super grateful if you tweet about us, follow us(@ScrappyNFTs and @Rounak_Banik), and invite your circle to our Discord. Thank you for your support!<\/p>\n\n\n\n
                Final code repository: https:\/\/github.com\/rounakbanik\/nft-collectible-frontend<\/a><\/p>\n\n\n\n
                <\/a>About Scrappy Squirrels<\/em><\/h3>\n\n\n\n
                Scrappy Squirrels<\/a> is a collection of 10,000+ randomly generated NFTs. Scrappy Squirrels are meant for buyers, creators, and developers who are completely new to the NFT ecosystem.<\/p>\n\n\n\n
                The community is built around learning about the NFT revolution, exploring its current use cases, discovering new applications, and finding members to collaborate on exciting projects with.<\/p>\n","protected":false},"excerpt":{"rendered":"
                Introduction In a previous tutorial, we covered how to create and deploy an NFT collectible smart contract from scratch. We also explored how to verify our contract on etherscan and enable yourself as well as your users to call functions directly from the contract\u2019s etherscan page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2238"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2238"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2238\/revisions"}],"predecessor-version":[{"id":2239,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2238\/revisions\/2239"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}