[Frontend] Create Notification Details Drawer

[Abd-Standard]

Description

Users currently have limited visibility into individual notification metadata without navigating away from the main dashboard.

Implement a notification details drawer that provides quick access to complete notification information.

Tasks**
Create slide-out drawer component.
Display sender information.
Display notification status history.
Display transaction hash and block details.
Add copy-to-clipboard actions.
Implement loading and error states.
Ensure mobile responsiveness.

Acceptance Criteria
Users can view notification details without leaving the dashboard.
Metadata is displayed accurately.
Copy actions function correctly.
Drawer works across supported screen sizes.

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[Opeyemi01-del]

I'd like to take this on. My approach would be: a slide-in drawer triggered from the notification list, showing full notification content, metadata (timestamp, type, source, read/unread state), and any relevant CTAs — with keyboard accessibility (focus trap, Escape to close) and a loading/error state for async-fetched detail data. I'll match the existing component library and animation patterns rather than introduce new ones, and can share a quick prop interface and mockup before writing code.

[MoscowDev]

Hello,

I would like to apply for this task. I have experience building responsive frontend interfaces and implementing user-focused dashboard features with React, TypeScript, and modern UI component libraries.

For this implementation, I will:

• Create a smooth slide-out notification details drawer that opens without disrupting the user's workflow.
• Display complete notification metadata, including sender information, status history, transaction hash, and block details.
• Implement copy-to-clipboard functionality for hashes, addresses, and other relevant identifiers with clear user feedback.
• Add robust loading, empty, and error states to ensure a reliable user experience.
• Ensure the drawer is fully responsive and optimized for desktop, tablet, and mobile screen sizes.
• Follow existing project patterns and styling to maintain consistency across the application.

I will also verify that:
• Users can access notification details without leaving the dashboard.
• All metadata is displayed accurately.
• Copy actions work reliably across supported browsers.
• The drawer behaves correctly on different screen sizes and devices.

My focus will be on clean, maintainable code, accessibility, and a seamless user experience while adhering to the project's existing architecture and design standards.

I look forward to contributing to this improvement.

Best regards,
Nnaji Moses Ogomegbunam

[LDGnx-dev]

Hi! I'd love to take care of this. I have solid experience with React, Tailwind CSS, and building responsive dashboard utilities. Since this handles transaction hashes and block details, I'll ensure the layout handles cryptographic addresses cleanly (with truncation and proper copy-to-clipboard feedback). I'll implement clean skeleton loaders for the async metadata fetch, ensure keyboard accessibility (Esc key to close), and strictly follow the project's existing design patterns without adding extra weight. Ready to submit a clean, self-tested PR.

[helenahelenavanbeek-png]

I would like to work on this issue. I have experience with Rust and Soroban smart contract development. I will follow the acceptance criteria and add tests. Excited to contribute. Kindly assign.

[JayWebtech]

Hello, my name is Jethro. I am a full-stack/blockchain developer with 7 years of experience building solution-oriented products.

I am also an expert in building dApps

I can confidently handle this issue.
Here is my portfolio and projects I have handled:

https://ecohotels.com
https://runescard.com
https://eurematic.com
https://tafscrapper.com
https://www.usememora.xyz
https://escrowlink.vercel.app
https://reciept-animation.vercel.app

[GauravKarakoti]

@GauravKarakoti has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Allow me to work on this one

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

[queenphateemah07-gif]

@queenphateemah07-gif has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

let me fix this for you please

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

[N-thnI]

@N-thnI has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Dear maintainer
Please assign me this issue

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

[drips-wave]

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

🧑‍💻 @N-thnI: 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 🌊