{wallet.name}

``` -------------------------------- ### Reactively Read Telegram Theme Parameters Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt Reads the Telegram color palette reactively from themeParams.state or falls back to launch parameters. Use this to dynamically adjust your app's theme. ```tsx // src/app/theme-params/page.tsx 'use client'; import { themeParams, useSignal, useLaunchParams } from '@tma.js/sdk-react'; import { useMemo } from 'react'; import { DisplayData } from '@/components/DisplayData/DisplayData'; export default function ThemeParamsPage() { const tp = useSignal(themeParams.state); const lp = useLaunchParams(); const rows = useMemo(() => { const data = (Object.keys(tp || {}).length > 0 ? tp : lp.tgWebAppThemeParams) || {}; return Object.entries(data).map(([title, value]) => ({ // normalize camelCase → snake_case and "background" → "bg" title: title.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`).replace(/background/, 'bg'), value, })); }, [tp, lp.tgWebAppThemeParams]); // Expected rows: bg_color, button_color, hint_color, link_color, text_color, ... return ; } ``` -------------------------------- ### Control Back Button Visibility with Page Wrapper Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt Use the `` component to manage the visibility of Telegram's native back button. Set `back={false}` on root pages to hide it; it's shown by default on sub-pages. ```tsx // src/components/Page.tsx import { Page } from '@/components/Page'; // Root page — hide the back button export default function Home() { return ( {/* content */} ); } // Sub-page — show back button (default) export default function SettingsPage() { return ( {/* Telegram back button appears automatically; tapping it calls router.back() */} ); } ``` -------------------------------- ### TON Connect Wallet Integration Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt Integrates TON Connect for wallet functionality. Displays a connect button if no wallet is linked, otherwise shows account and device information. Uses openLink to open wallet URLs in the in-app browser. ```tsx // src/app/ton-connect/page.tsx 'use client'; import { openLink } from '@tma.js/sdk-react'; import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react'; import { Avatar, Cell, List, Section, Title, Navigation } from '@telegram-apps/telegram-ui'; import { DisplayData } from '@/components/DisplayData/DisplayData'; import { Page } from '@/components/Page'; export default function TONConnectPage() { const wallet = useTonWallet(); // null until user taps TonConnectButton if (!wallet) { return ( {/* Renders the official TON Connect modal button */} ); } const { account: { chain, publicKey, address }, device: { appName, appVersion, platform, features } } = wallet; return ( {'imageUrl' in wallet && (

} after={About wallet} subtitle={wallet.appName} onClick={(e) => { e.preventDefault(); openLink(wallet.aboutUrl); }} > {wallet.name}

)} typeof f === 'object' ? f.name : undefined).filter(Boolean).join(', ') }, ]} /> ); } // Required: /public/tonconnect-manifest.json // { "url": "https://your-app.com", "name": "Your App", "iconUrl": "https://your-app.com/logo.png" } ``` -------------------------------- ### Runtime Locale Selector `` Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt A Telegram UI ` with English / Русский options. // Selecting an option calls setLocale(value) which sets the NEXT_LOCALE cookie. // Adding a new locale: // 1. Add key to locales array in config.ts // 2. Add entry to localesMap // 3. Create public/locales/.json with your translation keys ``` -------------------------------- ### Conditional Class Name Joiner: `classNames(...values)` Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt A utility function for joining CSS class names, similar to the popular `classnames` npm package. It supports various input types including strings, objects with boolean conditions, and arrays, allowing for dynamic class name generation. ```typescript // src/css/classnames.ts import { classNames } from '@/css/classnames'; classNames('foo', 'bar') // → 'foo bar' classNames('foo', { bar: true, baz: false }) // → 'foo bar' classNames(['foo', null, 'bar']) // → 'foo bar' classNames('base', isActive && 'active') // → 'base active' or 'base' classNames(undefined, '', 'valid') // → 'valid' ``` -------------------------------- ### RGB Color Swatch Component `` Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt Renders a small colored square followed by its hex string representation. This component is automatically used by `DisplayData` when an RGB value is detected. It checks for valid RGB hex strings using the regex /^#[0-9A-Fa-f]{6}$/. ```tsx import { RGB } from '@/components/RGB/RGB'; // Renders: [■] #5288c1 (■ is a filled square with backgroundColor: #5288c1) // Used internally by DisplayData when isRGB(value) === true // isRGB checks: /^#[0-9A-Fa-f]{6}$/ ``` -------------------------------- ### BEM Class Name Factory: `bem(block)` Source: https://context7.com/telegram-mini-apps/nextjs-template/llms.txt A utility function that generates BEM (Block, Element, Modifier) class names. It returns a tuple containing a block function and an element function. The block function creates base block classes with optional modifiers, while the element function generates `block__element` classes with optional modifiers. ```typescript // src/css/bem.ts import { bem } from '@/css/bem'; const [b, e] = bem('my-card'); b() // → 'my-card' b('active') // → 'my-card my-card--active' b({ active: true, big: false }) // → 'my-card my-card--active' e('header') // → 'my-card__header' e('header', 'large') // → 'my-card__header my-card__header--large' e('icon', { hidden: true }) // → 'my-card__icon my-card__icon--hidden' // Real usage in ton-connect/page.tsx: const [, e] = bem('ton-connect-page'); // → className="ton-connect-page__button" ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.