[Frontend] Add an application error boundary and recovery screen

[grantfox-oss]

Description: An unexpected client-rendering or API error can currently leave the user with an unhelpful broken page. Add Next.js error boundaries and clear recovery behavior for wallet/API failures.
Acceptance criteria:

Render a friendly fallback page for route-level errors.

Provide a retry action that resets the failed route.

Preserve safe error context without exposing secrets or stack traces.

Distinguish wallet connection errors from general application errors.

Ensure the fallback layout is accessible and responsive.

Files affected : Frontend/src/app/error.tsx (new), Frontend/src/app/global-error.tsx (new), Frontend/src/app/layout.tsx, Frontend/src/app/page.tsx, Frontend/src/lib/api.ts, Frontend/src/hooks/useWallet.ts, Frontend/src/app/globals.css

[Clement-coder]

Hi,

I’m a full-stack software and blockchain engineer with hands-on experience delivering production-ready solutions across frontend, backend, and blockchain systems.

I’d like to take ownership of this issue. I’ve reviewed the requirements and can implement a scalable, maintainable, and well-tested solution that fully satisfies the acceptance criteria.

Ready to start immediately and keep the team updated throughout the process.

[malaysiaonelove]

Hi maintain,I will love to work on this issue,I have an experience and I have already reviewed the issue please assigned me to it and I will give a good result.

[Itodo-S]

Please let me work on this issue; i can handle it.

[divinemike019]

Hi, I'd like to work on this issue. Since an unexpected client-rendering or API error currently leaves users with an unhelpful broken page, my plan is to add proper Next.js error boundaries with clear recovery behavior, specifically covering wallet and API failure cases as noted in the description.

I'll implement error boundaries at the appropriate component/route level so failures are caught gracefully rather than crashing the whole page, design a recovery screen that gives users clear next steps (retry, reconnect wallet, go back), and make sure the acceptance criteria in the issue are fully addressed — testing both wallet-failure and API-failure scenarios explicitly to confirm each is handled distinctly where needed.

I have frontend experience with Next.js and error handling patterns like this, and I'm happy to share a draft early for feedback before submitting the final PR.

[grantfox-oss]

🦊 GrantFox — @malaysiaonelove has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #65)
2. Your PR will be reviewed by the Vaulty-X maintainers

Good luck! Track your progress on GrantFox.