feat(mobile): implement DEX/Swap interface with real-time blockchain integration

PHASE 1 - Feature 1: DEX/Swap (COMPLETED ✅)

## New Components (5 files - 550 lines):
1. TokenIcon.tsx - Token emoji icons component
2. AddressDisplay.tsx - Formatted address display with copy functionality
3. BalanceCard.tsx - Token balance card with change indicators
4. TokenSelector.tsx - Modal token selector with search
5. Updated components/index.ts - Export new components

## New Screen:
SwapScreen.tsx (800 lines) - Full-featured DEX swap interface

## Features Implemented:
✅ Real-time blockchain integration via Polkadot.js
✅ Live balance fetching for all tokens (HEZ, wHEZ, PEZ, wUSDT)
✅ Pool reserve queries from assetConversion pallet
✅ Automatic price calculations using shared DEX utilities
✅ Price impact calculation and display
✅ Slippage tolerance settings (0.5% to 50%)
✅ Minimum received amount calculation
✅ Transaction fee display (0.3%)
✅ Transaction signing and sending
✅ Success/error handling with user-friendly messages
✅ Loading states throughout
✅ Token balance display for all available tokens
✅ Swap token positions functionality
✅ Settings modal for slippage configuration
✅ Preset slippage buttons (0.5%, 1%, 2%, 5%)

## Blockchain Integration:
- Uses shared/utils/dex.ts utilities (formatTokenBalance, parseTokenInput, calculatePriceImpact, getAmountOut, calculateMinAmount)
- Real-time pool reserve fetching from chain
- Transaction execution via assetConversion.swapTokensForExactTokens
- Proper error extraction from dispatchError
- Event monitoring for transaction finalization

## UI/UX:
- Kurdistan color palette (green, red, yellow)
- Price impact color coding (green<1%, yellow 1-3%, red>3%)
- Disabled states for invalid inputs
- Modal-based settings interface
- Responsive layout with ScrollView
- Proper keyboard handling (keyboardShouldPersistTaps)

## Navigation:
- Added Swap tab to BottomTabNavigator
- Swap icon: 🔄 (focused) / ↔️ (unfocused)
- Positioned between Wallet and BeCitizen tabs

## Security:
- Keypair loaded from secure storage
- No private keys in state
- Proper transaction validation
- Slippage protection

## Dependencies:
- Uses existing Polkadot.js API (16.5.2)
- No new dependencies added
- Fully compatible with existing infrastructure

## Testing Checklist:
- [ ] Test on iOS simulator
- [ ] Test on Android emulator
- [ ] Test with real blockchain (beta testnet)
- [ ] Test swap HEZ → PEZ
- [ ] Test swap PEZ → wUSDT
- [ ] Test slippage settings
- [ ] Test error handling (insufficient balance)
- [ ] Test loading states
- [ ] Test token selector

## Next Steps:
- Implement P2P Fiat Trading (Phase 1, Feature 2)
- Add transaction history for swaps
- Implement swap analytics

Estimated completion: +10% (50% → 60%)

mobile/src/components/BalanceCard.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { TokenIcon } from './TokenIcon';
+import { KurdistanColors } from '../theme/colors';
+
+interface BalanceCardProps {
+  symbol: string;
+  name: string;
+  balance: string;
+  value?: string;
+  change?: string;
+  onPress?: () => void;
+}
+
+export const BalanceCard: React.FC<BalanceCardProps> = ({
+  symbol,
+  name,
+  balance,
+  value,
+  change,
+  onPress,
+}) => {
+  const changeValue = parseFloat(change || '0');
+  const isPositive = changeValue >= 0;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={onPress}
+      disabled={!onPress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.row}>
+        <TokenIcon symbol={symbol} size={40} />
+        <View style={styles.info}>
+          <View style={styles.nameRow}>
+            <Text style={styles.symbol}>{symbol}</Text>
+            <Text style={styles.balance}>{balance}</Text>
+          </View>
+          <View style={styles.detailsRow}>
+            <Text style={styles.name}>{name}</Text>
+            {value && <Text style={styles.value}>{value}</Text>}
+          </View>
+        </View>
+      </View>
+      {change && (
+        <View style={styles.changeContainer}>
+          <Text
+            style={[
+              styles.change,
+              { color: isPositive ? KurdistanColors.kesk : KurdistanColors.sor },
+            ]}
+          >
+            {isPositive ? '+' : ''}
+            {change}
+          </Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  info: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  nameRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  symbol: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+  },
+  balance: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+  },
+  detailsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  name: {
+    fontSize: 14,
+    color: '#666',
+  },
+  value: {
+    fontSize: 14,
+    color: '#666',
+  },
+  changeContainer: {
+    marginTop: 8,
+    alignItems: 'flex-end',
+  },
+  change: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});