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 6065ff5515
commit 0f29a3309d
2 changed files with 133 additions and 20 deletions
+86 -7
View File
@@ -14,6 +14,7 @@ import {
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { KurdistanColors } from '../theme/colors';
import { usePezkuwi } from '../contexts/PezkuwiContext';
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 navigation = useNavigation<any>();
const { selectedAccount, connectWallet } = usePezkuwi();
const isConnected = !!selectedAccount;
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<CategoryType>('All');
const [showSubmitModal, setShowSubmitModal] = useState(false);
@@ -78,6 +82,9 @@ const AppsScreen: React.FC = () => {
const [appDescription, setAppDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactName, setContactName] = useState('');
const [contactPhone, setContactPhone] = useState('');
const [projectDomain, setProjectDomain] = useState('');
const [githubRepo, setGithubRepo] = useState('');
const filteredApps = FEATURED_APPS.filter(app => {
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -86,13 +93,19 @@ const AppsScreen: React.FC = () => {
return matchesSearch && matchesCategory;
});
const handleConnectWallet = () => {
navigation.navigate('Wallet');
const handleConnectWallet = async () => {
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 = () => {
if (!appName.trim() || !appDescription.trim() || !contactEmail.trim() || !contactName.trim()) {
Alert.alert('Missing Information', 'Please fill in all fields to submit your mini app.');
if (!appName.trim() || !appDescription.trim() || !contactEmail.trim() || !contactName.trim() || !contactPhone.trim()) {
Alert.alert('Missing Information', 'Please fill in all required fields to submit your mini app.');
return;
}
@@ -101,6 +114,9 @@ const AppsScreen: React.FC = () => {
setAppDescription('');
setContactEmail('');
setContactName('');
setContactPhone('');
setProjectDomain('');
setGithubRepo('');
Alert.alert(
'Application Submitted ✅',
@@ -146,9 +162,16 @@ const AppsScreen: React.FC = () => {
<Text style={styles.headerTitle}>MiniApps Store</Text>
<Text style={styles.headerSubtitle}>Discover & Build on Pezkuwichain</Text>
</View>
<TouchableOpacity style={styles.connectButton} onPress={handleConnectWallet}>
<Text style={styles.connectButtonText}>Connect</Text>
</TouchableOpacity>
{!isConnected ? (
<TouchableOpacity style={styles.connectButton} onPress={handleConnectWallet}>
<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>
@@ -313,6 +336,44 @@ const AppsScreen: React.FC = () => {
/>
</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}>
<Text style={styles.infoIcon}>📧</Text>
<View style={styles.infoTextContainer}>
@@ -382,6 +443,24 @@ const styles = StyleSheet.create({
fontSize: 13,
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: {
paddingHorizontal: 20,
marginBottom: 12,
+47 -13
View File
@@ -457,7 +457,19 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
{/* 1. FINANCE SECTION */}
<View style={styles.sectionContainer}>
<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')}>
<Text style={styles.seeAllText}>Hemû / All</Text>
</TouchableOpacity>
@@ -466,7 +478,7 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
{/* Wallet - Navigate to WalletScreen */}
{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('P2P', qaTrading, () => navigation.navigate('P2P'), false)}
{renderAppIcon('B2B', qaB2B, () => navigation.navigate('B2B'), false, true)}
@@ -482,12 +494,12 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
</View>
<View style={styles.appsGrid}>
{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('Validators', '🛡️', () => navigation.navigate('Validators'), true)}
{renderAppIcon('Justice', '⚖️', () => showAwaitingSerokElection(), true, true)}
{renderAppIcon('Justice', '⚖️', () => navigation.navigate('Justice'), true, 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)}
</View>
</View>
@@ -498,13 +510,13 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
<Text style={styles.sectionTitle}>SOCIAL 💬</Text>
</View>
<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('KurdMedia', qaKurdMedia, () => navigation.navigate('KurdMedia'), false)}
{renderAppIcon('Events', '🎭', () => showComingSoon('Çalakî / Events'), true, true)}
{renderAppIcon('Help', '🤝', () => showComingSoon('Harîkarî / Help'), true, true)}
{renderAppIcon('Music', '🎵', () => showComingSoon('Music Stream'), true, true)}
{renderAppIcon('VPN', '🛡️', () => showComingSoon('Decentralized VPN'), true, true)}
{renderAppIcon('Events', '🎭', () => navigation.navigate('Events'), true, true)}
{renderAppIcon('Help', '🤝', () => navigation.navigate('Help'), true, true)}
{renderAppIcon('Music', '🎵', () => navigation.navigate('Music'), true, true)}
{renderAppIcon('VPN', '🛡️', () => navigation.navigate('VPN'), true, true)}
{renderAppIcon('Referral', '👥', () => navigation.navigate('Referral'), true)}
</View>
</View>
@@ -515,10 +527,10 @@ const DashboardScreen: React.FC<DashboardScreenProps> = () => {
<Text style={styles.sectionTitle}>EDUCATION 📚</Text>
</View>
<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('Certificates', '🏆', () => showAwaitingMinistryOfEducation(), true, true)}
{renderAppIcon('Research', '🔬', () => showAwaitingMinistryOfEducation(), true, true)}
{renderAppIcon('Certificates', '🏆', () => navigation.navigate('Certificates'), true, true)}
{renderAppIcon('Research', '🔬', () => navigation.navigate('Research'), true, true)}
</View>
</View>
@@ -668,12 +680,34 @@ const styles = StyleSheet.create({
borderLeftWidth: 4,
paddingLeft: 10,
},
sectionTitleRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
},
sectionTitle: {
fontSize: 16,
fontWeight: '800',
color: KurdistanColors.reş,
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: {
fontSize: 12,
color: KurdistanColors.kesk,