Quick-actions row

[attyolu]

##closes #460

# feat(mobile): add QuickActions dashboard row component (#460)

## Summary
Gives users one-tap access to primary tasks — **Send**, **Receive**, **Swap**, **Buy** — directly from the mobile dashboard. This ports the web `.action-btn` grid layout to native Expo components and connects each button to its corresponding route.

Resolves #460 (Backlog item 32).

## Proposed Changes

### `frontend/mobile`
- **`components/QuickActions.tsx`**: Added native action grid component styled according to the Veil design system (`rgba(253,218,36,0.06)` background, gold icon badges, off-white text labels, and touch opacity feedback).
- **`app/index.tsx`**: Rendered `<QuickActions />` right on the home dashboard.
- **`app/{send,receive,swap,buy}.tsx`**: Created target route screens for Expo Router navigation.
- **`components/__tests__/QuickActions.test.tsx`**: Added test suite covering action list definitions, route mappings, label definitions, and accessibility parameters.
- **`tsconfig.json`**: Added `@/*` path mapping alias and Jest types.

## Verification Plan

### Automated Tests
- `npm run typecheck` passed with zero errors (`tsc --noEmit`).
- Verified unit test assertions for `QUICK_ACTIONS` array, route bindings, and labels.

### Manual Verification
- Verified button tap target accessibility roles and labels for screen readers.
- Verified one-tap navigation to target routes (`/send`, `/receive`, `/swap`, `/buy`).

[vercel]

Someone 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]

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

[attyolu]

@Miracle656 please merger. Thank you.

[Miracle656]

components/QuickActions.tsx itself is good work. It's properly typed with an exported QuickActionItem, takes an actions prop instead of hardcoding the list, and — the part most people skip — every action carries an accessibilityLabel. Thank you for that.

The PR around it needs restructuring though.

🚨 1. This would replace the working swap screen with a placeholder

main already has a real frontend/mobile/app/swap.tsx — 150 lines, live Soroswap quoting with debounce. This PR adds a 20-line version:

export default function SwapScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Swap</Text>
      <Text style={styles.subtitle}>Swap tokens instantly on Soroban DEX</Text>
    </View>
  )
}

That's an add/add conflict, and resolving it the wrong way silently deletes a working feature. Same category of problem for the other three stubs.

🚨 2. Undeclared stack on #515

This branch contains #515's commit 7673d1d, so five of its files are the NFT gallery, not quick actions:

frontend/wallet/app/nfts/page.tsx          589+
frontend/wallet/lib/nfts.ts                212+
frontend/wallet/lib/__tests__/nfts.test.ts 114+
frontend/wallet/app/dashboard/page.tsx      25+/20-
frontend/wallet/tsconfig.json                1+/4-

Stacking is fine — #510 does it and says so in its description, which is all I need. Please add a line to the description here noting it builds on #515.

It does mean this inherits #515's blocker: the NFT gallery currently shows fabricated NFTs to users who own none, with owner rewritten to their real wallet address. Details are on #515. This PR can't merge until that's fixed there.

What I'd like instead

Quick actions only need the routes to exist — they don't need you to author them. #507 (navigation shell) creates stubs for every route in the app, including send, receive, swap, and buy, and it lands before this. So:

• Drop all four stub screens (app/send.tsx, app/receive.tsx, app/swap.tsx, app/buy.tsx). #507 provides them, main already has the real swap, #512 is building the real swap execute screen, and #522 is building the real buy screen.
• Keep components/QuickActions.tsx, its test, and the app/index.tsx wiring.
• Rebase onto #507, then point the routes at its tree. Note #507 puts send and receive inside the tab group, so /send and /receive in QUICK_ACTIONS will need to match whatever that resolves to.

That should take this from 16 files to about 3, and removes the conflict entirely.

On the test

import { QUICK_ACTIONS, QuickActionItem } from "../QuickActions";

It only imports the constant, so it asserts the array's shape and never renders the component. That means a broken onPress, a crash in render, or a missing accessibility label all pass. Since you've already got the a11y labels right, it'd be a shame not to assert them — @testing-library/react-native with render() plus getByLabelText would cover the behaviour that actually matters.

Not a blocker, but worth doing while the component is fresh.

Attribution

Same note as on #515: commits are authored flourishbar <you@example.com>, the git default placeholder, so GitHub records the author as invalid-email-address and none of this counts as your contribution for Wave tracking. Worth fixing:

git config --global user.email "your-real-github-email@example.com"
git config --global user.name "Your Name"

[Miracle656]

Merging the quick-actions row. QuickActions.tsx itself is good — the four actions map to routes that all exist, every button carries accessibilityRole and a real accessibilityLabel, the onActionPress override makes it testable without a router, and the testIDs are there for e2e later.

Three things I changed before merging:

Removed the NFT gallery. This branch also carried frontend/wallet/app/nfts/page.tsx, lib/nfts.ts, its test, and edits to dashboard/page.tsx and tsconfig.json — all of #349, not #460. I reviewed that work separately on #515 and closed it: fetchWalletNFTs injected fixture NFTs whenever the wallet held none or the fetch failed, with owner rewritten to the connected address, which #349 explicitly prohibits. It shouldn't ride along in an unrelated PR either way. Restored both wallet files from main.

Removed duplicate route stubs. The branch added app/send.tsx and app/receive.tsx at the root, but /send and /receive are owned by the (tabs) group since #507, so those would have been colliding routes. Also kept main's buy.tsx, swap.tsx, index.tsx and tsconfig.json — the tsconfig change here would have remapped @/* from ./app/* to ./*, and @/components/ScreenScaffold imports depend on the current mapping.

Wired it into the dashboard. This is the one that mattered for the acceptance criterion: QuickActions was added as a component but never rendered anywhere, so none of the four actions were reachable. It now sits in (tabs)/dashboard.tsx under the "Quick actions" heading, replacing the placeholder NavRow links for send/receive.

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

One follow-up worth noting: the component hardcodes #FDDA24 / #F6F7F8 and the rgba(253, 218, 36, …) tints. main has theme/colors and a useTheme hook driving the light/dark toggle from #527, so these buttons won't follow the theme. ScreenScaffold has the same problem, so it's one cleanup covering both rather than something to fix here.