# Building Price Feed application using 0rbit 

By [0rbit](https://paragraph.com/@0rbit-2) · 2024-04-08

---

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:

[https://mirror.xyz/0x26B11B188E9E69b2426FD6111302E721F423020E/swI6Kw1uZ9gSRDuSFEo0B99BEAsSS7kEOyRcJwfMQNo](https://mirror.xyz/0x26B11B188E9E69b2426FD6111302E721F423020E/swI6Kw1uZ9gSRDuSFEo0B99BEAsSS7kEOyRcJwfMQNo)

_Pre-Requisites_
----------------

1.  A basic understanding of AOS
    
2.  A basic understanding of any frontend framework
    
3.  Understand the [previous blog](https://mirror.xyz/0x26B11B188E9E69b2426FD6111302E721F423020E/swI6Kw1uZ9gSRDuSFEo0B99BEAsSS7kEOyRcJwfMQNo)
    

**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](https://chromewebstore.google.com/detail/arconnect/einnioafmpimabjcddiinlhmijaionap?hl=en-GB&utm_source=ext_sidebar).

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](https://vitejs.dev/).

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

![](https://storage.googleapis.com/papyrus_images/3e861a2d8b9dd601ca60edae1c7898991032a5e5c3cb82a9534ef126a0dcf93a.png)

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

![](https://storage.googleapis.com/papyrus_images/6634108c4ea342909f13740162f4b974f9bc4886386e23a9037ad1b58deaac97.png)

_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](https://docs.arweavekit.com/) 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:

![](https://storage.googleapis.com/papyrus_images/54880e2152f271f788b704759fdf90a59c6c29bd297c6c15cd9996a25bff1d0d.png)

_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/](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.

![](https://storage.googleapis.com/papyrus_images/3aeb33d9eb013fae2809cfcc0efe038f9d20de7001dae93088b4dbf1df914d92.png)

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:

[https://github.com/0rbit-co/price-feed-tutorial](https://github.com/0rbit-co/price-feed-tutorial)

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](https://twitter.com/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.](https://discord.gg/KWPkD96vdv) 💫

---

*Originally published on [0rbit](https://paragraph.com/@0rbit-2/building-price-feed-application-using-0rbit)*