[bug]: MetaMask not opening

GioLogist commented 1 week ago

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[bot] commented 1 week ago

APKTN-274 [bug]: MetaMask not opening

ignaciosantise commented 1 week ago

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

GioLogist commented 1 week ago

No errors in console. Here's the video

https://github.com/user-attachments/assets/5a0151e3-4eae-4548-89d6-a167cda7f3ba

kale5195 commented 1 week ago

same

ignaciosantise commented 1 week ago

@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 commented 1 week ago

@ignaciosantise That's the version I'm on

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

ignaciosantise commented 5 days ago

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

GioLogist commented 5 days ago

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

ignaciosantise commented 5 days ago

@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 commented 5 days ago

@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 commented 5 days ago

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 commented 5 days ago

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 commented 5 days ago

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

https://github.com/user-attachments/assets/c591908f-668e-481b-9403-e08ec0512868

ignaciosantise commented 5 days ago

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 commented 5 days ago

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

ignaciosantise commented 5 days ago

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

GioLogist commented 5 days ago

@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 commented 4 days ago

@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.

https://github.com/user-attachments/assets/4ad5a444-6dcd-4d80-a59d-c9355aa57741

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

GioLogist commented 4 days ago

@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 commented 4 days ago

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 commented 4 days ago

@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 commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

@ignaciosantise console in cloud while making the app?

ignaciosantise commented 4 days ago

yes, while you create the new project in Cloud 🙏

GioLogist commented 4 days ago

@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

https://github.com/user-attachments/assets/cd5aba0f-6363-479c-8ccc-267409610f34

ignaciosantise commented 4 days ago

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

GioLogist commented 4 days ago

@ignaciosantise awesome, much appreciated 🙏🏻

WalletConnect / web3modal-react-native