Running our app

Let's bring our wallet online and run the application to see how it works. Make sure your Ganache blockchain is running and the contracts are deployed. Let's run our React development server:

  1. Run the following command in the project directory:
npm start 

 By default, the app should run on port 3000

  1. To access the app, enter localhost:3000 in your browser. The app should open up in the browser, as shown in the following screenshot:

  1. You need to sign in with your MetaMask credentials so the app can access your primary account. After signing in, you should get another popup, as shown in the following screenshot. You need to permit the app access to MetaMask:

On granting access, MetaMask returns an array of accounts to the app including your primary account in the 0th location. Hence, the app should now be rendered with your primary Ethereum account visible.

  1. Next, we will add the Condos and MoolahCoin tokens to your MetaMask wallet. To do so, select the hamburger menu icon in the top left-hand corner in MetaMask. From the sliding panel that appears, click on Add Token, as shown in the following screenshot:

  1. As shown in the following screenshot, select the Custom Token tab. Paste the contract address in the screen that appears. MetaMask should automatically recognize the details of your token contract on pasting the address:

   

  1. Then, click on Next and then on Add Tokens, as shown in the following screenshot:

         

  1. The following screenshot displays the details of Account 2. Now, we will repeat the process for both the MoolahCoin and Condos tokens:

       

  1. We need to mint an initial amount of tokens to ourselves before we start using the app. To do so, navigate back to the Truffle console and run the following code:
//Mint 10 MoolahCoins
MoolahCoin.deployed().then(
function(instance) { return instance.mint("<Your primary eth address>",100000); }).then(function(responseb) {console.log("response", responseb.toString(10));});

//Mint 1 Condo Token with metadata 'New Delhi'
Condos.deployed().then(function(instance) { return instance.createNFT("<Your primary eth address>","New Delhi"); }).then(function(responseb) {console.log("response", responseb.toString(10));});

Our token wallet app will now look like the following screenshot:

You will now see the MoolahCoin and Condo tokens in your wallet dashboard.

  1. Let's try to send some tokens now. Click on the Send button for MC. The send MC screen will open as shown in the following screenshot:

  1. Copy an address from the list of auto-generated addresses from Ganache, as shown in the following screenshot:

  1. Copy the receiver's address field, enter an amount to transfer, and click on Send.

MetaMask will pop up with a notification and ask the user's permission to transfer tokens:

  1. Click on Confirm and the transaction will go through. MetaMask will give you a pop-up notification to let you know the transaction has gone through successfully. The balance change is reflected in the app interface:

  1. Let's try to approve now. Click on the Approve button for MoolahCoin. Enter an address to approve and the token balance permitted to move. Click on Confirm after entering the details, as shown in the following screenshot:

MetaMask asks for the user's permission. It also shows a notification indicating that the user is approving another address to spend tokens on their behalf. Click on Confirm for approval to go through.

  1. Lastly, let's try out the Mint operation for the Condos token. As shown in the following screenshot, Mint allows you to create and assign new tokens to an Ethereum address. Click on the Mint button for Condos to get the MINT token screen. Enter an address to mint the new tokens to. Minting for Condos also allows you to allocate an initial metadata value to the token:

  1. Click on Mint after entering the address and metadata as shown in the following screenshot. MetaMask pops up with a notification asking for the user's permission:

  1. Click on Confirm to generate a new NFT mapped to the receiving address with the metadata mentioned on the screen.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.77.195