[walletconnect-v2.3.1-alpha.1]: Update - walletConnect params to include requiredChains and updated WC deps (#1574)

* Update wc package to the latest and parameterize required chains

* Update WC module to allow req chains as parameter

* Update docs

* Update docs

Author: Adamj1232

docs/package.json

@@ -77,7 +77,7 @@
     "@web3-onboard/trezor": "^2.3.3",
     "@web3-onboard/trust": "^2.0.0",
     "@web3-onboard/uauth": "^2.0.1",
-    "@web3-onboard/walletconnect": "^2.3.1",
+    "@web3-onboard/walletconnect": "^2.3.1-alpha.1",
     "@web3-onboard/web3auth": "^2.1.4",
     "@web3-onboard/xdefi": "^2.0.0",
     "animejs": "^3.2.1",

docs/src/routes/docs/[...4]wallets/walletconnect.md

@@ -55,6 +55,13 @@ type WalletConnectOptions = {
        * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
        */
       version: 2
+      /**
+       * List of Required Chain(s) ID for wallets to support in number format (integer or hex)
+       * Defaults to [1] - Ethereum
+       * The chains defined within the web3-onboard config will define the
+       * optional chains for the WalletConnect module
+       */
+      requiredChains?: number[] | undefined
     }
 )
 ```
@@ -106,4 +113,5 @@ console.log(connectedWallets)
 ```
 
 ## Build Environments
-For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
+
+For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)

packages/demo/package.json

@@ -46,7 +46,7 @@
     "@web3-onboard/tallyho": "^2.0.2-alpha.1",
     "@web3-onboard/taho": "^2.0.0-alpha.1",
     "@web3-onboard/web3auth": "^2.1.4",
-    "@web3-onboard/walletconnect": "^2.3.1",
+    "@web3-onboard/walletconnect": "^2.3.1-alpha.1",
     "@web3-onboard/enkrypt": "^2.0.0",
     "@web3-onboard/mew-wallet": "^2.0.0",
     "@web3-onboard/xdefi": "^2.0.0",

packages/demo/src/App.svelte

@@ -109,7 +109,8 @@
     projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
     qrcodeModalOptions: {
     mobileLinks: ['rainbow', 'metamask', 'argent', 'trust', 'imtoken', 'pillar']
-    }
+    },
+    requiredChains: [1]
   })
   const portis = portisModule({
     apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'

packages/walletconnect/README.md

@@ -7,6 +7,7 @@
 `npm i @web3-onboard/core @web3-onboard/walletconnect`
 
 ## Not all Wallets support WalletConnect V2 currently
+
 _For an up to date list please see the [WalletConnect Explorer](https://explorer.walletconnect.com/?version=2)_
 
 ## Options
@@ -39,6 +40,13 @@ type WalletConnectOptions = {
        * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
        */
       version: 2
+      /**
+       * List of Required Chain(s) ID for wallets to support in number format (integer or hex)
+       * Defaults to [1] - Ethereum
+       * The chains defined within the web3-onboard config will define the
+       * optional chains for the WalletConnect module
+       */
+      requiredChains?: number[] | undefined
     }
 )
 ```
@@ -52,7 +60,7 @@ import walletConnectModule from '@web3-onboard/walletconnect'
 const wcV1InitOptions = {
   bridge: 'YOUR_CUSTOM_BRIDGE_SERVER',
   qrcodeModalOptions: {
-    mobileLinks: ['metamask', 'argent', 'trust',]
+    mobileLinks: ['metamask', 'argent', 'trust']
   },
   connectFirstChainId: true
 }

packages/walletconnect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/walletconnect",
-  "version": "2.3.1",
+  "version": "2.3.1-alpha.1",
   "description": "WalletConnect SDK module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@ethersproject/providers": "^5.5.0",
-    "@walletconnect/ethereum-provider": "2.4.6",
+    "@walletconnect/ethereum-provider": "2.4.10",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/qrcode-modal": "^1.8.0",
     "@web3-onboard/common": "^2.2.3",

packages/walletconnect/src/index.ts

@@ -29,6 +29,13 @@ export type WalletConnectOptions = {
        * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
        */
       version: 2
+      /**
+       * List of Required Chain(s) ID for wallets to support in number format (integer or hex)
+       * Defaults to [1] - Ethereum
+       * The chains defined within the web3-onboard config will define the
+       * optional chains for the WalletConnect module
+       */
+      requiredChains?: number[] | undefined
     }
 )
 
@@ -41,7 +48,7 @@ export const isHexString = (value: string | number) => {
 }
 
 function walletConnect(options?: WalletConnectOptions): WalletInit {
-  const version = options?.version || 1
+  const version = options && options.version || 1
   return version === 1 ? v1(options) : v2(options)
 }
 

packages/walletconnect/src/v2.ts

@@ -20,7 +20,7 @@ const methods = [
 
 function walletConnect(options?: WalletConnectOptions): WalletInit {
   const projectId =
-    options && options.version == 2 ? options.projectId : undefined
+    options && options.version === 2 ? options.projectId : undefined
   if (!projectId) {
     throw new Error(
       'WalletConnect requires a projectId. Please visit https://cloud.walletconnect.com to get one.'
@@ -64,10 +64,22 @@ function walletConnect(options?: WalletConnectOptions): WalletInit {
           return wcMetaData
         }
 
+        // default to mainnet
+        const requiredChains =
+          options &&
+          options.version === 2 &&
+          Array.isArray(options.requiredChains) &&
+          options.requiredChains.length &&
+          options.requiredChains.every(num => !isNaN(num) )
+              // @ts-ignore
+              // Required as WC package does not support hex numbers
+            ? options.requiredChains.map(chainID => parseInt(chainID))
+            : [1]
+
         const connector = await EthereumProvider.init({
           projectId,
           metadata: getMetaData(),
-          chains: [1], // default to mainnet
+          chains: requiredChains, // default to mainnet
           optionalChains: chains.map(({ id }) => parseInt(id, 16)),
           optionalMethods: methods,
           rpcMap: chains
@@ -168,7 +180,7 @@ function walletConnect(options?: WalletConnectOptions): WalletInit {
                 })
             }
 
-            (() => {
+            ;(() => {
               const session = this.connector.session
               if (session) {
                 this.emit('accountsChanged', this.connector.accounts)