Merge the develop branch to the master branch, preparation to v2.3.0

.circleci/config.yml

@@ -36,20 +36,6 @@ orbs:
                 curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
                 echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
                 sudo apt-get update && sudo apt-get -y install yarn
-      yarn-install-cached-on-machine:
-        steps:
-          - restore_cache:
-              name: Restore Machine Yarn Package Cache
-              keys:
-                - yarn-machine-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
-          - run:
-              name: Install npm dependencies using Yarn
-              command: nvm use default; yarn install --frozen-lockfile
-          - save_cache:
-              name: Save Machine Yarn Package Cache
-              key: yarn-machine-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
-              paths:
-                - ~/.cache/yarn
       wait-for-oracle:
         parameters:
           redis-key:
@@ -73,21 +59,30 @@ orbs:
                   echo "Sleeping..."
                   sleep 3
                 done
+      init-repo:
+        steps:
+          - checkout
+          - run: git submodule update --init
     executors:
       docker-node:
         docker:
           - image: circleci/node:10.15
-      machine-with-docker-caching:
+      machine-with-dlc:
+        machine:
+          image: ubuntu-1604:202007-01
+          docker_layer_caching: true
+      classic-machine-without-dlc:
         machine:
           image: circleci/classic:latest
-          docker_layer_caching: true
+      machine-without-dlc:
+        machine:
+          image: ubuntu-1604:202007-01
 
 jobs:
   initialize:
     executor: tokenbridge-orb/docker-node
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - restore_cache:
           name: Restore Yarn Package Cache
           keys:
@@ -140,30 +135,43 @@ jobs:
       - restore_cache:
           key: initialize-{{ .Environment.CIRCLE_SHA1 }}
       - run: yarn run test
+  build-e2e-images:
+    executor: tokenbridge-orb/machine-without-dlc
+    steps:
+      - tokenbridge-orb/init-repo
+      - run:
+          command: |
+            docker login -u ${DOCKER_LOGIN} -p ${DOCKER_PASSWORD}
+            cd e2e-commons
+            docker-compose build oracle monitor ui alm e2e molecule_runner
+            docker-compose push oracle monitor ui alm e2e molecule_runner
   oracle-e2e:
-    executor: tokenbridge-orb/docker-node
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
-      - setup_remote_docker:
-          docker_layer_caching: true
-      - run: yarn run oracle-e2e
+      - tokenbridge-orb/init-repo
+      - run: ./oracle-e2e/run-tests.sh
   ui-e2e:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
       - tokenbridge-orb/install-node
       - tokenbridge-orb/install-yarn
       - tokenbridge-orb/install-chrome
-      - run: git submodule update --init
-      - tokenbridge-orb/yarn-install-cached-on-machine
+      - restore_cache:
+          key: initialize-{{ .Environment.CIRCLE_SHA1 }}
       - run: yarn run ui-e2e
   monitor-e2e:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - run: ./monitor-e2e/run-tests.sh
+  alm-e2e:
+    executor: tokenbridge-orb/machine-without-dlc
+    steps:
+      - tokenbridge-orb/install-node
+      - tokenbridge-orb/install-yarn
+      - restore_cache:
+          key: initialize-{{ .Environment.CIRCLE_SHA1 }}
+      - run: yarn run alm-e2e
   cover:
     executor: tokenbridge-orb/docker-node
     steps:
@@ -172,55 +180,47 @@ jobs:
       - run: yarn workspace ui run coverage
       - run: yarn workspace ui run coveralls
   deployment-oracle:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - run:
           name: Run the scenario
           command: deployment-e2e/molecule.sh oracle
           no_output_timeout: 40m
   deployment-ui:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - run:
           name: Run the scenario
           command: deployment-e2e/molecule.sh ui
           no_output_timeout: 40m
   deployment-monitor:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - run:
           name: Run the scenario
           command: deployment-e2e/molecule.sh monitor
           no_output_timeout: 40m
   deployment-repo:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
-      - tokenbridge-orb/install-node
-      - tokenbridge-orb/install-yarn
-      - tokenbridge-orb/yarn-install-cached-on-machine
+      - tokenbridge-orb/init-repo
       - run:
           name: Run the scenario
           command: deployment-e2e/molecule.sh repo
           no_output_timeout: 40m
   deployment-multiple:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/machine-without-dlc
     steps:
-      - checkout
-      - run: git submodule update --init
+      - tokenbridge-orb/init-repo
       - run:
           name: Run the scenario
           command: deployment-e2e/molecule.sh multiple
           no_output_timeout: 40m
   ultimate:
-    executor: tokenbridge-orb/machine-with-docker-caching
+    executor: tokenbridge-orb/classic-machine-without-dlc
     parameters:
       scenario-name:
         description: "Molecule scenario name used to create the infrastructure"
@@ -237,12 +237,11 @@ jobs:
         default: ''
         type: string
     steps:
-      - checkout
-      - run: git submodule update --init
       - tokenbridge-orb/install-node
       - tokenbridge-orb/install-chrome
       - tokenbridge-orb/install-yarn
-      - tokenbridge-orb/yarn-install-cached-on-machine
+      - restore_cache:
+          key: initialize-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Prepare the infrastructure
           command: e2e-commons/up.sh deploy << parameters.scenario-name >> blocks
@@ -286,35 +285,97 @@ workflows:
           filters:
             branches:
               only: master
-      - oracle-e2e
-      - ui-e2e
-      - monitor-e2e
-      - deployment-oracle
-      - deployment-ui
-      - deployment-monitor
-      - deployment-repo
-      - deployment-multiple
+      - build-e2e-images
+      - oracle-e2e:
+          requires:
+            - build-e2e-images
+      - ui-e2e:
+          requires:
+            - build-e2e-images
+            - initialize
+      - monitor-e2e:
+          requires:
+            - build-e2e-images
+      - alm-e2e:
+          requires:
+            - build-e2e-images
+            - initialize
+      - deployment-oracle:
+          requires:
+            - build-e2e-images
+      - deployment-ui:
+          requires:
+            - build-e2e-images
+      - deployment-monitor:
+          requires:
+            - build-e2e-images
+      - deployment-repo:
+          requires:
+            - build-e2e-images
+      - deployment-multiple:
+          requires:
+            - build-e2e-images
       - ultimate:
+          requires:
+            - build-e2e-images
+            - initialize
+          filters:
+            branches:
+              only:
+                - master
+                - develop
           name: "ultimate: native to erc"
           scenario-name: native-to-erc
           redis-key: native-erc-collected-signatures:lastProcessedBlock
           ui-e2e-grep: "NATIVE TO ERC"
       - ultimate:
+          requires:
+            - build-e2e-images
+            - initialize
+          filters:
+            branches:
+              only:
+                - master
+                - develop
           name: "ultimate: erc to native"
           scenario-name: erc-to-native
           redis-key: erc-native-collected-signatures:lastProcessedBlock
           ui-e2e-grep: "ERC TO NATIVE"
       - ultimate:
+          requires:
+            - build-e2e-images
+            - initialize
+          filters:
+            branches:
+              only:
+                - master
+                - develop
           name: "ultimate: erc to erc"
           scenario-name: erc-to-erc
           redis-key: erc-erc-collected-signatures:lastProcessedBlock
           ui-e2e-grep: "ERC TO ERC"
       - ultimate:
+          requires:
+            - build-e2e-images
+            - initialize
+          filters:
+            branches:
+              only:
+                - master
+                - develop
           name: "ultimate: amb"
           scenario-name: amb
           redis-key: amb-collected-signatures:lastProcessedBlock
           oracle-e2e-script: "amb"
       - ultimate:
+          requires:
+            - build-e2e-images
+            - initialize
+          filters:
+            branches:
+              only:
+                - master
+                - develop
           name: "ultimate: amb stake erc to erc"
           scenario-name: ultimate-amb-stake-erc-to-erc
           redis-key: amb-collected-signatures:lastProcessedBlock

.eslintignore

@@ -3,3 +3,4 @@ submodules
 coverage
 lib
 dist
+build

.nvmrc

@@ -1 +1 @@
-10.16
+10.22

CONFIGURATION.md

@@ -36,6 +36,7 @@ ORACLE_LOG_LEVEL | Set the level of details in the logs. | `trace` / `debug` / `
 ORACLE_MAX_PROCESSING_TIME | The workers processes will be killed if this amount of time (in milliseconds) is elapsed before they finish processing. It is recommended to set this value to 4 times the value of the longest polling time (set with the `HOME_POLLING_INTERVAL` and `FOREIGN_POLLING_INTERVAL` variables). To disable this, set the time to 0. | integer
 ORACLE_VALIDATOR_ADDRESS_PRIVATE_KEY | The private key of the bridge validator used to sign confirmations before sending transactions to the bridge contracts. The validator account is calculated automatically from the private key. Every bridge instance (set of watchers and senders) must have its own unique private key. The specified private key is used to sign transactions on both sides of the bridge. | hexidecimal without "0x"
 ORACLE_VALIDATOR_ADDRESS | The public address of the bridge validator | hexidecimal with "0x"
+ORACLE_TX_REDUNDANCY | If set to `true`, instructs oracle to send `eth_sendRawTransaction` requests through all available RPC urls defined in `COMMON_HOME_RPC_URL` and `COMMON_FOREIGN_RPC_URL` variables instead of using first available one
 
 
 ## UI configuration

Dockerfile.e2e

@@ -1,15 +1,31 @@
-FROM node:10
+FROM node:8 as contracts
+
+WORKDIR /mono
+
+COPY contracts/package.json contracts/package-lock.json ./contracts/
+
+WORKDIR /mono/contracts
+RUN npm install --only=prod
+
+COPY ./contracts/truffle-config.js ./
+COPY ./contracts/contracts ./contracts
+RUN npm run compile
+
+FROM node:8
 
 WORKDIR /mono
 COPY package.json .
+COPY --from=contracts /mono/contracts/build ./contracts/build
 COPY oracle-e2e/package.json ./oracle-e2e/
 COPY monitor-e2e/package.json ./monitor-e2e/
-COPY contracts/package.json ./contracts/
 
 COPY yarn.lock .
-RUN yarn install --frozen-lockfile
-COPY ./contracts ./contracts
-RUN yarn install:deploy
-RUN yarn compile:contracts
+RUN NOYARNPOSTINSTALL=1 yarn install --frozen-lockfile --production
 
-COPY . .
+COPY ./contracts/deploy ./contracts/deploy
+RUN yarn install:deploy
+
+COPY commons/ ./commons/
+COPY oracle-e2e/ ./oracle-e2e/
+COPY monitor-e2e/ ./monitor-e2e/
+COPY e2e-commons/ ./e2e-commons/

alm-e2e/.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "plugin:node/recommended",
+    "airbnb-base",
+    "../.eslintrc"
+  ],
+  "plugins": ["node", "jest"],
+  "env": {
+    "jest/globals": true
+  },
+  "globals": {
+    "page": true,
+    "browser": true
+  }
+}

alm-e2e/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "alm-e2e",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "test": "jest --detectOpenHandles",
+    "lint": "eslint . --ignore-path ../.eslintignore",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "jest": "24.7.1",
+    "jest-puppeteer": "^4.4.0",
+    "puppeteer": "^5.2.1"
+  },
+  "jest": {
+    "preset": "jest-puppeteer"
+  },
+  "devDependencies": {
+    "eslint-plugin-jest": "^23.18.0"
+  },
+  "engines": {
+    "node": ">= 8.9"
+  }
+}

alm-e2e/run-tests.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+cd $(dirname $0)
+
+../e2e-commons/up.sh deploy blocks alm alm-e2e
+
+# run oracle amb e2e tests to generate transactions for alm
+docker-compose -f ../e2e-commons/docker-compose.yml run e2e yarn workspace oracle-e2e run alm
+
+yarn test
+rc=$?
+
+../e2e-commons/down.sh
+exit $rc

alm-e2e/src/test.js

@@ -0,0 +1,50 @@
+const puppeteer = require('puppeteer')
+const { waitUntil } = require('./utils/utils')
+
+jest.setTimeout(60000)
+
+const statusText = 'Success'
+const statusSelector = 'label[data-id="status"]'
+
+const homeToForeignTxURL = 'http://localhost:3004/77/0x58e7d63368335b9591d4dbb43889084f698fcee93ab7656fd7a39d8c66bc4b60'
+const foreignToHomeTxURL = 'http://localhost:3004/42/0x592bf28fc896419d2838f71cd0388775814b692688f1ecd5b1519081566b994a'
+
+describe('ALM', () => {
+  let browser
+  let page
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch()
+    page = await browser.newPage()
+  })
+
+  afterAll(async () => {
+    await browser.close()
+  })
+
+  it('should be titled "AMB Live Monitoring"', async () => {
+    await page.goto(foreignToHomeTxURL)
+
+    await expect(page.title()).resolves.toMatch('AMB Live Monitoring')
+  })
+  it('should display information of foreign to home transaction', async () => {
+    await page.goto(foreignToHomeTxURL)
+
+    await page.waitForSelector(statusSelector)
+    await waitUntil(async () => {
+      const element = await page.$(statusSelector)
+      const text = await page.evaluate(element => element.textContent, element)
+      return text === statusText
+    })
+  })
+  it('should display information of home to foreign transaction', async () => {
+    await page.goto(homeToForeignTxURL)
+
+    await page.waitForSelector(statusSelector)
+    await waitUntil(async () => {
+      const element = await page.$(statusSelector)
+      const text = await page.evaluate(element => element.textContent, element)
+      return text === statusText
+    })
+  })
+})

alm-e2e/src/utils/utils.js

@@ -0,0 +1,15 @@
+const waitUntil = async (predicate, step = 100, timeout = 20000) => {
+  const stopTime = Date.now() + timeout
+  while (Date.now() <= stopTime) {
+    const result = await predicate()
+    if (result) {
+      return result
+    }
+    await new Promise(resolve => setTimeout(resolve, step)) // sleep
+  }
+  throw new Error(`waitUntil timed out after ${timeout} ms`)
+}
+
+module.exports = {
+  waitUntil
+}

alm/.env.example

@@ -3,3 +3,13 @@ COMMON_FOREIGN_BRIDGE_ADDRESS=0xFe446bEF1DbF7AFE24E81e05BC8B271C1BA9a560
 
 COMMON_HOME_RPC_URL=https://sokol.poa.network
 COMMON_FOREIGN_RPC_URL=https://kovan.infura.io/v3/
+
+ALM_HOME_NETWORK_NAME=Sokol Testnet
+ALM_FOREIGN_NETWORK_NAME=Kovan Testnet
+
+ALM_HOME_EXPLORER_TX_TEMPLATE=https://blockscout.com/poa/sokol/tx/%s
+ALM_FOREIGN_EXPLORER_TX_TEMPLATE=https://blockscout.com/eth/kovan/tx/%s
+
+ALM_HOME_EXPLORER_API=https://blockscout.com/poa/sokol/api
+ALM_FOREIGN_EXPLORER_API=https://kovan.etherscan.io/api?apikey=YourApiKeyToken
+PORT=8080

alm/.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+src/snapshots/*.json
+
 # dependencies
 /node_modules
 /.pnp

alm/Dockerfile

@@ -1,23 +1,38 @@
-FROM node:12
+FROM node:8 as contracts
+
+WORKDIR /mono
+
+COPY contracts/package.json contracts/package-lock.json ./contracts/
+
+WORKDIR /mono/contracts
+RUN npm install --only=prod
+
+COPY ./contracts/truffle-config.js ./
+COPY ./contracts/contracts ./contracts
+RUN npm run compile
+
+FROM node:12 as alm-builder
 
 WORKDIR /mono
 COPY package.json .
-COPY contracts/package.json ./contracts/
+COPY --from=contracts /mono/contracts/build ./contracts/build
 COPY commons/package.json ./commons/
 COPY alm/package.json ./alm/
 COPY yarn.lock .
-RUN yarn install --production --frozen-lockfile
-
-COPY ./contracts ./contracts
-RUN yarn run compile:contracts
-RUN mv ./contracts/build ./ && rm -rf ./contracts/* ./contracts/.[!.]* && mv ./build ./contracts/
+RUN NOYARNPOSTINSTALL=1 yarn install --frozen-lockfile --production
 
 COPY ./commons ./commons
-
 COPY ./alm ./alm
+
 ARG DOT_ENV_PATH=./alm/.env
 COPY ${DOT_ENV_PATH} ./alm/.env
 
 WORKDIR /mono/alm
-CMD echo "To start the application run:" \
-  "yarn start"
+RUN yarn run build
+
+
+FROM node:12 as alm-production
+RUN yarn global add serve
+WORKDIR /app
+COPY --from=alm-builder /mono/alm/build .
+CMD serve -p $PORT -s .

alm/docker-compose.yml

@@ -5,8 +5,10 @@ services:
     build:
       context: ..
       dockerfile: alm/Dockerfile
+    ports:
+      - "${PORT}:${PORT}"
     env_file: ./.env
     environment: 
       - NODE_ENV=production
     restart: unless-stopped
-    entrypoint: yarn start
+    entrypoint: serve -p ${PORT} -s .

alm/package.json

@@ -3,26 +3,40 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-hook/window-size": "^3.0.6",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
+    "@types/promise-retry": "^1.1.3",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/styled-components": "^5.1.0",
+    "@use-it/interval": "^0.1.3",
     "customize-cra": "^1.0.0",
+    "date-fns": "^2.14.0",
+    "dotenv": "^8.2.0",
+    "fast-memoize": "^2.5.2",
+    "promise-retry": "^2.0.1",
     "react": "^16.13.1",
     "react-app-rewired": "^2.1.6",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.0.1",
-    "typescript": "^3.5.2"
+    "styled-components": "^5.1.1",
+    "typescript": "^3.5.2",
+    "web3": "1.2.7",
+    "web3-eth-contract": "1.2.7"
   },
   "scripts": {
-    "start": "./load-env.sh react-app-rewired start",
-    "build": "./load-env.sh react-app-rewired build",
+    "start": "yarn createSnapshots && ./load-env.sh react-app-rewired start",
+    "build": "yarn createSnapshots && ./load-env.sh react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --ignore-path ../.eslintignore"
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --ignore-path ../.eslintignore",
+    "createSnapshots": "node scripts/createSnapshots.js"
   },
   "eslintConfig": {
     "extends": "react-app"

alm/public/index.html

@@ -7,8 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="AMB Live Monitoring"
     />
+    <link rel="stylesheet" href="https://unpkg.com/chota@latest">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +25,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
+    <title>AMB Live Monitoring</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

alm/public/manifest.json

@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "ALM",
+  "name": "AMB Live Monitoring",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

alm/scripts/createSnapshots.js

@@ -0,0 +1,118 @@
+const { BRIDGE_VALIDATORS_ABI, HOME_AMB_ABI } = require('commons')
+
+const path = require('path')
+require('dotenv').config()
+const Web3 = require('web3')
+
+const fs = require('fs')
+
+const {
+  COMMON_HOME_RPC_URL,
+  COMMON_HOME_BRIDGE_ADDRESS,
+  COMMON_FOREIGN_RPC_URL,
+  COMMON_FOREIGN_BRIDGE_ADDRESS
+} = process.env
+
+const generateSnapshot = async (side, url, bridgeAddress) => {
+  const snapshotPath = `../src/snapshots/${side}.json`
+  const snapshotFullPath = path.join(__dirname, snapshotPath)
+  const snapshot = {}
+
+  const web3 = new Web3(new Web3.providers.HttpProvider(url))
+
+  const currentBlockNumber = await web3.eth.getBlockNumber()
+  snapshot.snapshotBlockNumber = currentBlockNumber
+
+  // Save chainId
+  snapshot.chainId = await web3.eth.getChainId()
+
+  const bridgeContract = new web3.eth.Contract(HOME_AMB_ABI, bridgeAddress)
+
+  // Save RequiredBlockConfirmationChanged events
+  let requiredBlockConfirmationChangedEvents = await bridgeContract.getPastEvents('RequiredBlockConfirmationChanged', {
+    fromBlock: 0,
+    toBlock: currentBlockNumber
+  })
+
+  // In case RequiredBlockConfirmationChanged was not emitted during initialization in early versions of AMB
+  // manually generate an event for this. Example Sokol - Kovan bridge
+  if (requiredBlockConfirmationChangedEvents.length === 0) {
+    const deployedAtBlock = await bridgeContract.methods.deployedAtBlock().call()
+    const blockConfirmations = await bridgeContract.methods.requiredBlockConfirmations().call()
+
+    requiredBlockConfirmationChangedEvents.push({
+      blockNumber: parseInt(deployedAtBlock),
+      returnValues: {
+        requiredBlockConfirmations: blockConfirmations
+      }
+    })
+  }
+
+  snapshot.RequiredBlockConfirmationChanged = requiredBlockConfirmationChangedEvents.map(e => ({
+    blockNumber: e.blockNumber,
+    returnValues: {
+      requiredBlockConfirmations: e.returnValues.requiredBlockConfirmations
+    }
+  }))
+
+  const validatorAddress = await bridgeContract.methods.validatorContract().call()
+  const validatorContract = new web3.eth.Contract(BRIDGE_VALIDATORS_ABI, validatorAddress)
+
+  // Save RequiredSignaturesChanged events
+  const RequiredSignaturesChangedEvents = await validatorContract.getPastEvents('RequiredSignaturesChanged', {
+    fromBlock: 0,
+    toBlock: currentBlockNumber
+  })
+  snapshot.RequiredSignaturesChanged = RequiredSignaturesChangedEvents.map(e => ({
+    blockNumber: e.blockNumber,
+    returnValues: {
+      requiredSignatures: e.returnValues.requiredSignatures
+    }
+  }))
+
+  // Save ValidatorAdded events
+  const validatorAddedEvents = await validatorContract.getPastEvents('ValidatorAdded', {
+    fromBlock: 0,
+    toBlock: currentBlockNumber
+  })
+
+  snapshot.ValidatorAdded = validatorAddedEvents.map(e => ({
+    blockNumber: e.blockNumber,
+    returnValues: {
+      validator: e.returnValues.validator
+    },
+    event: 'ValidatorAdded'
+  }))
+
+  // Save ValidatorRemoved events
+  const validatorRemovedEvents = await validatorContract.getPastEvents('ValidatorRemoved', {
+    fromBlock: 0,
+    toBlock: currentBlockNumber
+  })
+
+  snapshot.ValidatorRemoved = validatorRemovedEvents.map(e => ({
+    blockNumber: e.blockNumber,
+    returnValues: {
+      validator: e.returnValues.validator
+    },
+    event: 'ValidatorRemoved'
+  }))
+
+  // Write snapshot
+  fs.writeFileSync(snapshotFullPath, JSON.stringify(snapshot, null, 2))
+}
+
+const main = async () => {
+  await Promise.all([
+    generateSnapshot('home', COMMON_HOME_RPC_URL, COMMON_HOME_BRIDGE_ADDRESS),
+    generateSnapshot('foreign', COMMON_FOREIGN_RPC_URL, COMMON_FOREIGN_BRIDGE_ADDRESS)
+  ])
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch(error => {
+    console.log('Error while creating snapshots')
+    console.error(error)
+    process.exit(0)
+  })

alm/src/App.css

@@ -1,14 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}

alm/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import App from './App'
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />)
-  const linkElement = getByText(/AMB Live Monitoring/i)
-  expect(linkElement).toBeInTheDocument()
-})

alm/src/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import './App.css'
+import { BrowserRouter } from 'react-router-dom'
+import { MainPage } from './components/MainPage'
+import { StateProvider } from './state/StateProvider'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>AMB Live Monitoring</p>
-      </header>
-    </div>
+    <BrowserRouter>
+      <StateProvider>
+        <MainPage />
+      </StateProvider>
+    </BrowserRouter>
   )
 }
 

alm/src/abis/BridgeValidators.ts

@@ -0,0 +1,319 @@
+import { AbiItem } from 'web3-utils'
+
+const abi: AbiItem[] = [
+  {
+    constant: true,
+    inputs: [],
+    name: 'validatorCount',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'getBridgeValidatorsInterfacesVersion',
+    outputs: [
+      {
+        name: 'major',
+        type: 'uint64'
+      },
+      {
+        name: 'minor',
+        type: 'uint64'
+      },
+      {
+        name: 'patch',
+        type: 'uint64'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'isInitialized',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'validatorList',
+    outputs: [
+      {
+        name: '',
+        type: 'address[]'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_requiredSignatures',
+        type: 'uint256'
+      }
+    ],
+    name: 'setRequiredSignatures',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'requiredSignatures',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_address',
+        type: 'address'
+      }
+    ],
+    name: 'getNextValidator',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'owner',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_validator',
+        type: 'address'
+      }
+    ],
+    name: 'isValidatorDuty',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'deployedAtBlock',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'F_ADDR',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'transferOwnership',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_validator',
+        type: 'address'
+      }
+    ],
+    name: 'isValidator',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'validator',
+        type: 'address'
+      }
+    ],
+    name: 'ValidatorAdded',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'validator',
+        type: 'address'
+      }
+    ],
+    name: 'ValidatorRemoved',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'requiredSignatures',
+        type: 'uint256'
+      }
+    ],
+    name: 'RequiredSignaturesChanged',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'previousOwner',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_requiredSignatures',
+        type: 'uint256'
+      },
+      {
+        name: '_initialValidators',
+        type: 'address[]'
+      },
+      {
+        name: '_owner',
+        type: 'address'
+      }
+    ],
+    name: 'initialize',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_validator',
+        type: 'address'
+      }
+    ],
+    name: 'addValidator',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_validator',
+        type: 'address'
+      }
+    ],
+    name: 'removeValidator',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export default abi

alm/src/abis/ForeignAMB.ts

@@ -0,0 +1,589 @@
+import { AbiItem } from 'web3-utils'
+
+const abi: AbiItem[] = [
+  {
+    constant: true,
+    inputs: [],
+    name: 'transactionHash',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_txHash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'relayedMessages',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_sourceChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_destinationChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_validatorContract',
+        type: 'address'
+      },
+      {
+        name: '_maxGasPerTx',
+        type: 'uint256'
+      },
+      {
+        name: '_gasPrice',
+        type: 'uint256'
+      },
+      {
+        name: '_requiredBlockConfirmations',
+        type: 'uint256'
+      },
+      {
+        name: '_owner',
+        type: 'address'
+      }
+    ],
+    name: 'initialize',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'isInitialized',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'requiredBlockConfirmations',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_data',
+        type: 'bytes'
+      },
+      {
+        name: '_signatures',
+        type: 'bytes'
+      }
+    ],
+    name: 'executeSignatures',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_data',
+        type: 'bytes'
+      }
+    ],
+    name: 'getMinimumGasUsage',
+    outputs: [
+      {
+        name: 'gas',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageReceiver',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'getBridgeMode',
+    outputs: [
+      {
+        name: '_data',
+        type: 'bytes4'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_sourceChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_destinationChainId',
+        type: 'uint256'
+      }
+    ],
+    name: 'setChainIds',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageSender',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageId',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_token',
+        type: 'address'
+      },
+      {
+        name: '_to',
+        type: 'address'
+      }
+    ],
+    name: 'claimTokens',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_maxGasPerTx',
+        type: 'uint256'
+      }
+    ],
+    name: 'setMaxGasPerTx',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'requiredSignatures',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'owner',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'validatorContract',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'deployedAtBlock',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'getBridgeInterfacesVersion',
+    outputs: [
+      {
+        name: 'major',
+        type: 'uint64'
+      },
+      {
+        name: 'minor',
+        type: 'uint64'
+      },
+      {
+        name: 'patch',
+        type: 'uint64'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageSourceChainId',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_blockConfirmations',
+        type: 'uint256'
+      }
+    ],
+    name: 'setRequiredBlockConfirmations',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_gasPrice',
+        type: 'uint256'
+      }
+    ],
+    name: 'setGasPrice',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'messageCallStatus',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageSender',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_contract',
+        type: 'address'
+      },
+      {
+        name: '_data',
+        type: 'bytes'
+      },
+      {
+        name: '_gas',
+        type: 'uint256'
+      }
+    ],
+    name: 'requireToPassMessage',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageDataHash',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'maxGasPerTx',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'transferOwnership',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'gasPrice',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'messageId',
+        type: 'bytes32'
+      },
+      {
+        indexed: false,
+        name: 'encodedData',
+        type: 'bytes'
+      }
+    ],
+    name: 'UserRequestForAffirmation',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'sender',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        name: 'executor',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        name: 'messageId',
+        type: 'bytes32'
+      },
+      {
+        indexed: false,
+        name: 'status',
+        type: 'bool'
+      }
+    ],
+    name: 'RelayedMessage',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'gasPrice',
+        type: 'uint256'
+      }
+    ],
+    name: 'GasPriceChanged',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'requiredBlockConfirmations',
+        type: 'uint256'
+      }
+    ],
+    name: 'RequiredBlockConfirmationChanged',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'previousOwner',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event'
+  }
+]
+
+export default abi

alm/src/abis/HomeAMB.ts

@@ -0,0 +1,777 @@
+import { AbiItem } from 'web3-utils'
+
+const abi: AbiItem[] = [
+  {
+    constant: true,
+    inputs: [],
+    name: 'transactionHash',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_message',
+        type: 'bytes32'
+      }
+    ],
+    name: 'numMessagesSigned',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_hash',
+        type: 'bytes32'
+      },
+      {
+        name: '_index',
+        type: 'uint256'
+      }
+    ],
+    name: 'signature',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_sourceChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_destinationChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_validatorContract',
+        type: 'address'
+      },
+      {
+        name: '_maxGasPerTx',
+        type: 'uint256'
+      },
+      {
+        name: '_gasPrice',
+        type: 'uint256'
+      },
+      {
+        name: '_requiredBlockConfirmations',
+        type: 'uint256'
+      },
+      {
+        name: '_owner',
+        type: 'address'
+      }
+    ],
+    name: 'initialize',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'isInitialized',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'requiredBlockConfirmations',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_data',
+        type: 'bytes'
+      }
+    ],
+    name: 'getMinimumGasUsage',
+    outputs: [
+      {
+        name: 'gas',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageReceiver',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'getBridgeMode',
+    outputs: [
+      {
+        name: '_data',
+        type: 'bytes4'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_sourceChainId',
+        type: 'uint256'
+      },
+      {
+        name: '_destinationChainId',
+        type: 'uint256'
+      }
+    ],
+    name: 'setChainIds',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_hash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'message',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageSender',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: 'signature',
+        type: 'bytes'
+      },
+      {
+        name: 'message',
+        type: 'bytes'
+      }
+    ],
+    name: 'submitSignature',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageId',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_token',
+        type: 'address'
+      },
+      {
+        name: '_to',
+        type: 'address'
+      }
+    ],
+    name: 'claimTokens',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_hash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'numAffirmationsSigned',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_hash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'affirmationsSigned',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_maxGasPerTx',
+        type: 'uint256'
+      }
+    ],
+    name: 'setMaxGasPerTx',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'requiredSignatures',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'owner',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_message',
+        type: 'bytes32'
+      }
+    ],
+    name: 'messagesSigned',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'validatorContract',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'deployedAtBlock',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'getBridgeInterfacesVersion',
+    outputs: [
+      {
+        name: 'major',
+        type: 'uint64'
+      },
+      {
+        name: 'minor',
+        type: 'uint64'
+      },
+      {
+        name: 'patch',
+        type: 'uint64'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageSourceChainId',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_blockConfirmations',
+        type: 'uint256'
+      }
+    ],
+    name: 'setRequiredBlockConfirmations',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_gasPrice',
+        type: 'uint256'
+      }
+    ],
+    name: 'setGasPrice',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'messageCallStatus',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'messageSender',
+    outputs: [
+      {
+        name: '',
+        type: 'address'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: '_contract',
+        type: 'address'
+      },
+      {
+        name: '_data',
+        type: 'bytes'
+      },
+      {
+        name: '_gas',
+        type: 'uint256'
+      }
+    ],
+    name: 'requireToPassMessage',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_messageId',
+        type: 'bytes32'
+      }
+    ],
+    name: 'failedMessageDataHash',
+    outputs: [
+      {
+        name: '',
+        type: 'bytes32'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'maxGasPerTx',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: 'message',
+        type: 'bytes'
+      }
+    ],
+    name: 'executeAffirmation',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'transferOwnership',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'gasPrice',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: '_number',
+        type: 'uint256'
+      }
+    ],
+    name: 'isAlreadyProcessed',
+    outputs: [
+      {
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'pure',
+    type: 'function'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'messageId',
+        type: 'bytes32'
+      },
+      {
+        indexed: false,
+        name: 'encodedData',
+        type: 'bytes'
+      }
+    ],
+    name: 'UserRequestForSignature',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'sender',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        name: 'executor',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        name: 'messageId',
+        type: 'bytes32'
+      },
+      {
+        indexed: false,
+        name: 'status',
+        type: 'bool'
+      }
+    ],
+    name: 'AffirmationCompleted',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'signer',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'messageHash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'SignedForUserRequest',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        name: 'signer',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'messageHash',
+        type: 'bytes32'
+      }
+    ],
+    name: 'SignedForAffirmation',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'authorityResponsibleForRelay',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'messageHash',
+        type: 'bytes32'
+      },
+      {
+        indexed: false,
+        name: 'NumberOfCollectedSignatures',
+        type: 'uint256'
+      }
+    ],
+    name: 'CollectedSignatures',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'gasPrice',
+        type: 'uint256'
+      }
+    ],
+    name: 'GasPriceChanged',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'requiredBlockConfirmations',
+        type: 'uint256'
+      }
+    ],
+    name: 'RequiredBlockConfirmationChanged',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        name: 'previousOwner',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        name: 'newOwner',
+        type: 'address'
+      }
+    ],
+    name: 'OwnershipTransferred',
+    type: 'event'
+  }
+]
+
+export default abi

alm/src/abis/index.ts

@@ -0,0 +1,3 @@
+export { default as HOME_AMB_ABI } from './HomeAMB'
+export { default as FOREIGN_AMB_ABI } from './ForeignAMB'
+export { default as BRIDGE_VALIDATORS_ABI } from './BridgeValidators'

alm/src/components/ConfirmationsContainer.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { TransactionReceipt } from 'web3-eth'
+import { useMessageConfirmations } from '../hooks/useMessageConfirmations'
+import { MessageObject } from '../utils/web3'
+import styled from 'styled-components'
+import { CONFIRMATIONS_STATUS } from '../config/constants'
+import { CONFIRMATIONS_STATUS_LABEL, CONFIRMATIONS_STATUS_LABEL_HOME } from '../config/descriptions'
+import { SimpleLoading } from './commons/Loading'
+import { ValidatorsConfirmations } from './ValidatorsConfirmations'
+import { getConfirmationsStatusDescription } from '../utils/networks'
+import { useStateProvider } from '../state/StateProvider'
+import { ExecutionConfirmation } from './ExecutionConfirmation'
+import { useValidatorContract } from '../hooks/useValidatorContract'
+import { useBlockConfirmations } from '../hooks/useBlockConfirmations'
+import { MultiLine } from './commons/MultiLine'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+
+const StatusLabel = styled.label`
+  font-weight: bold;
+  font-size: 18px;
+`
+
+const StatusResultLabel = styled.label`
+  font-size: 18px;
+  padding-left: 10px;
+`
+
+const StyledConfirmationContainer = styled.div`
+  background-color: var(--bg-color);
+  padding: 10px;
+  border-radius: 4px;
+`
+
+const StatusDescription = styled.div`
+  padding-top: 10px;
+`
+
+export interface ConfirmationsContainerParams {
+  message: MessageObject
+  receipt: Maybe<TransactionReceipt>
+  fromHome: boolean
+  timestamp: number
+}
+
+export const ConfirmationsContainer = ({ message, receipt, fromHome, timestamp }: ConfirmationsContainerParams) => {
+  const {
+    home: { name: homeName },
+    foreign: { name: foreignName }
+  } = useStateProvider()
+  const { requiredSignatures, validatorList } = useValidatorContract({ fromHome, receipt })
+  const { blockConfirmations } = useBlockConfirmations({ fromHome, receipt })
+  const { confirmations, status, executionData, signatureCollected, waitingBlocksResolved } = useMessageConfirmations({
+    message,
+    receipt,
+    fromHome,
+    timestamp,
+    requiredSignatures,
+    validatorList,
+    blockConfirmations
+  })
+
+  const statusLabel = fromHome ? CONFIRMATIONS_STATUS_LABEL_HOME : CONFIRMATIONS_STATUS_LABEL
+
+  const parseDescription = () => {
+    let description = getConfirmationsStatusDescription(status, homeName, foreignName, fromHome)
+    let link
+    const descArray = description.split('%link')
+    if (descArray.length > 1) {
+      description = descArray[0]
+      link = (
+        <ExplorerTxLink href={descArray[1]} target="_blank" rel="noopener noreferrer">
+          {descArray[1]}
+        </ExplorerTxLink>
+      )
+    }
+
+    return (
+      <div>
+        {description}
+        {link}
+      </div>
+    )
+  }
+
+  return (
+    <div className="row is-center">
+      <StyledConfirmationContainer className="col-9">
+        <div className="row is-center">
+          <StatusLabel>Status:</StatusLabel>
+          <StatusResultLabel data-id="status">
+            {status !== CONFIRMATIONS_STATUS.UNDEFINED ? statusLabel[status] : <SimpleLoading />}
+          </StatusResultLabel>
+        </div>
+        <StatusDescription className="row is-center">
+          <MultiLine className="col-10">
+            {status !== CONFIRMATIONS_STATUS.UNDEFINED ? parseDescription() : ''}
+          </MultiLine>
+        </StatusDescription>
+        <ValidatorsConfirmations
+          confirmations={confirmations}
+          requiredSignatures={requiredSignatures}
+          validatorList={validatorList}
+          waitingBlocksResolved={waitingBlocksResolved}
+        />
+        {signatureCollected && <ExecutionConfirmation executionData={executionData} isHome={!fromHome} />}
+      </StyledConfirmationContainer>
+    </div>
+  )
+}

alm/src/components/ExecutionConfirmation.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { formatTimestamp, formatTxHash, getExplorerTxUrl } from '../utils/networks'
+import { useWindowWidth } from '@react-hook/window-size'
+import { SEARCHING_TX, VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import { SimpleLoading } from './commons/Loading'
+import styled from 'styled-components'
+import { ExecutionData } from '../hooks/useMessageConfirmations'
+import { GreyLabel, RedLabel, SuccessLabel } from './commons/Labels'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { Thead, AgeTd, StatusTd } from './commons/Table'
+
+const StyledExecutionConfirmation = styled.div`
+  margin-top: 30px;
+`
+
+export interface ExecutionConfirmationParams {
+  executionData: ExecutionData
+  isHome: boolean
+}
+
+export const ExecutionConfirmation = ({ executionData, isHome }: ExecutionConfirmationParams) => {
+  const windowWidth = useWindowWidth()
+
+  const txExplorerLink = getExplorerTxUrl(executionData.txHash, isHome)
+  const formattedValidator =
+    windowWidth < 850 && executionData.validator ? formatTxHash(executionData.validator) : executionData.validator
+
+  const getExecutionStatusElement = (validatorStatus = '') => {
+    switch (validatorStatus) {
+      case VALIDATOR_CONFIRMATION_STATUS.SUCCESS:
+        return <SuccessLabel>{validatorStatus}</SuccessLabel>
+      case VALIDATOR_CONFIRMATION_STATUS.FAILED:
+        return <RedLabel>{validatorStatus}</RedLabel>
+      case VALIDATOR_CONFIRMATION_STATUS.PENDING:
+      case VALIDATOR_CONFIRMATION_STATUS.WAITING:
+        return <GreyLabel>{validatorStatus}</GreyLabel>
+      default:
+        return executionData.validator ? (
+          <GreyLabel>{VALIDATOR_CONFIRMATION_STATUS.WAITING}</GreyLabel>
+        ) : (
+          <SimpleLoading />
+        )
+    }
+  }
+
+  return (
+    <StyledExecutionConfirmation>
+      <table>
+        <Thead>
+          <tr>
+            <th>Executed by</th>
+            <th className="text-center">Status</th>
+            <th className="text-center">Age</th>
+          </tr>
+        </Thead>
+        <tbody>
+          <tr>
+            <td>{formattedValidator ? formattedValidator : <SimpleLoading />}</td>
+            <StatusTd className="text-center">{getExecutionStatusElement(executionData.status)}</StatusTd>
+            <AgeTd className="text-center">
+              {executionData.timestamp > 0 ? (
+                <ExplorerTxLink href={txExplorerLink} target="_blank">
+                  {formatTimestamp(executionData.timestamp)}
+                </ExplorerTxLink>
+              ) : executionData.status === VALIDATOR_CONFIRMATION_STATUS.WAITING ? (
+                ''
+              ) : (
+                SEARCHING_TX
+              )}
+            </AgeTd>
+          </tr>
+        </tbody>
+      </table>
+    </StyledExecutionConfirmation>
+  )
+}

alm/src/components/Form.tsx

@@ -0,0 +1,69 @@
+import React, { useState, FormEvent } from 'react'
+import styled from 'styled-components'
+import { FormSubmitParams } from './MainPage'
+import { Button } from './commons/Button'
+import { TransactionSelector } from './TransactionSelector'
+import { TransactionReceipt } from 'web3-eth'
+
+const LabelText = styled.label`
+  line-height: 36px;
+  max-width: 140px;
+`
+
+const Input = styled.input`
+  background-color: var(--bg-color);
+  color: var(--font-color);
+  max-width: 100%;
+  border-color: var(--color-primary) !important;
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: var(--button-color) !important;
+  }
+`
+
+export const Form = ({ onSubmit }: { onSubmit: ({ chainId, txHash, receipt }: FormSubmitParams) => void }) => {
+  const [txHash, setTxHash] = useState('')
+  const [searchTx, setSearchTx] = useState(false)
+
+  const formSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    setSearchTx(true)
+  }
+
+  const onSelected = (chainId: number, receipt: TransactionReceipt) => {
+    onSubmit({ chainId, txHash, receipt })
+  }
+
+  const onBack = () => {
+    setTxHash('')
+    setSearchTx(false)
+  }
+
+  if (searchTx) {
+    return <TransactionSelector txHash={txHash} onSelected={onSelected} onBack={onBack} />
+  }
+
+  return (
+    <form onSubmit={formSubmit}>
+      <div className="row is-center">
+        <LabelText className="col-2">Bridgeable tx hash:</LabelText>
+        <div className="col-7">
+          <Input
+            placeholder="Enter transaction hash"
+            type="text"
+            onChange={e => setTxHash(e.target.value)}
+            required
+            pattern="^0x[a-fA-F0-9]{64}$"
+            value={txHash}
+          />
+        </div>
+        <div className="col-1">
+          <Button className="button outline" type="submit">
+            Check
+          </Button>
+        </div>
+      </div>
+    </form>
+  )
+}

alm/src/components/MainPage.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import styled from 'styled-components'
+import { Route, useHistory } from 'react-router-dom'
+import { Form } from './Form'
+import { StatusContainer } from './StatusContainer'
+import { useStateProvider } from '../state/StateProvider'
+import { TransactionReceipt } from 'web3-eth'
+import { InfoAlert } from './commons/InfoAlert'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { FOREIGN_NETWORK_NAME, HOME_NETWORK_NAME } from '../config/constants'
+
+const StyledMainPage = styled.div`
+  text-align: center;
+  min-height: 100vh;
+`
+
+const Header = styled.header`
+  background-color: #001529;
+  color: #ffffff;
+  margin-bottom: 50px;
+`
+
+const HeaderContainer = styled.header`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  height: 64px;
+  line-height: 64px;
+  padding: 0 50px;
+
+  @media (max-width: 600px) {
+    padding: 0 20px;
+  }
+`
+
+const AlertP = styled.p`
+  align-items: start;
+  margin-bottom: 0;
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+`
+
+export interface FormSubmitParams {
+  chainId: number
+  txHash: string
+  receipt: TransactionReceipt
+}
+
+export const MainPage = () => {
+  const history = useHistory()
+  const { home, foreign } = useStateProvider()
+  const [networkName, setNetworkName] = useState('')
+  const [receipt, setReceipt] = useState<Maybe<TransactionReceipt>>(null)
+  const [showInfoAlert, setShowInfoAlert] = useState(false)
+
+  const loadFromStorage = useCallback(() => {
+    const hideAlert = window.localStorage.getItem('hideInfoAlert')
+    setShowInfoAlert(!hideAlert)
+  }, [])
+
+  useEffect(
+    () => {
+      loadFromStorage()
+    },
+    [loadFromStorage]
+  )
+
+  const onAlertClose = useCallback(
+    () => {
+      window.localStorage.setItem('hideInfoAlert', 'true')
+      loadFromStorage()
+    },
+    [loadFromStorage]
+  )
+
+  const setNetworkData = (chainId: number) => {
+    const network = chainId === home.chainId ? home.name : foreign.name
+
+    setNetworkName(network)
+  }
+
+  const onFormSubmit = ({ chainId, txHash, receipt }: FormSubmitParams) => {
+    setNetworkData(chainId)
+    setReceipt(receipt)
+    history.push(`/${chainId}/${txHash}`)
+  }
+
+  const resetNetworkHeader = () => {
+    setNetworkName('')
+  }
+
+  const setNetworkFromParams = (chainId: number) => {
+    setNetworkData(chainId)
+  }
+
+  useEffect(() => {
+    const w = window as any
+    if (w.ethereum) {
+      w.ethereum.autoRefreshOnNetworkChange = false
+    }
+  }, [])
+
+  return (
+    <StyledMainPage>
+      <Header>
+        <HeaderContainer>
+          <span>AMB Live Monitoring</span>
+          <span>{networkName}</span>
+        </HeaderContainer>
+      </Header>
+      <div className="container">
+        {showInfoAlert && (
+          <InfoAlert onClick={onAlertClose}>
+            <p className="is-left text-left">
+              The Arbitrary Message Bridge Live Monitoring application provides real-time status updates for messages
+              bridged between {HOME_NETWORK_NAME} and {FOREIGN_NETWORK_NAME}. You can check current tx status, view
+              validator info, and troubleshoot potential issues with bridge transfers.
+            </p>
+            <AlertP className="is-left text-left">
+              For more information refer to&nbsp;
+              <ExplorerTxLink
+                href="https://docs.tokenbridge.net/about-tokenbridge/components/amb-live-monitoring-application"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                the ALM documentation
+              </ExplorerTxLink>
+            </AlertP>
+          </InfoAlert>
+        )}
+        <Route exact path={['/']} children={<Form onSubmit={onFormSubmit} />} />
+        <Route
+          path={['/:chainId/:txHash/:messageIdParam', '/:chainId/:txHash']}
+          children={
+            <StatusContainer
+              onBackToMain={resetNetworkHeader}
+              setNetworkFromParams={setNetworkFromParams}
+              receiptParam={receipt}
+            />
+          }
+        />
+      </div>
+    </StyledMainPage>
+  )
+}

alm/src/components/MessageSelector.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Button } from './commons/Button'
+import { RadioButtonLabel, RadioButtonContainer } from './commons/RadioButton'
+import { useWindowWidth } from '@react-hook/window-size'
+import { formatTxHashExtended } from '../utils/networks'
+import { MessageObject } from '../utils/web3'
+
+export interface MessageSelectorParams {
+  messages: Array<MessageObject>
+  onMessageSelected: (index: number) => void
+}
+
+export const MessageSelector = ({ messages, onMessageSelected }: MessageSelectorParams) => {
+  const [messageIndex, setMessageIndex] = useState(0)
+  const windowWidth = useWindowWidth()
+
+  const onSelect = () => {
+    onMessageSelected(messageIndex)
+  }
+
+  return (
+    <div className="row is-center">
+      <div className="col-7-lg col-12 is-marginless">
+        {messages.map((message, i) => (
+          <RadioButtonContainer className="row is-center is-vertical-align" key={i} onClick={() => setMessageIndex(i)}>
+            <input
+              className="is-marginless"
+              type="radio"
+              name="message"
+              value={i}
+              checked={i === messageIndex}
+              onChange={() => setMessageIndex(i)}
+            />
+            <RadioButtonLabel htmlFor={i.toString()}>
+              {windowWidth < 700 ? formatTxHashExtended(message.id) : message.id}
+            </RadioButtonLabel>
+          </RadioButtonContainer>
+        ))}
+      </div>
+      <div className="col-1-lg col-12 is-marginless">
+        <Button className="button outline" onClick={onSelect}>
+          Select
+        </Button>
+      </div>
+    </div>
+  )
+}

alm/src/components/NetworkTransactionSelector.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Button } from './commons/Button'
+import { RadioButtonLabel, RadioButtonContainer } from './commons/RadioButton'
+import { useStateProvider } from '../state/StateProvider'
+
+export const NetworkTransactionSelector = ({ onNetworkSelected }: { onNetworkSelected: (chainId: number) => void }) => {
+  const { home, foreign } = useStateProvider()
+  const [chainId, setChainId] = useState(home.chainId)
+
+  const networks = [home, foreign]
+
+  const onSelect = () => {
+    onNetworkSelected(chainId)
+  }
+
+  return (
+    <div>
+      <p>The transaction was found in both networks, please select one:</p>
+      <div className="row is-center">
+        <div className="col-3-lg col-12 is-marginless">
+          {networks.map((network, i) => (
+            <RadioButtonContainer
+              className="row is-center is-vertical-align"
+              key={i}
+              onClick={() => setChainId(network.chainId)}
+            >
+              <input
+                className="is-marginless"
+                type="radio"
+                name="message"
+                value={network.chainId}
+                checked={network.chainId === chainId}
+                onChange={() => setChainId(network.chainId)}
+              />
+              <RadioButtonLabel htmlFor={i.toString()}>{network.name}</RadioButtonLabel>
+            </RadioButtonContainer>
+          ))}
+        </div>
+        <div className="col-3-lg col-12 is-marginless">
+          <Button className="button outline" onClick={onSelect}>
+            Select
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

alm/src/components/StatusContainer.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+import { useTransactionStatus } from '../hooks/useTransactionStatus'
+import { formatTxHash, getExplorerTxUrl, getTransactionStatusDescription, validTxHash } from '../utils/networks'
+import { TRANSACTION_STATUS } from '../config/constants'
+import { MessageSelector } from './MessageSelector'
+import { Loading } from './commons/Loading'
+import { useStateProvider } from '../state/StateProvider'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { ConfirmationsContainer } from './ConfirmationsContainer'
+import { TransactionReceipt } from 'web3-eth'
+import { BackButton } from './commons/BackButton'
+
+export interface StatusContainerParam {
+  onBackToMain: () => void
+  setNetworkFromParams: (chainId: number) => void
+  receiptParam: Maybe<TransactionReceipt>
+}
+
+export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptParam }: StatusContainerParam) => {
+  const { home, foreign } = useStateProvider()
+  const history = useHistory()
+  const { chainId, txHash, messageIdParam } = useParams()
+  const validChainId = chainId === home.chainId.toString() || chainId === foreign.chainId.toString()
+  const validParameters = validChainId && validTxHash(txHash)
+
+  const { messages, receipt, status, description, timestamp, loading } = useTransactionStatus({
+    txHash: validParameters ? txHash : '',
+    chainId: validParameters ? parseInt(chainId) : 0,
+    receiptParam
+  })
+
+  const selectedMessageId = messageIdParam === undefined || messages[messageIdParam] === undefined ? -1 : messageIdParam
+
+  useEffect(
+    () => {
+      if (validChainId) {
+        setNetworkFromParams(parseInt(chainId))
+      }
+    },
+    [validChainId, chainId, setNetworkFromParams]
+  )
+
+  if (!validParameters && home.chainId && foreign.chainId) {
+    return (
+      <div>
+        <p>
+          Chain Id: {chainId} and/or Transaction Hash: {txHash} are not valid
+        </p>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return <Loading />
+  }
+
+  const onMessageSelected = (messageId: number) => {
+    history.push(`/${chainId}/${txHash}/${messageId}`)
+  }
+
+  const displayMessageSelector = status === TRANSACTION_STATUS.SUCCESS_MULTIPLE_MESSAGES && selectedMessageId === -1
+  const multiMessageSelected = status === TRANSACTION_STATUS.SUCCESS_MULTIPLE_MESSAGES && selectedMessageId !== -1
+  const displayReference = multiMessageSelected ? messages[selectedMessageId].id : txHash
+  const formattedMessageId = formatTxHash(displayReference)
+
+  const displayedDescription = multiMessageSelected
+    ? getTransactionStatusDescription(TRANSACTION_STATUS.SUCCESS_ONE_MESSAGE, timestamp)
+    : description
+
+  const isHome = chainId === home.chainId.toString()
+  const txExplorerLink = getExplorerTxUrl(txHash, isHome)
+  const displayExplorerLink = status !== TRANSACTION_STATUS.NOT_FOUND
+
+  const displayConfirmations = status === TRANSACTION_STATUS.SUCCESS_ONE_MESSAGE || multiMessageSelected
+  const messageToConfirm =
+    messages.length > 1 ? messages[selectedMessageId] : messages.length > 0 ? messages[0] : { id: '', data: '' }
+  return (
+    <div>
+      {status && (
+        <p>
+          The request{' '}
+          {displayExplorerLink && (
+            <ExplorerTxLink href={txExplorerLink} target="_blank">
+              {formattedMessageId}
+            </ExplorerTxLink>
+          )}
+          {!displayExplorerLink && <label>{formattedMessageId}</label>} {displayedDescription}
+        </p>
+      )}
+      {displayMessageSelector && <MessageSelector messages={messages} onMessageSelected={onMessageSelected} />}
+      {displayConfirmations && (
+        <ConfirmationsContainer message={messageToConfirm} receipt={receipt} fromHome={isHome} timestamp={timestamp} />
+      )}
+      <BackButton onBackToMain={onBackToMain} />
+    </div>
+  )
+}

alm/src/components/TransactionSelector.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react'
+import { useTransactionFinder } from '../hooks/useTransactionFinder'
+import { useStateProvider } from '../state/StateProvider'
+import { TRANSACTION_STATUS } from '../config/constants'
+import { TransactionReceipt } from 'web3-eth'
+import { Loading } from './commons/Loading'
+import { NetworkTransactionSelector } from './NetworkTransactionSelector'
+import { BackButton } from './commons/BackButton'
+import { TRANSACTION_STATUS_DESCRIPTION } from '../config/descriptions'
+import { MultiLine } from './commons/MultiLine'
+import styled from 'styled-components'
+
+const StyledMultiLine = styled(MultiLine)`
+  margin-bottom: 40px;
+`
+
+export const TransactionSelector = ({
+  txHash,
+  onSelected,
+  onBack
+}: {
+  txHash: string
+  onSelected: (chainId: number, receipt: TransactionReceipt) => void
+  onBack: () => void
+}) => {
+  const { home, foreign } = useStateProvider()
+  const { receipt: homeReceipt, status: homeStatus } = useTransactionFinder({ txHash, web3: home.web3 })
+  const { receipt: foreignReceipt, status: foreignStatus } = useTransactionFinder({ txHash, web3: foreign.web3 })
+
+  useEffect(
+    () => {
+      if (!home.chainId || !foreign.chainId) return
+      if (homeStatus === TRANSACTION_STATUS.FOUND && foreignStatus === TRANSACTION_STATUS.NOT_FOUND) {
+        if (!homeReceipt) return
+        onSelected(home.chainId, homeReceipt)
+      } else if (foreignStatus === TRANSACTION_STATUS.FOUND && homeStatus === TRANSACTION_STATUS.NOT_FOUND) {
+        if (!foreignReceipt) return
+        onSelected(foreign.chainId, foreignReceipt)
+      }
+    },
+    [homeReceipt, homeStatus, foreignReceipt, foreignStatus, home.chainId, foreign.chainId, onSelected]
+  )
+
+  const onSelectedNetwork = (chainId: number) => {
+    const chain = chainId === home.chainId ? home.chainId : foreign.chainId
+    const receipt = chainId === home.chainId ? homeReceipt : foreignReceipt
+
+    if (!receipt) return
+    onSelected(chain, receipt)
+  }
+
+  if (foreignStatus === TRANSACTION_STATUS.FOUND && homeStatus === TRANSACTION_STATUS.FOUND) {
+    return <NetworkTransactionSelector onNetworkSelected={onSelectedNetwork} />
+  }
+
+  if (foreignStatus === TRANSACTION_STATUS.NOT_FOUND && homeStatus === TRANSACTION_STATUS.NOT_FOUND) {
+    const message = TRANSACTION_STATUS_DESCRIPTION[TRANSACTION_STATUS.NOT_FOUND]
+    return (
+      <div>
+        <StyledMultiLine>{message}</StyledMultiLine>
+        <BackButton onBackToMain={onBack} />
+      </div>
+    )
+  }
+
+  return <Loading />
+}

alm/src/components/ValidatorsConfirmations.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { formatTimestamp, formatTxHash, getExplorerTxUrl } from '../utils/networks'
+import { useWindowWidth } from '@react-hook/window-size'
+import { SEARCHING_TX, VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import { SimpleLoading } from './commons/Loading'
+import styled from 'styled-components'
+import { ConfirmationParam } from '../hooks/useMessageConfirmations'
+import { GreyLabel, RedLabel, SuccessLabel } from './commons/Labels'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { Thead, AgeTd, StatusTd } from './commons/Table'
+
+const RequiredConfirmations = styled.label`
+  font-size: 14px;
+`
+
+export interface ValidatorsConfirmationsParams {
+  confirmations: Array<ConfirmationParam>
+  requiredSignatures: number
+  validatorList: string[]
+  waitingBlocksResolved: boolean
+}
+
+export const ValidatorsConfirmations = ({
+  confirmations,
+  requiredSignatures,
+  validatorList,
+  waitingBlocksResolved
+}: ValidatorsConfirmationsParams) => {
+  const windowWidth = useWindowWidth()
+
+  const getValidatorStatusElement = (validatorStatus = '') => {
+    switch (validatorStatus) {
+      case VALIDATOR_CONFIRMATION_STATUS.SUCCESS:
+        return <SuccessLabel>{validatorStatus}</SuccessLabel>
+      case VALIDATOR_CONFIRMATION_STATUS.FAILED:
+        return <RedLabel>{validatorStatus}</RedLabel>
+      case VALIDATOR_CONFIRMATION_STATUS.PENDING:
+      case VALIDATOR_CONFIRMATION_STATUS.WAITING:
+      case VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED:
+        return <GreyLabel>{validatorStatus}</GreyLabel>
+      default:
+        return waitingBlocksResolved ? (
+          <GreyLabel>{VALIDATOR_CONFIRMATION_STATUS.WAITING}</GreyLabel>
+        ) : (
+          <SimpleLoading />
+        )
+    }
+  }
+
+  return (
+    <div>
+      <table>
+        <Thead>
+          <tr>
+            <th>Validator</th>
+            <th className="text-center">Status</th>
+            <th className="text-center">Age</th>
+          </tr>
+        </Thead>
+        <tbody>
+          {validatorList.map((validator, i) => {
+            const filteredConfirmation = confirmations.filter(c => c.validator === validator)
+            const confirmation = filteredConfirmation.length > 0 ? filteredConfirmation[0] : null
+            const displayedStatus = confirmation && confirmation.status ? confirmation.status : ''
+            const explorerLink = confirmation && confirmation.txHash ? getExplorerTxUrl(confirmation.txHash, true) : ''
+            const elementIfNoTimestamp =
+              displayedStatus !== VALIDATOR_CONFIRMATION_STATUS.WAITING &&
+              displayedStatus !== VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED ? (
+                (displayedStatus === VALIDATOR_CONFIRMATION_STATUS.UNDEFINED || displayedStatus === '') &&
+                waitingBlocksResolved ? (
+                  SEARCHING_TX
+                ) : (
+                  <SimpleLoading />
+                )
+              ) : (
+                ''
+              )
+            return (
+              <tr key={i}>
+                <td>{windowWidth < 850 ? formatTxHash(validator) : validator}</td>
+                <StatusTd className="text-center">{getValidatorStatusElement(displayedStatus)}</StatusTd>
+                <AgeTd className="text-center">
+                  {confirmation && confirmation.timestamp > 0 ? (
+                    <ExplorerTxLink href={explorerLink} target="_blank">
+                      {formatTimestamp(confirmation.timestamp)}
+                    </ExplorerTxLink>
+                  ) : (
+                    elementIfNoTimestamp
+                  )}
+                </AgeTd>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <RequiredConfirmations>
+        {requiredSignatures} of {validatorList.length} confirmations required
+      </RequiredConfirmations>
+    </div>
+  )
+}

alm/src/components/commons/BackButton.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom'
+import { LeftArrow } from './LeftArrow'
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+  color: var(--button-color);
+  border-color: var(--font-color);
+  margin-top: 10px;
+  &:focus {
+    outline: var(--button-color);
+  }
+`
+
+const BackLabel = styled.label`
+  margin-left: 5px;
+  cursor: pointer;
+`
+
+export interface BackButtonParam {
+  onBackToMain: () => void
+}
+
+export const BackButton = ({ onBackToMain }: BackButtonParam) => (
+  <div className="row is-center">
+    <div className="col-9">
+      <Link to="/" onClick={onBackToMain}>
+        <StyledButton className="button outline is-left">
+          <LeftArrow />
+          <BackLabel>Search another transaction</BackLabel>
+        </StyledButton>
+      </Link>
+    </div>
+  </div>
+)

alm/src/components/commons/Button.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+  height: 36px;
+  color: var(--button-color);
+  border-color: var(--button-color);
+  &:focus {
+    outline: var(--button-color);
+  }
+`

alm/src/components/commons/CloseIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const CloseIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fa"
+    data-icon="times"
+    className="svg-inline--fa fa-times fa-w-11 fa-lg "
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 352 512"
+    fill="#1890ff"
+    height="1em"
+  >
+    <path
+      fill="#1890ff"
+      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+    />
+  </svg>
+)

alm/src/components/commons/ExplorerTxLink.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const ExplorerTxLink = styled.a`
+  color: var(--link-color);
+  text-decoration: underline;
+  font-weight: bold;
+`

alm/src/components/commons/InfoAlert.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from 'styled-components'
+import { InfoIcon } from './InfoIcon'
+import { CloseIcon } from './CloseIcon'
+
+const StyledInfoAlert = styled.div`
+  border: 1px solid var(--button-color);
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding-top: 10px;
+`
+
+const CloseIconContainer = styled.div`
+  cursor: pointer;
+`
+
+const TextContainer = styled.div`
+  flex-direction: column;
+`
+
+export const InfoAlert = ({ onClick, children }: { onClick: () => void; children: React.ReactChild[] }) => (
+  <div className="row is-center">
+    <StyledInfoAlert className="col-10 is-vertical-align row">
+      <InfoIcon />
+      <TextContainer className="col-10">{children}</TextContainer>
+      <CloseIconContainer className="col-1 is-vertical-align is-center" onClick={onClick}>
+        <CloseIcon />
+      </CloseIconContainer>
+    </StyledInfoAlert>
+  </div>
+)

alm/src/components/commons/InfoIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const InfoIcon = () => (
+  <svg
+    className="col-1 is-left"
+    viewBox="64 64 896 896"
+    focusable="false"
+    data-icon="info-circle"
+    width="1em"
+    height="1em"
+    fill="#1890ff"
+    aria-hidden="true"
+  >
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" />
+  </svg>
+)

alm/src/components/commons/Labels.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const SuccessLabel = styled.label`
+  color: var(--success-color);
+  background-color: var(--success-bg-color);
+  padding: 0.4rem 0.7rem;
+  border-radius: 4px;
+`
+
+export const GreyLabel = styled.label`
+  color: var(--not-required-color);
+  background-color: var(--not-required-bg-color);
+  padding: 0.4rem 0.7rem;
+  border-radius: 4px;
+`
+
+export const RedLabel = styled.label`
+  color: var(--failed-color);
+  background-color: var(--failed-bg-color);
+  padding: 0.4rem 0.7rem;
+  border-radius: 4px;
+`

alm/src/components/commons/LeftArrow.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useContext } from 'react'
+import { ThemeContext } from 'styled-components'
+
+export const LeftArrow = () => {
+  const themeContext = useContext(ThemeContext)
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      id="mdi-arrow-left"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill={themeContext.buttonColor}
+    >
+      <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
+    </svg>
+  )
+}

alm/src/components/commons/Loading.tsx

@@ -0,0 +1,165 @@
+import React, { useContext } from 'react'
+import { ThemeContext } from 'styled-components'
+
+export interface LoadingParams {
+  width?: string
+  height?: string
+  displayMessage?: boolean
+}
+
+export const Loading = ({ width = '50px', height = '50px', displayMessage = true }: LoadingParams) => {
+  const themeContext = useContext(ThemeContext)
+  return (
+    <div className="row is-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ background: 'none', display: 'block', shapeRendering: 'auto' }}
+        width={width}
+        height={height}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+      >
+        <g transform="rotate(0 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.9166666666666666s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(30 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.8333333333333334s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(60 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.75s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(90 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.6666666666666666s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(120 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.5833333333333334s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(150 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.5s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(180 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.4166666666666667s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(210 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.3333333333333333s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(240 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.25s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(270 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.16666666666666666s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(300 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              keyTimes="0;1"
+              dur="1s"
+              begin="-0.08333333333333333s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </g>
+        <g transform="rotate(330 50 50)">
+          <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill={themeContext.buttonColor}>
+            <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" />
+          </rect>
+        </g>
+      </svg>
+      {displayMessage && <label style={{ color: themeContext.buttonColor }}>Loading...</label>}
+    </div>
+  )
+}
+
+export const SimpleLoading = () => <Loading width="30px" height="30px" displayMessage={false} />

alm/src/components/commons/MultiLine.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const MultiLine = styled.div`
+  white-space: pre-wrap;
+`

alm/src/components/commons/RadioButton.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const RadioButtonLabel = styled.label`
+  padding-left: 5px;
+`
+
+export const RadioButtonContainer = styled.div`
+  padding: 10px;
+`

alm/src/components/commons/Table.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const Thead = styled.thead`
+  border-bottom: 2px solid #9e9e9e;
+`
+
+export const StatusTd = styled.td`
+  width: 150px;
+`
+
+export const AgeTd = styled.td`
+  width: 180px;
+`

alm/src/config/constants.ts

@@ -0,0 +1,63 @@
+export const HOME_BRIDGE_ADDRESS: string = process.env.REACT_APP_COMMON_HOME_BRIDGE_ADDRESS || ''
+export const FOREIGN_BRIDGE_ADDRESS: string = process.env.REACT_APP_COMMON_FOREIGN_BRIDGE_ADDRESS || ''
+
+export const HOME_RPC_URL: string = process.env.REACT_APP_COMMON_HOME_RPC_URL || ''
+export const FOREIGN_RPC_URL: string = process.env.REACT_APP_COMMON_FOREIGN_RPC_URL || ''
+
+export const HOME_NETWORK_NAME: string = process.env.REACT_APP_ALM_HOME_NETWORK_NAME || ''
+export const FOREIGN_NETWORK_NAME: string = process.env.REACT_APP_ALM_FOREIGN_NETWORK_NAME || ''
+
+export const HOME_EXPLORER_TX_TEMPLATE: string = process.env.REACT_APP_ALM_HOME_EXPLORER_TX_TEMPLATE || ''
+export const FOREIGN_EXPLORER_TX_TEMPLATE: string = process.env.REACT_APP_ALM_FOREIGN_EXPLORER_TX_TEMPLATE || ''
+
+export const HOME_EXPLORER_API: string = process.env.REACT_APP_ALM_HOME_EXPLORER_API || ''
+export const FOREIGN_EXPLORER_API: string = process.env.REACT_APP_ALM_FOREIGN_EXPLORER_API || ''
+
+export const HOME_RPC_POLLING_INTERVAL: number = 5000
+export const FOREIGN_RPC_POLLING_INTERVAL: number = 5000
+export const BLOCK_RANGE: number = 50
+export const ONE_DAY_TIMESTAMP: number = 86400
+export const THREE_DAYS_TIMESTAMP: number = 259200
+
+export const EXECUTE_AFFIRMATION_HASH = 'e7a2c01f'
+export const SUBMIT_SIGNATURE_HASH = '630cea8e'
+export const EXECUTE_SIGNATURES_HASH = '3f7658fd'
+
+export const CACHE_KEY_SUCCESS = 'success-confirmation-validator-'
+export const CACHE_KEY_FAILED = 'failed-confirmation-validator-'
+export const CACHE_KEY_EXECUTION_FAILED = 'failed-execution-validator-'
+
+export const TRANSACTION_STATUS = {
+  SUCCESS_MULTIPLE_MESSAGES: 'SUCCESS_MULTIPLE_MESSAGES',
+  SUCCESS_ONE_MESSAGE: 'SUCCESS_ONE_MESSAGE',
+  SUCCESS_NO_MESSAGES: 'SUCCESS_NO_MESSAGES',
+  FAILED: 'FAILED',
+  FOUND: 'FOUND',
+  NOT_FOUND: 'NOT_FOUND',
+  UNDEFINED: 'UNDEFINED'
+}
+
+export const CONFIRMATIONS_STATUS = {
+  SUCCESS: 'SUCCESS',
+  SUCCESS_MESSAGE_FAILED: 'SUCCESS_MESSAGE_FAILED',
+  EXECUTION_FAILED: 'EXECUTION_FAILED',
+  EXECUTION_PENDING: 'EXECUTION_PENDING',
+  EXECUTION_WAITING: 'EXECUTION_WAITING',
+  FAILED: 'FAILED',
+  PENDING: 'PENDING',
+  SEARCHING: 'SEARCHING',
+  WAITING_VALIDATORS: 'WAITING_VALIDATORS',
+  WAITING_CHAIN: 'WAITING_CHAIN',
+  UNDEFINED: 'UNDEFINED'
+}
+
+export const VALIDATOR_CONFIRMATION_STATUS = {
+  SUCCESS: 'Success',
+  FAILED: 'Failed',
+  PENDING: 'Pending',
+  WAITING: 'Waiting',
+  NOT_REQUIRED: 'Not required',
+  UNDEFINED: 'UNDEFINED'
+}
+
+export const SEARCHING_TX = 'Searching Transaction...'

alm/src/config/descriptions.ts

@@ -0,0 +1,72 @@
+// %t will be replaced by the time -> x minutes/hours/days ago
+export const TRANSACTION_STATUS_DESCRIPTION: { [key: string]: string } = {
+  SUCCESS_MULTIPLE_MESSAGES: 'was initiated %t and contains several bridge messages. Specify one of them:',
+  SUCCESS_ONE_MESSAGE: 'was initiated %t',
+  SUCCESS_NO_MESSAGES: 'execution succeeded %t but it does not contain any bridge messages',
+  FAILED: 'failed %t',
+  NOT_FOUND:
+    'Transaction not found. \n1. Check that the transaction hash is correct. \n2. Wait several blocks for the transaction to be\nmined, gas price affects mining speed.'
+}
+
+export const CONFIRMATIONS_STATUS_LABEL: { [key: string]: string } = {
+  SUCCESS: 'Success',
+  SUCCESS_MESSAGE_FAILED: 'Success',
+  FAILED: 'Failed',
+  PENDING: 'Pending',
+  WAITING_VALIDATORS: 'Waiting',
+  SEARCHING: 'Waiting',
+  WAITING_CHAIN: 'Waiting'
+}
+
+export const CONFIRMATIONS_STATUS_LABEL_HOME: { [key: string]: string } = {
+  SUCCESS: 'Success',
+  SUCCESS_MESSAGE_FAILED: 'Success',
+  EXECUTION_FAILED: 'Execution failed',
+  EXECUTION_PENDING: 'Execution pending',
+  EXECUTION_WAITING: 'Execution waiting',
+  FAILED: 'Confirmation Failed',
+  PENDING: 'Confirmation Pending',
+  WAITING_VALIDATORS: 'Confirmation Waiting',
+  SEARCHING: 'Confirmation Waiting',
+  WAITING_CHAIN: 'Confirmation Waiting'
+}
+
+// use %link to identify a link
+export const CONFIRMATIONS_STATUS_DESCRIPTION: { [key: string]: string } = {
+  SUCCESS: '',
+  SUCCESS_MESSAGE_FAILED:
+    'The specified transaction was included in a block,\nthe validators collected signatures and the cross-chain relay was executed correctly,\nbut the contained message execution failed.\nContact the support of the application you used to produce the transaction for the clarifications.',
+  FAILED:
+    'The specified transaction was included in a block,\nbut confirmations sent by a majority of validators\nfailed. The cross-chain relay request will not be\nprocessed. Contact to the validators by\nmessaging on %linkhttps://forum.poa.network/c/support',
+  PENDING:
+    'The specified transaction was included in a block. A\nmajority of validators sent confirmations which have\nnot yet been added to a block.',
+  WAITING_VALIDATORS:
+    'The specified transaction was included in a block.\nSome validators have sent confirmations, others are\nwaiting for chain finalization.\nCheck status again after a few blocks. If the issue still persists contact to the validators by messaging on %linkhttps://forum.poa.network/c/support',
+  SEARCHING:
+    'The specified transaction was included in a block. The app is looking for confirmations. Either\n1. Validators are waiting for chain finalization before sending their signatures.\n2. Validators are not active.\n3. The bridge was stopped.\nCheck status again after a few blocks. If the issue still persists contact to the validators by messaging on %linkhttps://forum.poa.network/c/support',
+  WAITING_CHAIN:
+    'The specified transaction was included in a block.\nValidators are waiting for chain finalization before\nsending their confirmations.'
+}
+
+// use %link to identify a link
+export const CONFIRMATIONS_STATUS_DESCRIPTION_HOME: { [key: string]: string } = {
+  SUCCESS: '',
+  SUCCESS_MESSAGE_FAILED:
+    'The specified transaction was included in a block,\nthe validators collected signatures and the cross-chain relay was executed correctly,\nbut the contained message execution failed.\nContact the support of the application you used to produce the transaction for the clarifications.',
+  EXECUTION_FAILED:
+    'The specified transaction was included in a block\nand the validators collected signatures. The\nvalidator’s transaction with collected signatures was\nsent but did not succeed. Contact to the validators by messaging\non %linkhttps://forum.poa.network/c/support',
+  EXECUTION_PENDING:
+    'The specified transaction was included in a block\nand the validators collected signatures. The\nvalidator’s transaction with collected signatures was\nsent but is not yet added to a block.',
+  EXECUTION_WAITING:
+    'The specified transaction was included in a block\nand the validators collected signatures. Either\n1. One of the validators is waiting for chain finalization.\n2. A validator skipped its duty to relay signatures.\nCheck status again after a few blocks. If the issue still persists contact to the validators by messaging on %linkhttps://forum.poa.network/c/support',
+  FAILED:
+    'The specified transaction was included in a block,\nbut transactions with signatures sent by a majority of\nvalidators failed. The cross-chain relay request will\nnot be processed. Contact to the validators by\nmessaging on %linkhttps://forum.poa.network/c/support',
+  PENDING:
+    'The specified transaction was included in a block.\nA majority of validators sent signatures which have not\nyet been added to a block.',
+  WAITING_VALIDATORS:
+    'The specified transaction was included in a block.\nSome validators have sent signatures, others are\nwaiting for chain finalization.\nCheck status again after a few blocks. If the issue still persists contact to the validators by messaging on %linkhttps://forum.poa.network/c/support',
+  SEARCHING:
+    'The specified transaction was included in a block. The app is looking for confirmations. Either\n1. Validators are waiting for chain finalization before sending their signatures.\n2. Validators are not active.\n3. The bridge was stopped.\nCheck status again after a few blocks. If the issue still persists contact to the validators by messaging on %linkhttps://forum.poa.network/c/support',
+  WAITING_CHAIN:
+    'The specified transaction was included in a block.\nValidators are waiting for chain finalization\nbefore sending their signatures.'
+}

alm/src/global.d.ts

@@ -0,0 +1 @@
+declare type Maybe<T> = T | null

alm/src/hooks/useBlockConfirmations.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { TransactionReceipt } from 'web3-eth'
+import { useStateProvider } from '../state/StateProvider'
+import { Contract } from 'web3-eth-contract'
+import { getRequiredBlockConfirmations } from '../utils/contract'
+import { foreignSnapshotProvider, homeSnapshotProvider, SnapshotProvider } from '../services/SnapshotProvider'
+
+export interface UseBlockConfirmationsParams {
+  fromHome: boolean
+  receipt: Maybe<TransactionReceipt>
+}
+
+export const useBlockConfirmations = ({ receipt, fromHome }: UseBlockConfirmationsParams) => {
+  const [blockConfirmations, setBlockConfirmations] = useState(0)
+
+  const { home, foreign } = useStateProvider()
+
+  const callRequireBlockConfirmations = async (
+    contract: Contract,
+    receipt: TransactionReceipt,
+    setResult: Function,
+    snapshotProvider: SnapshotProvider
+  ) => {
+    const result = await getRequiredBlockConfirmations(contract, receipt.blockNumber, snapshotProvider)
+    setResult(result)
+  }
+
+  useEffect(
+    () => {
+      const bridgeContract = fromHome ? home.bridgeContract : foreign.bridgeContract
+      const snapshotProvider = fromHome ? homeSnapshotProvider : foreignSnapshotProvider
+      if (!bridgeContract || !receipt) return
+      callRequireBlockConfirmations(bridgeContract, receipt, setBlockConfirmations, snapshotProvider)
+    },
+    [home.bridgeContract, foreign.bridgeContract, receipt, fromHome]
+  )
+
+  return {
+    blockConfirmations
+  }
+}

alm/src/hooks/useBridgeContracts.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { HOME_AMB_ABI, FOREIGN_AMB_ABI } from '../abis'
+import { FOREIGN_BRIDGE_ADDRESS, HOME_BRIDGE_ADDRESS } from '../config/constants'
+import { Contract } from 'web3-eth-contract'
+import Web3 from 'web3'
+
+export interface useBridgeContractsParams {
+  homeWeb3: Web3
+  foreignWeb3: Web3
+}
+
+export const useBridgeContracts = ({ homeWeb3, foreignWeb3 }: useBridgeContractsParams) => {
+  const [homeBridge, setHomeBridge] = useState<Maybe<Contract>>(null)
+  const [foreignBridge, setForeignBridge] = useState<Maybe<Contract>>(null)
+
+  useEffect(
+    () => {
+      if (!homeWeb3) return
+      const homeContract = new homeWeb3.eth.Contract(HOME_AMB_ABI, HOME_BRIDGE_ADDRESS)
+      setHomeBridge(homeContract)
+    },
+    [homeWeb3]
+  )
+
+  useEffect(
+    () => {
+      if (!foreignWeb3) return
+      const foreignContract = new foreignWeb3.eth.Contract(FOREIGN_AMB_ABI, FOREIGN_BRIDGE_ADDRESS)
+      setForeignBridge(foreignContract)
+    },
+    [foreignWeb3]
+  )
+
+  return {
+    homeBridge,
+    foreignBridge
+  }
+}

alm/src/hooks/useMessageConfirmations.ts

@@ -0,0 +1,374 @@
+import { useStateProvider } from '../state/StateProvider'
+import { TransactionReceipt } from 'web3-eth'
+import { MessageObject } from '../utils/web3'
+import { useEffect, useState } from 'react'
+import { EventData } from 'web3-eth-contract'
+import { getAffirmationsSigned, getMessagesSigned } from '../utils/contract'
+import {
+  BLOCK_RANGE,
+  CONFIRMATIONS_STATUS,
+  FOREIGN_RPC_POLLING_INTERVAL,
+  HOME_RPC_POLLING_INTERVAL,
+  VALIDATOR_CONFIRMATION_STATUS
+} from '../config/constants'
+import { homeBlockNumberProvider, foreignBlockNumberProvider } from '../services/BlockNumberProvider'
+import { checkSignaturesWaitingForBLocks } from '../utils/signatureWaitingForBlocks'
+import { getCollectedSignaturesEvent } from '../utils/getCollectedSignaturesEvent'
+import { checkWaitingBlocksForExecution } from '../utils/executionWaitingForBlocks'
+import { getConfirmationsForTx } from '../utils/getConfirmationsForTx'
+import { getFinalizationEvent } from '../utils/getFinalizationEvent'
+import {
+  getValidatorFailedTransactionsForMessage,
+  getExecutionFailedTransactionForMessage,
+  getValidatorPendingTransactionsForMessage,
+  getExecutionPendingTransactionsForMessage,
+  getValidatorSuccessTransactionsForMessage
+} from '../utils/explorer'
+
+export interface useMessageConfirmationsParams {
+  message: MessageObject
+  receipt: Maybe<TransactionReceipt>
+  fromHome: boolean
+  timestamp: number
+  requiredSignatures: number
+  validatorList: string[]
+  blockConfirmations: number
+}
+
+export interface BasicConfirmationParam {
+  validator: string
+  status: string
+}
+
+export interface ConfirmationParam extends BasicConfirmationParam {
+  txHash: string
+  timestamp: number
+}
+
+export interface ExecutionData {
+  status: string
+  validator: string
+  txHash: string
+  timestamp: number
+  executionResult: boolean
+}
+
+export const useMessageConfirmations = ({
+  message,
+  receipt,
+  fromHome,
+  timestamp,
+  requiredSignatures,
+  validatorList,
+  blockConfirmations
+}: useMessageConfirmationsParams) => {
+  const { home, foreign } = useStateProvider()
+  const [confirmations, setConfirmations] = useState<Array<ConfirmationParam>>([])
+  const [status, setStatus] = useState(CONFIRMATIONS_STATUS.UNDEFINED)
+  const [waitingBlocks, setWaitingBlocks] = useState(false)
+  const [waitingBlocksResolved, setWaitingBlocksResolved] = useState(false)
+  const [signatureCollected, setSignatureCollected] = useState(false)
+  const [collectedSignaturesEvent, setCollectedSignaturesEvent] = useState<Maybe<EventData>>(null)
+  const [executionData, setExecutionData] = useState<ExecutionData>({
+    status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+    validator: '',
+    txHash: '',
+    timestamp: 0,
+    executionResult: false
+  })
+  const [waitingBlocksForExecution, setWaitingBlocksForExecution] = useState(false)
+  const [waitingBlocksForExecutionResolved, setWaitingBlocksForExecutionResolved] = useState(false)
+  const [failedConfirmations, setFailedConfirmations] = useState(false)
+  const [failedExecution, setFailedExecution] = useState(false)
+  const [pendingConfirmations, setPendingConfirmations] = useState(false)
+  const [pendingExecution, setPendingExecution] = useState(false)
+
+  const existsConfirmation = (confirmationArray: ConfirmationParam[]) => {
+    const filteredList = confirmationArray.filter(
+      c => c.status !== VALIDATOR_CONFIRMATION_STATUS.UNDEFINED && c.status !== VALIDATOR_CONFIRMATION_STATUS.WAITING
+    )
+    return filteredList.length > 0
+  }
+
+  // Check if the validators are waiting for block confirmations to verify the message
+  useEffect(
+    () => {
+      if (!receipt || !blockConfirmations) return
+
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      const blockProvider = fromHome ? homeBlockNumberProvider : foreignBlockNumberProvider
+      const interval = fromHome ? HOME_RPC_POLLING_INTERVAL : FOREIGN_RPC_POLLING_INTERVAL
+      const web3 = fromHome ? home.web3 : foreign.web3
+      blockProvider.start(web3)
+
+      const targetBlock = receipt.blockNumber + blockConfirmations
+
+      checkSignaturesWaitingForBLocks(
+        targetBlock,
+        setWaitingBlocks,
+        setWaitingBlocksResolved,
+        validatorList,
+        setConfirmations,
+        blockProvider,
+        interval,
+        subscriptions
+      )
+
+      return () => {
+        unsubscribe()
+        blockProvider.stop()
+      }
+    },
+    [blockConfirmations, foreign.web3, fromHome, validatorList, home.web3, receipt]
+  )
+
+  // The collected signature event is only fetched once the signatures are collected on tx from home to foreign, to calculate if
+  // the execution tx on the foreign network is waiting for block confirmations
+  // This is executed if the message is in Home to Foreign direction only
+  useEffect(
+    () => {
+      if (!fromHome || !receipt || !home.web3 || !signatureCollected) return
+
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      homeBlockNumberProvider.start(home.web3)
+
+      const fromBlock = receipt.blockNumber
+      const toBlock = fromBlock + BLOCK_RANGE
+      const messageHash = home.web3.utils.soliditySha3Raw(message.data)
+
+      getCollectedSignaturesEvent(
+        home.web3,
+        home.bridgeContract,
+        fromBlock,
+        toBlock,
+        messageHash,
+        setCollectedSignaturesEvent,
+        subscriptions
+      )
+
+      return () => {
+        unsubscribe()
+        homeBlockNumberProvider.stop()
+      }
+    },
+    [fromHome, home.bridgeContract, home.web3, message.data, receipt, signatureCollected]
+  )
+
+  // Check if the responsible validator is waiting for block confirmations to execute the message on foreign network
+  // This is executed if the message is in Home to Foreign direction only
+  useEffect(
+    () => {
+      if (!fromHome || !home.web3 || !receipt || !collectedSignaturesEvent || !blockConfirmations) return
+
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      homeBlockNumberProvider.start(home.web3)
+      const targetBlock = collectedSignaturesEvent.blockNumber + blockConfirmations
+
+      checkWaitingBlocksForExecution(
+        homeBlockNumberProvider,
+        HOME_RPC_POLLING_INTERVAL,
+        targetBlock,
+        collectedSignaturesEvent,
+        setWaitingBlocksForExecution,
+        setWaitingBlocksForExecutionResolved,
+        setExecutionData,
+        subscriptions
+      )
+
+      return () => {
+        unsubscribe()
+        homeBlockNumberProvider.stop()
+      }
+    },
+    [collectedSignaturesEvent, fromHome, blockConfirmations, home.web3, receipt]
+  )
+
+  // Checks if validators verified the message
+  // To avoid making extra requests, this is only executed when validators finished waiting for blocks confirmations
+  useEffect(
+    () => {
+      if (!waitingBlocksResolved || !timestamp || !requiredSignatures) return
+
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      const confirmationContractMethod = fromHome ? getMessagesSigned : getAffirmationsSigned
+
+      getConfirmationsForTx(
+        message.data,
+        home.web3,
+        validatorList,
+        home.bridgeContract,
+        confirmationContractMethod,
+        setConfirmations,
+        requiredSignatures,
+        setSignatureCollected,
+        waitingBlocksResolved,
+        subscriptions,
+        timestamp,
+        getValidatorFailedTransactionsForMessage,
+        setFailedConfirmations,
+        getValidatorPendingTransactionsForMessage,
+        setPendingConfirmations,
+        getValidatorSuccessTransactionsForMessage
+      )
+
+      return () => {
+        unsubscribe()
+      }
+    },
+    [
+      fromHome,
+      message.data,
+      home.web3,
+      validatorList,
+      home.bridgeContract,
+      requiredSignatures,
+      waitingBlocksResolved,
+      timestamp
+    ]
+  )
+
+  // Gets finalization event to display the information about the execution of the message
+  // In a message from Home to Foreign it will be executed after finishing waiting for block confirmations for the execution transaction on Foreign
+  // In a message from Foreign to Home it will be executed after finishing waiting for block confirmations of the message request
+  useEffect(
+    () => {
+      if ((fromHome && !waitingBlocksForExecutionResolved) || (!fromHome && !waitingBlocksResolved)) return
+
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      const contractEvent = fromHome ? 'RelayedMessage' : 'AffirmationCompleted'
+      const bridgeContract = fromHome ? foreign.bridgeContract : home.bridgeContract
+      const providedWeb3 = fromHome ? foreign.web3 : home.web3
+      const interval = fromHome ? FOREIGN_RPC_POLLING_INTERVAL : HOME_RPC_POLLING_INTERVAL
+
+      getFinalizationEvent(
+        bridgeContract,
+        contractEvent,
+        providedWeb3,
+        setExecutionData,
+        waitingBlocksResolved,
+        message,
+        interval,
+        subscriptions,
+        timestamp,
+        collectedSignaturesEvent,
+        getExecutionFailedTransactionForMessage,
+        setFailedExecution,
+        getExecutionPendingTransactionsForMessage,
+        setPendingExecution
+      )
+
+      return () => {
+        unsubscribe()
+      }
+    },
+    [
+      fromHome,
+      foreign.bridgeContract,
+      home.bridgeContract,
+      message,
+      foreign.web3,
+      home.web3,
+      waitingBlocksResolved,
+      waitingBlocksForExecutionResolved,
+      timestamp,
+      collectedSignaturesEvent
+    ]
+  )
+
+  // Sets the message status based in the collected information
+  useEffect(
+    () => {
+      if (executionData.status === VALIDATOR_CONFIRMATION_STATUS.SUCCESS && existsConfirmation(confirmations)) {
+        const newStatus = executionData.executionResult
+          ? CONFIRMATIONS_STATUS.SUCCESS
+          : CONFIRMATIONS_STATUS.SUCCESS_MESSAGE_FAILED
+        setStatus(newStatus)
+      } else if (signatureCollected) {
+        if (fromHome) {
+          if (waitingBlocksForExecution) {
+            setStatus(CONFIRMATIONS_STATUS.EXECUTION_WAITING)
+          } else if (failedExecution) {
+            setStatus(CONFIRMATIONS_STATUS.EXECUTION_FAILED)
+          } else if (pendingExecution) {
+            setStatus(CONFIRMATIONS_STATUS.EXECUTION_PENDING)
+          } else if (waitingBlocksForExecutionResolved) {
+            setStatus(CONFIRMATIONS_STATUS.EXECUTION_WAITING)
+          } else {
+            setStatus(CONFIRMATIONS_STATUS.EXECUTION_WAITING)
+          }
+        } else {
+          setStatus(CONFIRMATIONS_STATUS.UNDEFINED)
+        }
+      } else if (waitingBlocks) {
+        setStatus(CONFIRMATIONS_STATUS.WAITING_CHAIN)
+      } else if (failedConfirmations) {
+        setStatus(CONFIRMATIONS_STATUS.FAILED)
+      } else if (pendingConfirmations) {
+        setStatus(CONFIRMATIONS_STATUS.PENDING)
+      } else if (waitingBlocksResolved && existsConfirmation(confirmations)) {
+        setStatus(CONFIRMATIONS_STATUS.WAITING_VALIDATORS)
+      } else if (waitingBlocksResolved) {
+        setStatus(CONFIRMATIONS_STATUS.SEARCHING)
+      } else {
+        setStatus(CONFIRMATIONS_STATUS.UNDEFINED)
+      }
+    },
+    [
+      executionData,
+      fromHome,
+      signatureCollected,
+      waitingBlocks,
+      waitingBlocksForExecution,
+      failedConfirmations,
+      failedExecution,
+      pendingConfirmations,
+      pendingExecution,
+      waitingBlocksResolved,
+      confirmations,
+      waitingBlocksForExecutionResolved
+    ]
+  )
+
+  return {
+    confirmations,
+    status,
+    signatureCollected,
+    executionData,
+    waitingBlocksResolved
+  }
+}

alm/src/hooks/useNetwork.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { getChainId, getWeb3 } from '../utils/web3'
+import { SnapshotProvider } from '../services/SnapshotProvider'
+
+export const useNetwork = (url: string, snapshotProvider: SnapshotProvider) => {
+  const [loading, setLoading] = useState(true)
+  const [chainId, setChainId] = useState(0)
+  const web3 = getWeb3(url)
+
+  useEffect(
+    () => {
+      setLoading(true)
+      const getWeb3ChainId = async () => {
+        const id = await getChainId(web3, snapshotProvider)
+        setChainId(id)
+        setLoading(false)
+      }
+      getWeb3ChainId()
+    },
+    [web3, snapshotProvider]
+  )
+
+  return {
+    web3,
+    chainId,
+    loading
+  }
+}

alm/src/hooks/useTransactionFinder.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { TransactionReceipt } from 'web3-eth'
+import { HOME_RPC_POLLING_INTERVAL, TRANSACTION_STATUS } from '../config/constants'
+import Web3 from 'web3'
+
+export const useTransactionFinder = ({ txHash, web3 }: { txHash: string; web3: Maybe<Web3> }) => {
+  const [status, setStatus] = useState(TRANSACTION_STATUS.UNDEFINED)
+  const [receipt, setReceipt] = useState<Maybe<TransactionReceipt>>(null)
+
+  useEffect(
+    () => {
+      if (!txHash || !web3) return
+
+      const subscriptions: number[] = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      const getReceipt = async (
+        web3: Web3,
+        txHash: string,
+        setReceipt: Function,
+        setStatus: Function,
+        subscriptions: number[]
+      ) => {
+        const txReceipt = await web3.eth.getTransactionReceipt(txHash)
+        setReceipt(txReceipt)
+
+        if (!txReceipt) {
+          setStatus(TRANSACTION_STATUS.NOT_FOUND)
+          const timeoutId = setTimeout(
+            () => getReceipt(web3, txHash, setReceipt, setStatus, subscriptions),
+            HOME_RPC_POLLING_INTERVAL
+          )
+          subscriptions.push(timeoutId)
+        } else {
+          setStatus(TRANSACTION_STATUS.FOUND)
+        }
+      }
+
+      getReceipt(web3, txHash, setReceipt, setStatus, subscriptions)
+      return () => {
+        unsubscribe()
+      }
+    },
+    [txHash, web3]
+  )
+
+  return {
+    status,
+    receipt
+  }
+}

alm/src/hooks/useTransactionStatus.ts

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react'
+import { TransactionReceipt } from 'web3-eth'
+import { HOME_RPC_POLLING_INTERVAL, TRANSACTION_STATUS } from '../config/constants'
+import { getTransactionStatusDescription } from '../utils/networks'
+import { useStateProvider } from '../state/StateProvider'
+import { getHomeMessagesFromReceipt, getForeignMessagesFromReceipt, MessageObject, getBlock } from '../utils/web3'
+import useInterval from '@use-it/interval'
+
+export const useTransactionStatus = ({
+  txHash,
+  chainId,
+  receiptParam
+}: {
+  txHash: string
+  chainId: number
+  receiptParam: Maybe<TransactionReceipt>
+}) => {
+  const { home, foreign } = useStateProvider()
+  const [messages, setMessages] = useState<Array<MessageObject>>([])
+  const [status, setStatus] = useState('')
+  const [description, setDescription] = useState('')
+  const [receipt, setReceipt] = useState<Maybe<TransactionReceipt>>(null)
+  const [timestamp, setTimestamp] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  // Update description so the time displayed is accurate
+  useInterval(() => {
+    if (!status || !timestamp || !description) return
+    setDescription(getTransactionStatusDescription(status, timestamp))
+  }, 30000)
+
+  useEffect(
+    () => {
+      const subscriptions: Array<number> = []
+
+      const unsubscribe = () => {
+        subscriptions.forEach(s => {
+          clearTimeout(s)
+        })
+      }
+
+      const getReceipt = async () => {
+        if (!chainId || !txHash || !home.chainId || !foreign.chainId || !home.web3 || !foreign.web3) return
+        setLoading(true)
+        const isHome = chainId === home.chainId
+        const web3 = isHome ? home.web3 : foreign.web3
+
+        let txReceipt
+
+        if (receiptParam) {
+          txReceipt = receiptParam
+        } else {
+          txReceipt = await web3.eth.getTransactionReceipt(txHash)
+        }
+
+        setReceipt(txReceipt)
+
+        if (!txReceipt) {
+          setStatus(TRANSACTION_STATUS.NOT_FOUND)
+          setDescription(getTransactionStatusDescription(TRANSACTION_STATUS.NOT_FOUND))
+          setMessages([{ id: txHash, data: '' }])
+          const timeoutId = setTimeout(() => getReceipt(), HOME_RPC_POLLING_INTERVAL)
+          subscriptions.push(timeoutId)
+        } else {
+          const blockNumber = txReceipt.blockNumber
+          const block = await getBlock(web3, blockNumber)
+          const blockTimestamp = typeof block.timestamp === 'string' ? parseInt(block.timestamp) : block.timestamp
+          setTimestamp(blockTimestamp)
+
+          if (txReceipt.status) {
+            let bridgeMessages: Array<MessageObject>
+            if (isHome) {
+              bridgeMessages = getHomeMessagesFromReceipt(txReceipt, home.web3, home.bridgeAddress)
+            } else {
+              bridgeMessages = getForeignMessagesFromReceipt(txReceipt, foreign.web3, foreign.bridgeAddress)
+            }
+
+            if (bridgeMessages.length === 0) {
+              setMessages([{ id: txHash, data: '' }])
+              setStatus(TRANSACTION_STATUS.SUCCESS_NO_MESSAGES)
+              setDescription(getTransactionStatusDescription(TRANSACTION_STATUS.SUCCESS_NO_MESSAGES, blockTimestamp))
+            } else if (bridgeMessages.length === 1) {
+              setMessages(bridgeMessages)
+              setStatus(TRANSACTION_STATUS.SUCCESS_ONE_MESSAGE)
+              setDescription(getTransactionStatusDescription(TRANSACTION_STATUS.SUCCESS_ONE_MESSAGE, blockTimestamp))
+            } else {
+              setMessages(bridgeMessages)
+              setStatus(TRANSACTION_STATUS.SUCCESS_MULTIPLE_MESSAGES)
+              setDescription(
+                getTransactionStatusDescription(TRANSACTION_STATUS.SUCCESS_MULTIPLE_MESSAGES, blockTimestamp)
+              )
+            }
+          } else {
+            setStatus(TRANSACTION_STATUS.FAILED)
+            setDescription(getTransactionStatusDescription(TRANSACTION_STATUS.FAILED, blockTimestamp))
+          }
+        }
+        setLoading(false)
+      }
+
+      // unsubscribe from previous txHash
+      unsubscribe()
+
+      getReceipt()
+      return () => {
+        // unsubscribe when unmount component
+        unsubscribe()
+      }
+    },
+    [
+      txHash,
+      chainId,
+      home.chainId,
+      foreign.chainId,
+      home.web3,
+      foreign.web3,
+      home.bridgeAddress,
+      foreign.bridgeAddress,
+      receiptParam
+    ]
+  )
+
+  return {
+    messages,
+    status,
+    description,
+    receipt,
+    timestamp,
+    loading
+  }
+}

alm/src/hooks/useValidatorContract.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { Contract } from 'web3-eth-contract'
+import Web3 from 'web3'
+import { getRequiredSignatures, getValidatorAddress, getValidatorList } from '../utils/contract'
+import { BRIDGE_VALIDATORS_ABI } from '../abis'
+import { useStateProvider } from '../state/StateProvider'
+import { TransactionReceipt } from 'web3-eth'
+import { foreignSnapshotProvider, homeSnapshotProvider, SnapshotProvider } from '../services/SnapshotProvider'
+
+export interface useValidatorContractParams {
+  fromHome: boolean
+  receipt: Maybe<TransactionReceipt>
+}
+
+export const useValidatorContract = ({ receipt, fromHome }: useValidatorContractParams) => {
+  const [validatorContract, setValidatorContract] = useState<Maybe<Contract>>(null)
+  const [requiredSignatures, setRequiredSignatures] = useState(0)
+  const [validatorList, setValidatorList] = useState([])
+
+  const { home, foreign } = useStateProvider()
+
+  const callValidatorContract = async (bridgeContract: Maybe<Contract>, web3: Web3, setValidatorContract: Function) => {
+    if (!web3 || !bridgeContract) return
+    const address = await getValidatorAddress(bridgeContract)
+    const contract = new web3.eth.Contract(BRIDGE_VALIDATORS_ABI, address)
+    setValidatorContract(contract)
+  }
+
+  const callRequiredSignatures = async (
+    contract: Maybe<Contract>,
+    receipt: TransactionReceipt,
+    setResult: Function,
+    snapshotProvider: SnapshotProvider
+  ) => {
+    if (!contract) return
+    const result = await getRequiredSignatures(contract, receipt.blockNumber, snapshotProvider)
+    setResult(result)
+  }
+
+  const callValidatorList = async (
+    contract: Maybe<Contract>,
+    receipt: TransactionReceipt,
+    setResult: Function,
+    snapshotProvider: SnapshotProvider
+  ) => {
+    if (!contract) return
+    const result = await getValidatorList(contract, receipt.blockNumber, snapshotProvider)
+    setResult(result)
+  }
+
+  useEffect(
+    () => {
+      const web3 = fromHome ? home.web3 : foreign.web3
+      const bridgeContract = fromHome ? home.bridgeContract : foreign.bridgeContract
+
+      if (!web3 || !bridgeContract) return
+      callValidatorContract(bridgeContract, web3, setValidatorContract)
+    },
+    [home.web3, foreign.web3, home.bridgeContract, foreign.bridgeContract, fromHome]
+  )
+
+  useEffect(
+    () => {
+      if (!receipt) return
+      const snapshotProvider = fromHome ? homeSnapshotProvider : foreignSnapshotProvider
+      callRequiredSignatures(validatorContract, receipt, setRequiredSignatures, snapshotProvider)
+      callValidatorList(validatorContract, receipt, setValidatorList, snapshotProvider)
+    },
+    [validatorContract, receipt, fromHome]
+  )
+
+  return {
+    requiredSignatures,
+    validatorList
+  }
+}

alm/src/index.css

@@ -1,8 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

alm/src/index.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
+import { ThemeProvider } from 'styled-components'
+import { GlobalStyle } from './themes/GlobalStyle'
 import App from './App'
+import Light from './themes/Light'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={Light}>
+      <GlobalStyle />
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 )

alm/src/services/BlockNumberProvider.ts

@@ -0,0 +1,64 @@
+import Web3 from 'web3'
+import differenceInMilliseconds from 'date-fns/differenceInMilliseconds'
+import { HOME_RPC_POLLING_INTERVAL } from '../config/constants'
+
+export class BlockNumberProvider {
+  private running: number
+  private web3: Maybe<Web3>
+  private ref: number | undefined
+  private value: Maybe<number>
+  private lastValueTimestamp: Maybe<Date>
+  private readonly interval: number
+
+  constructor(interval = 5000) {
+    this.running = 0
+    this.web3 = null
+    this.ref = undefined
+    this.value = null
+    this.lastValueTimestamp = null
+    this.interval = interval
+
+    return this
+  }
+
+  start(web3: Maybe<Web3>) {
+    if (!this.running) {
+      clearTimeout(this.ref)
+      this.web3 = web3
+      this.running = this.running + 1
+      this.fetchLastBlock()
+    } else {
+      this.running = this.running + 1
+    }
+  }
+
+  stop() {
+    this.running = this.running > 0 ? this.running - 1 : 0
+
+    if (!this.running) {
+      clearTimeout(this.ref)
+      this.ref = undefined
+      this.web3 = null
+    }
+  }
+
+  get() {
+    return this.value
+  }
+
+  private async fetchLastBlock() {
+    if (!this.web3) return
+    const now = new Date()
+    const distance = differenceInMilliseconds(now, this.lastValueTimestamp || 0)
+
+    if (distance >= this.interval) {
+      this.value = await this.web3.eth.getBlockNumber()
+      this.lastValueTimestamp = now
+    }
+
+    this.ref = setTimeout(() => this.fetchLastBlock(), this.interval)
+  }
+}
+
+export const homeBlockNumberProvider = new BlockNumberProvider(HOME_RPC_POLLING_INTERVAL)
+export const foreignBlockNumberProvider = new BlockNumberProvider(HOME_RPC_POLLING_INTERVAL)

alm/src/services/SnapshotProvider.ts

@@ -0,0 +1,69 @@
+const initialValue = {
+  chainId: 0,
+  RequiredBlockConfirmationChanged: [],
+  RequiredSignaturesChanged: [],
+  ValidatorAdded: [],
+  ValidatorRemoved: [],
+  snapshotBlockNumber: 0
+}
+
+export interface SnapshotEvent {
+  blockNumber: number
+  returnValues: any
+}
+
+export interface SnapshotValidatorEvent {
+  blockNumber: number
+  returnValues: any
+  event: string
+}
+
+export interface Snapshot {
+  chainId: number
+  RequiredBlockConfirmationChanged: SnapshotEvent[]
+  RequiredSignaturesChanged: SnapshotEvent[]
+  ValidatorAdded: SnapshotValidatorEvent[]
+  ValidatorRemoved: SnapshotValidatorEvent[]
+  snapshotBlockNumber: number
+}
+
+export class SnapshotProvider {
+  private data: Snapshot
+
+  constructor(side: string) {
+    let data = initialValue
+    try {
+      data = require(`../snapshots/${side}.json`)
+    } catch (e) {
+      console.log('Snapshot not found')
+    }
+    this.data = data
+  }
+
+  chainId() {
+    return this.data.chainId
+  }
+
+  snapshotBlockNumber() {
+    return this.data.snapshotBlockNumber
+  }
+
+  requiredBlockConfirmationEvents(toBlock: number) {
+    return this.data.RequiredBlockConfirmationChanged.filter(e => e.blockNumber <= toBlock)
+  }
+
+  requiredSignaturesEvents(toBlock: number) {
+    return this.data.RequiredSignaturesChanged.filter(e => e.blockNumber <= toBlock)
+  }
+
+  validatorAddedEvents(fromBlock: number) {
+    return this.data.ValidatorAdded.filter(e => e.blockNumber >= fromBlock)
+  }
+
+  validatorRemovedEvents(fromBlock: number) {
+    return this.data.ValidatorRemoved.filter(e => e.blockNumber >= fromBlock)
+  }
+}
+
+export const homeSnapshotProvider = new SnapshotProvider('home')
+export const foreignSnapshotProvider = new SnapshotProvider('foreign')

alm/src/services/ValidatorsCache.ts

@@ -0,0 +1,29 @@
+import { ConfirmationParam } from '../hooks/useMessageConfirmations'
+
+class ValidatorsCache {
+  private readonly store: { [key: string]: boolean }
+  private readonly dataStore: { [key: string]: ConfirmationParam }
+
+  constructor() {
+    this.store = {}
+    this.dataStore = {}
+  }
+
+  get(key: string) {
+    return this.store[key]
+  }
+
+  set(key: string, value: boolean) {
+    this.store[key] = value
+  }
+
+  getData(key: string) {
+    return this.dataStore[key]
+  }
+
+  setData(key: string, value: ConfirmationParam) {
+    this.dataStore[key] = value
+  }
+}
+
+export default new ValidatorsCache()

alm/src/state/StateProvider.tsx

@@ -0,0 +1,79 @@
+import React, { createContext, ReactNode } from 'react'
+import { useNetwork } from '../hooks/useNetwork'
+import {
+  HOME_RPC_URL,
+  FOREIGN_RPC_URL,
+  HOME_BRIDGE_ADDRESS,
+  FOREIGN_BRIDGE_ADDRESS,
+  HOME_NETWORK_NAME,
+  FOREIGN_NETWORK_NAME
+} from '../config/constants'
+import Web3 from 'web3'
+import { useBridgeContracts } from '../hooks/useBridgeContracts'
+import { Contract } from 'web3-eth-contract'
+import { foreignSnapshotProvider, homeSnapshotProvider } from '../services/SnapshotProvider'
+
+export interface BaseNetworkParams {
+  chainId: number
+  name: string
+  web3: Maybe<Web3>
+  bridgeAddress: string
+  bridgeContract: Maybe<Contract>
+}
+
+export interface StateContext {
+  home: BaseNetworkParams
+  foreign: BaseNetworkParams
+  loading: boolean
+}
+
+const initialState = {
+  home: {
+    chainId: 0,
+    name: '',
+    web3: null,
+    bridgeAddress: HOME_BRIDGE_ADDRESS,
+    bridgeContract: null
+  },
+  foreign: {
+    chainId: 0,
+    name: '',
+    web3: null,
+    bridgeAddress: FOREIGN_BRIDGE_ADDRESS,
+    bridgeContract: null
+  },
+  loading: true
+}
+
+const StateContext = createContext<StateContext>(initialState)
+
+export const StateProvider = ({ children }: { children: ReactNode }) => {
+  const homeNetwork = useNetwork(HOME_RPC_URL, homeSnapshotProvider)
+  const foreignNetwork = useNetwork(FOREIGN_RPC_URL, foreignSnapshotProvider)
+  const { homeBridge, foreignBridge } = useBridgeContracts({
+    homeWeb3: homeNetwork.web3,
+    foreignWeb3: foreignNetwork.web3
+  })
+
+  const value = {
+    home: {
+      bridgeAddress: HOME_BRIDGE_ADDRESS,
+      name: HOME_NETWORK_NAME,
+      bridgeContract: homeBridge,
+      ...homeNetwork
+    },
+    foreign: {
+      bridgeAddress: FOREIGN_BRIDGE_ADDRESS,
+      name: FOREIGN_NETWORK_NAME,
+      bridgeContract: foreignBridge,
+      ...foreignNetwork
+    },
+    loading: homeNetwork.loading || foreignNetwork.loading
+  }
+
+  return <StateContext.Provider value={value}>{children}</StateContext.Provider>
+}
+
+export const useStateProvider = (): StateContext => {
+  return React.useContext(StateContext)
+}

alm/src/themes/Dark.tsx

@@ -0,0 +1,22 @@
+const theme = {
+  backgroundColor: '#121212',
+  fontColor: '#f5f5f5',
+  buttonColor: '#f5f5f5',
+  colorPrimary: '#272727',
+  colorGrey: '#272727',
+  colorLightGrey: '#272727',
+  linkColor: '#ffffff',
+  success: {
+    textColor: '#00c9a7',
+    backgroundColor: '#004d40'
+  },
+  notRequired: {
+    textColor: '#bdbdbd',
+    backgroundColor: '#424242'
+  },
+  failed: {
+    textColor: '#EF5350',
+    backgroundColor: '#4E342E'
+  }
+}
+export default theme

alm/src/themes/GlobalStyle.tsx

@@ -0,0 +1,32 @@
+import { createGlobalStyle } from 'styled-components'
+
+import theme from './Light'
+
+type ThemeType = typeof theme
+
+export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  :root {
+    --bg-color: ${props => props.theme.backgroundColor};
+    --font-color: ${props => props.theme.fontColor};
+    --button-color: ${props => props.theme.buttonColor};
+    --color-primary: ${props => props.theme.colorPrimary};
+    --color-grey: ${props => props.theme.colorGrey};
+    --color-lightGrey: ${props => props.theme.colorLightGrey};
+    --link-color: ${props => props.theme.linkColor};
+    --success-color: ${props => props.theme.success.textColor};
+    --success-bg-color: ${props => props.theme.success.backgroundColor};
+    --not-required-color: ${props => props.theme.notRequired.textColor};
+    --not-required-bg-color: ${props => props.theme.notRequired.backgroundColor};
+    --failed-color: ${props => props.theme.failed.textColor};
+    --failed-bg-color: ${props => props.theme.failed.backgroundColor};
+  }
+`

alm/src/themes/Light.ts

@@ -0,0 +1,22 @@
+const theme = {
+  backgroundColor: '#FFFFFF',
+  fontColor: 'rgba(0, 0, 0, 0.65)',
+  buttonColor: '#1890ff',
+  colorPrimary: '#BDBDBD',
+  colorGrey: '#1890ff',
+  colorLightGrey: '#1890ff',
+  linkColor: '#1890ff',
+  success: {
+    textColor: '#388E3C',
+    backgroundColor: 'rgba(0,201,167,.1)'
+  },
+  notRequired: {
+    textColor: '#77838f',
+    backgroundColor: 'rgba(119,131,143,.1)'
+  },
+  failed: {
+    textColor: '#de4437',
+    backgroundColor: 'rgba(222,68,55,.1)'
+  }
+}
+export default theme

alm/src/utils/__tests__/contracts.test.ts

@@ -0,0 +1,469 @@
+import 'jest'
+import { getRequiredBlockConfirmations, getRequiredSignatures, getValidatorList } from '../contract'
+import { Contract } from 'web3-eth-contract'
+import { SnapshotProvider } from '../../services/SnapshotProvider'
+
+describe('getRequiredBlockConfirmations', () => {
+  const methodsBuilder = (value: string) => ({
+    requiredBlockConfirmations: () => {
+      return {
+        call: () => {
+          return value
+        }
+      }
+    }
+  })
+
+  test('Should call requiredBlockConfirmations method if no events present', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return []
+      },
+      methods: methodsBuilder('1')
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredBlockConfirmationEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredBlockConfirmations(contract, 10, snapshotProvider)
+
+    expect(result).toEqual(1)
+  })
+  test('Should not call to get events if block number was included in the snapshot', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => []),
+      methods: methodsBuilder('3')
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredBlockConfirmationEvents: () => {
+        return [
+          {
+            blockNumber: 8,
+            returnValues: {
+              requiredBlockConfirmations: '1'
+            }
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 15
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredBlockConfirmations(contract, 10, snapshotProvider)
+
+    expect(result).toEqual(1)
+    expect(contract.getPastEvents).toBeCalledTimes(0)
+  })
+  test('Should call to get events if block number was not included in the snapshot', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => [
+        {
+          blockNumber: 9,
+          returnValues: {
+            requiredBlockConfirmations: '2'
+          }
+        }
+      ]),
+      methods: methodsBuilder('3')
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredBlockConfirmationEvents: () => {
+        return [
+          {
+            blockNumber: 8,
+            returnValues: {
+              requiredBlockConfirmations: '1'
+            }
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 8
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredBlockConfirmations(contract, 10, snapshotProvider)
+
+    expect(result).toEqual(2)
+    expect(contract.getPastEvents).toBeCalledTimes(1)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('RequiredBlockConfirmationChanged', {
+      fromBlock: 9,
+      toBlock: 10
+    })
+  })
+  test('Should use the most updated event', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => [
+        {
+          blockNumber: 9,
+          returnValues: {
+            requiredBlockConfirmations: '2'
+          }
+        },
+        {
+          blockNumber: 11,
+          returnValues: {
+            requiredBlockConfirmations: '3'
+          }
+        }
+      ]),
+      methods: methodsBuilder('3')
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredBlockConfirmationEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 11
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredBlockConfirmations(contract, 15, snapshotProvider)
+
+    expect(result).toEqual(3)
+    expect(contract.getPastEvents).toBeCalledTimes(1)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('RequiredBlockConfirmationChanged', {
+      fromBlock: 12,
+      toBlock: 15
+    })
+  })
+})
+describe('getRequiredSignatures', () => {
+  test('Should not call to get events if block number was included in the snapshot', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => [])
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredSignaturesEvents: () => {
+        return [
+          {
+            blockNumber: 7,
+            returnValues: {
+              requiredSignatures: '1'
+            }
+          },
+          {
+            blockNumber: 8,
+            returnValues: {
+              requiredSignatures: '2'
+            }
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredSignatures(contract, 10, snapshotProvider)
+
+    expect(result).toEqual(2)
+    expect(contract.getPastEvents).toBeCalledTimes(0)
+  })
+  test('Should call to get events if block number is higher than the snapshot block number', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => [
+        {
+          blockNumber: 15,
+          returnValues: {
+            requiredSignatures: '3'
+          }
+        }
+      ])
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredSignaturesEvents: () => {
+        return [
+          {
+            blockNumber: 7,
+            returnValues: {
+              requiredSignatures: '1'
+            }
+          },
+          {
+            blockNumber: 8,
+            returnValues: {
+              requiredSignatures: '2'
+            }
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredSignatures(contract, 20, snapshotProvider)
+
+    expect(result).toEqual(3)
+    expect(contract.getPastEvents).toBeCalledTimes(1)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('RequiredSignaturesChanged', {
+      fromBlock: 11,
+      toBlock: 20
+    })
+  })
+  test('Should use the most updated event before the block number', async () => {
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => [
+        {
+          blockNumber: 15,
+          returnValues: {
+            requiredSignatures: '4'
+          }
+        }
+      ])
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      requiredSignaturesEvents: () => {
+        return [
+          {
+            blockNumber: 5,
+            returnValues: {
+              requiredSignatures: '1'
+            }
+          },
+          {
+            blockNumber: 6,
+            returnValues: {
+              requiredSignatures: '2'
+            }
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const result = await getRequiredSignatures(contract, 7, snapshotProvider)
+
+    expect(result).toEqual(2)
+    expect(contract.getPastEvents).toBeCalledTimes(0)
+  })
+})
+describe('getValidatorList', () => {
+  const validator1 = '0x45b96809336A8b714BFbdAB3E4B5e0fe5d839908'
+  const validator2 = '0xAe8bFfc8BBc6AAa9E21ED1E4e4957fe798BEA25f'
+  const validator3 = '0x285A6eB779be4db94dA65e2F3518B1c5F0f71244'
+  const methodsBuilder = (value: string[]) => ({
+    validatorList: () => {
+      return {
+        call: () => {
+          return value
+        }
+      }
+    }
+  })
+  test('Should return the current validator list if no events found', async () => {
+    const currentValidators = [validator1, validator2, validator3]
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => []),
+      methods: methodsBuilder(currentValidators)
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      validatorAddedEvents: () => {
+        return []
+      },
+      validatorRemovedEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const list = await getValidatorList(contract, 20, snapshotProvider)
+
+    expect(list.length).toEqual(3)
+    expect(list).toEqual(expect.arrayContaining(currentValidators))
+    expect(contract.getPastEvents).toBeCalledTimes(2)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorAdded', {
+      fromBlock: 20
+    })
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorRemoved', {
+      fromBlock: 20
+    })
+  })
+  test('If validator was added later from snapshot it should not include it', async () => {
+    const currentValidators = [validator1, validator2, validator3]
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => []),
+      methods: methodsBuilder(currentValidators)
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      validatorAddedEvents: () => {
+        return [
+          {
+            blockNumber: 9,
+            returnValues: {
+              validator: validator3
+            },
+            event: 'ValidatorAdded'
+          }
+        ]
+      },
+      validatorRemovedEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const list = await getValidatorList(contract, 5, snapshotProvider)
+
+    expect(list.length).toEqual(2)
+    expect(list).toEqual(expect.arrayContaining([validator1, validator2]))
+    expect(contract.getPastEvents).toBeCalledTimes(2)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorAdded', {
+      fromBlock: 11
+    })
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorRemoved', {
+      fromBlock: 11
+    })
+  })
+  test('If validator was added later from chain it should not include it', async () => {
+    const currentValidators = [validator1, validator2, validator3]
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(event => {
+        if (event === 'ValidatorAdded') {
+          return [
+            {
+              blockNumber: 9,
+              returnValues: {
+                validator: validator3
+              },
+              event: 'ValidatorAdded'
+            }
+          ]
+        } else {
+          return []
+        }
+      }),
+      methods: methodsBuilder(currentValidators)
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      validatorAddedEvents: () => {
+        return []
+      },
+      validatorRemovedEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const list = await getValidatorList(contract, 15, snapshotProvider)
+
+    expect(list.length).toEqual(2)
+    expect(list).toEqual(expect.arrayContaining([validator1, validator2]))
+    expect(contract.getPastEvents).toBeCalledTimes(2)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorAdded', {
+      fromBlock: 15
+    })
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorRemoved', {
+      fromBlock: 15
+    })
+  })
+  test('If validator was removed later from snapshot it should include it', async () => {
+    const currentValidators = [validator1, validator2]
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(() => []),
+      methods: methodsBuilder(currentValidators)
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      validatorAddedEvents: () => {
+        return []
+      },
+      validatorRemovedEvents: () => {
+        return [
+          {
+            blockNumber: 9,
+            returnValues: {
+              validator: validator3
+            },
+            event: 'ValidatorRemoved'
+          }
+        ]
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const list = await getValidatorList(contract, 5, snapshotProvider)
+
+    expect(list.length).toEqual(3)
+    expect(list).toEqual(expect.arrayContaining([validator1, validator2, validator3]))
+    expect(contract.getPastEvents).toBeCalledTimes(2)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorAdded', {
+      fromBlock: 11
+    })
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorRemoved', {
+      fromBlock: 11
+    })
+  })
+  test('If validator was removed later from chain it should include it', async () => {
+    const currentValidators = [validator1, validator2]
+    const contract = ({
+      getPastEvents: jest.fn().mockImplementation(event => {
+        if (event === 'ValidatorRemoved') {
+          return [
+            {
+              blockNumber: 9,
+              returnValues: {
+                validator: validator3
+              },
+              event: 'ValidatorRemoved'
+            }
+          ]
+        } else {
+          return []
+        }
+      }),
+      methods: methodsBuilder(currentValidators)
+    } as unknown) as Contract
+
+    const snapshotProvider = ({
+      validatorAddedEvents: () => {
+        return []
+      },
+      validatorRemovedEvents: () => {
+        return []
+      },
+      snapshotBlockNumber: () => {
+        return 10
+      }
+    } as unknown) as SnapshotProvider
+
+    const list = await getValidatorList(contract, 15, snapshotProvider)
+
+    expect(list.length).toEqual(3)
+    expect(list).toEqual(expect.arrayContaining([validator1, validator2, validator3]))
+    expect(contract.getPastEvents).toBeCalledTimes(2)
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorAdded', {
+      fromBlock: 15
+    })
+    expect(contract.getPastEvents).toHaveBeenCalledWith('ValidatorRemoved', {
+      fromBlock: 15
+    })
+  })
+})

alm/src/utils/__tests__/explorer.test.ts

@@ -0,0 +1,155 @@
+import 'jest'
+import {
+  getFailedTransactions,
+  getSuccessTransactions,
+  filterValidatorSignatureTransaction,
+  getExecutionFailedTransactionForMessage,
+  APITransaction,
+  getValidatorPendingTransactionsForMessage,
+  getExecutionPendingTransactionsForMessage
+} from '../explorer'
+import { EXECUTE_AFFIRMATION_HASH, EXECUTE_SIGNATURES_HASH, SUBMIT_SIGNATURE_HASH } from '../../config/constants'
+
+const messageData = '0x123456'
+const OTHER_HASH = 'aabbccdd'
+const bridgeAddress = '0xFe446bEF1DbF7AFE24E81e05BC8B271C1BA9a560'
+const otherAddress = '0xD4075FB57fCf038bFc702c915Ef9592534bED5c1'
+
+describe('getFailedTransactions', () => {
+  test('should only return failed transactions', async () => {
+    const transactions = [{ isError: '0' }, { isError: '1' }, { isError: '0' }, { isError: '1' }, { isError: '1' }]
+
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+    const result = await getFailedTransactions('', '', 0, 1, '', fetchAccountTransactions)
+    expect(result.length).toEqual(3)
+  })
+})
+describe('getSuccessTransactions', () => {
+  test('should only return success transactions', async () => {
+    const transactions = [{ isError: '0' }, { isError: '1' }, { isError: '0' }, { isError: '1' }, { isError: '1' }]
+
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+    const result = await getSuccessTransactions('', '', 0, 1, '', fetchAccountTransactions)
+    expect(result.length).toEqual(2)
+  })
+})
+describe('filterValidatorSignatureTransaction', () => {
+  test('should return submit signatures related transaction', () => {
+    const transactions = [
+      { input: `0x${SUBMIT_SIGNATURE_HASH}112233` },
+      { input: `0x${SUBMIT_SIGNATURE_HASH}123456` },
+      { input: `0x${OTHER_HASH}123456` },
+      { input: `0x${OTHER_HASH}112233` }
+    ] as APITransaction[]
+
+    const result = filterValidatorSignatureTransaction(transactions, messageData)
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${SUBMIT_SIGNATURE_HASH}123456` })
+  })
+  test('should return execute affirmation related transaction', () => {
+    const transactions = [
+      { input: `0x${EXECUTE_AFFIRMATION_HASH}112233` },
+      { input: `0x${EXECUTE_AFFIRMATION_HASH}123456` },
+      { input: `0x${OTHER_HASH}123456` },
+      { input: `0x${OTHER_HASH}112233` }
+    ] as APITransaction[]
+
+    const result = filterValidatorSignatureTransaction(transactions, messageData)
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${EXECUTE_AFFIRMATION_HASH}123456` })
+  })
+})
+describe('getExecutionFailedTransactionForMessage', () => {
+  test('should return failed transaction related to signatures execution', async () => {
+    const transactions = [
+      { input: `0x${EXECUTE_SIGNATURES_HASH}112233` },
+      { input: `0x${EXECUTE_SIGNATURES_HASH}123456` },
+      { input: `0x${OTHER_HASH}123456` },
+      { input: `0x${OTHER_HASH}112233` }
+    ] as APITransaction[]
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+
+    const result = await getExecutionFailedTransactionForMessage(
+      {
+        account: '',
+        to: '',
+        messageData,
+        startTimestamp: 0,
+        endTimestamp: 1
+      },
+      fetchAccountTransactions
+    )
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${EXECUTE_SIGNATURES_HASH}123456` })
+  })
+})
+describe('getValidatorPendingTransactionsForMessage', () => {
+  test('should return pending transaction for submit signature transaction', async () => {
+    const transactions = [
+      { input: `0x${SUBMIT_SIGNATURE_HASH}112233`, to: bridgeAddress },
+      { input: `0x${SUBMIT_SIGNATURE_HASH}123456`, to: bridgeAddress },
+      { input: `0x${SUBMIT_SIGNATURE_HASH}123456`, to: otherAddress },
+      { input: `0x${OTHER_HASH}123456`, to: bridgeAddress },
+      { input: `0x${OTHER_HASH}112233`, to: bridgeAddress }
+    ] as APITransaction[]
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+
+    const result = await getValidatorPendingTransactionsForMessage(
+      {
+        account: '',
+        to: bridgeAddress,
+        messageData
+      },
+      fetchAccountTransactions
+    )
+
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${SUBMIT_SIGNATURE_HASH}123456`, to: bridgeAddress })
+  })
+  test('should return pending transaction for execute affirmation transaction', async () => {
+    const transactions = [
+      { input: `0x${EXECUTE_AFFIRMATION_HASH}112233`, to: bridgeAddress },
+      { input: `0x${EXECUTE_AFFIRMATION_HASH}123456`, to: bridgeAddress },
+      { input: `0x${EXECUTE_AFFIRMATION_HASH}123456`, to: otherAddress },
+      { input: `0x${OTHER_HASH}123456`, to: bridgeAddress },
+      { input: `0x${OTHER_HASH}112233`, to: bridgeAddress }
+    ] as APITransaction[]
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+
+    const result = await getValidatorPendingTransactionsForMessage(
+      {
+        account: '',
+        to: bridgeAddress,
+        messageData
+      },
+      fetchAccountTransactions
+    )
+
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${EXECUTE_AFFIRMATION_HASH}123456`, to: bridgeAddress })
+  })
+})
+describe('getExecutionPendingTransactionsForMessage', () => {
+  test('should return pending transaction for signatures execution transaction', async () => {
+    const transactions = [
+      { input: `0x${EXECUTE_SIGNATURES_HASH}112233`, to: bridgeAddress },
+      { input: `0x${EXECUTE_SIGNATURES_HASH}123456`, to: bridgeAddress },
+      { input: `0x${EXECUTE_SIGNATURES_HASH}123456`, to: otherAddress },
+      { input: `0x${OTHER_HASH}123456`, to: bridgeAddress },
+      { input: `0x${OTHER_HASH}112233`, to: bridgeAddress }
+    ] as APITransaction[]
+    const fetchAccountTransactions = jest.fn().mockImplementation(() => transactions)
+
+    const result = await getExecutionPendingTransactionsForMessage(
+      {
+        account: '',
+        to: bridgeAddress,
+        messageData
+      },
+      fetchAccountTransactions
+    )
+
+    expect(result.length).toEqual(1)
+    expect(result[0]).toEqual({ input: `0x${EXECUTE_SIGNATURES_HASH}123456`, to: bridgeAddress })
+  })
+})

alm/src/utils/__tests__/getConfirmationsForTx.test.ts

@@ -0,0 +1,705 @@
+import 'jest'
+import { getConfirmationsForTx } from '../getConfirmationsForTx'
+import * as helpers from '../validatorConfirmationHelpers'
+import Web3 from 'web3'
+import { Contract } from 'web3-eth-contract'
+import { APIPendingTransaction, APITransaction } from '../explorer'
+import { VALIDATOR_CONFIRMATION_STATUS } from '../../config/constants'
+import { BasicConfirmationParam } from '../../hooks/useMessageConfirmations'
+
+jest.mock('../validatorConfirmationHelpers')
+
+const getValidatorSuccessTransaction = helpers.getValidatorSuccessTransaction as jest.Mock<any>
+const getValidatorConfirmation = helpers.getValidatorConfirmation as jest.Mock<any>
+const getValidatorFailedTransaction = helpers.getValidatorFailedTransaction as jest.Mock<any>
+const getValidatorPendingTransaction = helpers.getValidatorPendingTransaction as jest.Mock<any>
+
+const messageData = '0x111111111'
+const web3 = {
+  utils: {
+    soliditySha3Raw: (data: string) => `0xaaaa${data.replace('0x', '')}`
+  }
+} as Web3
+const validator1 = '0x45b96809336A8b714BFbdAB3E4B5e0fe5d839908'
+const validator2 = '0xAe8bFfc8BBc6AAa9E21ED1E4e4957fe798BEA25f'
+const validator3 = '0x285A6eB779be4db94dA65e2F3518B1c5F0f71244'
+const validatorList = [validator1, validator2, validator3]
+const bridgeContract = {} as Contract
+const confirmationContractMethod = () => {}
+const requiredSignatures = 2
+const waitingBlocksResolved = true
+let subscriptions: Array<number> = []
+const timestamp = 1594045859
+const getFailedTransactions = (): Promise<APITransaction[]> => Promise.resolve([])
+const getPendingTransactions = (): Promise<APIPendingTransaction[]> => Promise.resolve([])
+const getSuccessTransactions = (): Promise<APITransaction[]> => Promise.resolve([])
+
+const unsubscribe = () => {
+  subscriptions.forEach(s => {
+    clearTimeout(s)
+  })
+}
+
+beforeEach(() => {
+  // Clear all instances and calls to constructor and all methods:
+  getValidatorSuccessTransaction.mockClear()
+  getValidatorConfirmation.mockClear()
+  getValidatorFailedTransaction.mockClear()
+  getValidatorPendingTransaction.mockClear()
+  subscriptions = []
+})
+describe('getConfirmationsForTx', () => {
+  test('should set validator confirmations status when signatures collected even if validator transactions not found yet and set remaining validator as not required', async () => {
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status: validator !== validator3 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: '',
+      timestamp: 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(1)
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(true)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(0)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED }
+      ])
+    )
+  })
+  test('should set validator confirmations status when signatures not collected even if validator transactions not found yet', async () => {
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status: validator === validator3 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: '',
+      timestamp: 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(1)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(false)
+  })
+  test('should set validator confirmations status, validator transactions and not retry', async () => {
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status: validator !== validator3 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: validatorData.validator !== validator3 ? '0x123' : '',
+      timestamp: validatorData.validator !== validator3 ? 123 : 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(0)
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(true)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(0)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED }
+      ])
+    )
+  })
+  test('should set validator confirmations status, validator transactions, keep failed found transaction and not retry', async () => {
+    const validator4 = '0x9d2dC11C342F4eF3C5491A048D0f0eBCd2D8f7C3'
+    const validatorList = [validator1, validator2, validator3, validator4]
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status:
+        validator !== validator3 && validator !== validator4
+          ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: validatorData.validator !== validator3 && validatorData.validator !== validator4 ? '0x123' : '',
+      timestamp: validatorData.validator !== validator3 && validatorData.validator !== validator4 ? 123 : 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status:
+        validatorData.validator === validator3
+          ? VALIDATOR_CONFIRMATION_STATUS.FAILED
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: validatorData.validator === validator3 ? '0x123' : '',
+      timestamp: validatorData.validator === validator3 ? 123 : 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(0)
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(true)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(0)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator4, status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator4, status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED }
+      ])
+    )
+  })
+  test('should look for failed and pending transactions for not confirmed validators', async () => {
+    // Validator1 success
+    // Validator2 failed
+    // Validator3 Pending
+
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status: validator === validator1 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: validatorData.validator === validator1 ? '0x123' : '',
+      timestamp: validatorData.validator === validator1 ? 123 : 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status:
+        validatorData.validator === validator2
+          ? VALIDATOR_CONFIRMATION_STATUS.FAILED
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: validatorData.validator === validator2 ? '0x123' : '',
+      timestamp: validatorData.validator === validator2 ? 123 : 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status:
+        validatorData.validator === validator3
+          ? VALIDATOR_CONFIRMATION_STATUS.PENDING
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: validatorData.validator === validator3 ? '0x123' : '',
+      timestamp: validatorData.validator === validator3 ? 123 : 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(1)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(true)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.PENDING, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.PENDING, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+  })
+  test('should set as failed if enough signatures failed', async () => {
+    // Validator1 success
+    // Validator2 failed
+    // Validator3 failed
+
+    getValidatorConfirmation.mockImplementation(() => async (validator: string) => ({
+      validator,
+      status: validator === validator1 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+    }))
+    getValidatorSuccessTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash: validatorData.validator === validator1 ? '0x123' : '',
+      timestamp: validatorData.validator === validator1 ? 123 : 0
+    }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status:
+        validatorData.validator !== validator1
+          ? VALIDATOR_CONFIRMATION_STATUS.FAILED
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: validatorData.validator !== validator1 ? '0x123' : '',
+      timestamp: validatorData.validator !== validator1 ? 123 : 0
+    }))
+    getValidatorPendingTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: '',
+      timestamp: 0
+    }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(0)
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(true)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(1)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+  })
+  test('should remove pending state after transaction mined', async () => {
+    // Validator1 success
+    // Validator2 failed
+    // Validator3 Pending
+
+    getValidatorConfirmation
+      .mockImplementationOnce(() => async (validator: string) => ({
+        validator,
+        status:
+          validator === validator1 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+      }))
+      .mockImplementation(() => async (validator: string) => ({
+        validator,
+        status:
+          validator !== validator2 ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+      }))
+    getValidatorSuccessTransaction
+      .mockImplementationOnce(() => async (validatorData: BasicConfirmationParam) => ({
+        validator: validatorData.validator,
+        status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+        txHash: validatorData.validator === validator1 ? '0x123' : '',
+        timestamp: validatorData.validator === validator1 ? 123 : 0
+      }))
+      .mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+        validator: validatorData.validator,
+        status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+        txHash: validatorData.validator !== validator2 ? '0x123' : '',
+        timestamp: validatorData.validator !== validator2 ? 123 : 0
+      }))
+    getValidatorFailedTransaction.mockImplementation(() => async (validatorData: BasicConfirmationParam) => ({
+      validator: validatorData.validator,
+      status:
+        validatorData.validator === validator2
+          ? VALIDATOR_CONFIRMATION_STATUS.FAILED
+          : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      txHash: validatorData.validator === validator2 ? '0x123' : '',
+      timestamp: validatorData.validator === validator2 ? 123 : 0
+    }))
+    getValidatorPendingTransaction
+      .mockImplementationOnce(() => async (validatorData: BasicConfirmationParam) => ({
+        validator: validatorData.validator,
+        status:
+          validatorData.validator === validator3
+            ? VALIDATOR_CONFIRMATION_STATUS.PENDING
+            : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+        txHash: validatorData.validator === validator3 ? '0x123' : '',
+        timestamp: validatorData.validator === validator3 ? 123 : 0
+      }))
+      .mockImplementationOnce(() => async (validatorData: BasicConfirmationParam) => ({
+        validator: validatorData.validator,
+        status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+        txHash: '',
+        timestamp: 0
+      }))
+
+    const setResult = jest.fn()
+    const setSignatureCollected = jest.fn()
+    const setFailedConfirmations = jest.fn()
+    const setPendingConfirmations = jest.fn()
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(setResult).toBeCalledTimes(2)
+    expect(getValidatorConfirmation).toBeCalledTimes(1)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(1)
+    expect(setSignatureCollected).toBeCalledTimes(1)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(1)
+    expect(setFailedConfirmations).toBeCalledTimes(1)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(1)
+    expect(setPendingConfirmations).toBeCalledTimes(1)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(true)
+
+    expect(setResult.mock.calls[0][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.PENDING, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+    expect(setResult.mock.calls[1][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.PENDING, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+
+    await getConfirmationsForTx(
+      messageData,
+      web3,
+      validatorList,
+      bridgeContract,
+      confirmationContractMethod,
+      setResult,
+      requiredSignatures,
+      setSignatureCollected,
+      waitingBlocksResolved,
+      subscriptions,
+      timestamp,
+      getFailedTransactions,
+      setFailedConfirmations,
+      getPendingTransactions,
+      setPendingConfirmations,
+      getSuccessTransactions
+    )
+
+    unsubscribe()
+
+    expect(setResult).toBeCalledTimes(4)
+    expect(getValidatorConfirmation).toBeCalledTimes(2)
+    expect(getValidatorSuccessTransaction).toBeCalledTimes(2)
+    expect(setSignatureCollected).toBeCalledTimes(2)
+    expect(setSignatureCollected.mock.calls[0][0]).toEqual(false)
+    expect(setSignatureCollected.mock.calls[1][0]).toEqual(true)
+
+    expect(getValidatorFailedTransaction).toBeCalledTimes(2)
+    expect(setFailedConfirmations).toBeCalledTimes(2)
+    expect(setFailedConfirmations.mock.calls[0][0]).toEqual(false)
+    expect(setFailedConfirmations.mock.calls[1][0]).toEqual(false)
+
+    expect(getValidatorPendingTransaction).toBeCalledTimes(1)
+    expect(setPendingConfirmations).toBeCalledTimes(2)
+    expect(setPendingConfirmations.mock.calls[0][0]).toEqual(true)
+    expect(setPendingConfirmations.mock.calls[1][0]).toEqual(false)
+
+    expect(setResult.mock.calls[2][0]()).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS }
+      ])
+    )
+    expect(setResult.mock.calls[3][0]).toEqual(
+      expect.arrayContaining([
+        { validator: validator1, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 },
+        { validator: validator2, status: VALIDATOR_CONFIRMATION_STATUS.FAILED, txHash: '0x123', timestamp: 123 },
+        { validator: validator3, status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS, txHash: '0x123', timestamp: 123 }
+      ])
+    )
+  })
+})

alm/src/utils/__tests__/getFinalizationEvent.test.ts

@@ -0,0 +1,303 @@
+import 'jest'
+import { Contract, EventData } from 'web3-eth-contract'
+import Web3 from 'web3'
+import { getFinalizationEvent } from '../getFinalizationEvent'
+import { VALIDATOR_CONFIRMATION_STATUS } from '../../config/constants'
+
+const eventName = 'RelayedMessage'
+const timestamp = 1594045859
+const validator1 = '0x45b96809336A8b714BFbdAB3E4B5e0fe5d839908'
+const txHash = '0xdab36c9210e7e45fb82af10ffe4960461e41661dce0c9cd36b2843adaa1df156'
+
+const web3 = ({
+  eth: {
+    getTransactionReceipt: () => ({
+      from: validator1
+    }),
+    getBlock: () => ({ timestamp })
+  },
+  utils: {
+    toChecksumAddress: (a: string) => a
+  }
+} as unknown) as Web3
+const waitingBlocksResolved = true
+const message = {
+  id: '0x123',
+  data: '0x123456789'
+}
+const interval = 10000
+let subscriptions: Array<number> = []
+
+const event = {
+  transactionHash: txHash,
+  blockNumber: 5523145,
+  returnValues: {
+    status: true
+  }
+}
+
+const bridgeAddress = '0xFe446bEF1DbF7AFE24E81e05BC8B271C1BA9a560'
+
+const unsubscribe = () => {
+  subscriptions.forEach(s => {
+    clearTimeout(s)
+  })
+}
+
+beforeEach(() => {
+  subscriptions = []
+})
+describe('getFinalizationEvent', () => {
+  test('should get finalization event and not try to get failed or pending transactions', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return [event]
+      }
+    } as unknown) as Contract
+
+    const collectedSignaturesEvent = null
+    const setResult = jest.fn()
+    const getFailedExecution = jest.fn()
+    const setFailedExecution = jest.fn()
+    const getPendingExecution = jest.fn()
+    const setPendingExecution = jest.fn()
+
+    await getFinalizationEvent(
+      contract,
+      eventName,
+      web3,
+      setResult,
+      waitingBlocksResolved,
+      message,
+      interval,
+      subscriptions,
+      timestamp,
+      collectedSignaturesEvent,
+      getFailedExecution,
+      setFailedExecution,
+      getPendingExecution,
+      setPendingExecution
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(0)
+    expect(setResult).toBeCalledTimes(1)
+    expect(setResult.mock.calls[0][0]).toEqual({
+      validator: validator1,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      txHash,
+      timestamp,
+      executionResult: true
+    })
+
+    expect(getFailedExecution).toBeCalledTimes(0)
+    expect(setFailedExecution).toBeCalledTimes(0)
+
+    expect(getPendingExecution).toBeCalledTimes(0)
+    expect(setPendingExecution).toBeCalledTimes(0)
+  })
+  test('should retry to get finalization event and not try to get failed or pending transactions if foreign to home transaction', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return []
+      }
+    } as unknown) as Contract
+
+    const collectedSignaturesEvent = null
+    const setResult = jest.fn()
+    const getFailedExecution = jest.fn()
+    const setFailedExecution = jest.fn()
+    const getPendingExecution = jest.fn()
+    const setPendingExecution = jest.fn()
+
+    await getFinalizationEvent(
+      contract,
+      eventName,
+      web3,
+      setResult,
+      waitingBlocksResolved,
+      message,
+      interval,
+      subscriptions,
+      timestamp,
+      collectedSignaturesEvent,
+      getFailedExecution,
+      setFailedExecution,
+      getPendingExecution,
+      setPendingExecution
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(1)
+    expect(setResult).toBeCalledTimes(0)
+
+    expect(getFailedExecution).toBeCalledTimes(0)
+    expect(setFailedExecution).toBeCalledTimes(0)
+
+    expect(getPendingExecution).toBeCalledTimes(0)
+    expect(setPendingExecution).toBeCalledTimes(0)
+  })
+  test('should retry to get finalization event and try to get failed and pending transactions if home to foreign transaction', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return []
+      },
+      options: {
+        address: bridgeAddress
+      }
+    } as unknown) as Contract
+
+    const collectedSignaturesEvent = ({
+      returnValues: {
+        authorityResponsibleForRelay: validator1
+      }
+    } as unknown) as EventData
+    const setResult = jest.fn()
+    const getFailedExecution = jest.fn().mockResolvedValue([])
+    const setFailedExecution = jest.fn()
+    const getPendingExecution = jest.fn().mockResolvedValue([])
+    const setPendingExecution = jest.fn()
+
+    await getFinalizationEvent(
+      contract,
+      eventName,
+      web3,
+      setResult,
+      waitingBlocksResolved,
+      message,
+      interval,
+      subscriptions,
+      timestamp,
+      collectedSignaturesEvent,
+      getFailedExecution,
+      setFailedExecution,
+      getPendingExecution,
+      setPendingExecution
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(1)
+    expect(setResult).toBeCalledTimes(0)
+
+    expect(getFailedExecution).toBeCalledTimes(1)
+    expect(setFailedExecution).toBeCalledTimes(0)
+
+    expect(getPendingExecution).toBeCalledTimes(1)
+    expect(setPendingExecution).toBeCalledTimes(0)
+  })
+  test('should retry to get finalization event and not to try to get failed transaction if pending transactions found if home to foreign transaction', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return []
+      },
+      options: {
+        address: bridgeAddress
+      }
+    } as unknown) as Contract
+
+    const collectedSignaturesEvent = ({
+      returnValues: {
+        authorityResponsibleForRelay: validator1
+      }
+    } as unknown) as EventData
+    const setResult = jest.fn()
+    const getFailedExecution = jest.fn().mockResolvedValue([])
+    const setFailedExecution = jest.fn()
+    const getPendingExecution = jest.fn().mockResolvedValue([{ hash: txHash }])
+    const setPendingExecution = jest.fn()
+
+    await getFinalizationEvent(
+      contract,
+      eventName,
+      web3,
+      setResult,
+      waitingBlocksResolved,
+      message,
+      interval,
+      subscriptions,
+      timestamp,
+      collectedSignaturesEvent,
+      getFailedExecution,
+      setFailedExecution,
+      getPendingExecution,
+      setPendingExecution
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(1)
+    expect(setResult).toBeCalledTimes(1)
+    expect(setResult.mock.calls[0][0]).toEqual({
+      validator: validator1,
+      status: VALIDATOR_CONFIRMATION_STATUS.PENDING,
+      txHash,
+      timestamp: expect.any(Number),
+      executionResult: false
+    })
+
+    expect(getFailedExecution).toBeCalledTimes(0)
+    expect(setFailedExecution).toBeCalledTimes(0)
+
+    expect(getPendingExecution).toBeCalledTimes(1)
+    expect(setPendingExecution).toBeCalledTimes(1)
+  })
+  test('should retry to get finalization event even if failed transaction found if home to foreign transaction', async () => {
+    const contract = ({
+      getPastEvents: () => {
+        return []
+      },
+      options: {
+        address: bridgeAddress
+      }
+    } as unknown) as Contract
+
+    const collectedSignaturesEvent = ({
+      returnValues: {
+        authorityResponsibleForRelay: validator1
+      }
+    } as unknown) as EventData
+    const setResult = jest.fn()
+    const getFailedExecution = jest.fn().mockResolvedValue([{ timeStamp: timestamp, hash: txHash }])
+    const setFailedExecution = jest.fn()
+    const getPendingExecution = jest.fn().mockResolvedValue([])
+    const setPendingExecution = jest.fn()
+
+    await getFinalizationEvent(
+      contract,
+      eventName,
+      web3,
+      setResult,
+      waitingBlocksResolved,
+      message,
+      interval,
+      subscriptions,
+      timestamp,
+      collectedSignaturesEvent,
+      getFailedExecution,
+      setFailedExecution,
+      getPendingExecution,
+      setPendingExecution
+    )
+
+    unsubscribe()
+
+    expect(subscriptions.length).toEqual(1)
+    expect(setResult).toBeCalledTimes(1)
+    expect(setResult.mock.calls[0][0]).toEqual({
+      validator: validator1,
+      status: VALIDATOR_CONFIRMATION_STATUS.FAILED,
+      txHash,
+      timestamp: expect.any(Number),
+      executionResult: false
+    })
+
+    expect(getFailedExecution).toBeCalledTimes(1)
+    expect(setFailedExecution).toBeCalledTimes(1)
+
+    expect(getPendingExecution).toBeCalledTimes(1)
+    expect(setPendingExecution).toBeCalledTimes(0)
+  })
+})

alm/src/utils/contract.ts

@@ -0,0 +1,101 @@
+import { Contract } from 'web3-eth-contract'
+import { EventData } from 'web3-eth-contract'
+import { SnapshotProvider } from '../services/SnapshotProvider'
+
+export const getRequiredBlockConfirmations = async (
+  contract: Contract,
+  blockNumber: number,
+  snapshotProvider: SnapshotProvider
+) => {
+  const eventsFromSnapshot = snapshotProvider.requiredBlockConfirmationEvents(blockNumber)
+  const snapshotBlockNumber = snapshotProvider.snapshotBlockNumber()
+
+  let contractEvents: EventData[] = []
+  if (blockNumber > snapshotBlockNumber) {
+    contractEvents = await contract.getPastEvents('RequiredBlockConfirmationChanged', {
+      fromBlock: snapshotBlockNumber + 1,
+      toBlock: blockNumber
+    })
+  }
+
+  const events = [...eventsFromSnapshot, ...contractEvents]
+
+  let blockConfirmations
+  if (events.length > 0) {
+    // Use the value from last event before the transaction
+    const event = events[events.length - 1]
+    blockConfirmations = event.returnValues.requiredBlockConfirmations
+  } else {
+    // This is a special case where RequiredBlockConfirmationChanged was not emitted during initialization in early versions of AMB
+    // of Sokol - Kovan. In this case the current value is used.
+    blockConfirmations = await contract.methods.requiredBlockConfirmations().call()
+  }
+  return parseInt(blockConfirmations)
+}
+
+export const getValidatorAddress = (contract: Contract) => contract.methods.validatorContract().call()
+
+export const getRequiredSignatures = async (
+  contract: Contract,
+  blockNumber: number,
+  snapshotProvider: SnapshotProvider
+) => {
+  const eventsFromSnapshot = snapshotProvider.requiredSignaturesEvents(blockNumber)
+  const snapshotBlockNumber = snapshotProvider.snapshotBlockNumber()
+
+  let contractEvents: EventData[] = []
+  if (blockNumber > snapshotBlockNumber) {
+    contractEvents = await contract.getPastEvents('RequiredSignaturesChanged', {
+      fromBlock: snapshotBlockNumber + 1,
+      toBlock: blockNumber
+    })
+  }
+
+  const events = [...eventsFromSnapshot, ...contractEvents]
+
+  // Use the value form last event before the transaction
+  const event = events[events.length - 1]
+  const { requiredSignatures } = event.returnValues
+  return parseInt(requiredSignatures)
+}
+
+export const getValidatorList = async (contract: Contract, blockNumber: number, snapshotProvider: SnapshotProvider) => {
+  const addedEventsFromSnapshot = snapshotProvider.validatorAddedEvents(blockNumber)
+  const removedEventsFromSnapshot = snapshotProvider.validatorRemovedEvents(blockNumber)
+  const snapshotBlockNumber = snapshotProvider.snapshotBlockNumber()
+
+  const fromBlock = snapshotBlockNumber > blockNumber ? snapshotBlockNumber + 1 : blockNumber
+  const [currentList, added, removed] = await Promise.all([
+    contract.methods.validatorList().call(),
+    contract.getPastEvents('ValidatorAdded', {
+      fromBlock
+    }),
+    contract.getPastEvents('ValidatorRemoved', {
+      fromBlock
+    })
+  ])
+
+  // Ordered desc
+  const orderedEvents = [...addedEventsFromSnapshot, ...added, ...removedEventsFromSnapshot, ...removed].sort(
+    ({ blockNumber: prev }, { blockNumber: next }) => next - prev
+  )
+
+  // Stored as a Set to avoid duplicates
+  const validatorList = new Set(currentList)
+
+  orderedEvents.forEach(e => {
+    const { validator } = e.returnValues
+    if (e.event === 'ValidatorRemoved') {
+      validatorList.add(validator)
+    } else if (e.event === 'ValidatorAdded') {
+      validatorList.delete(validator)
+    }
+  })
+
+  return Array.from(validatorList)
+}
+
+export const getMessagesSigned = (contract: Contract, hash: string) => contract.methods.messagesSigned(hash).call()
+
+export const getAffirmationsSigned = (contract: Contract, hash: string) =>
+  contract.methods.affirmationsSigned(hash).call()

alm/src/utils/executionWaitingForBlocks.ts

@@ -0,0 +1,58 @@
+import { BlockNumberProvider } from '../services/BlockNumberProvider'
+import { VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import { EventData } from 'web3-eth-contract'
+
+export const checkWaitingBlocksForExecution = async (
+  blockProvider: BlockNumberProvider,
+  interval: number,
+  targetBlock: number,
+  collectedSignaturesEvent: EventData,
+  setWaitingBlocksForExecution: Function,
+  setWaitingBlocksForExecutionResolved: Function,
+  setExecutionData: Function,
+  subscriptions: number[]
+) => {
+  const currentBlock = blockProvider.get()
+
+  if (currentBlock && currentBlock >= targetBlock) {
+    setExecutionData({
+      status: VALIDATOR_CONFIRMATION_STATUS.UNDEFINED,
+      validator: collectedSignaturesEvent.returnValues.authorityResponsibleForRelay,
+      txHash: '',
+      timestamp: 0,
+      executionResult: false
+    })
+    setWaitingBlocksForExecutionResolved(true)
+    setWaitingBlocksForExecution(false)
+    blockProvider.stop()
+  } else {
+    let nextInterval = interval
+    if (!currentBlock) {
+      nextInterval = 500
+    } else {
+      setWaitingBlocksForExecution(true)
+      setExecutionData({
+        status: VALIDATOR_CONFIRMATION_STATUS.WAITING,
+        validator: collectedSignaturesEvent.returnValues.authorityResponsibleForRelay,
+        txHash: '',
+        timestamp: 0,
+        executionResult: false
+      })
+    }
+    const timeoutId = setTimeout(
+      () =>
+        checkWaitingBlocksForExecution(
+          blockProvider,
+          interval,
+          targetBlock,
+          collectedSignaturesEvent,
+          setWaitingBlocksForExecution,
+          setWaitingBlocksForExecutionResolved,
+          setExecutionData,
+          subscriptions
+        ),
+      nextInterval
+    )
+    subscriptions.push(timeoutId)
+  }
+}

alm/src/utils/explorer.ts

@@ -0,0 +1,275 @@
+import {
+  EXECUTE_AFFIRMATION_HASH,
+  EXECUTE_SIGNATURES_HASH,
+  FOREIGN_EXPLORER_API,
+  HOME_EXPLORER_API,
+  SUBMIT_SIGNATURE_HASH
+} from '../config/constants'
+
+export interface APITransaction {
+  timeStamp: string
+  isError: string
+  input: string
+  to: string
+  hash: string
+}
+
+export interface APIPendingTransaction {
+  input: string
+  to: string
+  hash: string
+}
+
+export interface PendingTransactionsParams {
+  account: string
+  api: string
+}
+
+export interface AccountTransactionsParams {
+  account: string
+  to: string
+  startTimestamp: number
+  endTimestamp: number
+  api: string
+}
+
+export interface GetFailedTransactionParams {
+  account: string
+  to: string
+  messageData: string
+  startTimestamp: number
+  endTimestamp: number
+}
+
+export interface GetPendingTransactionParams {
+  account: string
+  to: string
+  messageData: string
+}
+
+export const fetchAccountTransactionsFromBlockscout = async ({
+  account,
+  to,
+  startTimestamp,
+  endTimestamp,
+  api
+}: AccountTransactionsParams): Promise<APITransaction[]> => {
+  const url = `${api}?module=account&action=txlist&address=${account}&filterby=from=${account}&to=${to}&starttimestamp=${startTimestamp}&endtimestamp=${endTimestamp}`
+
+  try {
+    const result = await fetch(url).then(res => res.json())
+    if (result.status === '0') {
+      return []
+    }
+
+    return result.result
+  } catch (e) {
+    console.log(e)
+    return []
+  }
+}
+
+export const getBlockByTimestampUrl = (api: string, timestamp: number) =>
+  `${api}&module=block&action=getblocknobytime&timestamp=${timestamp}&closest=before`
+
+export const fetchAccountTransactionsFromEtherscan = async ({
+  account,
+  to,
+  startTimestamp,
+  endTimestamp,
+  api
+}: AccountTransactionsParams): Promise<APITransaction[]> => {
+  const startBlockUrl = getBlockByTimestampUrl(api, startTimestamp)
+  const endBlockUrl = getBlockByTimestampUrl(api, endTimestamp)
+  let fromBlock = 0
+  let toBlock = 9999999999999
+  try {
+    const [fromBlockResult, toBlockResult] = await Promise.all([
+      fetch(startBlockUrl).then(res => res.json()),
+      fetch(endBlockUrl).then(res => res.json())
+    ])
+
+    if (fromBlockResult.status !== '0') {
+      fromBlock = parseInt(fromBlockResult.result)
+    }
+
+    if (toBlockResult.status !== '0') {
+      toBlock = parseInt(toBlockResult.result)
+    }
+  } catch (e) {
+    console.log(e)
+    return []
+  }
+
+  const url = `${api}&module=account&action=txlist&address=${account}&startblock=${fromBlock}&endblock=${toBlock}`
+
+  try {
+    const result = await fetch(url).then(res => res.json())
+
+    if (result.status === '0') {
+      return []
+    }
+
+    const toAddressLowerCase = to.toLowerCase()
+    const transactions: APITransaction[] = result.result
+    return transactions.filter(t => t.to.toLowerCase() === toAddressLowerCase)
+  } catch (e) {
+    console.log(e)
+    return []
+  }
+}
+
+export const fetchAccountTransactions = (api: string) => {
+  return api.includes('blockscout') ? fetchAccountTransactionsFromBlockscout : fetchAccountTransactionsFromEtherscan
+}
+
+export const fetchPendingTransactions = async ({
+  account,
+  api
+}: PendingTransactionsParams): Promise<APIPendingTransaction[]> => {
+  const url = `${api}?module=account&action=pendingtxlist&address=${account}`
+
+  try {
+    const result = await fetch(url).then(res => res.json())
+    if (result.status === '0') {
+      return []
+    }
+
+    return result.result
+  } catch (e) {
+    return []
+  }
+}
+
+export const getFailedTransactions = async (
+  account: string,
+  to: string,
+  startTimestamp: number,
+  endTimestamp: number,
+  api: string,
+  fetchAccountTransactions: (args: AccountTransactionsParams) => Promise<APITransaction[]>
+): Promise<APITransaction[]> => {
+  const transactions = await fetchAccountTransactions({ account, to, startTimestamp, endTimestamp, api })
+
+  return transactions.filter(t => t.isError !== '0')
+}
+
+export const getSuccessTransactions = async (
+  account: string,
+  to: string,
+  startTimestamp: number,
+  endTimestamp: number,
+  api: string,
+  fetchAccountTransactions: (args: AccountTransactionsParams) => Promise<APITransaction[]>
+): Promise<APITransaction[]> => {
+  const transactions = await fetchAccountTransactions({ account, to, startTimestamp, endTimestamp, api })
+
+  return transactions.filter(t => t.isError === '0')
+}
+
+export const filterValidatorSignatureTransaction = (
+  transactions: APITransaction[],
+  messageData: string
+): APITransaction[] => {
+  const messageDataValue = messageData.replace('0x', '')
+  return transactions.filter(
+    t =>
+      (t.input.includes(SUBMIT_SIGNATURE_HASH) || t.input.includes(EXECUTE_AFFIRMATION_HASH)) &&
+      t.input.includes(messageDataValue)
+  )
+}
+
+export const getValidatorFailedTransactionsForMessage = async ({
+  account,
+  to,
+  messageData,
+  startTimestamp,
+  endTimestamp
+}: GetFailedTransactionParams): Promise<APITransaction[]> => {
+  const failedTransactions = await getFailedTransactions(
+    account,
+    to,
+    startTimestamp,
+    endTimestamp,
+    HOME_EXPLORER_API,
+    fetchAccountTransactionsFromBlockscout
+  )
+
+  return filterValidatorSignatureTransaction(failedTransactions, messageData)
+}
+
+export const getValidatorSuccessTransactionsForMessage = async ({
+  account,
+  to,
+  messageData,
+  startTimestamp,
+  endTimestamp
+}: GetFailedTransactionParams): Promise<APITransaction[]> => {
+  const transactions = await getSuccessTransactions(
+    account,
+    to,
+    startTimestamp,
+    endTimestamp,
+    HOME_EXPLORER_API,
+    fetchAccountTransactionsFromBlockscout
+  )
+
+  return filterValidatorSignatureTransaction(transactions, messageData)
+}
+
+export const getExecutionFailedTransactionForMessage = async (
+  { account, to, messageData, startTimestamp, endTimestamp }: GetFailedTransactionParams,
+  getFailedTransactionsMethod = getFailedTransactions
+): Promise<APITransaction[]> => {
+  const failedTransactions = await getFailedTransactionsMethod(
+    account,
+    to,
+    startTimestamp,
+    endTimestamp,
+    FOREIGN_EXPLORER_API,
+    fetchAccountTransactions(FOREIGN_EXPLORER_API)
+  )
+
+  const messageDataValue = messageData.replace('0x', '')
+  return failedTransactions.filter(t => t.input.includes(EXECUTE_SIGNATURES_HASH) && t.input.includes(messageDataValue))
+}
+
+export const getValidatorPendingTransactionsForMessage = async (
+  { account, to, messageData }: GetPendingTransactionParams,
+  fetchPendingTransactionsMethod = fetchPendingTransactions
+): Promise<APIPendingTransaction[]> => {
+  const pendingTransactions = await fetchPendingTransactionsMethod({
+    account,
+    api: HOME_EXPLORER_API
+  })
+
+  const toAddressLowerCase = to.toLowerCase()
+  const messageDataValue = messageData.replace('0x', '')
+
+  return pendingTransactions.filter(
+    t =>
+      t.to.toLowerCase() === toAddressLowerCase &&
+      (t.input.includes(SUBMIT_SIGNATURE_HASH) || t.input.includes(EXECUTE_AFFIRMATION_HASH)) &&
+      t.input.includes(messageDataValue)
+  )
+}
+
+export const getExecutionPendingTransactionsForMessage = async (
+  { account, to, messageData }: GetPendingTransactionParams,
+  fetchPendingTransactionsMethod = fetchPendingTransactions
+): Promise<APIPendingTransaction[]> => {
+  const pendingTransactions = await fetchPendingTransactionsMethod({
+    account,
+    api: FOREIGN_EXPLORER_API
+  })
+
+  const toAddressLowerCase = to.toLowerCase()
+  const messageDataValue = messageData.replace('0x', '')
+
+  return pendingTransactions.filter(
+    t =>
+      t.to.toLowerCase() === toAddressLowerCase &&
+      t.input.includes(EXECUTE_SIGNATURES_HASH) &&
+      t.input.includes(messageDataValue)
+  )
+}

alm/src/utils/getCollectedSignaturesEvent.ts

@@ -0,0 +1,53 @@
+import Web3 from 'web3'
+import { Contract, EventData } from 'web3-eth-contract'
+import { homeBlockNumberProvider } from '../services/BlockNumberProvider'
+import { BLOCK_RANGE } from '../config/constants'
+
+export const getCollectedSignaturesEvent = async (
+  web3: Maybe<Web3>,
+  contract: Maybe<Contract>,
+  fromBlock: number,
+  toBlock: number,
+  messageHash: string,
+  setCollectedSignaturesEvent: Function,
+  subscriptions: number[]
+) => {
+  if (!web3 || !contract) return
+  const currentBlock = homeBlockNumberProvider.get()
+
+  let events: EventData[] = []
+  let securedToBlock = toBlock
+  if (currentBlock) {
+    // prevent errors if the toBlock parameter is bigger than the latest
+    securedToBlock = toBlock >= currentBlock ? currentBlock : toBlock
+    events = await contract.getPastEvents('CollectedSignatures', {
+      fromBlock,
+      toBlock: securedToBlock
+    })
+  }
+
+  const filteredEvents = events.filter(e => e.returnValues.messageHash === messageHash)
+
+  if (filteredEvents.length) {
+    const event = filteredEvents[0]
+    setCollectedSignaturesEvent(event)
+    homeBlockNumberProvider.stop()
+  } else {
+    const newFromBlock = currentBlock ? securedToBlock : fromBlock
+    const newToBlock = currentBlock ? toBlock + BLOCK_RANGE : toBlock
+    const timeoutId = setTimeout(
+      () =>
+        getCollectedSignaturesEvent(
+          web3,
+          contract,
+          newFromBlock,
+          newToBlock,
+          messageHash,
+          setCollectedSignaturesEvent,
+          subscriptions
+        ),
+      500
+    )
+    subscriptions.push(timeoutId)
+  }
+}

alm/src/utils/getConfirmationsForTx.ts

@@ -0,0 +1,182 @@
+import Web3 from 'web3'
+import { Contract } from 'web3-eth-contract'
+import { HOME_RPC_POLLING_INTERVAL, VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import {
+  GetFailedTransactionParams,
+  APITransaction,
+  APIPendingTransaction,
+  GetPendingTransactionParams
+} from './explorer'
+import {
+  getValidatorConfirmation,
+  getValidatorFailedTransaction,
+  getValidatorPendingTransaction,
+  getValidatorSuccessTransaction
+} from './validatorConfirmationHelpers'
+import { ConfirmationParam } from '../hooks/useMessageConfirmations'
+
+export const getConfirmationsForTx = async (
+  messageData: string,
+  web3: Maybe<Web3>,
+  validatorList: string[],
+  bridgeContract: Maybe<Contract>,
+  confirmationContractMethod: Function,
+  setResult: Function,
+  requiredSignatures: number,
+  setSignatureCollected: Function,
+  waitingBlocksResolved: boolean,
+  subscriptions: number[],
+  timestamp: number,
+  getFailedTransactions: (args: GetFailedTransactionParams) => Promise<APITransaction[]>,
+  setFailedConfirmations: Function,
+  getPendingTransactions: (args: GetPendingTransactionParams) => Promise<APIPendingTransaction[]>,
+  setPendingConfirmations: Function,
+  getSuccessTransactions: (args: GetFailedTransactionParams) => Promise<APITransaction[]>
+) => {
+  if (!web3 || !validatorList || !validatorList.length || !bridgeContract || !waitingBlocksResolved) return
+
+  // If all the information was not collected, then it should retry
+  let shouldRetry = false
+  const hashMsg = web3.utils.soliditySha3Raw(messageData)
+  let validatorConfirmations = await Promise.all(
+    validatorList.map(getValidatorConfirmation(web3, hashMsg, bridgeContract, confirmationContractMethod))
+  )
+
+  const successConfirmations = validatorConfirmations.filter(c => c.status === VALIDATOR_CONFIRMATION_STATUS.SUCCESS)
+
+  setResult((prevConfirmations: ConfirmationParam[]) => {
+    if (prevConfirmations && prevConfirmations.length) {
+      successConfirmations.forEach(validatorData => {
+        const index = prevConfirmations.findIndex(e => e.validator === validatorData.validator)
+        validatorConfirmations[index] = validatorData
+      })
+      return prevConfirmations
+    } else {
+      return validatorConfirmations
+    }
+  })
+
+  const notSuccessConfirmations = validatorConfirmations.filter(c => c.status !== VALIDATOR_CONFIRMATION_STATUS.SUCCESS)
+
+  // If signatures not collected, look for pending transactions
+  let pendingConfirmationsResult = false
+  if (successConfirmations.length !== requiredSignatures) {
+    // Check if confirmation is pending
+    const validatorPendingConfirmationsChecks = await Promise.all(
+      notSuccessConfirmations.map(getValidatorPendingTransaction(bridgeContract, messageData, getPendingTransactions))
+    )
+    const validatorPendingConfirmations = validatorPendingConfirmationsChecks.filter(
+      c => c.status === VALIDATOR_CONFIRMATION_STATUS.PENDING
+    )
+
+    validatorPendingConfirmations.forEach(validatorData => {
+      const index = validatorConfirmations.findIndex(e => e.validator === validatorData.validator)
+      validatorConfirmations[index] = validatorData
+    })
+
+    if (validatorPendingConfirmations.length > 0) {
+      pendingConfirmationsResult = true
+    }
+  }
+
+  const undefinedConfirmations = validatorConfirmations.filter(
+    c => c.status === VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+  )
+
+  // Check if confirmation failed
+  let failedConfirmationsResult = false
+  const validatorFailedConfirmationsChecks = await Promise.all(
+    undefinedConfirmations.map(
+      getValidatorFailedTransaction(bridgeContract, messageData, timestamp, getFailedTransactions)
+    )
+  )
+  const validatorFailedConfirmations = validatorFailedConfirmationsChecks.filter(
+    c => c.status === VALIDATOR_CONFIRMATION_STATUS.FAILED
+  )
+  validatorFailedConfirmations.forEach(validatorData => {
+    const index = validatorConfirmations.findIndex(e => e.validator === validatorData.validator)
+    validatorConfirmations[index] = validatorData
+  })
+  const messageConfirmationsFailed = validatorFailedConfirmations.length > validatorList.length - requiredSignatures
+  if (messageConfirmationsFailed) {
+    failedConfirmationsResult = true
+  }
+
+  const missingConfirmations = validatorConfirmations.filter(
+    c => c.status === VALIDATOR_CONFIRMATION_STATUS.UNDEFINED || c.status === VALIDATOR_CONFIRMATION_STATUS.PENDING
+  )
+
+  if (successConfirmations.length !== requiredSignatures && missingConfirmations.length > 0) {
+    shouldRetry = true
+  }
+
+  let signatureCollectedResult = false
+  if (successConfirmations.length === requiredSignatures) {
+    // If signatures collected, it should set other signatures not found as not required
+    const notRequiredConfirmations = missingConfirmations.map(c => ({
+      validator: c.validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.NOT_REQUIRED
+    }))
+
+    notRequiredConfirmations.forEach(validatorData => {
+      const index = validatorConfirmations.findIndex(e => e.validator === validatorData.validator)
+      validatorConfirmations[index] = validatorData
+    })
+    signatureCollectedResult = true
+  }
+
+  // get transactions from success signatures
+  const successConfirmationWithData = await Promise.all(
+    validatorConfirmations
+      .filter(c => c.status === VALIDATOR_CONFIRMATION_STATUS.SUCCESS)
+      .map(getValidatorSuccessTransaction(bridgeContract, messageData, timestamp, getSuccessTransactions))
+  )
+
+  const successConfirmationWithTxFound = successConfirmationWithData.filter(v => v.txHash !== '')
+
+  const updatedValidatorConfirmations = [...validatorConfirmations]
+
+  if (successConfirmationWithTxFound.length > 0) {
+    successConfirmationWithTxFound.forEach(validatorData => {
+      const index = updatedValidatorConfirmations.findIndex(e => e.validator === validatorData.validator)
+      updatedValidatorConfirmations[index] = validatorData
+    })
+  }
+
+  // Set results
+  setResult(updatedValidatorConfirmations)
+  setFailedConfirmations(failedConfirmationsResult)
+  setPendingConfirmations(pendingConfirmationsResult)
+  setSignatureCollected(signatureCollectedResult)
+
+  // Retry if not all transaction were found for validator confirmations
+  if (successConfirmationWithTxFound.length < successConfirmationWithData.length) {
+    shouldRetry = true
+  }
+
+  if (shouldRetry) {
+    const timeoutId = setTimeout(
+      () =>
+        getConfirmationsForTx(
+          messageData,
+          web3,
+          validatorList,
+          bridgeContract,
+          confirmationContractMethod,
+          setResult,
+          requiredSignatures,
+          setSignatureCollected,
+          waitingBlocksResolved,
+          subscriptions,
+          timestamp,
+          getFailedTransactions,
+          setFailedConfirmations,
+          getPendingTransactions,
+          setPendingConfirmations,
+          getSuccessTransactions
+        ),
+      HOME_RPC_POLLING_INTERVAL
+    )
+    subscriptions.push(timeoutId)
+  }
+}

alm/src/utils/getFinalizationEvent.ts

@@ -0,0 +1,137 @@
+import { Contract, EventData } from 'web3-eth-contract'
+import Web3 from 'web3'
+import { CACHE_KEY_EXECUTION_FAILED, THREE_DAYS_TIMESTAMP, VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import { ExecutionData } from '../hooks/useMessageConfirmations'
+import {
+  APIPendingTransaction,
+  APITransaction,
+  GetFailedTransactionParams,
+  GetPendingTransactionParams
+} from './explorer'
+import { getBlock, MessageObject } from './web3'
+import validatorsCache from '../services/ValidatorsCache'
+
+export const getFinalizationEvent = async (
+  contract: Maybe<Contract>,
+  eventName: string,
+  web3: Maybe<Web3>,
+  setResult: React.Dispatch<React.SetStateAction<ExecutionData>>,
+  waitingBlocksResolved: boolean,
+  message: MessageObject,
+  interval: number,
+  subscriptions: number[],
+  timestamp: number,
+  collectedSignaturesEvent: Maybe<EventData>,
+  getFailedExecution: (args: GetFailedTransactionParams) => Promise<APITransaction[]>,
+  setFailedExecution: Function,
+  getPendingExecution: (args: GetPendingTransactionParams) => Promise<APIPendingTransaction[]>,
+  setPendingExecution: Function
+) => {
+  if (!contract || !web3 || !waitingBlocksResolved) return
+  // Since it filters by the message id, only one event will be fetched
+  // so there is no need to limit the range of the block to reduce the network traffic
+  const events: EventData[] = await contract.getPastEvents(eventName, {
+    fromBlock: 0,
+    toBlock: 'latest',
+    filter: {
+      messageId: message.id
+    }
+  })
+  if (events.length > 0) {
+    const event = events[0]
+    const [txReceipt, block] = await Promise.all([
+      web3.eth.getTransactionReceipt(event.transactionHash),
+      getBlock(web3, event.blockNumber)
+    ])
+
+    const blockTimestamp = typeof block.timestamp === 'string' ? parseInt(block.timestamp) : block.timestamp
+    const validatorAddress = web3.utils.toChecksumAddress(txReceipt.from)
+
+    setResult({
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS,
+      validator: validatorAddress,
+      txHash: event.transactionHash,
+      timestamp: blockTimestamp,
+      executionResult: event.returnValues.status
+    })
+  } else {
+    // If event is defined, it means it is a message from Home to Foreign
+    if (collectedSignaturesEvent) {
+      const validator = collectedSignaturesEvent.returnValues.authorityResponsibleForRelay
+
+      const pendingTransactions = await getPendingExecution({
+        account: validator,
+        messageData: message.data,
+        to: contract.options.address
+      })
+
+      // If the transaction is pending it sets the status and avoid making the request for failed transactions
+      if (pendingTransactions.length > 0) {
+        const pendingTx = pendingTransactions[0]
+
+        const nowTimestamp = Math.floor(new Date().getTime() / 1000.0)
+
+        setResult({
+          status: VALIDATOR_CONFIRMATION_STATUS.PENDING,
+          validator: validator,
+          txHash: pendingTx.hash,
+          timestamp: nowTimestamp,
+          executionResult: false
+        })
+        setPendingExecution(true)
+      } else {
+        const validatorExecutionCacheKey = `${CACHE_KEY_EXECUTION_FAILED}${validator}-${message.id}`
+        const failedFromCache = validatorsCache.get(validatorExecutionCacheKey)
+
+        if (!failedFromCache) {
+          const failedTransactions = await getFailedExecution({
+            account: validator,
+            to: contract.options.address,
+            messageData: message.data,
+            startTimestamp: timestamp,
+            endTimestamp: timestamp + THREE_DAYS_TIMESTAMP
+          })
+
+          if (failedTransactions.length > 0) {
+            const failedTx = failedTransactions[0]
+
+            // If validator execution failed, we cache the result to avoid doing future requests for a result that won't change
+            validatorsCache.set(validatorExecutionCacheKey, true)
+
+            const timestamp = parseInt(failedTx.timeStamp)
+            setResult({
+              status: VALIDATOR_CONFIRMATION_STATUS.FAILED,
+              validator: validator,
+              txHash: failedTx.hash,
+              timestamp,
+              executionResult: false
+            })
+            setFailedExecution(true)
+          }
+        }
+      }
+    }
+
+    const timeoutId = setTimeout(
+      () =>
+        getFinalizationEvent(
+          contract,
+          eventName,
+          web3,
+          setResult,
+          waitingBlocksResolved,
+          message,
+          interval,
+          subscriptions,
+          timestamp,
+          collectedSignaturesEvent,
+          getFailedExecution,
+          setFailedExecution,
+          getPendingExecution,
+          setPendingExecution
+        ),
+      interval
+    )
+    subscriptions.push(timeoutId)
+  }
+}

alm/src/utils/networks.ts

@@ -0,0 +1,42 @@
+import { formatDistance } from 'date-fns'
+import {
+  CONFIRMATIONS_STATUS_DESCRIPTION,
+  CONFIRMATIONS_STATUS_DESCRIPTION_HOME,
+  TRANSACTION_STATUS_DESCRIPTION
+} from '../config/descriptions'
+import { FOREIGN_EXPLORER_TX_TEMPLATE, HOME_EXPLORER_TX_TEMPLATE } from '../config/constants'
+
+export const validTxHash = (txHash: string) => /^0x[a-fA-F0-9]{64}$/.test(txHash)
+
+export const formatTxHash = (txHash: string) => `${txHash.substring(0, 6)}...${txHash.substring(txHash.length - 4)}`
+
+export const getExplorerTxUrl = (txHash: string, isHome: boolean) => {
+  const template = isHome ? HOME_EXPLORER_TX_TEMPLATE : FOREIGN_EXPLORER_TX_TEMPLATE
+  return template.replace('%s', txHash)
+}
+
+export const formatTxHashExtended = (txHash: string) =>
+  `${txHash.substring(0, 10)}...${txHash.substring(txHash.length - 8)}`
+
+export const formatTimestamp = (timestamp: number): string => {
+  const txDate = new Date(0).setUTCSeconds(timestamp)
+  return formatDistance(txDate, new Date(), {
+    addSuffix: true
+  })
+}
+
+export const getTransactionStatusDescription = (status: string, timestamp: Maybe<number> = null) => {
+  let description = TRANSACTION_STATUS_DESCRIPTION[status]
+
+  if (timestamp) {
+    description = description.replace('%t', formatTimestamp(timestamp))
+  }
+
+  return description
+}
+
+export const getConfirmationsStatusDescription = (status: string, home: string, foreign: string, fromHome: boolean) => {
+  const statusDescription = fromHome ? CONFIRMATIONS_STATUS_DESCRIPTION_HOME : CONFIRMATIONS_STATUS_DESCRIPTION
+
+  return statusDescription[status]
+}

alm/src/utils/signatureWaitingForBlocks.ts

@@ -0,0 +1,50 @@
+import { VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import { BlockNumberProvider } from '../services/BlockNumberProvider'
+
+export const checkSignaturesWaitingForBLocks = async (
+  targetBlock: number,
+  setWaitingStatus: Function,
+  setWaitingBlocksResolved: Function,
+  validatorList: string[],
+  setConfirmations: Function,
+  blockProvider: BlockNumberProvider,
+  interval: number,
+  subscriptions: number[]
+) => {
+  const currentBlock = blockProvider.get()
+
+  if (currentBlock && currentBlock >= targetBlock) {
+    setWaitingBlocksResolved(true)
+    setWaitingStatus(false)
+    blockProvider.stop()
+  } else {
+    let nextInterval = interval
+    if (!currentBlock) {
+      nextInterval = 500
+    } else {
+      const validatorsWaiting = validatorList.map(validator => {
+        return {
+          validator,
+          status: VALIDATOR_CONFIRMATION_STATUS.WAITING
+        }
+      })
+      setWaitingStatus(true)
+      setConfirmations(validatorsWaiting)
+    }
+    const timeoutId = setTimeout(
+      () =>
+        checkSignaturesWaitingForBLocks(
+          targetBlock,
+          setWaitingStatus,
+          setWaitingBlocksResolved,
+          validatorList,
+          setConfirmations,
+          blockProvider,
+          interval,
+          subscriptions
+        ),
+      nextInterval
+    )
+    subscriptions.push(timeoutId)
+  }
+}

alm/src/utils/validatorConfirmationHelpers.ts

@@ -0,0 +1,172 @@
+import Web3 from 'web3'
+import { Contract } from 'web3-eth-contract'
+import { BasicConfirmationParam, ConfirmationParam } from '../hooks/useMessageConfirmations'
+import validatorsCache from '../services/ValidatorsCache'
+import {
+  CACHE_KEY_FAILED,
+  CACHE_KEY_SUCCESS,
+  ONE_DAY_TIMESTAMP,
+  VALIDATOR_CONFIRMATION_STATUS
+} from '../config/constants'
+import {
+  APIPendingTransaction,
+  APITransaction,
+  GetFailedTransactionParams,
+  GetPendingTransactionParams
+} from './explorer'
+
+export const getValidatorConfirmation = (
+  web3: Web3,
+  hashMsg: string,
+  bridgeContract: Contract,
+  confirmationContractMethod: Function
+) => async (validator: string): Promise<BasicConfirmationParam> => {
+  const hashSenderMsg = web3.utils.soliditySha3Raw(validator, hashMsg)
+
+  const signatureFromCache = validatorsCache.get(hashSenderMsg)
+  if (signatureFromCache) {
+    return {
+      validator,
+      status: VALIDATOR_CONFIRMATION_STATUS.SUCCESS
+    }
+  }
+
+  const confirmed = await confirmationContractMethod(bridgeContract, hashSenderMsg)
+  const status = confirmed ? VALIDATOR_CONFIRMATION_STATUS.SUCCESS : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+
+  // If validator confirmed signature, we cache the result to avoid doing future requests for a result that won't change
+  if (confirmed) {
+    validatorsCache.set(hashSenderMsg, confirmed)
+  }
+
+  return {
+    validator,
+    status
+  }
+}
+
+export const getValidatorSuccessTransaction = (
+  bridgeContract: Contract,
+  messageData: string,
+  timestamp: number,
+  getSuccessTransactions: (args: GetFailedTransactionParams) => Promise<APITransaction[]>
+) => async (validatorData: BasicConfirmationParam): Promise<ConfirmationParam> => {
+  const { validator } = validatorData
+  const validatorCacheKey = `${CACHE_KEY_SUCCESS}${validatorData.validator}-${messageData}`
+  const fromCache = validatorsCache.getData(validatorCacheKey)
+
+  if (fromCache && fromCache.txHash) {
+    return fromCache
+  }
+
+  const transactions = await getSuccessTransactions({
+    account: validatorData.validator,
+    to: bridgeContract.options.address,
+    messageData,
+    startTimestamp: timestamp,
+    endTimestamp: timestamp + ONE_DAY_TIMESTAMP
+  })
+
+  let txHashTimestamp = 0
+  let txHash = ''
+  const status = VALIDATOR_CONFIRMATION_STATUS.SUCCESS
+
+  if (transactions.length > 0) {
+    const tx = transactions[0]
+    txHashTimestamp = parseInt(tx.timeStamp)
+    txHash = tx.hash
+
+    // cache the result
+    validatorsCache.setData(validatorCacheKey, {
+      validator,
+      status,
+      txHash,
+      timestamp: txHashTimestamp
+    })
+  }
+
+  return {
+    validator,
+    status,
+    txHash,
+    timestamp: txHashTimestamp
+  }
+}
+
+export const getValidatorFailedTransaction = (
+  bridgeContract: Contract,
+  messageData: string,
+  timestamp: number,
+  getFailedTransactions: (args: GetFailedTransactionParams) => Promise<APITransaction[]>
+) => async (validatorData: BasicConfirmationParam): Promise<ConfirmationParam> => {
+  const validatorCacheKey = `${CACHE_KEY_FAILED}${validatorData.validator}-${messageData}`
+  const failedFromCache = validatorsCache.getData(validatorCacheKey)
+
+  if (failedFromCache && failedFromCache.txHash) {
+    return failedFromCache
+  }
+
+  const failedTransactions = await getFailedTransactions({
+    account: validatorData.validator,
+    to: bridgeContract.options.address,
+    messageData,
+    startTimestamp: timestamp,
+    endTimestamp: timestamp + ONE_DAY_TIMESTAMP
+  })
+  const newStatus =
+    failedTransactions.length > 0 ? VALIDATOR_CONFIRMATION_STATUS.FAILED : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+
+  let txHashTimestamp = 0
+  let txHash = ''
+  // If validator signature failed, we cache the result to avoid doing future requests for a result that won't change
+  if (failedTransactions.length > 0) {
+    const failedTx = failedTransactions[0]
+    txHashTimestamp = parseInt(failedTx.timeStamp)
+    txHash = failedTx.hash
+
+    validatorsCache.setData(validatorCacheKey, {
+      validator: validatorData.validator,
+      status: newStatus,
+      txHash,
+      timestamp: txHashTimestamp
+    })
+  }
+
+  return {
+    validator: validatorData.validator,
+    status: newStatus,
+    txHash,
+    timestamp: txHashTimestamp
+  }
+}
+
+export const getValidatorPendingTransaction = (
+  bridgeContract: Contract,
+  messageData: string,
+  getPendingTransactions: (args: GetPendingTransactionParams) => Promise<APIPendingTransaction[]>
+) => async (validatorData: BasicConfirmationParam): Promise<ConfirmationParam> => {
+  const failedTransactions = await getPendingTransactions({
+    account: validatorData.validator,
+    to: bridgeContract.options.address,
+    messageData
+  })
+
+  const newStatus =
+    failedTransactions.length > 0 ? VALIDATOR_CONFIRMATION_STATUS.PENDING : VALIDATOR_CONFIRMATION_STATUS.UNDEFINED
+
+  let timestamp = 0
+  let txHash = ''
+
+  if (failedTransactions.length > 0) {
+    const failedTx = failedTransactions[0]
+    timestamp = Math.floor(new Date().getTime() / 1000.0)
+    txHash = failedTx.hash
+  }
+
+  return {
+    validator: validatorData.validator,
+    status: newStatus,
+    txHash,
+    timestamp
+  }
+}

alm/src/utils/web3.ts

@@ -0,0 +1,72 @@
+import Web3 from 'web3'
+import { BlockTransactionString } from 'web3-eth'
+import { TransactionReceipt } from 'web3-eth'
+import { AbiItem } from 'web3-utils'
+import memoize from 'fast-memoize'
+import promiseRetry from 'promise-retry'
+import { HOME_AMB_ABI, FOREIGN_AMB_ABI } from '../abis'
+import { SnapshotProvider } from '../services/SnapshotProvider'
+
+export interface MessageObject {
+  id: string
+  data: string
+}
+
+const rawGetWeb3 = (url: string) => new Web3(new Web3.providers.HttpProvider(url))
+const memoized = memoize(rawGetWeb3)
+
+export const getWeb3 = (url: string) => memoized(url)
+
+export const filterEventsByAbi = (
+  txReceipt: TransactionReceipt,
+  web3: Web3,
+  bridgeAddress: string,
+  eventAbi: AbiItem
+): MessageObject[] => {
+  const eventHash = web3.eth.abi.encodeEventSignature(eventAbi)
+  const events = txReceipt.logs.filter(e => e.address === bridgeAddress && e.topics[0] === eventHash)
+
+  return events.map(e => {
+    let decodedLogs: { [p: string]: string } = {
+      messageId: '',
+      encodedData: ''
+    }
+    if (eventAbi && eventAbi.inputs && eventAbi.inputs.length) {
+      decodedLogs = web3.eth.abi.decodeLog(eventAbi.inputs, e.data, [e.topics[1]])
+    }
+    return { id: decodedLogs.messageId, data: decodedLogs.encodedData }
+  })
+}
+
+export const getHomeMessagesFromReceipt = (txReceipt: TransactionReceipt, web3: Web3, bridgeAddress: string) => {
+  const UserRequestForSignatureAbi: AbiItem = HOME_AMB_ABI.filter(
+    (e: AbiItem) => e.type === 'event' && e.name === 'UserRequestForSignature'
+  )[0]
+  return filterEventsByAbi(txReceipt, web3, bridgeAddress, UserRequestForSignatureAbi)
+}
+
+export const getForeignMessagesFromReceipt = (txReceipt: TransactionReceipt, web3: Web3, bridgeAddress: string) => {
+  const userRequestForAffirmationAbi: AbiItem = FOREIGN_AMB_ABI.filter(
+    (e: AbiItem) => e.type === 'event' && e.name === 'UserRequestForAffirmation'
+  )[0]
+  return filterEventsByAbi(txReceipt, web3, bridgeAddress, userRequestForAffirmationAbi)
+}
+
+// In some rare cases the block data is not available yet for the block of a new event detected
+// so this logic retry to get the block in case it fails
+export const getBlock = async (web3: Web3, blockNumber: number): Promise<BlockTransactionString> =>
+  promiseRetry(async retry => {
+    const result = await web3.eth.getBlock(blockNumber)
+    if (!result) {
+      return retry('Error getting block data')
+    }
+    return result
+  })
+
+export const getChainId = async (web3: Web3, snapshotProvider: SnapshotProvider) => {
+  let id = snapshotProvider.chainId()
+  if (id === 0) {
+    id = await web3.eth.getChainId()
+  }
+  return id
+}

burner-wallet-plugin/staging/src/index.tsx

@@ -2,19 +2,37 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import BurnerCore from '@burner-wallet/core'
 import { InjectedSigner, LocalSigner } from '@burner-wallet/core/signers'
-import { InfuraGateway, InjectedGateway } from '@burner-wallet/core/gateways'
+import { XDaiBridge } from '@burner-wallet/exchange'
+import { xdai } from '@burner-wallet/assets'
+import { InfuraGateway, InjectedGateway, XDaiGateway } from '@burner-wallet/core/gateways'
 import Exchange from '@burner-wallet/exchange'
 import ModernUI from '@burner-wallet/modern-ui'
-import { Etc, Wetc, TokenBridgeGateway, WETCBridge } from '@poanet/tokenbridge-bw-exchange'
+import {
+  Etc,
+  Wetc,
+  Dai,
+  qDai,
+  MOON,
+  xMOON,
+  TokenBridgeGateway,
+  WETCBridge,
+  QDAIBridge,
+  MOONBridge
+} from '@poanet/tokenbridge-bw-exchange'
 import MetamaskPlugin from '@burner-wallet/metamask-plugin'
 
 const core = new BurnerCore({
   signers: [new InjectedSigner(), new LocalSigner()],
-  gateways: [new InjectedGateway(), new InfuraGateway(process.env.REACT_APP_INFURA_KEY), new TokenBridgeGateway()],
-  assets: [Wetc, Etc]
+  gateways: [
+    new InjectedGateway(),
+    new XDaiGateway(),
+    new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
+    new TokenBridgeGateway()
+  ],
+  assets: [xdai, Wetc, Etc, Dai, qDai, MOON, xMOON]
 })
 
-const exchange = new Exchange([new WETCBridge()])
+const exchange = new Exchange([new XDaiBridge(), new WETCBridge(), new QDAIBridge(), new MOONBridge()])
 
 const BurnerWallet = () => <ModernUI title="Staging Wallet" core={core} plugins={[exchange, new MetamaskPlugin()]} />
 

burner-wallet-plugin/testing/package.json

@@ -16,8 +16,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "typescript": "3.5.1",
-    "web3": "1.0.0-beta.55"
+    "typescript": "3.5.1"
   },
   "scripts": {
     "start": "react-scripts start",

burner-wallet-plugin/testing/src/LocalhostGateway.ts

@@ -0,0 +1,53 @@
+import { Gateway } from '@burner-wallet/core/gateways'
+import Web3 from 'web3'
+
+export default class LocalhostGateway extends Gateway {
+  private readonly providers: object
+  private readonly providerStrings: { [id: string]: string }
+  constructor() {
+    super()
+    this.providerStrings = {
+      '111': 'http://localhost:8545',
+      '1337': 'http://localhost:8546'
+    }
+    this.providers = {}
+  }
+
+  isAvailable() {
+    return true
+  }
+
+  getNetworks() {
+    return ['111', '1337']
+  }
+
+  _provider(network) {
+    if (!this.providers[network]) {
+      this._makeProvider(network)
+    }
+    return this.providers[network]
+  }
+
+  _makeProvider(network) {
+    if (!this.providerStrings[network]) {
+      throw new Error(`Network ${network} not supported by LocalhostGateway`)
+    }
+
+    this.providers[network] = new Web3.providers.HttpProvider(this.providerStrings[network])
+  }
+
+  send(network, payload) {
+    return new Promise((resolve, reject) => {
+      if (this.getNetworks().indexOf(network) === -1) {
+        return reject(new Error('LocalhostGateway does not support this network'))
+      }
+
+      this._provider(network).send(payload, (err, response) => {
+        if (err) {
+          return reject(err)
+        }
+        return resolve(response.result)
+      })
+    })
+  }
+}

burner-wallet-plugin/testing/src/index.tsx

@@ -6,13 +6,23 @@ import { InjectedSigner, LocalSigner } from '@burner-wallet/core/signers'
 import { InfuraGateway, InjectedGateway } from '@burner-wallet/core/gateways'
 import ModernUI from '@burner-wallet/modern-ui'
 import Exchange from '@burner-wallet/exchange'
-import { Mediator, sPOA, ERC677Asset, TokenBridgeGateway } from '@poanet/tokenbridge-bw-exchange'
+import {
+  Mediator,
+  sPOA,
+  ERC677Asset,
+  TokenBridgeGateway,
+  NativeMediatorAsset,
+  MediatorErcToNative,
+  BridgeableERC20Asset
+} from '@poanet/tokenbridge-bw-exchange'
 import MetamaskPlugin from '@burner-wallet/metamask-plugin'
+import LocalhostGateway from './LocalhostGateway'
 
 let assetIdAtHome = 'assetAtHome'
 const assetIdAtForeign = 'assetAtForeign'
 let assetAtHome: Asset
 let assetAtForeign: Asset
+let testBridge: Mediator
 
 if (process.env.REACT_APP_MODE === 'AMB_NATIVE_TO_ERC677') {
   sPOA.setMediatorAddress(process.env.REACT_APP_HOME_MEDIATOR_ADDRESS)
@@ -28,8 +38,16 @@ if (process.env.REACT_APP_MODE === 'AMB_NATIVE_TO_ERC677') {
     // @ts-ignore
     address: process.env.REACT_APP_FOREIGN_TOKEN_ADDRESS
   })
-} else {
-  // process.env.REACT_APP_MODE === 'AMB_ERC677_TO_ERC677'
+
+  testBridge = new Mediator({
+    assetA: assetIdAtHome,
+    // @ts-ignore
+    assetABridge: process.env.REACT_APP_HOME_MEDIATOR_ADDRESS,
+    assetB: assetIdAtForeign,
+    // @ts-ignore
+    assetBBridge: process.env.REACT_APP_FOREIGN_MEDIATOR_ADDRESS
+  })
+} else if (process.env.REACT_APP_MODE === 'AMB_ERC677_TO_ERC677') {
   assetAtHome = new ERC677Asset({
     id: 'assetAtHome',
     // @ts-ignore
@@ -49,20 +67,53 @@ if (process.env.REACT_APP_MODE === 'AMB_NATIVE_TO_ERC677') {
     // @ts-ignore
     address: process.env.REACT_APP_FOREIGN_TOKEN_ADDRESS
   })
-}
 
-const testBridge = new Mediator({
-  assetA: assetIdAtHome,
-  // @ts-ignore
-  assetABridge: process.env.REACT_APP_HOME_MEDIATOR_ADDRESS,
-  assetB: assetIdAtForeign,
-  // @ts-ignore
-  assetBBridge: process.env.REACT_APP_FOREIGN_MEDIATOR_ADDRESS
-})
+  testBridge = new Mediator({
+    assetA: assetIdAtHome,
+    // @ts-ignore
+    assetABridge: process.env.REACT_APP_HOME_MEDIATOR_ADDRESS,
+    assetB: assetIdAtForeign,
+    // @ts-ignore
+    assetBBridge: process.env.REACT_APP_FOREIGN_MEDIATOR_ADDRESS
+  })
+} else {
+  // process.env.REACT_APP_MODE === 'AMB_ERC20_TO_NATIVE'
+  assetAtHome = new NativeMediatorAsset({
+    id: assetIdAtHome,
+    name: 'qDAI',
+    network: process.env.REACT_APP_HOME_NETWORK as string,
+    mediatorAddress: process.env.REACT_APP_HOME_MEDIATOR_ADDRESS
+  })
+
+  assetAtForeign = new BridgeableERC20Asset({
+    id: 'assetAtForeign',
+    // @ts-ignore
+    name: process.env.REACT_APP_FOREIGN_TOKEN_NAME,
+    // @ts-ignore
+    network: process.env.REACT_APP_FOREIGN_NETWORK,
+    // @ts-ignore
+    address: process.env.REACT_APP_FOREIGN_TOKEN_ADDRESS,
+    bridgeModes: ['erc-to-native-amb']
+  })
+
+  testBridge = new MediatorErcToNative({
+    assetA: assetIdAtHome,
+    // @ts-ignore
+    assetABridge: process.env.REACT_APP_HOME_MEDIATOR_ADDRESS,
+    assetB: assetIdAtForeign,
+    // @ts-ignore
+    assetBBridge: process.env.REACT_APP_FOREIGN_MEDIATOR_ADDRESS
+  })
+}
 
 const core = new BurnerCore({
   signers: [new InjectedSigner(), new LocalSigner({ privateKey: process.env.REACT_APP_PK, saveKey: false })],
-  gateways: [new InjectedGateway(), new TokenBridgeGateway(), new InfuraGateway(process.env.REACT_APP_INFURA_KEY)],
+  gateways: [
+    new InjectedGateway(),
+    new LocalhostGateway(),
+    new TokenBridgeGateway(),
+    new InfuraGateway(process.env.REACT_APP_INFURA_KEY)
+  ],
   assets: [assetAtHome, assetAtForeign]
 })
 

burner-wallet-plugin/testing/tsconfig.json

@@ -17,6 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "noImplicitAny": false,
     "jsx": "preserve"
   },
   "include": [

burner-wallet-plugin/tokenbridge-bw-exchange/README.md

@@ -4,12 +4,16 @@ This plugin defines a Bridge trading pair to be used in the Exchange Plugin.
 
 Bridge trading pairs and assets supported:
 * ETC - WETC Bridge
+* MOON - xMOON Bridge
+* DAI - qDAI Bridge (For qDAI Bridge, it's necessary to use a custom DAI token from this repo instead of the DAI asset provided by burner-wallet)
 
 It also provides some generic resources that can be used and extended:
-* **ERC677Asset** - A representation of an Erc677 token
+* **ERC677Asset** - A representation of an Erc677 token.
+* **BridgeableERC20Asset** - A representation of Erc20 token with a possibility of bridging it via a call to `relayTokens`.
 * **NativeMediatorAsset** - Represents a native token that interacts with a Mediator extension.
 * **Mediator Pair** - Represents an Exchange Pair that interacts with mediators extensions.
-* **TokenBridgeGateway** - A gateway to operate with ETC, POA Sokol and POA Core networks. 
+* **MediatorErcToNative Pair** - Represents a modified Mediator Pair that interacts with a tokenbridge erc-to-native mediators contracts.
+* **TokenBridgeGateway** - A gateway to operate with ETC, POA Sokol, POA Core and qDAI networks.
 
 ### Install package
 ```
@@ -18,13 +22,22 @@ yarn add @poanet/tokenbridge-bw-exchange
  
 ### Usage
 
+#### WETCBridge example
+In this example, we use `TokenBridgeGateway` for connecting to the Ethereum Classic and `InfuraGateway` for connecting to the Ethereum Mainnet.
+
+`WETCBridge` operates with two assets: `WETC` (Ethereum Mainnet) and `ETC` (Ethereum Classic), they should be added in the assets list.
+
 ```javascript
-import { Etc, Wetc, EtcGateway, WETCBridge } from '@poanet/tokenbridge-bw-exchange'
+import BurnerCore from '@burner-wallet/core'
+import Exchange from '@burner-wallet/exchange'
+import { LocalSigner } from '@burner-wallet/core/signers'
+import { Etc, Wetc, TokenBridgeGateway, WETCBridge } from '@poanet/tokenbridge-bw-exchange'
+import { InfuraGateway } from '@burner-wallet/core/gateways'
 
 const core = new BurnerCore({
-  ...
-  gateways: [new EtcGateway(), new InfuraGateway(process.env.REACT_APP_INFURA_KEY)],
-  assets: [Etc, Wetc]
+  signers: [new LocalSigner()],
+  gateways: [new TokenBridgeGateway(), new InfuraGateway(process.env.REACT_APP_INFURA_KEY)],
+  assets: [Wetc, Etc]
 })
 
 const exchange = new Exchange({
@@ -32,6 +45,33 @@ const exchange = new Exchange({
 })
 ```
 
+### Using several exchanges simultaneously
+In this example, we use `TokenBridgeGateway` for connecting to the qDAI chain, `XDaiGatewai` for connecting to the xDAI chain and `InfuraGateway` for connecting to the Ethereum Mainnet and Rinkeby Network.
+
+`QDAIBridge` operates with two assets: `qDAI` (qDAI chain) and `DAI` (Ethereum Mainnet). Note that we use a custom DAI token from the `@poanet/tokenbridge-bw-exchange`, this is necessary for allowing bridge operations on this token.
+
+`MOONBridge` operates with two assets: `MOON` (Rinkeby network) and `xMOON` (xDAI chain).
+
+All four assets should be added to the assets list.
+
+```javascript
+import BurnerCore from '@burner-wallet/core'
+import Exchange from '@burner-wallet/exchange'
+import { LocalSigner } from '@burner-wallet/core/signers'
+import { InfuraGateway, XDaiGateway } from '@burner-wallet/core/gateways'
+import { Dai, qDai, MOON, xMOON, TokenBridgeGateway, QDAIBridge, MOONBridge } from '@poanet/tokenbridge-bw-exchange'
+
+const core = new BurnerCore({
+  signers: [new LocalSigner()],
+  gateways: [new TokenBridgeGateway(), new XDaiGateway(), new InfuraGateway(process.env.REACT_APP_INFURA_KEY)],
+  assets: [Dai, qDai, MOON, xMOON]
+})
+
+const exchange = new Exchange({
+  pairs: [new QDAIBridge(), new MOONBridge()]
+})
+```
+
 This is how the exchange plugin will look like:
 
 ![exchange-wetc](https://user-images.githubusercontent.com/4614574/80991095-e40d0900-8e0d-11ea-9915-1b4e4a052694.png) 

burner-wallet-plugin/tokenbridge-bw-exchange/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poanet/tokenbridge-bw-exchange",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "GPL-3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

burner-wallet-plugin/tokenbridge-bw-exchange/src/bridges/MOONBridge.ts

@@ -0,0 +1,12 @@
+import { Mediator } from '../burner-wallet'
+
+export default class MOONBridge extends Mediator {
+  constructor() {
+    super({
+      assetA: 'xmoon',
+      assetABridge: '0x1E0507046130c31DEb20EC2f870ad070Ff266079',
+      assetB: 'moon',
+      assetBBridge: '0xFEaB457D95D9990b7eb6c943c839258245541754'
+    })
+  }
+}

burner-wallet-plugin/tokenbridge-bw-exchange/src/bridges/QDAIBridge.ts

@@ -0,0 +1,12 @@
+import { MediatorErcToNative } from '../burner-wallet'
+
+export default class QDAIBridge extends MediatorErcToNative {
+  constructor() {
+    super({
+      assetA: 'qdai',
+      assetABridge: '0xFEaB457D95D9990b7eb6c943c839258245541754',
+      assetB: 'dai',
+      assetBBridge: '0xf6edFA16926f30b0520099028A145F4E06FD54ed'
+    })
+  }
+}

burner-wallet-plugin/tokenbridge-bw-exchange/src/bridges/WETCBridge.ts

@@ -1,6 +1,6 @@
 import { Mediator } from '../burner-wallet'
 import { HOME_NATIVE_TO_ERC_ABI, FOREIGN_NATIVE_TO_ERC_ABI } from '../utils'
-import { waitForEvent, isBridgeContract, constants } from '../utils'
+import { waitForEvent, isVanillaBridgeContract, constants } from '../utils'
 import { ValueTypes } from '@burner-wallet/exchange'
 import { toBN, fromWei } from 'web3-utils'
 
@@ -19,7 +19,7 @@ export default class WETCBridge extends Mediator {
       .getAsset(this.assetA)
       .getWeb3()
     const contract = new web3.eth.Contract(HOME_NATIVE_TO_ERC_ABI, this.assetABridge)
-    const listenToBridgeEvent = await isBridgeContract(contract)
+    const listenToBridgeEvent = await isVanillaBridgeContract(contract)
     if (listenToBridgeEvent) {
       await waitForEvent(web3, contract, 'AffirmationCompleted', this.processBridgeEvents(sendResult.txHash))
     } else {
@@ -32,7 +32,7 @@ export default class WETCBridge extends Mediator {
       .getAsset(this.assetB)
       .getWeb3()
     const contract = new web3.eth.Contract(FOREIGN_NATIVE_TO_ERC_ABI, this.assetBBridge)
-    const listenToBridgeEvent = await isBridgeContract(contract)
+    const listenToBridgeEvent = await isVanillaBridgeContract(contract)
     if (listenToBridgeEvent) {
       await waitForEvent(web3, contract, 'RelayedMessage', this.processBridgeEvents(sendResult.txHash))
     } else {
@@ -53,7 +53,7 @@ export default class WETCBridge extends Mediator {
       .getWeb3()
     const contract = new web3.eth.Contract(FOREIGN_NATIVE_TO_ERC_ABI, this.assetBBridge)
 
-    const useBridgeContract = await isBridgeContract(contract)
+    const useBridgeContract = await isVanillaBridgeContract(contract)
 
     if (useBridgeContract) {
       const fee = toBN(await contract.methods.getHomeFee().call())
@@ -79,7 +79,7 @@ export default class WETCBridge extends Mediator {
       .getWeb3()
     const contract = new web3.eth.Contract(HOME_NATIVE_TO_ERC_ABI, this.assetABridge)
 
-    const useBridgeContract = await isBridgeContract(contract)
+    const useBridgeContract = await isVanillaBridgeContract(contract)
 
     if (useBridgeContract) {
       const fee = toBN(await contract.methods.getForeignFee().call())

burner-wallet-plugin/tokenbridge-bw-exchange/src/bridges/index.ts

@@ -0,0 +1,3 @@
+export { default as WETCBridge } from './WETCBridge'
+export { default as QDAIBridge } from './QDAIBridge'
+export { default as MOONBridge } from './MOONBridge'

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/BridgeableERC20Asset.ts

@@ -0,0 +1,64 @@
+import { ERC20Asset } from '@burner-wallet/assets'
+import { AssetConstructor } from '@burner-wallet/assets/Asset'
+import { MEDIATOR_ABI, constants, isBridgeContract } from '../../utils'
+import { toBN, soliditySha3 } from 'web3-utils'
+
+interface BridgeableERC20Constructor extends AssetConstructor {
+  abi?: object
+  address: string
+  bridgeModes: string[]
+}
+
+export default class BridgeableERC20Asset extends ERC20Asset {
+  private _bridgeModes
+  private _bridges: { [addr: string]: object | false }
+
+  public set bridgeModes(bridgeModes: string[]) {
+    this._bridgeModes = bridgeModes.map(s => soliditySha3(s)!.slice(0, 10))
+  }
+
+  public get bridgeModes() {
+    return this._bridgeModes
+  }
+
+  constructor({
+    bridgeModes = ['erc-to-native-core', 'erc-to-native-amb', 'erc-to-erc-core', 'erc-to-erc-amb'],
+    ...params
+  }: BridgeableERC20Constructor) {
+    super(params)
+    this._bridges = {}
+    this.bridgeModes = bridgeModes
+  }
+
+  async getBridgeContract(addr: string) {
+    if (typeof this._bridges[addr] === 'undefined') {
+      const Contract = this.getWeb3().eth.Contract
+      const bridge = new Contract(MEDIATOR_ABI, addr)
+      if (await isBridgeContract(bridge, this.bridgeModes)) {
+        return (this._bridges[addr] = bridge)
+      }
+      return (this._bridges[addr] = false)
+    }
+    return this._bridges[addr]
+  }
+
+  async _send({ from, to, value }) {
+    const bridge = await this.getBridgeContract(to)
+    if (bridge) {
+      const allowance = await this.allowance(from, to)
+      if (toBN(allowance).lt(toBN(value))) {
+        await this.approve(from, to, value)
+      }
+      const receipt = await bridge.methods.relayTokens(from, value).send({ from })
+      const transferLog = Object.values(receipt.events as object).find(
+        e => e.raw.topics[0] === constants.TRANSFER_TOPIC
+      )
+      return {
+        ...receipt,
+        txHash: receipt.transactionHash,
+        id: `${receipt.transactionHash}-${transferLog.logIndex}`
+      }
+    }
+    return super._send({ from, to, value })
+  }
+}

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/Dai.ts

@@ -0,0 +1,11 @@
+import BridgeableERC20Asset from './BridgeableERC20Asset'
+
+export default new BridgeableERC20Asset({
+  id: 'dai',
+  name: 'Dai',
+  network: '1',
+  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+  usdPrice: 1,
+  icon: 'https://static.burnerfactory.com/icons/mcd.svg',
+  bridgeModes: ['erc-to-native-amb']
+})

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/ERC677Asset.ts

@@ -1,15 +1,12 @@
 import { ERC20Asset } from '@burner-wallet/assets'
-import { ERC677_ABI } from '../../utils'
+import { AssetConstructor } from '@burner-wallet/assets/Asset'
+import { ERC677_ABI, constants } from '../../utils'
 
-const TRANSFER_TOPIC = '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef'
 const BLOCK_LOOKBACK = 250
 
-interface ERC677Constructor {
+interface ERC677Constructor extends AssetConstructor {
   abi?: object
   address: string
-  id: string
-  name: string
-  network: string
 }
 
 export default class ERC677Asset extends ERC20Asset {
@@ -45,7 +42,7 @@ export default class ERC677Asset extends ERC20Asset {
       const allTransferEvents = await this.getContract().getPastEvents('allEvents', {
         fromBlock: block,
         toBlock: currentBlock,
-        topics: [TRANSFER_TOPIC]
+        topics: [constants.TRANSFER_TOPIC]
       })
       // Manually filter `to` parameter because `filter` option does not work with allEvents
       const events = allTransferEvents.filter(e => e.returnValues.to.toLowerCase() === address.toLowerCase())

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/Etc.ts

@@ -1,5 +1,5 @@
 import NativeMediatorAsset from './NativeMediatorAsset'
-import { isBridgeContract, HOME_NATIVE_TO_ERC_ABI } from '../../utils'
+import { isVanillaBridgeContract, HOME_NATIVE_TO_ERC_ABI } from '../../utils'
 
 class EtcNativeAsset extends NativeMediatorAsset {
   constructor(props) {
@@ -9,7 +9,7 @@ class EtcNativeAsset extends NativeMediatorAsset {
   async scanMediatorEvents(address, fromBlock, toBlock) {
     const web3 = this.getWeb3()
     const contract = new web3.eth.Contract(HOME_NATIVE_TO_ERC_ABI, this.mediatorAddress)
-    const listenToBridgeEvent = await isBridgeContract(contract)
+    const listenToBridgeEvent = await isVanillaBridgeContract(contract)
     if (listenToBridgeEvent && this.mediatorAddress != '') {
       const events = await contract.getPastEvents('AffirmationCompleted', {
         fromBlock,

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/MOON.ts

@@ -0,0 +1,10 @@
+import BridgeableERC20Asset from './BridgeableERC20Asset'
+
+export default new BridgeableERC20Asset({
+  id: 'moon',
+  name: 'MOON',
+  network: '4',
+  address: '0xDF82c9014F127243CE1305DFE54151647d74B27A',
+  icon: 'https://blockscout.com/poa/xdai/images/icons/moon.png',
+  bridgeModes: ['erc-to-erc-amb']
+})

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/NativeMediatorAsset.ts

@@ -1,12 +1,10 @@
 import { NativeAsset } from '@burner-wallet/assets'
 import { Contract, EventData } from 'web3-eth-contract'
 import { MEDIATOR_ABI } from '../../utils'
+import { AssetConstructor } from '@burner-wallet/assets/Asset'
 
-interface NativeMediatorConstructor {
+interface NativeMediatorConstructor extends AssetConstructor {
   mediatorAddress?: string
-  id: string
-  name: string
-  network: string
 }
 
 export default class NativeMediatorAsset extends NativeAsset {

burner-wallet-plugin/tokenbridge-bw-exchange/src/burner-wallet/assets/qDai.ts

@@ -0,0 +1,9 @@
+import NativeMediatorAsset from './NativeMediatorAsset'
+
+export default new NativeMediatorAsset({
+  id: 'qdai',
+  name: 'qDai',
+  network: '181',
+  usdPrice: 1,
+  mediatorAddress: '0xFEaB457D95D9990b7eb6c943c839258245541754'
+})