walletconnect / web3modal-react-native

Web3Modal React-Native SDK

📚 Documentation

🔎 Examples

Web3Modal SDK for React Native

Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.

Development

Please follow developer docs to set up web3modal locally.

web3modal-react-native's Issues

[bug]: Native matic transfers not working on rainbow (polygon)

Description

Not sure if this is a walletconnect or rainbow issue but I wanted to put it here.
When trying to do a native matic transfer on polygon
const txHash = await web3Provider.send("eth_sendTransaction", [txParams]);
It opens rainbow but nothing shows up, there is no option to send/sign the transaction. I tried the same steps on alpha wallet and it worked fine.

Web3Modal SDK version

1.0.0-alpha.8

Output of npx react-native info

N/A

Expo Version (if applies)

No response

Steps to reproduce

Try to deposit matic on polygon to rainbow with the steps i outlined.

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

N/A

[bug]: Can't find variable React

Description

I've imported '@web3modal/wagmi-react-native' and included in the the react native app. I get this error which says can't find variable React

Web3Modal SDK version

1.0.1

Output of npx react-native info

System:
OS: macOS 13.5.2
CPU: (10) arm64 Apple M1 Pro
Memory: 98.06 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.15.0
path: ~/.nvm/versions/node/v16.15.0/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 8.19.4
path: ~/mobile-app-old/mobile-app/node_modules/.bin/npm
Watchman:
version: 2023.03.20.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.0
path: /Users/shanthan/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode:
version: 15.0/15A240d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.16.1
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/shanthan/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: ^18.2.0
react-native:
installed: 0.72.8
wanted: ^0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: false
newArchEnabled: false

Expo Version (if applies)

No response

Steps to reproduce

Import the package into a react native project running on react-native ~ 0.72.4

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

Alpha Testing Bug fixes

W3mButton & Modal aren't auto-connecting wallet in React-Native

Describe the bug
A clear and concise description of what the bug is.

SDK Version (if relevant)

• Client: React-Native CLI
• Viem: 1.16.6
• WAGMI: 1.4.5
• React-Native: 0.72.4

To Reproduce
Steps to reproduce the behavior:

1. Create a react native cli app and install the wallet connect dependencies
2. Configure the _app page accordingly
3. Run the app and connect wallet.
4. Close the app and re-open

Expected behavior
If the user has already connected and approved the app, they stay connected until they choose to disconnect.

Desktop (please complete the following information):

• OS: iOS, Swift 3

Smartphone (please complete the following information):

• Device: iOS 14
• IOS 17.0.3

Additional context
Works as expected on React.

[bug]: After approve/reject request in wallet don't redirect back on dapp on iOs 17+

Description

After approving the request in the wallet didn't redirect back to dapp

Web3Modal SDK version

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

Output of npx react-native info

react-native:
installed: 0.72.7

Expo Version (if applies)

No response

Steps to reproduce

Steps to reproduce:

1. Connect wallet to dapp
2. Send transaction in dapp
3. Wallet is opened, request shown
4. Approve request

Expected results: Redirect back to dapp
Actual results: Didn't redirect back to dapp

os: iOS 17+

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

Info.plist:
<key>LSApplicationQueriesSchemes</key> <array> <string>uniswap</string> </array>

metadata:
redirect: { native: "mydaapscheme://", },

[bug]: Transaction process fails while staying in the wallet app

Description

Hello, I have problem on confirming transaction on the wallet.

here is my code:

   const config = await prepareWriteContract({
        address: coin.contract,
        abi: tokenABI,
        functionName: 'transfer',
        args: [
          factor.destination_wallet,
          parseEther(selectedCoin?.value).toString(),
        ],
      });
      const {hash} = await writeContract(config, {});
      await waitForTransaction({
        confirmations: 2,
        hash: hash,
      });
      /// ------ this below line is not executing while user waits for the full confirmation on the wallet app (and our app is in 
           background mode and its waiting for confirmation)

    // this below line only executes when user jumps back to the app right after pressing confirm button.

     // custom function to save data in server database
      await sumbmitTransaction(hash, factor);

