Improve WalletConnect connection

connections/walletconnect.js

@@ -1,24 +1,30 @@
+const { getChain } = require('evm-chains')
+const { convertNumberToHex } = require('@walletconnect/utils')
 const EventEmitter = require('events')
+const presets = require('../presets')
 const dev = process.env.NODE_ENV === 'development'
 
 let WalletConnect, WCQRCode
 
+const XHR = typeof window !== 'undefined' && typeof window.XMLHttpRequest !== 'undefined' ? window.XMLHttpRequest : null
+
 class WalletConnectConnection extends EventEmitter {
-  constructor (_WalletConnect, _WCQRCode, options) {
+  constructor(_WalletConnect, _WCQRCode, options) {
     super()
     WalletConnect = _WalletConnect
     WCQRCode = _WCQRCode
     this.bridge = options.walletConnectBridge
     this.qrcode = options.walletConnectQR
+    this.infuraId = options.walletConnectInfuraId
     this.on('error', () => this.close())
     setTimeout(() => this.create(options), 0)
   }
-  openQR () {
+  openQR() {
     WCQRCode.open(this.wc.uri, () => {
       this.emit('error', new Error('User close WalletConnect QR Code modal'))
     })
   }
-  create (options) {
+  create(options) {
     if (!WalletConnect) this.emit('error', new Error('WalletConnect not available'))
 
     try {
@@ -39,9 +45,11 @@ class WalletConnectConnection extends EventEmitter {
       if (this.qrcode) WCQRCode.close() // Close QR Code Modal
       const { accounts, chainId } = payload.params[0] // Get provided accounts and chainId
 
-      // Save accounts and chainId
+      // Save accounts
       this.accounts = accounts
-      this.chainId = chainId
+
+      // Handle chain update
+      this.updateChain(chainId)
 
       // Emit connect event
       this.emit('connect')
@@ -58,38 +66,158 @@ class WalletConnectConnection extends EventEmitter {
         this.emit('accountsChanged', accounts)
       }
 
-      // Check if chainId changed and trigger event
-      if (this.chainId !== chainId) {
-        this.chainId = chainId
-        this.emit('networkChanged', chainId)
-      }
+      // Handle chain update
+      this.updateChain(chainId)
+
     })
     this.wc.on('disconnect', (e, payload) => {
       if (e) return this.emit('error', e)
       this.onClose()
     })
   }
-  onClose () {
+  onClose() {
     this.wc = null
     this.closed = true
     if (dev) console.log('Closing WalletConnector connection')
     this.emit('close')
     this.removeAllListeners()
   }
-  close () {
+  close() {
     if (this.wc) return this.wc.killSession()
     this.onClose()
   }
-  error (payload, message, code = -1) {
+  error(payload, message, code = -1) {
     this.emit('payload', { id: payload.id, jsonrpc: payload.jsonrpc, error: { message, code } })
   }
-  send (payload) {
+  async send(payload) {
+    const signingMethods = [
+      'eth_sendTransaction',
+      'eth_signTransction',
+      'eth_sign',
+      'eth_signTypedData',
+      'eth_signTypedData_v1',
+      'eth_signTypedData_v3',
+      'personal_sign'
+    ]
+    const stateMethods = [
+      'eth_accounts',
+      'eth_chainId',
+      'net_version'
+    ]
     if (this.wc && this.wc.connected) {
-      return this.wc.sendCustomRequest(payload)
+      if (signingMethods.includes(payload.method)) {
+        const response = await this.wc.unsafeSend(payload)
+        this.emit('payload', response)
+      } else if (stateMethods.includes(payload.method)) {
+        const response = await this.handleStateMethods(payload)
+        this.emit('payload', response)
+      } else {
+        await this.httpConnection.send(payload)
+      }
     } else {
       return this.error(payload, 'Not connected')
     }
   }
+
+  async handleStateMethods(payload) {
+    const response = {
+      id: payload.id,
+      jsonrpc: payload.jsonrpc,
+      result
+    }
+    switch (payload.method) {
+      case 'eth_accounts':
+        response.result = this.accounts
+        break;
+      case 'eth_chainId':
+        response.result = convertNumberToHex(this.chainId)
+        break;
+
+      case 'net_version':
+        response.result = this.networkId
+        break;
+      default:
+        break;
+    }
+    return response
+  }
+
+  async updateChain(chainId) {
+    if (this.chainId === chainId) {
+      return;
+    }
+    const chain = await getChain(chainId)
+
+    // Check if chainId changed and trigger event
+    if (this.chainId !== chainId) {
+      this.chainId = chainId
+      this.emit('chainChanged', chainId)
+    }
+
+    const { networkId } = chain
+    // Check if networkId changed and trigger event
+    if (this.networkId !== networkId) {
+      this.networkId = networkId
+      this.emit('networkChanged', networkId)
+    }
+
+    // Handle rpcUrl update
+    this.updateRpcUrl(chain)
+  }
+
+  updateRpcUrl(chain) {
+    const { chainId, rpc } = chain
+    let rpcUrl = ''
+    if (rpc.length) {
+      if (this.infuraId) {
+        const matches = rpc.filter(rpcUrl => rpcUrl.inclues('infura.io'))
+        if (matches && matches.length) {
+          rpcUrl = matches[0].replace("${INFURA_API_KEY}", this.infuraId)
+        } else {
+          rpcUrl = rpc[0]
+        }
+      }
+    } else {
+      rpcUrl = this.getPresetRpcUrl(chainId)
+    }
+    if (rpcUrl) {
+      // Update rpcUrl 
+      this.rpcUrl = rpcUrl
+      // Handle httpConnection update
+      this.updateHttpConnection()
+    } else {
+      this.emit('error', new Error(`No RPC Url avaialble for chainId: ${chainId}`))
+    }
+  }
+
+  updateHttpConnection = (options) => {
+    if (this.rpcUrl) {
+      this.httpConnection = new HTTPConnection(XHR, this.rpcUrl, options)
+      this.httpConnection.on('payload', payload => this.emit('payload', payload))
+      this.httpConnection.on('error', error => this.emit('error', error))
+    }
+  }
+
+  getPresetRpcUrl(chainId) {
+    switch (chainId) {
+      case 1:
+        return presets.infura[1]
+      case 3:
+        return presets.infuraRopsten[1]
+
+      case 4:
+        return presets.infuraRinkeby[1]
+
+      case 5:
+        return presets.infuraGoerli[1]
+
+      case 42:
+        return presets.infuraKovan[1]
+      default:
+        return ''
+
+    }
+  }
 }
 
 const opts = options => Object.assign({ walletConnectBridge: 'https://bridge.walletconnect.org', walletConnectQR: true }, options)