Next, we will create the contract interface that will be used by our React app to invoke the contracts. Follow these steps:

1. Within the contracts folder, create the LCMaster.js and LCabi.js files. 
2. Open the LCMaster.js file in a text editor.
3. With the file open, navigate to your truffle project environment, which you used to deploy the LCMaster and LC smart contracts.
4. In the truffle environment, locate the builds directory. Under builds, you'll find the LCMaster.json build file.

5. Open the file and locate the contract ABI. It should look like this:

Copy this entire ABI and paste it into the LCMaster.js file as a parameter, as follows:

export default {
 
abi: ["constant": true,
 "inputs": [],
 "name": "ERC20Interface",
 "outputs": [
 {
 "name": "",
 "type": "address"
 }
 ],...............]}

6. Similarly, copy and paste the contract address we got for LCMaster.js during deployment. Add this as a parameter to LCMaster as well, like this:

export default {

address: "0x26518b6a8E4f8B20413C1Cf70DC05B58Cb5171A0", 

abi: [...............]}

7. Save the file. We'll load this object in order to interact with the LCMaster contract we deployed to the blockchain.
8. Now, open the LCabi.js file in a text editor. Add the ABI for the LC smart contract as a parameter.
9. To do so, navigate back to the truffle build directory and open the LC.json build file.
10. Open the file and locate the ABI.
11. Copy the ABI and paste it into the LCabi.js file as a parameter, as follows:

export default {
 "abi": [
 {
 "constant": true,
 "inputs": [],
 "name": "ERC20Interface",
 "outputs": [
 {
 "name": "",
 "type": "address"
 }
 ],......]}

So, now, we have our contract interfaces. Let's create our components.