Following are the main components of our app:

•  TokenBlock20.js: This component renders the list of ERC20 tokens along with the option to send, approve, and mint tokens. It renders the token image, symbol, and wallet balance.
• TokenBlock721.js: This component renders the list of ERC721 tokens along with the option to send, approve, and mint tokens. It renders the token image and symbol as well as token ID and metadata. Since this is an ERC721 token, the last two are of special importance here. 
• ApproveHeader.js: This component renders the wallet header for the Approve screen. It loads when the user clicks the approve button.

• ApproveToken.js: This component renders the wallet screen for the Approve screen. It loads when the user clicks the approve button. For ERC20 tokens, it asks for the address to approve and the balance to approve for that address. For ERC721, it asks for the address to approve and the token ID to approve.
• MintHeader.js: This component renders the wallet header for the Mint screen. It loads when the user clicks the mint button.
• MintToken.js: This component renders the wallet screen for the Mint screen. It loads when the user clicks the mint button. For ERC20 tokens, it asks for the address it needs to send the new tokens to and the number of tokens to mint. For ERC721, it asks for the address to which the new NFT will be tagged and the metadata for the new token.
• TransferHeader.js: This component renders the wallet header for the Transfer screen. It loads when the user clicks the send button.
• TransferToken.js: This component renders the wallet screen for the Transfer screen. It loads when the user clicks the send button. For ERC20 tokens, it asks for the address to send to and the number of tokens to send. For ERC721, it asks for the address to send to, the ID of the token to be sent, and the new metadata for the transfer.
• InstallMetamask.js: This component notifies the user to install MetaMask when it cannot detect injected web3.