Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🧠 Improve WalletConnect v2 docs #1120

Merged
merged 1 commit into from
Jul 4, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 31 additions & 3 deletions packages/docs/docs/02-Guides/01-Connecting/05-Wallet Connect.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Wallet Connect

In this tutorial, we will go through the steps of integrating WalletConnect into your dapp (you can read more about this wallet on: https://walletconnect.com/).
In this tutorial, we will go through the steps of integrating WalletConnect into your dapp (you can read more about this wallet at: https://walletconnect.com/).

## Prerequisites

Expand All @@ -10,7 +10,9 @@ See the [Getting Started](/docs) guide if you are a new user.

## WalletConnect v1 vs v2

WalletConnect v1 has been shut down on 28 June 2023. The only official version of WalletConnect is now v2. `usedapp` has `WalletConnectV2Connector` which is compatible. The connector is provided by the `@usedapp/wallet-connect-v2-connector` package. You can add support to your dapp by following adding the following code to your `usedapp` config:
[WalletConnect v1 has been shut down on June 28, 2023.](https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview) The only official WalletConnect version is now v2.

`usedapp` provides `WalletConnectV2Connector` which is compatible with the changes. To use it, install `@usedapp/wallet-connect-v2-connector` package and add the following config to your dapp:

```ts
connectors: {
Expand Down Expand Up @@ -46,7 +48,10 @@ const handleConnectWalletConnect = () => {

### Chain ID

In WalletConnect v2 you have specify the supported chains by your dapp before connecting to the wallet. This can cause issues with some wallets, for instance Gnosis Safe will reject connection attemp if the correct chain id is not specified or if there are more than one chain id specified. The solution is to specify only one chain id in the `chains` array in the connector config. For instance, if you want to support only Optimsim, you can do the following:
In WalletConnect v2 you must specify the supported chains by your dapp before connecting to the wallet. This can cause issues with some wallets. For instance, Gnosis Safe rejects connection attempts if:
- the correct chain id is not specified, or
- if there is more than one chain id specified.
The solution is to set only one chain id in the `chains` array in the connector config. For instance, if you want to support only Optimsim, you can do the following:

```ts
connectors: {
Expand All @@ -61,3 +66,26 @@ connectors: {
...
},
```

It is possible to create multiple instances of WalletConnectV2Connector, in case your app needs to support Gnosis Safe on multiple chains:

```ts
connectors: {
...
walletConnectV2-mainnet: new WalletConnectV2Connector({
projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
chains: [Mainnet],
rpcMap: {
1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
},
}),
walletConnectV2-optimism: new WalletConnectV2Connector({
projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
chains: [Optimism],
rpcMap: {
1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
},
}),
...
},
```