vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/components/BalanceCard.tsx

@@ -0,0 +1,118 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+import { Dimensions, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, {
+  Defs,
+  LinearGradient as SvgGradient,
+  Path,
+  Stop,
+} from 'react-native-svg';
+
+import { Text } from '@/components/ui';
+
+import { FINANCE_COLORS } from '../constants';
+
+const { width } = Dimensions.get('window');
+const CARD_WIDTH = width - 48;
+const GRAPH_HEIGHT = 100;
+
+export const BalanceCard = () => {
+  // Simple sparkline path for demo
+  const d = `M0,${GRAPH_HEIGHT} C60,${GRAPH_HEIGHT} 80,40 140,40 S200,80 260,60 S320,0 ${CARD_WIDTH},20 L${CARD_WIDTH},${GRAPH_HEIGHT} Z`;
+
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(200).springify()}
+      className="rounded-3xl overflow-hidden my-6 border border-zinc-800"
+      style={{
+        width: CARD_WIDTH,
+        height: 220,
+        backgroundColor: '#18181b', // Fallback
+      }}
+    >
+      {/* Background Gradient */}
+      <LinearGradient
+        colors={[FINANCE_COLORS.card, '#000000']}
+        className="absolute inset-0"
+      />
+
+      {/* Glass Effect Overlay */}
+      {/* <BlurView intensity={20} className="absolute inset-0" tint="dark" /> */}
+      {/* Note: BlurView inside absolute inset might need careful layering */}
+
+      {/* Decorative Gradient Blob */}
+      <View
+        className="absolute -top-20 -right-20 w-64 h-64 rounded-full opacity-20"
+        style={{
+          backgroundColor: FINANCE_COLORS.primary,
+          filter: 'blur(50px)',
+        }} // Native blur needs generic-style prop or image
+      />
+
+      <View className="absolute inset-0">
+        <Svg height="100%" width="100%">
+          <Defs>
+            <SvgGradient id="grad" x1="0" y1="0" x2="0" y2="1">
+              <Stop
+                offset="0"
+                stopColor={FINANCE_COLORS.primary}
+                stopOpacity="0.3"
+              />
+              <Stop
+                offset="1"
+                stopColor={FINANCE_COLORS.primary}
+                stopOpacity="0"
+              />
+            </SvgGradient>
+          </Defs>
+          <Path
+            d={d}
+            fill="url(#grad)"
+            stroke={FINANCE_COLORS.primary}
+            strokeWidth={2}
+          />
+        </Svg>
+      </View>
+
+      {/* Content */}
+      <View className="p-6 justify-between flex-1">
+        <View>
+          <View className="flex-row items-center gap-2 mb-1">
+            <Text className="text-zinc-400 font-medium">Total Balance</Text>
+            <View className="px-2 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-500/30">
+              <Text className="text-emerald-400 text-[10px] font-bold">
+                +5.2%
+              </Text>
+            </View>
+          </View>
+          <Text className="text-4xl font-bold text-white tracking-tight">
+            $42,593.00
+          </Text>
+        </View>
+
+        <View className="flex-row items-center justify-between mt-4">
+          <View className="flex-row gap-2">
+            <View className="w-2 h-2 rounded-full bg-emerald-500 mt-2" />
+            <Text className="text-zinc-400 text-xs leading-5">
+              Your portfolio is up by $2,105 today.{'\n'}
+              Great work!
+            </Text>
+          </View>
+          <Ionicons
+            name="stats-chart"
+            size={20}
+            color={FINANCE_COLORS.primary}
+          />
+        </View>
+      </View>
+    </Animated.View>
+  );
+};

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/constants.ts

