[Frontend] Refactor state logic for Portfolio Chart Widget

[emdevelopa]

Description
This task involves UX enhancement for the Portfolio Chart Widget module.
The goal is to refactor state logic for Portfolio Chart Widget to improve the platform's styling, user interactions, and overall accessibility.

Requirements and context

• Must be secure, tested, and documented
• Adhere to the Drips Wave design and UI/UX standards
• Ensure compatibility across desktop and mobile browsers
• Specifically focused on frontend UX enhancement and responsiveness

Suggested execution

Fork the repo and create a branch
git checkout -b feature/fe-refactor-state-logic-for-portfolio-chart-widget
Implement changes

Review existing component in Portfolio Chart Widget
Apply changes: Refactor state logic for Portfolio Chart Widget
Use clean CSS or tailwind variables for styling
Maintain state transitions and visual feedback
Test and commit

Test mobile responsiveness and interactive states
Check accessibility (a11y) using standard audits
Include screenshots or gifs in the PR
Example commit message
feat(frontend): refactor state logic for Portfolio Chart Widget

Guidelines

Complexity: Medium (150 points)
Assignment required before starting
PR description must include: Closes #[issue_id]

[Temi-suwa18]

@Temi-suwa18 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Temi-suwa18 to this issue.

[drips-wave]

Congratulations, @Temi-suwa18! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @Temi-suwa18: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @Temi-suwa18 as part of the Stellar Wave Program's 5th Wave 🥳

😎 @Temi-suwa18: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.