fix WalletConnect stuck forever (+ resolve merge conflicts and update Next.js) (#360)

* fix: reset provider when user close modal or reject connection

* chore: ignore .next in example

* fix: remove over-optimistic disconnect message comparison and reject anyway

* feat: upgrade @walletconnect/provider to 1.3.4 and use @walletconnect/types

* feat: upgrade walletconnect-connector in example

* chore: update Next.js to fix native module errors

* fix: path

* get example working

bump @walletconnect/types

fix prettier

* fix(walletconnect-connector): use `ethereum-provider` instead

* prettier

Co-authored-by: han0110 <tinghan0110@gmail.com>
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

Author: 3 people

example/.gitignore

@@ -0,0 +1 @@
+.next

example/connectors.ts

@@ -1,16 +1,16 @@
-import { InjectedConnector } from '@web3-react/injected-connector'
-import { NetworkConnector } from '@web3-react/network-connector'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
-import { WalletLinkConnector } from '@web3-react/walletlink-connector'
-import { LedgerConnector } from '@web3-react/ledger-connector'
-import { TrezorConnector } from '@web3-react/trezor-connector'
-import { LatticeConnector } from '@web3-react/lattice-connector'
-import { FrameConnector } from '@web3-react/frame-connector'
 import { AuthereumConnector } from '@web3-react/authereum-connector'
 import { FortmaticConnector } from '@web3-react/fortmatic-connector'
+import { FrameConnector } from '@web3-react/frame-connector'
+import { InjectedConnector } from '@web3-react/injected-connector'
+import { LatticeConnector } from '@web3-react/lattice-connector'
+import { LedgerConnector } from '@web3-react/ledger-connector'
 import { MagicConnector } from '@web3-react/magic-connector'
+import { NetworkConnector } from '@web3-react/network-connector'
 import { PortisConnector } from '@web3-react/portis-connector'
 import { TorusConnector } from '@web3-react/torus-connector'
+import { TrezorConnector } from '@web3-react/trezor-connector'
+import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 
 const POLLING_INTERVAL = 12000
 const RPC_URLS: { [chainId: number]: string } = {
@@ -26,7 +26,9 @@ export const network = new NetworkConnector({
 })
 
 export const walletconnect = new WalletConnectConnector({
-  rpc: { 1: RPC_URLS[1] },
+  rpc: RPC_URLS,
+  chainId: 1,
+  bridge: 'https://bridge.walletconnect.org',
   qrcode: true
 })
 

example/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

example/next.config.js

@@ -1,9 +1,36 @@
-module.exports = {
+/**
+ * @type {import('next').NextConfig}
+ */
+const config = {
   env: {
     RPC_URL_1: 'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213',
     RPC_URL_4: 'https://rinkeby.infura.io/v3/84842078b09946638c03157f83405213',
     FORTMATIC_API_KEY: 'pk_test_A6260FCBAA2EBDFB',
     MAGIC_API_KEY: 'pk_test_398B82F5F0E88874',
     PORTIS_DAPP_ID: 'e9be171c-2b7f-4ff0-8db9-327707511ee2'
+  },
+  webpack5: true,
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        net: false,
+        tls: false,
+        electron: false,
+        '@ethereumjs/tx': false
+      }
+    } else {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        electron: false,
+        '@ethereumjs/tx': false
+      }
+    }
+    return config
+  },
+  experimental: {
+    esmExternals: 'loose'
   }
 }
+
+module.exports = config

example/package.json

@@ -22,7 +22,7 @@
     "@web3-react/trezor-connector": "latest",
     "@web3-react/walletconnect-connector": "latest",
     "@web3-react/walletlink-connector": "latest",
-    "next": "^9.2.1",
+    "next": "^12.0.8",
     "react": ">=16.8",
     "react-dom": ">=16.8",
     "typescript": "^3.7.5"

example/pages/index.tsx

@@ -283,7 +283,11 @@ function App() {
               key={name}
               onClick={() => {
                 setActivatingConnector(currentConnector)
-                activate(connectorsByName[name])
+                activate(connectorsByName[name], (error) => {
+                  if (error) {
+                    setActivatingConnector(undefined)
+                  }
+                })
               }}
             >
               <div