Legacy Clients

During the beta development of the WalletConnect clients, there were NPM packages distributed for Browser, React-Native and NodeJS clients which targetted different platforms.

# For Browser apps
> @walletconnect/browser
# For React-Native apps
> @walletconnect/react-native
# For NodeJS apps
> @walletconnect/node

Now it's unnecessary to choose between the different packages and there is a single isomorphic client distributed on NPM package for all platforms

# For all apps
> @walletconnect/client

If you used to integrate any of the above standalone clients for WalletConnect, we describe below how you should migrate to the isomorphic client now distributed

Migrating from Browser Client

Migrating from the Browser client to the isomorphic client is as simple as replacing with the new client package.

yarn
npm
yarn
yarn remove @walletconnect/browser
yarn add @walletconnect/client
npm
npm uninstall --save @walletconnect/browser
npm install --save @walletconnect/client

Another thing to note about Browser client specifically is that now the QRCode Modal integration has been simplified and the qrcode-modal package can now be injected and handled by the client itself.

Before

import WalletConnect from "@walletconnect/browser";
import QRCodeModal from "@walletconnect/qrcode-modal";
// Create a connector
const connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org", // Required
});
// Check if connection is already established
if (!connector.connected) {
// create new session
connector.createSession().then(() => {
// get uri for QR Code modal
const uri = connector.uri;
// display QR Code modal
QRCodeModal.open(uri, () => {
console.log("QR Code Modal closed");
});
});
}
// Subscribe to connection events
connector.on("connect", (error, payload) => {
if (error) {
throw error;
}
// Close QR Code Modal
QRCodeModal.close();
// Get provided accounts and chainId
const { accounts, chainId } = payload.params[0];
});

After

import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";
// Create a connector
const connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal,
});
// Check if connection is already established
if (!connector.connected) {
// create new session
connector.createSession();
}
// Subscribe to connection events
connector.on("connect", (error, payload) => {
if (error) {
throw error;
}
// Get provided accounts and chainId
const { accounts, chainId } = payload.params[0];
});

Migrating from React-Native Client

Migrating from the React-Native client to the isomorphic client you need to replace with the new client package and update the constructor arguments.

yarn
npm
yarn
yarn remove @walletconnect/react-native
yarn add @walletconnect/client
npm
npm uninstall --save @walletconnect/react-native
npm install --save @walletconnect/client

Previously the React-Native client required you to pass the clientMeta and push options as part of the second argument, however now the clientMeta is part of the first argument and push options is isolated in the second argument.

Before

import RNWalletConnect from "@walletconnect/react-native";
const connector = new RNWalletConnect(
{
uri: "wc:8a5e5bdc-a0e4-47...TJRNmhWJmoxdFo6UDk2WlhaOyQ5N0U=", // Required
},
{
clientMeta: {
// Required
description: "WalletConnect Developer App",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
},
push: {
// Optional
url: "https://push.walletconnect.org",
type: "fcm",
token: token,
peerMeta: true,
language: language,
},
}
);

After

import WalletConnect from "@walletconnect/client";
const connector = new WalletConnect(
{
// Required
uri: "wc:8a5e5bdc-a0e4-47...TJRNmhWJmoxdFo6UDk2WlhaOyQ5N0U=",
// Required
clientMeta: {
description: "WalletConnect Developer App",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
},
},
{
// Optional
url: "https://push.walletconnect.org",
type: "fcm",
token: token,
peerMeta: true,
language: language,
}
);

Migrating from NodeJS Client

Migrating from the NodeJS client to the isomorphic client you need to replace with the new client package and update the constructor arguments.

yarn
npm
yarn
yarn remove @walletconnect/node
yarn add @walletconnect/client
npm
npm uninstall --save @walletconnect/node
npm install --save @walletconnect/client

Previously the NodeJS client required you to pass the clientMeta as part of the second argument, however now the clientMeta is part of the first argument.

Before

import NodeWalletConnect from "@walletconnect/node";
const connector = new NodeWalletConnect(
{
uri: "wc:8a5e5bdc-a0e4-47...TJRNmhWJmoxdFo6UDk2WlhaOyQ5N0U=", // Required
},
{
clientMeta: {
// Required
description: "WalletConnect Developer App",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
},
}
);

After

import WalletConnect from "@walletconnect/client";
const connector = new WalletConnect({
// Required
uri: "wc:8a5e5bdc-a0e4-47...TJRNmhWJmoxdFo6UDk2WlhaOyQ5N0U=",
// Required
clientMeta: {
description: "WalletConnect Developer App",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
},
});