Display on FE TVL and Users

[djeck1432]

1. Read guidelines.
2. This method http://localhost:8000/api/get_stats should return you next data:

{
  "total_opened_amount": "1000.0",
  "unique_users": 0
}

3. Make it dynamic and fetch data from endpoint and display in fronted code
4. On Fronted it should be TVL=total_opened_amount and Users = unique_users which you can fetch from Backend endpoint

[mimisavage]

Can I be assigned to this ?

[djeck1432]

@mimisavage read guideline and feel free to apply to another issue

[mimisavage]

I want to take on this issue, can I be assigned?

[josephchimebuka]

I’d like to work on this.

[mimisavage]

I want to take on this issue, can I be assigned?

[aniruddhaaps]

I'm a javascript dev, a new-comer here. I want to take up the issue and solve it.

[mimisavage]

Can I resolve this ?

[aniruddhaaps]

To implement this, I’ll update the frontend to dynamically display "TVL" and "Users" by fetching total_opened_amount and unique_users from the /api/get_stats endpoints which will render the response accordingly and accurately.

[0xdevcollins]

I’d like to help with this.

[KevinLatino]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a deep passion for Web3 and I am currently working as a frontend developer intern at a Web2 company, focusing on Next.js. Additionally, I am an active member of Dojo Coding, a prominent Web3 community in LATAM, which has given me great exposure to decentralized technologies.

Recently, I have been working on a project for Base LATAM's Buildathon, where I am gaining hands-on experience in building decentralized applications. I am eager to continue growing and contributing, and see this as a fantastic opportunity to further develop my skills and make a significant impact.

This is my first OD Hack, so I will appreciate it if you give me the chance to contribute to this amazing project.

Some frontend projects that i have:
https://buildmyevent.xyz/
https://peritazgo-website.vercel.app/

Also as a fun fact, i like 🍒

How I plan on tackling this issue

To address this issue effectively, here's my plan:

I will start by verifying the data structure from http://localhost:8000/api/get_stats to correctly map total_opened_amount as TVL and unique_users as Users. Then, I'll set up the API integration using fetch or axios, with proper error handling and loading states. Finally, I’ll map the data to the frontend UI, ensuring live updates with React’s useEffect and test edge cases like server issues and data format consistency.

Upon assignment, I will set up the project following the README.md instructions and open a draft PR within 24 hours. Before submitting, I will ensure isort and black are run on modified files only, add type annotations and docstrings to all new code, and verify successful GitHub workflows.

@djeck1432 I would love to contribute to this amazing project! I hope you can give me the opportunity!

[mimisavage]

Can I be assigned to this ?

I need to fetch data from the /api/ get_ stats endpoint, which returns
JSON data containing total_opened_amount and unique_ users. I'll then display this data on the frontend, mapping total_opened _amount to TVL and unique users to Users.

I'll use JavaScript with the Fetch API to make a GET request to the endpoint. For simplicity, I'll assume a basic HTML structure and use Vanilla JavaScript.

Will create a JavaScript function to fetch data from the endpoint.

I'll create HTML elements to display TVL and Users, and update them with the fetched data
Then add error handling and consider edge cases, such as:
• Handling cases where the endpoint returns an error or no data.
• Updating the frontend to indicate loading or error states.
Then my final code

[caxtonacollins]

May I pick this up? I like 🍒

[mimisavage]

I want to take on this issue, can I be assigned?

[martinvibes]

i would hanndke this task in the following way i like 🍒

• Set Up Backend Endpoint: Ensure /api/get_stats returns total_opened_amount and unique_users values.

• Fetch Data on Frontend: Create a function to request data from the /api/get_stats endpoint.

• Display Data on Frontend: Map total_opened_amount to "TVL" and unique_users to "Users," then display these on the frontend.

• Test and Verify: Ensure values update dynamically based on the backend response.

[mimisavage]

Can I be assigned?