Skip to main content

id: architecture

Mini App Architecture

Overview​

TON Arcana Mini App is a Telegram Web App that provides a rich interface for tarot readings and token management. Built with React and integrated with the TON blockchain.

Core Technologies​

  • Framework: React
  • State Management: Redux Toolkit
  • Styling: TailwindCSS
  • API Client: GraphQL (Apollo Client)
  • Blockchain: TON Connect
  • UI Framework: Telegram Mini App SDK

Key Components​

1. Core Application​

  • Location: src/app/
  • Features:
    • Application routing
    • State management
    • Theme handling
    • Error boundaries

NEXT_TASK: Implement core state management with Redux Toolkit and integrate theme handling system

2. Token Integration​

  • Location: src/features/token/
  • Features:
    • Wallet connection
    • Balance display
    • Transaction history
    • Transfer interface

3. Reading Interface​

  • Location: src/features/reading/
  • Components:
    • Card selection
    • Spread visualization
    • Reading results
    • History view

4. User Interface​

  • Location: src/components/
  • Features:
    • Reusable components
    • Layout system
    • Navigation
    • Animations

Infrastructure​

1. State Management​

  • Redux store configuration
  • Action creators
  • Thunk middleware
  • State selectors

2. API Integration​

  • GraphQL queries
  • Mutation handlers
  • Error management
  • Cache control

3. Blockchain Integration​

  • TON Connect setup
  • Transaction handling
  • Event listeners
  • Wallet management

4. UI/UX​

  • Responsive design
  • Dark/light themes
  • Loading states
  • Error handling

Development​

Testing​

  • React Testing Library
  • Jest configuration
  • Component testing
  • Integration tests

Deployment​

  • Vercel configuration
  • Environment management
  • Build optimization
  • Performance monitoring

Development Tools​

  • ESLint setup
  • Prettier config
  • TypeScript
  • Hot reload

Common Utilities​

Shared Components​

  • Form elements
  • Loading states
  • Error displays
  • Modals

Helper Functions​

  • Formatting utilities
  • Validation helpers
  • Type guards
  • Constants

Security​

Data Protection​

  • Input sanitization
  • XSS prevention
  • CORS configuration
  • Secure storage

Error Handling​

  • Boundary setup
  • Error reporting
  • Recovery actions
  • User feedback