COMP 1989: upgrade wallet connect ethereum-provider V2

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
-    "@ledgerhq/hw-app-eth": "^6.6.0",
-    "@ledgerhq/hw-transport-webusb": "^6.6.0",
-    "@walletconnect/web3-provider": "^1.5.4",
+    "@ledgerhq/hw-app-eth": "6.6.0",
+    "@ledgerhq/hw-transport-webusb": "6.27.1",
+    "@walletconnect/ethereum-provider": "2.4.3",
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.0.0",
     "bnc-sdk": "^2.1.5",

src/js/sharedEth/connectedWalletPorts.js

@@ -61,7 +61,8 @@ async function connectToTrxProvider(
   ledgerDerivationPath,
   disallowAuthDialog = false,
   showAccount = undefined,
-  desiredNetworkId = 1
+  desiredNetworkId = 1,
+  walletConnectProjectId,
 ) {
   // We support 4 real provider types
   // 1. Ledger
@@ -94,7 +95,7 @@ async function connectToTrxProvider(
       ({ networkId, account, ethereum } = await connectShowAccount(eth, showAccount));
       break;
     case PROVIDER_TYPE_WALLET_CONNECT:
-      ({ networkId, account, ethereum } = await connectWalletConnect(eth, showAccount, desiredNetworkId));
+      ({ networkId, account, ethereum } = await connectWalletConnect(eth, showAccount, desiredNetworkId, walletConnectProjectId));
       break;
     default:
       ({ networkId, account, ethereum } = await disconnect(eth));
@@ -116,7 +117,7 @@ async function connectToTrxProvider(
   }
 }
 
-function subscribeToTrxProviderChanges(app, eth, globEthereum) {
+function subscribeToTrxProviderChanges(app, eth, globEthereum, walletConnectProjectId) {
   // port changeTrxProviderType : { newProviderType: Int, ledgerDerivationPath: String, ledgerWalletConnectRopsten : Bool } -> Cmd msg
   app.ports.changeTrxProviderType.subscribe(
     async ({ newProviderType, ledgerDerivationPath, ledgerWalletConnectRopsten }) => {
@@ -132,13 +133,14 @@ function subscribeToTrxProviderChanges(app, eth, globEthereum) {
         ledgerDerivationPath,
         false,
         false,
-        desiredNetworkId
+        desiredNetworkId,
+        walletConnectProjectId
       );
     }
   );
 }
 
-function subscribeToTryConnect(app, eth, globEthereum, defaultNetworkId) {
+function subscribeToTryConnect(app, eth, globEthereum, defaultNetworkId, walletConnectProjectId) {
   let urlParams = new URLSearchParams(document.location.search.substring(1));
   if (urlParams.get('account')) {
     return showAccount(app, eth, urlParams.get('account'));
@@ -159,7 +161,7 @@ function subscribeToTryConnect(app, eth, globEthereum, defaultNetworkId) {
       // We'll try to set to the user's last chosen provider, otherwise
       // defaulting to Web3.
       let providerType = Number(storage('chosenProvider').get(providerTypeId(globEthereum)));
-      let connected = await connectToTrxProvider(app, eth, globEthereum, providerType, '', true);
+      let connected = await connectToTrxProvider(app, eth, globEthereum, providerType, '', true, walletConnectProjectId);
 
       if (!connected) {
         // Otherwise, let's connect to mainnet to show numbers
@@ -216,9 +218,9 @@ async function showAccount(app, eth, showAccount) {
   await establishConnection(app, eth, networkId, account, ethereum, PROVIDER_TYPE_SHOW_ACCOUNT);
 }
 
-function subscribe(app, eth, globEthereum, networkMap, defaultNetwork) {
-  subscribeToTrxProviderChanges(app, eth, globEthereum);
-  subscribeToTryConnect(app, eth, globEthereum, networkMap[defaultNetwork]);
+function subscribe(app, eth, globEthereum, networkMap, defaultNetwork, walletConnectProjectId) {
+  subscribeToTrxProviderChanges(app, eth, globEthereum, walletConnectProjectId);
+  subscribeToTryConnect(app, eth, globEthereum, networkMap[defaultNetwork], walletConnectProjectId);
 }
 
 export default {

src/js/sharedEth/connectors.js

@@ -1,7 +1,7 @@
 import Eth from 'web3-eth';
 import { getAccounts, getNetworkId, setLedgerProvider, setNewTrxProvider } from './eth';
 import WalletLink from 'walletlink';
-import WalletConnectProvider from '@walletconnect/web3-provider';
+import { EthereumProvider } from "@walletconnect/ethereum-provider";
 
 async function connectLedger(eth, ledgerDerivationPath, disallowAuthDialog = false, desiredNetworkId = 1) {
   // Never auto-connect to ledger, since it's complicated
@@ -149,13 +149,15 @@ async function connectShowAccount(eth, showAccount) {
   };
 }
 
-async function connectWalletConnect(eth, disallowAuthDialog = false, desiredNetworkId = 1) {
+async function connectWalletConnect(eth, disallowAuthDialog = false, desiredNetworkId = 1, walletConnectProjectId) {
   const ethProviderName = desiredNetworkId == 3 ? 'ropsten' : 'mainnet';
   const JSONRPC_URL = eth.dataProviders[ethProviderName].host;
   const CHAIN_ID = desiredNetworkId;
 
-  const trxProvider = new WalletConnectProvider({
-    rpc: { [CHAIN_ID]: JSONRPC_URL },
+  const trxProvider = await EthereumProvider.init({
+    projectId: walletConnectProjectId, // REQUIRED your projectId
+    chains: [CHAIN_ID], // REQUIRED chain ids
+    rpcMap: { [CHAIN_ID]: JSONRPC_URL }, // OPTIONAL rpc urls for each chain
   });
 
   try {