Frontend Interacting with Multiple Contracts

This example showcases how to interact with multiple contracts from a single frontend. The frontend uses @hot-labs/near-connect to connect a wallet and sign transactions, and near-api-js to query each contract through a shared RPC provider. Its Wallet wrapper exposes viewMethod for queries and signAndSendTransactions for wallet requests. Particularly, this example shows how to:

Query data from multiple contracts.
Call methods in multiple contracts simultaneously.

Query Data from Multiple Contracts

To query multiple contracts simply perform multiple view calls:

index.js

async function getGreetingAndMessages() {
  // query the greeting in Hello NEAR
  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: HELLO_ADDRESS });

  // query the last 4 messages in the Guest Book
  const totalMessages = await wallet.viewMethod({method: 'total_messages', contractId: GUEST_ADDRESS })
  const from_index = (totalMessages > 4? totalMessages - 4: 0).toString();
  const latestMessages = await wallet.viewMethod({ method: 'get_messages', contractId: GUEST_ADDRESS, args: {from_index, limit: "4"} });

  // handle UI stuff
  update_UI(currentGreeting, from_index, latestMessages);
}

See code on GitHub

Dispatching Multiple Transactions

The wallet object enables to dispatch multiple transactions simultaneously. However, please notice that the transactions execute independently. Dispatching multiple transactions at once is just a nice way to improve UX, because the user interacts with the wallet only once.

index.js

const guestTx = {
  receiverId: GUEST_ADDRESS,
  actions: [ // actions execute sequentially
    {
      type: 'FunctionCall',
      params: {
        methodName: 'add_message', args: { text: greeting.value },
        gas: THIRTY_TGAS, deposit: GUEST_DEPOSIT
      }
    },
  ]
}

const helloTx = {
  receiverId: HELLO_ADDRESS,
  actions: [ // if any action fails, they all rollback together
    {
      type: 'FunctionCall',
      params: {
        methodName: 'set_greeting', args: { greeting: greeting.value },
        gas: THIRTY_TGAS, deposit: NO_DEPOSIT
      }
    }
  ]
}

// Sign **independent** transactions: If one fails, the other **DOES NOT** revert
try {
  await wallet.signAndSendTransactions({ transactions: [helloTx, guestTx] });
  await getGreetingAndMessages();
} catch (error) {
  window.alert(`Could not submit both transactions: ${error.message}`);
} finally {
  document.querySelector('#signed-in-flow').classList.remove('please-wait');
}

See code on GitHub

In this example, the user signs two independent transactions:

A transaction to call set_greeting in our Hello NEAR example
A transaction to call add_message in our GuestBook example

Even when the user accepts signing the transactions at the same time, the transactions remain independent. This is, if one fails, the other is NOT rolled back.

Batch Actions

You can aggregate multiple actions directed towards a same contract into a single transaction. Batched actions execute sequentially, with the added benefit that, if one fails then they all get reverted.

  // Register a user and transfer them FT on a single take
  const REGISTER_DEPOSIT = "1250000000000000000000";

  const ftTx = {
    receiverId: FT_ADDRESS,
    actions: [
      {
        type: 'FunctionCall',
        params: {
          methodName: 'storage_deposit',
          args: { account_id: "<receiver-account>" },
          gas: THIRTY_TGAS, deposit: REGISTER_DEPOSIT
        }
      },
      {
        type: 'FunctionCall',
        params: {
          methodName: 'ft_transfer',
          args: { receiver_id: "<receiver-account>", amount: amount_in_yocto },
          gas: THIRTY_TGAS, deposit: "1" }
      }
    ]
  }

  // Ask the wallet to sign and send the transaction
  await wallet.signAndSendTransactions({ transactions: [ ftTx ] })

Tutorials

DevKit

Frontend Interacting with Multiple Contracts

Query Data from Multiple Contracts

Dispatching Multiple Transactions

Batch Actions

​Query Data from Multiple Contracts

​Dispatching Multiple Transactions

​Batch Actions

Query Data from Multiple Contracts

Dispatching Multiple Transactions

Batch Actions