UI: Live price for the homepage chart

[mazurroman]

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

Task description

In the chart on the homepage, the "Price" always says $2 because it is hardcoded. Fetch the live data from Coinbase API and display the accurate price for each date in the chart.

[Iwueseiter]

Hi @mazurroman can I work on this? I’m a frontend developer and also a blockchain developer. I’ve work on projects on onlydust before.

I’d go through the code and understand. Then to implement the task, I’d get the latest price from coin base API using endPoint. I’d integrate the fetched data into the cart to display the accurate prices. Then set up regular updates to ensure prices are updated regularly by calling the API at intervals. I’d deliver a PR promptly if assigned.

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hi am nuelo

i have frontend and data analysis expirence and would like to handle this task

How I plan on tackling this issue

Set Up the HTML and bundle.js(compiled ts) refactor price to dynamicaly set to the price value gotten from the api and not a fixed price of $2.

Fetch Live Data from Coinbase API

• fetchLiveData function fetches the current spot price from the Coinbase API.
• updateChart function updates the chart with the fetched price and the current date.
• The chart is updated every minute by calling updateChart initially and then setting an interval.

Update the Chart with the Fetched Data

[ShantelPeters]

I am apple for this issue via https://app.onlydust.com/p/opscan

Hello, I've read the contributors guidelines and I'm excited to help with this task. I have a background in web development, with experience in JavaScript, APIs, and data visualization.

To approach this problem, I would:

1. Research the Coinbase API documentation to understand the available endpoints and parameters for fetching live price data.
2. Choose the suitable API endpoint to fetch the historical price data for the required dates.
3. Use JavaScript to make API calls to Coinbase and retrieve the live price data.
4. Update the chart on the homepage to display the accurate price for each date, using the fetched data.
5. Ensure the chart is updated dynamically as new data is fetched.

My background in web development and experience with APIs and data visualization can be leveraged to complete this task efficiently. I'm confident in my ability to fetch and display the live price data accurately in the chart.

Please assign me this task, and I'll deliver the updated code to display the accurate price data in the chart.

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I can take this

