Closed mazurroman closed 1 month ago
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.
I am applying to this issue via OnlyDust platform.
hi am nuelo
i have frontend and data analysis expirence and would like to handle this task
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
Update the Chart with the Fetched Data
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:
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.
I am applying to this issue via OnlyDust platform.
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 )
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
I am applying to this issue via OnlyDust platform.
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
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.
I am applying to this issue via OnlyDust platform.
I am very good at ui design and visual representation
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.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
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.
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.
API Integration:
Data Retrieval:
Component Modification:
Data Mapping:
Data Processing:
API Endpoints:
Display Live Data:
Data Accuracy:
Performance Testing:
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!
I am applying to this issue via OnlyDust platform.
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.
Thank you.
I am applying to this issue via OnlyDust platform.
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.
I am applying to this issue via OnlyDust platform.
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"
Step by Step:
I am applying to this issue via OnlyDust platform.
I am a software developer with over 6 years experience building applications using Javascript and Typescript
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.
I am applying to this issue via OnlyDust platform.
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
Understand the Requirements and Set Up Coinbase API Integration
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.
I am applying to this issue via OnlyDust platform.
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.
I would simply request all the required data from the Counbase API and input the data where needed
I am applying to this issue via OnlyDust platform.
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:
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();
}, []);
transaction-history.tsx
:
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!
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?
Understanding the Requirement:
Setting Up the Environment:
Fetching Data from Coinbase API:
https://api.coinbase.com/v2/prices/BTC-USD/spot
to get the current price of Bitcoin in USD.Updating the Chart:
Error Handling:
Testing:
By leveraging my background and approach, I am confident in my ability to successfully complete this task and provide a seamless user experience.
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
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.
@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:
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 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.
⚠️ 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.