Token swap with direction flip
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Input, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, MONO, Mount, Press, RowIcon, StickyBottomBar } from "../shared";
export interface SwapToken {
symbol: string;
/** Monogram disc color. */
color: string;
balance?: string;
}
export interface TokenSwapScreenProps {
from?: SwapToken;
to?: SwapToken;
rate?: string;
/** Estimated network fee. */
fee?: string;
sendAmount?: string;
receiveAmount?: string;
onSwapDirection?: () => void;
onReview?: () => void;
onBack?: () => void;
}
/** Token swap — from/to pair with direction flip + review CTA. */
export function TokenSwapScreen({
from = { symbol: "ETH", color: "bg-primary", balance: "3.205" },
to = { symbol: "USDC", color: "bg-success", balance: "1,204.10" },
rate = "1 ETH ≈ 3,062 USDC",
fee = "~$4.12 network",
sendAmount = "0.5",
receiveAmount = "1,531",
onSwapDirection,
onReview,
onBack,
}: TokenSwapScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [amount, setAmount] = React.useState(sendAmount);
const ready = amount.trim().length > 0 && Number(amount) > 0;
// USD estimate under the pay field — parsed from the rate string
// ("1 ETH ≈ 3,062 USDC") so the number tracks real data, not a prop.
const rateParts = rate.match(/[\d,]+(?:\.\d+)?/g) ?? [];
const rateNum = Number((rateParts[rateParts.length - 1] ?? "0").replace(/,/g, "")) || 0;
const payUsd = (Number(amount) || 0) * rateNum;
const usd = (n: number) =>
`≈ $${n.toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
const tokenChip = (t: SwapToken) => (
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel={`Choose ${t.symbol} token`}
className="flex-row items-center gap-2 rounded-full bg-[#F4F5F9] px-3 py-1.5 dark:bg-[#111114]"
>
<View className={`h-5 w-5 items-center justify-center rounded-full ${t.color}`}>
<Text className="text-[9px] font-bold text-white">{t.symbol[0]}</Text>
</View>
<Text className="text-sm font-semibold">{t.symbol}</Text>
<Icon name="chevron-down" size="sm" color="mutedForeground" />
</Press>
);
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">
Swap
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
paddingBottom: insets.bottom + 96,
paddingTop: insets.top + 60,
}}
>
<Mount className="mx-4">
{/* From. */}
<View className="rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<Text variant="small" className="text-muted-foreground">
You pay
</Text>
<View className="flex-row items-center gap-2">
<Text variant="small" className="text-muted-foreground">
Balance {from.balance} {from.symbol}
</Text>
<Press
haptic="light"
onPress={() => {
haptics.selection();
setAmount(
(
Number((from.balance ?? "0").replace(/,/g, "")) / 2
).toFixed(4),
);
}}
accessibilityLabel={`Use half of ${from.symbol} balance`}
className="overflow-hidden rounded-full px-2 py-0.5"
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
<Text className="text-xs font-semibold text-muted-foreground">
50%
</Text>
</Press>
<Press
haptic="light"
onPress={() => {
haptics.selection();
setAmount((from.balance ?? "").replace(/,/g, ""));
}}
accessibilityLabel={`Use full ${from.symbol} balance`}
className="rounded-full bg-primary/15 px-2 py-0.5"
>
<Text className="text-xs font-semibold text-primary">MAX</Text>
</Press>
</View>
</View>
<View className="mt-1 flex-row items-center justify-between gap-3">
<Input
value={amount}
onChangeText={setAmount}
placeholder="0.0"
keyboardType="decimal-pad"
accessibilityLabel={`Amount in ${from.symbol}`}
containerClassName="flex-1"
className="border-0 bg-transparent px-0 text-3xl font-semibold"
style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}
/>
{tokenChip(from)}
</View>
{payUsd > 0 && (
<Text variant="small" className="pt-0.5 text-muted-foreground">
{usd(payUsd)}
</Text>
)}
</View>
{/* Direction flip. */}
<View className="z-10 -my-4 items-center">
<Button
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
onSwapDirection?.();
}}
accessibilityLabel={`Swap ${from.symbol} for ${to.symbol}`}
className="h-11 w-11 rounded-full border-4 border-[#F4F5F9] bg-[#1B1B26] p-0"
>
<Icon name="arrow-down" size="sm" color="#BEF04C" />
</Button>
</View>
{/* To. */}
<View className="rounded-2xl bg-white p-4 pt-6 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<Text variant="small" className="text-muted-foreground">
You receive
</Text>
<Text variant="small" className="text-muted-foreground">
Balance {to.balance} {to.symbol}
</Text>
</View>
<View className="mt-1 flex-row items-center justify-between gap-3">
<View>
<Text className="text-3xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{receiveAmount}</Text>
<Text variant="small" className="text-muted-foreground">
{usd(Number(receiveAmount.replace(/,/g, "")) || 0)}
</Text>
</View>
{tokenChip(to)}
</View>
</View>
</Mount>
{/* Rate + fee — the fine print, surfaced. */}
<Mount delay={60} className="mx-4 mt-4 gap-2.5 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="repeat" tone="blue" />
<Text variant="small" className="text-muted-foreground">
Rate
</Text>
</View>
<Text className="text-sm font-medium">{rate}</Text>
</View>
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="zap" tone="orange" />
<Text variant="small" className="text-muted-foreground">
Network fee
</Text>
</View>
<Text className="text-sm font-medium">{fee}</Text>
</View>
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="shield" tone="green" />
<Text variant="small" className="text-muted-foreground">
Max slippage
</Text>
</View>
<Text className="text-sm font-medium">0.5%</Text>
</View>
{/* Route quality — aggregators live or die on this claim. */}
<View className="flex-row items-center gap-2 pt-1">
<Icon name="check-circle" size="sm" color="success" />
<Text variant="small" className="flex-1 text-xs text-muted-foreground">
Best route across 4 pools — saves ~$2.10 vs a direct swap
</Text>
</View>
</Mount>
<Text variant="muted" className="mx-4 mt-4 text-center text-xs">
Final amounts are confirmed on the next screen
</Text>
</ScrollView>
<StickyBottomBar>
<Button
haptic="light"
disabled={!ready}
onPress={() => {
haptics.medium();
onReview?.();
}}
accessibilityLabel={
ready ? `Swap ${from.symbol} for ${to.symbol}` : "Enter an amount"
}
tone="inverse"
className="w-full bg-[#1B1B26]"
>
{ready ? `Swap ${from.symbol} for ${to.symbol}` : "Enter an amount"}
</Button>
</StickyBottomBar>
</SafeAreaView>
);
}
TokenSwapScreen.displayName = "TokenSwapScreen";
Recreate the "Token Swap Screen" screen in React Native using LumioUI.
Goal: Token swap with direction flip 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-token-swap
```
Or pull just the components: `npx lumioui add button icon input text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- 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>` ×4
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×20
## 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/token-swap.tsx` exporting TokenSwapScreen. 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, Input, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, MONO, Mount, Press, RowIcon, StickyBottomBar } from "../shared";
export interface SwapToken {
symbol: string;
/** Monogram disc color. */
color: string;
balance?: string;
}
export interface TokenSwapScreenProps {
from?: SwapToken;
to?: SwapToken;
rate?: string;
/** Estimated network fee. */
fee?: string;
sendAmount?: string;
receiveAmount?: string;
onSwapDirection?: () => void;
onReview?: () => void;
onBack?: () => void;
}
/** Token swap — from/to pair with direction flip + review CTA. */
export function TokenSwapScreen({
from = { symbol: "ETH", color: "bg-primary", balance: "3.205" },
to = { symbol: "USDC", color: "bg-success", balance: "1,204.10" },
rate = "1 ETH ≈ 3,062 USDC",
fee = "~$4.12 network",
sendAmount = "0.5",
receiveAmount = "1,531",
onSwapDirection,
onReview,
onBack,
}: TokenSwapScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [amount, setAmount] = React.useState(sendAmount);
const ready = amount.trim().length > 0 && Number(amount) > 0;
// USD estimate under the pay field — parsed from the rate string
// ("1 ETH ≈ 3,062 USDC") so the number tracks real data, not a prop.
const rateParts = rate.match(/[\d,]+(?:\.\d+)?/g) ?? [];
const rateNum = Number((rateParts[rateParts.length - 1] ?? "0").replace(/,/g, "")) || 0;
const payUsd = (Number(amount) || 0) * rateNum;
const usd = (n: number) =>
`≈ $${n.toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
const tokenChip = (t: SwapToken) => (
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel={`Choose ${t.symbol} token`}
className="flex-row items-center gap-2 rounded-full bg-[#F4F5F9] px-3 py-1.5 dark:bg-[#111114]"
>
<View className={`h-5 w-5 items-center justify-center rounded-full ${t.color}`}>
<Text className="text-[9px] font-bold text-white">{t.symbol[0]}</Text>
</View>
<Text className="text-sm font-semibold">{t.symbol}</Text>
<Icon name="chevron-down" size="sm" color="mutedForeground" />
</Press>
);
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">
Swap
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
paddingBottom: insets.bottom + 96,
paddingTop: insets.top + 60,
}}
>
<Mount className="mx-4">
{/* From. */}
<View className="rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<Text variant="small" className="text-muted-foreground">
You pay
</Text>
<View className="flex-row items-center gap-2">
<Text variant="small" className="text-muted-foreground">
Balance {from.balance} {from.symbol}
</Text>
<Press
haptic="light"
onPress={() => {
haptics.selection();
setAmount(
(
Number((from.balance ?? "0").replace(/,/g, "")) / 2
).toFixed(4),
);
}}
accessibilityLabel={`Use half of ${from.symbol} balance`}
className="overflow-hidden rounded-full px-2 py-0.5"
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
<Text className="text-xs font-semibold text-muted-foreground">
50%
</Text>
</Press>
<Press
haptic="light"
onPress={() => {
haptics.selection();
setAmount((from.balance ?? "").replace(/,/g, ""));
}}
accessibilityLabel={`Use full ${from.symbol} balance`}
className="rounded-full bg-primary/15 px-2 py-0.5"
>
<Text className="text-xs font-semibold text-primary">MAX</Text>
</Press>
</View>
</View>
<View className="mt-1 flex-row items-center justify-between gap-3">
<Input
value={amount}
onChangeText={setAmount}
placeholder="0.0"
keyboardType="decimal-pad"
accessibilityLabel={`Amount in ${from.symbol}`}
containerClassName="flex-1"
className="border-0 bg-transparent px-0 text-3xl font-semibold"
style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}
/>
{tokenChip(from)}
</View>
{payUsd > 0 && (
<Text variant="small" className="pt-0.5 text-muted-foreground">
{usd(payUsd)}
</Text>
)}
</View>
{/* Direction flip. */}
<View className="z-10 -my-4 items-center">
<Button
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
onSwapDirection?.();
}}
accessibilityLabel={`Swap ${from.symbol} for ${to.symbol}`}
className="h-11 w-11 rounded-full border-4 border-[#F4F5F9] bg-[#1B1B26] p-0"
>
<Icon name="arrow-down" size="sm" color="#BEF04C" />
</Button>
</View>
{/* To. */}
<View className="rounded-2xl bg-white p-4 pt-6 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<Text variant="small" className="text-muted-foreground">
You receive
</Text>
<Text variant="small" className="text-muted-foreground">
Balance {to.balance} {to.symbol}
</Text>
</View>
<View className="mt-1 flex-row items-center justify-between gap-3">
<View>
<Text className="text-3xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{receiveAmount}</Text>
<Text variant="small" className="text-muted-foreground">
{usd(Number(receiveAmount.replace(/,/g, "")) || 0)}
</Text>
</View>
{tokenChip(to)}
</View>
</View>
</Mount>
{/* Rate + fee — the fine print, surfaced. */}
<Mount delay={60} className="mx-4 mt-4 gap-2.5 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="repeat" tone="blue" />
<Text variant="small" className="text-muted-foreground">
Rate
</Text>
</View>
<Text className="text-sm font-medium">{rate}</Text>
</View>
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="zap" tone="orange" />
<Text variant="small" className="text-muted-foreground">
Network fee
</Text>
</View>
<Text className="text-sm font-medium">{fee}</Text>
</View>
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2">
<RowIcon name="shield" tone="green" />
<Text variant="small" className="text-muted-foreground">
Max slippage
</Text>
</View>
<Text className="text-sm font-medium">0.5%</Text>
</View>
{/* Route quality — aggregators live or die on this claim. */}
<View className="flex-row items-center gap-2 pt-1">
<Icon name="check-circle" size="sm" color="success" />
<Text variant="small" className="flex-1 text-xs text-muted-foreground">
Best route across 4 pools — saves ~$2.10 vs a direct swap
</Text>
</View>
</Mount>
<Text variant="muted" className="mx-4 mt-4 text-center text-xs">
Final amounts are confirmed on the next screen
</Text>
</ScrollView>
<StickyBottomBar>
<Button
haptic="light"
disabled={!ready}
onPress={() => {
haptics.medium();
onReview?.();
}}
accessibilityLabel={
ready ? `Swap ${from.symbol} for ${to.symbol}` : "Enter an amount"
}
tone="inverse"
className="w-full bg-[#1B1B26]"
>
{ready ? `Swap ${from.symbol} for ${to.symbol}` : "Enter an amount"}
</Button>
</StickyBottomBar>
</SafeAreaView>
);
}
TokenSwapScreen.displayName = "TokenSwapScreen";
```
Screen: https://lumioui.dev/screens/finance-token-swap