Task 3 – Frontend

Now, let’s take a look at the front end.

The front end can be a bit trickier because it involves integrating components like MetaMask (or similar tools) into the existing codebase. Essentially, the front end communicates with the back end by retrieving data and displaying it for the user.

Before we begin for easier integration, let’s remove the confidentiality part from out smart contract

We will first need to run pnpm build in the backend first and then deploy the contract

We’ll need to store important details like the chain ID and contract address in .env files (frontend/.env). These files are typical for Node.js developers and help manage environment-specific variables. Typically, you’ll have different .env files for development and production environments. For now, we’ll focus on using the development setup.

We will change the address with the message box address.. The web3 gateway can remain testnet and the network is also the testnet one.

We will run pnpm install and then if we run pnpm dev:

Then i can connetct to this local host: https:/localhost/5173/

And it will let us connect our wallet: