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.

mobile/src/navigation/AppNavigator.tsx

@@ -9,15 +9,13 @@ import { KurdistanColors } from '../theme/colors';
 import WelcomeScreen from '../screens/WelcomeScreen';
 import SignInScreen from '../screens/SignInScreen';
 import SignUpScreen from '../screens/SignUpScreen';
-import DashboardScreen from '../screens/DashboardScreen';
-import SettingsScreen from '../screens/SettingsScreen';
+import BottomTabNavigator from './BottomTabNavigator';
 
 export type RootStackParamList = {
   Welcome: undefined;
   SignIn: undefined;
   SignUp: undefined;
-  Dashboard: undefined;
-  Settings: undefined;
+  MainApp: undefined;
 };
 
 const Stack = createStackNavigator<RootStackParamList>();
@@ -100,27 +98,8 @@ const AppNavigator: React.FC = () => {
             </Stack.Screen>
           </>
         ) : (
-          // Show main app if authenticated
-          <>
-            <Stack.Screen name="Dashboard">
-              {(props) => (
-                <DashboardScreen
-                  {...props}
-                  onNavigateToWallet={() => console.log('Navigate to Wallet')}
-                  onNavigateToSettings={() => props.navigation.navigate('Settings')}
-                />
-              )}
-            </Stack.Screen>
-            <Stack.Screen name="Settings">
-              {(props) => (
-                <SettingsScreen
-                  {...props}
-                  onBack={() => props.navigation.goBack()}
-                  onLogout={handleLogout}
-                />
-              )}
-            </Stack.Screen>
-          </>
+          // Show main app (bottom tabs) if authenticated
+          <Stack.Screen name="MainApp" component={BottomTabNavigator} />
         )}
       </Stack.Navigator>
     </NavigationContainer>

mobile/src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { KurdistanColors } from '../theme/colors';
+
+// Screens
+import DashboardScreen from '../screens/DashboardScreen';
+import WalletScreen from '../screens/WalletScreen';
+import BeCitizenScreen from '../screens/BeCitizenScreen';
+import ReferralScreen from '../screens/ReferralScreen';
+import ProfileScreen from '../screens/ProfileScreen';
+
+export type BottomTabParamList = {
+  Home: undefined;
+  Wallet: undefined;
+  BeCitizen: undefined;
+  Referral: undefined;
+  Profile: undefined;
+};
+
+const Tab = createBottomTabNavigator<BottomTabParamList>();
+
+// Custom Tab Bar Button for Center Button
+const CustomTabBarButton: React.FC<{
+  children: React.ReactNode;
+  onPress?: () => void;
+}> = ({ children, onPress }) => (
+  <TouchableOpacity
+    style={styles.customButtonContainer}
+    onPress={onPress}
+    activeOpacity={0.8}
+  >
+    <View style={styles.customButton}>{children}</View>
+  </TouchableOpacity>
+);
+
+const BottomTabNavigator: React.FC = () => {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: KurdistanColors.kesk,
+        tabBarInactiveTintColor: '#999',
+        tabBarStyle: styles.tabBar,
+        tabBarShowLabel: true,
+        tabBarLabelStyle: styles.tabBarLabel,
+      }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={DashboardScreen}
+        options={{
+          tabBarIcon: ({ color, focused }) => (
+            <Text style={[styles.icon, { color }]}>
+              {focused ? '🏠' : '🏚️'}
+            </Text>
+          ),
+        }}
+      />
+
+      <Tab.Screen
+        name="Wallet"
+        component={WalletScreen}
+        options={{
+          tabBarIcon: ({ color, focused }) => (
+            <Text style={[styles.icon, { color }]}>
+              {focused ? '💰' : '👛'}
+            </Text>
+          ),
+        }}
+      />
+
+      <Tab.Screen
+        name="BeCitizen"
+        component={BeCitizenScreen}
+        options={{
+          tabBarLabel: 'Be Citizen',
+          tabBarIcon: ({ focused }) => (
+            <Text style={[styles.centerIcon]}>
+              🏛️
+            </Text>
+          ),
+          tabBarButton: (props) => <CustomTabBarButton {...props} />,
+        }}
+      />
+
+      <Tab.Screen
+        name="Referral"
+        component={ReferralScreen}
+        options={{
+          tabBarIcon: ({ color, focused }) => (
+            <Text style={[styles.icon, { color }]}>
+              {focused ? '🤝' : '👥'}
+            </Text>
+          ),
+        }}
+      />
+
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          tabBarIcon: ({ color, focused }) => (
+            <Text style={[styles.icon, { color }]}>
+              {focused ? '👤' : '👨'}
+            </Text>
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: KurdistanColors.spi,
+    borderTopWidth: 1,
+    borderTopColor: '#E0E0E0',
+    height: Platform.OS === 'ios' ? 85 : 65,
+    paddingBottom: Platform.OS === 'ios' ? 20 : 8,
+    paddingTop: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  tabBarLabel: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  icon: {
+    fontSize: 24,
+  },
+  customButtonContainer: {
+    top: -20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  customButton: {
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: KurdistanColors.kesk,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: KurdistanColors.kesk,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    elevation: 8,
+    borderWidth: 4,
+    borderColor: KurdistanColors.spi,
+  },
+  centerIcon: {
+    fontSize: 32,
+  },
+});
+
+export default BottomTabNavigator;