Understanding the Code

There will be two main files that we will be working with in this section.

`Page.tsx`

This is the code that will be rendered on the client side, as distinguished by "use client"; at the top of the file. It contains the React components that will be displayed to the user and is responsible for making the API calls to our backend, which in turn calls the Data API.

It is important to understand that when you "use client" in a NextJS project, it will be rendered on the client side. This means that the code will be executed in the user's browser and not on the server. This is important to keep in mind when working with sensitive data or when you want to keep your API keys secure.

Besides this, we have three main functions that we will be working with in this file:

src/app/basic-wallet/page.tsx

const fetchERC721Balances = async (address: string) => {
    //
    // TODO: Implement this!
    //
    return [] as Erc721TokenBalance[];
  }

fetchERC721Balances is a function that will make a call to our backend to get the user's ERC-721 token balances. It will call the listErc721Balances method on our backend with the user's address. It will then return the balances as an array of Erc721TokenBalance objects.

src/app/basic-wallet/page.tsx

const fetchERC1155Balances = async (address: string) => {
     //
    // TODO: Implement this!
    //
    return [] as Erc1155TokenBalance[];
  }

fetchERC1155Balances is a function that will make a call to our backend to get the user's ERC-1155 token balances. It will call the listErc1155Balances method on our backend with the user's address. It will then return the balances as an array of Erc1155TokenBalance objects.

src/app/basic-wallet/page.tsx

  const fetchRecentTransactions = async (address: string) => {
    //
    // TODO: Implement this!
    //
    return {} as TransactionDetails;
  }

fetchRecentTransactions is a function that will make a call to our backend to get the user's recent transactions for all tokens. It will call the listRecentTransactions method on our backend with the user's address. It will then return the balances as an object of type TransactionDetails.

`Route.ts`

This code will be executed on the server side, as distinguished by "use server"; at the top of the file. It contains the code that will be executed on the server side and is responsible for making the API calls to the Data API.

There are a few key components to understand in this file:

src/app/api/wallet/route.ts

import { AvaCloudSDK } from "@avalabs/avacloud-sdk";
const avaCloudSDK = new AvaCloudSDK({
  apiKey: process.env.AVACLOUD_API_KEY,
  chainId: "43114", // Avalanche Mainnet
  network: "mainnet",
});

Here we initialize the AvaCloudSDK with our AvaCloud API key and the chainId of 43114 for the Avalanche Mainnet. This will allow us to make calls to the Data API.

src/app/api/wallet/route.ts

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const method = searchParams.get('method')
  let address
  try {
    let result
    switch (method) {
      case 'listERC721Balances':
        address = searchParams.get('address')!
        result = await listERC721Balances(address)
        break
      case 'listERC1155Balances':
        address = searchParams.get('address')!
        result = await listErc1155Balances(address)
        break
      case 'listRecentTransactions':
        address = searchParams.get('address')!
        result = await listRecentTransactions(address)
        break
      default:
        return NextResponse.json({ error: 'Invalid method' }, { status: 400 })
    }
    return NextResponse.json(result)
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
  }
}

Here we define the internal API methods for our backend. We have two methods that we will be working with in this section: getBlockHeight, listERC721Balances, listErc1155Balances and listRecentTransactions. We create all of these methods internally, then forward the request to the Data API. We then return the result to the client.

src/app/api/wallet/route.ts

async function getBlockHeight() {
    //
    // TODO: Implement this!
    //
    return
}
 
const listERC721Balances = async (address: string) => {
    //
    // TODO: Implement this!
    //
    return
}
 
const listErc1155Balances = async (address: string) => {
    //
    // TODO: Implement this!
    //
    return
}
 
const listRecentTransactions = async (address: string) => {
    //
    // TODO: Implement this!
    //
    return
}

In the next section, we will implement these functions to call the Data API through the AvaCloudSDK.

Page.tsx

Route.ts

On this page

`Page.tsx`

`Route.ts`