mirror of
https://github.com/pezkuwichain/pezkuwi-mobile-app.git
synced 2026-06-14 17:01:04 +00:00
auto-commit for 41105da3-9f0d-4402-a0a9-c2549b25098b
This commit is contained in:
emergent-agent-e1
@@ -0,0 +1,173 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
const LANGUAGES = [
|
||||||
|
{ code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
|
||||||
|
{ code: 'ku-sorani', name: 'Kurdish Sorani', nativeName: 'کوردی سۆرانی', flag: '🟥' },
|
||||||
|
{ code: 'ku-kurmanji', name: 'Kurdish Kurmanji', nativeName: 'Kurdî Kurmancî', flag: '🟨' },
|
||||||
|
{ code: 'ar', name: 'Arabic', nativeName: 'العربية', flag: '🇸🇦' },
|
||||||
|
{ code: 'tr', name: 'Turkish', nativeName: 'Türkçe', flag: '🇹🇷' },
|
||||||
|
{ code: 'fa', name: 'Persian', nativeName: 'فارسی', flag: '🇮🇷' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function LanguageSettingsScreen({ navigation }: any) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const [selectedLanguage, setSelectedLanguage] = useState('en');
|
||||||
|
|
||||||
|
const handleLanguageChange = (languageCode: string) => {
|
||||||
|
setSelectedLanguage(languageCode);
|
||||||
|
// TODO: Save to backend and apply i18n
|
||||||
|
Alert.alert(
|
||||||
|
'Language Changed',
|
||||||
|
'Language preference has been saved. Full translation will be available in the next update.',
|
||||||
|
[
|
||||||
|
{
|
||||||
|
text: 'OK',
|
||||||
|
onPress: () => navigation.goBack(),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
|
||||||
|
<Ionicons name="arrow-back" size={24} color="#1F2937" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Language</Text>
|
||||||
|
<View style={{ width: 40 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||||
|
<View style={styles.infoBox}>
|
||||||
|
<Ionicons name="globe-outline" size={20} color="#3B82F6" />
|
||||||
|
<Text style={styles.infoText}>
|
||||||
|
6 languages fully supported. Other languages use Google Translator.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{LANGUAGES.map((language) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={language.code}
|
||||||
|
style={[
|
||||||
|
styles.languageCard,
|
||||||
|
selectedLanguage === language.code && styles.languageCardSelected,
|
||||||
|
]}
|
||||||
|
onPress={() => handleLanguageChange(language.code)}
|
||||||
|
>
|
||||||
|
<View style={styles.languageCardLeft}>
|
||||||
|
<Text style={styles.flag}>{language.flag}</Text>
|
||||||
|
<View style={styles.languageInfo}>
|
||||||
|
<Text style={styles.languageName}>{language.name}</Text>
|
||||||
|
<Text style={styles.languageNative}>{language.nativeName}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{selectedLanguage === language.code && (
|
||||||
|
<Ionicons name="checkmark-circle" size={24} color="#EE2A35" />
|
||||||
|
)}
|
||||||
|
</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,
|
||||||
|
},
|
||||||
|
infoBox: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#DBEAFE',
|
||||||
|
padding: 12,
|
||||||
|
borderRadius: 8,
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
infoText: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#1E40AF',
|
||||||
|
marginLeft: 8,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
languageCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
marginBottom: 12,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: '#E5E7EB',
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.05,
|
||||||
|
shadowRadius: 4,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
languageCardSelected: {
|
||||||
|
borderColor: '#EE2A35',
|
||||||
|
backgroundColor: '#FEE2E2',
|
||||||
|
},
|
||||||
|
languageCardLeft: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
flag: {
|
||||||
|
fontSize: 32,
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
languageInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
languageName: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#1F2937',
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
languageNative: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#6B7280',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,286 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
TextInput,
|
||||||
|
ScrollView,
|
||||||
|
Alert,
|
||||||
|
ActivityIndicator,
|
||||||
|
Clipboard,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
import { API_ENDPOINTS } from '../config/api';
|
||||||
|
|
||||||
|
export default function WalletAddressScreen({ navigation }: any) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const { user } = useAuth();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [walletAddress, setWalletAddress] = useState('');
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadWalletAddress();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadWalletAddress = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_ENDPOINTS.AUTH_USER(user?.user_id || '')}`);
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setWalletAddress(data.wallet_address || '');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading wallet address:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!walletAddress.trim()) {
|
||||||
|
Alert.alert('Error', 'Wallet address cannot be empty');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const backendUrl = process.env.EXPO_PUBLIC_BACKEND_URL || 'http://localhost:8001';
|
||||||
|
const response = await fetch(`${backendUrl}/api/auth/profile`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
user_id: user?.user_id,
|
||||||
|
wallet_address: walletAddress,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
Alert.alert('Success', 'Wallet address updated successfully!');
|
||||||
|
setIsEditing(false);
|
||||||
|
} else {
|
||||||
|
Alert.alert('Error', 'Failed to update wallet address');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
Alert.alert('Error', 'Network error occurred');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyToClipboard = () => {
|
||||||
|
Clipboard.setString(walletAddress);
|
||||||
|
Alert.alert('Copied', 'Wallet address copied to clipboard');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
|
||||||
|
<Ionicons name="arrow-back" size={24} color="#1F2937" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Wallet Address</Text>
|
||||||
|
<View style={{ width: 40 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||||
|
<View style={styles.infoBox}>
|
||||||
|
<Ionicons name="information-circle" size={20} color="#3B82F6" />
|
||||||
|
<Text style={styles.infoText}>
|
||||||
|
Your wallet address is used to receive HEZ and PEZ tokens. Make sure it's correct.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.label}>Wallet Address</Text>
|
||||||
|
{isEditing ? (
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={walletAddress}
|
||||||
|
onChangeText={setWalletAddress}
|
||||||
|
placeholder="Enter wallet address"
|
||||||
|
autoCapitalize="none"
|
||||||
|
multiline
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<View style={styles.addressContainer}>
|
||||||
|
<Text style={styles.addressText} numberOfLines={3}>
|
||||||
|
{walletAddress || 'No wallet address set'}
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity onPress={copyToClipboard} style={styles.copyButton}>
|
||||||
|
<Ionicons name="copy-outline" size={20} color="#EE2A35" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<View style={styles.buttonRow}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.button, styles.cancelButton]}
|
||||||
|
onPress={() => {
|
||||||
|
setIsEditing(false);
|
||||||
|
loadWalletAddress();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={styles.cancelButtonText}>Cancel</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.button, styles.saveButton, loading && styles.saveButtonDisabled]}
|
||||||
|
onPress={handleSave}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<ActivityIndicator color="#FFF" />
|
||||||
|
) : (
|
||||||
|
<Text style={styles.saveButtonText}>Save</Text>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.editButton}
|
||||||
|
onPress={() => setIsEditing(true)}
|
||||||
|
>
|
||||||
|
<Ionicons name="create-outline" size={20} color="#FFF" />
|
||||||
|
<Text style={styles.editButtonText}>Edit Wallet Address</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,
|
||||||
|
},
|
||||||
|
infoBox: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#DBEAFE',
|
||||||
|
padding: 12,
|
||||||
|
borderRadius: 8,
|
||||||
|
marginBottom: 24,
|
||||||
|
},
|
||||||
|
infoText: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#1E40AF',
|
||||||
|
marginLeft: 8,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#374151',
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
fontSize: 14,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#E5E7EB',
|
||||||
|
minHeight: 80,
|
||||||
|
textAlignVertical: 'top',
|
||||||
|
},
|
||||||
|
addressContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#E5E7EB',
|
||||||
|
},
|
||||||
|
addressText: {
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#374151',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
},
|
||||||
|
copyButton: {
|
||||||
|
padding: 8,
|
||||||
|
marginLeft: 8,
|
||||||
|
},
|
||||||
|
buttonRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: 12,
|
||||||
|
marginTop: 24,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
flex: 1,
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
cancelButton: {
|
||||||
|
backgroundColor: '#F3F4F6',
|
||||||
|
},
|
||||||
|
cancelButtonText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#6B7280',
|
||||||
|
},
|
||||||
|
saveButton: {
|
||||||
|
backgroundColor: '#EE2A35',
|
||||||
|
},
|
||||||
|
saveButtonDisabled: {
|
||||||
|
opacity: 0.6,
|
||||||
|
},
|
||||||
|
saveButtonText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#FFF',
|
||||||
|
},
|
||||||
|
editButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: '#EE2A35',
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
marginTop: 24,
|
||||||
|
},
|
||||||
|
editButtonText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#FFF',
|
||||||
|
marginLeft: 8,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user