Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Portfolio by asset type" section with a donut chart #879

Open
Kevils opened this issue Oct 14, 2024 · 29 comments · May be fixed by #920
Open

Add "Portfolio by asset type" section with a donut chart #879

Kevils opened this issue Oct 14, 2024 · 29 comments · May be fixed by #920
Assignees
Labels
OD Hack Issue reserved for the OD Hack open for contribution An issue that is available for an Only Dust contribution

Comments

@Kevils
Copy link
Collaborator

Kevils commented Oct 14, 2024

Figma : https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5992-2849&t=dvRbR5qAwsX8KioR-1

image

@Kevils Kevils added the OD Hack Issue reserved for the OD Hack label Oct 14, 2024
@Kevils Kevils mentioned this issue Oct 14, 2024
@thiagoulloa
Copy link
Contributor

Can I work on this?

@fricoben fricoben added the open for contribution An issue that is available for an Only Dust contribution label Oct 16, 2024
@kfastov
Copy link

kfastov commented Oct 24, 2024

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Web3 Developer with experience in Rust, Cairo, TypeScript, JavaScript, Node.js, and Solidity. I've been part of ODHacks since 2.0, working as both a contributor and maintainer. I’m someone who adapts quickly and likes getting things done.

Now, in Edition 9, I'm excited to put my skills to work to keep pushing blockchain development forward. I'm confident I can tackle the challenges ahead and provide practical solutions.

How I plan on tackling this issue

  1. Check if data needed is already here. If not, fetch it, e.g. from Voyager API
  2. Check if the project already uses some UI library for charts, or add one
  3. Create the portfolio UI component using provided design
  4. Test it on different screen resolutions, write some automated tests if used in the project

@bhavyagosai
Copy link
Contributor

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am Bhavya, a seasoned frontend engineer with two years of professional experience. I have been working with react, react native, nextjs, typescript, shadcn, tailwindcss for a while now. Have worked previously starknet quest so I am already familiar with the codebase

How I plan on tackling this issue

very easy task. Just need to use chart.js library being used by the project to implement this by feeding the necessary data and displaying it accordingly.

Legend displaying might not happen in built with the library as shown in the design. Thus, that can be done manually and exact design can be easily implemented.

Have taken a look at the figma designs. Should not take very long to implement.

ETA: max 1 day

@DanielEmmanuel1
Copy link

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Good day, My name is Deon, I'm a Full-Stack web3 developer with experience in building interactive and responsive web applications,

I have a strong foundation in JavaScript, React, and data visualization libraries like D3.js and Chart.js. My experience in designing user-friendly interfaces aligns with the goals of this project.

How I plan on tackling this issue

  • Firstly I'll utilize the circular chart design from Figma as a reference to ensure consistency with the overall application aesthetic.

  • Next will be to fetch user asset data from the backend, ensuring that the data is structured to facilitate the donut chart visualization.

-Next, I'll start with the chart implimentations by:

  • Using [Chart.js/D3.js] to create the donut chart component.

  • Implementing tooltips to display detailed information on hover, enhancing user interactivity.

  • After that is done, I'll make sure that the chart is responsive and looks great on both desktop and mobile devices.

Finally I'll conduct thorough testing to confirm that the chart accurately reflects the user's asset distribution and functions correctly across different devices and browsers.

@MrRoudyk
Copy link

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Software Engineer with 10 years of experience. For the past 5 years, I’ve specialized in HR Tech solutions, now used by tens of thousands of companies and hundreds of thousands of users. I have also contributed to open source development at OnlyDust (My OnlyDust Profile).

I’m passionate about exploring new technologies and currently seeking to deepen my expertise in blockchain, smart contracts, and decentralized applications.

How I plan on tackling this issue

First, I will study the design in Figma to understand the requirements and styling. Then, I will choose a suitable library for creating the chart, such as Recharts. I will create the chart component using the provided data. After that, I will integrate this component into the project. Finally, I will style the section according to the design and conduct testing.