And my other problem is that wallet app doesn’t redirect to my app after confirming transaction, how to achieve this on react-native?

Web3Modal SDK version

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

Output of npx react-native info

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M1
Memory: 86.28 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
Watchman: 2023.11.27.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode: 15.2/15C500b - /usr/bin/xcodebuild
Languages:
Java: 11.0.19 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Expo Version (if applies)

"expo": "^48.0.0"

Steps to reproduce

confirm a transaction on the wallet app but don’t redirect to the react-native app, in the react-native side the code lines after const {hash} = await writeContract(config, {});
doesn’t run

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

   const config = await prepareWriteContract({
        address: coin.contract,
        abi: tokenABI,
        functionName: 'transfer',
        args: [
          factor.destination_wallet,
          parseEther(selectedCoin?.value).toString(),
        ],
      });
      const {hash} = await writeContract(config, {});
      await waitForTransaction({
        confirmations: 2,
        hash: hash,
      });
      /// ------ this below line is not executing while user waits for the full confirmation on the wallet app (and our app is in 
           background mode and its waiting for confirmation)

    // this below line only executes when user jumps back to the app right after pressing confirm button.

     // custom function to save data in server database
      await sumbmitTransaction(hash, factor);

feat: add metamask wallet

Metamask is missing from web 3 modal, but I see it available in https://explorer-api.walletconnect.com/w3m/v1/getMobileListings

[bug]: : Cannot convert undefined value to object

Description

TypeError: Cannot convert undefined value to object

This error is located at:
in Web3Modal (created by Web3Provider)
in QueryClientProvider (created by WagmiConfig)
in WagmiConfig (created by Web3Provider)
in Web3Provider (created by Providers)

Web3Modal SDK version

1.0.0-alpha.13

Output of npx react-native info

System:
OS: macOS 14.1
CPU: (8) arm64 Apple M1
Memory: 792.44 MB / 16.00 GB
Shell:
version: 3.6.1
path: /opt/homebrew/bin/fish
Binaries:
Node:
version: 18.17.1
path: ~/.volta/tools/image/node/18.17.1/bin/node
Yarn:
version: 4.0.0-rc.48
path: ~/.volta/tools/image/yarn/4.0.0-rc.48/bin/yarn
npm:
version: 9.6.7
path: ~/.volta/tools/image/node/18.17.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.14.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.1
path: /opt/homebrew/opt/openjdk/bin/javac
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.72.6
wanted: ^0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Expo Version (if applies)

49.0.16

Steps to reproduce

I used the steps from the documentation

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

https://docs.walletconnect.com/web3modal/react-native/about

WalletConnect V2 Metamask

What problem does this new feature solve?

Hello.
I am using your example but there is no Metamask in the list.

https://github.com/WalletConnect/react-native-examples -> dapps/v2Explorer

screen-recording-2023-06-16-at-231958_AvL9HvQk.mp4

System:
OS: macOS 13.4
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 34.08 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 18.13.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.3 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

"@babel/plugin-proposal-private-methods": "^7.18.6",
"@react-native-async-storage/async-storage": "1.18.1",
"@react-native-clipboard/clipboard": "1.11.2",
"@walletconnect/encoding": "1.0.2",
"@web3modal/react-native": "1.0.0-alpha.8",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-get-random-values": "1.9.0",
"react-native-modal": "13.0.1",
"react-native-svg": "^13.9.0"

Describe the solution you'd like

Would like to see on the list Metamask

Return address property in useWeb3Modal()

Hello!

I have a bit of a feature request. In my application, I'd like to have the ability to display the user's address to them after they've connected to a wallet. Currently, there isn't a clear way to retrieve the user's wallet address with the tools provided in this sdk.

