Skip to content

feat: improve balance display, connect button, header user menu, and sidebar active state - #393

Merged
DeFiVC merged 1 commit into
ChainLearnOfficial:mainfrom
Akpamgbo:feat/ui-components-improvements
Aug 29, 2026
Merged

feat: improve balance display, connect button, header user menu, and sidebar active state#393
DeFiVC merged 1 commit into
ChainLearnOfficial:mainfrom
Akpamgbo:feat/ui-components-improvements

Conversation

@Akpamgbo

Copy link
Copy Markdown
Contributor

Description

This PR addresses UI and UX improvements across key navigation, header, balance display, and wallet connection components.

Closes #277
Closes #278
Closes #279
Closes #280

Changes proposed

What were you told to do?

What did I do?

Balance Display Component

  • Added USD equivalent calculation & price conversion display.
  • Added 'View Transactions' link navigating to transaction history.
  • Added copy-to-clipboard functionality for contract address.
  • Added loading state skeleton during price/balance fetch.

Connect Button Component

  • Added connected wallet name indicator (Freighter).
  • Added network status badge ('testnet' / 'public').
  • Added truncated wallet address with instant copy option.
  • Added dropdown menu supporting network switching and disconnect options.

Header Component

  • Ensured header is sticky on scroll (\sticky top-0 z-50).
  • Added user menu dropdown with user avatar, profile link (/profile), settings link (/settings), and logout button.
  • Integrated NotificationBell component showing unread notifications.

Sidebar Component

  • Implemented active route highlighting using \isNavLinkActive.
  • Added collapsible sidebar functionality with toggle button (expand/collapse).
  • Added mobile drawer with backdrop overlay that automatically closes on route changes.

Check List (Check all the applicable boxes)

  • My code follows the code style of this project.
  • This PR does not contain plagiarized content.
  • The title and description of the PR is clear and explains the approach.
  • I am making a pull request against the main branch (left side).
  • My commit messages styles matches our requested structure.
  • The implementation was reviewed and confirmed to work as intended.
  • I am only making changes to files I was requested to.

Screenshots / Validation Evidence

Validated UI components visually and checked responsive layout behavior across desktop and mobile drawer modes.

@drips-wave

drips-wave Bot commented Aug 29, 2026

Copy link
Copy Markdown

@Akpamgbo Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Aug 29, 2026

Copy link
Copy Markdown

Deploy Preview for chainlearn failed.

Name Link
🔨 Latest commit e460ca5
🔍 Latest deploy log https://app.netlify.com/projects/chainlearn/deploys/6a92a1e9a1ef3600082f71c2

@DeFiVC
DeFiVC merged commit 0622f33 into ChainLearnOfficial:main Aug 29, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants