Connecting Frontend to Multiple Contracts

Building applications that interact with multiple smart contracts is a common pattern in Web3 development. This tutorial demonstrates how to query data from and send transactions to multiple NEAR contracts from a single frontend application.

What You'll Build

A web application that simultaneously interacts with two deployed contracts:

• Hello NEAR (hello.near-examples.testnet) - stores and retrieves greeting messages
• Guest Book (guestbook.near-examples.testnet) - manages a list of messages with optional premium features

How It Works

The application uses the NEAR Wallet Selector to authenticate users and enables them to:

1. View data from both contracts simultaneously without authentication
2. Send transactions to multiple contracts in a single wallet interaction
3. Batch actions within the same contract for atomic operations

Repository

The complete source code is available in the GitHub repository.

The contracts are already deployed on testnet:

• Hello NEAR: hello.near-examples.testnet
• Guest Book: guestbook.near-examples.testnet

What You Will Learn

• Set up the project structure with wallet integration
• Query multiple contracts to read data
• Send transactions to multiple contracts simultaneously
• Batch actions within a contract for atomic operations

Prerequisites

• Basic knowledge of JavaScript/TypeScript
• Understanding of NEAR accounts and transactions
• Node.js and npm installed

Let's get started by setting up the project!