thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
45f612c9904ebc51fcb099c5ebf7e94e4b5cfd0e
volana/docs/superpowers/plans/2026-07-02-expo-app-ui-implementation.md
thesn10 7be8669888 Add implementation plan for translating the prototype into the Expo app 
22 bite-sized tasks covering theming, mock data, wallet/modal state,
shared components, and all five screens with responsive mobile/web
layouts, per the approved design spec.
2026-07-02 22:07:08 +02:00

2111 lines
77 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Volana Expo App UI Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Translate the HTML prototype (`prototype/Volana.dc.html`) into the Expo app (`app/`) — all pages, mock data, theming and responsive (mobile + web) layout — per the approved spec at `docs/superpowers/specs/2026-07-02-expo-app-ui-design.md`.
**Architecture:** Bottom-tab + stack navigation (Expo Router) on mobile, with a persistent top nav bar replacing the tab bar on wide/web viewports (`md:` breakpoint, ~768px). Two React Context providers (`WalletProvider`, `ModalProvider`) hold mock wallet state and the globally-triggered Wallet-Connect/Checkout `BottomSheet` overlays. All product/resolver/order data is static, taken verbatim from the prototype's embedded arrays. Styling uses HeroUI Native components with Tailwind/Uniwind `className`, with only color tokens overridden in `global.css` (radius is left at the HeroUI default, which already matches the prototype's 8–16px scale).
**Tech Stack:** Expo SDK 57, Expo Router 57 (typed routes), React 19, React Native 0.86, HeroUI Native 1.0.5, Uniwind (Tailwind v4 for RN), `@expo/vector-icons` (Ionicons).
**Note on verification steps:** This project has no test runner configured (`package.json` only has `lint`/`typecheck`/`format` scripts) and this feature is presentational/mock-data-only per the approved spec (no business logic to unit-test). So instead of TDD red/green steps, every task's verification step is `yarn typecheck` (and `yarn lint` at milestones), plus manual visual checks at the point a screen first becomes viewable. All commands below assume the working directory is `app/` (i.e. `/mnt/store/develop/projects/projd/volana/app`).
---
## File Overview
```
app/src/global.css — theme color overrides (Task 1)
app/src/data/mock.ts — Product/Resolver/Order types + mock data (Task 2)
app/src/lib/status.ts — status/availability → label+color helpers (Task 3)
app/src/state/wallet.tsx — WalletProvider/useWallet (Task 4)
app/src/state/modals.tsx — ModalProvider/useModals (Task 5)
app/src/app/_layout.tsx — providers, TopNav, global sheets (Tasks 6 & 15)
app/src/components/StatusChip.tsx — Task 7
app/src/components/ListingCard.tsx — Task 8
app/src/components/ResolverCard.tsx — Task 9
app/src/components/OrderRow.tsx — Task 10
app/src/components/WalletConnectSheet.tsx — Task 11
app/src/components/CheckoutSheet.tsx — Task 12
app/src/components/AppHeader.tsx — Task 13
app/src/components/TopNav.tsx — Task 14
app/src/app/(tabs)/index.tsx — Home screen (Task 16)
app/src/app/(tabs)/browse.tsx — Browse screen, replaces explore.tsx (Task 17)
app/src/app/(tabs)/orders.tsx — Orders list screen (Task 18)
app/src/app/(tabs)/_layout.tsx — tab bar, responsive hide (Task 19)
app/src/app/listing/[id].tsx — Listing detail screen (Task 20)
app/src/app/orders/[id].tsx — Order detail screen (Task 21)
```
Task 22 is a final typecheck/lint/manual-walkthrough pass.
---
### Task 1: Theme color tokens
**Files:**
- Modify: `app/src/global.css`
- [ ] **Step 1: Add prototype color overrides**
Replace the full contents of `app/src/global.css` with:
```css
@import "tailwindcss";
@import "uniwind";
@import "heroui-native/styles";
/* End-user path: heroui-native lives in the project's node_modules, one
level up from this src/global.css file. */
@source '../node_modules/heroui-native/lib';
@layer theme {
@variant light {
--background: #f7f6fb;
--surface: #ffffff;
--surface-secondary: #f0eef8;
--accent: #7a34d4;
--accent-foreground: #ffffff;
--success: #059669;
--warning: #d97706;
--danger: #dc2626;
}
@variant dark {
--background: #0e0e1c;
--surface: #171730;
--surface-secondary: #1e1e3c;
--accent: #b060ff;
--accent-foreground: #ffffff;
--success: #14f195;
--warning: #f5a623;
--danger: #ff4d4f;
}
}
```
These are the exact hex values from `prototype/Volana.dc.html`'s `:root`/`[data-theme="light"]` CSS variables (`--c-bg`, `--c-surf`, `--c-surf2`, `--c-a`, `--c-g`, `--c-y`, `--c-r`). `--radius` is intentionally left untouched — HeroUI's default base radius is 8px, which already produces `radius-lg`=8px/`radius-xl`=12px/`radius-2xl`=16px, matching the prototype's 8–16px card/button radii closely enough that overriding it isn't needed.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors (CSS changes don't affect TS, this just confirms the baseline is still healthy before further changes).
- [ ] **Step 3: Commit**
```bash
git add app/src/global.css
git commit -m "theme: apply Volana prototype accent/status/surface colors"
```
---
### Task 2: Mock data
**Files:**
- Create: `app/src/data/mock.ts`
- [ ] **Step 1: Create the mock data module**
```ts
export type Currency = "SOL" | "USDC";
export interface Product {
id: number;
name: string;
desc: string;
price: string;
priceNum: number;
cur: Currency;
usd: string;
qty: number;
seller: string;
bg: string;
emoji: string;
alt: Currency[];
cat: string;
}
export interface Resolver {
id: number;
name: string;
desc: string;
fee: string;
type: "Human" | "DAO" | "Automated";
wins: number;
total: number;
}
export type OrderStatus = "AwaitingConfirm" | "Active" | "Complete" | "Cancelled" | "Disputed";
export interface Order {
id: number;
lid: number;
name: string;
amt: string;
status: OrderStatus;
date: string;
seller: string;
emoji: string;
}
export const PRODUCTS: Product[] = [
{ id: 0, name: 'MacBook Pro 14" M3 Pro', desc: "Factory sealed. 18GB Unified Memory, 512GB SSD, Space Black. International keyboard layout.", price: "2.4 SOL", priceNum: 2.4, cur: "SOL", usd: "$288", qty: 5, seller: "Gh9Z…mF8k", bg: "#0a1828", emoji: "💻", alt: ["USDC"], cat: "Electronics" },
{ id: 1, name: "Adobe Photoshop Lifetime Key", desc: "One-time activation code. Non-subscription. Valid for 2 devices on Windows and macOS.", price: "45 USDC", priceNum: 45, cur: "USDC", usd: "$45", qty: 12, seller: "Bx3K…7pRq", bg: "#001230", emoji: "🎨", alt: ["SOL"], cat: "Software" },
{ id: 2, name: 'Air Jordan 1 Retro "Shadow" US 10', desc: "Deadstock. Black/Particle Grey/White. Original box, tissue paper and receipt. Zero wears.", price: "180 USDC", priceNum: 180, cur: "USDC", usd: "$180", qty: 1, seller: "Qm4R…nL2w", bg: "#180800", emoji: "👟", alt: [], cat: "Fashion" },
{ id: 3, name: "Custom 65% Mechanical Keyboard", desc: "Lubed Gateron Yellow Pro V2 switches. POM plate, anodized aluminum case. USB-C cable included.", price: "0.9 SOL", priceNum: 0.9, cur: "SOL", usd: "$108", qty: 3, seller: "Kx7P…2mJc", bg: "#0a1810", emoji: "⌨️", alt: ["USDC"], cat: "Electronics" },
{ id: 4, name: "Midjourney Pro Plan (1 Year)", desc: "Full-year activation code. 30 fast GPU hours/month, unlimited relaxed, private and stealth mode.", price: "120 USDC", priceNum: 120, cur: "USDC", usd: "$120", qty: 8, seller: "Pp1L…sY9v", bg: "#120820", emoji: "🖼️", alt: [], cat: "Software" },
{ id: 5, name: "Sony WH-1000XM5 Headphones", desc: "Brand new, factory sealed. Midnight Black. 30-hour battery. Industry-leading noise cancellation.", price: "1.8 SOL", priceNum: 1.8, cur: "SOL", usd: "$216", qty: 0, seller: "Fx2T…oK5r", bg: "#0a0a14", emoji: "🎧", alt: [], cat: "Electronics" },
{ id: 6, name: 'iPad Pro 12.9" M2 (256GB Wi-Fi)', desc: "Silver. Opened for 2 hours of testing only. AppleCare+ until June 2026. Original box included.", price: "3.2 SOL", priceNum: 3.2, cur: "SOL", usd: "$384", qty: 2, seller: "Rv8W…eC1x", bg: "#081420", emoji: "📱", alt: ["USDC"], cat: "Electronics" },
{ id: 7, name: "Figma Professional (1 Year)", desc: "Team seat. Unlimited projects, 180-day version history, dev mode and advanced prototyping.", price: "60 USDC", priceNum: 60, cur: "USDC", usd: "$60", qty: 20, seller: "Mn6S…hB3z", bg: "#180a00", emoji: "✏️", alt: ["SOL"], cat: "Software" },
{ id: 8, name: "Supreme Box Logo Hoodie — M", desc: "FW23 White. Unworn, original tags attached. Comes in original Supreme bag. Firm price.", price: "220 USDC", priceNum: 220, cur: "USDC", usd: "$220", qty: 1, seller: "Yx5A…dN7u", bg: "#180008", emoji: "🧥", alt: [], cat: "Fashion" },
{ id: 9, name: "Nintendo Switch OLED (White)", desc: "Excellent condition. Original Joy-Con, dock, power adapter, HDMI cable. Screen is pristine.", price: "1.2 SOL", priceNum: 1.2, cur: "SOL", usd: "$144", qty: 4, seller: "Jc0M…pQ4y", bg: "#0e0d18", emoji: "🕹️", alt: ["USDC"], cat: "Electronics" },
{ id: 10, name: "myshop.sol Domain Name", desc: "Premium 3-year .sol domain registration. Currently parked. Instant transfer to your wallet on purchase.", price: "0.5 SOL", priceNum: 0.5, cur: "SOL", usd: "$60", qty: 1, seller: "Zg3F…wR6t", bg: "#0e0820", emoji: "🌐", alt: [], cat: "Crypto" },
{ id: 11, name: "Rolex Submariner 116610LN", desc: "Ref 116610LN, 2019. Full box and papers. Last serviced June 2024 by Rolex-authorized RSC.", price: "8.5 SOL", priceNum: 8.5, cur: "SOL", usd: "$1,020", qty: 1, seller: "Wh7N…iE2s", bg: "#081215", emoji: "⌚", alt: ["USDC"], cat: "Luxury" },
];
export const RESOLVERS: Resolver[] = [
{ id: 0, name: "ShieldArb", desc: "Human arbitrators with 24h response.", fee: "0.5%", type: "Human", wins: 94, total: 1247 },
{ id: 1, name: "FairDAO", desc: "Community-governed DAO for digital goods.", fee: "1.0%", type: "DAO", wins: 89, total: 823 },
{ id: 2, name: "QuickResolve", desc: "AI-assisted, resolves in under 2 hours.", fee: "1.5%", type: "Automated", wins: 96, total: 3102 },
];
export const ORDERS: Order[] = [
{ id: 0, lid: 0, name: 'MacBook Pro 14" M3 Pro', amt: "2.4 SOL", status: "AwaitingConfirm", date: "2 days ago", seller: "Gh9Z…mF8k", emoji: "💻" },
{ id: 1, lid: 1, name: "Adobe Photoshop Lifetime Key", amt: "45 USDC", status: "Active", date: "5 days ago", seller: "Bx3K…7pRq", emoji: "🎨" },
{ id: 2, lid: 7, name: "Figma Professional (1 Year)", amt: "60 USDC", status: "Complete", date: "12 days ago", seller: "Mn6S…hB3z", emoji: "✏️" },
];
```
This is a verbatim port of the `_L`, `_R`, `_O` arrays from `prototype/Volana.dc.html` (lines 835–859).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/data/mock.ts
git commit -m "feat: add mock product/resolver/order data from prototype"
```
---
### Task 3: Status helpers
**Files:**
- Create: `app/src/lib/status.ts`
- [ ] **Step 1: Create the status/availability helper module**
```ts
import type { OrderStatus } from "@/data/mock";
export type StatusColor = "default" | "accent" | "success" | "warning" | "danger";
export interface StatusInfo {
label: string;
color: StatusColor;
}
const ORDER_STATUS_INFO: Record<OrderStatus, StatusInfo> = {
AwaitingConfirm: { label: "Awaiting Confirm", color: "warning" },
Active: { label: "Active", color: "accent" },
Complete: { label: "Complete", color: "success" },
Cancelled: { label: "Cancelled", color: "default" },
Disputed: { label: "Disputed", color: "danger" },
};
export function orderStatusInfo(status: OrderStatus): StatusInfo {
return ORDER_STATUS_INFO[status];
}
export function availabilityInfo(qty: number): StatusInfo {
if (qty === 0) return { label: "Out of Stock", color: "default" };
if (qty <= 3) return { label: `Only ${qty} left!`, color: "warning" };
return { label: `${qty} in stock`, color: "success" };
}
```
`StatusColor` intentionally matches HeroUI Native's `Chip` `color` prop union (`'default'|'accent'|'success'|'warning'|'danger'`) exactly, so results can be passed straight through to `Chip`/`StatusChip` without conversion. This ports the `_si`/`_av` helper functions from `prototype/Volana.dc.html` (lines 869–884).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/lib/status.ts
git commit -m "feat: add order status and availability label/color helpers"
```
---
### Task 4: WalletProvider
**Files:**
- Create: `app/src/state/wallet.tsx`
- [ ] **Step 1: Create the mock wallet context**
```tsx
import type { JSX, PropsWithChildren } from "react";
import { createContext, useCallback, useContext, useMemo, useState } from "react";
export type WalletName = "phantom" | "solflare" | "backpack";
const WALLET_ADDRESSES: Record<WalletName, string> = {
phantom: "Gh9Z…k3mP",
solflare: "Bx3K…7pRq",
backpack: "Kx7P…2mJc",
};
interface WalletContextValue {
connected: boolean;
address: string | null;
connect: (wallet: WalletName) => void;
disconnect: () => void;
}
const WalletContext = createContext<WalletContextValue | null>(null);
export function WalletProvider({ children }: PropsWithChildren): JSX.Element {
const [address, setAddress] = useState<string | null>(null);
const connect = useCallback((wallet: WalletName) => {
setAddress(WALLET_ADDRESSES[wallet]);
}, []);
const disconnect = useCallback(() => {
setAddress(null);
}, []);
const value = useMemo<WalletContextValue>(
() => ({ connected: address !== null, address, connect, disconnect }),
[address, connect, disconnect],
);
return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>;
}
export function useWallet(): WalletContextValue {
const ctx = useContext(WalletContext);
if (!ctx) throw new Error("useWallet must be used within a WalletProvider");
return ctx;
}
```
Mirrors the prototype's mock `connectPhantom`/`connectSolflare`/`connectBackpack`/`disconnectWallet` handlers (lines 1062–1082), minus the toast side effect (that's wired at the call site in Task 11).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/state/wallet.tsx
git commit -m "feat: add mock WalletProvider"
```
---
### Task 5: ModalProvider
**Files:**
- Create: `app/src/state/modals.tsx`
- [ ] **Step 1: Create the global modal/checkout context**
```tsx
import type { JSX, PropsWithChildren } from "react";
import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
import { useWallet, type WalletName } from "@/state/wallet";
export type CheckoutStep = "review" | "pending" | "success";
interface ModalContextValue {
isWalletSheetOpen: boolean;
isCheckoutSheetOpen: boolean;
checkoutListingId: number | null;
checkoutStep: CheckoutStep;
requestBuy: (listingId: number) => void;
openWalletConnect: () => void;
connectWallet: (wallet: WalletName) => void;
closeWalletSheet: () => void;
closeCheckoutSheet: () => void;
confirmOrder: () => void;
}
const ModalContext = createContext<ModalContextValue | null>(null);
export function ModalProvider({ children }: PropsWithChildren): JSX.Element {
const { connected, connect } = useWallet();
const [isWalletSheetOpen, setWalletSheetOpen] = useState(false);
const [isCheckoutSheetOpen, setCheckoutSheetOpen] = useState(false);
const [checkoutListingId, setCheckoutListingId] = useState<number | null>(null);
const [checkoutStep, setCheckoutStep] = useState<CheckoutStep>("review");
const pendingListingId = useRef<number | null>(null);
const requestBuy = useCallback(
(listingId: number) => {
if (connected) {
setCheckoutListingId(listingId);
setCheckoutStep("review");
setCheckoutSheetOpen(true);
} else {
pendingListingId.current = listingId;
setWalletSheetOpen(true);
}
},
[connected],
);
const openWalletConnect = useCallback(() => {
pendingListingId.current = null;
setWalletSheetOpen(true);
}, []);
const connectWallet = useCallback(
(wallet: WalletName) => {
connect(wallet);
setWalletSheetOpen(false);
const listingId = pendingListingId.current;
pendingListingId.current = null;
if (listingId !== null) {
setCheckoutListingId(listingId);
setCheckoutStep("review");
setCheckoutSheetOpen(true);
}
},
[connect],
);
const closeWalletSheet = useCallback(() => {
setWalletSheetOpen(false);
pendingListingId.current = null;
}, []);
const closeCheckoutSheet = useCallback(() => {
setCheckoutSheetOpen(false);
}, []);
const confirmOrder = useCallback(() => {
setCheckoutStep("pending");
setTimeout(() => setCheckoutStep("success"), 2200);
}, []);
const value = useMemo<ModalContextValue>(
() => ({
isWalletSheetOpen,
isCheckoutSheetOpen,
checkoutListingId,
checkoutStep,
requestBuy,
openWalletConnect,
connectWallet,
closeWalletSheet,
closeCheckoutSheet,
confirmOrder,
}),
[
isWalletSheetOpen,
isCheckoutSheetOpen,
checkoutListingId,
checkoutStep,
requestBuy,
openWalletConnect,
connectWallet,
closeWalletSheet,
closeCheckoutSheet,
confirmOrder,
],
);
return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
}
export function useModals(): ModalContextValue {
const ctx = useContext(ModalContext);
if (!ctx) throw new Error("useModals must be used within a ModalProvider");
return ctx;
}
```
`requestBuy` mirrors the prototype's `clickBuy`/`onBuyNow` logic (open wallet modal first if not connected, remembering the listing via `pendingId`, else go straight to checkout). `confirmOrder` mirrors `confirmOrder` (lines 1055–1058): flips to `pending`, then `success` after 2.2s.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/state/modals.tsx
git commit -m "feat: add ModalProvider for wallet-connect and checkout sheets"
```
---
### Task 6: Wire Wallet and Modal providers into the root layout
**Files:**
- Modify: `app/src/app/_layout.tsx`
- [ ] **Step 1: Wrap the app in WalletProvider and ModalProvider**
Replace the full contents of `app/src/app/_layout.tsx` with:
```tsx
import type { JSX } from "react";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { HeroUINativeProvider } from "heroui-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "../global.css";
import { WalletProvider } from "@/state/wallet";
import { ModalProvider } from "@/state/modals";
export default function RootLayout(): JSX.Element {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<HeroUINativeProvider config={{ devInfo: { stylingPrinciples: false } }}>
<WalletProvider>
<ModalProvider>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(tabs)" />
</Stack>
</ModalProvider>
</WalletProvider>
<StatusBar style="auto" />
</HeroUINativeProvider>
</GestureHandlerRootView>
);
}
```
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start` (or `yarn start --web`), open the app.
Expected: app boots and shows the existing Home tab exactly as before (providers don't change behavior yet — nothing consumes them until later tasks). Stop the dev server after confirming.
- [ ] **Step 3: Commit**
```bash
git add app/src/app/_layout.tsx
git commit -m "feat: wire WalletProvider and ModalProvider into root layout"
```
---
### Task 7: StatusChip component
**Files:**
- Create: `app/src/components/StatusChip.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { Chip } from "heroui-native";
import type { StatusColor } from "@/lib/status";
interface StatusChipProps {
label: string;
color: StatusColor;
}
export function StatusChip({ label, color }: StatusChipProps): JSX.Element {
return (
<Chip variant="soft" color={color} size="sm">
<Chip.Label>{label}</Chip.Label>
</Chip>
);
}
```
`variant="soft"` gives the tinted-background-plus-matching-text look the prototype uses for all its badges (e.g. `background:var(--c-gd);border:1px solid var(--c-g);color:var(--c-g)`).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/StatusChip.tsx
git commit -m "feat: add StatusChip component"
```
---
### Task 8: ListingCard component
**Files:**
- Create: `app/src/components/ListingCard.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { GestureResponderEvent } from "react-native";
import type { JSX } from "react";
import { Pressable, View } from "react-native";
import { useRouter } from "expo-router";
import { Button, Separator, Surface, Typography } from "heroui-native";
import type { Product } from "@/data/mock";
import { availabilityInfo } from "@/lib/status";
import { StatusChip } from "@/components/StatusChip";
import { useModals } from "@/state/modals";
interface ListingCardProps {
product: Product;
variant?: "list" | "grid";
}
export function ListingCard({ product, variant = "grid" }: ListingCardProps): JSX.Element {
const router = useRouter();
const { requestBuy } = useModals();
const availability = availabilityInfo(product.qty);
const isOut = product.qty === 0;
const openListing = () => router.push(`/listing/${product.id}`);
const handleBuyPress = (event: GestureResponderEvent) => {
event.stopPropagation();
requestBuy(product.id);
};
if (variant === "list") {
return (
<Pressable onPress={openListing}>
<Surface variant="default" className="flex-row items-stretch gap-0 overflow-hidden p-0">
<View
className="w-24 items-center justify-center md:w-36"
style={{ backgroundColor: product.bg }}
>
<Typography className="text-4xl">{product.emoji}</Typography>
</View>
<Separator orientation="vertical" />
<View className="w-24 justify-center gap-0.5 p-3 md:w-32">
<Typography type="h6" className="text-accent">
{product.priceNum}
</Typography>
<Typography type="body-xs" color="muted">
{product.cur}
</Typography>
</View>
<Separator orientation="vertical" />
<View className="flex-1 justify-center gap-1 p-3">
<Typography type="body-sm" weight="semibold" numberOfLines={1}>
{product.name}
</Typography>
<Typography type="body-xs" color="muted" numberOfLines={2}>
{product.desc}
</Typography>
</View>
<Separator orientation="vertical" />
<View className="w-28 items-stretch justify-center gap-2 p-3">
<StatusChip label={availability.label} color={availability.color} />
<Button
size="sm"
variant={isOut ? "secondary" : "primary"}
isDisabled={isOut}
onPress={handleBuyPress}
>
<Button.Label>{isOut ? "Out of Stock" : "Buy Now"}</Button.Label>
</Button>
</View>
</Surface>
</Pressable>
);
}
return (
<Pressable onPress={openListing} className="w-1/2 p-1.5 md:w-1/3 lg:w-1/4">
<Surface variant="default" className="gap-0 overflow-hidden p-0">
<View
className="h-32 items-center justify-center"
style={{ backgroundColor: product.bg }}
>
<Typography className="text-4xl">{product.emoji}</Typography>
</View>
<View className="gap-1 p-2.5">
<Typography type="body-sm" weight="semibold" numberOfLines={2}>
{product.name}
</Typography>
<Typography type="body-xs" color="muted" numberOfLines={1}>
{product.seller}
</Typography>
<View className="mt-1 flex-row items-center justify-between gap-1">
<Typography type="body" weight="bold" className="text-accent">
{product.price}
</Typography>
<StatusChip label={availability.label} color={availability.color} />
</View>
<Button
size="sm"
variant={isOut ? "secondary" : "primary"}
isDisabled={isOut}
className="mt-2 w-full"
onPress={handleBuyPress}
>
<Button.Label>{isOut ? "Out of Stock" : "Buy Now"}</Button.Label>
</Button>
</View>
</Surface>
</Pressable>
);
}
```
`grid` variant carries its own responsive width (`w-1/2 md:w-1/3 lg:w-1/4`) so callers can just render a `flex-row flex-wrap` container and drop cards in — no CSS Grid needed (React Native doesn't support `display: grid`, even on the web build). `list` variant reproduces the prototype's image/price/name+desc/buy row (lines 353–392) using `Separator` for the vertical divider lines instead of manual border classes.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/ListingCard.tsx
git commit -m "feat: add ListingCard component (list and grid variants)"
```
---
### Task 9: ResolverCard component
**Files:**
- Create: `app/src/components/ResolverCard.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { Pressable, View } from "react-native";
import { Typography } from "heroui-native";
import type { Resolver } from "@/data/mock";
interface ResolverCardProps {
resolver: Resolver;
isSelected: boolean;
onSelect: () => void;
}
export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
return (
<Pressable
onPress={onSelect}
className={`mb-1.5 rounded-xl border p-3 ${
isSelected ? "border-accent bg-accent/10" : "border-border bg-transparent"
}`}
>
<View className="flex-row items-center justify-between">
<Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
{resolver.name}
</Typography>
<Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
{resolver.fee}
</Typography>
</View>
<Typography type="body-xs" color="muted" className="mt-0.5">
{resolver.type} · {resolver.wins}% buyer-favorable
</Typography>
</Pressable>
);
}
```
Ports the prototype's selectable resolver rows (lines 514–522 / `_fb` selected-state styling).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/ResolverCard.tsx
git commit -m "feat: add ResolverCard component"
```
---
### Task 10: OrderRow component
**Files:**
- Create: `app/src/components/OrderRow.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { Pressable, View } from "react-native";
import { useRouter } from "expo-router";
import { Typography } from "heroui-native";
import type { Order } from "@/data/mock";
import { orderStatusInfo } from "@/lib/status";
import { StatusChip } from "@/components/StatusChip";
interface OrderRowProps {
order: Order;
}
export function OrderRow({ order }: OrderRowProps): JSX.Element {
const router = useRouter();
const status = orderStatusInfo(order.status);
return (
<Pressable
onPress={() => router.push(`/orders/${order.id}`)}
className="flex-row items-center gap-3.5 rounded-xl border border-border bg-surface p-3.5"
>
<Typography className="text-2xl">{order.emoji}</Typography>
<View className="flex-1 gap-0.5">
<Typography type="body-sm" weight="semibold" numberOfLines={1}>
{order.name}
</Typography>
<Typography type="body-xs" color="muted">
{order.seller}
</Typography>
</View>
<View className="items-end gap-0.5">
<Typography type="body-sm" weight="bold">
{order.amt}
</Typography>
<Typography type="body-xs" color="muted">
{order.date}
</Typography>
</View>
<StatusChip label={status.label} color={status.color} />
</Pressable>
);
}
```
Ports the prototype's order list row (lines 556–570).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/OrderRow.tsx
git commit -m "feat: add OrderRow component"
```
---
### Task 11: WalletConnectSheet component
**Files:**
- Create: `app/src/components/WalletConnectSheet.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { View } from "react-native";
import { BottomSheet, Button, Typography, useToast } from "heroui-native";
import { useModals } from "@/state/modals";
import type { WalletName } from "@/state/wallet";
const WALLETS: { id: WalletName; label: string; description: string; emoji: string }[] = [
{ id: "phantom", label: "Phantom", description: "Most popular Solana wallet", emoji: "👻" },
{ id: "solflare", label: "Solflare", description: "Built for power users", emoji: "🌊" },
{ id: "backpack", label: "Backpack", description: "xNFT & multi-chain wallet", emoji: "🎒" },
];
export function WalletConnectSheet(): JSX.Element {
const { isWalletSheetOpen, closeWalletSheet, connectWallet } = useModals();
const { toast } = useToast();
const handleConnect = (wallet: WalletName, label: string) => {
connectWallet(wallet);
toast.show({ variant: "success", label: `${label} connected!` });
};
return (
<BottomSheet
isOpen={isWalletSheetOpen}
onOpenChange={(open) => {
if (!open) closeWalletSheet();
}}
>
<BottomSheet.Portal>
<BottomSheet.Overlay />
<BottomSheet.Content>
<BottomSheet.Close />
<BottomSheet.Title>Connect Wallet</BottomSheet.Title>
<BottomSheet.Description>Choose your Solana wallet</BottomSheet.Description>
<View className="mt-5 gap-2">
{WALLETS.map((wallet) => (
<Button
key={wallet.id}
variant="secondary"
className="h-auto justify-start gap-3 px-4 py-3"
onPress={() => handleConnect(wallet.id, wallet.label)}
>
<Typography className="text-2xl">{wallet.emoji}</Typography>
<View className="flex-1 items-start">
<Button.Label>{wallet.label}</Button.Label>
<Typography type="body-xs" color="muted">
{wallet.description}
</Typography>
</View>
</Button>
))}
</View>
</BottomSheet.Content>
</BottomSheet.Portal>
</BottomSheet>
);
}
```
This is rendered once at the root (Task 15) and driven entirely by `ModalProvider`'s `isWalletSheetOpen`/`closeWalletSheet`/`connectWallet` — no `BottomSheet.Trigger` needed, matching the documented fully-controlled `isOpen`/`onOpenChange` pattern. Ports the prototype's wallet modal (lines 656–698) and `connectPhantom`/`connectSolflare`/`connectBackpack` toasts (lines 1062–1082).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/WalletConnectSheet.tsx
git commit -m "feat: add WalletConnectSheet component"
```
---
### Task 12: CheckoutSheet component
**Files:**
- Create: `app/src/components/CheckoutSheet.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { useMemo, useState } from "react";
import { View } from "react-native";
import { useRouter } from "expo-router";
import { BottomSheet, Button, Spinner, Typography, useThemeColor } from "heroui-native";
import { PRODUCTS, RESOLVERS } from "@/data/mock";
import { useModals } from "@/state/modals";
import { ResolverCard } from "@/components/ResolverCard";
export function CheckoutSheet(): JSX.Element {
const router = useRouter();
const accentColor = useThemeColor("accent");
const { isCheckoutSheetOpen, checkoutListingId, checkoutStep, closeCheckoutSheet, confirmOrder } =
useModals();
const [resolverId, setResolverId] = useState(0);
const listing = useMemo(
() => PRODUCTS.find((product) => product.id === checkoutListingId) ?? PRODUCTS[0],
[checkoutListingId],
);
const handleViewOrders = () => {
closeCheckoutSheet();
router.push("/orders");
};
const handleContinueShopping = () => {
closeCheckoutSheet();
router.push("/browse");
};
return (
<BottomSheet
isOpen={isCheckoutSheetOpen}
onOpenChange={(open) => {
if (!open) closeCheckoutSheet();
}}
>
<BottomSheet.Portal>
<BottomSheet.Overlay isCloseOnPress={checkoutStep !== "pending"} />
<BottomSheet.Content>
{checkoutStep === "review" && (
<View className="gap-4">
<BottomSheet.Close />
<BottomSheet.Title>Place Order</BottomSheet.Title>
<View className="flex-row items-center gap-3 rounded-xl bg-surface-secondary p-3">
<View
className="size-11 items-center justify-center rounded-lg"
style={{ backgroundColor: listing.bg }}
>
<Typography className="text-xl">{listing.emoji}</Typography>
</View>
<View className="flex-1">
<Typography type="body-sm" weight="semibold" numberOfLines={1}>
{listing.name}
</Typography>
<Typography type="body-xs" color="muted">
{listing.seller}
</Typography>
</View>
</View>
<View className="gap-1 rounded-xl bg-surface-secondary p-3.5">
<Typography type="body-xs" color="muted">
Payment
</Typography>
<View className="flex-row items-baseline gap-2">
<Typography type="h5">{listing.price}</Typography>
<Typography type="body-sm" color="muted">
≈ {listing.usd} USD
</Typography>
</View>
</View>
<View className="gap-2 rounded-xl bg-surface-secondary p-3.5">
<Typography type="body-xs" color="muted">
Dispute Protection
</Typography>
{RESOLVERS.map((item) => (
<ResolverCard
key={item.id}
resolver={item}
isSelected={item.id === resolverId}
onSelect={() => setResolverId(item.id)}
/>
))}
</View>
<View className="flex-row gap-2">
<Button variant="secondary" className="flex-1" onPress={closeCheckoutSheet}>
<Button.Label>Cancel</Button.Label>
</Button>
<Button className="flex-[2]" onPress={confirmOrder}>
<Button.Label>Confirm & Place Order →</Button.Label>
</Button>
</View>
</View>
)}
{checkoutStep === "pending" && (
<View className="items-center gap-4 py-10">
<Spinner size="lg" color={accentColor} />
<Typography type="h6">Confirming on Solana…</Typography>
<Typography type="body-sm" color="muted" align="center">
{"Approve the transaction in your wallet.\nThis takes a few seconds."}
</Typography>
</View>
)}
{checkoutStep === "success" && (
<View className="gap-4">
<View className="items-center gap-2">
<View className="size-14 items-center justify-center rounded-full bg-success/15">
<Typography className="text-2xl">✓</Typography>
</View>
<Typography type="h5">Order Placed!</Typography>
<Typography type="body-sm" color="muted" align="center">
{`${listing.price} is now held in secure escrow.\nThe seller has been notified.`}
</Typography>
</View>
<View className="flex-row gap-2">
<Button variant="secondary" className="flex-1" onPress={handleContinueShopping}>
<Button.Label>Continue Shopping</Button.Label>
</Button>
<Button className="flex-1" onPress={handleViewOrders}>
<Button.Label>View My Orders</Button.Label>
</Button>
</View>
</View>
)}
</BottomSheet.Content>
</BottomSheet.Portal>
</BottomSheet>
);
}
```
`confirmOrder` (from `ModalProvider`) drives the `review → pending → success` transition with the same 2.2s delay as the prototype (lines 1055–1058). The resolver picker reuses `ResolverCard` (Task 9). `isCloseOnPress={checkoutStep !== "pending"}` stops the user from dismissing the sheet mid-"transaction".
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/CheckoutSheet.tsx
git commit -m "feat: add CheckoutSheet component (review/pending/success)"
```
---
### Task 13: AppHeader component
**Files:**
- Create: `app/src/components/AppHeader.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { Pressable, View } from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { Typography, useThemeColor } from "heroui-native";
interface AppHeaderProps {
title: string;
}
export function AppHeader({ title }: AppHeaderProps): JSX.Element {
const router = useRouter();
const foreground = useThemeColor("foreground");
return (
<View className="flex-row items-center gap-2 px-4 py-3 md:hidden">
<Pressable onPress={() => router.back()} hitSlop={8} className="p-1">
<Ionicons name="chevron-back" size={22} color={foreground} />
</Pressable>
<Typography type="h6" numberOfLines={1} className="flex-1">
{title}
</Typography>
</View>
);
}
```
Used only on the mobile-pushed Listing Detail and Order Detail screens (Tasks 20–21), which set `headerShown: false` at the root Stack level and render this instead. It's hidden at `md:` because `TopNav` (Task 14) is visible there and provides navigation instead.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/AppHeader.tsx
git commit -m "feat: add AppHeader component for mobile stack screens"
```
---
### Task 14: TopNav component
**Files:**
- Create: `app/src/components/TopNav.tsx`
- [ ] **Step 1: Create the component**
```tsx
import type { JSX } from "react";
import { useState } from "react";
import { Pressable, View } from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { Button, SearchField, Typography, useThemeColor } from "heroui-native";
import { useWallet } from "@/state/wallet";
import { useModals } from "@/state/modals";
export function TopNav(): JSX.Element {
const router = useRouter();
const accentForeground = useThemeColor("accent-foreground");
const { connected, address, disconnect } = useWallet();
const { openWalletConnect } = useModals();
const [search, setSearch] = useState("");
return (
<View className="hidden h-16 flex-row items-center gap-4 border-b border-border bg-background px-6 md:flex">
<Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
<View className="size-6 items-center justify-center rounded-md bg-accent">
<Ionicons name="list" size={14} color={accentForeground} />
</View>
<Typography type="h6">Volana</Typography>
</Pressable>
<View className="max-w-[320px] flex-1">
<SearchField value={search} onChange={setSearch}>
<SearchField.Group>
<SearchField.SearchIcon />
<SearchField.Input
placeholder="Search listings…"
onSubmitEditing={() => router.push("/browse")}
/>
</SearchField.Group>
</SearchField>
</View>
<View className="flex-1" />
<Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
<Button.Label>Browse</Button.Label>
</Button>
<Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
<Button.Label>My Orders</Button.Label>
</Button>
{connected ? (
<Button variant="secondary" size="sm" onPress={disconnect}>
<Button.Label>{address}</Button.Label>
</Button>
) : (
<Button size="sm" onPress={openWalletConnect}>
<Button.Label>Connect Wallet</Button.Label>
</Button>
)}
</View>
);
}
```
`hidden md:flex` keeps this invisible on mobile widths. The search field navigates to `/browse` on submit — it intentionally does not thread the query into Browse's own search state (Browse has its own independent search field, Task 17); wiring cross-screen search state isn't needed for a mock-data app and would add scope without a corresponding prototype requirement beyond "navigate to browse".
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add app/src/components/TopNav.tsx
git commit -m "feat: add TopNav component for wide/web layouts"
```
---
### Task 15: Wire TopNav and global sheets into the root layout
**Files:**
- Modify: `app/src/app/_layout.tsx`
- [ ] **Step 1: Render TopNav above the Stack, and the two sheets alongside it**
Replace the full contents of `app/src/app/_layout.tsx` with:
```tsx
import type { JSX } from "react";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { HeroUINativeProvider } from "heroui-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { View } from "react-native";
import "../global.css";
import { WalletProvider } from "@/state/wallet";
import { ModalProvider } from "@/state/modals";
import { TopNav } from "@/components/TopNav";
import { WalletConnectSheet } from "@/components/WalletConnectSheet";
import { CheckoutSheet } from "@/components/CheckoutSheet";
export default function RootLayout(): JSX.Element {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<HeroUINativeProvider config={{ devInfo: { stylingPrinciples: false } }}>
<WalletProvider>
<ModalProvider>
<View className="flex-1 bg-background">
<TopNav />
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(tabs)" />
</Stack>
</View>
<WalletConnectSheet />
<CheckoutSheet />
</ModalProvider>
</WalletProvider>
<StatusBar style="auto" />
</HeroUINativeProvider>
</GestureHandlerRootView>
);
}
```
`TopNav` sits above the `Stack` inside a `flex-1` wrapper, so it persists across every route pushed onto that Stack (tab screens and, later, `listing/[id]`/`orders/[id]`). The two sheets are rendered once, outside the Stack, and are entirely state-driven by `ModalProvider` — any screen can call `useModals().requestBuy(...)` etc. to open them.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start --web`, resize the browser window wide (≥768px) and narrow (<768px).
Expected: at narrow width, no top bar is visible (bottom tab bar still shows, from the existing (tabs) layout). At wide width, the Volana top bar (logo, search field, Browse/My Orders buttons, Connect Wallet button) appears above the content. Clicking "Connect Wallet" opens a bottom sheet listing Phantom/Solflare/Backpack; clicking one closes it and the nav button now shows the mock address. Stop the dev server after confirming.
- [ ] **Step 3: Commit**
```bash
git add app/src/app/_layout.tsx
git commit -m "feat: render TopNav and global wallet/checkout sheets in root layout"
```
---
### Task 16: Home screen
**Files:**
- Modify: `app/src/app/(tabs)/index.tsx`
- [ ] **Step 1: Replace the placeholder Home screen**
Replace the full contents of `app/src/app/(tabs)/index.tsx` with:
```tsx
import type { JSX } from "react";
import { ScrollView, View } from "react-native";
import { useRouter } from "expo-router";
import { Button, Typography } from "heroui-native";
import { PRODUCTS } from "@/data/mock";
import { ListingCard } from "@/components/ListingCard";
export default function HomeTab(): JSX.Element {
const router = useRouter();
const featured = PRODUCTS.filter((product) => product.qty > 0).slice(0, 4);
return (
<ScrollView className="flex-1 bg-background">
<View className="gap-4 px-5 pb-6 pt-8 md:items-center md:pt-14">
<Typography type="h2" className="md:text-center">
{"The marketplace\n"}
<Typography type="h2" className="text-accent">
nobody controls.
</Typography>
</Typography>
<Typography type="body-sm" color="muted" className="md:max-w-md md:text-center">
Buy and sell freely. Payments are final — no chargebacks, no frozen accounts.
</Typography>
<Button onPress={() => router.push("/browse")} className="self-start md:self-center">
<Button.Label>Browse Listings →</Button.Label>
</Button>
</View>
<View className="px-3.5 pb-10">
<Typography type="h5" className="px-1.5 pb-3">
Featured listings
</Typography>
<View className="flex-row flex-wrap">
{featured.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" />
))}
</View>
</View>
</ScrollView>
);
}
```
This is the "Minimal" home-tab scope agreed in the spec: short hero + featured listings only (no stats/"why Volana"/"how it works" sections, no footer). Ports the prototype's hero headline (lines 125–126) and featured listings grid (lines 262–276), using the same "first 4 in-stock products" selection (prototype `featuredProducts`, lines 1099–1103).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start --web`, open the Home tab.
Expected: purple-accented headline "The marketplace / nobody controls.", subline, "Browse Listings →" button, and a 2-column (narrow) / 3–4-column (wide) grid of 4 featured product cards with emoji thumbnails, names, and prices. Tapping a card navigates to a (still-placeholder-behaving, since Task 20 isn't done yet — it will 404 or show a default Expo Router "unmatched route" screen) listing route — that's expected at this point. Stop the dev server after confirming the Home tab itself renders correctly.
- [ ] **Step 3: Commit**
```bash
git add "app/src/app/(tabs)/index.tsx"
git commit -m "feat: implement Home screen (hero + featured listings)"
```
---
### Task 17: Browse screen
**Files:**
- Delete: `app/src/app/(tabs)/explore.tsx`
- Create: `app/src/app/(tabs)/browse.tsx`
- [ ] **Step 1: Remove the placeholder Explore screen**
```bash
git rm "app/src/app/(tabs)/explore.tsx"
```
- [ ] **Step 2: Create the Browse screen**
```tsx
import type { JSX } from "react";
import { useMemo, useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Chip, SearchField, Switch, Typography, useThemeColor } from "heroui-native";
import type { Currency, Product } from "@/data/mock";
import { PRODUCTS } from "@/data/mock";
import { ListingCard } from "@/components/ListingCard";
type CurrencyFilter = "all" | Currency;
type SortMode = "newest" | "priceLow" | "priceHigh";
type ViewMode = "list" | "grid";
export default function BrowseTab(): JSX.Element {
const [search, setSearch] = useState("");
const [currencyFilter, setCurrencyFilter] = useState<CurrencyFilter>("all");
const [sortMode, setSortMode] = useState<SortMode>("newest");
const [inStockOnly, setInStockOnly] = useState(true);
const [viewMode, setViewMode] = useState<ViewMode>("list");
const mutedColor = useThemeColor("muted");
const accentForeground = useThemeColor("accent-foreground");
const products = useMemo<Product[]>(() => {
let result = [...PRODUCTS];
if (inStockOnly) result = result.filter((product) => product.qty > 0);
if (currencyFilter !== "all") result = result.filter((product) => product.cur === currencyFilter);
if (search.trim()) {
const query = search.trim().toLowerCase();
result = result.filter(
(product) =>
product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query),
);
}
if (sortMode === "priceLow") result.sort((a, b) => a.priceNum - b.priceNum);
else if (sortMode === "priceHigh") result.sort((a, b) => b.priceNum - a.priceNum);
return result;
}, [search, currencyFilter, sortMode, inStockOnly]);
return (
<View className="flex-1 bg-background">
<View className="gap-3 border-b border-border px-4 py-3">
<SearchField value={search} onChange={setSearch}>
<SearchField.Group>
<SearchField.SearchIcon />
<SearchField.Input placeholder="Search listings…" />
<SearchField.ClearButton />
</SearchField.Group>
</SearchField>
<View className="flex-row flex-wrap items-center gap-2">
<Typography type="body-xs" color="muted">
Currency
</Typography>
<Chip
size="sm"
variant={currencyFilter === "all" ? "primary" : "soft"}
color={currencyFilter === "all" ? "accent" : "default"}
onPress={() => setCurrencyFilter("all")}
>
<Chip.Label>All</Chip.Label>
</Chip>
<Chip
size="sm"
variant={currencyFilter === "SOL" ? "primary" : "soft"}
color={currencyFilter === "SOL" ? "accent" : "default"}
onPress={() => setCurrencyFilter("SOL")}
>
<Chip.Label>SOL</Chip.Label>
</Chip>
<Chip
size="sm"
variant={currencyFilter === "USDC" ? "primary" : "soft"}
color={currencyFilter === "USDC" ? "accent" : "default"}
onPress={() => setCurrencyFilter("USDC")}
>
<Chip.Label>USDC</Chip.Label>
</Chip>
<Typography type="body-xs" color="muted" className="ml-2">
Sort
</Typography>
<Chip
size="sm"
variant={sortMode === "newest" ? "primary" : "soft"}
color={sortMode === "newest" ? "accent" : "default"}
onPress={() => setSortMode("newest")}
>
<Chip.Label>Newest</Chip.Label>
</Chip>
<Chip
size="sm"
variant={sortMode === "priceLow" ? "primary" : "soft"}
color={sortMode === "priceLow" ? "accent" : "default"}
onPress={() => setSortMode("priceLow")}
>
<Chip.Label>Price ↑</Chip.Label>
</Chip>
<Chip
size="sm"
variant={sortMode === "priceHigh" ? "primary" : "soft"}
color={sortMode === "priceHigh" ? "accent" : "default"}
onPress={() => setSortMode("priceHigh")}
>
<Chip.Label>Price ↓</Chip.Label>
</Chip>
</View>
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<Switch isSelected={inStockOnly} onSelectedChange={setInStockOnly} />
<Typography type="body-xs" color="muted">
In stock only
</Typography>
</View>
<View className="flex-row gap-1 rounded-lg border border-border bg-surface p-1">
<Pressable
onPress={() => setViewMode("list")}
className={`h-7 w-8 items-center justify-center rounded-md ${
viewMode === "list" ? "bg-accent" : ""
}`}
>
<Ionicons
name="list"
size={14}
color={viewMode === "list" ? accentForeground : mutedColor}
/>
</Pressable>
<Pressable
onPress={() => setViewMode("grid")}
className={`h-7 w-8 items-center justify-center rounded-md ${
viewMode === "grid" ? "bg-accent" : ""
}`}
>
<Ionicons
name="grid"
size={14}
color={viewMode === "grid" ? accentForeground : mutedColor}
/>
</Pressable>
</View>
</View>
</View>
<ScrollView className="flex-1">
{viewMode === "list" ? (
<View className="gap-2.5 p-3.5">
{products.map((product) => (
<ListingCard key={product.id} product={product} variant="list" />
))}
</View>
) : (
<View className="flex-row flex-wrap p-2">
{products.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" />
))}
</View>
)}
</ScrollView>
</View>
);
}
```
Ports the prototype's filter bar (lines 322–347: currency chips, sort chips, in-stock switch, list/grid toggle) and its filtering/sorting logic (`renderVals`, lines 898–914). Both view modes render via a plain `ScrollView` + `.map()` rather than `FlatList`, since `ListingCard`'s `grid` variant already carries responsive width classes that are incompatible with `FlatList`'s fixed `numColumns` — and at 12 mock items, `FlatList`'s virtualization has no practical benefit anyway.
- [ ] **Step 3: Verify**
Run: `yarn typecheck`
Expected: passes with no errors (this also confirms the `explore.tsx` deletion didn't break any other import — nothing else references it).
Run: `yarn start --web`, navigate to the Browse tab (bottom tab bar narrow, or "Browse" link in TopNav wide).
Expected: search field, Currency (All/SOL/USDC) and Sort (Newest/Price↑/Price↓) chips that visibly highlight the active one, "In stock only" switch (defaults on — Sony headphones with qty 0 should be hidden), list/grid toggle that switches layout. Typing in the search field filters the list live. Stop the dev server after confirming.
- [ ] **Step 4: Commit**
```bash
git add "app/src/app/(tabs)/browse.tsx"
git commit -m "feat: implement Browse screen (search, filters, list/grid view)"
```
---
### Task 18: Orders screen
**Files:**
- Create: `app/src/app/(tabs)/orders.tsx`
- [ ] **Step 1: Create the Orders list screen**
```tsx
import type { JSX } from "react";
import { ScrollView, View } from "react-native";
import { Typography } from "heroui-native";
import { ORDERS } from "@/data/mock";
import { OrderRow } from "@/components/OrderRow";
export default function OrdersTab(): JSX.Element {
return (
<ScrollView className="flex-1 bg-background">
<View className="gap-2.5 p-4 md:mx-auto md:w-full md:max-w-2xl">
<Typography type="h4" className="mb-1">
My Orders
</Typography>
{ORDERS.map((order) => (
<OrderRow key={order.id} order={order} />
))}
</View>
</ScrollView>
);
}
```
Ports the prototype's My Orders page (lines 546–575), using the static `ORDERS` mock array (per the spec's "no dynamically added orders" decision — the prototype itself doesn't add purchased items to this list either).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
- [ ] **Step 3: Commit**
```bash
git add "app/src/app/(tabs)/orders.tsx"
git commit -m "feat: implement Orders list screen"
```
---
### Task 19: Responsive tab bar with Browse and Orders tabs
**Files:**
- Modify: `app/src/app/(tabs)/_layout.tsx`
- [ ] **Step 1: Register the Browse and Orders tabs, hide the tab bar at md: width**
Replace the full contents of `app/src/app/(tabs)/_layout.tsx` with:
```tsx
import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import type { ComponentProps, JSX } from "react";
import type { ColorValue } from "react-native";
import { useWindowDimensions } from "react-native";
type IoniconName = ComponentProps<typeof Ionicons>["name"];
function TabIcon({ name, color }: { name: IoniconName; color: ColorValue }): JSX.Element {
return <Ionicons name={name} size={24} color={color} />;
}
const WIDE_BREAKPOINT = 768;
export default function TabsLayout(): JSX.Element {
const { width } = useWindowDimensions();
const isWide = width >= WIDE_BREAKPOINT;
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: isWide ? { display: "none" } : undefined,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => <TabIcon name="home-outline" color={color} />,
}}
/>
<Tabs.Screen
name="browse"
options={{
title: "Browse",
tabBarIcon: ({ color }) => <TabIcon name="storefront-outline" color={color} />,
}}
/>
<Tabs.Screen
name="orders"
options={{
title: "Orders",
tabBarIcon: ({ color }) => <TabIcon name="receipt-outline" color={color} />,
}}
/>
</Tabs>
);
}
```
`useWindowDimensions` is used (rather than a Tailwind `md:` class) because `tabBarStyle` is a React Navigation option evaluated in JS, not a style on a component we can attach a `className` to directly. It re-renders on resize, so resizing a browser window across the breakpoint live-toggles the tab bar.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start --web`.
Expected: bottom tab bar shows Home/Browse/Orders at narrow width; resizing the window to ≥768px hides the tab bar (TopNav's Browse/My Orders links take over). Stop the dev server after confirming.
- [ ] **Step 3: Commit**
```bash
git add "app/src/app/(tabs)/_layout.tsx"
git commit -m "feat: add Browse/Orders tabs, hide tab bar on wide viewports"
```
---
### Task 20: Listing Detail screen
**Files:**
- Create: `app/src/app/listing/[id].tsx`
- [ ] **Step 1: Create the Listing Detail screen**
```tsx
import type { JSX } from "react";
import type { ViewStyle } from "react-native";
import { useMemo, useState } from "react";
import { Platform, ScrollView, View } from "react-native";
import { useLocalSearchParams } from "expo-router";
import { Button, Chip, Separator, Typography, useToast } from "heroui-native";
import type { Currency } from "@/data/mock";
import { PRODUCTS, RESOLVERS } from "@/data/mock";
import { availabilityInfo } from "@/lib/status";
import { AppHeader } from "@/components/AppHeader";
import { StatusChip } from "@/components/StatusChip";
import { ResolverCard } from "@/components/ResolverCard";
import { ListingCard } from "@/components/ListingCard";
import { useModals } from "@/state/modals";
// react-native-web supports CSS `position: sticky`, but React Native's own
// ViewStyle type doesn't include it — cast is required to use it web-only.
const stickyBoxStyle: ViewStyle | undefined =
Platform.OS === "web" ? ({ position: "sticky", top: 84 } as ViewStyle) : undefined;
export default function ListingDetailScreen(): JSX.Element {
const { id } = useLocalSearchParams<{ id: string }>();
const { toast } = useToast();
const { requestBuy } = useModals();
const [resolverId, setResolverId] = useState(0);
const listing = useMemo(
() => PRODUCTS.find((product) => product.id === Number(id)) ?? PRODUCTS[0],
[id],
);
const [currency, setCurrency] = useState<Currency>(listing.cur);
const availability = availabilityInfo(listing.qty);
const isOut = listing.qty === 0;
const relatedProducts = PRODUCTS.filter((p) => p.id !== listing.id && p.qty > 0).slice(0, 6);
return (
<ScrollView className="flex-1 bg-background">
<AppHeader title={listing.name} />
<View className="gap-6 p-4 md:flex-row md:items-start md:gap-8 md:p-8">
<View className="flex-1 gap-5">
<View
className="h-52 items-center justify-center rounded-2xl md:h-80"
style={{ backgroundColor: listing.bg }}
>
<Typography className="text-6xl">{listing.emoji}</Typography>
</View>
<View className="gap-2">
<Typography type="h4">{listing.name}</Typography>
<Typography type="body-sm" color="muted">
{listing.desc}
</Typography>
</View>
<View className="flex-row items-center gap-3 rounded-xl border border-border bg-surface p-3.5">
<View className="flex-1">
<Typography type="body-sm" weight="semibold">
Verified on Solana
</Typography>
<Typography type="body-xs" color="muted">
{listing.seller}
</Typography>
</View>
<Button size="sm" variant="ghost" onPress={() => toast.show("Address copied!")}>
<Button.Label>Copy</Button.Label>
</Button>
</View>
<View className="gap-3 rounded-xl border border-border bg-surface p-3.5">
<Typography type="body-xs" color="muted">
About this listing
</Typography>
<View className="flex-row flex-wrap gap-y-3">
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Category
</Typography>
<Typography type="body-sm" weight="medium">
{listing.cat}
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Available
</Typography>
<Typography type="body-sm" weight="medium">
{listing.qty} units
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Currency
</Typography>
<Typography type="body-sm" weight="medium">
{listing.cur}
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Listing ID
</Typography>
<Typography type="body-sm" color="muted">
{`#${listing.id}${listing.id}${listing.id}${listing.id}`}
</Typography>
</View>
</View>
</View>
{relatedProducts.length > 0 && (
<View className="gap-3">
<Typography type="h6">Customers also bought</Typography>
<View className="flex-row flex-wrap">
{relatedProducts.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" />
))}
</View>
</View>
)}
</View>
<View className="gap-4 rounded-2xl border border-border bg-surface p-4 md:w-80" style={stickyBoxStyle}>
<View>
<Typography type="h3">{listing.price}</Typography>
<Typography type="body-sm" color="muted">
≈ {listing.usd} USD
</Typography>
<View className="mt-2 self-start">
<StatusChip label={availability.label} color={availability.color} />
</View>
</View>
<Separator />
{listing.alt.length > 0 && (
<>
<View className="gap-2">
<Typography type="body-xs" color="muted">
Pay with
</Typography>
<View className="flex-row gap-2">
<Chip
variant={currency === listing.cur ? "primary" : "soft"}
color={currency === listing.cur ? "accent" : "default"}
onPress={() => setCurrency(listing.cur)}
>
<Chip.Label>{listing.cur}</Chip.Label>
</Chip>
<Chip
variant={currency === listing.alt[0] ? "primary" : "soft"}
color={currency === listing.alt[0] ? "accent" : "default"}
onPress={() => setCurrency(listing.alt[0])}
>
<Chip.Label>{listing.alt[0]}</Chip.Label>
</Chip>
</View>
</View>
<Separator />
</>
)}
<View className="gap-2">
<Typography type="body-xs" color="muted">
Dispute Protection
</Typography>
{RESOLVERS.map((resolver) => (
<ResolverCard
key={resolver.id}
resolver={resolver}
isSelected={resolver.id === resolverId}
onSelect={() => setResolverId(resolver.id)}
/>
))}
<Typography type="body-xs" color="muted">
Fee only charged if dispute is adjudicated.
</Typography>
</View>
<Separator />
<Button
isDisabled={isOut}
variant={isOut ? "secondary" : "primary"}
onPress={() => requestBuy(listing.id)}
>
<Button.Label>{isOut ? "Out of Stock" : "Buy Now →"}</Button.Label>
</Button>
<View className="flex-row flex-wrap gap-1.5">
<Chip size="sm" variant="soft" color="success">
<Chip.Label>✓ Final Payment</Chip.Label>
</Chip>
<Chip size="sm" variant="soft" color="default">
<Chip.Label>🛡 Dispute Cover</Chip.Label>
</Chip>
<Chip size="sm" variant="soft" color="default">
<Chip.Label>⬡ On-chain</Chip.Label>
</Chip>
</View>
<Typography type="body-xs" color="muted" align="center">
Funds held in secure escrow until you confirm receipt.
</Typography>
</View>
</View>
</ScrollView>
);
}
```
Ports the prototype's listing detail page (lines 424–543): image, title/description, verified-seller row with copy button (shows a toast instead of touching a real clipboard — no on-chain/real wallet functionality exists to copy, per the spec's non-goals), info grid, related products, and the buy panel (price, currency switch, resolver picker, Buy Now, trust badges). `requestBuy` (from `ModalProvider`, Task 5) reproduces the prototype's "open wallet modal if disconnected, else open checkout" branch.
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start --web`, go to Browse, tap any product card.
Expected: listing detail renders with image placeholder, title/description, verified-seller row (Copy button shows a toast), info grid, buy panel with price/resolver picker/Buy Now button, trust badge chips. At narrow width the layout is a single stacked column with a back button (`AppHeader`) at the top; at ≥768px it's two columns with the buy panel on the right. Tapping "Buy Now →" while disconnected opens the Wallet Connect sheet; connecting a wallet then opens the Checkout sheet automatically with this listing pre-filled. Stop the dev server after confirming.
- [ ] **Step 3: Commit**
```bash
git add "app/src/app/listing/[id].tsx"
git commit -m "feat: implement Listing Detail screen"
```
---
### Task 21: Order Detail screen
**Files:**
- Create: `app/src/app/orders/[id].tsx`
- [ ] **Step 1: Create the Order Detail screen**
```tsx
import type { JSX } from "react";
import { useMemo, useState } from "react";
import { ScrollView, View } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";
import { Button, Typography, useToast } from "heroui-native";
import { ORDERS } from "@/data/mock";
import { orderStatusInfo } from "@/lib/status";
import { AppHeader } from "@/components/AppHeader";
import { StatusChip } from "@/components/StatusChip";
const STEP_LABELS = ["Payment\nHeld", "Seller\nConfirms", "You Confirm\nReceipt"] as const;
export default function OrderDetailScreen(): JSX.Element {
const { id } = useLocalSearchParams<{ id: string }>();
const router = useRouter();
const { toast } = useToast();
const order = useMemo(() => ORDERS.find((item) => item.id === Number(id)) ?? ORDERS[0], [id]);
const [status, setStatus] = useState(order.status);
const statusInfo = orderStatusInfo(status);
const step2Done = status !== "AwaitingConfirm";
const step3Done = status === "Complete";
const activeStepIndex = step3Done ? 2 : step2Done ? 1 : 0;
const canCancel = status === "AwaitingConfirm";
const canConfirm = status === "Active";
const handleCancel = () => {
setStatus("Cancelled");
toast.show({ variant: "success", label: "Order cancelled. Full refund initiated." });
};
const handleConfirmReceipt = () => {
setStatus("Complete");
toast.show({ variant: "success", label: "Receipt confirmed! Seller has been paid." });
};
return (
<ScrollView className="flex-1 bg-background">
<AppHeader title="Order Detail" />
<View className="gap-5 p-4 md:mx-auto md:w-full md:max-w-2xl md:p-8">
<View className="flex-row items-start justify-between gap-3 rounded-xl border border-border bg-surface p-4">
<View className="flex-1 gap-1">
<Typography type="body-xs" color="muted">
Order placed {order.date}
</Typography>
<Typography type="h6">{order.name}</Typography>
<Typography type="body-xs" color="muted">
{order.seller}
</Typography>
</View>
<View className="items-end gap-1.5">
<Typography type="h6">{order.amt}</Typography>
<StatusChip label={statusInfo.label} color={statusInfo.color} />
</View>
</View>
<View className="gap-4 rounded-xl border border-border bg-surface p-4">
<Typography type="body-xs" color="muted">
Order Progress
</Typography>
<View className="flex-row items-start">
{STEP_LABELS.map((label, index) => {
const done = index < activeStepIndex || (index === activeStepIndex && step3Done);
const active = index === activeStepIndex && !step3Done;
return (
<View key={label} className="flex-1 items-center gap-2">
<View
className={`size-7 items-center justify-center rounded-full ${
done ? "bg-success" : active ? "bg-accent" : "bg-surface-secondary"
}`}
>
<Typography type="body-xs" weight="bold" className={done ? "text-black" : "text-white"}>
{done ? "✓" : String(index + 1)}
</Typography>
</View>
<Typography
type="body-xs"
weight="semibold"
align="center"
color={done || active ? undefined : "muted"}
className={done ? "text-success" : active ? "text-accent" : undefined}
>
{label}
</Typography>
</View>
);
})}
</View>
</View>
<View className="gap-1 rounded-xl bg-surface-secondary p-4">
<Typography type="body-sm" color="muted">
<Typography type="body-sm" weight="semibold">
{order.amt}
</Typography>
{" is locked in a secure on-chain escrow. Funds are released to the seller only after you "}
confirm receipt — no third party can touch them.
</Typography>
</View>
<View className="flex-row flex-wrap gap-2.5">
{canCancel && (
<Button variant="danger-soft" onPress={handleCancel}>
<Button.Label>Cancel Order (Full Refund)</Button.Label>
</Button>
)}
{canConfirm && (
<Button onPress={handleConfirmReceipt}>
<Button.Label>Confirm Receipt — Release Payment</Button.Label>
</Button>
)}
<Button variant="secondary" onPress={() => router.push(`/listing/${order.lid}`)}>
<Button.Label>View Listing →</Button.Label>
</Button>
</View>
</View>
</ScrollView>
);
}
```
Ports the prototype's order detail page (lines 577–651): header, 3-step progress stepper with the same `done`/`active` color logic as `_si`/the inline `od` derivation (lines 918–943), escrow info box, and status-conditional actions (`Cancel Order` only when `AwaitingConfirm`, `Confirm Receipt` only when `Active`, `View Listing` always). Status changes are local `useState` (mirrors the prototype, which also only mutates its in-memory state and never persists — see spec's "orders stay static" decision for the *list*; here on the *detail* screen the single order's status is allowed to change locally so Cancel/Confirm visibly do something, exactly like the prototype's `cancelOrder`/`confirmReceipt` handlers).
- [ ] **Step 2: Verify**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn start --web`, go to Orders, tap the "MacBook Pro" order (status `AwaitingConfirm`).
Expected: header with name/seller/amount/status chip, 3-step progress bar (step 1 green checkmark, step 2 highlighted, step 3 grey), escrow info text, "Cancel Order (Full Refund)" and "View Listing →" buttons (no "Confirm Receipt" button, since status is `AwaitingConfirm` not `Active`). Tapping "Cancel Order" shows a toast and flips the status chip/stepper to Cancelled. Stop the dev server after confirming.
- [ ] **Step 3: Commit**
```bash
git add "app/src/app/orders/[id].tsx"
git commit -m "feat: implement Order Detail screen"
```
---
### Task 22: Final verification pass
**Files:** none (verification only)
- [ ] **Step 1: Full typecheck and lint**
Run: `yarn typecheck`
Expected: passes with no errors.
Run: `yarn lint`
Expected: passes with no errors (fix any issues found before proceeding — do not disable rules to silence them).
- [ ] **Step 2: Manual walkthrough — mobile width**
Run: `yarn start --web`, keep the browser window under 768px wide (or open the Expo Go / simulator build if available).
Walk through and confirm:
- Bottom tab bar shows Home / Browse / Orders with icons.
- Home: hero headline in the accent purple, "Browse Listings →" button navigates to Browse, featured grid shows 4 cards.
- Browse: search filters live, currency/sort chips toggle correctly, "In stock only" switch hides the 0-qty Sony headphones when on, list/grid toggle switches layout.
- Tapping a product card opens Listing Detail with a back button (top-left) that returns to Browse.
- "Buy Now →" while disconnected opens Wallet Connect → picking a wallet closes it and opens Checkout automatically on the same listing.
- Checkout: Confirm & Place Order → shows a spinner for ~2s → success screen → "View My Orders" navigates to the Orders tab.
- Orders tab lists 3 mock orders with correct status chips; tapping one opens Order Detail with the correct progress stepper and status-appropriate action buttons.
- Order Detail: Cancel/Confirm actions show a toast and update the status chip/stepper immediately.
- [ ] **Step 3: Manual walkthrough — wide/web width**
Resize the browser window to ≥768px (or use a wide simulator/tablet).
Walk through and confirm:
- Bottom tab bar is gone; a top nav bar (logo, search field, Browse, My Orders, wallet button) is visible and stays visible on every screen, including Listing Detail and Order Detail.
- "Browse" / "My Orders" nav buttons navigate correctly; wallet button opens Wallet Connect / shows the connected mock address once connected.
- Home hero is centered, featured grid shows more columns than at mobile width.
- Browse grid shows more columns; list view rows are wider.
- Listing Detail shows a two-column layout (content left, buy panel right); the buy panel visually stays in place while scrolling the left column (sticky).
- No mobile-only `AppHeader` back bar is visible on Listing/Order Detail (TopNav is used for navigation instead).
- [ ] **Step 4: Stop the dev server**
No commit for this task — it's verification-only. If any issue was found and fixed during the walkthrough, amend the relevant earlier task's commit history is *not* required; just create one more commit with the fix:
```bash
git add -A
git commit -m "fix: address issues found during manual UI walkthrough"
```
(Only run this if fixes were actually needed — skip entirely if the walkthrough passed cleanly.)
---
## Spec Coverage Check
| Spec section | Covered by |
|---|---|
| Theming (accent/status/surface colors, radius left default) | Task 1 |
| Mock data (products/resolvers/orders) | Task 2 |
| State (WalletProvider, ModalProvider incl. pending-listing-id flow, checkout step machine) | Tasks 4–5 |
| Navigation & Screens file layout | Tasks 6, 15–21 |
| Responsive shell (TopNav vs bottom tabs, `md:` breakpoint) | Tasks 14, 15, 19 |
| Grid layouts via flex-wrap, not CSS grid | Task 8 (ListingCard), used in Tasks 16, 17, 20 |
| Listing-detail two-column + sticky buy box on web | Task 20 |
| Home (minimal scope) | Task 16 |
| Browse (search/filter/sort/view toggle) | Task 17 |
| Listing Detail (info grid, related products, resolver/currency selection, trust badges) | Task 20 |
| Orders list | Task 18 |
| Order Detail (stepper, status actions) | Task 21 |
| Shared components (StatusChip, ListingCard, ResolverCard, OrderRow, WalletConnectSheet, CheckoutSheet, AppHeader, TopNav) | Tasks 7–14 |
| Verification approach (no test runner → typecheck/lint + manual walkthrough) | Every task's Verify step + Task 22 |
Reference in New Issue View Git Blame Copy Permalink