mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-14 04:21:02 +00:00
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:
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
|
||||
interface TokenIconProps {
|
||||
symbol: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
// Token emoji mapping
|
||||
const TOKEN_ICONS: { [key: string]: string } = {
|
||||
HEZ: '🟡',
|
||||
PEZ: '🟣',
|
||||
wHEZ: '🟡',
|
||||
USDT: '💵',
|
||||
wUSDT: '💵',
|
||||
BTC: '₿',
|
||||
ETH: '⟠',
|
||||
DOT: '●',
|
||||
};
|
||||
|
||||
export const TokenIcon: React.FC<TokenIconProps> = ({ symbol, size = 32 }) => {
|
||||
const icon = TOKEN_ICONS[symbol] || '❓';
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { width: size, height: size }]}>
|
||||
<Text style={[styles.icon, { fontSize: size * 0.7 }]}>{icon}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 100,
|
||||
backgroundColor: '#F5F5F5',
|
||||
},
|
||||
icon: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user