feat(mobile): tx preview card + detail bottom sheet

[chizzy0011]

What

The reusable transaction surfaces used across the app: a preview card shown before signing and a detail sheet opened from a history feed — ported as native bottom sheets so transaction presentation stays consistent.

Change

• components/TxPreviewCard.tsx — presentational confirm-step preview (you send / receive-at-least / to / memo / network fee).
• components/TxDetailSheet.tsx — a @gorhom BottomSheetModal over a TxRecord (type mirrors the web wallet's TxDetailSheet.tsx), opened via a ref (present()).
• app/_layout.tsx — wrap the app in GestureHandlerRootView + BottomSheetModalProvider (required by the sheet).
• app/(tabs)/activity.tsx — demo: renders the preview and a feed whose items open the detail sheet on tap.
• dep: @gorhom/bottom-sheet (5.2.14, installed via expo install; its peers are satisfied by the app's react-native-reanimated 4.5 + gesture-handler 2.32).

Acceptance

confirm step shows preview; tapping a feed item opens the detail sheet.

✅ The preview renders on the confirm surface; tapping any feed item presents the TxDetailSheet.

Notes

• _layout.tsx gains the gesture-handler + bottom-sheet-modal providers because @gorhom requires them at the root.
• Self-contained styling (shared UI primitives aren't in main yet); representative feed/preview data pending wallet + history wiring.

Verification (local — no mobile CI job)

• npm run typecheck ✅ · eslint on all changed files ✅ clean.

Closes #470

[vercel]

@Chizzychi 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]

@chizzy0011 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]

TxPreviewCard.tsx and TxDetailSheet.tsx are what #470 asked for and they look right — the TxRecord shape matches the web components and the @gorhom/bottom-sheet wiring in _layout.tsx is correct. One blocker before I can merge.

app/(tabs)/activity.tsx ships fixture data as a real tab

The gallery screen is hardcoded:

const FEED: TxRecord[] = [
  { id: '1', type: 'received', amount: '50', asset: 'USDC', ... },
  ...
];

Because it sits under app/(tabs)/, expo-router turns it into a user-facing tab. Anyone opening the app sees three invented transactions — a 50 USDC receipt, a lunch memo, a Soroswap swap — presented as their own history.

It also collides with #461 (Recent activity feed, PR #528), which owns the real feed and backs it with lib/activityFeed.ts against live data. Two activity surfaces, one of them fake, is not where we want to end up.

What to do

Move the gallery off the tab route — app/tx-surfaces.tsx (or any non-(tabs) path) is fine, and it still satisfies the acceptance criterion, since tapping a row there opens the detail sheet exactly the same way. #531 and #532 do this with app/fonts.tsx and app/ui.tsx; follow that pattern.

Alternatively drop the screen entirely and let #461 demonstrate the detail sheet against real records.

Everything else is fine — move the route and I will merge.

[Miracle656]

Merging. TxPreviewCard and TxDetailSheet are both clean, and using @gorhom/bottom-sheet with a forwardRef to BottomSheetModal plus a backdrop is the right native pattern for this.

Four changes before merge:

Root layout. The branch replaced app/_layout.tsx with a version built on the old stub. main's has grown a lot since — font loading with a splash hold, the connectivity gate, network hydration, the WalletConnect approval modal. I kept main's and wrapped it in GestureHandlerRootView + BottomSheetModalProvider, which is what the sheets actually need.

Dropped app/(tabs)/activity.tsx. This was a showcase screen built on hardcoded constants:

const PREVIEW: TxPreview = { action: 'Send', amount: '25', asset: 'USDC', ... };
const FEED: TxRecord[] = [ ... ];

As a route under (tabs) it would have shipped as a fifth tab presenting invented transactions as the user's own history. main already renders a real Wraith-backed ActivityFeed on the dashboard as of #528, so there was also a live feed sitting next to a fake one.

Wired the sheet into the real feed. This is the part that made the acceptance criterion true. ActivityFeed already exposed an onSelectTx prop that nothing used; the dashboard now holds the selected record and a BottomSheetModal ref, so tapping a row presents TxDetailSheet with genuine data. Previously the sheet was only reachable from the demo screen.

Deduplicated TxRecord. TxDetailSheet redeclared it field-for-field identically to lib/activityFeed.ts — same ten fields, same optionality. It now imports and re-exports that one, so the feed and the sheet can't drift.

Verified: tsc --noEmit clean, jest 12 suites / 206 tests, expo lint clean, CI green.

The other half of #470 — confirm step shows preview — isn't reachable yet: TxPreviewCard is merged and ready, but there's no signing confirmation step to host it. That arrives with the send flow, so the component is in place waiting for it rather than being wired to a placeholder.