Merge branch 'dev'

content/course/avacloudapis/06-block-explorer-app/01-overview.mdx

@@ -7,4 +7,9 @@ icon: Book
 ---
 In this section we will build a basic block explorer using the Data API.
 
-![](/course-images/avacloudsdk/explorer.png)
+![](/course-images/avacloudsdk/explorer.png)
+
+We will use a couple additional endpoints from the Data API to accomplish this:
+
+- [`data.evm.blocks.getLatestBlocks`](https://developers.avacloud.io/data-api/evm-blocks/list-latest-blocks)
+- [`data.evm.transactions.listLatestTransactions`](https://developers.avacloud.io/data-api/evm-transactions/list-latest-transactions)

content/course/avacloudapis/06-block-explorer-app/02-understanding-code.mdx

@@ -1,7 +1,114 @@
 ---
 title: Understanding the Code
-description: Lets modify the code to implement the Data API.
-updated: 2024-09-13
+description: Before we start coding, let's take a look at the code we will be working with.
+updated: 2024-10-09
 authors: [owenwahlgren]
 icon: Book
 ---
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+There will be two main files that we will be working with in this section.
+
+<Steps>
+<Step>
+
+### `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:
+
+<Steps>
+<Step>
+```tsx title="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.
+
+</Step>
+<Step>
+```tsx title="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.
+
+</Step>
+</Steps>
+
+</Step>
+<Step>
+
+### `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:
+
+<Steps>
+<Step>
+```tsx title="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.
+</Step>
+<Step>
+
+```tsx title="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.
+</Step>
+<Step>
+```tsx title="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.
+</Step>
+</Steps>
+</Step> 
+</Steps> 

content/course/avacloudapis/06-block-explorer-app/03-modifying-code.mdx

@@ -1,7 +1,115 @@
 ---
 title: Modifying the Code
-description: Before we start coding, let's take a look at the code we will be working with.
-updated: 2024-09-13
+description: Lets modify the code to implement the Data API.
+updated: 2024-10-09
 authors: [owenwahlgren]
 icon: Book
----
+---
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+In this section we will modify the code to implement the Data API.
+
+### Modify Backend `src/app/api/explorer/route.ts`
+
+<Steps>
+<Step>
+First we will implement the `getRecentBlocks` function. The goal of this function is to fetch recent blocks from the Data API with all its information.
+
+<Accordions>
+<Accordion title="Hint">
+Reference the [AvaCloud SDK documentation](https://developers.avacloud.io/data-api/evm-blocks/list-latest-blocks) to see how to fetch the latest blocks.
+</Accordion>
+<Accordion title="Solution">
+```tsx title="src/app/api/explorer/route.ts"
+const getRecentBlocks = async () => {
+    const result = await avaCloudSDK.data.evm.blocks.getLatestBlocks({
+        pageSize: 1,
+      });
+
+    let count = 0;
+    const blocks: EvmBlock[] = [];
+    for await (const page of result) {
+        if (count === 20) {
+            break;
+        }
+        blocks.push(...page.result.blocks);
+        count++;
+    }
+    return blocks
+}
+```
+</Accordion>
+</Accordions>
+</Step>
+<Step>
+Next we will implement the `getRecentTransactions` function. The goal of this function is to fetch all native token transfers from the Data API.
+<Accordions>
+<Accordion title="Hint">
+Reference the [AvaCloud SDK documentation](https://developers.avacloud.io/data-api/evm-transactions/list-latest-transactions) to see how to fetch latest transactions.
+Note the `NativeTransaction` type that is imported, we should use this to combine paged results.
+</Accordion>
+<Accordion title="Solution">
+```tsx title="src/app/api/explorer/route.ts"
+const getRecentTransactions = async () => {
+    const result = await avaCloudSDK.data.evm.transactions.listLatestTransactions({
+        pageSize: 3,
+    });
+
+    let count = 0;
+    const transactions: NativeTransaction[] = [];
+    for await (const page of result) {
+        if (count === 20) {
+            break;
+        }
+        transactions.push(...page.result.transactions);
+        count++;
+    }
+    return transactions;
+}
+```
+</Accordion>
+</Accordions>
+</Step>
+</Steps>
+### Modify Frontend `src/app/basic-explorer/page.tsx`
+
+<Steps>
+<Step>
+</Step>
+<Step>
+First we will implement the `fetchRecentTransactions` function. The goal of this function is to make a call to our backend to get recent transactions.
+<Accordions>
+<Accordion title="Hint">
+Make a call to our backend first for our `getRecentTransactions` method. Finally return the results.
+</Accordion>
+<Accordion title="Solution">
+```tsx title="src/app/basic-explorer/page.tsx"
+  const fetchRecentTransactions = async () => {
+    const response = await fetch(`/api/explorer?method=getRecentTransactions`)
+    const data = await response.json()
+    return data as NativeTransaction[]
+  }
+```
+</Accordion>
+</Accordions>
+</Step>
+<Step>
+Next we will implement the `fetchRecentBlocks` function. The goal of this function is to make a call to our backend to get recent block information.
+<Accordions>
+<Accordion title="Hint">
+Make a call to our backend first for our `getRecentBlocks` method. Finally return the results.
+</Accordion>
+<Accordion title="Solution">
+```tsx title="src/app/basic-explorer/page.tsx"
+const fetchRecentBlocks = async () => {
+    const response = await fetch(`/api/explorer?method=getRecentBlocks`)
+    const data = await response.json()
+    return data as EvmBlock[]
+  }
+```
+</Accordion>
+</Accordions>
+</Step>
+
+
+</Steps>

content/course/avacloudapis/07-using-webhooks/01-overview.mdx

@@ -1,6 +1,6 @@
 ---
 title: Overview
-description: TBD
+description: Coming soon!
 updated: 2024-09-13
 authors: [owenwahlgren]
 icon: Book