Issue with AppKit Mobile Wallet Connection in Telegram Mini-App

[Madeindreams]

Discussed in https://github.com/orgs/WalletConnect/discussions/5474

^{Originally posted by Madeindreams November 4, 2024}
Hi everyone,

I'm developing a Telegram mini-app (using React) and implementing AppKit for wallet connections. However, I'm encountering an issue with triggering the correct mobile wallet options.

Current Issue
When I trigger the wallet modal, the mobile (Android/iPhone) app shows only the "Browser Wallet" option, which doesn’t connect as expected. On the desktop version of Telegram, the app offers the wallet connection options and works well. I’d like to know how to ensure the correct mobile wallet connection option appears in the mobile app.

My Setup
Here’s my AppKit implementation:

import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet, polygon, AppKitNetwork, sepolia } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { WagmiHooks } from './components/hooks'

const queryClient = new QueryClient()
const projectId = '<YOUR_PROJECT_ID>'

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

const networks: [AppKitNetwork, ...AppKitNetwork[]] = [arbitrum, mainnet, polygon, sepolia]
const generalConfig = { networks, projectId }
const wagmiAdapter = new WagmiAdapter(generalConfig)

const modal = createAppKit({
    adapters: [wagmiAdapter],
    networks,
    projectId,
    metadata
})

export function App() {
    return (
        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
            <QueryClientProvider client={queryClient}>
                <w3m-button/>
                <button onClick={() => modal.open()}>Open Wallet</button>
                <WagmiHooks />
            </QueryClientProvider>
        </WagmiProvider>
    )
}

The above setup works well on desktop, offering the expected wallet connection options. But on mobile, I’m seeing only the browser wallet option. I referenced the docs and found a working example bot that opens the correct mobile wallet options within Telegram (bot link: AppKit Test Bot).

This is what i see on the mobile app

Questions
Is there any specific configuration needed to enable the correct mobile wallet options?
Has anyone encountered this issue with the mobile wallet connection in Telegram, and if so, how did you resolve it?

Additional Details
Packages:

"@reown/appkit": "^1.1.5"
"@reown/appkit-adapter-wagmi": "^1.1.5"
"@tanstack/react-query": "^5.59.15"
"ethers": "^6.13.4"
"react": "^18.3.1"
"wagmi": "^2.12.19"

Any insights or guidance on how to resolve this would be greatly appreciated. Thanks in advance!

[linear]

CR-563 Issue with AppKit Mobile Wallet Connection in Telegram Mini-App