From d7a512424f2387581830d555d315b4233f5d08cf Mon Sep 17 00:00:00 2001
From: emergent-agent-e1 <github@emergent.sh>
Date: Sat, 8 Nov 2025 21:34:47 +0000
Subject: [PATCH] auto-commit for 5eee8fc1-53e2-4f5b-8aaa-389d4abdae4f

---
 frontend/src/screens/SettingsScreen.tsx | 250 ++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 frontend/src/screens/SettingsScreen.tsx

diff --git a/frontend/src/screens/SettingsScreen.tsx b/frontend/src/screens/SettingsScreen.tsx
new file mode 100644
index 00000000..c3d1df29
--- /dev/null
+++ b/frontend/src/screens/SettingsScreen.tsx
@@ -0,0 +1,250 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Switch,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function SettingsScreen({ navigation }: any) {
+  const insets = useSafeAreaInsets();
+  const { user, signOut } = useAuth();
+  const [biometricsEnabled, setBiometricsEnabled] = React.useState(false);
+  const [notificationsEnabled, setNotificationsEnabled] = React.useState(true);
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigation.replace('Language');
+  };
+
+  const SettingSection = ({ title, children }: any) => (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {children}
+    </View>
+  );
+
+  const SettingItem = ({ icon, title, subtitle, onPress, rightElement }: any) => (
+    <TouchableOpacity style={styles.settingItem} onPress={onPress} disabled={!onPress}>
+      <View style={styles.settingItemLeft}>
+        <View style={styles.iconContainer}>
+          <Ionicons name={icon} size={20} color="#EE2A35" />
+        </View>
+        <View style={styles.settingItemContent}>
+          <Text style={styles.settingItemTitle}>{title}</Text>
+          {subtitle && <Text style={styles.settingItemSubtitle}>{subtitle}</Text>}
+        </View>
+      </View>
+      {rightElement || <Ionicons name="chevron-forward" size={20} color="#9CA3AF" />}
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#1F2937" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Settings</Text>
+        <View style={{ width: 40 }} />
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {/* Profile Section */}
+        <SettingSection title="Profile">
+          <SettingItem
+            icon="person"
+            title="Edit Profile"
+            subtitle={user?.email || 'Update your information'}
+            onPress={() => {}}
+          />
+          <SettingItem
+            icon="wallet"
+            title="Wallet Address"
+            subtitle="5GgTgG9sRm...ioki45"
+            onPress={() => {}}
+          />
+        </SettingSection>
+
+        {/* Security Section */}
+        <SettingSection title="Security">
+          <SettingItem
+            icon="finger-print"
+            title="Biometric Authentication"
+            subtitle="Use fingerprint or Face ID"
+            rightElement={
+              <Switch
+                value={biometricsEnabled}
+                onValueChange={setBiometricsEnabled}
+                trackColor={{ false: '#E5E7EB', true: '#EE2A3580' }}
+                thumbColor={biometricsEnabled ? '#EE2A35' : '#F3F4F6'}
+              />
+            }
+          />
+          <SettingItem
+            icon="key"
+            title="Change Password"
+            subtitle="Update your password"
+            onPress={() => {}}
+          />
+          <SettingItem
+            icon="shield-checkmark"
+            title="Two-Factor Authentication"
+            subtitle="Add extra security"
+            onPress={() => {}}
+          />
+        </SettingSection>
+
+        {/* Preferences Section */}
+        <SettingSection title="Preferences">
+          <SettingItem
+            icon="notifications"
+            title="Push Notifications"
+            subtitle="Receive alerts and updates"
+            rightElement={
+              <Switch
+                value={notificationsEnabled}
+                onValueChange={setNotificationsEnabled}
+                trackColor={{ false: '#E5E7EB', true: '#EE2A3580' }}
+                thumbColor={notificationsEnabled ? '#EE2A35' : '#F3F4F6'}
+              />
+            }
+          />
+          <SettingItem
+            icon="language"
+            title="Language"
+            subtitle="English"
+            onPress={() => {}}
+          />
+          <SettingItem
+            icon="moon"
+            title="Dark Mode"
+            subtitle="Coming soon"
+          />
+        </SettingSection>
+
+        {/* About Section */}
+        <SettingSection title="About">
+          <SettingItem icon="information-circle" title="Version" subtitle="1.0.0" />
+          <SettingItem icon="document-text" title="Terms of Service" onPress={() => {}} />
+          <SettingItem icon="shield" title="Privacy Policy" onPress={() => {}} />
+          <SettingItem icon="help-circle" title="Help & Support" onPress={() => {}} />
+        </SettingSection>
+
+        {/* Sign Out */}
+        <TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
+          <Ionicons name="log-out-outline" size={20} color="#EF4444" />
+          <Text style={styles.signOutText}>Sign Out</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1F2937',
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 80,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6B7280',
+    marginBottom: 12,
+    paddingHorizontal: 4,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  settingItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  settingItemLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#FEE2E2',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  settingItemContent: {
+    flex: 1,
+  },
+  settingItemTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 2,
+  },
+  settingItemSubtitle: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  signOutButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FEE2E2',
+    padding: 16,
+    borderRadius: 12,
+    marginTop: 8,
+  },
+  signOutText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#EF4444',
+    marginLeft: 8,
+  },
+});