From ed7e166f620fd86fa912bbd0c9cbe6ca3bdf7e86 Mon Sep 17 00:00:00 2001
From: yivlad <jacenko.vlad@gmail.com>
Date: Tue, 4 Jul 2023 17:13:10 +0200
Subject: [PATCH] Update docs

---
 .../01-Connecting/05-Wallet Connect.mdx       | 123 ++++++------------
 1 file changed, 40 insertions(+), 83 deletions(-)

diff --git a/packages/docs/docs/02-Guides/01-Connecting/05-Wallet Connect.mdx b/packages/docs/docs/02-Guides/01-Connecting/05-Wallet Connect.mdx
index 5a09e6472..dc25f68e3 100644
--- a/packages/docs/docs/02-Guides/01-Connecting/05-Wallet Connect.mdx	
+++ b/packages/docs/docs/02-Guides/01-Connecting/05-Wallet Connect.mdx	
@@ -2,105 +2,62 @@
 
 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/).
 
-## Example
-
-Below is a simple example:
-
-import { ExampleContainer } from '/src/examples/ExampleContainer'
-import WalletConnectExample from '../../../example-loader.js!/src/examples/WalletConnectExample.tsx'
-
-<ExampleContainer example={WalletConnectExample}/>
-
 ## Prerequisites
 
 The tutorial assumes the user has already started with the basics of `useDApp`.
 
 See the [Getting Started](/docs) guide if you are a new user.
 
-Config Your DAppProvider before integrating WalletConnect.
-
-## Motivation
-
-By default, programatic API like Infura/Alchemy and MetaMask wallets are supported.
-This tutorial shows the way to use other wallet.
-
-## Import necessary things:
-
-```tsx
-import WalletConnectProvider from '@walletconnect/web3-provider'
-import { useEthers } from '@usedapp/core'
+## 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:
+
+```ts
+connectors: {
+    ...
+    walletConnectV2: new WalletConnectV2Connector({
+      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
+      chains: [Mainnet],
+      rpcMap: {
+        1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
+      },
+    }),
+    ...
+  },
 ```
 
-## Take 'activate' function
+Now you can connect to WalletConnect v2 by calling `activateBrowserWallet` with the connector name:
 
-It allows us to activate custom provider (default is MetaMask).
+```ts
+import { useEthers } from '@usedapp/core'
 
-```tsx
-const { activate } = useEthers()
-```
+...
 
-## Write custom connect function
+const { activateBrowserWallet } = useEthers()
 
-It overrides current provider by WalletConnect one.
+...
 
-```tsx
-async function onConnect() {
-  const provider = new WalletConnectProvider({
-    infuraId: 'd8df2cb7844e4a54ab0a782f608749dd',
-  })
-  await provider.enable()
-  activate(provider)
-}// change infuraId to yours
+const handleConnectWalletConnect = () => {
+    activateBrowserWallet({ type: 'walletConnectV2' })
+}
 ```
 
-## Add connect function trigger
-
-It allows us to connect after clicking button.
-```tsx
-<button onClick={onConnect}>Connect</button>
-```
+## Known issues
 
-## Create component which use your connect function
+### Chain ID
 
-Here is an example of complex usage:
+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:
 
-```tsx title="example/pages/WalletConnect.tsx"
-import React from 'react'
-import { useEthers } from '@usedapp/core'
-import { Container, ContentBlock, ContentRow, MainContent, Section, SectionRow } from '../components/base/base'
-import { Label } from '../typography/Label'
-import { TextInline } from '../typography/Text'
-import { Title } from '../typography/Title'
-import { Button } from '../components/base/Button'
-import WalletConnectProvider from '@walletconnect/web3-provider'
-
-const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'
-
-export function WalletConnect() {
-  const { activate } = useEthers()
-
-  async function onConnect() {
-    const provider = new WalletConnectProvider({
-      infuraId: 'd8df2cb7844e4a54ab0a782f608749dd',
-    })
-    await provider.enable()
-    activate(provider)
-  }
-
-  return (
-    <MainContent>
-      <Container>
-        <Section>
-          <SectionRow>
-            <Title>WalletConnect Usage Example</Title>
-            <Button onClick={onConnect}>Connect</Button>
-        </Section>
-      </Container>
-    </MainContent>
-  )
-}
+```ts
+connectors: {
+    ...
+    walletConnectV2: new WalletConnectV2Connector({
+      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
+      chains: [Optimism],
+      rpcMap: {
+        1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
+      },
+    }),
+    ...
+  },
 ```
-
-## Summary
-
-In this tutorial we created a simple DApp that allows us to connect with custom wallet. This demonstrates how to connect to WalletConnect in `useDApp`.