Skip to main content

Project Setup and Wallet Integration

In this section, we'll set up the project structure and implement wallet integration using NEAR Wallet Selector.

Clone and Install​

Start by cloning the repository and installing dependencies:

git clone https://github.com/near-examples/frontend-multiple-contracts
cd frontend-multiple-contracts
npm install

Project Structure​

The project has a simple structure:

frontend-multiple-contracts/
├── frontend/
│   ├── index.html
│   ├── index.js
│   └── wallet.js
└── package.json

Wallet Setup​

The Wallet class handles authentication and blockchain interactions. Let's examine the key components:

Initialize Wallet Selector​

The wallet selector supports multiple wallet providers (MyNearWallet, HereWallet) and manages the connection state.

Starting Up the Wallet​

The startUp method:

  • Initializes the wallet selector with testnet configuration
  • Checks if a user is already signed in
  • Sets up an observable to track account changes
  • Executes a callback function when authentication state changes

Sign In and Sign Out​

These methods display the wallet modal for authentication and handle logout.

Main Application Setup​

Configure your main application to use the wallet:

Define the contract addresses you'll interact with and initialize the wallet instance.

Page Load Handler​

On page load:

  1. Start the wallet and handle authentication state
  2. Load data from both contracts

HTML Interface​

Set up the basic HTML structure:

The interface displays greetings from Hello NEAR and messages from the Guest Book side by side.

Running the Application​

Start the development server:

npm start

The application opens at http://localhost:1234. You can now view data from both contracts, but you'll need to sign in to send transactions.

Next, we'll implement querying data from multiple contracts simultaneously.