gm gm gm!!💫

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

Pre-Requisites

1. A basic understanding of AOS

2. A basic understanding of any frontend framework

3. Understand the previous blog

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

Installing the ArConnect Wallet

Our frontend application will allow users to connect with a wallet, so you'll need to have a browser wallet installed.

Before going to the next steps, install the ArConnect Wallet here.

If you have previously installed the wallet, make sure you have updated it to the latest version.

Congrats! you just installed and created your first ArConnect Wallet 😯

Initialize a React + TypeScript Project

To split our project's contract from frontend code, let's initialize our frontend project:

Now, initialize a React project with TypeScript using Vite.

Yayy!! 🎉 you should now have a basic ReactJS Project Setup.

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. The arweave-wallet-kit combines tools and resources into one easy to use library, to get started building with Arweave.

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 step.

Modify the main.tsx file:

Inside the frontend/src/main.tsx wrap our app with the ArweaveWalletKit component.

Add the imports below to the top of your main.tsx file.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ArweaveWalletKit } from "arweave-wallet-kit";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ArweaveWalletKit
      config={{
        permissions: ["SIGN_TRANSACTION"],
        ensurePermissions: true,
      }}
    >
      <App />
    </ArweaveWalletKit>
  </React.StrictMode>
);

Implement Connect Wallet Functionality:

We will use arweave-wallet-kit to implement the Connect Wallet. ArweaveKit is a super useful tool that aims to lower the barrier of onboarding and building on Arweave by creating a well-documented one-stop library.

import { ConnectButton } from "arweave-wallet-kit";

function App() {

  return (
    <div className="flex justify-center items-center h-screen">
        <div className="mb-4">
          <ConnectButton profileModal={true} showBalance={false}>
            Connect Wallet
          </ConnectButton>
        </div>
    </div>
  );
}

export default App;

Now inside your frontend directory, run:

npm run dev

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

Implement getPrice.ts :

Create a new folder named utils and add getPrice.ts to it.

message and spawn both require signing a DataItem with a wallet. createDataItemSigner is a convenience api that, given a wallet, returns a function that can be passed to both message and spawn in order to properly sign DataItems.

The message API sends a message to an ao Message Unit (MU) targeting an ao process.

The result API reads the result of the message evaluation from an ao Compute Unit (CU). Here, it is used to read the price of “BTC” provided by the 0RBIT’s GET Request Handler.

• Tip:

  Make sure to replace the process attribute with the Process_ID where you have loaded the pricefeed.lua contract.

import { createDataItemSigner, message, result } from "@permaweb/aoconnect";

const getPrice = async () => {
    const msg = await message({
      process: "VxjJDgfj7-sXULTybk6mk0IZOhe7T0Y4pbxANJXnfEY",
      signer: createDataItemSigner(window.arweaveWallet),
      tags: [
        { name: "Action", value: "Get-Token-Price" },
        { name: "Token", value: "BTC" }
    ],
    });
let { Messages } = await result({
        message: msg,
        process: "VxjJDgfj7-sXULTybk6mk0IZOhe7T0Y4pbxANJXnfEY",
    });

    return Messages[0];
}

export default getPrice;

You just completed your first interaction with an AO process using AOConnect! 🥳 You should definitely be proud of yourself.

Modify the App.tsx file:

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

import React, { useState } from "react";
import { ConnectButton } from "arweave-wallet-kit";
import getPrice from "./utils/getPrice";

function App() {
  const [currentPrice, setCurrentPrice] = useState(null);
  const [loading, setLoading] = useState(false);

  async function setPrice() {
    setLoading(true);
    const price = await getPrice();
    setCurrentPrice(price.Data);
    setLoading(false);
  }

  return (
    <div className="flex justify-center items-center h-screen">
      <div className="bg-white border border-gray-300 p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold mb-4">Crypto Price Checker</h1>
        <div className="mb-4">
          <ConnectButton profileModal={true} showBalance={false}>
            Connect Wallet
          </ConnectButton>
        </div>
        <div className="mb-4">
          <button
            onClick={() => setPrice()}
            className="bg-black hover:bg-gray-900 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            disabled={loading}
          >
            {loading ? "Fetching Price..." : "Get Price"}
          </button>
        </div>
        {currentPrice && (
          <div className="text-lg">Current Bitcoin Price: {currentPrice}</div>
        )}
      </div>
    </div>
  );
}

export default App;

Please visit `http://localhost:5173/. Upon arrival, the interface should resemble the following image. Click the "Get Price" button to retrieve the price of the "BTC" token. After clicking, the price value should become visible.

Once the button is clicked, the price value will appear in the designated area.

You just built a fullstack dapp on AO with 0RBIT

Need Help?

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 👀

Get help from the team by posting your question in the 0RBIT’s Discord Channel. 💫