Skip to main content

id: twa-core

TWA Core Infrastructure

Status​

Core TWA infrastructure is implemented and operational.

Overview​

The foundation of the Mini App built with React, TanStack Router, and Telegram Web App SDK.

Components​

  • React Framework
    • Vite build system
    • TypeScript support
    • Error boundaries
    • Component architecture
  • TWA Integration
    • SDK initialization
    • Theme handling
    • Launch parameters
    • Init data validation
  • Routing System
    • TanStack Router setup
    • Type-safe routes
    • Navigation components
    • Error handling

Technical Implementation​

// TWA SDK Initialization
export function initTWA() {
  if (!isInTelegram()) {
    throw new Error('Not in Telegram environment');
  }

  const webApp = window.Telegram.WebApp;
  webApp.ready();

  // Enable closing confirmation
  webApp.enableClosingConfirmation();

  // Setup theme handling
  webApp.onEvent('themeChanged', () => {
    updateTheme(webApp.themeParams);
  });

  return webApp;
}

// Route Configuration
export const routeTree = routeTree({
  component: () => <Root />,
  children: [
    {
      path: '/',
      component: IndexPage,
    },
    {
      path: '/theme',
      component: ThemeParamsPage,
    },
    {
      path: '/init',
      component: InitDataPage,
    },
    {
      path: '/ton',
      component: TONConnectPage,
    },
  ],
});

Project Structure​

src/
├── components/          # Reusable UI components
│   ├── App.tsx         # Main app component
│   ├── Root.tsx        # Root layout
│   └── ErrorBoundary.tsx
├── pages/              # Application pages
├── navigation/         # Navigation utilities
├── helpers/           # Helper functions
└── init.ts           # TWA initialization

Features​

  1. Environment Detection

    • Telegram environment validation
    • Development mode support
    • Mock environment for testing

  2. Theme Support

    • Light/dark mode
    • Dynamic theme updates
    • Custom color schemes

  3. Navigation

    • Type-safe routing
    • Navigation guards
    • Error handling

  4. Error Management

    • Global error boundary
    • Component-level error handling
    • Development error messages

NEXT_TASK: Implement advanced navigation features including deep linking support, navigation state persistence, and route-based code splitting