vibefast-cli 1.3.0 → 1.3.1

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

@@ -0,0 +1,210 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInRight } from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { FINANCE_COLORS } from '../constants';
+
+const NOTIFICATIONS = [
+  {
+    id: '1',
+    title: 'Payment Sent',
+    message: 'You sent $50.00 to Alice.',
+    time: '2m ago',
+    icon: 'arrow-up',
+    color: '#EF4444',
+    read: false,
+  },
+  {
+    id: '2',
+    title: 'Payment Received',
+    message: 'Bob sent you $120.00.',
+    time: '1h ago',
+    icon: 'arrow-down',
+    color: '#10B981',
+    read: false,
+  },
+  {
+    id: '3',
+    title: 'Security Alert',
+    message: 'New login detected from Mac OS X.',
+    time: '5h ago',
+    icon: 'shield-checkmark',
+    color: '#3B82F6',
+    read: true,
+  },
+];
+
+export default function NotificationsModal() {
+  const router = useRouter();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.closeButton}
+        >
+          <Ionicons name="close" size={20} color="white" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Notifications</Text>
+        <TouchableOpacity>
+          <Text style={styles.clearAllText}>Clear All</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        style={styles.scrollView}
+        showsVerticalScrollIndicator={false}
+      >
+        {NOTIFICATIONS.map((notif, index) => (
+          <Animated.View
+            key={notif.id}
+            entering={FadeInRight.delay(index * 100)}
+            style={[
+              styles.notificationItem,
+              notif.read ? styles.notificationRead : styles.notificationUnread,
+            ]}
+          >
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: `${notif.color}20` },
+              ]}
+            >
+              <Ionicons
+                name={notif.icon as any}
+                size={24}
+                color={notif.color}
+              />
+            </View>
+            <View style={styles.notificationContent}>
+              <View style={styles.notificationHeader}>
+                <Text
+                  style={[
+                    styles.notificationTitle,
+                    notif.read && styles.notificationTitleRead,
+                  ]}
+                >
+                  {notif.title}
+                </Text>
+                <Text style={styles.notificationTime}>{notif.time}</Text>
+              </View>
+              <Text style={styles.notificationMessage} numberOfLines={2}>
+                {notif.message}
+              </Text>
+            </View>
+            {!notif.read && <View style={styles.unreadDot} />}
+          </Animated.View>
+        ))}
+
+        <Text style={styles.endText}>No more notifications</Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#09090b',
+    padding: 24,
+    paddingTop: 48,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 32,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  clearAllText: {
+    color: '#71717a',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  notificationItem: {
+    flexDirection: 'row',
+    gap: 16,
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 16,
+    borderWidth: 1,
+  },
+  notificationUnread: {
+    backgroundColor: '#18181b',
+    borderColor: '#27272a',
+  },
+  notificationRead: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  notificationContent: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  notificationHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 4,
+  },
+  notificationTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#ffffff',
+  },
+  notificationTitleRead: {
+    color: '#a1a1aa',
+  },
+  notificationTime: {
+    color: '#52525b',
+    fontSize: 10,
+    textTransform: 'uppercase',
+    fontWeight: '700',
+  },
+  notificationMessage: {
+    color: '#71717a',
+    fontSize: 12,
+    lineHeight: 20,
+  },
+  unreadDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: FINANCE_COLORS.primary,
+    marginTop: 8,
+  },
+  endText: {
+    color: '#3f3f46',
+    textAlign: 'center',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 32,
+    textTransform: 'uppercase',
+    letterSpacing: 2,
+  },
+});

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