@ShantelPeters
Copy link
Contributor

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a solid background in front-end development, particularly with responsive design and user interface implementation. My experience includes translating Figma designs into functional web applications while ensuring pixel-perfect accuracy and maintaining usability across different devices.

I will leverage my design implementation skills to replicate the Figma layout accurately, focusing on details like spacing, typography, and interactive elements. I have a strong understanding of CSS frameworks and best practices for responsiveness, which will allow me to create a seamless user experience that aligns with the design specifications. Additionally, I will ensure that the final product is thoroughly tested for usability and performance across various browsers and devices.

How I plan on tackling this issue

To implement the design from the provided Figma file, I will begin by analyzing the layout and components in detail, identifying all necessary elements, including buttons, text fields, and images. I will then create a structured HTML framework to ensure semantic markup and accessibility. Using CSS, I will replicate the exact styles specified in the Figma design, ensuring pixel-perfect accuracy in terms of spacing, colors, and fonts.

For responsiveness, I will employ media queries and a mobile-first approach to ensure that the design adapts seamlessly to various screen sizes. I will also implement any interactive elements using JavaScript, ensuring they function as intended and enhance user experience. Throughout the process, I will conduct regular testing in different browsers and devices to catch and address any inconsistencies. Finally, I will document the implementation process to facilitate future maintenance and updates.

@aniruddhaaps
Copy link

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a python dev . A new-comer here, willing and ready to contribute to solve the issue.

@PedroCo3lho
Copy link
Contributor

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience working in the starknet.quest where I implemented new designs and integrated them with the backend. I am familiar with frameworks such as React and Next.js, and proficient in JavaScript and TypeScript.

How I plan on tackling this issue

I'd like to work on this.
My previous work in the project #825

@Marchand-Nicolas
Copy link
Collaborator

I will assign someone after #880 is merged, so that it's easier as you can reuse the chart component, and proceed almost the same to fetch the data

@caxtonacollins
Copy link

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am applying to this issue via https://app.onlydust.com/p/starknet-quest

I am Collins Caxton, a fullstack developer with a strong background in integrating APIs and designing responsive UI components based on Figma designs. I have experience in working with cryptocurrency wallets and displaying real-time wallet balances by integrating financial APIs. My skills in React and JavaScript allow me to effectively manage currency conversions and data handling.

How I plan on tackling this issue

am going to first, Review the Figma design linked in the project description to understand the visual requirements for the donut chart; Define the data structure for the portfolio asset types (e.g., USDC, USDT, STRK, ETH).

Choose a charting library like react-chartjs-2 or recharts to create the donut chart and place the chart component in the designated section of the dashboard page as per the Figma design.

then lastly, verify the chart renders correctly with various data sets.

@mimisavage
Copy link

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Mimi Sav, a frontend and blockchain developer. This is my first time contributing to this repository, and I'm excited about the opportunity to collaborate.

How I plan on tackling this issue

To tackle this task, I will start by reviewing the Figma design to understand the requirements for the "Portfolio by asset type" section, specifically focusing on the layout and style of the donut chart. I will then choose a suitable chart library that can create a responsive donut chart and integrate it into the existing dashboard. After setting up the chart, I will ensure it fetches the relevant data needed to represent the portfolio by asset type. I will format the data appropriately to align with the chart's requirements. Finally, I will test the implementation to ensure the chart displays correctly and provides an accurate visual representation of the asset distribution.

@KevinLatino
Copy link
Contributor

KevinLatino commented Oct 24, 2024

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/

How I plan on tackling this issue

I'm going to pay close attention to how it looks in the figma, and I'm going to implement it in the best way, using some type of library for the graph if necessary.

@blessingbytes
Copy link

Would love to tackle this!

@Benjtalkshow
Copy link
Contributor

Hi @Marchand-Nicolas,
Give me the chance to work on this task.
I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

To implement the "Portfolio by asset type" section with a donut chart, the first step is to gather data on the user's asset holdings, categorized by asset type. This data can be retrieved through the existing Argent Portfolio API integration.

