Coding - React: Payroll System

The repository you downloaded contains a React+Wagmi starter project. You can start the development server by running npm run dev. Your job is to create a simple payroll web app that can connect to MetaMask. A designer on our team has already created the design for the web app, and the backend team has created an API for fetching cryptocurrency prices and employee data. Your job is to create the frontend for the web app.

1. The dashboard page (design)

The dashboard page has two cards on the top, and a pricing section with the current cryptocurrency prices. The API (url below) returns those prices as a list of cryptocurrencies. In the first card, you should display the current Ether price, and in the second card, you should show the current balance of the connected wallet (in Ether, and in USD - which is just the Ether balance times the Ether price). If the wallet is not connected, you should change the message in the second card to tell the user that the wallet is not connected. Ether will always be part of the API response (slug="ethereum").

You should create several React components, so that the code is organized and easy to understand. Keep in mind that you shouldn't recreate the whole design, as the layout is already part of the starter template (this includes the header, the footer, and the sidebar). You should only add the missing components from the main section (in the HTML source code, this will be available under the "main-content-container" element).

Important links:

• The dashboard page design
• The API url - https://api.next.code-camp.org/cryptocurrencies
• The types (created by our backend team)

Remember: Just open the design link in your browser and view the source code (or use the browser's Inspect tool) to copy the necessary HTML structure. You don't need to design anything!

2. The status page (design)

The status page allows the user to connect their wallet and view their current status and balance. The design (and MetaMask logo) changes based on the wallet connection status, as shown below. You should use Wagmi to show a list of connectors, or (if the user has already connected their wallet) show the current wallet balance.

After you create this page, add a new link in the sidebar to navigate to it. You can name the link "Status" and use the icon "wallet". Additionally, change the connect button from the header to a link that navigates to the status page.

Important links:

• The status page design (not connected)
• The status page design (connected)

3. The employees page (design)

The employees page allows the user to view a list of employees and their salary (in ETH). The API (url below) returns a list of employees. You should display the employee name, phone number, email address, position, salary, employee history (the time since the employee started working), and a button to pay their salary in Ether. Next to the button, you should have an input field to enter a bonus (as a percentage of the salary). The "Pay" button should be disabled if the bonus field is empty or invalid (for example, if the user enters a non-numeric value or a negative number). After the user enters a bonus percentage, the button should be enabled and there should be a message showing the amount of Ether to be paid (the salary plus the bonus), as well as the wallet balance after the payment. See the design link for an example.

After the user clicks the "Pay" button, you should check if the user has enough Ether in their wallet to pay the salary - and show an error with toast.error() if they don't. After you send the transaction, you should show a success message with toast.success(). In this task, you don't need to wait for the transaction receipt.

After you create this page, add a new link in the sidebar to navigate to it. You can name the link "People" and use the icon "crowd".

Important links:

• The employees page design
• The API url - https://api.next.code-camp.org/employees