@@ -0,0 +1,317 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+
+import { Text } from '@/components/ui';
+import { FINANCE_COLORS } from '../constants';
+
+export default function ReceiveModal() {
+  const router = useRouter();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const RealisticQRCode = () => {
+    const size = 25;
+    const padding = 2;
+    const pixelSize = 200 / (size + padding * 2);
+
+    const rect = (x: number, y: number) => (
+      <Rect
+        key={`${x}-${y}`}
+        x={(x + padding) * pixelSize}
+        y={(y + padding) * pixelSize}
+        width={pixelSize}
+        height={pixelSize}
+        fill="black"
+      />
+    );
+
+    const modules: JSX.Element[] = [];
+
+    const addFinder = (bx: number, by: number) => {
+      for (let x = 0; x < 7; x++) {
+        for (let y = 0; y < 7; y++) {
+          if (
+            x === 0 ||
+            x === 6 ||
+            y === 0 ||
+            y === 6 ||
+            (x >= 2 && x <= 4 && y >= 2 && y <= 4)
+          ) {
+            modules.push(rect(bx + x, by + y));
+          }
+        }
+      }
+    };
+
+    addFinder(0, 0);
+    addFinder(size - 7, 0);
+    addFinder(0, size - 7);
+
+    for (let i = 8; i < size - 8; i += 2) {
+      modules.push(rect(i, 6));
+      modules.push(rect(6, i));
+    }
+
+    const isReserved = (x: number, y: number) => {
+      if (x < 8 && y < 8) return true;
+      if (x > size - 9 && y < 8) return true;
+      if (x < 8 && y > size - 9) return true;
+      if (x === 6 || y === 6) return true;
+      return false;
+    };
+
+    const seed = 12345;
+    let randomVal = seed;
+    const pseudoRandom = () => {
+      randomVal = (randomVal * 16807) % 2147483647;
+      return randomVal / 2147483647;
+    };
+
+    for (let x = 0; x < size; x++) {
+      for (let y = 0; y < size; y++) {
+        if (!isReserved(x, y)) {
+          if (pseudoRandom() > 0.5) {
+            modules.push(rect(x, y));
+          }
+        }
+      }
+    }
+
+    return (
+      <View style={styles.qrContainer}>
+        <Svg height="200" width="200" viewBox="0 0 200 200">
+          {modules}
+        </Svg>
+        <View style={styles.qrLogoContainer}>
+          <View style={styles.qrLogo}>
+            <Ionicons name="wallet" size={20} color={FINANCE_COLORS.primary} />
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  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}>Receive Assets</Text>
+        <TouchableOpacity style={styles.headerButton}>
+          <Ionicons name="share-outline" size={20} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.View
+        entering={FadeInUp.delay(200).springify()}
+        style={styles.content}
+      >
+        {/* Network Pill */}
+        <View style={styles.networkPill}>
+          <View style={styles.networkDot} />
+          <Text style={styles.networkText}>ETHEREUM NETWORK</Text>
+        </View>
+
+        {/* QR Code Container */}
+        <View style={styles.qrSection}>
+          <View style={styles.qrGlow} />
+          <RealisticQRCode />
+        </View>
+
+        {/* Address & Copy */}
+        <View style={styles.addressCard}>
+          <Text style={styles.addressLabel}>Your Wallet Address</Text>
+          <View style={styles.addressRow}>
+            <Text style={styles.addressText} numberOfLines={1}>
+              0x71C...9A23
+            </Text>
+          </View>
+        </View>
+
+        <TouchableOpacity
+          onPress={handleCopy}
+          style={[styles.copyButton, copied && styles.copyButtonSuccess]}
+        >
+          <Ionicons
+            name={copied ? 'checkmark' : 'copy-outline'}
+            size={20}
+            color="white"
+          />
+          <Text style={styles.copyButtonText}>
+            {copied ? 'Copied!' : 'Copy Address'}
+          </Text>
+        </TouchableOpacity>
+
+        <Text style={styles.disclaimer}>
+          Only send ETH or ERC-20 tokens to this address. Sending other assets
+          may result in permanent loss.
+        </Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#09090b',
+    padding: 24,
+    paddingTop: 48,
+    alignItems: 'center',
+  },
+  header: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 40,
+  },
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  content: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  networkPill: {
+    backgroundColor: '#18181b',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    marginBottom: 32,
+    borderWidth: 1,
+    borderColor: '#27272a',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  networkDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#10b981',
+  },
+  networkText: {
+    color: '#a1a1aa',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  qrSection: {
+    marginBottom: 40,
+    alignItems: 'center',
+  },
+  qrGlow: {
+    position: 'absolute',
+    top: -16,
+    left: -16,
+    right: -16,
+    bottom: -16,
+    backgroundColor: FINANCE_COLORS.primary,
+    opacity: 0.2,
+    borderRadius: 40,
+  },
+  qrContainer: {
+    backgroundColor: '#ffffff',
+    padding: 16,
+    borderRadius: 24,
+    overflow: 'hidden',
+    shadowColor: '#10b981',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 24,
+    elevation: 10,
+  },
+  qrLogoContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  qrLogo: {
+    width: 40,
+    height: 40,
+    backgroundColor: '#ffffff',
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#f4f4f5',
+  },
+  addressCard: {
+    width: '100%',
+    backgroundColor: 'rgba(24, 24, 27, 0.5)',
+    borderWidth: 1,
+    borderColor: '#27272a',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 32,
+  },
+  addressLabel: {
+    color: '#71717a',
+    fontSize: 12,
+    fontWeight: '500',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  addressRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  addressText: {
+    color: '#ffffff',
+    fontFamily: 'monospace',
+    fontSize: 14,
+    letterSpacing: 2,
+  },
+  copyButton: {
+    width: '100%',
+    height: 56,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    backgroundColor: '#27272a',
+  },
+  copyButtonSuccess: {
+    backgroundColor: '#10b981',
+  },
+  copyButtonText: {
+    fontWeight: '700',
+    color: '#ffffff',
+  },
+  disclaimer: {
+    color: '#52525b',
+    fontSize: 12,
+    textAlign: 'center',
+    marginTop: 24,
+    paddingHorizontal: 40,
+  },
+});