[bug]: MetaMask not opening

[GioLogist]

Description

Standard installation, I am unable to get my RN app to trigger MetaMask to open.

AppKit SDK version

"@web3modal/wagmi-react-native": "^2.0.2",

Output of npx react-native info

npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 14.4
CPU: (14) arm64 Apple M3 Max
Memory: 93.00 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.15.0
path: ~/.nvm/versions/node/v20.15.0/bin/node
Yarn:
version: 1.22.22
path: ~/.nvm/versions/node/v20.15.0/bin/yarn
npm:
version: 10.7.0
path: ~/.nvm/versions/node/v20.15.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: true
newArchEnabled: false

info React Native v0.75.2 is now available (your project is running on v0.74.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.75.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.5
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Expo Version (if applies)

No response

Steps to reproduce

• Fresh RN scaffold
• Use a screen like the one below
• Build on a physical device, with MetaMask installed
• Select "connect"
• Click MetaMask
• MetaMask does not open

Snack, code example, screenshot, or link to a repository

import "@walletconnect/react-native-compat";
import { WagmiProvider } from "wagmi";
import { mainnet, polygon, arbitrum } from "@wagmi/core/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  createWeb3Modal,
  defaultWagmiConfig,
  W3mButton,
  Web3Modal,
  //   Web3Modal,
} from "@web3modal/wagmi-react-native";
import { ThemedText } from "@/components/ThemedText";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedView } from "@/components/ThemedView";
import { Ionicons } from "@expo/vector-icons";

// 0. Setup queryClient
const queryClient = new QueryClient();

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = "REDACTED";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://walletconnect.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "YOUR_APP_UNIVERSAL_LINK.com",
  },
};

const chains = [mainnet, polygon, arbitrum] as const;

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

// 3. Create modal
createWeb3Modal({
  projectId,
  wagmiConfig,
  defaultChain: mainnet, // Optional
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ParallaxScrollView
          headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }}
          headerImage={
            <Ionicons size={310} name="code-slash" style={styles.headerImage} />
          }
        >
          <ThemedView style={styles.titleContainer}>
            <ThemedText type="title">Explore</ThemedText>
          </ThemedView>
          <W3mButton />
        </ParallaxScrollView>
        <Web3Modal />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: "row",
    gap: 8,
  },
});

[linear]

APKTN-274 [bug]: MetaMask not opening

[ignaciosantise]

Hey @GioLogist 👋 can you provide a video with the issue? Also, do you see any errors in the console?

[GioLogist]

No errors in console. Here's the video

RPReplay_Final1725573679.MP4

[kale5195]

same

[ignaciosantise]

@GioLogist are you using the wagmi package? If so, can you try updating to the latest version?

"viem": "2.21.2",
"wagmi": "2.12.8"

cc @kale5195

[GioLogist]

@ignaciosantise That's the version I'm on

    "viem": "^2.21.1",
    "wagmi": "^2.12.8",

[ignaciosantise]

@GioLogist are you using an allowlist in your Cloud project settings? If so, does the bundle id added there match your app id?

[GioLogist]

@ignaciosantise I do not see an option for this. I did, however, verify domain and verify my bundleId is correct

[ignaciosantise]

@GioLogist Go to Cloud -> Dashboard/Mobile Application IDs/iOS Bundle IDs or Android Package Names

Do you have something added there? If so, please check that those values correspond to your app id.

If you are using expo, don't use expo go as the bundle id is different.

[GioLogist]

@ignaciosantise Yep and it's correct

Also not using Expo Go. The app is actually built and in TestFlight, just experiencing issue shown in video

[GioLogist]

Could it be the app scheme? I haven't registered one yet:

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://walletconnect.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "YOUR_APP_UNIVERSAL_LINK.com",
  },
};```

[ignaciosantise]

No, i think the issue is related to the socket connection.
Just to confirm: can you open the modal, press "All Wallets" and then go to the QR Code view? Does it load?

if it doesn't:

• Can you check if you are using a valid project id? (check that it matches what you have in cloud)
• Can you check if creating a new project id makes it work?

[GioLogist]

Could it be that the App is considered a draft? Not sure how to get it out of draft mode

Here's the QR code view

RPReplay_Final1726003077.MP4

[ignaciosantise]

Okey, so its definitely a connection issue.

No, there's no problem if its Draft, but maybe there's an issue with that project id. Can you check creating a new draft? just to check if its that

[GioLogist]

@ignaciosantise Just tried a new projectId, 59ba1c50599d9f7eebdc74ca473f23d7, still same issue

[ignaciosantise]

Okey, then i'll need a minimal reproducible example so i can debug locally. Can you provide a sample repo with the issue?

[GioLogist]

@ignaciosantise The screen pasted above in description is the exact code i'm using, in a fresh Expo scaffold. You should be able to copy paste that into any Expo build (not using Expo Go)

[ignaciosantise]

@GioLogist i made a fresh expo app and i was able to make it work. But if i test with your project id, it doesn't work. Can you try removing all Mobile Application IDs from your Cloud dashboard?

This is a video using your code in a new project, BUT using my own project id.

test.mov

I'll also check with the Cloud team to see if there's something wrong with your project id

[GioLogist]

@ignaciosantise made yet another project and I think I found the issue. I was using AppKit Instead of WalletKit 🤦🏻‍♂️

I suppose it's not obvious to everyone which to use? We're making a DAPP and not a self custodial wallet like CB Wallet. So our impression was that AppKit was what we should use.

[ignaciosantise]

If you are making a dapp and want to connect with wallets, AppKit is the right tool for you -> With AppKit you'll be able to connect your dapp to any wallet in the list, and then you can use wagmi hooks to sign messages, etc

[GioLogist]

@ignaciosantise Well that's what's odd here then. The other two, non-working apps are AppKit and not working. But when I made a WalletKit one, it worked

[ignaciosantise]

That's really weird. I've just created a new project id for AppKit and works. I'll provide your project_id ("59ba1c50599d9f7eebdc74ca473f23d7") to the team to see if there's an issue in the process creation

[ignaciosantise]

Can you upload a video of the flow you are doing to create an AppKit project id? And can you also show in the video the navigator console to see if there's any error there?

[GioLogist]

@ignaciosantise console in cloud while making the app?

[ignaciosantise]

yes, while you create the new project in Cloud 🙏

[GioLogist]

@ignaciosantise Ok this is truly weird. BTW I had done this same thing prior and I got an error with an API key that included "echo" and the projectId. Not sure if that's related. This one had a separate error, but was successful

In the end, here's what I've experienced

• First app I made, using AppKit, led to original video posted where MetaMask wouldn't open
• Second app I made, also using AppKit, same issue
• Third app I made, using WalletKit, now opening MetaMask
• Fourth app I made, using AppKit, now opening MetaMask

Screen.Recording.2024-09-11.at.1.02.15.PM.mov

[ignaciosantise]

@GioLogist okey, i'll talk to the team then. But fortunately now you are unblocked now 🤝

[GioLogist]

@ignaciosantise awesome, much appreciated 🙏🏻