Migrating to WalletConnect v2

tip

By 28 June 2023, you must upgrade your @privy-io/react-auth SDK to version 1.28.4 or later in order to continue supporting user's wallets that use WalletConnect (MetaMask mobile, Rainbow Wallet, etc.).

On this date, WalletConnect will shut down support for v1.0 of its protocol. Versions 1.28.0 and onwards of @privy-io/react-auth use the new WalletConnect v2.0 protocol.

There are no breaking changes in the v1.28.x release. Feel free to contact [email protected] with questions or browse our changelog to see what’s new across versions.

info

Action Required: run npm i @privy-io/react-auth@latest

WalletConnect v2 is the newest major version of the Wallet Connect protocol. It comes with signficiant upgrades including more stable session management and a fresh chain-agnostic design.

Privy is ready for apps to upgrade to Wallet Connect v2. Below you will find a couple of simple steps to complete the migration:

1. Install the latest version of the Privy SDK

Upgrate to the latest version of @privy-io/react-auth:

npm i @privy-io/react-auth@latest

That's it! You're now upgraded to WalletConnect v2.

If you want to configure your own WalletConnect Cloud Project instead of using the default project, proceed to the following steps.

2. [Optional] Get a WalletConnect Cloud Project ID

Go to WalletConnect Cloud and create a new account. Once your account is created, create a new project and collect the Project ID.

3. [Optional] Configure your Project ID in the PrivyProvider

At the root-level of your application (_app.jsx in NextJS or index.js in create-react-app), add the property:

• walletConnectCloudProjectID: your project ID from step 1

to the config property of your PrivyProvider:

NextJS

_app.jsx

import type {AppProps} from 'next/app';
import Head from 'next/head';
import {PrivyProvider} from '@privy-io/react-auth';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PrivyProvider
        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ''}
        config={{
            walletConnectCloudProjectId: 'YOUR_WALLETCONNECT_CLOUD_PROJECT_ID',
        }}
    >
        <Component {...pageProps} />
    </PrivyProvider>
  );
}

Create React App

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {PrivyProvider} from '@privy-io/react-auth';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <PrivyProvider
        appId={process.env.REACT_APP_PRIVY_APP_ID}
        config={{
              walletConnectCloudProjectId: 'YOUR_WALLETCONNECT_CLOUD_PROJECT_ID',
        }}
    >
        <Component {...pageProps} />
    </PrivyProvider>
  </React.StrictMode>
);

That's it! Throughout your app, WalletConnect connections will now default to using the WalletConnect v2 protocol.

info

Having issues connecting? Make sure your user's wallet supports Wallet Connect v2 via the Wallet Connect Explorer. Wallet Connect v2 is not backwards compatiable, so wallets that only support v1 will not support v2.