Walletconnect mobile support (react-wallet-kit)

[amircheikh]

This PR adds the ability to connect mobile WalletConnect compatible wallets when the user opens the login modal on their phone.

Dear reviewer: please double check the TODO comments I left.

How it works

In core, the fetchWalletConnectApps function hits the https://explorer-api.walletconnect.com/v3/wallets endpoint to retrieve a list of all WalletConnect supported wallets. The developer's WalletConnect project id must be passed into the function.

In react-wallet-kit, a helper buildWalletConnectProviders function is exposed. Using a passed projectId This function fetches the apps and builds them into a list of WalletProviders. We prefer the type for these apps to be our WalletProvider type since we can reuse the same type for all our wallet connection UI components.

The provider function fetchAndBuildWalletConnectApps is ran automatically if WalletConnect is enabled using the projectId passed into the TurnkeyConfig. This function will run buildWalletConnectProviders and save the result to a new, exposed state variable, walletConnectApps.

The UI components for wallet connecting and authentication are all expanded to support this new system.

On Desktop: clicking WalletConnect will take you to the QR code scanning screen. You can optionally see all the supported WalletConnect apps as well by clicking the button.

On Mobile: You'll usually be sent directly to the screen where you see all apps. Selecting one will open it if available and take you thru the connecting / signing flow.

Demo

Mobile:

ScreenRecording_01-12-2026_09-38-59_1.mov

Desktop (mostly the same as before):

534643410-49191e77-0173-4472-b7b7-651bc2dd3a7a.mov

Additional screenshots of each screen:

All app selection:

Open app:

Sign login request:

QR code scanning:

Trying to open mobile app on desktop:

How I Tested These Changes

Locally. Using tunneling service to test my phone.

Did you add a changeset?

Will after reviews

If updating one of our packages, you'll likely need to add a changeset to your PR. To do so, run pnpm changeset. pnpm changeset will generate a file where you should write a human friendly message about the changes. Note how this (example) includes the package name (should be auto added by the command) along with the type of semver change (major.minor.patch) (which you should set).

These changes will be used at release time to determine what packages to publish and how to bump their version. For more context see this comment.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9c74e78:

Sandbox	Source
@turnkey/example-react-components	Configuration