Seeking Help with AppKit Mobile Wallet Connection in Telegram Mini-App

[Madeindreams]

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!

[mezger75]

Hi!
Did you try adding custom connectors to the wagmiAdapter? It can help with your issue. Here’s an example of how you can set it up:

import { CreateConnectorFn, webSocket } from 'wagmi';
import { walletConnect, injected, metaMask } from 'wagmi/connectors';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { polygonAmoy } from '@reown/appkit/networks';

export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID as string;

const metadata = {
  name: 'name',
  description: 'description',
  url: 'https://url.com', 
  icons: [''], // TODO: Add logo
};

const connectors: CreateConnectorFn[] = [];
connectors.push(walletConnect({ projectId, metadata, showQrModal: false })); // showQrModal must be false
connectors.push(injected({ shimDisconnect: true }));
connectors.push(metaMask({ dappMetadata: metadata })); // for mobile connection

export const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  projectId,
  networks: [polygonAmoy],
  connectors,
  transports: {
    [polygonAmoy.id]: webSocket(
      process.env.NEXT_PUBLIC_INFURA_API_URL_AMOY_WS as string
    ),
  },
});