Adds e2e test for most web3 methods that dapps use (#6160)

* schema added

* ui for the dapp added and schema.js changed according to the comments in PR

* added tests for all web3 methods

* Update run-all.sh

* Update web3.spec.js to work with new onboarding flow

* changes made according to the comments

* Create stand alone script for web3 e2e tests.

* Lint fixes for web3 e2e tests.

package.json

@@ -17,6 +17,8 @@
     "test:integration:build": "gulp build:scss",
     "test:e2e:drizzle:beta": "SELENIUM_BROWSER=chrome test/e2e/beta/run-drizzle.sh",
     "test:e2e:chrome": "SELENIUM_BROWSER=chrome test/e2e/beta/run-all.sh",
+    "test:web3:chrome": "SELENIUM_BROWSER=chrome test/e2e/beta/run-web3.sh",
+    "test:web3:firefox": "SELENIUM_BROWSER=firefox test/e2e/beta/run-web3.sh",
     "test:e2e:firefox": "SELENIUM_BROWSER=firefox test/e2e/beta/run-all.sh",
     "test:screens": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:screens:run'",
     "test:screens:run": "node test/screens/new-ui.js",

test/e2e/beta/run-web3.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+set -e
+set -u
+set -o pipefail
+
+export PATH="$PATH:./node_modules/.bin"
+
+shell-parallel -s 'static-server test/web3 --port 8080' -x 'sleep 5 && mocha test/e2e/beta/web3.spec'

test/e2e/beta/web3.spec.js

@@ -0,0 +1,365 @@
+const path = require('path')
+const assert = require('assert')
+const webdriver = require('selenium-webdriver')
+const { By } = webdriver
+const {
+  delay,
+  buildChromeWebDriver,
+  buildFirefoxWebdriver,
+  installWebExt,
+  getExtensionIdChrome,
+  getExtensionIdFirefox,
+} = require('../func')
+const {
+  checkBrowserForConsoleErrors,
+  closeAllWindowHandlesExcept,
+  findElement,
+  findElements,
+  openNewPage,
+  switchToWindowWithTitle,
+  verboseReportOnFailure,
+  waitUntilXWindowHandles,
+} = require('./helpers')
+const fetchMockResponses = require('./fetch-mocks.js')
+
+
+describe('Using MetaMask with an existing account', function () {
+  let extensionId
+  let driver
+
+  const testSeedPhrase = 'forum vessel pink push lonely enact gentle tail admit parrot grunt dress'
+  const regularDelayMs = 1000
+  const largeDelayMs = regularDelayMs * 2
+
+  const button = async (x) => {
+    const buttoncheck = x
+    await buttoncheck.click()
+   await delay(largeDelayMs)
+   const [results] = await findElements(driver, By.css('#results'))
+   const resulttext = await results.getText()
+    var parsedData = JSON.parse(resulttext)
+
+    return (parsedData)
+
+  }
+
+  this.timeout(0)
+  this.bail(true)
+
+  before(async function () {
+    let extensionUrl
+    switch (process.env.SELENIUM_BROWSER) {
+      case 'chrome': {
+        const extensionPath = path.resolve('dist/chrome')
+        driver = buildChromeWebDriver(extensionPath)
+        extensionId = await getExtensionIdChrome(driver)
+        await delay(regularDelayMs)
+        extensionUrl = `chrome-extension://${extensionId}/home.html`
+        break
+      }
+      case 'firefox': {
+        const extensionPath = path.resolve('dist/firefox')
+        driver = buildFirefoxWebdriver()
+        await installWebExt(driver, extensionPath)
+        await delay(regularDelayMs)
+        extensionId = await getExtensionIdFirefox(driver)
+        extensionUrl = `moz-extension://${extensionId}/home.html`
+        break
+      }
+    }
+    // Depending on the state of the application built into the above directory (extPath) and the value of
+    // METAMASK_DEBUG we will see different post-install behaviour and possibly some extra windows. Here we
+    // are closing any extraneous windows to reset us to a single window before continuing.
+    const [tab1] = await driver.getAllWindowHandles()
+    await closeAllWindowHandlesExcept(driver, [tab1])
+    await driver.switchTo().window(tab1)
+    await driver.get(extensionUrl)
+  })
+
+  beforeEach(async function () {
+    await driver.executeScript(
+      'window.origFetch = window.fetch.bind(window);' +
+      'window.fetch = ' +
+      '(...args) => { ' +
+      'if (args[0] === "https://ethgasstation.info/json/ethgasAPI.json") { return ' +
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasBasic + '\')) }); } else if ' +
+      '(args[0] === "https://ethgasstation.info/json/predictTable.json") { return ' +
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } else if ' +
+      '(args[0].match(/chromeextensionmm/)) { return ' +
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.metametrics + '\')) }); } else if ' +
+      '(args[0] === "https://dev.blockscale.net/api/gasexpress.json") { return ' +
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.gasExpress + '\')) }); } ' +
+      'return window.origFetch(...args); };' +
+      'function cancelInfuraRequest(requestDetails) {' +
+        'console.log("Canceling: " + requestDetails.url);' +
+        'return {' +
+          'cancel: true' +
+        '};' +
+     ' }' +
+      'window.chrome && window.chrome.webRequest && window.chrome.webRequest.onBeforeRequest.addListener(' +
+        'cancelInfuraRequest,' +
+        '{urls: ["https://*.infura.io/*"]},' +
+        '["blocking"]' +
+      ');'
+    )
+  })
+
+  afterEach(async function () {
+    if (process.env.SELENIUM_BROWSER === 'chrome') {
+      const errors = await checkBrowserForConsoleErrors(driver)
+      if (errors.length) {
+        const errorReports = errors.map(err => err.message)
+        const errorMessage = `Errors found in browser console:\n${errorReports.join('\n')}`
+        console.error(new Error(errorMessage))
+      }
+    }
+    if (this.currentTest.state === 'failed') {
+      await verboseReportOnFailure(driver, this.currentTest)
+    }
+  })
+
+  after(async function () {
+    await driver.quit()
+  })
+
+  describe('First time flow starting from an existing seed phrase', () => {
+    it('clicks the continue button on the welcome screen', async () => {
+      await findElement(driver, By.css('.welcome-page__header'))
+      const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button'))
+      welcomeScreenBtn.click()
+      await delay(largeDelayMs)
+    })
+
+    it('clicks the "Import Wallet" option', async () => {
+      const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+      customRpcButton.click()
+      await delay(largeDelayMs)
+    })
+
+    it('clicks the "No thanks" option on the metametrics opt-in screen', async () => {
+      const optOutButton = await findElement(driver, By.css('.btn-default'))
+      optOutButton.click()
+      await delay(largeDelayMs)
+    })
+
+    it('imports a seed phrase', async () => {
+      const [seedTextArea] = await findElements(driver, By.css('textarea.first-time-flow__textarea'))
+      await seedTextArea.sendKeys(testSeedPhrase)
+      await delay(regularDelayMs)
+
+      const [password] = await findElements(driver, By.id('password'))
+      await password.sendKeys('correct horse battery staple')
+      const [confirmPassword] = await findElements(driver, By.id('confirm-password'))
+      confirmPassword.sendKeys('correct horse battery staple')
+
+      const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox'))
+      await tosCheckBox.click()
+
+      const [importButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`))
+      await importButton.click()
+      await delay(regularDelayMs)
+    })
+
+    it('clicks through the success screen', async () => {
+      await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`))
+      const doneButton = await findElement(driver, By.css('button.first-time-flow__button'))
+      await doneButton.click()
+      await delay(regularDelayMs)
+    })
+  })
+
+
+    describe('opens dapp', () => {
+
+      it('switches to mainnet', async () => {
+        const networkDropdown = await findElement(driver, By.css('.network-name'))
+        await networkDropdown.click()
+        await delay(regularDelayMs)
+
+        const [mainnet] = await findElements(driver, By.xpath(`//span[contains(text(), 'Main Ethereum Network')]`))
+        await mainnet.click()
+        await delay(largeDelayMs * 2)
+      })
+
+      it('', async () => {
+        await openNewPage(driver, 'http://127.0.0.1:8080/')
+        await delay(regularDelayMs)
+
+        await waitUntilXWindowHandles(driver, 3)
+        const windowHandles = await driver.getAllWindowHandles()
+
+        const extension = windowHandles[0]
+        const popup = await switchToWindowWithTitle(driver, 'MetaMask Notification', windowHandles)
+        const dapp = windowHandles.find(handle => handle !== extension && handle !== popup)
+
+        await delay(regularDelayMs)
+        const approveButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Connect')]`))
+        await approveButton.click()
+
+        await driver.switchTo().window(dapp)
+        await delay(regularDelayMs)
+
+
+      })
+    })
+
+    describe('testing web3 methods', async () => {
+
+
+      it('testing hexa methods', async () => {
+
+
+          var List = await driver.findElements(By.className('hexaNumberMethods'))
+
+          for (let i = 0; i < List.length; i++) {
+            try {
+
+             var parsedData = await button(List[i])
+            console.log(parsedData)
+            var result = parseInt(parsedData.result, 16)
+
+            assert.equal((typeof result === 'number'), true)
+            await delay(regularDelayMs)
+          } catch (err) {
+            console.log(err)
+            assert(false)
+
+          }
+        }
+      })
+
+      it('testing booleanMethods', async () => {
+
+          var List = await driver.findElements(By.className('booleanMethods'))
+
+          for (let i = 0; i < List.length; i++) {
+            try {
+
+              var parsedData = await button(List[i])
+              console.log(parsedData)
+            var result = parsedData.result
+
+            assert.equal(result, false)
+            await delay(regularDelayMs)
+          } catch (err) {
+            console.log(err)
+            assert(false)
+
+
+          }
+        }
+
+      })
+
+      it('testing  transactionMethods', async () => {
+
+          var List = await driver.findElements(By.className('transactionMethods'))
+
+          for (let i = 0; i < List.length; i++) {
+            try {
+
+              var parsedData = await button(List[i])
+
+            console.log(parsedData.result.blockHash)
+
+            var result = []
+             result.push(parseInt(parsedData.result.blockHash, 16))
+             result.push(parseInt(parsedData.result.blockNumber, 16))
+             result.push(parseInt(parsedData.result.gas, 16))
+             result.push(parseInt(parsedData.result.gasPrice, 16))
+             result.push(parseInt(parsedData.result.hash, 16))
+             result.push(parseInt(parsedData.result.input, 16))
+             result.push(parseInt(parsedData.result.nonce, 16))
+             result.push(parseInt(parsedData.result.r, 16))
+             result.push(parseInt(parsedData.result.s, 16))
+             result.push(parseInt(parsedData.result.v, 16))
+             result.push(parseInt(parsedData.result.to, 16))
+             result.push(parseInt(parsedData.result.value, 16))
+
+
+              result.forEach((value) => {
+                assert.equal((typeof value === 'number'), true)
+              })
+
+
+          } catch (err) {
+
+            console.log(err)
+            assert(false)
+
+
+          }
+        }
+
+      })
+
+      it('testing blockMethods', async () => {
+
+          var List = await driver.findElements(By.className('blockMethods'))
+
+          for (let i = 0; i < List.length; i++) {
+            try {
+
+              var parsedData = await button(List[i])
+              console.log(JSON.stringify(parsedData) + i)
+
+            console.log(parsedData.result.parentHash)
+
+            var result = parseInt(parsedData.result.parentHash, 16)
+
+            assert.equal((typeof result === 'number'), true)
+            await delay(regularDelayMs)
+          } catch (err) {
+
+            console.log(err)
+            assert(false)
+
+
+          }
+        }
+      })
+
+      it('testing methods', async () => {
+
+          var List = await driver.findElements(By.className('methods'))
+          var parsedData
+          var result
+
+          for (let i = 0; i < List.length; i++) {
+            try {
+
+              if (i === 2) {
+
+                parsedData = await button(List[i])
+                console.log(parsedData.result.blockHash)
+
+                result = parseInt(parsedData.result.blockHash, 16)
+
+                assert.equal((typeof result === 'number' || (result === 0)), true)
+                await delay(regularDelayMs)
+              } else {
+                parsedData = await button(List[i])
+                console.log(parsedData.result)
+
+                result = parseInt(parsedData.result, 16)
+
+                assert.equal((typeof result === 'number' || (result === 0)), true)
+                await delay(regularDelayMs)
+              }
+
+
+          } catch (err) {
+
+            console.log(err)
+            assert(false)
+
+
+          }
+        }
+      })
+
+
+      })
+
+
+      })

test/web3/index.html

@@ -0,0 +1,105 @@
+<html>
+  <head>
+    <title>Web3  Test Dapp</title>
+  </head>
+  <body>
+    <div style="display: flex; flex-flow: column;">
+      <div style="display: flex; font-size: 1.25rem;">hexaNumberMethods</div>
+      <div style="display: flex;">
+        <button id="eth_blockNumber" class="hexaNumberMethods">eth_blockNumber</button>
+       
+        <button id="eth_gasPrice" class="hexaNumberMethods">eth_gasPrice</button>
+        <button id="eth_newBlockFilter" class="hexaNumberMethods">eth_newBlockFilter</button>
+        <button id="eth_newPendingTransactionFilter" class="hexaNumberMethods">
+          eth_newPendingTransactionFilter
+        </button>
+        <button id="eth_getUncleCountByBlockHash" class="hexaNumberMethods">
+          eth_getUncleCountByBlockHash
+        </button>
+        <button id="eth_getBlockTransactionCountByHash" class="hexaNumberMethods">
+          getBlockTransactionCountByHash
+        </button>
+      </div>
+      <div style="display: flex ;">
+        <button id="eth_getTransactionCount" class="hexaNumberMethods">eth_getTransactionCount</button>
+        <button id="eth_getBalance" class="hexaNumberMethods">eth_getBalance</button>
+        <button id="eth_estimateGas" class="hexaNumberMethods">eth_estimateGas</button>
+      </div>
+      <div style="display: flex ;">
+    
+        <button id="eth_getUncleCountByBlockNumber" class="hexaNumberMethods">
+          eth_getUncleCountByBlockNumber
+        </button>
+        <button id='eth_getBlockTransactionCountByNumber' class="hexaNumberMethods">
+          eth_getBlockTransactionCountByNumber
+        </button>
+        <button id="eth_protocolVersion" class="hexaNumberMethods">eth_protocolVersion</button>
+      
+        <button id="eth_getCode" class="hexaNumberMethods">eth_getCode</button>
+      </div>
+    </div>
+    <div style="display: flex; flex-flow: column;">
+      <div style="display: flex; font-size: 1.25rem;">booleanMethods</div>
+      <div style="display: flex ;">
+        <button id="eth_uninstallFilter" class = 'booleanMethods'>eth_uninstallFilter</button>
+        <button id="eth_mining" class = 'booleanMethods'>eth_mining</button>
+        <button id="eth_syncing" class = 'booleanMethods'>eth_syncing</button>
+      </div>
+    </div>
+    <div style="display: flex; flex-flow: column;">
+      <div style="display: flex; font-size: 1.25rem;" >transactionMethods</div>
+      <div style="display: flex ;">
+        <button id="eth_getTransactionByHash" class='transactionMethods'>eth_getTransactionByHash</button>
+        <button id="eth_getTransactionByBlockHashAndIndex" class = 'transactionMethods'>
+          eth_getTransactionByBlockHashAndIndex
+        </button>
+        <button id="eth_getTransactionByBlockNumberAndIndex"  class="transactionMethods">
+          eth_getTransactionByBlockNumberAndIndex
+        </button>
+        
+     
+      </div>
+    </div>
+
+    <div style="display: flex; flex-flow: column;">
+      <div style="display: flex; font-size: 1.25rem;">blockMethods</div>
+     
+      <div style="display: flex ;">
+      
+
+        <button id="eth_getUncleByBlockHashAndIndex"  class="blockMethods">
+          eth_getUncleByBlockHashAndIndex
+        </button>
+        <button id="eth_getBlockByHash"  class="blockMethods">eth_getBlockByHash</button>
+      </div>
+      <div style="display: flex ;">
+        <button id="eth_getBlockByNumber"  class="blockMethods">eth_getBlockByNumber</button>
+        
+       
+      </div>
+    </div>
+
+    <div style="display: flex; flex-flow: column;">
+      <div style="display: flex; font-size: 1.25rem;">Methods</div>
+      <div style="display: flex ;">
+        <button id="eth_call" class = 'methods'>eth_call</button>
+        <button id="eth_getStorageAt"  class="methods">eth_getStorageAt</button>
+        <button id="eth_getTransactionReceipt" class="methods">
+          eth_getTransactionReceipt
+        </button>
+     
+      </div>
+    </div>
+    <div style="display: flex; flex-flow: column;">
+      <div id='results'></div>
+    </div>
+    
+       
+       
+       
+    </div>
+    <script src="schema.js"></script>
+    <script src="web3.js"></script>
+   
+  </body>
+</html>

test/web3/schema.js

@@ -0,0 +1,209 @@
+/* eslint no-unused-vars: 0 */
+
+var params = {
+  // diffrent params used in the methods
+  param: [],
+  blockHashParams: '0xb3b20624f8f0f86eb50dd04688409e5cea4bd02d700bf6e79e9384d47d6a5a35',
+  filterParams: ['0xfe704947a3cd3ca12541458a4321c869'],
+  transactionHashParams: [
+    '0xbb3a336e3f823ec18197f1e13ee875700f08f03e2cab75f0d0b118dabb44cba0',
+  ],
+  blockHashAndIndexParams: [
+    '0xb3b20624f8f0f86eb50dd04688409e5cea4bd02d700bf6e79e9384d47d6a5a35',
+    '0x0',
+  ],
+  uncleByBlockNumberAndIndexParams: ['0x29c', '0x0'],
+  blockParameterParams: '0x5bad55',
+  data: '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
+  addressParams: '0xc94770007dda54cF92009BFF0dE90c06F603a09f',
+  getStorageAtParams: [
+    '0x295a70b2de5e3953354a6a8344e616ed314d7251',
+    '0x6661e9d6d8b923d5bbaab1b96e1dd51ff6ea2a93520fdc9eb75d059238b8c5e9',
+    '0x65a8db',
+  ],
+  getCodeParams: ['0x06012c8cf97bead5deae237070f9587f8e7a266d', '0x65a8db'],
+  estimateTransaction: {
+    from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',
+    to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567',
+    gas: '0x76c0',
+    gasPrice: '0x9184e72a000',
+    value: '0x9184e72a',
+    data: '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
+  },
+  filterGetLogs: [{'blockHash': '0x7c5a35e9cb3e8ae0e221ab470abae9d446c3a5626ce6689fc777dcffcab52c70', 'topics': ['0x241ea03ca20251805084d27d4440371c34a0b85ff108f6bb5611248f73818b80']}],
+  block: {
+    __required: [],
+    number: 'Q',
+    hash: 'D32',
+    parentHash: 'D32',
+    nonce: 'D',
+    sha3Uncles: 'D',
+    logsBloom: 'D',
+    transactionsRoot: 'D',
+    stateRoot: 'D',
+    receiptsRoot: 'D',
+    miner: 'D',
+    difficulty: 'Q',
+    totalDifficulty: 'Q',
+    extraData: 'D',
+    size: 'Q',
+    gasLimit: 'Q',
+    gasUsed: 'Q',
+    timestamp: 'Q',
+    transactions: ['DATA|Transaction'],
+    uncles: ['D'],
+  },
+  transaction: {
+    __required: [],
+    hash: 'D32',
+    nonce: 'Q',
+    blockHash: 'D32',
+    blockNumber: 'Q',
+    transactionIndex: 'Q',
+    from: 'D20',
+    to: 'D20',
+    value: 'Q',
+    gasPrice: 'Q',
+    gas: 'Q',
+    input: 'D',
+  },
+  receipt: {
+    __required: [],
+    transactionHash: 'D32',
+    transactionIndex: 'Q',
+    blockHash: 'D32',
+    blockNumber: 'Q',
+    cumulativeGasUsed: 'Q',
+    gasUsed: 'Q',
+    contractAddress: 'D20',
+    logs: ['FilterChange'],
+  },
+
+  filterChange: {
+    __required: [],
+    removed: 'B',
+    logIndex: 'Q',
+    transactionIndex: 'Q',
+    transactionHash: 'D32',
+    blockHash: 'D32',
+    blockNumber: 'Q',
+    address: 'D20',
+    data: 'Array|DATA',
+    topics: ['D'],
+  },
+}
+
+var methods = {
+  hexaNumberMethods: {
+    // these are the methods which have output in the form of hexa decimal numbers
+    eth_blockNumber: ['eth_blockNumber', params.param, 'Q'],
+    eth_gasPrice: ['eth_gasPrice', params.param, 'Q'],
+    eth_newBlockFilter: ['eth_newBlockFilter', params.param, 'Q'],
+    eth_newPendingTransactionFilter: [
+      'eth_newPendingTransactionFilter',
+      params.param,
+      'Q',
+    ],
+    eth_getUncleCountByBlockHash: [
+      'eth_getUncleCountByBlockHash',
+      [params.blockHashParams],
+      'Q',
+      1,
+    ],
+    eth_getBlockTransactionCountByHash: [
+      'eth_getBlockTransactionCountByHash',
+      [params.blockHashParams],
+      'Q',
+      1,
+    ],
+    eth_getTransactionCount: [
+      'eth_getTransactionCount',
+      [params.addressParams, params.blockParameterParams],
+      'Q',
+      1,
+      2,
+    ],
+    eth_getBalance: ['eth_getBalance', [params.addressParams, 'latest'], 'Q', 1, 2],
+    eth_estimateGas: ['eth_estimateGas', [params.estimateTransaction], 'Q', 1],
+    eth_getUncleCountByBlockNumber: [
+      'eth_getUncleCountByBlockNumber',
+      [params.blockParameterParams],
+      'Q',
+      1,
+    ],
+    eth_getBlockTransactionCountByNumber: [
+      'eth_getBlockTransactionCountByNumber',
+      ['latest'],
+      'Q',
+      1,
+    ],
+    eth_protocolVersion: ['eth_protocolVersion', params.param, 'S'],
+    eth_getCode: ['eth_getCode', params.getCodeParams, 'D', 1, 2],
+  },
+  booleanMethods: {
+    // these are the methods which have output in the form of boolean
+    eth_uninstallFilter: ['eth_uninstallFilter', params.filterParams, 'B', 1],
+    eth_mining: ['eth_mining', params.param, 'B'],
+    eth_syncing: ['eth_syncing', params.param, 'B|EthSyncing'],
+  },
+  transactionMethods: {
+    // these are the methods which have output in the form of transaction object
+    eth_getTransactionByHash: [
+      'eth_getTransactionByHash',
+      params.transactionHashParams,
+      params.transaction,
+      1,
+    ],
+    eth_getTransactionByBlockHashAndIndex: [
+      'eth_getTransactionByBlockHashAndIndex',
+      params.blockHashAndIndexParams,
+      params.transaction,
+      2,
+    ],
+    eth_getTransactionByBlockNumberAndIndex: [
+      'eth_getTransactionByBlockNumberAndIndex',
+      [params.blockParameterParams, '0x0'],
+      params.transaction,
+      2,
+    ],
+
+  },
+  blockMethods: {
+    // these are the methods which have output in the form of a block
+
+    eth_getUncleByBlockNumberAndIndex: [
+      'eth_getUncleByBlockNumberAndIndex',
+        params.uncleByBlockNumberAndIndexParams,
+      params.block,
+      2,
+    ],
+    eth_getBlockByHash: [
+      'eth_getBlockByHash',
+      [params.params, false],
+      params.block,
+      2,
+    ],
+    eth_getBlockByNumber: [
+      'eth_getBlockByNumber',
+      [params.blockParameterParams, false],
+      params.block,
+      2,
+    ],
+  },
+
+  methods: {
+    // these are the methods which have output in the form of bytes data
+
+    eth_call: ['eth_call', [params.estimateTransaction, 'latest'], 'D', 1, 2],
+    eth_getStorageAt: ['eth_getStorageAt', params.getStorageAtParams, 'D', 2, 2],
+    eth_getTransactionReceipt: [
+      'eth_getTransactionReceipt',
+      params.transactionHashParams,
+      params.receipt,
+      1,
+    ],
+
+  },
+
+}
+

test/web3/web3.js

@@ -0,0 +1,34 @@
+/* eslint no-undef: 0 */
+
+var json = methods
+
+web3.currentProvider.enable().then(() => {
+
+  Object.keys(json).forEach(methodGroupKey => {
+
+    console.log(methodGroupKey)
+    const methodGroup = json[methodGroupKey]
+    console.log(methodGroup)
+    Object.keys(methodGroup).forEach(methodKey => {
+
+      const methodButton = document.getElementById(methodKey)
+      methodButton.addEventListener('click', function (event) {
+
+        window.ethereum.sendAsync({
+          method: methodKey,
+          params: methodGroup[methodKey][1],
+        }, function (err, result) {
+          if (err) {
+            console.log(err)
+            console.log(methodKey)
+          } else {
+            document.getElementById('results').innerHTML = JSON.stringify(result)
+          }
+        })
+      })
+
+      })
+
+    })
+  })
+