Files
pwap/shared
Claude 385039e228 Implement comprehensive error handling system
- shared/lib/error-handler.ts: Substrate error → user-friendly EN/KMR messages
  * Maps 30+ blockchain error types (Staking, Identity, Tiki, ValidatorPool, DEX, Governance)
  * extractDispatchError() - Parse Substrate DispatchError
  * getUserFriendlyError() - Convert to bilingual messages
  * handleBlockchainError() - Toast helper with auto language detection
  * SUCCESS_MESSAGES - Success templates with {{param}} interpolation

- web/src/components/ErrorBoundary.tsx: Global React error boundary
  * Catches unhandled React errors with fallback UI
  * Error details with stack trace (developer mode)
  * Try Again / Reload Page / Go Home buttons
  * RouteErrorBoundary - Smaller boundary for individual routes
  * Support email link (info@pezkuwichain.io)

- shared/components/AsyncComponent.tsx: Async data loading patterns
  * CardSkeleton / ListItemSkeleton / TableSkeleton - Animated loading states
  * LoadingState - Kurdistan green spinner with custom message
  * ErrorState - Red alert with retry button
  * EmptyState - Empty inbox icon with optional action
  * AsyncComponent<T> - Generic wrapper handling Loading/Error/Empty/Success states

- web/src/App.tsx: Wrapped with ErrorBoundary
  * All React errors now caught gracefully
  * Beautiful fallback UI instead of white screen of death

Production-ready error handling with bilingual support (EN/KMR).
2025-11-16 21:58:05 +00:00
..

Shared Code

This directory contains code shared between web, mobile, and SDK UI applications.

Structure

  • types/ - TypeScript type definitions and interfaces

    • blockchain.ts - Blockchain-related types (WalletAccount, Transaction, etc.)
    • tokens.ts - Token and DEX types (TokenInfo, PoolInfo, SwapQuote, etc.)
  • constants/ - Shared constants and configuration values

    • KNOWN_TOKENS - Token definitions (HEZ, PEZ, USDT)
    • KURDISTAN_COLORS - Color palette (Kesk, Sor, Zer, Spî, Reş)
    • SUPPORTED_LANGUAGES - Available languages (EN, TR, KMR, CKB, AR, FA)
    • TOKEN_DISPLAY_SYMBOLS - Display vs blockchain symbol mapping
  • blockchain/ - Blockchain-related utilities

    • polkadot.ts - Polkadot/Substrate utilities and endpoints
    • DEFAULT_ENDPOINT - Current blockchain endpoint (beta testnet)
  • i18n/ - Internationalization

    • locales/ - Translation files for 6 languages
    • LANGUAGES - Language configurations with RTL support
    • translations - All locale data
  • utils/ - Utility functions and helpers

    • formatting.ts - Address and number formatting
    • validation.ts - Input validation utilities

Usage

Import shared code in your projects:

// 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';

Guidelines

  • Keep code framework-agnostic when possible
  • Add comprehensive JSDoc comments
  • Write unit tests for utilities
  • Avoid platform-specific dependencies
  • Use relative imports: ../../../shared/... from web/mobile/SDK UI