[bug]: linkMode not working after connecting wallet

[putti-johnnie]

Description

Actually, there are 2 issues:

• when a MetaMask wallet is successfully connected, it does not go back to my dapp.
• I am using const { data: walletClient } = useWalletClient(); to monitor the wallet status, but it doesn't get updated once the wallet is connected.
  As you can see from the attached video, once I go back to my app manually, it doesn't show the address until I refresh the entire app.

BTW, I can confirm the universal link is working properly.

AppKit SDK version

"@reown/appkit-wagmi-react-native": "^1.1.1",

Output of npx react-native info

System:
  OS: macOS 15.0.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 1.33 GB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 3.6.1
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman:
    version: 2024.11.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 34.0.0
      - 35.0.0
      - 35.0.0
    System Images:
      - android-22 | ARM 64 v8a
      - android-22 | Google APIs ARM 64 v8a
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-32 | Google Play ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-TiramisuPrivacySandbox | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.3.6
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Expo Version (if applies)

"expo": "~52.0.25"

Steps to reproduce

• call await open(); // from const { open } = useAppKit()
• select MetaMask to connect wallet
• successful connect wallet in MetaMask app
• not navigate back to my app

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

wagmi config:

    const metadata = {
        name: 'Johnnie test',
        description: 'playground app',
        url: 'https://my-domain',
        icons: ['https://avatars.githubusercontent.com/u/179229932'],
        redirect: {
            native: 'johnnietest://',
            universal: 'https://****/appkit', // masked domain
            linkMode: true,
        },
    }

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

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

    createAppKit({
        projectId,
        wagmiConfig,
        defaultChain: mainnet,
        enableAnalytics: false,
    })

video:

ScreenRecording_01-17-2025.19-48-08_1.mov

[ignaciosantise]

hey @putti-johnnie 👋 Which version of MetaMask are you using? Are you using the latest? Also, does the redirect work in Trust Wallet?

[putti-johnnie]

@ignaciosantise Yes, I am using the latest MetaMask from AppStore.
And it's not working for Trust wallet either.

Maybe I missed some config? Do I need any additional setup in the project dashboard except the iOS Bundle IDs?

[ignaciosantise]

@putti-johnnie maybe your project doesn't have deep-links enabled. Here's the official guide to enable them: https://reactnative.dev/docs/linking#enabling-deep-links

[putti-johnnie]

@ignaciosantise hmm... I am pretty sure the unniversal link is working on iOS. I have other feature working with universal link.

[ignaciosantise]

@putti-johnnie the config seems okey 🤔 can you provide a fresh project where i can repro the issue?

[putti-johnnie]

@ignaciosantise I can try to prepare a fresh project.

Meanwhile, could you please check my other issue?
Once a wallet is connected, how can I get the wallet address? walletClient does not get updated until refresh the app.
Thanks in advance.

[ignaciosantise]

@putti-johnnie you can use useAccount from wagmi

import { useAccount } from 'wagmi';

...

const { address } = useAccount();

[iamthemuhammadirfan]

@ignaciosantise I've used this with ethers as well. The problem is while connecting with the metamask. It successfully came back but after coming back, it again redirected to metamask. IDK why.

AppkitConfig FIle

import '@walletconnect/react-native-compat';

import { createAppKit, defaultConfig } from '@reown/appkit-ethers-react-native';

import envs from '@constants/environment';

const AppKitConfig = () => {
  const projectId = envs.APPKIT_PROJECT_ID as string;

  const metadata = {
    name: 'Krown',
    description: 'Krown Network Wallet',
    url: 'https://krown.network/',
    icons: [
      'https://krown.network/wp-content/uploads/2024/09/Krown-Logo-wordmark-Horizontal-WEBSITE.png',
    ],
    redirect: {
      native: 'krownnetwork://',
    },
  };

  const config = defaultConfig({
    metadata,
  });

  const mainnet = {
    chainId: 1,
    name: 'Ethereum',
    currency: 'ETH',
    explorerUrl: 'https://etherscan.io',
    rpcUrl: 'https://1rpc.io/eth',
  };

  const chains = [mainnet];

  createAppKit({
    projectId,
    chains,
    config,
    enableAnalytics: true,
    debug: true,
    defaultChain: mainnet,
  });
};

export default AppKitConfig;

Wallet Setup Screen Where I'm calling the Modal by using my own button

import React from 'react';
import { StyleSheet, Image, View, ImageSourcePropType } from 'react-native';

import { AppButton, HeaderLayout, TextElement } from '@components/index';
import Images from '@assets/images';
import { horizontal, vertical } from '@styles/responsive';
import colors from '@styles/colors';
import { AppKit, useAppKit } from '@reown/appkit-ethers-react-native';
import Toast from 'react-native-toast-message';

export default function WalletSetupScreen() {
  const { open } = useAppKit();

  const showToast = () => {
    Toast.show({
      type: 'error',
      text1: 'Hello',
      text2: 'This is some something 👋',
      position: 'bottom',
    });
  };

  const handleOpenWallet = () => {
    open();
  };

  return (
    <HeaderLayout gradient>
      <AppKit />
      <View style={styles.container}>
        <Image
          source={Images.WalletSetup as ImageSourcePropType}
          resizeMode="contain"
          style={styles.image}
        />
        <TextElement
          fontSize={40}
          lineHeight={56}
          fontVariant="regular"
          style={styles.title}>
          Wallet Setup
        </TextElement>
      </View>
      <View style={styles.footer}>
        <AppButton
          title="Import Using Seed Phrase"
          style={styles.button}
          // onPress={showToast}
        />
        <AppButton
          title="Connect With Wallet"
          style={styles.button}
          isGradient
          gradientColors={colors.gradientBtnBackground}
          onPress={handleOpenWallet}
        />
      </View>
    </HeaderLayout>
  );
}

const styles = StyleSheet.create({
  button: {
    marginBottom: 16,
  },
  container: {
    flex: 0.8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    flex: 0.2,
    paddingHorizontal: horizontal(20),
  },
  image: {
    width: horizontal(220),
    height: vertical(210),
  },
  title: {
    position: 'absolute',
    bottom: vertical(32),
  },
});

[ignaciosantise]

hey @iamthemuhammadirfan your issue seems to be different, can you open a new issue + upload a video? Also, the issue seems related to Metamask, please be sure you are using the latest version

[ignaciosantise]

@putti-johnnie any news on your side about your issue?

[iamthemuhammadirfan]

@ignaciosantise sure, Here is a video for that

ScreenRecording.mp4

Even via TrustWallet, it has the same issue on Android as well.

Android.mp4

[putti-johnnie]

@ignaciosantise sorry for the delay, just back from holiday.
Don't worry about the universal link issue, I switched to deeplink now, and everything is working as expected.
However, I still face the wallet address issue and a new disconnect wallet issue.
Here is the example app to reproduce https://github.com/putti-johnnie/auth-test
Thank you

[putti-johnnie]

@ignaciosantise
I am useing const { open } = useAppKit() to connect wallet, but sometimes it doesn't do anyhing.
is there a way to see all the errors from appkit SDK?

[ignaciosantise]

hey @putti-johnnie 👋 i've checked your code and there's an improvement you could do -> move the appkit config code outside "RootLayout" ->

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import 'react-native-reanimated';
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 { createAppKit, defaultWagmiConfig, AppKit } from '@reown/appkit-wagmi-react-native'

import { useColorScheme } from '@/hooks/useColorScheme';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

const queryClient = new QueryClient()

const projectId = 'PROY_ID'

const metadata = {
  name: 'Authtest',
  description: 'AppKit RN Example',
  url: 'https://authtest.co.nz',
  icons: ['https://avatars.githubusercontent.com/u/179229932'],
  redirect: {
    native: 'auth.test://',
  }
}

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

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

// 3. Create modal
createAppKit({
  projectId,
  wagmiConfig,
})


export default function RootLayout() {
  ...


  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
          <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="+not-found" />
          </Stack>
          <StatusBar style="auto" />
        </ThemeProvider>
        <AppKit />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

regarding your issues:

• "I still face the wallet address" -> Can you provide more info? I connected to a wallet and i can see the address. Can you update your code and check again?
• "a new disconnect wallet issue" -> Couldn't repro -> Can you update your code and check again?
• "but sometimes it doesn't do anyhing." If you press "Connect" fast, before the modal is setup, it won't open.

[putti-johnnie]

@ignaciosantise thanks for checking, I can confirm they all work after moving config out of App component.

Meanwhile I am getting another issue regarding Coinbase wallet, I have followed example app to add Coinbase Wallet supports. But I got "Connection error" constantly. Can you pull my latest commit and run npx expo run:android --device to check?
Thank you

IMG_9279.mov