Skip to content

fix(frontend): improve 404 page with auth-aware links and i18n - #437

Merged
dark-sarge merged 1 commit into
arflexx:mainfrom
Huncho-jack20:issue-356
Oct 17, 2026
Merged

dark-sarge merged 1 commit into
arflexx:mainfrom
Huncho-jack20:issue-356

Conversation

@Huncho-jack20

Copy link
Copy Markdown
Contributor

Problem

The 404 page displayed a generic "page not found" message with no
actionable next steps. Users arriving from a broken link, an expired
trade URL, or a typo had no clear path forward, increasing bounce rate.

Changes

frontend/app/not-found.tsx

  • Converted from a static Server Component to a "use client" component
    so it can consume auth state and translated strings at runtime.
  • Integrated useAuth() to detect whether the visitor is signed in.
  • Integrated useTranslations("NotFound") from next-intl so all copy
    is served in the active locale.
  • Added a prominent Browse Listings CTA visible to every visitor.
  • For authenticated users: added Sell an asset and
    View your wallet CTAs directly on the page.
  • For guests: the secondary quick-links section shows
    Create account and Sign in instead of wallet/profile links.
  • The wallet CTA is gated behind isLoading resolution to prevent a
    flash of incorrect UI during the auth hydration tick.
  • Replaced bare <a> tags with Next.js <Link> for client-side
    navigation.
  • Styling is consistent with the rest of the app: Tailwind utility
    classes, full dark mode support (dark: variants), and accessible
    focus rings (focus-visible:ring-*).

frontend/locales/en/common.json

frontend/locales/yo/common.json

frontend/locales/ig/common.json

frontend/locales/ha/common.json

  • Added a "NotFound" namespace to all four locale files.
  • Keys translated: heading, body, browseListings, sellAsset,
    viewWallet, youMightBeLookingFor, marketplace, sellAirtime,
    createAccount, signIn, copyright, github.
  • Yoruba (yo), Igbo (ig), and Hausa (ha) translations authored to match
    the tone and vocabulary already established in those locale files.

Acceptance criteria checklist

  • Prominent link to the homepage (Browse Listings) always shown
  • "Sell an asset" and "View your wallet" links shown for authenticated users
  • Page styled consistently with the app (Tailwind, dark mode)
  • i18n system provides translated text for all four locales (en, yo, ig, ha)

Testing

  • Visit any non-existent route (e.g. /abc) while logged out → see
    Browse Listings + Sell an asset CTAs; quick-links include Sign in and
    Create account.
  • Visit while logged in → see Browse Listings + Sell an asset +
    View your wallet CTAs; quick-links show Marketplace, Sell airtime,
    View your wallet.
  • Switch locale to /yo/abc, /ig/abc, /ha/abc → all text renders
    in the correct language.
  • Toggle dark mode → page matches the rest of the app visually.

Closes #356
closes #358
closes #355
closes #296

…xx#356)

- Rewrite not-found.tsx as a client component
- Add prominent Browse Listings CTA for all users
- Show Sell an asset and View your wallet CTAs for authenticated users
- Show sign-in and create-account quick-links for guests
- Translate all text via next-intl under the NotFound namespace
- Add NotFound translations to all four locales: en, yo, ig, ha
- Consistent Tailwind styling with dark mode support throughout
@drips-wave

drips-wave Bot commented Oct 17, 2026

Copy link
Copy Markdown

@Huncho-jack20 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

@dark-sarge
dark-sarge merged commit 33ddec9 into arflexx:main Oct 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment