Crypto holdings with buy and sell
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, MONO, Mount, Press, ROW_STAGGER, ROW_STAGGER_CAP } from "../shared";
import Svg, { Polyline } from "react-native-svg";
export interface Holding {
id: string;
symbol: string;
name: string;
amount: string;
value: string;
/** Signed 24h change, e.g. "+2.4%". */
change: string;
/** Monogram disc background — brand colors read as coins. */
color: string;
/** Monogram letter color — pairs with `color` (defaults to white). */
textColor?: string;
/** 7-point intraday shape for the mini sparkline (values 0–1). */
spark?: number[];
}
export interface CryptoPortfolioScreenProps {
total?: string;
change?: string;
holdings?: Holding[];
onHoldingPress?: (id: string) => void;
onBuy?: () => void;
onSell?: () => void;
onBack?: () => void;
}
const DEFAULT_HOLDINGS: Holding[] = [
{ id: "h1", symbol: "BTC", name: "Bitcoin", amount: "0.4821", value: "$31,204", change: "+2.4%", color: "bg-warning", spark: [0.42, 0.5, 0.47, 0.62, 0.58, 0.74, 0.8] },
{ id: "h2", symbol: "ETH", name: "Ethereum", amount: "3.205", value: "$9,812", change: "+1.1%", color: "bg-primary", spark: [0.5, 0.46, 0.55, 0.52, 0.6, 0.66, 0.63] },
{ id: "h3", symbol: "SOL", name: "Solana", amount: "42.5", value: "$4,182", change: "-3.2%", color: "bg-success", spark: [0.8, 0.72, 0.66, 0.7, 0.5, 0.44, 0.3] },
{ id: "h4", symbol: "USDC", name: "USD Coin", amount: "1,240", value: "$1,240", change: "0.0%", color: "bg-accent", textColor: "text-accent-foreground", spark: [0.5, 0.51, 0.49, 0.5, 0.51, 0.5, 0.5] },
{ id: "h5", symbol: "LINK", name: "Chainlink", amount: "86.3", value: "$1,128", change: "+4.8%", color: "bg-primary", spark: [0.3, 0.45, 0.4, 0.58, 0.7, 0.66, 0.82] },
{ id: "h6", symbol: "AVAX", name: "Avalanche", amount: "31.2", value: "$902", change: "-1.4%", color: "bg-destructive", spark: [0.62, 0.55, 0.58, 0.5, 0.42, 0.46, 0.4] },
{ id: "h7", symbol: "DOT", name: "Polkadot", amount: "142.8", value: "$718", change: "+0.9%", color: "bg-warning", spark: [0.45, 0.5, 0.42, 0.55, 0.5, 0.58, 0.6] },
];
/** Mini sparkline — the intraday shape next to each coin, so the row says
* which way the asset moved before the reader reaches the % label. */
function Spark({ points, up }: { points: number[]; up?: boolean }) {
const w = 56;
const hgt = 20;
const xy = points
.map((v, i) => `${(i * w) / (points.length - 1)},${hgt - v * hgt}`)
.join(" ");
return (
<Svg viewBox={`0 0 ${w} ${hgt}`} style={{ width: w, height: hgt }} accessible={false}>
<Polyline
points={xy}
fill="none"
strokeWidth={1.5}
stroke={up === undefined ? "#8B8FA3" : up ? "#16A34A" : "#DC2626"}
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
}
Spark.displayName = "Spark";
/** Crypto portfolio — total hero, buy/sell, coin rows with change. */
export function CryptoPortfolioScreen({
total = "$48,186",
change = "+$1,214 (2.6%) today",
holdings = DEFAULT_HOLDINGS,
onHoldingPress,
onBuy,
onSell,
onBack,
}: CryptoPortfolioScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Portfolio
</Text>
</View>
</View>
</View>
{/* Total — big numeral + signed day change. */}
<Mount className="mx-4 mb-3 items-center rounded-3xl bg-white p-5 dark:bg-[#1A1A20]" style={{ marginTop: insets.top + 60 }}>
<Text variant="small" className="text-muted-foreground">
Total balance
</Text>
<Text className="text-5xl font-bold tracking-tight" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{total}</Text>
<Text className="mt-0.5 text-sm font-medium text-success">{change}</Text>
{/* P&L in dollars — % alone reads as decoration. */}
<Text variant="muted" className="mt-0.5 text-xs">
+$842.10 in the last 24h
</Text>
</Mount>
{/* Buy / sell — the two actions this screen exists for. */}
<Mount delay={60} className="mx-4 mb-3 flex-row gap-3">
<Button
tone="inverse"
haptic="light"
onPress={() => {
haptics.light();
onBuy?.();
}}
accessibilityLabel="Buy crypto"
className="h-11 flex-1 bg-[#1B1B26]"
>
Buy
</Button>
<Button
variant="secondary"
haptic="light"
onPress={() => {
haptics.light();
onSell?.();
}}
accessibilityLabel="Sell crypto"
className="h-11 flex-1"
>
Sell
</Button>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
<List inset>
<List.Section title="Holdings">
{holdings.map((h, ii) => {
const down = h.change.startsWith("-");
return (
<React.Fragment key={h.id}>
{ii > 0 && <List.Separator className="ml-[64px]" />}
<Mount delay={120 + Math.min(ii * ROW_STAGGER, ROW_STAGGER_CAP)}>
<List.Item
title={h.name}
subtitle={`${h.amount} ${h.symbol}`}
leading={
<View
className={`h-9 w-9 items-center justify-center rounded-full ${h.color}`}
>
<Text
className={`text-xs font-bold ${h.textColor ?? "text-white"}`}
>
{h.symbol.slice(0, 1)}
</Text>
</View>
}
trailing={
<View className="flex-row items-center gap-2.5">
{h.spark ? (
<Spark
points={h.spark}
up={down ? false : h.change.startsWith("+") ? true : undefined}
/>
) : null}
<View className="items-end">
<Text className="font-semibold">{h.value}</Text>
<Text
className={`text-xs font-medium ${
down
? "text-destructive"
: h.change.startsWith("+")
? "text-success"
: "text-muted-foreground"
}`}
>
{h.change}
</Text>
</View>
</View>
}
haptic="light"
onPress={() => onHoldingPress?.(h.id)}
className="py-3"
/>
</Mount>
</React.Fragment>
);
})}
</List.Section>
</List>
</ScrollView>
</SafeAreaView>
);
}
CryptoPortfolioScreen.displayName = "CryptoPortfolioScreen";
Recreate the "Crypto Portfolio Screen" screen in React Native using LumioUI.
Goal: Crypto holdings with buy and sell Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add finance-crypto-portfolio
```
Or pull just the components: `npx lumioui add button icon list text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-svg@*
- react-native-reanimated@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×2
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×1
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×8
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/finance/crypto-portfolio.tsx` exporting CryptoPortfolioScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, MONO, Mount, Press, ROW_STAGGER, ROW_STAGGER_CAP } from "../shared";
import Svg, { Polyline } from "react-native-svg";
export interface Holding {
id: string;
symbol: string;
name: string;
amount: string;
value: string;
/** Signed 24h change, e.g. "+2.4%". */
change: string;
/** Monogram disc background — brand colors read as coins. */
color: string;
/** Monogram letter color — pairs with `color` (defaults to white). */
textColor?: string;
/** 7-point intraday shape for the mini sparkline (values 0–1). */
spark?: number[];
}
export interface CryptoPortfolioScreenProps {
total?: string;
change?: string;
holdings?: Holding[];
onHoldingPress?: (id: string) => void;
onBuy?: () => void;
onSell?: () => void;
onBack?: () => void;
}
const DEFAULT_HOLDINGS: Holding[] = [
{ id: "h1", symbol: "BTC", name: "Bitcoin", amount: "0.4821", value: "$31,204", change: "+2.4%", color: "bg-warning", spark: [0.42, 0.5, 0.47, 0.62, 0.58, 0.74, 0.8] },
{ id: "h2", symbol: "ETH", name: "Ethereum", amount: "3.205", value: "$9,812", change: "+1.1%", color: "bg-primary", spark: [0.5, 0.46, 0.55, 0.52, 0.6, 0.66, 0.63] },
{ id: "h3", symbol: "SOL", name: "Solana", amount: "42.5", value: "$4,182", change: "-3.2%", color: "bg-success", spark: [0.8, 0.72, 0.66, 0.7, 0.5, 0.44, 0.3] },
{ id: "h4", symbol: "USDC", name: "USD Coin", amount: "1,240", value: "$1,240", change: "0.0%", color: "bg-accent", textColor: "text-accent-foreground", spark: [0.5, 0.51, 0.49, 0.5, 0.51, 0.5, 0.5] },
{ id: "h5", symbol: "LINK", name: "Chainlink", amount: "86.3", value: "$1,128", change: "+4.8%", color: "bg-primary", spark: [0.3, 0.45, 0.4, 0.58, 0.7, 0.66, 0.82] },
{ id: "h6", symbol: "AVAX", name: "Avalanche", amount: "31.2", value: "$902", change: "-1.4%", color: "bg-destructive", spark: [0.62, 0.55, 0.58, 0.5, 0.42, 0.46, 0.4] },
{ id: "h7", symbol: "DOT", name: "Polkadot", amount: "142.8", value: "$718", change: "+0.9%", color: "bg-warning", spark: [0.45, 0.5, 0.42, 0.55, 0.5, 0.58, 0.6] },
];
/** Mini sparkline — the intraday shape next to each coin, so the row says
* which way the asset moved before the reader reaches the % label. */
function Spark({ points, up }: { points: number[]; up?: boolean }) {
const w = 56;
const hgt = 20;
const xy = points
.map((v, i) => `${(i * w) / (points.length - 1)},${hgt - v * hgt}`)
.join(" ");
return (
<Svg viewBox={`0 0 ${w} ${hgt}`} style={{ width: w, height: hgt }} accessible={false}>
<Polyline
points={xy}
fill="none"
strokeWidth={1.5}
stroke={up === undefined ? "#8B8FA3" : up ? "#16A34A" : "#DC2626"}
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
}
Spark.displayName = "Spark";
/** Crypto portfolio — total hero, buy/sell, coin rows with change. */
export function CryptoPortfolioScreen({
total = "$48,186",
change = "+$1,214 (2.6%) today",
holdings = DEFAULT_HOLDINGS,
onHoldingPress,
onBuy,
onSell,
onBack,
}: CryptoPortfolioScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Portfolio
</Text>
</View>
</View>
</View>
{/* Total — big numeral + signed day change. */}
<Mount className="mx-4 mb-3 items-center rounded-3xl bg-white p-5 dark:bg-[#1A1A20]" style={{ marginTop: insets.top + 60 }}>
<Text variant="small" className="text-muted-foreground">
Total balance
</Text>
<Text className="text-5xl font-bold tracking-tight" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{total}</Text>
<Text className="mt-0.5 text-sm font-medium text-success">{change}</Text>
{/* P&L in dollars — % alone reads as decoration. */}
<Text variant="muted" className="mt-0.5 text-xs">
+$842.10 in the last 24h
</Text>
</Mount>
{/* Buy / sell — the two actions this screen exists for. */}
<Mount delay={60} className="mx-4 mb-3 flex-row gap-3">
<Button
tone="inverse"
haptic="light"
onPress={() => {
haptics.light();
onBuy?.();
}}
accessibilityLabel="Buy crypto"
className="h-11 flex-1 bg-[#1B1B26]"
>
Buy
</Button>
<Button
variant="secondary"
haptic="light"
onPress={() => {
haptics.light();
onSell?.();
}}
accessibilityLabel="Sell crypto"
className="h-11 flex-1"
>
Sell
</Button>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
<List inset>
<List.Section title="Holdings">
{holdings.map((h, ii) => {
const down = h.change.startsWith("-");
return (
<React.Fragment key={h.id}>
{ii > 0 && <List.Separator className="ml-[64px]" />}
<Mount delay={120 + Math.min(ii * ROW_STAGGER, ROW_STAGGER_CAP)}>
<List.Item
title={h.name}
subtitle={`${h.amount} ${h.symbol}`}
leading={
<View
className={`h-9 w-9 items-center justify-center rounded-full ${h.color}`}
>
<Text
className={`text-xs font-bold ${h.textColor ?? "text-white"}`}
>
{h.symbol.slice(0, 1)}
</Text>
</View>
}
trailing={
<View className="flex-row items-center gap-2.5">
{h.spark ? (
<Spark
points={h.spark}
up={down ? false : h.change.startsWith("+") ? true : undefined}
/>
) : null}
<View className="items-end">
<Text className="font-semibold">{h.value}</Text>
<Text
className={`text-xs font-medium ${
down
? "text-destructive"
: h.change.startsWith("+")
? "text-success"
: "text-muted-foreground"
}`}
>
{h.change}
</Text>
</View>
</View>
}
haptic="light"
onPress={() => onHoldingPress?.(h.id)}
className="py-3"
/>
</Mount>
</React.Fragment>
);
})}
</List.Section>
</List>
</ScrollView>
</SafeAreaView>
);
}
CryptoPortfolioScreen.displayName = "CryptoPortfolioScreen";
```
Screen: https://lumioui.dev/screens/finance-crypto-portfolio