So I'd like to suggest that we add address as one of the properties in the return object for the useWeb3Modal() hook.

The code could look something like this:

return {
    isOpen: modalState.open,
    open: ModalCtrl.open,
    close: ModalCtrl.close,
    provider: clientState.initialized ? ClientCtrl.provider() : undefined,
    isConnected: accountState.isConnected,
    address: accountState.address, // new code
  };

This request is similar to one I found in Github discussions so I think it is an issue that other developers have run into.

Thanks a lot ahead of time for your help! Let me know if you need me to clarify anything.

[feature] Support `eth_signTypedData_v4` RPC method

What problem does this new feature solve?

Wagmi's useSignTypedData hook invokes eth_signTypedData_v4 RPC method but it is not supported by WalletConnect.
Thus, wagmi's hook does not work.

Describe the solution you'd like

By supporting eth_signTypedData_v4 RPC method in WalletConnect providers, useSignTypedData will be working fine.

[feature] wagmi, viem v2 support

What problem does this new feature solve?

wagmi, viem v2 support

Describe the solution you'd like

Hi, as the main repository of web3modal has released alpha, which supports wagmi v2, need some support as well.
I'm concerned about potential issues with the operation of wagmi v1.

Thanks!

feat: Basic account view

Summary

• Implement the account view based on designs and web version
• Show user address
• Add "Copy address" button
• Add "connected" icon

Balance info + active chain will be added in another task

[bug]: Pressing Cross Icon for closing results error

Description

Hello have nice day.
when im pressing Cross icon to close the modal :
In Iphone:
it doesn't work and it becomes un responsive (after pressing cross icon when i click blank area on top of the modal to close the modal that also doesn't work).

in Android :
It throws error:

and after this also can't close the modal and modal becomes fully unresponsive.

My project is bare react native project but added expo on it.

Web3Modal SDK version

1.0.0-alpha.13

Output of npx react-native info

System:
OS: Windows 10 10.0.22621
CPU: (12) x64 AMD Ryzen 5 5600H with Radeon Graphics
Memory: 1.90 GB / 15.86 GB
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 29, 30, 31, 33, 33
Build Tools: 29.0.2, 30.0.2, 30.0.3, 33.0.0, 33.0.2
System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86_64 Atom, android-33 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-223.8836.35.2231.10406996
Visual Studio: Not Found
Languages:
Java: 11.0.18 - C:\Program Files\Microsoft\jdk-11.0.18.10-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Expo Version (if applies)

"expo": "^48.0.0",

Steps to reproduce

clone example and try it on android emulator

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

https://github.com/itsnyx/wc-test-repo-temp

[bug]: this.events.off is not a function

Description

These errors occurs when i open the app for first time. Whenever i encounter this error, and i select a wallet in web3modal, it redirects to that wallet and nothing happens, no connection prompt is shown. If this error is not encountered, everything works fine

Web3Modal SDK version

1.0.1

Output of npx react-native info

System:
  OS: macOS 13.5.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 88.77 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.19.4
    path: ~/mobile-app-old/mobile-app/node_modules/.bin/npm
  Watchman:
    version: 2023.03.20.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.0
    path: /Users/shanthan/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9014738
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.16.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/shanthan/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: ^18.2.0
  react-native:
    installed: 0.72.8
    wanted: ^0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Expo Version (if applies)

No response

Steps to reproduce

Just rendering the gives this error

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

const metadata = {
    name: 'xyz',
    description: 'xyz,
    url: 'https://xyz.io',
    icons: ['https://avatars.githubusercontent.com/u/37784886'],
    redirect: {
      native: 'xyz://',
      universal: 'YOUR_APP_UNIVERSAL_LINK.com',
    },
  };

  const chains = [mainnet, polygon, arbitrum];

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

  // 3. Create modal
  createWeb3Modal({
    projectId,
    chains,
    wagmiConfig,
  });

