We also need to build a frontend that our users will interact with. To do so, we'll build a simple interface in React. Our portal will have the following screens:

• A login screen, which will ask for the user's friendlyId to log in to the app. The user can also log in as a bank user to see the admin view.
• A payment screen, which is where customers can submit payments.
• A bank user screen, which will display received transactions and KYC details.

The major components for the React app are as follows:

• Container.js: This receives the current app state parameters from the App.js file and passes them to the child components. The child components are rendered on the basis of the current state of the app.
• Assets.js: This renders and initializes the USD asset.
• AppLogin.js: This renders a login screen where the user needs to submit their friendlyId mapped to the bank's domain. Alternatively, a bank admin user can log in.
• Transfer.js: A component that renders a form for accepting and submitting payment requests. The user asks for the receiver's friendly ID and the amount to be sent. The user is shown the Tx Status (Success/Failure) and Tx Hash after submitting the request to the blockchain network.
• BankUser.js: A component that renders a screen that maps all the received transactions, along with the sender's KYC information.