vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/screens/swap-modal.tsx

@@ -0,0 +1,363 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInUp,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { FINANCE_COLORS } from '../constants';
+
+export default function SwapModal() {
+  const router = useRouter();
+  const [fromAmount, setFromAmount] = useState('');
+  const [payToken, setPayToken] = useState({
+    symbol: 'ETH',
+    name: 'Ethereum',
+    icon: 'E',
+    color: '#6366f1',
+  });
+  const [receiveToken, setReceiveToken] = useState({
+    symbol: 'USDC',
+    name: 'USD Coin',
+    icon: '$',
+    color: '#3b82f6',
+  });
+  const [exchangeRate, setExchangeRate] = useState(1845.2);
+
+  const rotation = useSharedValue(0);
+
+  const handleSwapValues = () => {
+    rotation.value = withSpring(rotation.value + 180);
+    setPayToken(receiveToken);
+    setReceiveToken(payToken);
+    setExchangeRate(1 / exchangeRate);
+    setFromAmount('');
+  };
+
+  const formatCurrency = (value: string) => {
+    const clean = value.replace(/[^0-9.]/g, '');
+    const parts = clean.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  };
+
+  const handleAmountChange = (text: string) => {
+    if ((text.match(/\./g) || []).length > 1) return;
+    if (text === '') {
+      setFromAmount('');
+      return;
+    }
+    setFromAmount(formatCurrency(text));
+  };
+
+  const getFontSize = () => {
+    if (fromAmount.length > 10) return 24;
+    if (fromAmount.length > 7) return 28;
+    return 30;
+  };
+
+  const rotateStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  const numericAmount = parseFloat(fromAmount.replace(/,/g, '') || '0');
+  const toAmount = (numericAmount * exchangeRate).toFixed(2);
+  const dollarValue = (
+    numericAmount * (payToken.symbol === 'ETH' ? 1845 : 1)
+  ).toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.headerButton}
+        >
+          <Ionicons name="close" size={20} color="white" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Swap Tokens</Text>
+        <TouchableOpacity style={styles.headerButton}>
+          <Ionicons name="settings-outline" size={20} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.View
+        entering={FadeInUp.delay(200).springify()}
+        style={styles.content}
+      >
+        {/* From Card */}
+        <View style={styles.card}>
+          <View style={styles.cardHeader}>
+            <Text style={styles.cardLabel}>Pay with</Text>
+            <Text style={styles.cardLabel}>Balance: 2.5 ETH</Text>
+          </View>
+          <View style={styles.cardContent}>
+            <View style={styles.tokenSelector}>
+              <View
+                style={[styles.tokenIcon, { backgroundColor: payToken.color }]}
+              >
+                <Text style={styles.tokenIconText}>{payToken.icon}</Text>
+              </View>
+              <Text style={styles.tokenSymbol}>{payToken.symbol}</Text>
+              <Ionicons name="chevron-down" size={16} color="#71717a" />
+            </View>
+            <TextInput
+              value={fromAmount}
+              onChangeText={handleAmountChange}
+              keyboardType="numeric"
+              placeholder="0"
+              placeholderTextColor="#52525b"
+              style={[
+                styles.amountInput,
+                {
+                  fontSize: getFontSize(),
+                  lineHeight: getFontSize() * 1.2,
+                },
+              ]}
+            />
+          </View>
+          <Text style={styles.cardDollarValue}>$ {dollarValue}</Text>
+        </View>
+
+        {/* Swap Trigger */}
+        <View style={styles.swapButtonContainer}>
+          <TouchableOpacity activeOpacity={0.9} onPress={handleSwapValues}>
+            <Animated.View style={[styles.swapButton, rotateStyle]}>
+              <Ionicons
+                name="arrow-down"
+                size={20}
+                color={FINANCE_COLORS.primary}
+              />
+            </Animated.View>
+          </TouchableOpacity>
+        </View>
+
+        {/* To Card */}
+        <View style={styles.card}>
+          <View style={styles.cardHeader}>
+            <Text style={styles.cardLabel}>Receive</Text>
+            <Text style={styles.cardLabel}>Balance: 0 USDC</Text>
+          </View>
+          <View style={styles.cardContent}>
+            <View style={styles.tokenSelector}>
+              <View
+                style={[
+                  styles.tokenIcon,
+                  { backgroundColor: receiveToken.color },
+                ]}
+              >
+                <Text style={styles.tokenIconText}>{receiveToken.icon}</Text>
+              </View>
+              <Text style={styles.tokenSymbol}>{receiveToken.symbol}</Text>
+              <Ionicons name="chevron-down" size={16} color="#71717a" />
+            </View>
+            <Text
+              style={[
+                styles.toAmount,
+                !fromAmount && styles.toAmountEmpty,
+                { lineHeight: 40 },
+              ]}
+            >
+              {fromAmount ? toAmount : '0'}
+            </Text>
+          </View>
+          <Text style={styles.cardDollarValue}>
+            $ {fromAmount ? toAmount : '0.00'}
+          </Text>
+        </View>
+
+        {/* Info Grid */}
+        <View style={styles.infoGrid}>
+          <InfoRow
+            label="Rate"
+            value={`1 ${payToken.symbol} = ${exchangeRate.toFixed(4)} ${receiveToken.symbol}`}
+          />
+          <InfoRow label="Network Fee" value="$4.50 (0.002 ETH)" />
+          <InfoRow label="Price Impact" value="< 0.01%" color="#10B981" />
+        </View>
+      </Animated.View>
+
+      <TouchableOpacity style={styles.swapActionButton}>
+        <Text style={styles.swapActionButtonText}>Swipe to Swap</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function InfoRow({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: string;
+  color?: string;
+}) {
+  return (
+    <View style={styles.infoRow}>
+      <Text style={styles.infoLabel}>{label}</Text>
+      <Text style={[styles.infoValue, color ? { color } : null]}>{value}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#09090b',
+    padding: 24,
+    paddingTop: 48,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 32,
+  },
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  content: {
+    flex: 1,
+  },
+  card: {
+    backgroundColor: '#18181b',
+    borderRadius: 24,
+    padding: 20,
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  cardLabel: {
+    color: '#71717a',
+    fontWeight: '500',
+    fontSize: 12,
+  },
+  cardContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  tokenSelector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingLeft: 8,
+    paddingRight: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  tokenIcon: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tokenIconText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 10,
+  },
+  tokenSymbol: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+  amountInput: {
+    color: '#ffffff',
+    fontWeight: '700',
+    textAlign: 'right',
+    minWidth: 100,
+    includeFontPadding: false,
+  },
+  cardDollarValue: {
+    color: '#71717a',
+    fontSize: 12,
+    textAlign: 'right',
+    marginTop: 8,
+  },
+  toAmount: {
+    color: '#ffffff',
+    fontSize: 30,
+    fontWeight: '700',
+    textAlign: 'right',
+    lineHeight: 40,
+    includeFontPadding: false,
+  },
+  toAmountEmpty: {
+    opacity: 0.5,
+  },
+  swapButtonContainer: {
+    alignItems: 'center',
+    marginVertical: -20,
+    zIndex: 10,
+  },
+  swapButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 4,
+    borderColor: '#09090b',
+    backgroundColor: '#27272a',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoGrid: {
+    marginTop: 32,
+    gap: 16,
+    paddingHorizontal: 8,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  infoLabel: {
+    color: '#71717a',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  infoValue: {
+    color: '#d4d4d8',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  swapActionButton: {
+    width: '100%',
+    height: 64,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+    backgroundColor: FINANCE_COLORS.primary,
+  },
+  swapActionButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+});

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/screens/wallet-dashboard.tsx

@@ -0,0 +1,281 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Stack, useRouter } from 'expo-router';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInUp,
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+
+import { ActionButtons } from '../components/ActionButtons';
+import { AssetRow } from '../components/AssetRow';
+import { BalanceCard } from '../components/BalanceCard';
+import { FINANCE_COLORS, MOCK_ASSETS } from '../constants';
+
+export default function WalletDashboard() {
+  const router = useRouter();
+  const scrollY = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y;
+  });
+
+  return (
+    <View style={styles.container}>
+      <FocusAwareStatusBar barStyle="light-content" />
+      <Stack.Screen options={{ headerShown: false }} />
+
+      {/* Custom Header */}
+      <View style={styles.header}>
+        <View style={styles.profileSection}>
+          <View style={styles.avatar}>
+            <Text style={styles.avatarText}>MZ</Text>
+          </View>
+          <View>
+            <Text style={styles.greetingLabel}>Good Morning</Text>
+            <Text style={styles.greetingName}>Muhammad</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          onPress={() =>
+            router.push('/(root)/(protected)/screen-kits/finance/notifications')
+          }
+          style={styles.notificationButton}
+        >
+          <View style={styles.notificationDot} />
+          <Ionicons name="notifications-outline" size={20} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.ScrollView
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        contentContainerStyle={styles.scrollContent}
+        style={styles.scrollView}
+      >
+        <BalanceCard />
+
+        <ActionButtons
+          onSendBy={() =>
+            router.push('/(root)/(protected)/screen-kits/finance/send')
+          }
+          onReceive={() =>
+            router.push('/(root)/(protected)/screen-kits/finance/receive')
+          }
+          onSwap={() =>
+            router.push('/(root)/(protected)/screen-kits/finance/swap')
+          }
+          onBuy={() =>
+            router.push('/(root)/(protected)/screen-kits/finance/asset-detail')
+          }
+        />
+
+        <View style={styles.assetsSection}>
+          <View style={styles.assetsSectionHeader}>
+            <Text style={styles.assetsSectionTitle}>Your Assets</Text>
+            <TouchableOpacity>
+              <Text style={styles.seeAllText}>See All</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.assetsList}>
+            {MOCK_ASSETS.map((asset, index) => (
+              <Animated.View
+                key={asset.id}
+                entering={FadeInUp.delay(400 + index * 100).springify()}
+              >
+                <AssetRow
+                  asset={asset}
+                  onPress={() =>
+                    router.push({
+                      pathname:
+                        '/(root)/(protected)/screen-kits/finance/asset-detail',
+                      params: {
+                        ...asset,
+                        chartData: JSON.stringify(asset.chartData),
+                      },
+                    })
+                  }
+                />
+              </Animated.View>
+            ))}
+          </View>
+        </View>
+
+        {/* Promo / News Card (Horizontal Scroll) */}
+        <Text style={styles.marketUpdatesTitle}>Market Updates</Text>
+        <Animated.ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.horizontalScroll}
+          contentContainerStyle={styles.horizontalScrollContent}
+        >
+          {[1, 2, 3].map((i) => (
+            <View key={i} style={styles.newsCard}>
+              <View style={styles.newsCardHeader}>
+                <View style={styles.newsBadge}>
+                  <Text style={styles.newsBadgeText}>CRYPTO NEWS</Text>
+                </View>
+                <Text style={styles.newsTime}>2h ago</Text>
+              </View>
+              <Text style={styles.newsHeadline}>
+                Bitcoin surges past $28k following new ETF approval rumors.
+              </Text>
+            </View>
+          ))}
+        </Animated.ScrollView>
+      </Animated.ScrollView>
+    </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,
+    backgroundColor: 'rgba(9, 9, 11, 0.8)',
+    zIndex: 10,
+  },
+  profileSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#27272a',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#3f3f46',
+  },
+  avatarText: {
+    fontWeight: '700',
+    fontSize: 18,
+    color: '#ffffff',
+  },
+  greetingLabel: {
+    color: '#a1a1aa',
+    fontSize: 12,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    fontWeight: '700',
+  },
+  greetingName: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  notificationButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  notificationDot: {
+    position: 'absolute',
+    top: 8,
+    right: 10,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#ef4444',
+    zIndex: 10,
+    borderWidth: 1,
+    borderColor: '#18181b',
+  },
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  scrollContent: {
+    paddingBottom: 100,
+  },
+  assetsSection: {
+    marginBottom: 24,
+  },
+  assetsSectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  assetsSectionTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#ffffff',
+  },
+  seeAllText: {
+    color: '#71717a',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  assetsList: {
+    gap: 8,
+  },
+  marketUpdatesTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#ffffff',
+    marginBottom: 16,
+  },
+  horizontalScroll: {
+    marginHorizontal: -24,
+  },
+  horizontalScrollContent: {
+    paddingHorizontal: 24,
+  },
+  newsCard: {
+    width: 256,
+    height: 128,
+    borderRadius: 16,
+    backgroundColor: '#18181b',
+    borderWidth: 1,
+    borderColor: '#27272a',
+    marginRight: 16,
+    padding: 16,
+    justifyContent: 'space-between',
+  },
+  newsCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  newsBadge: {
+    backgroundColor: 'rgba(139, 92, 246, 0.2)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+  },
+  newsBadgeText: {
+    color: '#a78bfa',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  newsTime: {
+    color: '#71717a',
+    fontSize: 12,
+  },
+  newsHeadline: {
+    color: '#ffffff',
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+});

package/recipes/screen-kits-finance/recipe.json

@@ -0,0 +1,46 @@
+{
+  "name": "screen-kits-finance",
+  "version": "1.0.0",
+  "description": "Screen kit: DeFi Wallet (finance dashboard)",
+  "copy": [
+    {
+      "from": "apps/native/src/app/screen-kits/finance",
+      "to": "apps/native/src/app/(root)/(protected)/screen-kits/finance"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/finance",
+      "to": "apps/native/src/features/screen-kits/finance"
+    }
+  ],
+  "screenKit": {
+    "id": "finance",
+    "title": "DeFi Wallet",
+    "description": "Crypto dashboard & assets",
+    "icon": "🪙",
+    "color": "#8b5cf6",
+    "screens": [
+      {
+        "id": "wallet",
+        "name": "Wallet Dashboard",
+        "description": "Balance overview with interactive charts",
+        "route": "/screen-kits/finance/wallet"
+      }
+    ]
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@expo/vector-icons",
+      "@gorhom/bottom-sheet",
+      "expo-blur",
+      "expo-haptics",
+      "expo-linear-gradient",
+      "lottie-react-native",
+      "react-native-css-interop",
+      "react-native-gesture-handler",
+      "react-native-reanimated",
+      "react-native-safe-area-context",
+      "react-native-svg"
+    ]
+  }
+}

package/recipes/screen-kits-fitness/apps/native/src/app/screen-kits/fitness/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from 'expo-router';
+
+export default function FitnessLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="workout" />
+    </Stack>
+  );
+}

package/recipes/screen-kits-fitness/apps/native/src/app/screen-kits/fitness/index.tsx

@@ -0,0 +1,6 @@
+import { Redirect } from 'expo-router';
+import React from 'react';
+
+export default function FitnessKitIndex() {
+  return <Redirect href="/screen-kits/fitness/workout" />;
+}