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%)
This commit is contained in:
Claude committed 2025-11-21 00:09:13 +00:00
1 parent 79ff56bda1
commit 83b92fffde
7 files changed
+1411

No files matched your search

@@ -6,6 +6,7 @@ import { KurdistanColors } from '../theme/colors';
// Screens
import DashboardScreen from '../screens/DashboardScreen';
import WalletScreen from '../screens/WalletScreen';
import SwapScreen from '../screens/SwapScreen';
import BeCitizenScreen from '../screens/BeCitizenScreen';
import ReferralScreen from '../screens/ReferralScreen';
import ProfileScreen from '../screens/ProfileScreen';
@@ -13,6 +14,7 @@ import ProfileScreen from '../screens/ProfileScreen';
export type BottomTabParamList = {
Home: undefined;
Wallet: undefined;
Swap: undefined;
BeCitizen: undefined;
Referral: undefined;
Profile: undefined;
@@ -70,6 +72,18 @@ const BottomTabNavigator: React.FC = () => {
}}
/>
<Tab.Screen
name="Swap"
component={SwapScreen}
options={{
tabBarIcon: ({ color, focused }) => (
<Text style={[styles.icon, { color }]}>
{focused ? '🔄' : '↔️'}
</Text>
),
}}
/>
<Tab.Screen
name="BeCitizen"
component={BeCitizenScreen}