Claude 83b92fffde 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%)
2025-11-21 00:09:13 +00:00
2025-10-22 18:05:19 -07:00
2025-10-22 18:05:19 -07:00

Pezkuwi Web App Projects

Unified repository for all Pezkuwi blockchain frontend applications and shared resources.

🏗️ Project Structure

pezkuwi-web-app-projects/
├── web/                    # Main web application
├── pezkuwi-sdk-ui/        # Polkadot SDK UI (branded clone)
├── mobile/                 # Mobile application
├── shared/                 # Shared code and utilities
└── README.md              # This file

📁 Directories

1. web/ - Main Web Application

Status: ~90% Complete - Production Ready

The primary web interface for Pezkuwi blockchain at pezkuwichain.app

Tech Stack:

  • React 18 + TypeScript
  • Vite build tool
  • Polkadot.js API
  • Supabase (Auth & Database)
  • Tailwind CSS + shadcn/ui
  • i18next (Multi-language support)

Features:

  • Wallet integration (Polkadot.js extension)
  • Live blockchain data
  • Staking dashboard
  • DEX/Swap interface
  • Transaction history
  • Multi-language support (EN, TR, KMR, CKB, AR, FA)
  • Governance dropdown with live blockchain integration

Get Started:

cd web
npm install
npm run dev

2. pezkuwi-sdk-ui/ - Polkadot SDK UI Clone

Status: 🚧 Planned - Not Yet Implemented

Branded version of Polkadot.js Apps for Pezkuwi blockchain.

Purpose:

  • Provide comprehensive blockchain explorer
  • Offer advanced developer tools
  • Enable direct chain interaction
  • Serve as official SDK interface

Planned Implementation:

  1. Clone Polkadot.js Apps repository
  2. Apply Pezkuwi branding
  3. Configure chain endpoints
  4. Deploy to pezkuwichain.app/sdk

Resources:

  • See pezkuwi-sdk-ui/README.md for details

3. mobile/ - Mobile Application

Status: 🚧 In Development (~50% Complete)

React Native Expo app for iOS and Android with full blockchain integration.

Current Progress:

  • Welcome screen with language selection
  • Multi-language support (6 languages with RTL)
  • Authentication (Sign In/Up)
  • Main dashboard navigation (5-tab bottom nav)
  • Wallet integration with Polkadot.js
  • Live blockchain data (HEZ, PEZ, USDT)
  • Send/receive transactions
  • Be Citizen screen
  • Referral system integration
  • Full feature parity with web

Technology: React Native + Expo + TypeScript

Get Started:

cd mobile
npm install
npm start

4. shared/ - Shared Code

Status: Fully Organized

Common code, types, and utilities used across all platforms (web, mobile, SDK UI).

Structure:

shared/
├── types/          # TypeScript type definitions
│   ├── blockchain.ts  # Blockchain types (WalletAccount, Transaction, etc.)
│   └── tokens.ts      # Token & DEX types (TokenInfo, PoolInfo, etc.)
├── utils/          # Helper functions (formatting, validation)
├── blockchain/     # Blockchain utilities (Polkadot API wrappers, endpoints)
├── constants/      # App constants (tokens, colors, languages)
└── i18n/           # Internationalization (translations for 6 languages)
    └── locales/    # Translation JSON files

Usage:

// Token types and constants
import { TokenInfo, KNOWN_TOKENS } from '../../../shared/types/tokens';
import { KURDISTAN_COLORS, TOKEN_DISPLAY_SYMBOLS } from '../../../shared/constants';

// Blockchain utilities
import { DEFAULT_ENDPOINT, BLOCKCHAIN_ENDPOINTS } from '../../../shared/blockchain/polkadot';

// i18n
import { translations, LANGUAGES, isRTL } from '../../../shared/i18n';

// Formatting utilities
import { formatAddress, formatTokenAmount } from '../../../shared/utils/formatting';

🎯 Development Roadmap

Phase 1: Project Organization

  • Reorganize repository structure
  • Create shared utilities foundation
  • Set up placeholder directories
  • Centralize common code (i18n, types, constants)

Phase 2: Web App Completion

  • Implement governance dropdown with live data
  • Complete blockchain data integration
  • Delegation and proposals pages
  • Forum with moderation

Phase 3: Mobile Development 🚧

  • Choose technology stack (React Native + Expo)
  • Implement wallet integration with Polkadot.js
  • Live blockchain integration (HEZ, PEZ, USDT)
  • Bottom navigation with 5 tabs
  • Connect Be Citizen to citizenship-crypto
  • Integrate referral with pallet_referral
  • Achieve feature parity with web

Phase 4: Polkadot SDK UI (Future)

  • Clone and configure Polkadot.js Apps
  • Apply Pezkuwi branding
  • Set up deployment pipeline
  • Integrate with main web app

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Git

Clone Repository

git clone https://github.com/pezkuwichain/pezkuwi-web-app-projects.git
cd pezkuwi-web-app-projects

Run Web App

cd web
npm install
npm run dev

Run Mobile App

cd mobile
npm install
npm start

Build for Production

cd web
npm run build

🌐 Multi-Language Support

All applications support:

  • 🇬🇧 English (EN)
  • 🇹🇷 Türkçe (TR)
  • ☀️ Kurmancî (KMR) - Kurdish Kurmanji
  • ☀️ سۆرانی (CKB) - Kurdish Sorani
  • 🇸🇦 العربية (AR)
  • 🇮🇷 فارسی (FA)

RTL (Right-to-Left) support for CKB, AR, FA.

📝 Documentation

  • Web App: See web/README.md and inline documentation
  • SDK UI: See pezkuwi-sdk-ui/README.md
  • Mobile: See mobile/README.md
  • Shared Code: See shared/README.md
  • Architecture: See web/mimari.txt for detailed system architecture

🔐 Security

Security is our top priority. See web/SECURITY.md for:

  • Security policies
  • Vulnerability reporting
  • Multi-signature wallet setup
  • Best practices

📄 License

See LICENSE file for details.

🤝 Contributing

We welcome contributions! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📞 Support

  • Website: pezkuwichain.app
  • Issues: GitHub Issues
  • Documentation: Project README files

Note: This is a monorepo structure designed for production-level deployment of Pezkuwi blockchain applications across multiple platforms.

S
Description
No description provided
Readme MIT 110 MiB
Languages
HTML 81.5%
TypeScript 14.9%
Rust 2%
PLpgSQL 0.8%
JavaScript 0.5%
Other 0.2%