Fix Dashboard navigation and AppsScreen form

- DashboardScreen: Add Connect Wallet button near Finance section
- DashboardScreen: Replace all alert popups with proper navigation
- AppsScreen: Use real connectWallet from PezkuwiContext
- AppsScreen: Add missing form fields (phone, domain, github)
- AppsScreen: Show Connected badge when wallet connected
This commit is contained in:
2026-01-17 02:21:43 +03:00
parent 6ef9def7ea
commit 0975458cf0
2 changed files with 133 additions and 20 deletions
+86 -7
View File
@@ -14,6 +14,7 @@ import {
} from 'react-native'; } from 'react-native';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors'; import { KurdistanColors } from '../theme/colors';
import { usePezkuwi } from '../contexts/PezkuwiContext';
type CategoryType = 'All' | 'Finance' | 'Governance' | 'Social' | 'Education' | 'Health' | 'Entertainment' | 'Tools' | 'Gaming'; type CategoryType = 'All' | 'Finance' | 'Governance' | 'Social' | 'Education' | 'Health' | 'Entertainment' | 'Tools' | 'Gaming';
@@ -71,6 +72,9 @@ const CATEGORIES: { name: CategoryType; icon: string }[] = [
const AppsScreen: React.FC = () => { const AppsScreen: React.FC = () => {
const navigation = useNavigation<any>(); const navigation = useNavigation<any>();
const { selectedAccount, connectWallet } = usePezkuwi();
const isConnected = !!selectedAccount;
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<CategoryType>('All'); const [selectedCategory, setSelectedCategory] = useState<CategoryType>('All');
const [showSubmitModal, setShowSubmitModal] = useState(false); const [showSubmitModal, setShowSubmitModal] = useState(false);
@@ -78,6 +82,9 @@ const AppsScreen: React.FC = () => {
const [appDescription, setAppDescription] = useState(''); const [appDescription, setAppDescription] = useState('');
const [contactEmail, setContactEmail] = useState(''); const [contactEmail, setContactEmail] = useState('');
const [contactName, setContactName] = useState(''); const [contactName, setContactName] = useState('');
const [contactPhone, setContactPhone] = useState('');
const [projectDomain, setProjectDomain] = useState('');
const [githubRepo, setGithubRepo] = useState('');
const filteredApps = FEATURED_APPS.filter(app => { const filteredApps = FEATURED_APPS.filter(app => {
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) || const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -86,13 +93,19 @@ const AppsScreen: React.FC = () => {
return matchesSearch && matchesCategory; return matchesSearch && matchesCategory;
}); });
const handleConnectWallet = () => { const handleConnectWallet = async () => {
navigation.navigate('Wallet'); try {
await connectWallet();
Alert.alert('Connected', 'Your wallet has been connected successfully!');
} catch (error) {
if (__DEV__) console.error('Wallet connection error:', error);
Alert.alert('Error', 'Failed to connect wallet. Please try again.');
}
}; };
const handleSubmitApp = () => { const handleSubmitApp = () => {
if (!appName.trim() || !appDescription.trim() || !contactEmail.trim() || !contactName.trim()) { if (!appName.trim() || !appDescription.trim() || !contactEmail.trim() || !contactName.trim() || !contactPhone.trim()) {
Alert.alert('Missing Information', 'Please fill in all fields to submit your mini app.'); Alert.alert('Missing Information', 'Please fill in all required fields to submit your mini app.');
return; return;
} }
@@ -101,6 +114,9 @@ const AppsScreen: React.FC = () => {
setAppDescription(''); setAppDescription('');
setContactEmail(''); setContactEmail('');
setContactName(''); setContactName('');
setContactPhone('');
setProjectDomain('');
setGithubRepo('');
Alert.alert( Alert.alert(
'Application Submitted ✅', 'Application Submitted ✅',
@@ -146,9 +162,16 @@ const AppsScreen: React.FC = () => {
<Text style={styles.headerTitle}>MiniApps Store</Text> <Text style={styles.headerTitle}>MiniApps Store</Text>
<Text style={styles.headerSubtitle}>Discover & Build on Pezkuwichain</Text> <Text style={styles.headerSubtitle}>Discover & Build on Pezkuwichain</Text>
</View> </View>
<TouchableOpacity style={styles.connectButton} onPress={handleConnectWallet}> {!isConnected ? (
<Text style={styles.connectButtonText}>Connect</Text> <TouchableOpacity style={styles.connectButton} onPress={handleConnectWallet}>
</TouchableOpacity> <Text style={styles.connectButtonText}>Connect</Text>
</TouchableOpacity>
) : (
<View style={styles.connectedBadge}>
<Text style={styles.connectedIcon}></Text>
<Text style={styles.connectedText}>Connected</Text>
</View>
)}
</View> </View>
</View> </View>
@@ -313,6 +336,44 @@ const AppsScreen: React.FC = () => {
/> />
</View> </View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>Contact Phone Number *</Text>
<TextInput
style={styles.input}
placeholder="+90 5XX XXX XX XX"
value={contactPhone}
onChangeText={setContactPhone}
keyboardType="phone-pad"
placeholderTextColor="#999"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>Project Domain (optional)</Text>
<TextInput
style={styles.input}
placeholder="https://yourproject.com"
value={projectDomain}
onChangeText={setProjectDomain}
keyboardType="url"
autoCapitalize="none"
placeholderTextColor="#999"
/>
</View>
<View style={styles.inputGroup}>
<Text style={styles.inputLabel}>GitHub Repository (optional)</Text>
<TextInput
style={styles.input}
placeholder="https://github.com/username/repo"
value={githubRepo}
onChangeText={setGithubRepo}
keyboardType="url"
autoCapitalize="none"
placeholderTextColor="#999"
/>
</View>
<View style={styles.infoBox}> <View style={styles.infoBox}>
<Text style={styles.infoIcon}>📧</Text> <Text style={styles.infoIcon}>📧</Text>
<View style={styles.infoTextContainer}> <View style={styles.infoTextContainer}>
@@ -382,6 +443,24 @@ const styles = StyleSheet.create({
fontSize: 13, fontSize: 13,
fontWeight: '600', fontWeight: '600',
}, },
connectedBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#E8F5E9',
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 20,
gap: 4,
},
connectedIcon: {
fontSize: 12,
color: KurdistanColors.kesk,
},
connectedText: {
fontSize: 12,
fontWeight: '600',
color: KurdistanColors.kesk,
},
searchContainer: { searchContainer: {
paddingHorizontal: 20, paddingHorizontal: 20,
marginBottom: 12, marginBottom: 12,
+47 -13
View File
@@ -457,7 +457,19 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
{/* 1. FINANCE SECTION */} {/* 1. FINANCE SECTION */}
<View style={styles.sectionContainer}> <View style={styles.sectionContainer}>
<View style={[styles.sectionHeader, { borderLeftColor: KurdistanColors.kesk }]}> <View style={[styles.sectionHeader, { borderLeftColor: KurdistanColors.kesk }]}>
<Text style={styles.sectionTitle}>FINANCE 💰</Text> <View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>FINANCE 💰</Text>
{/* Connect Wallet Button */}
{!selectedAccount && (
<TouchableOpacity
style={styles.connectWalletBadge}
onPress={() => navigation.navigate('Wallet')}
>
<Text style={styles.connectWalletIcon}>👛</Text>
<Text style={styles.connectWalletText}>Connect</Text>
</TouchableOpacity>
)}
</View>
<TouchableOpacity onPress={() => navigation.navigate('Apps')}> <TouchableOpacity onPress={() => navigation.navigate('Apps')}>
<Text style={styles.seeAllText}>Hemû / All</Text> <Text style={styles.seeAllText}>Hemû / All</Text>
</TouchableOpacity> </TouchableOpacity>
@@ -466,7 +478,7 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
{/* Wallet - Navigate to WalletScreen */} {/* Wallet - Navigate to WalletScreen */}
{renderAppIcon('Wallet', '👛', () => navigation.navigate('Wallet'), true)} {renderAppIcon('Wallet', '👛', () => navigation.navigate('Wallet'), true)}
{renderAppIcon('Bank', qaBank, () => showAwaitingGovernment(), false, true)} {renderAppIcon('Bank', qaBank, () => navigation.navigate('Bank'), false, true)}
{renderAppIcon('Exchange', qaExchange, () => navigation.navigate('Swap'), false)} {renderAppIcon('Exchange', qaExchange, () => navigation.navigate('Swap'), false)}
{renderAppIcon('P2P', qaTrading, () => navigation.navigate('P2P'), false)} {renderAppIcon('P2P', qaTrading, () => navigation.navigate('P2P'), false)}
{renderAppIcon('B2B', qaB2B, () => navigation.navigate('B2B'), false, true)} {renderAppIcon('B2B', qaB2B, () => navigation.navigate('B2B'), false, true)}
@@ -482,12 +494,12 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
</View> </View>
<View style={styles.appsGrid}> <View style={styles.appsGrid}>
{renderAppIcon('President', '👑', () => navigation.navigate('President'), true)} {renderAppIcon('President', '👑', () => navigation.navigate('President'), true)}
{renderAppIcon('Assembly', qaGovernance, () => showUnderMaintenance(), false, true)} {renderAppIcon('Assembly', qaGovernance, () => navigation.navigate('Assembly'), false, true)}
{renderAppIcon('Vote', '🗳️', () => navigation.navigate('Vote'), true)} {renderAppIcon('Vote', '🗳️', () => navigation.navigate('Vote'), true)}
{renderAppIcon('Validators', '🛡️', () => navigation.navigate('Validators'), true)} {renderAppIcon('Validators', '🛡️', () => navigation.navigate('Validators'), true)}
{renderAppIcon('Justice', '⚖️', () => showAwaitingSerokElection(), true, true)} {renderAppIcon('Justice', '⚖️', () => navigation.navigate('Justice'), true, true)}
{renderAppIcon('Proposals', '📜', () => navigation.navigate('Proposals'), true)} {renderAppIcon('Proposals', '📜', () => navigation.navigate('Proposals'), true)}
{renderAppIcon('Polls', '📊', () => showComingSoon('Public Polls'), true, true)} {renderAppIcon('Polls', '📊', () => navigation.navigate('Polls'), true, true)}
{renderAppIcon('Identity', '🆔', () => navigation.navigate('Identity'), true)} {renderAppIcon('Identity', '🆔', () => navigation.navigate('Identity'), true)}
</View> </View>
</View> </View>
@@ -498,13 +510,13 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
<Text style={styles.sectionTitle}>SOCIAL 💬</Text> <Text style={styles.sectionTitle}>SOCIAL 💬</Text>
</View> </View>
<View style={styles.appsGrid}> <View style={styles.appsGrid}>
{renderAppIcon('whatsKURD', '💬', () => showComingSoon('whatsKURD'), true, true)} {renderAppIcon('whatsKURD', '💬', () => navigation.navigate('WhatsKURD'), true, true)}
{renderAppIcon('Forum', qaForum, () => navigation.navigate('Forum'), false)} {renderAppIcon('Forum', qaForum, () => navigation.navigate('Forum'), false)}
{renderAppIcon('KurdMedia', qaKurdMedia, () => navigation.navigate('KurdMedia'), false)} {renderAppIcon('KurdMedia', qaKurdMedia, () => navigation.navigate('KurdMedia'), false)}
{renderAppIcon('Events', '🎭', () => showComingSoon('Çalakî / Events'), true, true)} {renderAppIcon('Events', '🎭', () => navigation.navigate('Events'), true, true)}
{renderAppIcon('Help', '🤝', () => showComingSoon('Harîkarî / Help'), true, true)} {renderAppIcon('Help', '🤝', () => navigation.navigate('Help'), true, true)}
{renderAppIcon('Music', '🎵', () => showComingSoon('Music Stream'), true, true)} {renderAppIcon('Music', '🎵', () => navigation.navigate('Music'), true, true)}
{renderAppIcon('VPN', '🛡️', () => showComingSoon('Decentralized VPN'), true, true)} {renderAppIcon('VPN', '🛡️', () => navigation.navigate('VPN'), true, true)}
{renderAppIcon('Referral', '👥', () => navigation.navigate('Referral'), true)} {renderAppIcon('Referral', '👥', () => navigation.navigate('Referral'), true)}
</View> </View>
</View> </View>
@@ -515,10 +527,10 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
<Text style={styles.sectionTitle}>EDUCATION 📚</Text> <Text style={styles.sectionTitle}>EDUCATION 📚</Text>
</View> </View>
<View style={styles.appsGrid}> <View style={styles.appsGrid}>
{renderAppIcon('University', qaUniversity, () => showAwaitingMinistryOfEducation(), false, true)} {renderAppIcon('University', qaUniversity, () => navigation.navigate('University'), false, true)}
{renderAppIcon('Perwerde', qaEducation, () => navigation.navigate('Perwerde'), false)} {renderAppIcon('Perwerde', qaEducation, () => navigation.navigate('Perwerde'), false)}
{renderAppIcon('Certificates', '🏆', () => showAwaitingMinistryOfEducation(), true, true)} {renderAppIcon('Certificates', '🏆', () => navigation.navigate('Certificates'), true, true)}
{renderAppIcon('Research', '🔬', () => showAwaitingMinistryOfEducation(), true, true)} {renderAppIcon('Research', '🔬', () => navigation.navigate('Research'), true, true)}
</View> </View>
</View> </View>
@@ -668,12 +680,34 @@ const styles = StyleSheet.create({
borderLeftWidth: 4, borderLeftWidth: 4,
paddingLeft: 10, paddingLeft: 10,
}, },
sectionTitleRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
},
sectionTitle: { sectionTitle: {
fontSize: 16, fontSize: 16,
fontWeight: '800', fontWeight: '800',
color: KurdistanColors.reş, color: KurdistanColors.reş,
letterSpacing: 0.5, letterSpacing: 0.5,
}, },
connectWalletBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: KurdistanColors.kesk,
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 12,
gap: 4,
},
connectWalletIcon: {
fontSize: 14,
},
connectWalletText: {
fontSize: 11,
fontWeight: '600',
color: KurdistanColors.spi,
},
seeAllText: { seeAllText: {
fontSize: 12, fontSize: 12,
color: KurdistanColors.kesk, color: KurdistanColors.kesk,