I've worked with a lot of Walnut projects and I'm ready to tackle this issue. In the OP scan project, I was developing token transfers in tx details page (#13 )

How I plan on tackling this issue

In the strakflare project, I have already worked with the recharts library, in this task it is necessary to refine the LineChart component, taking into account that I already have experience, it will not be difficult to do this My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[blessingbytes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hi my name is Blessing am a frontend developer with expirence in using JS, APIs and frontend frame works i would love to contribute to this project

How I plan on tackling this issue

HTML Structure:

Added a canvas element with the ID priceChart for rendering the chart. CSS Styling:

Centered the canvas in the viewport. JavaScript:

Imported Chart.js. Initialized a new chart with Chart.js, using a line chart type. Created a fetchPriceData function to fetch the current price from the Coinbase API. The fetchPriceData function updates the chart with the fetched data. Used setInterval to fetch and update the price every minute.

[Calebux]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am very good at ui design and visual representation

How I plan on tackling this issue

1. Set Up the HTML and Chart.js:

HTML Structure: Begin by creating a clean and semantic HTML structure. This will include a container for the chart, a header, and any necessary controls or information displays. Include Chart.js: Integrate Chart.js by adding the necessary script tags in the HTML file or by using a package manager like npm to install it. Set up the initial chart configuration within a script tag or external JavaScript file. Styling: Apply CSS to ensure the chart and its container are responsive and visually appealing.

2. Fetch Live Data from the Coinbase API

API Integration: Use JavaScript to fetch live data from the Coinbase API. Set up the necessary API endpoints and handle authentication if required. Data Handling: Parse the fetched data to extract relevant information such as cryptocurrency prices, timestamps, or any other necessary metrics. Error Handling: Implement robust error handling to manage issues such as network failures or API rate limits.

3. Update the Chart with the Fetched Data:

Dynamic Updates: Use Chart.js methods to update the chart in real-time with the fetched data. This will involve adding new data points and updating existing ones. Smooth Transitions: Ensure that the updates are smooth and visually pleasing. Utilize Chart.js animation capabilities to enhance the user experience. Optimizations: Implement optimizations to manage performance, especially if dealing with large datasets or frequent updates.

[armandocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a Full-Stack Developer with a year of experience, I am well-prepared to contribute effectively to your project. My technical and soft skills have enabled me to successfully complete contributions to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards.

I am adept at problem-solving and take pride in creating applications that reduce workloads across various departments. My ability to adapt and learn quickly enables me to tackle new challenges effectively and independently, making me highly capable of addressing complex issues and implementing efficient solutions.

I am also a member of "Dojo coding," a community where many developers contribute to various projects. This community provides substantial support and knowledge-sharing, enhancing my ability to contribute effectively.

Effective communication is one of my strengths. I ensure that my explanations and descriptions are detailed and user-friendly, which has been appreciated by the maintainers I've worked with. My tech stack aligns perfectly with the project's requirements, ensuring a smooth integration and development process.

Overall, my skills, experience, and community support make me well-equipped to contribute to your project by resolving issues efficiently and delivering high-quality, impactful solutions.

How I plan on tackling this issue

Request for Issue Assignment: Fetch Live Data from Coinbase API for Chart on Homepage

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards. Below, I have outlined a detailed plan on how I will approach and solve this issue.

Technical Plan

Objective

To fetch live data from the Coinbase API and display the accurate price for each date in the chart on the homepage, replacing the hardcoded $2 value.

Step-by-Step Implementation

Fetch Live Data from Coinbase API

API Integration:

• Integrate the Coinbase API to fetch the current price data. Refer to the Coinbase API documentation for guidance.

Data Retrieval:

• Implement a function to fetch the live price data for the required dates and time intervals.

Update Chart Component

Component Modification:

• Identify and modify the chart component responsible for displaying the price data.
• Replace the hardcoded $2 value with the dynamic data fetched from the Coinbase API.

Data Mapping:

• Ensure the fetched price data is correctly mapped to the respective dates in the chart.

Backend Modifications

Data Processing:

• Modify or extend existing backend functions to handle the fetching and processing of price data from the Coinbase API.

API Endpoints:

• Develop or modify existing API endpoints to serve the live price data to the frontend chart component.

Frontend Modifications

Display Live Data:

• Update the frontend code to display the live price data in the chart.
• Ensure the chart dynamically updates as new data is fetched.

Validation and Testing

Data Accuracy:

• Conduct thorough testing to ensure the accuracy of the displayed price data.

Performance Testing:

• Validate that the API integration and data fetching do not negatively impact the performance of the homepage.

Conclusion

Given my previous contributions to Walnut's repositories and my familiarity with the codebase, I am confident in my ability to resolve this issue effectively. My detailed and technical approach ensures that the solution will meet the project's standards and improve the user experience.

Thank you for considering my request. I look forward to contributing further to Walnut's repositories.

Best regards!

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @mazurroman,

I can easily work on this task if the issue is assigned to me. I have 3 years of expertise working with Next.js, TypeScript, React, Redux, and Tailwind CSS. I worked on the block details page in the last ODHack.

How I plan on tackling this issue

Proposed Solution

• I will utilize the Coinbase API to fetch and update the current price accordingly.
  • I will also ensure that the appropriate data is displayed on the x and y axes of the chart, respectively.
  • I will make sure data is fetched server-side, similar to how the Coinbase API was used in lib/fetch-data.ts.

Thank you.

[lindsaymoralesb]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! My name is Lindsay, and I'm a Software Engineer based in Costa Rica. I'm part of Dojo Coding community, and thanks to that I've already successfully contributed to the last 4 ODHacks in various projects, feel free to check my profile and contributions. I've been working over the past 4.5 years as a full stack developer, specializing myself in frontend development. I've successfully integrated APis, developed new features, optmize projects, etc with the most known/used FE frameworks such as React, Next, Vue, and Angular. All this experience plus some courses I've taken had helped me master both javascript and typescript languages.

How I plan on tackling this issue

1. Research about the Coinbase API and how to integrate it in the project.
2. Integrate the API.
3. I would create a custom hook to manage the data fetching.
4. Refactor the component to remove hardcoded values and use the API data instead.

[fabrobles92]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello Fab here, In my day to day I work as a Full Stack developer using React/Vue together with typescript in the frontend and Node and Django in the Backend. Lately I've been involved contributing to OSS projects related to the OP Stack and I am interested in collaborating for this project as well.

Also as a Plus I am member of Web3 Community "Dojo Coding"

How I plan on tackling this issue

Step by Step:

• Spot where the value is hardcoded
• Read Coinbase API docs to get the data I need and also see the shape of the JSON that I would receive
• Build a function that will fetch the data from the API passing correct params to get accurate data
• Replace hardcoded value with data gotten from API
• In case is needed I could make Unit test

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with over 6 years experience building applications using Javascript and Typescript

How I plan on tackling this issue

I would fetch the live data from Coinbase API and display the accurate price for each date in the chart and test to confirm that it works perfectly.

[jancris100]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am member from dojo coding I have a strong background in backend development i am web developer with 2 year of profesional experience, My skills in API integration, particularly in making HTTP requests and handling JSON data, will be directly applicable to fetching live data from the Coinbase API

How I plan on tackling this issue

Understand the Requirements and Set Up Coinbase API Integration

[MullerTheScientist]

Hello @mazurroman,

I am reaching out via the OnlyDust platform to express my interest in addressing this issue.

Background: I am MullerTheScientist, a proficient front-end developer and data scientist with extensive experience in the field. My active involvement in various projects has honed my ability to efficiently handle intricate challenges. I possess a robust foundation in integrating APIs and optimizing web applications, particularly using modern JavaScript frameworks like React, Next.js, and Node.js. I am enthusiastic about the prospect of contributing to this project.

[Jayse007]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a django backend developer with intensive knowledge of ALISTAIR. I've worked on this type of project multiple times and this is no issue.

How I plan on tackling this issue

I would simply request all the required data from the Counbase API and input the data where needed

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

UI: Live price for the homepage chart

Hello Walnut team,

I am Joel Vargas, and I'm member of Dojo Coding. I also come from OnlyDust

I would like to request the assignment of the issue related to using the live price in the chart. As a previous contributor to your project, I am familiar with the codebase and would be happy to contribute. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

• Fetch the Price: Assuming that the fetchHomePageData function already retrieves the data, the implementation in the chart section can be achieved with the following things.

Initial Data Setup: Set the initial data to display a placeholder value (e.g., $2) while the real data is being fetched. This is done with the following code:

const initialData = Array.from({ length: 15 }, (_, i) => {
  const date = subDays(new Date(), 15 - i);
  return {
    name: format(date, "MMM d"),
    date: format(date, "yyyy-MM-dd"),
    transactionsCount: Math.floor(Math.random() * 200) + 400,
    price: 2,
  };
});

State Management: Use useState to manage the chart data:

const [data, setData] =
    useState<
      { name: string; date: string; transactionsCount: number; price: number }[]
    >(initialData);

Data Fetching: Use useEffect to fetch the data and update the chart:

useEffect(() => {
    const fetchData = async () => {
      const { tokensPrices } = await fetchHomePageData();

      const chartData = Array.from({ length: 15 }, (_, i) => i).map((i) => {
        const date = subDays(new Date(), 15 - i);
        return {
          name: format(date, "MMM d"),
          date: format(date, "yyyy-MM-dd"),
          transactionsCount: Math.floor(Math.random() * 200) + 400,
          price: tokensPrices.op.today,
        };
      });

      setData(chartData);
    };

    fetchData();
  }, []);

• Changes in transaction-history.tsx:

With this approach, we get these results:

While the data is loading:

When the data is ready:

I am willing to follow any specific guidelines the team may have. I appreciate the opportunity to contribute and am ready to start as soon as the issue is assigned to me.

Also, if you need, you can contact me by Telegram

Thank you!

[ScottyDavies]

I am applying for this issue via https://app.onlydust.com/p/opscan

Tell us about your background and how it can be leveraged:

I am a frontend developer with extensive experience in building and maintaining web applications. My expertise includes working with various APIs to fetch and display real-time data, ensuring that the user interface is both functional and visually appealing. My background in machine repair involving printing, embroidery, and wrapping machines has honed my problem-solving skills and attention to detail, which are crucial for developing robust frontend solutions.

How would you approach the problem?

1. Understanding the Requirement:

   • The main task is to replace the hardcoded price of $2 with live data fetched from the Coinbase API and display the accurate price for each date in the chart.

2. Setting Up the Environment:

   • Ensure that the development environment is properly set up with the necessary tools and libraries for making API requests (e.g., Axios or Fetch API).

3. Fetching Data from Coinbase API:

   • Use the Coinbase API to fetch the latest price data. For instance, you can use the endpoint https://api.coinbase.com/v2/prices/BTC-USD/spot to get the current price of Bitcoin in USD.
   • Handle the API response and extract the relevant price information.

4. Updating the Chart:

   • Parse the fetched data and update the chart to display the accurate price for each date.
   • Ensure that the chart updates dynamically whenever new data is fetched.

5. Error Handling:

   • Implement proper error handling to manage any issues that may arise during the API request, such as network errors or invalid responses.

6. Testing:

   • Thoroughly test the implementation to ensure that the live data is correctly fetched and displayed in the chart.
   • Verify that the chart updates accurately over time and handles different scenarios gracefully.

By leveraging my background and approach, I am confident in my ability to successfully complete this task and provide a seamless user experience.

---

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I’m Isaac, a JavaScript developer with notable experience contributing to projects on OnlyDust on and off the ODHACK. I am a returning contributor to your project and would love to contribute more here.

I’m skilled in using JavaScript and typescript to build out efficient solutions and this experience of mine can be seen on my OnlyDust profile at https://app.onlydust.com/u/Dprof-in-tech and on my GitHub at https://github.com/dprof-in-tech

I have my proposed solution to this issue below.

How I plan on tackling this issue

Here's my plan for improving the chart on the homepage by integrating dynamic data from the Coinbase API:

Analyze the Current Chart Code:
    First, I'll go through the existing code for the chart on the homepage.
    I'll locate where the hardcoded $2 price is being set.

Research the Coinbase API:
    I'll check out the Coinbase API documentation to find the right endpoint for historical price data.
    I'll figure out the parameters needed, like the cryptocurrency symbol and date range.

Set Up API Access:
    If necessary, I'll sign up for a Coinbase developer account.
    I'll get any required API keys or authentication credentials.

Create a Function to Fetch Data:
    I'll write an asynchronous function using fetch or axios to make API requests.
    I'll include error handling for network issues or API errors.

Determine the Date Range:
    I'll identify the start and end dates currently shown in the chart.
    I'll format these dates according to Coinbase API requirements.

Fetch Historical Price Data:
    I'll call the API function with the appropriate date range and cryptocurrency.
    I'll parse the JSON response to extract the price data for each date.

Format the Data for the Chart:
    I'll transform the API response into the format expected by the charting library.
    I'll ensure that dates and prices are correctly mapped.

Update the Chart Rendering Function:
    I'll modify the existing chart code to use the new dynamic data instead of hardcoded values.
    I'll update any data processing or formatting logic as needed.

Add Loading Indicators:
    I'll display a loading spinner or message while fetching data.
    I'll ensure a smooth transition when updating the chart with new data.

Implement Error Handling:
    I'll add user-friendly error messages for API failures or data issues.
    I'll provide fallback options, such as displaying the last known good data.

Optimize Performance:
    I'll consider implementing lazy loading or pagination for large date ranges.
    I'll optimize the rendering process to handle frequent updates efficiently.

Update Related Components:
    I'll identify and update any other components that rely on the price data.
    This may include summary statistics, tooltips, or linked visualizations.

Implement Auto-Refresh:
    I'll add a mechanism to periodically refresh the data (e.g., every 5 minutes).
    I'll ensure that refreshes don't disrupt the user experience.

Add User Controls (Optional):
    I'll consider adding options for users to select different date ranges or cryptocurrencies.
    I'll implement any necessary UI elements for these controls.

Thorough Testing:
    I'll test the chart with various date ranges and market conditions.
    I'll verify that the chart correctly handles weekends, holidays, and market closures.
    I'll ensure that the chart remains responsive and accurate during price volatility.

Optimize API Usage:
    I'll implement rate limiting to comply with Coinbase API restrictions.
    I'll consider using websockets for real-time updates if supported.

Document the Changes:
    I'll update any relevant documentation or comments in the code.
    I'll provide clear instructions for maintaining and extending the new functionality.

Conduct a Code Review:
    I'll review the changes with team members to ensure code quality and adherence to best practices.
    I'll address any feedback or suggestions from the review.

Deploy and Monitor:
    I'll deploy the changes to a staging environment for final testing.
    After successful testing, I'll deploy to production.
    I'll monitor the live chart for any issues or unexpected behavior.

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I am a fullstack developer with 4 years of experience. I'm thrilled about the chance to contribute to the Op Scan Project. With 4 years of solid experience in Next.js, TypeScript, Shadcn, and React, I'm confident in my ability to deliver an efficient and user-friendly Contract page for transactions.

How I plan on tackling this issue

I will leverage the Coinbase API to dynamically pull and refresh the latest price data. I will precisely map the data onto the x and y axes of the chart to ensure accurate visual I will handle data retrieval on the server side, adopting the same approach as used with the Coinbase API in lib/api-data.ts for optimal performance.

[saimeunt]

@Dprof-in-tech assigning this to you, please don't hesitate to reach out to me if you face any problem regarding this issue.

Regarding your implementation, please follow these guidelines:

• you can see how the Coinbase API is used elsewhere in the homepage, it's not necessary to signup for an API key as this is an unauthenticated API.
• please use standard fetch, do not add axios or another library on top.
• fetch the OP token price, later in the future we will need to add this as a config option but it's out of scope at the moment.
• please stay within the scope of this issue which is very limited, in particular do not add loading indicators, auto refresh or additional controls to display another range as this is not needed at the moment.

Very recently shadcn/ui added a Chart component which is supposed to be a thin wrapper over Recharts which is what is used currently in the code base. If you can achieve a similar result by switching from plain Recharts to this new shadcn/ui component please do so.

[Dprof-in-tech]

@Dprof-in-tech assigning this to you, please don't hesitate to reach out to me if you face any problem regarding this issue.

Regarding your implementation, please follow these guidelines:

* you can see how the Coinbase API is used elsewhere in the homepage, it's not necessary to signup for an API key as this is an unauthenticated API.

* please use standard fetch, do not add axios or another library on top.

* fetch the OP token price, later in the future we will need to add this as a config option but it's out of scope at the moment.

* please stay within the scope of this issue which is very limited, in particular do not add loading indicators, auto refresh or additional controls to display another range as this is not needed at the moment.

Very recently shadcn/ui added a Chart component which is supposed to be a thin wrapper over Recharts which is what is used currently in the code base. If you can achieve a similar result by switching from plain Recharts to this new shadcn/ui component please do so.

sure thing chief.