Installation

Install the WalletConnect NotifyClient package.

npm

npm install @walletconnect/notify-client @walletconnect/react-native-compat

Yarn

yarn add @walletconnect/notify-client @walletconnect/react-native-compat

Bun

bun add @walletconnect/notify-client @walletconnect/react-native-compat

pnpm

pnpm add @walletconnect/notify-client @walletconnect/react-native-compat

You will need to polyfill crypto depending on your environment. See instructions below.

Expo

npm

npm i expo-crypto

Yarn

yarn add expo-crypto

Bun

bun a expo-crypto

pnpm

pnpm add expo-crypto

1. Create a file called expo-crypto-shim.js at the root of your project
2. Go to expo-crypto-shim.jsand paste the following snippet into it.

import { digest } from 'expo-crypto'

// eslint-disable-next-line no-undef
const webCrypto = typeof crypto !== 'undefined' ? crypto : new Crypto()
webCrypto.subtle = {
  digest: (algo, data) => {
    const buf = Buffer.from(data)
    return digest(algo, buf)
  }
}
;(() => {
  if (typeof crypto === 'undefined') {
    Object.defineProperty(window, 'crypto', {
      configurable: true,
      enumerable: true,
      get: () => webCrypto
    })
  }
})()

3. Then head over your index.js file at the root of your project and add the following imports.

import '@walletconnect/react-native-compat'
import './expo-crypto-shim.js'

React Native CLI

npm

npm i react-native-quick-crypto react-native-quick-base64 stream-browserify @craftzdog/react-native-buffer babel-plugin-module-resolver

Yarn

yarn add react-native-quick-crypto react-native-quick-base64 stream-browserify @craftzdog/react-native-buffer babel-plugin-module-resolver

Bun

bun a react-native-quick-crypto react-native-quick-base64 stream-browserify @craftzdog/react-native-buffer babel-plugin-module-resolver

pnpm

pnpm add react-native-quick-crypto react-native-quick-base64 stream-browserify @craftzdog/react-native-buffer babel-plugin-module-resolver

For iOS only

cd ios && pod install

1. Go to your index.js file at the root of your project and add the following polyfill

import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
import crypto from 'react-native-quick-crypto'

const polyfillDigest = async (algorithm, data) => {
  const algo = algorithm.replace('-', '').toLowerCase()
  const hash = crypto.createHash(algo)
  hash.update(data)
  return hash.digest()
}

globalThis.crypto = crypto
globalThis.crypto.subtle = {
  digest: polyfillDigest
}

AppRegistry.registerComponent(appName, () => App)

2. Update your babel.config.js with the following configuration

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
   [
     'module-resolver',
     {
       alias: {
         'crypto': 'react-native-quick-crypto',
         'stream': 'stream-browserify',
         'buffer': '@craftzdog/react-native-buffer',
       },
     },
   ],
    ...
  ],
};

Next Steps

Now that you've installed WalletConnect Notify, you're ready to start integrating it. The next section will walk you through the process of setting up your project to use the Notify API.