The merchant wallet interface is a simple React app that tracks all of the addresses generated from the merchant's wallet mnemonic and checks whether any payment has been made to them from a customer. It also does block confirmation, that is, for each transaction, it checks whether 40 blocks have been transacted since the transaction was recorded in the blockchain.

The wallet interface app consists of the following components:

• Container.js: The Container component shown here holds the other components, toggles components display as per state changes, and passes down their props to the components after it receives them from app.js. It checks whether an account has been set in the state for retrieving transactions. If the account has been set, it renders the WalletTrans.js component; otherwise, it renders the WalletMain.js component:

render(){
 
 return (
 <section className="container">
 <div className="columns"> 
 <div className="is-half is-offset-one-quarter column">
 <div className="panel">
 {
 this.props.acc? 
 
 <div>
 <WalletTrans transactions={this.props.transactions}
 acc = {this.props.acc} 
 /> 
 </div>:
 
 <div>
 <WalletMain accounts={this.props.accounts} 
 getAccountTransactions={this.props.getAccountTransactions}/>
 </div>
 
 }
 </div>
 </div>
 </div>
 </section>

• WalletMain.js: Walletmain.js maps the array of account addresses in the merchant wallet and displays the current balance. It fetches the account addresses and their balance from the accounts state parameters. On clicking the view transactions button, the user is redirected to the WalletTrans.js child component, which displays the transactions for the account.
• WalletTrans.js: WalletTrans.js maps the transaction's array and displays all transactions to the account since the genesis block (the first block in our blockchain). The following properties are mapped for each transaction:
  • Transaction index
  • Transaction hash
  • From account address
  • To account address
  • Block confirmations (the number of blocks since the transaction was added to the blockchain)
  • Transaction confirmed/unconfirmed
• Mnemonic.js: This component exports the mnemonic of the merchant HD wallet generated in the previous step.

Let's take a look at our App.js file that has all of the methods.