Hello developers! Welcome onboard to becoming a pioneer in the Interchain Highway via Hyperlane. In this blog you will be building a simple webapp to integrate to a contract that has Hyperlane integrated to it. We will be using the contract in the previous blog which does interchain query, letting your contract on a remote chain do a query onto another contract on another remote chain all powered under the hood of Hyperlane.

Lets get started!

I will be attaching the link to repository in the end of the blog post.

We will be walk through in the following series:

• Setup
• Connect Wallet
• Contracts
• Call Contract

Setup:

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”.