mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-12 09:51:01 +00:00
Integrate Polkadot.js blockchain with mobile wallet (FAZ 1)
This commit implements the complete blockchain integration for the mobile app's wallet functionality: **Polkadot.js Integration:** - Created PolkadotContext for mobile with full blockchain connectivity - Implemented wallet creation with mnemonic seed phrases - Added secure key management with AsyncStorage - Connected to Pezkuwi testnet (wss://beta-rpc.pezkuwi.art) **WalletScreen Enhancements:** - Live blockchain balance fetching for HEZ (native token) - Live balance fetching for PEZ and wUSDT (assets) - Real-time balance updates every 30 seconds - Actual send transactions using api.tx.balances.transfer (HEZ) - Actual send transactions using api.tx.assets.transfer (PEZ, wUSDT) - Transaction signing with user's keypair - Loading states and error handling - Wallet creation flow for new users - Connect/disconnect wallet functionality **Bottom Navigation:** - Created BottomTabNavigator with 5 tabs - Added WalletScreen with live blockchain integration - Added BeCitizenScreen (citizenship application) - Added ReferralScreen (referral program) - Renamed SettingsScreen to ProfileScreen - Custom center button for "Be Citizen" feature **App Structure:** - Wrapped app with PolkadotProvider in App.tsx - Updated AppNavigator to use BottomTabNavigator - Integrated language selection flow with blockchain features All wallet features now use live blockchain data instead of mock data.
This commit is contained in:
Claude
@@ -0,0 +1,498 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
TextInput,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import AppColors, { KurdistanColors } from '../theme/colors';
|
||||
|
||||
const BeCitizenScreen: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [isExistingCitizen, setIsExistingCitizen] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState<'choice' | 'new' | 'existing'>('choice');
|
||||
|
||||
// New Citizen Form State
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [fatherName, setFatherName] = useState('');
|
||||
const [motherName, setMotherName] = useState('');
|
||||
const [tribe, setTribe] = useState('');
|
||||
const [region, setRegion] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [profession, setProfession] = useState('');
|
||||
const [referralCode, setReferralCode] = useState('');
|
||||
|
||||
// Existing Citizen Login State
|
||||
const [citizenId, setCitizenId] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleNewCitizenApplication = () => {
|
||||
if (!fullName || !fatherName || !motherName || !email) {
|
||||
Alert.alert('Error', 'Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Implement actual citizenship registration on blockchain
|
||||
Alert.alert(
|
||||
'Application Submitted',
|
||||
'Your citizenship application has been submitted for review. You will receive a confirmation soon.',
|
||||
[
|
||||
{
|
||||
text: 'OK',
|
||||
onPress: () => {
|
||||
// Reset form
|
||||
setFullName('');
|
||||
setFatherName('');
|
||||
setMotherName('');
|
||||
setTribe('');
|
||||
setRegion('');
|
||||
setEmail('');
|
||||
setProfession('');
|
||||
setReferralCode('');
|
||||
setCurrentStep('choice');
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleExistingCitizenLogin = () => {
|
||||
if (!citizenId || !password) {
|
||||
Alert.alert('Error', 'Please enter Citizen ID and Password');
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Implement actual citizenship verification
|
||||
Alert.alert('Success', 'Welcome back, Citizen!', [
|
||||
{
|
||||
text: 'OK',
|
||||
onPress: () => {
|
||||
setCitizenId('');
|
||||
setPassword('');
|
||||
setCurrentStep('choice');
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
if (currentStep === 'choice') {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<LinearGradient
|
||||
colors={[KurdistanColors.kesk, KurdistanColors.zer, KurdistanColors.sor]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.gradient}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Text style={styles.logoText}>🏛️</Text>
|
||||
</View>
|
||||
<Text style={styles.title}>Be a Citizen</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Join the Pezkuwi decentralized nation
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.choiceContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.choiceCard}
|
||||
onPress={() => setCurrentStep('new')}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.choiceIcon}>📝</Text>
|
||||
<Text style={styles.choiceTitle}>New Citizen</Text>
|
||||
<Text style={styles.choiceDescription}>
|
||||
Apply for citizenship and join our community
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.choiceCard}
|
||||
onPress={() => setCurrentStep('existing')}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.choiceIcon}>🔐</Text>
|
||||
<Text style={styles.choiceTitle}>Existing Citizen</Text>
|
||||
<Text style={styles.choiceDescription}>
|
||||
Access your citizenship account
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoSection}>
|
||||
<Text style={styles.infoTitle}>Citizenship Benefits</Text>
|
||||
<View style={styles.benefitItem}>
|
||||
<Text style={styles.benefitIcon}>✓</Text>
|
||||
<Text style={styles.benefitText}>Voting rights in governance</Text>
|
||||
</View>
|
||||
<View style={styles.benefitItem}>
|
||||
<Text style={styles.benefitIcon}>✓</Text>
|
||||
<Text style={styles.benefitText}>Access to exclusive services</Text>
|
||||
</View>
|
||||
<View style={styles.benefitItem}>
|
||||
<Text style={styles.benefitIcon}>✓</Text>
|
||||
<Text style={styles.benefitText}>Referral rewards program</Text>
|
||||
</View>
|
||||
<View style={styles.benefitItem}>
|
||||
<Text style={styles.benefitIcon}>✓</Text>
|
||||
<Text style={styles.benefitText}>Community recognition</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</LinearGradient>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStep === 'new') {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
<ScrollView style={styles.formContainer} showsVerticalScrollIndicator={false}>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => setCurrentStep('choice')}
|
||||
>
|
||||
<Text style={styles.backButtonText}>← Back</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.formTitle}>New Citizen Application</Text>
|
||||
<Text style={styles.formSubtitle}>
|
||||
Please provide your information to apply for citizenship
|
||||
</Text>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Full Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your full name"
|
||||
value={fullName}
|
||||
onChangeText={setFullName}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Father's Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter father's name"
|
||||
value={fatherName}
|
||||
onChangeText={setFatherName}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Mother's Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter mother's name"
|
||||
value={motherName}
|
||||
onChangeText={setMotherName}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Tribe</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter tribe (optional)"
|
||||
value={tribe}
|
||||
onChangeText={setTribe}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Region</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter region (optional)"
|
||||
value={region}
|
||||
onChangeText={setRegion}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Email *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter email address"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Profession</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter profession (optional)"
|
||||
value={profession}
|
||||
onChangeText={setProfession}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Referral Code</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter referral code (optional)"
|
||||
value={referralCode}
|
||||
onChangeText={setReferralCode}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.submitButton}
|
||||
onPress={handleNewCitizenApplication}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.submitButtonText}>Submit Application</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.spacer} />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
// Existing Citizen Login
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
<ScrollView style={styles.formContainer} showsVerticalScrollIndicator={false}>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => setCurrentStep('choice')}
|
||||
>
|
||||
<Text style={styles.backButtonText}>← Back</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.formTitle}>Citizen Login</Text>
|
||||
<Text style={styles.formSubtitle}>
|
||||
Access your citizenship account
|
||||
</Text>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Citizen ID</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your Citizen ID"
|
||||
value={citizenId}
|
||||
onChangeText={setCitizenId}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Password</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.submitButton}
|
||||
onPress={handleExistingCitizenLogin}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.submitButtonText}>Login</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F5F5F5',
|
||||
},
|
||||
gradient: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
padding: 20,
|
||||
paddingTop: 60,
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
logoContainer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 50,
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
logoText: {
|
||||
fontSize: 48,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: KurdistanColors.spi,
|
||||
textAlign: 'center',
|
||||
opacity: 0.9,
|
||||
},
|
||||
choiceContainer: {
|
||||
gap: 16,
|
||||
marginBottom: 40,
|
||||
},
|
||||
choiceCard: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 20,
|
||||
padding: 24,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
choiceIcon: {
|
||||
fontSize: 48,
|
||||
marginBottom: 16,
|
||||
},
|
||||
choiceTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.kesk,
|
||||
marginBottom: 8,
|
||||
},
|
||||
choiceDescription: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
},
|
||||
infoSection: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
},
|
||||
infoTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 16,
|
||||
},
|
||||
benefitItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
benefitIcon: {
|
||||
fontSize: 16,
|
||||
color: KurdistanColors.spi,
|
||||
marginRight: 12,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
benefitText: {
|
||||
fontSize: 14,
|
||||
color: KurdistanColors.spi,
|
||||
flex: 1,
|
||||
},
|
||||
formContainer: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
backButton: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
backButtonText: {
|
||||
fontSize: 16,
|
||||
color: KurdistanColors.kesk,
|
||||
fontWeight: '600',
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 8,
|
||||
},
|
||||
formSubtitle: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 24,
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E0E0',
|
||||
},
|
||||
submitButton: {
|
||||
backgroundColor: KurdistanColors.kesk,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginTop: 20,
|
||||
shadowColor: KurdistanColors.kesk,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
elevation: 6,
|
||||
},
|
||||
submitButtonText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
},
|
||||
spacer: {
|
||||
height: 40,
|
||||
},
|
||||
});
|
||||
|
||||
export default BeCitizenScreen;
|
||||
@@ -0,0 +1,531 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
Share,
|
||||
Alert,
|
||||
Clipboard,
|
||||
} from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import AppColors, { KurdistanColors } from '../theme/colors';
|
||||
|
||||
interface ReferralStats {
|
||||
totalReferrals: number;
|
||||
activeReferrals: number;
|
||||
totalEarned: string;
|
||||
pendingRewards: string;
|
||||
}
|
||||
|
||||
interface Referral {
|
||||
id: string;
|
||||
address: string;
|
||||
joinedDate: string;
|
||||
status: 'active' | 'pending';
|
||||
earned: string;
|
||||
}
|
||||
|
||||
const ReferralScreen: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
// Mock referral code - will be generated from blockchain
|
||||
const referralCode = 'PZK-XYZABC123';
|
||||
|
||||
// Mock stats - will be fetched from pallet_referral
|
||||
const stats: ReferralStats = {
|
||||
totalReferrals: 0,
|
||||
activeReferrals: 0,
|
||||
totalEarned: '0.00 HEZ',
|
||||
pendingRewards: '0.00 HEZ',
|
||||
};
|
||||
|
||||
// Mock referrals - will be fetched from blockchain
|
||||
const referrals: Referral[] = [];
|
||||
|
||||
const handleConnectWallet = () => {
|
||||
// TODO: Implement Polkadot.js wallet connection
|
||||
setIsConnected(true);
|
||||
Alert.alert('Connected', 'Your wallet has been connected to the referral system!');
|
||||
};
|
||||
|
||||
const handleCopyCode = () => {
|
||||
Clipboard.setString(referralCode);
|
||||
Alert.alert('Copied!', 'Referral code copied to clipboard');
|
||||
};
|
||||
|
||||
const handleShareCode = async () => {
|
||||
try {
|
||||
const result = await Share.share({
|
||||
message: `Join Pezkuwi using my referral code: ${referralCode}\n\nGet rewards for becoming a citizen!`,
|
||||
title: 'Join Pezkuwi',
|
||||
});
|
||||
|
||||
if (result.action === Share.sharedAction) {
|
||||
console.log('Shared successfully');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sharing:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<LinearGradient
|
||||
colors={[KurdistanColors.sor, KurdistanColors.zer]}
|
||||
style={styles.connectGradient}
|
||||
>
|
||||
<View style={styles.connectContainer}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Text style={styles.logoText}>🤝</Text>
|
||||
</View>
|
||||
<Text style={styles.connectTitle}>Referral Program</Text>
|
||||
<Text style={styles.connectSubtitle}>
|
||||
Connect your wallet to access your referral dashboard
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.connectButton}
|
||||
onPress={handleConnectWallet}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.connectButtonText}>Connect Wallet</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
|
||||
{/* Header */}
|
||||
<LinearGradient
|
||||
colors={[KurdistanColors.sor, KurdistanColors.zer]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.header}
|
||||
>
|
||||
<Text style={styles.headerTitle}>Referral Program</Text>
|
||||
<Text style={styles.headerSubtitle}>Earn rewards by inviting friends</Text>
|
||||
</LinearGradient>
|
||||
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
{/* Referral Code Card */}
|
||||
<View style={styles.codeCard}>
|
||||
<Text style={styles.codeLabel}>Your Referral Code</Text>
|
||||
<View style={styles.codeContainer}>
|
||||
<Text style={styles.codeText}>{referralCode}</Text>
|
||||
</View>
|
||||
<View style={styles.codeActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.codeButton, styles.copyButton]}
|
||||
onPress={handleCopyCode}
|
||||
>
|
||||
<Text style={styles.codeButtonIcon}>📋</Text>
|
||||
<Text style={styles.codeButtonText}>Copy</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.codeButton, styles.shareButton]}
|
||||
onPress={handleShareCode}
|
||||
>
|
||||
<Text style={styles.codeButtonIcon}>📤</Text>
|
||||
<Text style={styles.codeButtonText}>Share</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<View style={styles.statsGrid}>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{stats.totalReferrals}</Text>
|
||||
<Text style={styles.statLabel}>Total Referrals</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{stats.activeReferrals}</Text>
|
||||
<Text style={styles.statLabel}>Active</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.statsGrid}>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{stats.totalEarned}</Text>
|
||||
<Text style={styles.statLabel}>Total Earned</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{stats.pendingRewards}</Text>
|
||||
<Text style={styles.statLabel}>Pending</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* How It Works */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>How It Works</Text>
|
||||
<View style={styles.stepCard}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>1</Text>
|
||||
</View>
|
||||
<View style={styles.stepContent}>
|
||||
<Text style={styles.stepTitle}>Share Your Code</Text>
|
||||
<Text style={styles.stepDescription}>
|
||||
Share your unique referral code with friends
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.stepCard}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>2</Text>
|
||||
</View>
|
||||
<View style={styles.stepContent}>
|
||||
<Text style={styles.stepTitle}>Friend Joins</Text>
|
||||
<Text style={styles.stepDescription}>
|
||||
They use your code when applying for citizenship
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.stepCard}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>3</Text>
|
||||
</View>
|
||||
<View style={styles.stepContent}>
|
||||
<Text style={styles.stepTitle}>Earn Rewards</Text>
|
||||
<Text style={styles.stepDescription}>
|
||||
Get HEZ tokens when they become active citizens
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Referrals List */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Your Referrals</Text>
|
||||
{referrals.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyStateIcon}>👥</Text>
|
||||
<Text style={styles.emptyStateText}>No referrals yet</Text>
|
||||
<Text style={styles.emptyStateSubtext}>
|
||||
Start inviting friends to earn rewards!
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
referrals.map((referral) => (
|
||||
<View key={referral.id} style={styles.referralCard}>
|
||||
<View style={styles.referralInfo}>
|
||||
<Text style={styles.referralAddress}>
|
||||
{referral.address.substring(0, 8)}...
|
||||
{referral.address.substring(referral.address.length - 6)}
|
||||
</Text>
|
||||
<Text style={styles.referralDate}>{referral.joinedDate}</Text>
|
||||
</View>
|
||||
<View style={styles.referralStats}>
|
||||
<Text
|
||||
style={[
|
||||
styles.referralStatus,
|
||||
referral.status === 'active'
|
||||
? styles.statusActive
|
||||
: styles.statusPending,
|
||||
]}
|
||||
>
|
||||
{referral.status}
|
||||
</Text>
|
||||
<Text style={styles.referralEarned}>{referral.earned}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F5F5F5',
|
||||
},
|
||||
connectGradient: {
|
||||
flex: 1,
|
||||
},
|
||||
connectContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
logoContainer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 50,
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
logoText: {
|
||||
fontSize: 48,
|
||||
},
|
||||
connectTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 12,
|
||||
},
|
||||
connectSubtitle: {
|
||||
fontSize: 16,
|
||||
color: KurdistanColors.spi,
|
||||
textAlign: 'center',
|
||||
opacity: 0.9,
|
||||
marginBottom: 40,
|
||||
},
|
||||
connectButton: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
paddingHorizontal: 40,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
elevation: 6,
|
||||
},
|
||||
connectButtonText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.sor,
|
||||
},
|
||||
header: {
|
||||
padding: 20,
|
||||
paddingTop: 40,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 4,
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: 14,
|
||||
color: KurdistanColors.spi,
|
||||
opacity: 0.9,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
codeCard: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
codeLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 12,
|
||||
},
|
||||
codeContainer: {
|
||||
backgroundColor: '#F5F5F5',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
},
|
||||
codeText: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.sor,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
codeActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
codeButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 12,
|
||||
borderRadius: 8,
|
||||
gap: 8,
|
||||
},
|
||||
copyButton: {
|
||||
backgroundColor: '#F0F0F0',
|
||||
},
|
||||
shareButton: {
|
||||
backgroundColor: KurdistanColors.sor,
|
||||
},
|
||||
codeButtonIcon: {
|
||||
fontSize: 16,
|
||||
},
|
||||
codeButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
},
|
||||
statsGrid: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.sor,
|
||||
marginBottom: 4,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
},
|
||||
section: {
|
||||
marginTop: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 16,
|
||||
},
|
||||
stepCard: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
stepNumber: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: KurdistanColors.sor,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
stepNumberText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
},
|
||||
stepContent: {
|
||||
flex: 1,
|
||||
},
|
||||
stepTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 4,
|
||||
},
|
||||
stepDescription: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
padding: 40,
|
||||
},
|
||||
emptyStateIcon: {
|
||||
fontSize: 48,
|
||||
marginBottom: 16,
|
||||
},
|
||||
emptyStateText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyStateSubtext: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
},
|
||||
referralCard: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
referralInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
referralAddress: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 4,
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
referralDate: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
},
|
||||
referralStats: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
referralStatus: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginBottom: 4,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
statusActive: {
|
||||
color: KurdistanColors.kesk,
|
||||
},
|
||||
statusPending: {
|
||||
color: KurdistanColors.zer,
|
||||
},
|
||||
referralEarned: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.sor,
|
||||
},
|
||||
});
|
||||
|
||||
export default ReferralScreen;
|
||||
@@ -0,0 +1,883 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
Modal,
|
||||
TextInput,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import AppColors, { KurdistanColors } from '../theme/colors';
|
||||
import { usePolkadot } from '../contexts/PolkadotContext';
|
||||
|
||||
interface Token {
|
||||
symbol: string;
|
||||
name: string;
|
||||
balance: string;
|
||||
value: string;
|
||||
change: string;
|
||||
logo: string;
|
||||
isLive: boolean; // true = canlı blockchain, false = coming soon
|
||||
}
|
||||
|
||||
const WalletScreen: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
api,
|
||||
isApiReady,
|
||||
accounts,
|
||||
selectedAccount,
|
||||
connectWallet,
|
||||
disconnectWallet,
|
||||
createWallet,
|
||||
getKeyPair,
|
||||
error: polkadotError
|
||||
} = usePolkadot();
|
||||
|
||||
const [selectedToken, setSelectedToken] = useState<Token | null>(null);
|
||||
const [sendModalVisible, setSendModalVisible] = useState(false);
|
||||
const [receiveModalVisible, setReceiveModalVisible] = useState(false);
|
||||
const [createWalletModalVisible, setCreateWalletModalVisible] = useState(false);
|
||||
const [recipientAddress, setRecipientAddress] = useState('');
|
||||
const [sendAmount, setSendAmount] = useState('');
|
||||
const [walletName, setWalletName] = useState('');
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isLoadingBalances, setIsLoadingBalances] = useState(false);
|
||||
|
||||
// Token balances from blockchain
|
||||
const [balances, setBalances] = useState<{ [key: string]: string }>({
|
||||
HEZ: '0.00',
|
||||
PEZ: '0.00',
|
||||
wUSDT: '0.00',
|
||||
});
|
||||
|
||||
const tokens: Token[] = [
|
||||
{
|
||||
symbol: 'HEZ',
|
||||
name: 'Pezkuwi',
|
||||
balance: balances.HEZ,
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '💎',
|
||||
isLive: true,
|
||||
},
|
||||
{
|
||||
symbol: 'PEZ',
|
||||
name: 'Pezkuwi Token',
|
||||
balance: balances.PEZ,
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '🪙',
|
||||
isLive: true,
|
||||
},
|
||||
{
|
||||
symbol: 'wUSDT',
|
||||
name: 'Wrapped USDT',
|
||||
balance: balances.wUSDT,
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '💵',
|
||||
isLive: true,
|
||||
},
|
||||
{
|
||||
symbol: 'ETH',
|
||||
name: 'Ethereum',
|
||||
balance: '0.00',
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '⟠',
|
||||
isLive: false,
|
||||
},
|
||||
{
|
||||
symbol: 'BTC',
|
||||
name: 'Bitcoin',
|
||||
balance: '0.00',
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '₿',
|
||||
isLive: false,
|
||||
},
|
||||
{
|
||||
symbol: 'DOT',
|
||||
name: 'Polkadot',
|
||||
balance: '0.00',
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '●',
|
||||
isLive: false,
|
||||
},
|
||||
{
|
||||
symbol: 'BNB',
|
||||
name: 'Binance Coin',
|
||||
balance: '0.00',
|
||||
value: '$0.00',
|
||||
change: '+0.00%',
|
||||
logo: '◆',
|
||||
isLive: false,
|
||||
},
|
||||
];
|
||||
|
||||
// Fetch token balances from blockchain
|
||||
useEffect(() => {
|
||||
const fetchBalances = async () => {
|
||||
if (!api || !isApiReady || !selectedAccount) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoadingBalances(true);
|
||||
try {
|
||||
// Fetch HEZ balance (native token)
|
||||
const accountInfo: any = await api.query.system.account(selectedAccount.address);
|
||||
const freeBalance = accountInfo.data.free.toString();
|
||||
const hezBalance = (Number(freeBalance) / 1e12).toFixed(2);
|
||||
|
||||
// Fetch PEZ balance (asset ID 1)
|
||||
let pezBalance = '0.00';
|
||||
try {
|
||||
if (api.query.assets?.account) {
|
||||
const pezAsset: any = await api.query.assets.account(1, selectedAccount.address);
|
||||
if (pezAsset.isSome) {
|
||||
const pezData = pezAsset.unwrap();
|
||||
pezBalance = (Number(pezData.balance.toString()) / 1e12).toFixed(2);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('PEZ asset not found or not accessible');
|
||||
}
|
||||
|
||||
// Fetch wUSDT balance (asset ID 2)
|
||||
let wusdtBalance = '0.00';
|
||||
try {
|
||||
if (api.query.assets?.account) {
|
||||
const wusdtAsset: any = await api.query.assets.account(2, selectedAccount.address);
|
||||
if (wusdtAsset.isSome) {
|
||||
const wusdtData = wusdtAsset.unwrap();
|
||||
wusdtBalance = (Number(wusdtData.balance.toString()) / 1e12).toFixed(2);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('wUSDT asset not found or not accessible');
|
||||
}
|
||||
|
||||
setBalances({
|
||||
HEZ: hezBalance,
|
||||
PEZ: pezBalance,
|
||||
wUSDT: wusdtBalance,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch balances:', err);
|
||||
Alert.alert('Error', 'Failed to fetch token balances');
|
||||
} finally {
|
||||
setIsLoadingBalances(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchBalances();
|
||||
|
||||
// Refresh balances every 30 seconds
|
||||
const interval = setInterval(fetchBalances, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [api, isApiReady, selectedAccount]);
|
||||
|
||||
const handleConnectWallet = async () => {
|
||||
try {
|
||||
if (accounts.length === 0) {
|
||||
// No wallet exists, show create wallet modal
|
||||
setCreateWalletModalVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Connect existing wallet
|
||||
await connectWallet();
|
||||
Alert.alert('Connected', 'Wallet connected successfully!');
|
||||
} catch (err) {
|
||||
console.error('Failed to connect wallet:', err);
|
||||
Alert.alert('Error', 'Failed to connect wallet');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateWallet = async () => {
|
||||
if (!walletName.trim()) {
|
||||
Alert.alert('Error', 'Please enter a wallet name');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { address, mnemonic } = await createWallet(walletName);
|
||||
setCreateWalletModalVisible(false);
|
||||
setWalletName('');
|
||||
|
||||
Alert.alert(
|
||||
'Wallet Created',
|
||||
`Your wallet has been created!\n\nAddress: ${address.substring(0, 10)}...\n\nIMPORTANT: Save your recovery phrase:\n${mnemonic}\n\nStore it securely - you'll need it to recover your wallet!`,
|
||||
[{ text: 'OK', onPress: () => connectWallet() }]
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('Failed to create wallet:', err);
|
||||
Alert.alert('Error', 'Failed to create wallet');
|
||||
}
|
||||
};
|
||||
|
||||
const handleTokenPress = (token: Token) => {
|
||||
if (!token.isLive) {
|
||||
Alert.alert(
|
||||
'Coming Soon',
|
||||
`${token.name} (${token.symbol}) support is coming soon!`,
|
||||
[{ text: 'OK' }]
|
||||
);
|
||||
return;
|
||||
}
|
||||
setSelectedToken(token);
|
||||
};
|
||||
|
||||
const handleSend = () => {
|
||||
if (!selectedToken) return;
|
||||
setSendModalVisible(true);
|
||||
};
|
||||
|
||||
const handleReceive = () => {
|
||||
setReceiveModalVisible(true);
|
||||
};
|
||||
|
||||
const handleConfirmSend = async () => {
|
||||
if (!recipientAddress || !sendAmount || !selectedToken || !selectedAccount || !api) {
|
||||
Alert.alert('Error', 'Please enter recipient address and amount');
|
||||
return;
|
||||
}
|
||||
|
||||
const amount = parseFloat(sendAmount);
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
Alert.alert('Error', 'Please enter a valid amount');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert(
|
||||
'Confirm Transaction',
|
||||
`Send ${sendAmount} ${selectedToken.symbol} to ${recipientAddress.substring(0, 10)}...?`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Confirm',
|
||||
onPress: async () => {
|
||||
setIsSending(true);
|
||||
try {
|
||||
const keypair = await getKeyPair(selectedAccount.address);
|
||||
if (!keypair) {
|
||||
throw new Error('Failed to load keypair');
|
||||
}
|
||||
|
||||
// Convert amount to blockchain units (12 decimals)
|
||||
const amountInUnits = BigInt(Math.floor(amount * 1e12));
|
||||
|
||||
let tx;
|
||||
if (selectedToken.symbol === 'HEZ') {
|
||||
// Send native token
|
||||
tx = api.tx.balances.transfer(recipientAddress, amountInUnits);
|
||||
} else if (selectedToken.symbol === 'PEZ') {
|
||||
// Send PEZ asset (asset ID 1)
|
||||
tx = api.tx.assets.transfer(1, recipientAddress, amountInUnits);
|
||||
} else if (selectedToken.symbol === 'wUSDT') {
|
||||
// Send wUSDT asset (asset ID 2)
|
||||
tx = api.tx.assets.transfer(2, recipientAddress, amountInUnits);
|
||||
} else {
|
||||
throw new Error('Unsupported token');
|
||||
}
|
||||
|
||||
// Sign and send transaction
|
||||
await tx.signAndSend(keypair, ({ status, events }: any) => {
|
||||
if (status.isInBlock) {
|
||||
console.log(`Transaction included in block: ${status.asInBlock}`);
|
||||
} else if (status.isFinalized) {
|
||||
console.log(`Transaction finalized: ${status.asFinalized}`);
|
||||
|
||||
setSendModalVisible(false);
|
||||
setRecipientAddress('');
|
||||
setSendAmount('');
|
||||
setIsSending(false);
|
||||
|
||||
Alert.alert(
|
||||
'Success',
|
||||
`Successfully sent ${sendAmount} ${selectedToken.symbol}!`
|
||||
);
|
||||
|
||||
// Refresh balances
|
||||
// The useEffect will automatically refresh after 30s, but we could trigger it manually here
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Transaction failed:', err);
|
||||
setIsSending(false);
|
||||
Alert.alert('Error', `Transaction failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
// Show loading state while API is initializing
|
||||
if (!isApiReady) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={KurdistanColors.kesk} />
|
||||
<Text style={styles.loadingText}>Connecting to blockchain...</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
// Show connect/create wallet screen if no account is selected
|
||||
if (!selectedAccount) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<LinearGradient
|
||||
colors={[KurdistanColors.kesk, KurdistanColors.zer]}
|
||||
style={styles.connectGradient}
|
||||
>
|
||||
<View style={styles.connectContainer}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Text style={styles.logoText}>👛</Text>
|
||||
</View>
|
||||
<Text style={styles.connectTitle}>{t('wallet.title')}</Text>
|
||||
<Text style={styles.connectSubtitle}>
|
||||
{accounts.length === 0
|
||||
? 'Create a new wallet to get started'
|
||||
: 'Connect your wallet to manage your tokens'}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.connectButton}
|
||||
onPress={handleConnectWallet}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.connectButtonText}>
|
||||
{accounts.length === 0 ? 'Create Wallet' : t('wallet.connect')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{polkadotError && (
|
||||
<Text style={styles.errorText}>{polkadotError}</Text>
|
||||
)}
|
||||
</View>
|
||||
</LinearGradient>
|
||||
|
||||
{/* Create Wallet Modal */}
|
||||
<Modal
|
||||
visible={createWalletModalVisible}
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={() => setCreateWalletModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Create New Wallet</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Wallet Name"
|
||||
value={walletName}
|
||||
onChangeText={setWalletName}
|
||||
placeholderTextColor="#999"
|
||||
/>
|
||||
<View style={styles.modalButtons}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
onPress={() => setCreateWalletModalVisible(false)}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>{t('common.cancel')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.confirmButton]}
|
||||
onPress={handleCreateWallet}
|
||||
>
|
||||
<Text style={styles.confirmButtonText}>Create</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
|
||||
{/* Header */}
|
||||
<LinearGradient
|
||||
colors={[KurdistanColors.kesk, KurdistanColors.zer]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.header}
|
||||
>
|
||||
<Text style={styles.headerTitle}>{t('wallet.title')}</Text>
|
||||
<View style={styles.addressContainer}>
|
||||
<Text style={styles.addressLabel}>{t('wallet.address')}:</Text>
|
||||
<Text style={styles.addressText}>
|
||||
{selectedAccount.address.substring(0, 8)}...{selectedAccount.address.substring(selectedAccount.address.length - 6)}
|
||||
</Text>
|
||||
</View>
|
||||
{isLoadingBalances && (
|
||||
<ActivityIndicator size="small" color={KurdistanColors.spi} style={{ marginTop: 8 }} />
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={styles.disconnectButton}
|
||||
onPress={disconnectWallet}
|
||||
>
|
||||
<Text style={styles.disconnectButtonText}>{t('wallet.disconnect')}</Text>
|
||||
</TouchableOpacity>
|
||||
</LinearGradient>
|
||||
|
||||
{/* Tokens List */}
|
||||
<ScrollView style={styles.tokensContainer} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.sectionTitle}>Your Tokens</Text>
|
||||
{tokens.map((token, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={[
|
||||
styles.tokenCard,
|
||||
!token.isLive && styles.tokenCardDisabled,
|
||||
]}
|
||||
onPress={() => handleTokenPress(token)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.tokenInfo}>
|
||||
<View style={styles.tokenLogoContainer}>
|
||||
<Text style={styles.tokenLogo}>{token.logo}</Text>
|
||||
</View>
|
||||
<View style={styles.tokenDetails}>
|
||||
<Text style={styles.tokenSymbol}>{token.symbol}</Text>
|
||||
<Text style={styles.tokenName}>{token.name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.tokenBalance}>
|
||||
<Text style={styles.balanceAmount}>{token.balance}</Text>
|
||||
<Text style={styles.balanceValue}>{token.value}</Text>
|
||||
</View>
|
||||
{!token.isLive && (
|
||||
<View style={styles.comingSoonBadge}>
|
||||
<Text style={styles.comingSoonText}>Coming Soon</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{selectedToken && selectedToken.isLive && (
|
||||
<View style={styles.actionsContainer}>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={handleSend}>
|
||||
<Text style={styles.actionIcon}>📤</Text>
|
||||
<Text style={styles.actionText}>{t('wallet.send')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={handleReceive}>
|
||||
<Text style={styles.actionIcon}>📥</Text>
|
||||
<Text style={styles.actionText}>{t('wallet.receive')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Send Modal */}
|
||||
<Modal
|
||||
visible={sendModalVisible}
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={() => !isSending && setSendModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>
|
||||
Send {selectedToken?.symbol}
|
||||
</Text>
|
||||
<Text style={styles.balanceHint}>
|
||||
Available: {selectedToken?.balance} {selectedToken?.symbol}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Recipient Address"
|
||||
value={recipientAddress}
|
||||
onChangeText={setRecipientAddress}
|
||||
placeholderTextColor="#999"
|
||||
editable={!isSending}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Amount"
|
||||
value={sendAmount}
|
||||
onChangeText={setSendAmount}
|
||||
keyboardType="numeric"
|
||||
placeholderTextColor="#999"
|
||||
editable={!isSending}
|
||||
/>
|
||||
<View style={styles.modalButtons}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
onPress={() => setSendModalVisible(false)}
|
||||
disabled={isSending}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>{t('common.cancel')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.confirmButton, isSending && styles.disabledButton]}
|
||||
onPress={handleConfirmSend}
|
||||
disabled={isSending}
|
||||
>
|
||||
{isSending ? (
|
||||
<ActivityIndicator size="small" color={KurdistanColors.spi} />
|
||||
) : (
|
||||
<Text style={styles.confirmButtonText}>{t('common.confirm')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* Receive Modal */}
|
||||
<Modal
|
||||
visible={receiveModalVisible}
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={() => setReceiveModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Receive {selectedToken?.symbol}</Text>
|
||||
<Text style={styles.qrPlaceholder}>QR Code Here</Text>
|
||||
<Text style={styles.addressDisplay}>{selectedAccount.address}</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.confirmButton]}
|
||||
onPress={() => setReceiveModalVisible(false)}
|
||||
>
|
||||
<Text style={styles.confirmButtonText}>{t('common.close')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F5F5F5',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 16,
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
},
|
||||
errorText: {
|
||||
marginTop: 20,
|
||||
fontSize: 14,
|
||||
color: KurdistanColors.sor,
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
connectGradient: {
|
||||
flex: 1,
|
||||
},
|
||||
connectContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
logoContainer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 50,
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
logoText: {
|
||||
fontSize: 48,
|
||||
},
|
||||
connectTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 12,
|
||||
},
|
||||
connectSubtitle: {
|
||||
fontSize: 16,
|
||||
color: KurdistanColors.spi,
|
||||
textAlign: 'center',
|
||||
opacity: 0.9,
|
||||
marginBottom: 40,
|
||||
},
|
||||
connectButton: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
paddingHorizontal: 40,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
elevation: 6,
|
||||
},
|
||||
connectButtonText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.kesk,
|
||||
},
|
||||
header: {
|
||||
padding: 20,
|
||||
paddingTop: 40,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.spi,
|
||||
marginBottom: 12,
|
||||
},
|
||||
addressContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
addressLabel: {
|
||||
fontSize: 14,
|
||||
color: KurdistanColors.spi,
|
||||
opacity: 0.9,
|
||||
marginRight: 8,
|
||||
},
|
||||
addressText: {
|
||||
fontSize: 14,
|
||||
color: KurdistanColors.spi,
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
disconnectButton: {
|
||||
alignSelf: 'flex-start',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: 8,
|
||||
},
|
||||
disconnectButtonText: {
|
||||
fontSize: 12,
|
||||
color: KurdistanColors.spi,
|
||||
fontWeight: '600',
|
||||
},
|
||||
tokensContainer: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 16,
|
||||
},
|
||||
tokenCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
tokenCardDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
tokenInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
tokenLogoContainer: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#F0F0F0',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
tokenLogo: {
|
||||
fontSize: 24,
|
||||
},
|
||||
tokenDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
tokenSymbol: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 4,
|
||||
},
|
||||
tokenName: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
tokenBalance: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
balanceAmount: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 4,
|
||||
},
|
||||
balanceValue: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
comingSoonBadge: {
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
backgroundColor: KurdistanColors.zer,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 4,
|
||||
},
|
||||
comingSoonText: {
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.reş,
|
||||
},
|
||||
actionsContainer: {
|
||||
flexDirection: 'row',
|
||||
padding: 20,
|
||||
gap: 12,
|
||||
},
|
||||
actionButton: {
|
||||
flex: 1,
|
||||
backgroundColor: KurdistanColors.kesk,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowColor: KurdistanColors.kesk,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
elevation: 6,
|
||||
},
|
||||
actionIcon: {
|
||||
fontSize: 24,
|
||||
marginBottom: 8,
|
||||
},
|
||||
actionText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.spi,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: KurdistanColors.spi,
|
||||
borderRadius: 20,
|
||||
padding: 24,
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: KurdistanColors.reş,
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
balanceHint: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#F5F5F5',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
fontSize: 16,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E0E0',
|
||||
},
|
||||
modalButtons: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
modalButton: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#E0E0E0',
|
||||
},
|
||||
cancelButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#666',
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: KurdistanColors.kesk,
|
||||
},
|
||||
confirmButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: KurdistanColors.spi,
|
||||
},
|
||||
disabledButton: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
qrPlaceholder: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: '#F0F0F0',
|
||||
borderRadius: 12,
|
||||
alignSelf: 'center',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
lineHeight: 200,
|
||||
fontSize: 16,
|
||||
color: '#999',
|
||||
},
|
||||
addressDisplay: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'monospace',
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
padding: 12,
|
||||
backgroundColor: '#F5F5F5',
|
||||
borderRadius: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default WalletScreen;
|
||||
Reference in New Issue
Block a user