Update: WalletConnect - v1 deprecation + additional init options (#1795)

* Deprecate WC v1, add in optional chains and optional methods params, small fix in core to handle console warn for missing i18n option * Refine optional methods prop and docs * Refine walletconnect v2 update * Update docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md Co-authored-by: vanes <vanessa.mercado24@gmail.com> * Update packages/walletconnect/README.md Co-authored-by: vanes <vanessa.mercado24@gmail.com> --------- Co-authored-by: vanes <vanessa.mercado24@gmail.com>
blocknative · Jun 28, 2023 · dcf2f7d · dcf2f7d
1 parent 5846eb5
commit dcf2f7d
Show file tree

Hide file tree

Showing 13 changed files with 242 additions and 174 deletions.
diff --git a/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md b/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md
@@ -7,7 +7,7 @@ title: WalletConnect
 Wallet module for connecting WalletConnect to web3-onboard, currently supporting both v1 and v2.
 
 :::admonition type=warning
-_Not all Wallets support WalletConnect V2 currently. For an up to date list please see the [WalletConnect Explorer](https://explorer.walletconnect.com/?version=2)_
+_Version 1 of WalletConnect has been deprecated by the WC team and the WC bridge is not available. Upgrading to use WalletConnect v2 is recommended. Support will be completely removed from Web3-Onboard in the future_
 :::
 
 ## Install
@@ -33,42 +33,59 @@ npm install @web3-onboard/walletconnect
 
 ```typescript
 type WalletConnectOptions = {
-  bridge?: string // default = 'https://bridge.walletconnect.org'
-  qrcodeModalOptions?: {
-    mobileLinks: string[] // set the order and list of mobile linking wallets
-  }
-  connectFirstChainId?: boolean // if true, connects to the first network chain provided
   /**
    * Optional function to handle WalletConnect URI when it becomes available
    */
   handleUri?: (uri: string) => Promise<unknown>
 } & (
   | {
       /**
-       * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
+       * @deprecated
+       * Version 1 of WalletConnect has been deprecated by the WC team and the WC bridge is not available.
+       * To use version 1 a custom bridge url will need to be provided.
+       * Support will be completely remove from Web3-Onboard in the future
        */
-      version?: 1
+      version: 1
+      /**
+       * Custom URL Bridge must be defined for V1 usage. 
+       * WalletConnect no longer supports a v1 bridge.
+       * Upgrading to use WalletConnect v2 is recommended.
+       * A potential bridge can be found here: 'https://derelay.rabby.io'
+       */
+      bridge: string
+      connectFirstChainId?: boolean
+      qrcodeModalOptions?: {
+        mobileLinks: string[]
+      }
     }
   | {
       /**
        * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
        */
       projectId: string
       /**
-       * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
+       * Defaults to version: 2
        */
-      version: 2
+      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
+      /**
+       * List of Optional Chain(s) ID for wallets to support in number format (integer or hex)
+       * Defaults to the chains provided within the web3-onboard init chain property
+       */
+      optionalChains?: number[] | undefined
       /**
        * `undefined` by default, see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
        */
       qrModalOptions?: EthereumProviderOptions['qrModalOptions']
+      /**
+       * Additional methods to be added to the default list of ['eth_sendTransaction',  'eth_signTransaction',  'personal_sign',  'eth_sign',  'eth_signTypedData',  'eth_signTypedData_v4']
+       * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
+       */
+      additionalOptionalMethods?: string[] | undefined
     }
 )
 ```
@@ -79,53 +96,31 @@ type WalletConnectOptions = {
 import Onboard from '@web3-onboard/core'
 import walletConnectModule from '@web3-onboard/walletconnect'
 
-const wcV1InitOptions = {
-  bridge: 'YOUR_CUSTOM_BRIDGE_SERVER',
-  qrcodeModalOptions: {
-    mobileLinks: ['metamask', 'argent', 'trust']
-  },
-  connectFirstChainId: true
-}
-
 const wcV2InitOptions = {
-  version: 2,
   /**
    * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
    */
   projectId: 'abc123...',
-  /**
-   * Optional function to handle WalletConnect URI when it becomes available
-   */
-  handleUri: (uri) => console.log(uri),
   /**
    * Chains required to be supported by all wallets connecting to your DApp
    */
   requiredChains: [1, 56]
 }
 
 // initialize the module with options
-// If version isn't set it will default to V1 until V1 sunset
-const walletConnect = walletConnectModule(wcV2InitOptions || wcV1InitOptions)
+// If version isn't set it will default to V2 - V1 support will be completely removed shortly as it is deprecated
+const walletConnect = walletConnectModule(wcV2InitOptions)
 
 // can also initialize with no options...
-// Defaults to V1 until V1 sunset
+// Defaults to V2 - V1 support will be completely removed shortly as it is deprecated
 // const walletConnect = walletConnectModule()
 
 const onboard = Onboard({
   // ... other Onboard options
   wallets: [
     walletConnect
     //... other wallets
-  ],
-  chains: [ // chains that are passed as optional chains to WC wallet after cleaning and parsing as number[]
-      {
-        id: '0x89',
-        token: 'MATIC',
-        label: 'Polygon',
-        rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
-      }
-      // ...
-    ]
+  ]
 })
 
 const connectedWallets = await onboard.connectWallet()

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.20.3",
+  "version": "2.20.4-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized 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",

diff --git a/packages/core/src/views/connect/Sidebar.svelte b/packages/core/src/views/connect/Sidebar.svelte
@@ -186,9 +186,9 @@
           {@html defaultBnIcon}
         {/if}
       </div>
-      {#if $_(`connect.${step}.sidebar.heading`, { default: '' })}
+      {#if $_(`connect.${step}.sidebar.header`, { default: '' })}
         <div class="heading">
-          {$_(`connect.${step}.sidebar.heading`, {
+          {$_(`connect.${step}.sidebar.header`, {
             default: heading
           })}
         </div>

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -52,7 +52,7 @@
     "@web3-onboard/trust": "^2.0.3",
     "@web3-onboard/uauth": "^2.0.4",
     "@web3-onboard/venly": "^2.0.0",
-    "@web3-onboard/walletconnect": "^2.3.10-alpha.1",
+    "@web3-onboard/walletconnect": "^2.4.0-alpha.1",
     "@web3-onboard/web3auth": "^2.2.2",
     "@web3-onboard/xdefi": "^2.0.3",
     "@web3-onboard/zeal": "^2.0.3",

diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -116,7 +116,6 @@
 
   const walletConnect = walletConnectModule({
     connectFirstChainId: true,
-    version: 2,
     handleUri: uri => console.log(uri),
     projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
     qrcodeModalOptions: {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.8",
+  "version": "2.8.9-alpha.1",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.3.3",
-    "@web3-onboard/core": "^2.20.3",
+    "@web3-onboard/core": "^2.20.4-alpha.1",
     "use-sync-external-store": "1.0.0"
   },
   "peerDependencies": {

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.7",
+  "version": "2.7.8-alpha.1",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, 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",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.3.3",
-    "@web3-onboard/core": "^2.20.3",
+    "@web3-onboard/core": "^2.20.4-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

diff --git a/packages/walletconnect/README.md b/packages/walletconnect/README.md
@@ -6,50 +6,67 @@
 
 `npm i @web3-onboard/core @web3-onboard/walletconnect`
 
-## Not all Wallets support WalletConnect V2 currently
+## Version 1 of WalletConnect has been deprecated
 
-_For an up to date list please see the [WalletConnect Explorer](https://explorer.walletconnect.com/?version=2)_
+_Version 1 of WalletConnect has been deprecated by the WC team and the WC bridge is not available. If wanting to continue to use WalletConnect V1 a custom bridge URL is required. Support will be completely removed from Web3-Onboard in the future_
 
 ## Options
 
 ```typescript
 type WalletConnectOptions = {
-  bridge?: string // default = 'https://bridge.walletconnect.org'
-  qrcodeModalOptions?: {
-    mobileLinks: string[] // set the order and list of mobile linking wallets
-  }
-  connectFirstChainId?: boolean // if true, connects to the first network chain provided
   /**
    * Optional function to handle WalletConnect URI when it becomes available
    */
   handleUri?: (uri: string) => Promise<unknown>
 } & (
   | {
       /**
-       * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
+       * @deprecated
+       * Version 1 of WalletConnect has been deprecated by the WC team and the WC bridge is not available.
+       * To use version 1 a custom bridge url will need to be provided.
+       * Support will be completely remove from Web3-Onboard in the future
        */
-      version?: 1
+      version: 1
+      /**
+       * Custom URL Bridge must be defined for V1 usage. 
+       * WalletConnect no longer supports a v1 bridge.
+       * Upgrading to use WalletConnect v2 is recommended.
+       * A potential bridge can be found here: 'https://derelay.rabby.io'
+       */
+      bridge: string
+      connectFirstChainId?: boolean
+      qrcodeModalOptions?: {
+        mobileLinks: string[]
+      }
     }
   | {
       /**
        * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
        */
       projectId: string
       /**
-       * Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
+       * Defaults to version: 2
        */
-      version: 2
+      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
+      /**
+       * List of Optional Chain(s) ID for wallets to support in number format (integer or hex)
+       * Defaults to the chains provided within the web3-onboard init chain property
+       */
+      optionalChains?: number[] | undefined
       /**
        * `undefined` by default, see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
        */
       qrModalOptions?: EthereumProviderOptions['qrModalOptions']
+      /**
+       * Additional methods to be added to the default list of ['eth_sendTransaction',  'eth_signTransaction',  'personal_sign',  'eth_sign',  'eth_signTypedData',  'eth_signTypedData_v4']
+       * Passed methods to be included along with the defaults methods - see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
+       */
+      additionalOptionalMethods?: string[] | undefined
     }
 )
 ```
@@ -60,16 +77,7 @@ type WalletConnectOptions = {
 import Onboard from '@web3-onboard/core'
 import walletConnectModule from '@web3-onboard/walletconnect'
 
-const wcV1InitOptions = {
-  bridge: 'YOUR_CUSTOM_BRIDGE_SERVER',
-  qrcodeModalOptions: {
-    mobileLinks: ['metamask', 'argent', 'trust']
-  },
-  connectFirstChainId: true
-}
-
 const wcV2InitOptions = {
-  version: 2,
   /**
    * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
    */
@@ -81,11 +89,11 @@ const wcV2InitOptions = {
 }
 
 // initialize the module with options
-// If version isn't set it will default to V1 until V1 sunset
-const walletConnect = walletConnectModule(wcV2InitOptions || wcV1InitOptions)
+// If version isn't set it will default to V2 - V1 support will be completely removed shortly as it is deprecated
+const walletConnect = walletConnectModule(wcV2InitOptions)
 
 // can also initialize with no options...
-// Defaults to V1 until V1 sunset
+// Defaults to V2 - V1 support will be completely removed shortly as it is deprecated
 // const walletConnect = walletConnectModule()
 
 const onboard = Onboard({

diff --git a/packages/walletconnect/package.json b/packages/walletconnect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/walletconnect",
-  "version": "2.3.10-alpha.1",
+  "version": "2.4.0-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",
@@ -62,7 +62,7 @@
     "@ethersproject/providers": "5.5.0",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/ethereum-provider": "2.8.4",
-    "@walletconnect/modal":"2.5.4",
+    "@walletconnect/modal":"2.5.5",
     "@walletconnect/qrcode-modal": "^1.8.0",
     "@web3-onboard/common": "^2.3.3",
     "rxjs": "^7.5.2"