For the visual representation, I will use a library like Chart.js to create a responsive and interactive donut chart. The chart will display each asset type as a proportional segment, with hover or click actions to show detailed information for each asset type. I will ensure the design closely follows the Figma mockup, ensuring consistency in styling and user experience.

Once implemented, the chart will be tested across various screen sizes and browsers to ensure proper responsiveness and functionality. My ETA is 24hrs. Thanks.

@LazarusAA
Copy link

LazarusAA commented Oct 25, 2024

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi I'm Alvaro Lazarus a blockchain developer, and a new member of Dojo Coding. I have contributed to Starknet Quest in the past and would love to work on the project again, I'm well versed with data visualization and TypeScript which makes me confident I can work on this section smoothly.

How I plan on tackling this issue

Thank you for your consideration

ETA: 48 hrs

@jaiminRaiyani
Copy link
Contributor

Can I attempt this issue?

@hannahredler
Copy link

hannahredler commented Oct 25, 2024

I am applying to this issue via OnlyDust platform.

Hi, my name is Hannah I'm a developer currently on the HerDAO Starknet Bootcamp and would love to take this issue!

My background

About me - I have been working as a full stack developer over the past few years, with plenty of experience in Typescript, React, RxJS. a few years ago I transitioned to the web3 ecosystem building a fully responsive real time trading app in the ethereum ecosystem. I recently discovered starknet and am looking to get more involved here!

How I would tackle the project:

  • Fetch the user assets + balances from the connected/ injected wallet
  • Create a react component to display the donut chart, using the figma as reference

Thanks for reading!

@deeseeker
Copy link
Contributor

May I be assigned to this?

@reetbatra
Copy link

Can I work on this, please? HER DAO

@soomtochukwu
Copy link

Could I take a shot at this?

@DanielEmmanuel1
Copy link

@Marchand-Nicolas Is this still available for contribution, I'll like to be assigned this issue

@OWK50GA
Copy link

OWK50GA commented Oct 26, 2024

I am applying for this fI am applying to this issue via OnlyDust platform.

I am Wilfrid Okorie, a seasoned React and Next.js developer, with experience with Cairo for Starknet Smart contracts, and frontend Integration of Smart contracts using Next.js, and I would like to work on this issue.

Here's how I plan to take on this issue:

I will fetch the wallet balances for each of the injected wallets, using the appropriate Argent API call. Then I will use react-chartjs-2 to implement the donut chart for it. I will make sure in all of this that there is no break in the UI and no overflows and misalignments.

I will also welcome any feedback for something to be changed or improved.

It will be a privilege to work on this issue

@jedstroke
Copy link

Could I take a shot at this I will use Rechart to tackle this?

@martinvibes
Copy link
Contributor

hey @fricoben Can I contribute to this one?

@Aditya-040
Copy link
Contributor

Can I take this issue?

1 similar comment
@Akshola00
Copy link
Contributor

Can I take this issue?

@Marchand-Nicolas
Copy link
Collaborator

@kfastov By reusing the approach from this PR, dynamically fetch data for the "Portfolio by asset type" (which is currently static): #880

To collect the necessary data, you can use the Argent Portfolio API. I suggest you to check in the network tab of the console what call they do on their official website: https://portfolio.argent.xyz/overview/0x05f1f8de723d8117daa26ec24320d0eacabc53a3d642acb0880846486e73283a.

@Marchand-Nicolas
Copy link
Collaborator

Hey @kfastov is everything okay ?

@kfastov
Copy link

kfastov commented Oct 30, 2024

Hi @Marchand-Nicolas!
Sorry for late reply, I had a long trip to Bangkok, I'll push the draft PR today or early tomorrow.
Thank you for patience

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
OD Hack Issue reserved for the OD Hack open for contribution An issue that is available for an Only Dust contribution
Projects
None yet
Development

Successfully merging a pull request may close this issue.