WalletConnect Popup for selecting Wallets is not working

[anandparmar-quark]

Hi @clxyder,
Thanks for this source code.

I have cloned your repo and tried to run it as instructed in README.md. But when I tap on "Connect to Wallet" CTA, it takes me to the browser instead of showing WalletConnect Popup for selecting Wallets. Attaching a reference video.
Note: I have Metamask And Rainbow wallets installed on the mobile. And Didn't change anything in the code.

Am I missing anything? Please help me here.

WalletConnect-Issue.mp4

[iamsdas]

Android 11 onwards, you must specify the intents of the schemes you wish to handle in the AndroidManifest.xml file. For expo-managed workflows, I add this code to the app.config.ts to do so:

import {
  AndroidManifest,
  ConfigPlugin,
  withAndroidManifest,
} from '@expo/config-plugins';
import { ExpoConfig } from '@expo/config-types';
import xml2js from 'xml2js';

const queriesXml = `
<queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="wc"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="https"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="wss"/>
    </intent>
</queries>`;

const addQueryToManifest = (androidManifest: AndroidManifest) => {
  const { manifest } = androidManifest;
  let packageQuery;

  xml2js.parseString(
    queriesXml,
    (err, result) => (packageQuery = result.queries)
  );

  if (!Array.isArray(manifest['queries'])) {
    manifest['queries'] = [];
  }

  manifest['queries'].push(packageQuery);

  return androidManifest;
};

const withPackageVisibility: ConfigPlugin = (config) => {
  return withAndroidManifest(config, (config) => {
    config.modResults = addQueryToManifest(config.modResults);
    return config;
  });
};

const config: ExpoConfig = {
  name: 'rndapp',
  slug: 'rndapp',
};

export default withPackageVisibility(config);

Without this, your app will not be able to detect your wallet (metamask/rainbow) and open that webpage.

[anandparmar-quark]

@iamsdas Thanks for the reply. The above-mentioned solution worked perfectly.

[clxyder]

Hey @anandparmar-quark can you open a PR with the changes you made to get android to function correctly? I've played around a bit trying to make it work and I have had no luck with it yet.

I keep getting that 404 on my emulated android, when I transferred over my app.json into app.congfig.ts.

EDIT: I see that I would need to run expo prebuild for it to work correctly, but this would break the Expo Go app usage.