@@ -0,0 +1,85 @@
+export const FINANCE_COLORS = {
+  background: '#09090b', // Deep Black
+  card: '#18181b', // Zinc 900
+  primary: '#8b5cf6', // Violet 500
+  secondary: '#3b82f6', // Blue 500
+  accent: '#06b6d4', // Cyan 500
+  success: '#10b981', // Emerald 500
+  danger: '#ef4444', // Red 500
+  text: '#ffffff',
+  textMuted: '#a1a1aa', // Zinc 400
+  border: '#27272a', // Zinc 800
+};
+
+export const MOCK_ASSETS = [
+  {
+    id: 'bitcoin',
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    amount: 0.45,
+    value: 28500.5,
+    change: 2.4,
+    color: '#f59e0b', // Amber
+    chartData: [26000, 26500, 26200, 27000, 28000, 27800, 28500],
+  },
+  {
+    id: 'ethereum',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    amount: 5.2,
+    value: 9800.2,
+    change: -1.2,
+    color: '#6366f1', // Indigo
+    chartData: [1950, 1920, 1900, 1880, 1890, 1870, 1885],
+  },
+  {
+    id: 'solana',
+    name: 'Solana',
+    symbol: 'SOL',
+    amount: 145.0,
+    value: 3200.0,
+    change: 15.4,
+    color: '#14b8a6', // Teal
+    chartData: [20, 22, 21, 25, 28, 30, 32],
+  },
+  {
+    id: 'usdc',
+    name: 'USD Coin',
+    symbol: 'USDC',
+    amount: 1045.5,
+    value: 1045.5,
+    change: 0.01,
+    color: '#3b82f6', // Blue
+    chartData: [1, 1, 1, 1, 1, 1, 1],
+  },
+];
+
+export const MOCK_TRANSACTIONS = [
+  {
+    id: 't1',
+    type: 'receive',
+    title: 'Received from Mike',
+    date: 'Today, 10:23 AM',
+    amount: '+ 0.05 ETH',
+    value: '+$95.00',
+    icon: 'arrow-down-circle',
+  },
+  {
+    id: 't2',
+    type: 'send',
+    title: 'Sent to Binance',
+    date: 'Yesterday, 4:15 PM',
+    amount: '- 2.5 SOL',
+    value: '-$55.00',
+    icon: 'arrow-up-circle',
+  },
+  {
+    id: 't3',
+    type: 'swap',
+    title: 'Swapped USDC to BTC',
+    date: 'Oct 12, 9:00 AM',
+    amount: '500 USDC',
+    value: '0.018 BTC',
+    icon: 'repeat',
+  },
+];

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/screens/asset-detail.tsx

