Our React app will have the following users and features. It will allow end users to interact with our smart contracts through a frontend layer, as follows:
- Bank: The bank user who logs in to the app. The user can create and view LCs.
- Buyer: The buying merchant who requests an LC from the bank. The Buyer can view all the LCs issued in their name by the bank.
- Seller: The selling merchant who will approach the bank for settlement, on the successful delivery of their goods to the buying merchant. The Seller can view the LCs that include them as a beneficiary and submit a settlement request.
Broadly, the app will have the following React components:
- Address Bar: Displays the account used to access the app in real time.
- Description: A component that provides a description of the app.
- Nav: A component that implements a navigation bar, with the bank's name and logo.
- InputField: A component that implements the input fields, used for getting inputs from the user.
- Container: The link between the main App.js file and the rest of the child components. It renders child components based on the current state. It receives all state variables and methods and forwards them to the child components, as and when required.
- Bank Login: A login screen for our bank. It will allow the Buyer, the Seller, and the bank to log in to the app and use it. It also redirects them to the lower screens, for using the app.
- BankTabCreate: The component that renders the Create LC screen for the bank user.
- BankTabView: The component that renders the View LC screen for the bank user.
- BuyerTabView: The component that renders the View LC screen for the Buyer.
- SellerTabSettle: The component that renders the Settle LC screen for the Seller.
- SellerTabView: The component that renders the View LC screen for the Seller.
- LCView: The component that renders a singular screen, with all the details of a single LC. It can be accessed by the bank user, the Buyer, or the Seller.
Apart from these components, the two js files in the contract folder will hold the following details:
- LCMaster: Holds the contract address and the LCMaster contract application binary interface (ABI)
- LC: Holds the ABI for the LC contract
Lastly, we'll have our regular React files, including the following:
- App.js
- App.cs
- index.js
- package.json
Some knowledge of React is expected for this part of the tutorial. If you want to skip the React part and directly get to executing the app, you can access the entire code base at the following GitHub link.
We'll be taking a look at only the important components in this section, and thus not all the components will be covered. However, you can access the entire code base at the following GitHub link: https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%206/LCApp.
Now, let's dive into creating our app.