# Building Price Feed application using 0rbit By [0rbit](https://paragraph.com/@0rbit) · 2024-05-13 --- 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/ec954f16999632ec8d5b0f3453a9aef3.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://images.mirror-media.xyz/publication-images/kFSl6j-5Yogd6XzmbaqUu.png?height=578&width=412 "null") _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( );` _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 (
Connect Wallet
); } export default App;` Now inside your `frontend` directory, run: `npm run dev` Great! Now you should have a page that looks like this: ![](https://images.mirror-media.xyz/publication-images/Vcuj-z1xI0wMBxUKLugM3.png?height=511&width=708 "null") _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 (

Crypto Price Checker

Connect Wallet
{currentPrice && (
Current Bitcoin Price: {currentPrice}
)}
); } 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://images.mirror-media.xyz/publication-images/cmadapEgBN6nFhwTNxsMb.png?height=511&width=708 "null") 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/building-price-feed-application-using-0rbit)*