return (
      <WagmiConfig config={wagmiConfig}>
        {children}
        <Web3Modal />
      </WagmiConfig>
  );

[Epic] Milestone 2: RN SDK

Implementation Path

This is intended as an overview of critical path work for the Web3Modal React-Native SDK, from which we can break out concrete and more detailed individual issues. The list may change and reorder as we see necessary during the development process.

Features

• #42
• Adapt views to Light/Dark theme
• #52
• #55
• Improve animations: #56
• explorerRecommendedWalletIds
• explorerExcludedWalletIds
• Add search bar in wallet screen
• Add “What is a wallet” screen
• Improve Connect Button
• Add reload screen if wallet list fails
• Show balance in Account view
• Show chain info in Account view
• Chain select in Account View + Search bar
  • Define list of chains
• #16
• Update docs

Issues to be solved

• No matching key warning

Next steps

TBD

[feature] Getting connected wallet metadata

What problem does this new feature solve?

I want to get connected wallet info such as icon and name.

this was possible with previously versions via provider.

Describe the solution you'd like

adding a hook can solve this issue, or maybe there is a solution i don’t t know .

thanks.

Error after installation

After following the expo installation instructions in the docs and pressing the Connect button, the modal appears for a fraction of a second and then I get error message:

ERROR {"context": "client"} undefined is not a function

And this pops up:

I reported this issue in the discord channel, and was asked to open an issue about it. Please let me know if there is any other information you need from me and I'll be happy to provide it.

{"context": "client"} Invalid Session Properties requested

Error when trying to send sign request on Trust Wallet:

{"context": "client"} Invalid Session Properties requested

@web3modal/react-native version: 1.0.0-alpha.5
OS: android 11
device: simulator

Rainbow | Redirections issue

Hi !

Here are the problems I have with the implementation of Rainbow:

When the user logs in via Rainbow, I feel that the redirection is quite random.

Sometimes the user clicks on "Login" and the redirection to the original application is fine, sometimes the user is not redirected.

I don't know if the problem is with Rainbow or the package, but I'd rather open this issue so that you know what the problem is! :)

Here is a working implementation for you to test: https://github.com/boulinb/web3modal-react-native-issue

Thanks to you for your work on the package!

Benjamin

Error on disconnect

Connecting with the modal works perfectly, although when trying to disconnect the user's session using provider.disconnect(), it throws an error Error: Please call connect() before enable().

How can I disconnect the user in that case? if I try to sign a message, it will open the wallet provider (eg: trust wallet) and prompt the user to sign the message, but then on retrieval, it throws Error: Failed to decrypt

For more context,
this happens only if the provider is accessed using the useWeb3Modal hook from another component rather than the one which initiated the connection.

Observation: the disconnect function may work, but isConnected is still true.
I guess the disconnection works but the isConnected is the problem, and it throws failed to decrypt due to a buggy connection state between the wallet connect and the wallet provider.

[bug]: New architecture support

Description

On the first video I turned on new arch and have some strange behavior:

1. Slide animation begins from the bottom left edge, should be just from the bottom
2. Wallet logos doesn't show.

FYU: I tried to change rn image to expo-image and logos show as expected.

RocketSim_Recording_iPhone_15_Pro_6.1_2024-02-14_13.44.06.mp4

RocketSim_Recording_iPhone_15_Pro_6.1_2024-02-14_13.53.41.mp4

Web3Modal SDK version

@web3modal/wagmi-react-native 1.2.0

Output of npx react-native info

System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 184.61 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.asdf/installs/nodejs/20.10.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.5
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.2
    path: /usr/bin/javac
  Ruby:
    version: 3.0.3
    path: /Users/patrikduksin/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

Expo Version (if applies)

Expo 50.0.6

Steps to reproduce

npm i
npx expo run:ios

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

https://github.com/patrikduksin/rn-wallet-connect-bug.git

