Hello Developers! In the previous blog, since you have built out a contract which enables cross chain messaging using Hyperlane, in this blog we will be building a simple frontend to integrate to the contract that is on a remote chain and is used to cast votes on the main voting contract. For instance, in our previous blog, we have used the remote contract i.e. Router contract on Mumbai to cast votes on to our main contract, VoteMain on Sepolia. There we did using Remix IDE, but just like every other contract integration, the integration to a contract that has Hyperlane implemented is also the same except a very few changes. We will see through all of it by building a frontend application that will interact with the Mumbai contract and lets us Vote on Sepolia.
The reference repository is added in the **end.**
We will walk through the following in this blog:
We have setup a basic react app on Replit. You can fork this repository and start working with it. It is a simple create-react-app command implemented application.
Replit Instance : https://replit.com/@shreyaspadmakir/interchain-messages
(If you are using Replit, you can skip till here)
So if you don’t want to use the replit then open the terminal in the desired directory for your frontend application and enter the following command (hoping you have npm installed, else install npm and then continue)
npx create-react-app messaging-api-frontend
If you are using through the above command and not the replit instance, then I would recommend to navigate to the ./src folder and open the App.js file. Inside the App.js file, in the return section, remove all of the JSX except the div with className as “App”.