News Feed Frontend Tutorial

May 5th, 2024

gm gm gm!!💫f

Today we will be building Frontend for the News Feed Contract built with 0rbit in the last blog. Check it out here:

Pre-Requisites

A basic understanding of aos
A basic understanding of any frontend framework In our case, we’ve used a React project with TypeScript using Vite
Understand the previous blog

Now to build the frontend for the News Feed Contract, we’ll do the following:

Create a React + TypeScript Project with the given template

Let's initialise our frontend project:

Go to the directory where you want to have your project and run:

git clone URL HERE

You can also initialize a React project with TypeScript using Vite yourself for a custom ui! See how here.

Yayy!! 🎉 you should now have the ui template set up.

Install the Required Dependencies

The @permaweb/aoconnect package includes all the main tools you need to interact with your Lua programs and the aos network.

npm install
npm install @permaweb/aoconnect

Add The `contracts` Folder to the Project Setup

For a clean separation of concerns, place your existing lua code in a new folder named contracts at the project root.

For understanding the code written in the contracts folder, feel free to visit here and comeback later. 😉

This is how your Folder Structure should look after following the mentioned steps.

Now inside your frontend directory, run:

npm run dev

Great! Now you should have a page that looks like this:

Implement `getNews.ts` :

Create a new folder named utils in src folder and make a new file getNews.ts in it.

We will be using DryRun for our call.

DryRun is the process of sending a message object to a specific process and getting the Result object back, but the memory is not saved, it is perfect to create a read message to return the current value of memory.

We create an asynchronous function getNews which calls GetNews Handler and returns a news Array.

import { dryrun } from "@permaweb/aoconnect";

const getNews = async () => {
};
export default getNews;

DryRun requires a process, to which the request is to be sent. We will also be sending a tag of name= “Action” and value = “Get-News” . This makes a call to GetNews Handler.

This returns an object with Messages, Spawns, Output and Error . Here, we will read the Messages array which is an array of the messages sent by the respective handler.

Tip: Make sure to replace the process attribute with the Process_ID where you have loaded the news-feed.lua contract.

const result = await dryrun({
    process: YOURPROCESSID, 
    // test on TwH9Qqw8ChJQJrNUxO9-cKzdryLRC8EH17YecaP7Pyc
    tags: [{ name: "Action", value: "Get-News" }],
  });
};

Messages array object has another array of Tags related to the message, here the first 6 tags give us information on the message sent by the handler and the rest give us our news array.

To access this we access the 1st (0th index) element of Messages and get the Tags array from it.

Make sure to check the length of the Tags array if not more than 6, no news is returned.

const news = result.Messages[0].Tags;
if (news.length == 6) {
	return "Error";
} else {
  return news;
}

You just completed your first interaction with an AO process using AOConnect! 🥳 You should definitely be proud of yourself!! Your final getNews.ts should look like this:

import { dryrun } from "@permaweb/aoconnect";

const getNews = async () => {

  const result = await dryrun({
     process: YOURPROCESSID, 
    // test on TwH9Qqw8ChJQJrNUxO9-cKzdryLRC8EH17YecaP7Pyc
    tags: [{ name: "Action", value: "Get-News" }],
  });

  const news = result.Messages[0].Tags;
  
  if (news.length == 6) {
    return "Error";
  } else {
    return news;
  }
  
};

export default getNews;

Modify the `NewsDisplay.tsx` file:

The final step is to utilize the getNews function and display it on the Frontend. You're encouraged to style the component according to your desired aesthetics.

Youll find the NewsDisplay.tsx file in src/Components folder. We will be Focussing on the fetchNewsHandler function.

Heres how it should look initially:

const fetchNewsHandler = async () => {
    setIsLoading(true);
    try {
      // FETCH HERE
    } catch (error) {
      setMessage("Error Occured. Please Contact Support on Discord");
      console.error();
      error;
    }
    setIsLoading(false);
  };

Right under the FETCH HERE comment lets call our getNews function. Make sure to import it at the top too.

import getNews from "../utils/getNews";

const fetchNewsHandler = async () => {
    setIsLoading(true);
    try {
      // FETCH HERE
      const news = await getNews();
    } catch (error) {
      setMessage("Error Occured. Please Contact Support on Discord");
      console.error();
      error;
    }
    setIsLoading(false);
  };

Now lets set our newsArr and message to be displayed based on recieved return.

const fetchNewsHandler = async () => {
    setIsLoading(true);
    try {
      // FETCH HERE
      const news = await getNews();
      
      if (news == "Error") {
        setMessage("Error Occured. Please Contact Support on Discord");
        setIsLoading(false);
        return "Error";
      } else {
        setMessage("Latest News, with 0rbit");
        setNewsArr(news);
      }
      
    } catch (error) {
      setMessage("Error Occured. Please Contact Support on Discord");
      console.error();
      error;
    }
    setIsLoading(false);
  };

Note: make sure when mapping the newsArr to only display tags after 5th index, the ones with the news!

Please visit http://localhost:5173/. Upon arrival, the interface should resemble the following image. Click the "Get News" button to retrieve the latest news that 0rbit fetched. After clicking, the news headlines and details should become visible!

You just built a fullstack dapp on `AO` using `0RBIT`

Here is the repo for this project.

If you run into any problems, a good first step is to compare your code to this repo and resolve any differences.

Tweet us @0rbitco letting us know you just built a dapp using 0rbit, you might get invited to a private group of builders or maybe get alpha on the project, or something 👀.