[bug] Inability to execute write calls to contracts on React Native

What problem does this new feature solve?

Expected Behavior

The useContractWrite function from wagmi should successfully enable write calls to contracts when implemented within React Native, following the instructions provided in the official WalletConnect documentation.

Current Behavior

The useContractWrite function executes write calls to contracts; however, it throws an error resulting in a disruption of the application's functionality.

Steps to Reproduce

1. Set up a React Native project.
2. Install all required packages and dependencies as per the official documentation.
3. Perform the initial setup of Web3Modal.
4. Import and utilize the useContractWrite function from wagmi.
5. Attempt to execute a write call to a contract.

Context (Environment)

The issue occurs within the following environment:

• "@web3modal/wagmi-react-native": "^1.0.1"
• "expo": "~49.0.15"
• "react-native": "0.72.6"
• "viem": "^1.20.3"
• "wagmi": "^1.4.12"

This issue impacts all developers seeking to integrate the useContractWrite function into React Native applications using Web3Modal.

Describe the solution you'd like

Possible Solution

The problem seems to be a function inside @walletconnect/sign-client/node_modules/@walletconnect/utils/dist/index.cjs.js that uses localStorage. The solution could be to use AsyncStorage instead.

https://react-native-async-storage.github.io/async-storage/

Detailed Description

To reproduce and examine the issue firsthand within an Expo environment, please refer to the repository linked below:

https://github.com/natedevxyz/web3modal-rn-test

[bug] Can't find variable: React

Link to minimal reproducible example

Just using the package in react-native screens

Summary

I get this error from web3modal package

List of related npm package versions

react-native - 0.69.5
@web3modal/react-native: ^1.0.0-alpha.5

Dependency conflict when project have old version of @walletconnect/core

Hi, My project is using walletconnect v1 with "@walletconnect/react-native-dapp": "1.8.0" which leads to a dependency of "@walletconnect/core": "^1.8.0"

So when I installed "@web3modal/react-native": "1.0.0-alpha.4" and tried to run with it, js error occurred as in src/hooks/useConfigure.ts, SUBSCRIBER_EVENTS is not defined. Because in @web3modal/react-native, it was using "@walletconnect/core": "^1.8.0" instead of "@walletconnect/core": "^2"

import { SUBSCRIBER_EVENTS } from '@walletconnect/core';

fix PR as below

Metamask doesn't connect

Hi... I'm using the hook to control the modal with my custom component. The modal opens correctly, but when I select Metamask and go to the Metamask app, nothing happens. There's no option to connect with my React Native app, and when I go back to my app, there isn't a connection with my wallet. this also happened when I use <Web3Button />.

i open the modal with this component

<LogoButton svgElement={<WalletCSvg height={50} width={50} />} onPress={open} />

my provider metadata is like the example

export const providerMetadata: IProviderMetadata = { name: 'React Native V2 dApp', description: 'RN dApp by WalletConnect', url: 'https://walletconnect.com/', icons: ['https://avatars.githubusercontent.com/u/37784886'], redirect: { native: 'w3msample://', }, };
Obviously with my app info, that is almost same like the example

Originally posted by @ShuraRB in WalletConnect/walletconnect-monorepo#2597

Error on disconnect

Connecting with the modal works perfectly, although when trying to disconnect the user's session using provider.disconnect(), it throws an error Error: Please call connect() before enable().

How can I disconnect the user in that case? if I try to sign a message, it will open the wallet provider (eg: trust wallet) and prompt the user to sign the message, but then on retrieval, it throws Error: Failed to decrypt

TrustWallet | Failed to initiate multi-chain connection

Hi ! 😃

Here are the problems I have with the TrustWallet implementation:

• When the user connects to Rainbow, the initialization of the 3 requested chains (ETH, BNB, MATIC) are perfectly managed.

