How to use WalletConnect with React Native

It's been close to a decade since I have written something, so now I'll try to get back into the habit of doing something.

This article is based on the tutorial from Tom Terado. Thank you for the inspiration! https://medium.com/walletconnect/how-to-build-a-react-native-dapp-with-walletconnect-28f08f332ed7.

To start, we'll talk about how to create a mobile React Native dApp that connects to a cryptocurrency wallet and signs a message by using the new WalletConnect SDK.

First of all, make sure you created your React Native app. If you haven't yet, take a few minutes and follow the official documentation. In this tutorial, we'll be using the React Native CLI and TrustWallet as the mobile wallet.

WalletConnect Cloud Platform

Create an account on their platform, then create a New Project and get the Project ID. It'll be used to initialize the WalletConnect Modal.

Installation

Let's start adding all the necessary libraries to make this work:

npm install --save @walletconnect/modal-react-native react-native-get-random-values react-native-modal @react-native-async-storage/async-storage react-native-svg

Project setup

Connect Wallet

This is where the fun begins. We'll be using the useWalletConnectModal hook that gives us the ability to open the modal and let the user connect the wallet. From the same hook, we can also get some other properties that will be used in this tutorial.

Besides the useWalletConnectModal hook, we'll also use WalletConnectModal. So right now our code looks like this:

import React from 'react';
import {
  WalletConnectModal,
  useWalletConnectModal,
} from '@walletconnect/modal-react-native';

const projectId = 'YOUR_PROJECT_ID';

const providerMetadata = {
  name: 'YOUR_PROJECT_NAME',
  description: 'YOUR_PROJECT_DESCRIPTION',
  url: 'https://your-project-website.com/',
  icons: ['https://your-project-logo.com/'],
  redirect: {
    native: 'YOUR_APP_SCHEME://',
    universal: 'YOUR_APP_UNIVERSAL_LINK.com',
  },
};

function App() {
  const {address, open, isConnected, provider} = useWalletConnectModal();

  return (
    <>
      <WalletConnectModal
        projectId={projectId}
        providerMetadata={providerMetadata}
      />
    </>
  );
}

export default App;

You should enter your own projectId, which is found in your WalletConnect Cloud Platform. We normally set it in the .env file but for this tutorial, we'll not cover that.

So now, we just need to open the modal and let the magic happen! This is the full code with some styling:

import React from 'react';
import {Button, StyleSheet, View} from 'react-native';
import {
  WalletConnectModal,
  useWalletConnectModal,
} from '@walletconnect/modal-react-native';

const projectId = 'YOUR_PROJECT_ID';

const providerMetadata = {
  name: 'YOUR_PROJECT_NAME',
  description: 'YOUR_PROJECT_DESCRIPTION',
  url: 'https://your-project-website.com/',
  icons: ['https://your-project-logo.com/'],
  redirect: {
    native: 'YOUR_APP_SCHEME://',
    universal: 'YOUR_APP_UNIVERSAL_LINK.com',
  },
};

function App() {
  const {address, open, isConnected, provider} = useWalletConnectModal();

  const handleConnection = () => {
    if (isConnected) {
      return provider?.disconnect();
    }

    return open();
  };
  
  return (
    <View style={styles.container}>
      <Button
        onPress={handleConnection}
        title={isConnected ? 'Disconnect' : 'Connect'}
      />

      <WalletConnectModal
        projectId={projectId}
        providerMetadata={providerMetadata}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
    justifyContent: 'center',
  },
});

export default App;

Sign message

We just connected our wallet previously, and signing a message should not be any harder at all.

By using the provider from the hook explained, we can call the request function and pass the method and parameters we want. To sign a message, it is as simple as this:

await provider?.request({
  method: 'personal_sign',
  params: ['message to sign', address],
});

And that's it! We just connected a wallet and signed a message using WalletConnect!

Using WalletConnect with React Native

If you want to take a look at the full code just check out the repository. And for more information, please check the WalletConnect documentation.

Tried to keep this as simple as possible without any hard explanation but if you have any questions or suggestions please don’t hesitate to reach out to me.