Installation

caution

Web3Inbox is in beta

The WalletConnect Notify API allows wallet developers to build engaging notification experiences with dapps. It enables the end users to subscribe to and receive notifications to their wallet.

For those looking to add notifications for pairing and sign requests, please check here.

The SDK is cross-platform supporting iOS and Android wallets.

Notify API works together with the WalletConnect Web3Inbox SDK providing a toolkit for integrating web3 communications messaging features into dapps.

iOS

Notify API is available via Swift Package Manager or Cocoapods.

SwiftPackageManager

You can add the WalletConnect Notify package to your project with the Swift Package Manager. In order to do that:

1. Open XCode
2. Go to File -> Add Packages
3. Paste the repo GitHub URL: https://github.com/WalletConnect/WalletConnectSwiftV2
4. Tap Add Package
5. Select WalletConnectNotify check mark

Cocoapods

1. Update Cocoapods spec repos. Type in terminal pod repo update
2. Initialize Podfile if needed with pod init
3. Add pod to your Podfile:

pod 'WalletConnectSwiftV2/WalletConnectNotify'

4. Install pods with pod install

If you encounter any problems during package installation, you can specify the exact path to the repository

pod 'WalletConnectSwiftV2/WalletConnectNotify', :git => 'https://github.com/WalletConnect/WalletConnectSwiftV2.git', :tag => '1.8.0'

Android

Add the jitpack.io Maven repository to your root/build.gradle.kts file. For example:

allprojects {
 repositories {
    mavenCentral()
    maven { url "https://jitpack.io" }
 }
}

In app/build.gradle.kts add the notify package and its dependencies:

implementation(platform("com.walletconnect:android-bom:release_version"))
implementation("com.walletconnect:android-core")
implementation("com.walletconnect:notify")

Requirements

• Android API level minimum 23
• Java minimum version 11

React Native

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.