{"id":"vp0.satoshi-crypto","docs":"This is an iOS app UI starter built with React Native. Paste the design link into your AI app builder (Claude Code, Rork, Lovable) and ask it to start from this design. Add your own backend/data logic. These are UI starters.","kind":"app_template","meta":{"com.vp0.kind":"app_template","com.vp0.category":"Crypto","com.vp0.platform":"ios","com.vp0.contentId":"c31f4ba2-5876-44b8-9f05-93987fcf4539","com.vp0.simulator":{"target":"react-native","embedUrl":null,"provider":null,"entrypoint":"App.tsx","buildStatus":null,"simulatable":true},"com.vp0.sourceHash":"sha256:e4fd340b7d874ba4451c51605f6d9b9ad37f705c9324536949bfe8cb80510ab6","com.vp0.contentType":"template","com.vp0.sourceToken":"vp0_14d22764d7922f4c41142d4c","com.vp0.defaultLanguage":"react-native","com.vp0.availableLanguages":["react-native","swiftui"]},"name":"satoshi-crypto","slug":"satoshi-crypto","tags":["Dark","Crypto","Fintech"],"type":"registry:block","files":[{"path":"App.tsx","type":"registry:page","rawUrl":"https://api.vp0.com/designs/satoshi-crypto/raw?language=react-native&path=App.tsx","target":"app/App.tsx","content":"import React, { useState } from 'react';\nimport { View, Text, Pressable } from 'react-native';\nimport { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Segmented, Chip, Pill, Stat, Spark, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, SearchBar, alpha } from './ui/kit';\n\nconst ACCENT = '#F7931A';\nconst THEME = { dark: { bg: '#0B0A09', card: '#171512', card2: '#231F1A', line: '#2A251E', text2: '#A39C90', text3: '#67604F' }, light: { bg: '#F8F4EE', card: '#FFFFFF', card2: '#EFE6DA' } };\nconst COINS = [\n { sym: 'BTC', name: 'Bitcoin', price: 67482, chg: 2.4, c: '#F7931A', hold: 0.42, s: [61, 62, 63, 62, 64, 66, 65, 67, 68, 67.4] },\n { sym: 'ETH', name: 'Ethereum', price: 3521, chg: -1.2, c: '#627EEA', hold: 3.1, s: [3.7, 3.65, 3.6, 3.62, 3.58, 3.55, 3.5, 3.53, 3.51, 3.52] },\n { sym: 'SOL', name: 'Solana', price: 168, chg: 5.8, c: '#14F195', hold: 24, s: [140, 145, 150, 148, 155, 158, 162, 160, 165, 168] },\n { sym: 'ADA', name: 'Cardano', price: 0.46, chg: 0.9, c: '#0033AD', hold: 4200, s: [0.44, 0.45, 0.44, 0.45, 0.46, 0.45, 0.46, 0.47, 0.46, 0.46] },\n { sym: 'DOT', name: 'Polkadot', price: 7.2, chg: -3.1, c: '#E6007A', hold: 110, s: [7.9, 7.8, 7.6, 7.7, 7.5, 7.4, 7.3, 7.35, 7.25, 7.2] },\n];\nconst RANGES = { '1D': [35.1, 35.3, 35.0, 35.4, 35.8, 36.1, 35.9, 36.4, 36.8, 36.6], '1W': [33.2, 33.9, 34.4, 34.0, 35.2, 35.8, 36.6], '1M': [29.8, 30.5, 31.2, 30.9, 32.4, 33.1, 32.8, 34.0, 35.1, 36.6], '1Y': [18.2, 20.1, 19.4, 23.0, 26.5, 25.1, 29.4, 31.0, 33.8, 36.6] };\nconst usd = (n) => '$' + n.toLocaleString('en-US', { maximumFractionDigits: n < 10 ? 2 : 0 });\n\nfunction PortfolioScreen({ nav }) {\n const t = useT();\n const [range, setRange] = useState('1W');\n const total = COINS.reduce((a, c) => a + c.price * c.hold, 0);\n return (\n \n } />\n \n \n \n Return, {range}+$1,482.10\n \n \n \n \n \n \n \n \n \n {}} />\n \n {COINS.map((c) => (\n {c.sym}
} title={c.name} subtitle={c.hold + ' ' + c.sym} value={usd(c.price * c.hold)} sub2={(c.chg > 0 ? '+' : '') + c.chg + '%'} valueColor={t.text} onPress={() => nav.push('coin', { sym: c.sym })} />\n ))}\n \n \n \n );\n}\n\nfunction MarketsScreen({ nav }) {\n const t = useT();\n const [q, setQ] = useState('');\n const [f, setF] = useState('all');\n const list = COINS.filter((c) => c.name.toLowerCase().includes(q.toLowerCase()) || c.sym.toLowerCase().includes(q.toLowerCase())).filter((c) => (f === 'gain' ? c.chg > 0 : f === 'lose' ? c.chg < 0 : true));\n return (\n \n \n \n \n \n setF('all')} />\n setF('gain')} />\n setF('lose')} />\n \n \n \n {list.map((c) => (\n {c.sym}
} title={c.name} subtitle={'Vol ' + usd(c.price * 1200000)} right={= 0 ? t.success : t.danger} dot={false} fill={false} stroke={2} />} value={usd(c.price)} sub2={(c.chg > 0 ? '+' : '') + c.chg + '%'} onPress={() => nav.push('coin', { sym: c.sym })} />\n ))}\n \n \n \n );\n}\n\nfunction TradeScreen() {\n const t = useT();\n const [side, setSide] = useState('buy');\n const [amt, setAmt] = useState(250);\n return (\n \n \n \n \n \n {side === 'buy' ? 'You pay' : 'You sell'}\n {'$' + amt}\n ≈ {(amt / 67482).toFixed(5)} BTC\n \n {[50, 100, 250, 500].map((v) => setAmt(v)} />)}\n \n \n \n \n BTC
} title=\"Bitcoin\" subtitle=\"Market order\" value={usd(67482)} chevron onPress={() => {}} />\n {}} />\n |
\n \n \n
\n );\n}\n\nfunction CoinDetail({ nav, params }) {\n const t = useT();\n const c = COINS.find((x) => x.sym === params.sym) || COINS[0];\n const [range, setRange] = useState('1W');\n const up = c.chg >= 0;\n return (\n \n } />\n \n \n {c.sym}\n \n {usd(c.price)}\n {(up ? '+' : '') + c.chg}% today\n \n \n \n \n \n \n \n \n \n \n \n \n |
\n |
\n |
\n |
\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Root({ nav }) {\n const [tab, setTab] = useState('portfolio');\n return (\n \n , markets: , trade: }} />\n \n \n );\n}\nconst SCREENS = { root: Root, coin: CoinDetail };\n\nexport default function App() {\n return (\n \n \n \n );\n}\n","language":"react-native"},{"path":"ui/kit.tsx","type":"registry:component","rawUrl":"https://api.vp0.com/designs/satoshi-crypto/raw?language=react-native&path=ui%2Fkit.tsx","target":"ui/kit.tsx","content":"import React, { useState, useEffect, useRef, useMemo, createContext, useContext } from 'react';\nimport { View, Text, Pressable, ScrollView, StyleSheet, Animated, Easing, Modal, Dimensions, useColorScheme, TextInput } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport Svg, { Circle, Path, Rect, Line, Polyline, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';\nimport * as Lucide from 'lucide-react-native';\nimport { LinearGradient } from 'expo-linear-gradient';\n\n// ─── colour helpers ─────────────────────────────────────────────────────────\nexport function alpha(hex, a) {\n const h = hex.replace('#', '');\n const n = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);\n const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';\n}\nexport function mix(hexA, hexB, p) {\n const pa = parseInt(hexA.replace('#', ''), 16), pb = parseInt(hexB.replace('#', ''), 16);\n const ch = (sh) => Math.round(((pa >> sh) & 255) * (1 - p) + ((pb >> sh) & 255) * p);\n const to = (v) => ('0' + v.toString(16)).slice(-2);\n return '#' + to(ch(16)) + to(ch(8)) + to(ch(0));\n}\nfunction luminance(hex) {\n const n = parseInt(hex.replace('#', ''), 16);\n const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n}\n\n// ─── theme ──────────────────────────────────────────────────────────────────\nconst DARK = { bg: '#000000', card: '#1C1C1E', card2: '#2C2C2E', text: '#F2F2F7', text2: '#9A9AA3', text3: '#636369', line: '#2A2A2E' };\nconst LIGHT = { bg: '#F2F2F7', card: '#FFFFFF', card2: '#EDEDF2', text: '#111114', text2: '#6E6E76', text3: '#A6A6AE', line: '#E3E3E8' };\nconst SEMANTIC = { success: '#30D158', warning: '#FFB340', danger: '#FF453A', info: '#4DA3FF' };\nconst ThemeCtx = createContext(null);\n\nexport function makeTheme(accent, isDark, overrides) {\n const base = isDark ? DARK : LIGHT;\n const o = (overrides && (isDark ? overrides.dark : overrides.light)) || {};\n const t = Object.assign({}, base, SEMANTIC, o, { accent: accent, isDark: isDark });\n t.onAccent = luminance(accent) > 0.6 ? '#0B0B10' : '#FFFFFF';\n t.accentSoft = alpha(accent, isDark ? 0.22 : 0.14);\n t.accentFaint = alpha(accent, isDark ? 0.12 : 0.08);\n return t;\n}\nexport function ThemeProvider({ accent, overrides, children }) {\n const scheme = useColorScheme();\n const t = useMemo(() => makeTheme(accent, scheme !== 'light', overrides), [accent, scheme, overrides]);\n return {children};\n}\nexport function useT() {\n const t = useContext(ThemeCtx);\n return t || makeTheme('#7C5CFF', true, null);\n}\nexport const useInsets = useSafeAreaInsets;\nexport const win = () => Dimensions.get('window');\n\n// ─── type scale (iOS) ───────────────────────────────────────────────────────\nexport const T = StyleSheet.create({\n largeTitle: { fontSize: 34, fontWeight: '700', letterSpacing: -0.7, lineHeight: 40 },\n title1: { fontSize: 28, fontWeight: '700', letterSpacing: -0.5, lineHeight: 34 },\n title2: { fontSize: 22, fontWeight: '700', letterSpacing: -0.35, lineHeight: 28 },\n title3: { fontSize: 20, fontWeight: '600', letterSpacing: -0.25, lineHeight: 25 },\n headline: { fontSize: 17, fontWeight: '600', letterSpacing: -0.2, lineHeight: 22 },\n body: { fontSize: 17, fontWeight: '400', letterSpacing: -0.2, lineHeight: 22 },\n callout: { fontSize: 16, fontWeight: '400', lineHeight: 21 },\n subhead: { fontSize: 15, fontWeight: '400', lineHeight: 20 },\n footnote: { fontSize: 13, fontWeight: '400', lineHeight: 18 },\n caption: { fontSize: 12, fontWeight: '500', lineHeight: 16 },\n caption2: { fontSize: 11, fontWeight: '600', lineHeight: 13, letterSpacing: 0.3 },\n num: { fontVariant: ['tabular-nums'] },\n});\n\n// ─── motion ─────────────────────────────────────────────────────────────────\nexport function useTween(target, ms) {\n const dur = ms || 650;\n const [v, setV] = useState(target);\n const ref = useRef({ raf: 0 });\n useEffect(() => {\n const from = v, to = target, t0 = Date.now();\n if (from === to) return;\n cancelAnimationFrame(ref.current.raf);\n const tick = () => {\n const p = Math.min(1, (Date.now() - t0) / dur);\n const e = 1 - Math.pow(1 - p, 3);\n setV(from + (to - from) * e);\n if (p < 1) ref.current.raf = requestAnimationFrame(tick);\n };\n ref.current.raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(ref.current.raf);\n }, [target]);\n return v;\n}\nexport function usePressScale(to) {\n const scale = useRef(new Animated.Value(1)).current;\n const onPressIn = () => Animated.spring(scale, { toValue: to || 0.96, useNativeDriver: false, speed: 40, bounciness: 2 }).start();\n const onPressOut = () => Animated.spring(scale, { toValue: 1, useNativeDriver: false, speed: 20, bounciness: 8 }).start();\n return { scale, onPressIn, onPressOut };\n}\n\n// ─── icons ──────────────────────────────────────────────────────────────────\nexport function Icon({ name, size, color, strokeWidth, fill, style }) {\n const t = useT();\n const Cmp = Lucide[name] || Lucide.Circle;\n return ;\n}\n\n// ─── layout primitives ──────────────────────────────────────────────────────\nexport function Screen({ children, style, bg }) {\n const t = useT();\n return {children};\n}\nexport function Scroll({ children, style, contentStyle, pad, horizontal, bottom }) {\n const p = pad == null ? 20 : pad;\n return (\n \n {children}\n \n );\n}\nexport function Spacer({ h, w }) { return ; }\nexport function Divider({ inset, style }) {\n const t = useT();\n return ;\n}\n\n/** Large-title header for a tab/root screen: kicker, 34pt title, optional trailing slot. */\nexport function Header({ kicker, title, subtitle, right, style, kickerColor }) {\n const t = useT();\n const ins = useInsets();\n return (\n \n \n {kicker ? {kicker} : null}\n {title}\n {subtitle ? {subtitle} : null}\n \n {right ? {right} : null}\n \n );\n}\n\n/** Inline navigation bar for a pushed screen: back chevron, centred title, trailing slot. */\nexport function NavBar({ title, onBack, right, transparent, tint }) {\n const t = useT();\n const ins = useInsets();\n const color = tint || t.text;\n return (\n \n [{ width: 44, height: 40, alignItems: 'center', justifyContent: 'center', borderRadius: 20 }, pressed && { opacity: 0.5 }]}>\n \n \n {title}\n {right || null}\n \n );\n}\n\n/** Section label (iOS grouped header) with optional trailing action. */\nexport function SectionTitle({ title, action, onAction, style }) {\n const t = useT();\n return (\n \n {title}\n {action ? (\n \n {action}\n \n ) : null}\n \n );\n}\n\nexport function Card({ children, style, onPress, pad, bg }) {\n const t = useT();\n const base = [{ backgroundColor: bg || t.card, borderRadius: 20, padding: pad == null ? 16 : pad }, style];\n if (!onPress) return {children};\n return (\n [base, pressed && { opacity: 0.86, transform: [{ scale: 0.985 }] }]}>\n {children}\n \n );\n}\n\n/** Inset-grouped list: wraps rows in a card, drawing hairline separators. */\nexport function Group({ children, style }) {\n const t = useT();\n const kids = React.Children.toArray(children).filter(Boolean);\n return (\n \n {kids.map((k, i) => (\n \n {k}\n {i < kids.length - 1 ? : null}\n \n ))}\n \n );\n}\n\n/** A list row: leading icon tile (lucide or emoji/custom), title, subtitle, trailing value, chevron. */\nexport function Row({ icon, emoji, iconColor, iconBg, leading, title, subtitle, value, valueColor, sub2, chevron, onPress, right, pad, titleStyle }) {\n const t = useT();\n const body = (\n \n {leading ? leading : (icon || emoji) ? (\n \n {emoji ? {emoji} : }\n \n ) : null}\n \n {title}\n {subtitle ? {subtitle} : null}\n \n {value != null ? (\n \n {value}\n {sub2 ? {sub2} : null}\n \n ) : null}\n {right ? {right} : null}\n {chevron ? : null}\n \n );\n if (!onPress) return body;\n return [pressed && { backgroundColor: t.card2 }]}>{body};\n}\n\n// ─── controls ───────────────────────────────────────────────────────────────\nexport function Button({ label, onPress, kind, icon, small, full, color, style, disabled }) {\n const t = useT();\n const { scale, onPressIn, onPressOut } = usePressScale(0.96);\n const k = kind || 'primary';\n const accent = color || t.accent;\n const bg = k === 'primary' ? accent : k === 'secondary' ? t.card2 : k === 'soft' ? alpha(accent, t.isDark ? 0.22 : 0.14) : 'transparent';\n const fg = k === 'primary' ? (luminance(accent) > 0.6 ? '#0B0B10' : '#FFFFFF') : k === 'secondary' ? t.text : accent;\n return (\n \n \n {icon ? : null}\n {label}\n \n \n );\n}\n\nexport function IconButton({ name, onPress, size, bg, color, style }) {\n const t = useT();\n const s = size || 40;\n return (\n [{ width: s, height: s, borderRadius: s / 2, backgroundColor: bg || t.card2, alignItems: 'center', justifyContent: 'center' }, pressed && { opacity: 0.6 }, style]}>\n \n \n );\n}\n\nexport function Chip({ label, active, onPress, icon, color, style }) {\n const t = useT();\n const c = color || t.accent;\n return (\n [{ paddingHorizontal: 14, paddingVertical: 8, borderRadius: 999, backgroundColor: active ? c : t.card, flexDirection: 'row', alignItems: 'center', gap: 6 }, pressed && { opacity: 0.7 }, style]}>\n {icon ? 0.6 ? '#0B0B10' : '#fff') : t.text2} strokeWidth={2.4} /> : null}\n 0.6 ? '#0B0B10' : '#fff') : t.text, fontWeight: '600' }]}>{label}\n \n );\n}\n\nexport function Pill({ label, color, style, small }) {\n const t = useT();\n const c = color || t.accent;\n return (\n \n {label}\n \n );\n}\n\n/** iOS segmented control with a sliding thumb. */\nexport function Segmented({ options, value, onChange, style }) {\n const t = useT();\n const idx = Math.max(0, options.findIndex((o) => (o.value == null ? o : o.value) === value));\n const x = useRef(new Animated.Value(idx)).current;\n const [w, setW] = useState(0);\n useEffect(() => { Animated.spring(x, { toValue: idx, useNativeDriver: false, speed: 24, bounciness: 4 }).start(); }, [idx]);\n const segW = options.length ? (w - 4) / options.length : 0;\n return (\n setW(e.nativeEvent.layout.width)} style={[{ height: 36, borderRadius: 11, backgroundColor: t.isDark ? t.card2 : '#E2E2E8', padding: 2, flexDirection: 'row' }, style]}>\n {w > 0 ? (\n \n ) : null}\n {options.map((o, i) => {\n const v = o.value == null ? o : o.value;\n const label = o.label == null ? o : o.label;\n return (\n onChange(v)} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n {label}\n \n );\n })}\n \n );\n}\n\n/** iOS toggle (own implementation so both appearances look native). */\nexport function Toggle({ value, onChange, color }) {\n const t = useT();\n const x = useRef(new Animated.Value(value ? 1 : 0)).current;\n useEffect(() => { Animated.spring(x, { toValue: value ? 1 : 0, useNativeDriver: false, speed: 30, bounciness: 3 }).start(); }, [value]);\n const bg = x.interpolate({ inputRange: [0, 1], outputRange: [t.isDark ? '#39393D' : '#E9E9EB', color || t.success] });\n return (\n onChange(!value)} hitSlop={8}>\n \n \n \n \n );\n}\n\nexport function Checkbox({ checked, onChange, color, size }) {\n const t = useT();\n const s = size || 26;\n const c = color || t.accent;\n return (\n onChange && onChange(!checked)} hitSlop={8} style={{ width: s, height: s, borderRadius: s / 2, borderWidth: 2, borderColor: checked ? c : t.text3, backgroundColor: checked ? c : 'transparent', alignItems: 'center', justifyContent: 'center' }}>\n {checked ? 0.6 ? '#0B0B10' : '#fff'} strokeWidth={3.2} /> : null}\n \n );\n}\n\nexport function SearchBar({ placeholder, value, onChange, style }) {\n const t = useT();\n return (\n \n \n \n \n );\n}\n\n// ─── data display ───────────────────────────────────────────────────────────\nexport function Stat({ label, value, delta, up, style, color, big }) {\n const t = useT();\n return (\n \n {label}\n {value}\n {delta ? {delta} : null}\n \n );\n}\n\nexport function Avatar({ name, size, color, style, uri }) {\n const t = useT();\n const s = size || 40;\n const c = color || t.accent;\n const initials = (name || '?').split(' ').map((p) => p[0]).join('').slice(0, 2).toUpperCase();\n return (\n \n \n {initials}\n \n );\n}\n\nexport function Progress({ value, color, height, track, style }) {\n const t = useT();\n const v = useTween(Math.max(0, Math.min(1, value)));\n const h = height || 8;\n return (\n \n \n \n );\n}\n\n/** Circular progress ring (SVG). progress 0..1. Children render in the middle. */\nexport function Ring({ progress, size, stroke, color, track, children, style }) {\n const t = useT();\n const s = size || 160;\n const sw = stroke || 14;\n const r = (s - sw) / 2;\n const c = 2 * Math.PI * r;\n const p = useTween(Math.max(0, Math.min(1, progress)));\n return (\n \n \n {children}\n \n );\n}\n\n/** Bar chart (SVG). values: numbers; labels optional; highlight index. */\nexport function Bars({ values, labels, height, color, dim, highlight, gap, radius, style, max }) {\n const t = useT();\n const h = height || 120;\n const [w, setW] = useState(0);\n const m = max || Math.max(1, ...values);\n const n = values.length;\n const g = gap == null ? 8 : gap;\n const bw = n ? (w - g * (n - 1)) / n : 0;\n const rad = radius == null ? Math.min(6, bw / 2) : radius;\n const lh = labels ? 18 : 0;\n return (\n setW(e.nativeEvent.layout.width)} style={[{ height: h + lh }, style]}>\n {w > 0 ? (\n \n ) : null}\n {labels ? (\n \n {labels.map((l, i) => {l})}\n \n ) : null}\n \n );\n}\n\n/** Sparkline / area line (SVG). */\nexport function Spark({ values, height, color, fill, stroke, style, dot }) {\n const t = useT();\n const h = height || 80;\n const [w, setW] = useState(0);\n const c = color || t.accent;\n const min = Math.min(...values), max = Math.max(...values);\n const span = max - min || 1;\n const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * w : 0, 6 + (1 - (v - min) / span) * (h - 12)]);\n const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');\n const area = d + ' L' + w + ' ' + h + ' L0 ' + h + ' Z';\n const last = pts[pts.length - 1] || [0, 0];\n return (\n setW(e.nativeEvent.layout.width)} style={[{ height: h }, style]}>\n {w > 0 ? (\n \n ) : null}\n \n );\n}\n\n// ─── navigation ─────────────────────────────────────────────────────────────\n/** Bottom tab bar. tabs: [{ key, label, icon }]. */\nexport function TabBar({ tabs, active, onChange, style, accent }) {\n const t = useT();\n const ins = useInsets();\n const c = accent || t.accent;\n return (\n \n {tabs.map((tab) => {\n const on = tab.key === active;\n return (\n onChange(tab.key)} style={({ pressed }) => [{ flex: 1, alignItems: 'center', gap: 3, paddingVertical: 2 }, pressed && { opacity: 0.6 }]}>\n \n {tab.label}\n \n );\n })}\n \n );\n}\n\n/** Tab screens: every tab stays mounted (state + scroll position survive a switch); only the active one is displayed. */\nexport function Tabs({ active, screens }) {\n return (\n \n {Object.keys(screens).map((k) => (\n {screens[k]}\n ))}\n \n );\n}\n\n/**\n * Minimal navigation stack: screens = { name: Component }, each rendered with\n * { nav: { push, pop, canPop }, params }. Pushed screens slide in from the right\n * while the screen beneath parallaxes left (iOS push transition).\n */\nexport function Stack({ screens, initial, params }) {\n const t = useT();\n const [stack, setStack] = useState([{ key: 'root', name: initial, params: params || {} }]);\n const [leavingKey, setLeavingKey] = useState(null);\n const nav = useMemo(() => ({\n push: (name, p) => setStack((s) => [...s, { key: name + '-' + Date.now(), name: name, params: p || {} }]),\n pop: () => setStack((s) => { if (s.length > 1) setLeavingKey(s[s.length - 1].key); return s; }),\n reset: (name, p) => setStack([{ key: 'root-' + Date.now(), name: name, params: p || {} }]),\n canPop: stack.length > 1,\n }), [stack.length]);\n const width = win().width;\n const finishPop = (key) => { setStack((s) => s.filter((e) => e.key !== key)); setLeavingKey(null); };\n return (\n \n {stack.map((entry, i) => {\n const Cmp = screens[entry.name];\n const isTop = i === stack.length - 1;\n const under = i === stack.length - 2 && stack.length > 1;\n return (\n finishPop(entry.key)}>\n {Cmp ? : null}\n \n );\n })}\n \n );\n}\nfunction StackLayer({ children, width, index, isTop, under, leaving, onLeft }) {\n const prog = useRef(new Animated.Value(index === 0 ? 1 : 0)).current;\n const t = useT();\n useEffect(() => {\n if (index === 0) return;\n Animated.timing(prog, { toValue: 1, duration: 320, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();\n }, []);\n useEffect(() => {\n if (!leaving) return;\n Animated.timing(prog, { toValue: 0, duration: 280, easing: Easing.inOut(Easing.cubic), useNativeDriver: false }).start(() => onLeft());\n }, [leaving]);\n const tx = index === 0 ? 0 : prog.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });\n return (\n \n {children}\n {under ? : null}\n \n );\n}\n\n/** Bottom sheet over a dimmed backdrop. */\nexport function Sheet({ visible, onClose, title, children, height }) {\n const t = useT();\n const ins = useInsets();\n const y = useRef(new Animated.Value(1)).current;\n const [mounted, setMounted] = useState(visible);\n useEffect(() => {\n if (visible) { setMounted(true); Animated.spring(y, { toValue: 0, useNativeDriver: false, speed: 18, bounciness: 2 }).start(); }\n else Animated.timing(y, { toValue: 1, duration: 220, easing: Easing.in(Easing.cubic), useNativeDriver: false }).start(() => setMounted(false));\n }, [visible]);\n if (!mounted) return null;\n const h = height || 420;\n return (\n \n \n \n \n {title ? {title} : null}\n {children}\n \n \n );\n}\n\n/** Linear gradient surface (expo-linear-gradient, vendored). colors: 2+ hex. */\nexport function Gradient({ colors, style, children, start, end, angle }) {\n const a = angle == null ? 135 : angle;\n const rad = (a * Math.PI) / 180;\n const s = start || { x: 0.5 - Math.sin(rad) / 2, y: 0.5 + Math.cos(rad) / 2 };\n const e = end || { x: 0.5 + Math.sin(rad) / 2, y: 0.5 - Math.cos(rad) / 2 };\n return {children};\n}\n\n/** Soft radial-ish glow block for hero areas (two stacked translucent circles). */\nexport function Glow({ color, size, style, opacity }) {\n const s = size || 260;\n return (\n \n \n \n );\n}\n","language":"react-native"},{"path":"CryptoView.swift","type":"registry:page","rawUrl":"https://api.vp0.com/designs/satoshi-crypto/raw?language=swiftui&path=CryptoView.swift","target":"app/CryptoView.swift","content":"import SwiftUI\n\nstruct Coin: Identifiable { let id = UUID(); let sym: String; let name: String; let price: Double; let chg: Double }\n\nstruct CryptoView: View {\n let coins: [Coin] = [\n .init(sym: \"BTC\", name: \"Bitcoin\", price: 67482, chg: 2.4),\n .init(sym: \"ETH\", name: \"Ethereum\", price: 3521, chg: -1.2),\n .init(sym: \"SOL\", name: \"Solana\", price: 168, chg: 5.8),\n .init(sym: \"ADA\", name: \"Cardano\", price: 0.59, chg: 0.9),\n .init(sym: \"DOT\", name: \"Polkadot\", price: 7.21, chg: -3.1)\n ]\n\n var body: some View {\n ZStack {\n Color(red: 0.04, green: 0.04, blue: 0.05).ignoresSafeArea()\n ScrollView {\n VStack(alignment: .leading, spacing: 6) {\n Text(\"PORTFOLIO\").font(.caption).bold().foregroundColor(Color(red: 0.97, green: 0.58, blue: 0.1))\n Text(\"$48,209.18\").font(.system(size: 40, weight: .heavy)).foregroundColor(.white)\n Text(\"▲ $1,204.55 (2.6%) today\").foregroundColor(Color(red: 0.13, green: 0.77, blue: 0.37))\n\n Text(\"Holdings\").font(.title3).bold().foregroundColor(.white).padding(.top, 24)\n ForEach(coins) { c in\n HStack {\n VStack(alignment: .leading, spacing: 2) {\n Text(c.name).fontWeight(.semibold).foregroundColor(.white)\n Text(c.sym).font(.footnote).foregroundColor(.gray)\n }\n Spacer()\n VStack(alignment: .trailing, spacing: 2) {\n Text(\"$\\(c.price, specifier: \"%.2f\")\").fontWeight(.semibold).foregroundColor(.white)\n Text(\"\\(c.chg >= 0 ? \"+\" : \"\")\\(c.chg, specifier: \"%.1f\")%\")\n .font(.footnote)\n .foregroundColor(c.chg < 0 ? Color(red: 1, green: 0.36, blue: 0.36) : Color(red: 0.13, green: 0.77, blue: 0.37))\n }\n }\n .padding(.vertical, 12)\n }\n }\n .padding(22)\n }\n }\n }\n}\n\n#Preview { CryptoView() }\n","language":"swiftui"}],"notes":"This is an iOS app UI starter built with React Native. Paste the design link into your AI app builder (Claude Code, Rork, Lovable) and ask it to start from this design. Add your own backend/data logic. These are UI starters.","title":"Satoshi — Crypto","assets":[{"url":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5569cefb-be44-40c5-b8c1-76473c2d0629/full.webp","kind":"cover","lqip":"BggCCwCtlwdlc7RYnIvAiQg=","width":1206,"height":2622,"variants":{"avif":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5569cefb-be44-40c5-b8c1-76473c2d0629/avif.avif","card":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5569cefb-be44-40c5-b8c1-76473c2d0629/card.webp","full":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5569cefb-be44-40c5-b8c1-76473c2d0629/full.webp","thumb":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5569cefb-be44-40c5-b8c1-76473c2d0629/thumb.webp","light_avif":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5223a667-96ba-4551-953f-dc59ad6959bc/avif.avif","light_card":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5223a667-96ba-4551-953f-dc59ad6959bc/card.webp","light_full":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5223a667-96ba-4551-953f-dc59ad6959bc/full.webp","light_thumb":"https://storage.vp0.com/vp0/covers/c31f4ba2-5876-44b8-9f05-93987fcf4539/5223a667-96ba-4551-953f-dc59ad6959bc/thumb.webp"}},{"alt":"(root)","url":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-0.png","kind":"screenshot","lqip":"BggCCwCtlwdlc7RYnIvAiQg=","width":1206,"height":2622},{"alt":"view-2","url":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-1.png","kind":"screenshot","lqip":"RggCCwJbUHeKYrZpbBC/B+I=","width":1206,"height":2622},{"alt":"view-3","url":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-2.png","kind":"screenshot","lqip":"BQgCAwBtuwioc2qDvPv2mqw=","width":1206,"height":2622},{"alt":"view-4","url":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-3.png","kind":"screenshot","lqip":"BfgBAwBrrFeYcGlmDO05CZQ=","width":1206,"height":2622},{"alt":"view-5","url":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-4.png","kind":"screenshot","lqip":"RwgGEwJZlHeYiHBLaHCJBpc=","width":1206,"height":2622},{"url":"https://storage.vp0.com/vp0/clips/65/7cf3c2aa-e8ac-4ed8-afad-eef0e910646c/clip.mp4","kind":"video","variants":{"mp4":"https://storage.vp0.com/vp0/clips/65/7cf3c2aa-e8ac-4ed8-afad-eef0e910646c/clip.mp4","webm":"https://storage.vp0.com/vp0/clips/65/7cf3c2aa-e8ac-4ed8-afad-eef0e910646c/clip.webm","poster":"https://storage.vp0.com/vp0/clips/65/7cf3c2aa-e8ac-4ed8-afad-eef0e910646c/poster.jpg"}},{"url":"https://storage.vp0.com/vp0/share/c31f4ba2-5876-44b8-9f05-93987fcf4539/a868a6f1-f065-4746-ae39-86bf6830aa52/share.mp4","kind":"share_video"}],"author":"@vp0","$schema":"https://api.vp0.com/schema/vp0-bundle.v1.json","license":null,"screens":[{"name":"(root)","image":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-0.png","order":0},{"name":"view-2","image":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-1.png","order":1},{"name":"view-3","image":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-2.png","order":2},{"name":"view-4","image":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-3.png","order":3},{"name":"view-5","image":"https://storage.vp0.com/vp0/screens/c31f4ba2-5876-44b8-9f05-93987fcf4539/4051c315-2362-4929-80c7-ead2a46f0c21/screen-4.png","order":4}],"targets":[{"name":"react-native","entrypoint":"App.tsx"},{"name":"swiftui","entrypoint":"CryptoView.swift"}],"version":"2.0.0","category":"Crypto","platform":"ios","createdAt":"2026-05-25T19:40:48.942Z","createdBy":"vp0","importUrl":"https://vp0.com/source/satoshi-crypto","styleTags":["Dark","Fintech"],"updatedAt":"2026-10-12T13:25:47.432Z","categories":["Crypto"],"promptText":"Build this iOS app design in my project: \"Satoshi — Crypto\" — A crypto portfolio with a return chart and range switcher, holdings that open into coin pages with stats, a markets screen with search, gainers and losers, and an instant buy or sell flow..\n1. Fetch https://api.vp0.com/designs/satoshi-crypto/manifest — a JSON manifest whose files[] array contains EVERY source file inline (path + content).\n2. Create each file at its exact files[].path and paste its content VERBATIM. Do not re-imagine or restyle the UI — the provided code IS the design.\n3. Install dependencies exactly as given by the manifest's installCommand field (skip if null).\n4. Render the entry component (targets[].entrypoint) from a screen. Keep SafeAreaView / safe-area insets and the existing styling untouched.\n5. It is a UI starter: once it renders pixel-perfect, wire my own data, navigation and backend on top.\nHuman-readable source page: https://vp0.com/source/satoshi-crypto","sourceHash":"sha256:e4fd340b7d874ba4451c51605f6d9b9ad37f705c9324536949bfe8cb80510ab6","contentType":"template","description":"A crypto portfolio with a return chart and range switcher, holdings that open into coin pages with stats, a markets screen with search, gainers and losers, and an instant buy or sell flow.","manifestUrl":"https://api.vp0.com/designs/satoshi-crypto/manifest","sourceToken":"vp0_14d22764d7922f4c41142d4c","dependencies":{},"installHints":{"cli":"npx vp0com add satoshi-crypto --target react-native","mcp":"claude mcp add vp0 -- npx -y vp0-mcp","shadcn":"npx shadcn@latest add https://api.vp0.com/r/satoshi-crypto.json","openInV0":"https://v0.dev/chat/api/open?url=https://api.vp0.com/r/satoshi-crypto.json","downloadExpo":"https://api.vp0.com/export/satoshi-crypto/expo.zip","defaultTarget":"react-native","downloadXcode":"https://api.vp0.com/export/satoshi-crypto/xcode.zip"},"schemaVersion":"vp0-bundle.v1","aiInstructions":"This is an iOS app UI starter for Expo React Native (\"Satoshi — Crypto\").\nIntegrate it into the user's Expo project as follows:\n1. No extra dependencies are required.\n2. Create the following file(s) and paste each provided \"content\" exactly:\n - App.tsx\n - ui/kit.tsx\n - CryptoView.swift\n3. Render the exported component from a screen (e.g. app/(tabs)/index.tsx). It targets iOS — keep SafeAreaView / safe-area insets and the existing styling.\n4. These are UI starters: reproduce the visual layout faithfully, then wire the user's own data/navigation/backend afterward.","componentsUsed":[],"installCommand":null,"defaultLanguage":"react-native","devDependencies":{},"availableLanguages":["react-native","swiftui"],"registryDependencies":[]}