@@ -0,0 +1,378 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated';
+import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { FINANCE_COLORS } from '../constants';
+
+const { width } = Dimensions.get('window');
+const CHART_HEIGHT = 220;
+
+export default function AssetDetailScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  const { name, symbol, price, change, color } = params;
+
+  const assetName = (name as string) || 'Bitcoin';
+  const assetSymbol = (symbol as string) || 'BTC';
+  const assetPrice = (price as string) || '$28,450.00';
+  const assetChange = (change as string) || '+2.4%';
+  const assetColor = (color as string) || '#F7931A';
+  const isPositive = assetChange.includes('+');
+
+  const d = `M0,${CHART_HEIGHT} C${width * 0.2},${CHART_HEIGHT * 0.8} ${
+    width * 0.4
+  },${CHART_HEIGHT * 0.4} ${width * 0.6},${CHART_HEIGHT * 0.6} S${
+    width * 0.8
+  },0 ${width},100 L${width},${CHART_HEIGHT} Z`;
+
+  const lineD = `M0,${CHART_HEIGHT} C${width * 0.2},${CHART_HEIGHT * 0.8} ${
+    width * 0.4
+  },${CHART_HEIGHT * 0.4} ${width * 0.6},${CHART_HEIGHT * 0.6} S${width * 0.8},0 ${width},100`;
+
+  const timeFilters = ['1H', '1D', '1W', '1M', '1Y', 'ALL'];
+
+  return (
+    <View style={styles.container}>
+      <FocusAwareStatusBar barStyle="light-content" />
+      <Stack.Screen options={{ headerShown: false }} />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.headerButton}
+        >
+          <Ionicons name="arrow-back" size={20} color="white" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>{assetName}</Text>
+        <TouchableOpacity style={styles.headerButton}>
+          <Ionicons name="star-outline" size={20} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.ScrollView
+        contentContainerStyle={styles.scrollContent}
+        style={styles.scrollView}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Price Header */}
+        <Animated.View
+          entering={FadeInUp.delay(200)}
+          style={styles.priceSection}
+        >
+          <View style={styles.assetIcon}>
+            <Text style={[styles.assetIconText, { color: assetColor }]}>
+              {assetSymbol[0]}
+            </Text>
+          </View>
+          <Text style={styles.priceLabel}>Current Price</Text>
+          <Text style={styles.priceValue}>{assetPrice}</Text>
+          <View
+            style={[
+              styles.changeBadge,
+              isPositive
+                ? styles.changeBadgePositive
+                : styles.changeBadgeNegative,
+            ]}
+          >
+            <Text
+              style={[
+                styles.changeText,
+                isPositive
+                  ? styles.changeTextPositive
+                  : styles.changeTextNegative,
+              ]}
+            >
+              {assetChange} (24h)
+            </Text>
+          </View>
+        </Animated.View>
+
+        {/* Chart Area */}
+        <View style={styles.chartContainer}>
+          <Svg height="100%" width="100%">
+            <Defs>
+              <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={assetColor} stopOpacity="0.3" />
+                <Stop offset="1" stopColor={assetColor} stopOpacity="0" />
+              </LinearGradient>
+            </Defs>
+            <Path d={d} fill="url(#grad)" stroke="none" />
+            <Path d={lineD} stroke={assetColor} strokeWidth={3} fill="none" />
+          </Svg>
+        </View>
+
+        {/* Time Filters */}
+        <View style={styles.timeFilters}>
+          {timeFilters.map((time, i) => (
+            <TouchableOpacity
+              key={time}
+              style={[
+                styles.timeFilterButton,
+                i === 1 && styles.timeFilterButtonActive,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.timeFilterText,
+                  i === 1 && styles.timeFilterTextActive,
+                ]}
+              >
+                {time}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        {/* Stats Grid */}
+        <View style={styles.statsSection}>
+          <Text style={styles.statsTitle}>Market Stats</Text>
+          <View style={styles.statsRow}>
+            <StatCard label="Market Cap" value="$542.8B" delay={300} />
+            <StatCard label="Volume (24h)" value="$24.1B" delay={400} />
+          </View>
+          <View style={styles.statsRow}>
+            <StatCard label="Circulating" value="19.4M" delay={500} />
+            <StatCard label="Popularity" value="#1" delay={600} />
+          </View>
+        </View>
+      </Animated.ScrollView>
+
+      {/* Sticky Action Buttons */}
+      <Animated.View
+        entering={FadeInDown.delay(700)}
+        style={styles.footerContainer}
+      >
+        <BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
+        <View style={styles.actionButtons}>
+          <TouchableOpacity style={styles.sellButton} activeOpacity={0.8}>
+            <Text style={styles.sellButtonText}>Sell</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.buyButton} activeOpacity={0.8}>
+            <Text style={styles.buyButtonText}>Buy</Text>
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  delay,
+}: {
+  label: string;
+  value: string;
+  delay: number;
+}) {
+  return (
+    <Animated.View
+      entering={FadeInUp.delay(delay).springify()}
+      style={styles.statCard}
+    >
+      <Text style={styles.statLabel}>{label}</Text>
+      <Text style={styles.statValue}>{value}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: FINANCE_COLORS.background,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingTop: 56,
+    paddingBottom: 16,
+  },
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  headerTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 160,
+  },
+  priceSection: {
+    alignItems: 'center',
+    marginTop: 24,
+    marginBottom: 32,
+  },
+  assetIcon: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: '#18181b',
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  assetIconText: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  priceLabel: {
+    color: '#71717a',
+    fontWeight: '500',
+    fontSize: 14,
+    marginBottom: 4,
+  },
+  priceValue: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: '#ffffff',
+    marginBottom: 8,
+    lineHeight: 48,
+    includeFontPadding: false,
+  },
+  changeBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 20,
+  },
+  changeBadgePositive: {
+    backgroundColor: 'rgba(16, 185, 129, 0.2)',
+  },
+  changeBadgeNegative: {
+    backgroundColor: 'rgba(239, 68, 68, 0.2)',
+  },
+  changeText: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  changeTextPositive: {
+    color: '#34d399',
+  },
+  changeTextNegative: {
+    color: '#f87171',
+  },
+  chartContainer: {
+    height: 220,
+    width: '100%',
+    marginBottom: 32,
+  },
+  timeFilters: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    marginBottom: 32,
+  },
+  timeFilterButton: {
+    width: 40,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+  },
+  timeFilterButtonActive: {
+    backgroundColor: '#27272a',
+  },
+  timeFilterText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#71717a',
+  },
+  timeFilterTextActive: {
+    color: '#ffffff',
+  },
+  statsSection: {
+    paddingHorizontal: 24,
+    gap: 16,
+  },
+  statsTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#ffffff',
+    marginBottom: 8,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  statCard: {
+    flex: 1,
+    backgroundColor: '#18181b',
+    borderWidth: 1,
+    borderColor: '#27272a',
+    padding: 16,
+    borderRadius: 16,
+  },
+  statLabel: {
+    color: '#71717a',
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  statValue: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  footerContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 24,
+    paddingTop: 20,
+    paddingBottom: 40,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  actionButtons: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  sellButton: {
+    flex: 1,
+    backgroundColor: '#27272a',
+    height: 56,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sellButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  buyButton: {
+    flex: 1,
+    height: 56,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: FINANCE_COLORS.primary,
+  },
+  buyButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+});