How to initialize the TON Connect's AppKit

#     AppKit React      TanStack Query        TON Connect          Core packages         # Buffer polyfill
npm i @ton/appkit-react @tanstack/react-query @tonconnect/ui-react @ton/core @ton/crypto buffer

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  // ...prior options...
  resolve: {
    alias: {
      buffer: 'buffer/',
    },
  },
  define: {
    Buffer: ['buffer', 'Buffer'],
  },
  // ...later options...
});

import { AppKit, AppKitProvider } from '@ton/appkit-react';
import '@ton/appkit-react/styles.css';

const kit = new AppKit({});

// Wrap application in `AppKitProvider` and pass the `AppKit` instance.
export function App() {
  return <AppKitProvider appKit={kit}>{/* ...app... */}</AppKitProvider>;
};

// AppKit
import {
  AppKit,
  AppKitProvider,
  Network,
  // Wallet connector
  TonConnectConnector,
} from '@ton/appkit-react';

// Styles
import '@ton/appkit-react/styles.css';

// DeFi provider
import { OmnistonSwapProvider } from '@ston-fi/omniston-sdk';

// TanStack Query
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Query client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Do not refetch when window is refocused
      refetchOnWindowFocus: false,
    },
  },
});

// Initialization
const kit = new AppKit({
  // 1. Configure networks and API clients.
  networks: {
    // Production network. All contracts and funds are real.
    [Network.mainnet().chainId]: {
      apiClient: {
        // Most commonly used, official API client.
        url: 'https://toncenter.com',

        // A key to access higher RPS limits.
        // Get it from https://t.me/toncenter
        key: '<MAINNET_API_KEY>',
      },
    },
  },
  // 2. Configure connectors.
  connectors: [
    // Enables connections with TON wallet services, such as Tonkeeper or MyTonWallet.
    new TonConnectConnector({
      tonConnectOptions: {
        // Public link to the application manifest JSON file.
        // For local development and testing, use the one from a demo dApp:
        manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
      },
    }),
  ],
  // 3. Configure DeFi providers.
  providers: [new OmnistonSwapProvider()],
});

// 4. Wrap the rest of the app in a QueryClientProvider and an AppKitProvider.
export function App() {
  return (
    <AppKitProvider appKit={kit}>
      <QueryClientProvider client={queryClient}>
        {/* ...app... */}
      </QueryClientProvider>
    </AppKitProvider>
  )
};