Telegram Mini App (Connect a wallet)

[eriscrypt]

Hello everyone! I really hope for your help. The issues are specifically with Telegram Mini Apps.
1. Coinbase opens the page keys.coinbase.com and then freezes.
2. Metamask works very poorly, sometimes it prompts for a connection, and other times it doesn’t work at all.
3. Connecting any social network leads to a blank page - http://.
4. Email connection doesn’t work (the confirmation code is not received).

On the desktop version, everything works perfectly. It also works fine when accessed through native apps, such as Metamask on iOS.

Am I possibly doing something wrong? Unfortunately, there aren’t many alternatives. I tried using Thirdweb but couldn’t set it up to interact with Wagmi since my entire project is built with Wagmi. I’m hoping for your help!

layout.tsx

<ReownProvider cookies={cookies}>
     <TelegramSDK>{children}</TelegramSDK>
</ReownProvider>

ReownProvider.tsx

'use client';

import { wagmiAdapter, projectId } from '@/config';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createAppKit } from '@reown/appkit/react';
import { sonic } from '@reown/appkit/networks';
import React, { type ReactNode } from 'react';
import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi';

if (!projectId) {
    throw new Error('Project ID is not defined');
}

const queryClient = new QueryClient();

const metadata = {
    name: 'appkit-example',
    description: 'AppKit Example',
    url: 'https://appkitexampleapp.com',
    icons: ['https://avatars.githubusercontent.com/u/179229932'],
};

// Create the modal
createAppKit({
    projectId,
    adapters: [wagmiAdapter],
    networks: [sonic],
    defaultNetwork: sonic,
    metadata: metadata,
    features: { email: true, analytics: true },
});

function ReownProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
    const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies);

    return (
        <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
    );
}

export default ReownProvider;

TelegramSDK

'use client';

import { init, isTMA } from '@telegram-apps/sdk-react';
import { type ReactNode, useEffect } from 'react';

function TelegramSDK({ children }: { children: ReactNode }) {
    useEffect(() => {
        const checkTelegram = async () => {
            window.isTelegram = await isTMA();
            if (window.isTelegram) init();
        };
        checkTelegram().catch(console.error);
    }, []);

    return <>{children}</>;
}

export default TelegramSDK;

WagmiAdapter

export const networks = [sonic];

const metadata = {
    name: 'appkit-example',
    description: 'AppKit Example',
    url: 'https://appkitexampleapp.com', // origin must match your domain & subdomain
    icons: ['https://avatars.githubusercontent.com/u/179229932'],
};

const connectors: CreateConnectorFn[] = [];
connectors.push(walletConnect({ projectId, metadata, showQrModal: false })); // showQrModal must be false
connectors.push(injected({ shimDisconnect: true }));
connectors.push(
    coinbaseWallet({
        appName: metadata.name,
        appLogoUrl: metadata.icons[0],
    }),
);

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
    storage: createStorage({
        storage: cookieStorage,
    }),
    ssr: true,
    projectId,
    networks,
    connectors,
});

export const config = wagmiAdapter.wagmiConfig;