We need to map the contract ABI and provide a suitable contract interface that our app can use for invoking the token smart contracts and calling the contract methods. Let's see how we can accomplish this:

1. Within the token folder, we will create two components for mapping ERC20 and ERC721 tokens. Let's call these all20.js and all721.js, as shown in the following code:

//all20.js

import MoolahCoin from './MoolahCoin';
const Tokens20 = [
 MoolahCoin
];
export default Tokens20;

//all721.js

import Condos from './Condos';
const Tokens721 = [
 Condos
];
export default Tokens721;

Currently, these files map our MoolahCoin token (ERC20) and Condos token (ERC721). As you add more tokens to the wallet, you need to add them to these files.

2. Next, we'll create two component files for our tokens. We'll label these MoolahCoin.js and Condos.js. Map the following parameters to each token js:

• Address—Address of the contract 
• Decimal—Number of decimals after zero
• Name—Name of the token
• Symbol—Symbol of the token

• Icon—Pictorial icon to be shown on the wallet
• ABI—Contract ABI

This is how Condos.js looks:

export default {
 address: "0xB1a54A6dB263374120C5B3A00184542812B6D25D",
 decimal: 0,
 name: "Condos",
 symbol: "CONDO",
 icon: "Condos.jpg",
 abi: [
 {
 "constant": true,
 "inputs": [
 {
 "name": "interfaceId",
........
........
........
 "payable": false,
 "stateMutability": "nonpayable",
  "type": "function"
    }
  ]
}

Every time you add a new token, you need to add a similar component and update all the relevant code files. Let's create the rest of our app components.