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-explorer/page.tsx

const fetchRecentTransactions = async () => {
    //
    // TODO: Implement this!
    //
    return data as NativeTransaction[]
  }

fetchRecentTransactions is a function that will make a call to our backend to get the most recent transactions from the chain. It will call the getRecentTransactions method on our backend. It will then return the transactions as an array of NativeTransaction objects.

src/app/basic-explorer/page.tsx

const fetchRecentBlocks = async () => {
    //
    // TODO: Implement this!
    //
    return data as EvmBlock[]
  }

fetchRecentBlocks is a function that will make a call to our backend to get the most recent blocks from the chain. It will call the getRecentBlocks method on our backend. It will then return the blocks as an array of EvmBlock objects.

`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/explorer/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/explorer/route.ts

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const method = searchParams.get('method')
  try {
    let result
    switch (method) {
      case 'getRecentTransactions':
        result = await getRecentTransactions()
        break
      case 'getRecentBlocks':
        result = await getRecentBlocks()
        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: getRecentBlocks and getRecentTransactions. 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/explorer/route.ts

const getRecentBlocks = async () => {
   //
    // TODO: Implement this!
    //
}
 
const getRecentTransactions = async () => {
    //
    // TODO: Implement this!
    //
}

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`