mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-13 15:51:02 +00:00
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:
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user