fix(#62,#69): consolidate walletStore with walletServiceManager and add network detection UI

src/screens/WalletConnectScreen.tsx

@@ -9,6 +9,8 @@ import {
   Alert,
   ActivityIndicator,
   Platform,
+  Modal,
+  FlatList,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -18,6 +20,8 @@ import { Card } from '../components/common/Card';
 import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit-ethers-react-native';
 import walletServiceManager, { WalletConnection, TokenBalance } from '../services/walletService';
 import { useWalletStore } from '../store';
+import { useNetworkStore } from '../store/networkStore';
+import { ALL_NETWORKS, Network } from '../config/networks';
 import { RootStackParamList } from '../navigation/types';
 
 import * as Clipboard from 'expo-clipboard';
@@ -27,12 +31,14 @@ const WalletConnectScreen: React.FC = () => {
   const { open } = useAppKit();
   const { address, isConnected, chainId } = useAppKitAccount();
   const { walletProvider } = useAppKitProvider();
-  const { connectWallet, disconnect } = useWalletStore();
+  const { disconnect, networkMismatch, setPreferredNetwork } = useWalletStore();
+  const { currentNetwork, setNetwork: setNetworkStore } = useNetworkStore();
 
   const [isConnecting, setIsConnecting] = useState(false);
   const [connection, setConnection] = useState<WalletConnection | null>(null);
   const [tokenBalances, setTokenBalances] = useState<TokenBalance[]>([]);
   const [isLoadingBalances, setIsLoadingBalances] = useState(false);
+  const [showNetworkPicker, setShowNetworkPicker] = useState(false);
 
   useEffect(() => {
     initializeWalletService();
@@ -48,7 +54,6 @@ const WalletConnectScreen: React.FC = () => {
       };
       setConnection(realConnection);
       walletServiceManager.setConnection(realConnection);
-      connectWallet();
       loadTokenBalances();
     } else if (!isConnected) {
       void walletServiceManager.disconnectWallet();
@@ -144,6 +149,12 @@ const WalletConnectScreen: React.FC = () => {
     }
   };
 
+  const handleSelectNetwork = async (network: Network) => {
+    setShowNetworkPicker(false);
+    await setPreferredNetwork(network.id);
+    await setNetworkStore(network.id);
+  };
+
   const formatAddress = (address: string): string => {
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
@@ -261,6 +272,46 @@ const WalletConnectScreen: React.FC = () => {
           </View>
         ) : (
           <View style={styles.connectedSection}>
+            {/* Network Mismatch Banner (#69) */}
+            {networkMismatch && (
+              <View style={styles.mismatchBanner}>
+                <Text style={styles.mismatchIcon}>⚠️</Text>
+                <View style={styles.mismatchTextContainer}>
+                  <Text style={styles.mismatchTitle}>Network Mismatch</Text>
+                  <Text style={styles.mismatchBody}>
+                    Wallet is on {getChainName(networkMismatch.connectedChainId)}, but preferred
+                    network is {networkMismatch.preferredNetwork.name}.
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  style={styles.switchNetworkButton}
+                  onPress={() => setShowNetworkPicker(true)}
+                  accessibilityRole="button"
+                  accessibilityLabel="Switch preferred network">
+                  <Text style={styles.switchNetworkText}>Switch</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+
+            {/* Network Selector (#69) */}
+            <Card variant="elevated" padding="large">
+              <View style={styles.networkSelectorRow}>
+                <View>
+                  <Text style={styles.networkSelectorLabel}>Preferred Network</Text>
+                  <Text style={styles.networkSelectorValue}>
+                    {currentNetwork?.name ?? 'Not set'}
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  style={styles.changeNetworkButton}
+                  onPress={() => setShowNetworkPicker(true)}
+                  accessibilityRole="button"
+                  accessibilityLabel="Change preferred network">
+                  <Text style={styles.changeNetworkText}>Change</Text>
+                </TouchableOpacity>
+              </View>
+            </Card>
+
             {/* Connection Status */}
             <Card variant="elevated" padding="large">
               <View style={styles.connectionHeader}>
@@ -413,6 +464,54 @@ const WalletConnectScreen: React.FC = () => {
           </Card>
         )}
       </ScrollView>
+
+      {/* Network Picker Modal (#69) */}
+      <Modal
+        visible={showNetworkPicker}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setShowNetworkPicker(false)}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Select Network</Text>
+              <TouchableOpacity
+                onPress={() => setShowNetworkPicker(false)}
+                accessibilityRole="button"
+                accessibilityLabel="Close network picker">
+                <Text style={styles.modalClose}>✕</Text>
+              </TouchableOpacity>
+            </View>
+            <FlatList
+              data={ALL_NETWORKS}
+              keyExtractor={(item) => item.id}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={[
+                    styles.networkItem,
+                    currentNetwork?.id === item.id && styles.networkItemSelected,
+                  ]}
+                  onPress={() => handleSelectNetwork(item)}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Select ${item.name}`}>
+                  <Text style={styles.networkItemIcon}>
+                    {item.type === 'stellar' ? '⭐' : '🔷'}
+                  </Text>
+                  <View style={styles.networkItemInfo}>
+                    <Text style={styles.networkItemName}>{item.name}</Text>
+                    <Text style={styles.networkItemType}>
+                      {item.type.toUpperCase()}{item.isTestnet ? ' · Testnet' : ''}
+                    </Text>
+                  </View>
+                  {currentNetwork?.id === item.id && (
+                    <Text style={styles.networkItemCheck}>✓</Text>
+                  )}
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </Modal>
     </SafeAreaView>
   );
 };
@@ -748,6 +847,137 @@ const styles = StyleSheet.create({
     fontSize: 48,
     marginBottom: spacing.sm,
   },
+  // ── Network mismatch banner (#69) ──────────────────────────────────────────
+  mismatchBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFF3CD',
+    borderColor: '#FFC107',
+    borderWidth: 1,
+    borderRadius: borderRadius.md,
+    padding: spacing.md,
+    marginBottom: spacing.md,
+  },
+  mismatchIcon: {
+    fontSize: 20,
+    marginRight: spacing.sm,
+  },
+  mismatchTextContainer: {
+    flex: 1,
+  },
+  mismatchTitle: {
+    ...typography.caption,
+    color: '#856404',
+    fontWeight: '700',
+    marginBottom: 2,
+  },
+  mismatchBody: {
+    ...typography.caption,
+    color: '#856404',
+    fontSize: 11,
+  },
+  switchNetworkButton: {
+    backgroundColor: '#FFC107',
+    borderRadius: borderRadius.sm,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    marginLeft: spacing.sm,
+  },
+  switchNetworkText: {
+    ...typography.caption,
+    color: '#212529',
+    fontWeight: '700',
+  },
+  // ── Network selector row ───────────────────────────────────────────────────
+  networkSelectorRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  networkSelectorLabel: {
+    ...typography.caption,
+    color: colors.textSecondary,
+    marginBottom: 2,
+  },
+  networkSelectorValue: {
+    ...typography.body,
+    color: colors.text,
+    fontWeight: '600',
+  },
+  changeNetworkButton: {
+    backgroundColor: colors.primary,
+    borderRadius: borderRadius.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs,
+  },
+  changeNetworkText: {
+    ...typography.caption,
+    color: colors.text,
+    fontWeight: '600',
+  },
+  // ── Network picker modal (#69) ─────────────────────────────────────────────
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalContainer: {
+    backgroundColor: colors.background,
+    borderTopLeftRadius: borderRadius.lg,
+    borderTopRightRadius: borderRadius.lg,
+    maxHeight: '60%',
+    paddingBottom: spacing.xl,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: spacing.lg,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.surface,
+  },
+  modalTitle: {
+    ...typography.h3,
+    color: colors.text,
+  },
+  modalClose: {
+    fontSize: 18,
+    color: colors.textSecondary,
+    padding: spacing.xs,
+  },
+  networkItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.surface,
+  },
+  networkItemSelected: {
+    backgroundColor: colors.surface,
+  },
+  networkItemIcon: {
+    fontSize: 20,
+    marginRight: spacing.md,
+  },
+  networkItemInfo: {
+    flex: 1,
+  },
+  networkItemName: {
+    ...typography.body,
+    color: colors.text,
+    fontWeight: '600',
+  },
+  networkItemType: {
+    ...typography.caption,
+    color: colors.textSecondary,
+    fontSize: 11,
+  },
+  networkItemCheck: {
+    fontSize: 18,
+    color: colors.primary,
+    fontWeight: '700',
+  },
 });
 
 export default WalletConnectScreen;