import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import { 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';
const ACCENT = '#F7931A';
const THEME = { dark: { bg: '#0B0A09', card: '#171512', card2: '#231F1A', line: '#2A251E', text2: '#A39C90', text3: '#67604F' }, light: { bg: '#F8F4EE', card: '#FFFFFF', card2: '#EFE6DA' } };
const COINS = [
{ 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] },
{ 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] },
{ sym: 'SOL', name: 'Solana', price: 168, chg: 5.8, c: '#14F195', hold: 24, s: [140, 145, 150, 148, 155, 158, 162, 160, 165, 168] },
{ 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] },
{ 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] },
];
const 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] };
const usd = (n) => '$' + n.toLocaleString('en-US', { maximumFractionDigits: n < 10 ? 2 : 0 });
function PortfolioScreen({ nav }) {
const t = useT();
const [range, setRange] = useState('1W');
const total = COINS.reduce((a, c) => a + c.price * c.hold, 0);
return (
} />
Return, {range}+$1,482.10
{}} />
{COINS.map((c) => (
{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 })} />
))}
);
}
function MarketsScreen({ nav }) {
const t = useT();
const [q, setQ] = useState('');
const [f, setF] = useState('all');
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));
return (
setF('all')} />
setF('gain')} />
setF('lose')} />
{list.map((c) => (
{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 })} />
))}
);
}
function TradeScreen() {
const t = useT();
const [side, setSide] = useState('buy');
const [amt, setAmt] = useState(250);
return (
{side === 'buy' ? 'You pay' : 'You sell'}
{'$' + amt}
≈ {(amt / 67482).toFixed(5)} BTC
{[50, 100, 250, 500].map((v) => setAmt(v)} />)}
BTC
} title="Bitcoin" subtitle="Market order" value={usd(67482)} chevron onPress={() => {}} />
{}} />
|
);
}
function CoinDetail({ nav, params }) {
const t = useT();
const c = COINS.find((x) => x.sym === params.sym) || COINS[0];
const [range, setRange] = useState('1W');
const up = c.chg >= 0;
return (
} />
{c.sym}
{usd(c.price)}
{(up ? '+' : '') + c.chg}% today
|
|
|
|
);
}
function Root({ nav }) {
const [tab, setTab] = useState('portfolio');
return (
, markets: , trade: }} />
);
}
const SCREENS = { root: Root, coin: CoinDetail };
export default function App() {
return (
);
}