pz-portal / react-twa-boilerplate Goto Github PK

No backend integration, mocked interactions.

As app will not render several elements and components that are dependant on Telegram specific functions and user settings passed in runtime, native components (eg. MainButton) are replaced or backed by static UI but kept in the code for reference.

Live TWA: @ton_solutions_waitlist_bot.

git clone https://github.com/TONSolutions/react-twa-boilerplate.git
cd react-twa-boilerplate
npm i
npm run dev

Quick routes to bypass validation:

/signup

/success

/error

Install the package: npm install @tonsolutions/telemetree-react --save or yarn add @tonsolutions/telemetree-react

import the lib and wrap your app with the provider (How to get your keys):

import { TwaAnalyticsProvider } from '@tonsolutions/telemetree-react'

<TwaAnalyticsProvider
      projectId='YOUR_PROJECT_ID'
      apiKey='YOUR_API_KEY'
      appName='YOUR_APPLICATION_NAME'
    >
{/_ Rest of your app components _/}
</TwaAnalyticsProvider>

(working "Boilerplate" project is set in the code but it will not send events — user is not set error — unless being wrapped as an actual TWA)

Import in the target component: import { useTWAEvent } from '@tonsolutions/telemetree-react';

Initialize the event builder: const eventBuilder = useTWAEvent();

And track an event:

const handleButtonClick = () => {
  eventBuilder.track('Button Clicked');
  // ... rest of your click handling logic
};

Full integration documentation incl data enrichment and wallet events is available in the React SDK reference.

Kudos to KonstaUI for dynamic iOS/Android context switching.

Built with passion by TON Solutions in New York City, USA 🇺🇸