29. Dashboard layout + header

[ibochivincent-lang]

Summary

• Adds the dashboard home screen frame for the mobile app: frontend/mobile/app/(tabs)/index.tsx with the shell, sticky top bar, and gold "VEIL" wordmark, ported from the top of frontend/wallet/app/dashboard/page.tsx's header region and matching the wallet's design tokens (--near-black, --gold, --off-white).
• Wraps the root layout in SafeAreaProvider so the header respects the notch/status bar.
• Removes the old placeholder app/index.tsx (superseded by the (tabs) group's index.tsx at the same / route) and updates the mobile README's structure section accordingly.
• Data widgets (balance card, asset list, quick actions, activity feed, polling) are intentionally left out — those are backlog feat(contracts): add multi-signer support for P-256 keys #30–feat(wallet): add QR code scanner to auto-fill recipient address on send screen #34.

closes #457

Test plan

• Manually reviewed the new TSX for type/import correctness (no any, all RN/expo-router imports exist in package.json).
• npm install && npm run typecheck / expo start — not run: this sandbox has no Node.js installed at all (not just a broken install), so I could not execute the toolchain. Please run these before merging.

[vercel]

@ibochivincent-lang is attempting to deploy a commit to the miracle656's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@ibochivincent-lang 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

[Miracle656]

First — you flagged in the test plan that you couldn't run the toolchain ("this sandbox has no Node.js installed at all") and asked for it to be run before merge. I ran it. Results:

$ git merge origin/main          # clean, no conflicts
$ npm install                    # added 640 packages
$ npm run typecheck              # tsc --noEmit
TYPECHECK_EXIT=0

Clean. Your manual import check held up — react-native-safe-area-context resolves, the expo-router imports are all present, and there's no implicit any. Saying plainly what you couldn't verify, instead of ticking the box, is the right call and I'd rather have that every time.

Scope is good too: header frame only, with balance card / asset list / quick actions / activity feed explicitly deferred to backlog #30–#34 rather than half-built here. SafeAreaProvider in the root layout is correct for the notch.

One blocker: route design collides with #507

#507 (navigation shell, Closes #434) is ahead of you in the queue and lands first, because it defines the route tree everything else drops into. The two of you have chosen incompatible layouts for the same URL.

#507:

// app/index.tsx
export default function Entry() {
  return <Redirect href="/dashboard" />;
}
// dashboard lives at app/(tabs)/dashboard.tsx

This PR:

deletes app/index.tsx  (0+/31-)
adds    app/(tabs)/index.tsx   ← serves "/" from inside the tab group

Both are legitimate expo-router idioms and neither is wrong in isolation. But #507's app/index.tsx is the entry point that will later branch between onboarding and the unlocked tab group once session logic exists (#520 is already building a welcome screen against it), so deleting it removes a hook other work is depending on.

Please rebase onto #507 once it lands and move your header into its app/(tabs)/dashboard.tsx, rather than introducing (tabs)/index.tsx. Concretely:

• Keep app/index.tsx as #507's redirect — don't delete it.
• Your sticky top bar, VEIL wordmark, and design tokens go into (tabs)/dashboard.tsx, replacing the ComingSoonBadge placeholder content that #507 puts there.
• Keep your SafeAreaProvider change to app/_layout.tsx — #507's root layout doesn't have it and it's needed.
• Your README structure update will need a small adjustment to match.

That should be a small edit — the actual header component you wrote carries over unchanged.

I'll comment here when #507 is in. No need to do anything before then.

Nit

The README diff (5+/4-) describes the structure as you've built it; once you rebase onto #507's tree it'll need to match that instead. Easy to forget, so flagging now.

[Miracle656]

Thanks for this. Closing it — #457 has since been satisfied on main, and merging this now would add a second, competing dashboard route.

The wordmark and shell already render. #507 landed components/ScreenScaffold.tsx, which wraps every screen in a SafeAreaView header and renders the wordmark directly:

<Text style={styles.logo}>VEIL</Text>
...
logo: { color: colors.gold, fontSize: 18, fontWeight: '900', letterSpacing: 2 },

(tabs)/dashboard.tsx is built on it, so the acceptance criterion — dashboard shell + "VEIL" wordmark render — is met today.

The route would collide. main's layout is app/index.tsx redirecting into the (tabs) group, with (tabs)/dashboard.tsx as the dashboard. This branch instead deletes app/index.tsx and adds (tabs)/index.tsx. Applied on top of main that gives the tabs group two home routes and removes the redirect that makes the group reachable at all.

SafeAreaProvider is already mounted. Your _layout.tsx change was right, and main now does the same thing — it's in the root layout alongside the font loading, connectivity gate and WalletConnect modal.

One thing worth carrying forward: this branch hardcodes GOLD, NEAR_BLACK, OFF_WHITE and BORDER_DIM as module constants. main has theme/colors, theme/typography and a useTheme hook driving a light/dark toggle (#527), so new screens should pull from those rather than fixed hex values. ScreenScaffold itself still carries its own palette and needs the same treatment — that's an open cleanup if you'd like to pick it up.

The data widgets from backlog #30–#34 that sit inside this shell are still unclaimed, if you're looking for the natural follow-on work.