feat: implement issues #173, #174, #175, #176

[Akpolo]

Summary

Bundles four small UX/quality issues into one PR.

• Add helper text for empty creator bio fallback #173 — Empty creator bio fallback. New CreatorBio component renders the bio when present, otherwise a consistent helper text (This creator hasn't shared a bio yet.). Wired into CreatorCard (list surface) and CreatorProfileHeader (profile detail surface) so wording stays aligned. Whitespace-only bios are treated as missing; a new bio prop was added to CreatorProfileHeader.
• Add reusable formatting helper for percentage badges #174 — Reusable percentage formatter. formatPercent in numberFormat.utils.ts with stable edge-case behavior (null / undefined / NaN / Infinity all render as the placeholder; values smaller than the precision round cleanly; signed: true prefixes positives with +). Change24hBadge now uses it (replaces the hand-rolled ${change > 0 ? '+' : ''}${change.toFixed(2)}%), and a new PercentageBadge component is the second consumer — applied in TradeDialog as a X% of holdings indicator on the sell flow.
• Add keyboard focus order check for modal action buttons #175 — Modal keyboard focus order. Explicit data-focus-order markers on TradeDialog's amount input → Cancel → Confirm match the visual left-to-right reading order in the footer. A source comment documents the contract; the covering test asserts DOM order so a future refactor that swaps the two buttons (and therefore the tab sequence) fails CI. Tab-sequence reachability of both Cancel and Confirm is also asserted.
• Add small note for unsupported avatar image formats #176 — Unsupported avatar format note. FormFileUpload now validates the dropped/selected file against its accept list before kicking off the upload simulation. New unsupported-format render branch surfaces a clear message (That file format isn't supported. Use PNG, JPG.) and lets the user pick again. The validators (isFileAccepted, unsupportedFormatMessage) live in src/utils/fileFormat.utils.ts and are individually tested.

Test plan

• pnpm lint — clean
• pnpm build — clean
• pnpm exec vitest run — 64 tests pass (was 35 baseline; +29 new tests across 4 new files)
• Manually verify the bio fallback shows in CreatorCard for a creator with no description
• Manually verify the bio fallback shows in CreatorProfileHeader when bio is omitted
• Manually verify the trade dialog's tab order on a real keyboard (input → Cancel → Confirm)
• Manually verify selecting a .bmp for the avatar surfaces the unsupported-format note

Pre-existing failures

main already has 5 failures in KeySupplyBadge.test.tsx — fast-check property tests. They're unchanged on this branch and out of scope. Worth a follow-up issue.

Fixes

• Fixes: Add helper text for empty creator bio fallback #173
• Fixes: Add reusable formatting helper for percentage badges #174
• Fixes: Add keyboard focus order check for modal action buttons #175
• Fixes: Add small note for unsupported avatar image formats #176

[drips-wave]

@Akpolo 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