• When the user connects to TrustWallet, the initialization of the 3 chains requested (ETH, BNB, MATIC) is problematic. The only blockchain requested by the connection is ETH, when the user accepts the connection an error message appears "Unsupported or empty chains for namespace". Knowing that the multi-chain connection with TrustWallet worked before, I did not change the code!

Here is a working implementation for you to test: https://github.com/boulinb/web3modal-react-native-issue

Thanks to you for your work on the package!

Benjamin

[bug]: Rainbow wallet connection bug

Description

See picture:

Web3Modal SDK version

1.0.0-alpha.8

Output of npx react-native info

INFO Inactive pairings cleared: 4
INFO {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_created
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_created
INFO {"context": "core"} {"context": "core/history"} Emitting history_created
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_created
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
INFO {"context": "core"} {"context": "core/history"} Emitting history_updated

Expo Version (if applies)

No response

Steps to reproduce

Try initiating a connection with rainbow wallet

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

N/A

React not defined for web

Hey @ignaciosantise !

I am running into one more issue that I'd appreciate your feedback on. This time it happens when running the app in the web.

When I try to run the app in web, I am getting a React is not defined error for the components that I import from this package.

I am building/running the app using expo, which uses react-native-web under the hood. I am not running into this issue when running the app in iOS so I think the issue is limited to the web only. It might have something to do with web expecting separate build settings than mobile.

Let me know if you have any thoughts on what might be causing this.

Also, I'm not sure if this package is meant to support react-native-web. If not, please feel free to direct me elsewhere.

Thanks again for your help!

[chore] Release alpha version of Analytics

Tasks

• Update package versions to alpha
• Update docs
• Update example apps

feat: support Coinbase wallet

AC: possible to use Coinbase Wallet in web3modal React Native

Implementation suggestion: use https://github.com/coinbase/wallet-mobile-sdk

Failed to decrypt error

Using this snippet while connected to trust wallet

web3modal-react-native/example/src/utils/MethodUtil.ts

Lines 41 to 48 in 388090a

	const msg = 'Hello World';
	const hexMsg = utf8ToHex(msg, true);
	const [address] = await web3Provider.listAccounts();
	if (!address) {
	throw new Error('No address found');
	}
	const signature = await web3Provider.send('personal_sign', [hexMsg, address]);

causes failed to decrypt error, but I found something interesting when opened the wallet provider app this happens:

I added a log when it enters onSessionDelete in useConfigure hook, and as you see the sessions are not in sync or something is not right. the first one is from the event and the second is from the clientCtrl.

and it shows to sign the message normally, but on accepting, it throws the failed to decrypt error, so most probably it's a wallet connect issue than a modal issue, what do you think?

Originally posted by @Mostafatalaat770 in #13 (comment)

[bug]: Promise.allSettled and Promise.any is undefined

Description

seems to be a hermes problem, but I think it's worth mentioning in the documentation

Web3Modal SDK version

1.0.0-alpha.13

Output of npx react-native info

System:
OS: macOS 14.1
CPU: (8) arm64 Apple M1
Memory: 792.44 MB / 16.00 GB
Shell:
version: 3.6.1
path: /opt/homebrew/bin/fish
Binaries:
Node:
version: 18.17.1
path: ~/.volta/tools/image/node/18.17.1/bin/node
Yarn:
version: 4.0.0-rc.48
path: ~/.volta/tools/image/yarn/4.0.0-rc.48/bin/yarn
npm:
version: 9.6.7
path: ~/.volta/tools/image/node/18.17.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.14.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:

• DriverKit 23.0
• iOS 17.0
• macOS 14.0
• tvOS 17.0
• watchOS 10.0
  Android SDK: Not Found
  IDEs:
  Android Studio: Not Found
  Xcode:
  version: 15.0.1/15A507
  path: /usr/bin/xcodebuild
  Languages:
  Java:
  version: 21.0.1
  path: /opt/homebrew/opt/openjdk/bin/javac
  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.72.6
  wanted: ^0.72.6
  react-native-macos: Not Found
  npmGlobalPackages:
  "react-native": Not Found
  Android:
  hermesEnabled: true
  newArchEnabled: false
  iOS:
  hermesEnabled: true
  newArchEnabled: false

Expo Version (if applies)

49.0.16

Steps to reproduce

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

No matching key. pairing: undefined

I have tried to connect my wallet on the android simulator and got the error:

ERROR {"context": "core"} {"context": "core/pairing"} {"context": "core/pairing/pairing"} No matching key. pairing: undefined
ERROR {"context": "client"} [Error: No matching key. pairing: undefined]

My current version: 1.0.0-alpha.5
if i use 1.0.0-alpha.3 version there are no errors

[feature] Implement Analytics core

Description

Implement the base logic to make it possible to send events to the analytics API

Tasks

• Add the EventsController to the core package
• Add a new SDK option to enable/disable analytics
• Send MODAL_LOADED event

Related Issues

N/A

walletconnect/web3modal-reach-native

BETA | Update documentation

Question: how to reuse an existing session?

After app reloading I have to connect a wallet again. The provider property from the hook is null until I call the open() function. After calling (the modal is shown, but I didn't select a wallet yet) I see that provider.session exists and there is info about my wallet, but isConnected is still false. I'd like to understand how to reuse the previous connection to the wallet.

Failed to send transaction

Hello , everyone.

Im testing latest example published to the github as of today and i can connect my wallet with no problem.
but when i use the all methods works except eth_sendTransaction !

can you please fix this issue.!?

and i have enough funds to initiate transaction but it gets suck here:

[bug]: Metamask doesn't connect

Description

Metamask now supports walletconnect v2 and it is in your explorer list. However, when i select it and metamask opened, I am not prompted to approve the connection.

Web3Modal SDK version

1.0.0-alpha.8

Output of npx react-native info

N/A

Expo Version (if applies)

No response

Steps to reproduce

Try connecting to metamask

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

N/A

[bug] IOS Crashes When Using this package with Webview

Description

Environment:

IOS version: 17.2
Simulator: iPhone 15 Pro
React-Native version: 0.73.5 (new architecture)

Description:

The application crashes without any error messages when I click the connect button after installing both the Wallet-Connect and react-native-webview packages. The application compiles without any errors.
xcode stack👇

Actual behavior:
The application crashes without any error messages.

Minimal Reproduction:

I've created a minimal reproduction of this issue. The repository can be found at: https://github.com/Martin2037/rn-modal-crash

Web3Modal SDK version

@web3modal/wagmi-react-native 1.2.0

Output of npx react-native info

System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M1 Pro
Memory: 69.55 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.9.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.4.0
path: /usr/local/bin/npm
Watchman:
version: 2024.01.22.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/zhujunyang/.rubies/ruby-3.3.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.1/15C65
path: /usr/bin/xcodebuild
Languages:
Java:
version: 18.0.2
path: /usr/bin/javac
Ruby:
version: 3.3.0
path: /Users/zhujunyang/.rubies/ruby-3.3.0/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.5
wanted: 0.73.5
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: true

Expo Version (if applies)

No response

Steps to reproduce

1、Install both wallet-connect and webview packages.
2、Compile the application
3、Click the connect button.

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

https://github.com/Martin2037/rn-modal-crash

Send Basic Events to API

Implement basic events:

• MODAL_LOADED
• MODAL_OPEN
• MODAL_CLOSE
• CLICK_ALL_WALLETS
• SELECT_WALLET
• CLICK_NETWORKS
• OPEN_ACTIVITY_VIEW
• SWITCH_NETWORK
• CONNECT_SUCCESS
• CONNECT_FAILURE
• DISCONNECT_SUCCESS
• DISCONNECT_ERROR
• CLICK_WALLET_HELP
• CLICK_NETWORK_HELP

[bug]: Trust wallet - No matching key. pairing: undefined

Description

When connecting on trust wallet on polygon im getting these errors

ERROR {"context": "core"} {"context": "core/pairing"} {"context": "core/pairing/pairing"} No matching key. pairing: undefined
ERROR {"context": "client"} [Error: No matching key. pairing: undefined]

Then when trying to send a transaction it says walletconnect session disconnected and i see this error:

ERROR {"context": "core"} {"context": "core/expirer"} No matching key. expirer: topic:f3049d397e51dfeeabb06bc2f843cf733a667679fb20923f7ed56b1cfec8a9f7

Web3Modal SDK version

1.0.0-alpha.7

Output of npx react-native info

ERROR {"context": "core"} {"context": "core/pairing"} {"context": "core/pairing/pairing"} No matching key. pairing: undefined
ERROR {"context": "client"} [Error: No matching key. pairing: undefined]

ERROR {"context": "core"} {"context": "core/expirer"} No matching key. expirer: topic:f3049d397e51dfeeabb06bc2f843cf733a667679fb20923f7ed56b1cfec8a9f7

Expo Version (if applies)

No response

Steps to reproduce

Try to connect to alphawallet on polygon and see the first error. Then try to send a transaction and i get the second error and trustwallet says walletconnect is disconnected

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

[Epic] Milestone 1: RN SDK

Implementation Path

This is intended as an overview of critical path work for the Web3Modal React-Native SDK, from which we can break out concrete and more detailed individual issues. The list may change and reorder as we see necessary during the development process.

Features

• Show mobile wallets list from Explorer API
• Show QR Code
• Customizable cloud PROJECT_ID
• Connect with Wallet
• Add Eth_methods to example
• #20
• #21
• Update docs

Issues to be solved

• #13

Next steps

#27

[feature] Send basic events to API

Description

Send events to the analytics api using the EventsController

Tasks

• Implement basic events:
  • MODAL_LOADED
  • MODAL_OPEN
  • MODAL_CLOSE
  • CLICK_ALL_WALLETS
  • SELECT_WALLET
  • CLICK_NETWORKS
  • OPEN_ACTIVITY_VIEW
  • SWITCH_NETWORK
  • CONNECT_SUCCESS
  • CONNECT_FAILURE
  • DISCONNECT_SUCCESS
  • DISCONNECT_ERROR
  • CLICK_WALLET_HELP
  • CLICK_NETWORK_HELP
  • CLICK_GET_WALLET

Related Issues

Link to Analytics core task

Implement Analytics Core

Implement the base logic to make it possible to send events to the analytics API

• Add the EventsController to the core package
• Add a new SDK option to enable/disable analytics
• Send MODAL_LOADED event

[feature] Upgrade @web3modal/core-react-native to valtio 1.11.2

What problem does this new feature solve?

Would be good to have standard versions of valtio across the web and native packages, to avoid #79 happening when installing both web and native SDKs for a cross-platform setup

Describe the solution you'd like

Yes, pinning a version with resolutions field in package.json works, but preferably we wouldn't need to do that when installing both SDKs from Web3Modal

Bump valtio in @web3modal/core-react-native to 1.11.2, to match version in other Web3Modal packages

[feature] Add custom headers to explorer-api request

What problem does this new feature solve?

Adds user-agent and referer headers in explorer-api requests

Describe the solution you'd like

• user-agent that follows the pattern <web3modal version>/<core sdk version>/<operating system>
• referer containing the name provided in the sdk metadata (with no spaces)

example:

headers: {
 user-agent: 'w3m-rn-1.0.0/js-2.7.7/ios-16.5',
 referer: 'Showcase'
}

feat: use own storage provider

some apps might use a different storage provider instead of AsyncStorage

Other providers:

• https://github.com/mrousavy/react-native-mmkv
• https://github.com/ammarahm-ed/react-native-mmkv-storage