-
Notifications
You must be signed in to change notification settings - Fork 111
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
Comments
Can I work on this? |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedI'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
|
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedHey, 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 issuevery 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 |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedGood 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
-Next, I'll start with the chart implimentations by:
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. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedSoftware 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 issueFirst, 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. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedI 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 issueTo 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. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedI am a python dev . A new-comer here, willing and ready to contribute to solve the issue. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedI 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 issueI'd like to work on this. |
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 |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedI 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 issueam 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. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedHi, 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 issueTo 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. |
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: 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. |
Would love to tackle this! |
Hi @Marchand-Nicolas, 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. |
I am applying to this issue via OnlyDust platform. My background and how it can be leveragedHi 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 |
Can I attempt this issue? |
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 backgroundAbout 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:
Thanks for reading! |
May I be assigned to this? |
Can I work on this, please? HER DAO |
Could I take a shot at this? |
@Marchand-Nicolas Is this still available for contribution, I'll like to be assigned this issue |
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 |
Could I take a shot at this I will use Rechart to tackle this? |
hey @fricoben Can I contribute to this one? |
Can I take this issue? |
1 similar comment
Can I take this issue? |
@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. |
Hey @kfastov is everything okay ? |
Hi @Marchand-Nicolas! |
Figma : https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5992-2849&t=dvRbR5qAwsX8KioR-1
The text was updated successfully, but these errors were encountered: