[bug]: Can't connect to wallet like SafePal, Trust Wallet...

mtr1012 commented 3 months ago

Description

I have integrated the @web3modal/wagmi-react-native via the docs from WalletConnect into my app: https://docs.walletconnect.com/web3modal/react-native/about I use the W3mButton to connect with wallets, I can connect with only MetaMask wallet. When I try to connect with other wallets like SafePal and Trust Wallet, those wallets will stuck on the connecting step, and no connect confirmation alert appears. I'm not sure if it's an SDK bug or a wallet bug. Please help. Thanks for your time!

Web3Modal SDK version

"@web3modal/wagmi-react-native": "^1.2.1"

Output of `npx react-native info`

System:
  OS: macOS 14.4
  CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Memory: 32.40 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.5.1
    path: /usr/local/bin/node
  Yarn:
    version: 1.19.1
    path: ~/travala-mobile-app/node_modules/.bin/yarn
  npm:
    version: 9.8.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.10.09.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/alex/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-29 | Google Play Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-33 | Google APIs Intel x86 Atom_64
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9477386
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/alex/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Expo Version (if applies)

No response

Steps to reproduce

Integrate the wallet connect flow via: https://docs.walletconnect.com/web3modal/react-native/about.
Use W3mButton component to render the connect button.
Use the button to connect to Trust Wallet or SafePal.
You will be redirected to those wallets.
You can't see the connect confirmation alert.

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

ignaciosantise commented 3 months ago

hey @mtr1012 👋 Some questions:

can you check what happens if you close the dapp and open it again?
could you upload a video showing the complete flow?
Can you provide your implementation code? Which chain are you trying to connect?

mtr1012 commented 3 months ago

hey @mtr1012 👋 Some questions:

can you check what happens if you close the dapp and open it again?

could you upload a video showing the complete flow?

Can you provide your implementation code? Which chain are you trying to connect?

I've tried but no luck
You can see the video here: https://youtu.be/vCOvlssJKnE
Here is my code:

//My Config const chains = [mainnet, bsc] const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata }) createWeb3Modal({ projectId, chains, wagmiConfig })

// My app

// I use <W3mButton /> from '@web3modal/wagmi-react-native' to connect

Thanks for your time @ignaciosantise

ignaciosantise commented 3 months ago

@mtr1012 the issue is weird 🤔 and your configuration seems to be OK. Some other questions:

Are you using the latest version of Trust? (v11.2 now)
Are you using a VPN? If so, can you check turning it off?
Does the error happen on both iOS and Android?
Can you check if this sample project works for you? https://github.com/ignaciosantise/walletconnect-test

mtr1012 commented 3 months ago

@mtr1012 the issue is weird 🤔 and your configuration seems to be OK. Some other questions:

Are you using the latest version of Trust? (v11.2 now)

Are you using a VPN? If so, can you check turning it off?

Does the error happen on both iOS and Android?

Can you check if this sample project works for you? https://github.com/ignaciosantise/walletconnect-test

The missing icons parameter in metadata is the reason. Thanks for your support. I think you should update the docs and mark the icons parameter is required 😂

ignaciosantise commented 3 months ago

@mtr1012 thanks for reporting 🤝

do you use Typescript? It should throw an error if the metadata doesn't contain icons

mtr1012 commented 3 months ago

@mtr1012 thanks for reporting 🤝

do you use Typescript? It should throw an error if the metadata doesn't contain icons

Unfortunately, I'm using js instead

WalletConnect / web3modal-react-native