Merge the develop branch to the master branch, preparation to v2.7.0-…

…rc0 (#515)

This merge contains the following set of changes:
  * [Improvement] Add /metrics endpoint for prometheus support (#512)
  * [Improvement] Add monitor script for detecting failed AMB messages (#513)
  * [Improvement] Improve performance of BS requests in ALM (#516)
  * [Fix] Add pretty error messages for manual execution transaction reverts (#511)
  * [Fix] Fix resend of stuck pending transactions (#514)

alm/src/components/ConfirmationsContainer.tsx

@@ -39,10 +39,17 @@ export interface ConfirmationsContainerParams {
   message: MessageObject
   receipt: Maybe<TransactionReceipt>
   fromHome: boolean
-  timestamp: number
+  homeStartBlock: Maybe<number>
+  foreignStartBlock: Maybe<number>
 }
 
-export const ConfirmationsContainer = ({ message, receipt, fromHome, timestamp }: ConfirmationsContainerParams) => {
+export const ConfirmationsContainer = ({
+  message,
+  receipt,
+  fromHome,
+  homeStartBlock,
+  foreignStartBlock
+}: ConfirmationsContainerParams) => {
   const {
     home: { name: homeName },
     foreign: { name: foreignName }
@@ -62,7 +69,8 @@ export const ConfirmationsContainer = ({ message, receipt, fromHome, timestamp }
     message,
     receipt,
     fromHome,
-    timestamp,
+    homeStartBlock,
+    foreignStartBlock,
     requiredSignatures,
     validatorList,
     blockConfirmations

alm/src/components/ExecutionConfirmation.tsx

@@ -36,10 +36,12 @@ export const ExecutionConfirmation = ({
   const availableManualExecution =
     !isHome &&
     (executionData.status === VALIDATOR_CONFIRMATION_STATUS.WAITING ||
+      executionData.status === VALIDATOR_CONFIRMATION_STATUS.FAILED ||
       (executionData.status === VALIDATOR_CONFIRMATION_STATUS.UNDEFINED &&
         executionEventsFetched &&
         !!executionData.validator))
   const requiredManualExecution = availableManualExecution && ALM_HOME_TO_FOREIGN_MANUAL_EXECUTION
+  const showAgeColumn = !requiredManualExecution || executionData.status === VALIDATOR_CONFIRMATION_STATUS.FAILED
   const windowWidth = useWindowWidth()
 
   const txExplorerLink = getExplorerTxUrl(executionData.txHash, isHome)
@@ -71,7 +73,7 @@ export const ExecutionConfirmation = ({
           <tr>
             <th>{requiredManualExecution ? 'Execution info' : 'Executed by'}</th>
             <th className="text-center">Status</th>
-            {!requiredManualExecution && <th className="text-center">Age</th>}
+            {showAgeColumn && <th className="text-center">Age</th>}
             {availableManualExecution && <th className="text-center">Actions</th>}
           </tr>
         </Thead>
@@ -87,7 +89,7 @@ export const ExecutionConfirmation = ({
               )}
             </td>
             <StatusTd className="text-center">{getExecutionStatusElement(executionData.status)}</StatusTd>
-            {!requiredManualExecution && (
+            {showAgeColumn && (
               <AgeTd className="text-center">
                 {executionData.timestamp > 0 ? (
                   <ExplorerTxLink href={txExplorerLink} target="_blank">

alm/src/components/ManualExecutionButton.tsx

@@ -2,9 +2,17 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { useWeb3React } from '@web3-react/core'
-import { INCORRECT_CHAIN_ERROR, VALIDATOR_CONFIRMATION_STATUS } from '../config/constants'
+import {
+  DOUBLE_EXECUTION_ATTEMPT_ERROR,
+  EXECUTION_FAILED_ERROR,
+  EXECUTION_OUT_OF_GAS_ERROR,
+  INCORRECT_CHAIN_ERROR,
+  VALIDATOR_CONFIRMATION_STATUS
+} from '../config/constants'
 import { useStateProvider } from '../state/StateProvider'
 import { signatureToVRS, packSignatures } from '../utils/signatures'
+import { getSuccessExecutionData } from '../utils/getFinalizationEvent'
+import { TransactionReceipt } from 'web3-eth'
 
 const StyledButton = styled.button`
   color: var(--button-color);
@@ -61,7 +69,9 @@ export const ManualExecutionButton = ({
       if (!library || !foreign.bridgeContract || !signatureCollected || !signatureCollected.length) return
 
       const signatures = packSignatures(signatureCollected.map(signatureToVRS))
-      const data = foreign.bridgeContract.methods.executeSignatures(messageData, signatures).encodeABI()
+      const messageId = messageData.slice(0, 66)
+      const bridge = foreign.bridgeContract
+      const data = bridge.methods.executeSignatures(messageData, signatures).encodeABI()
       setManualExecution(false)
 
       library.eth
@@ -80,7 +90,27 @@ export const ManualExecutionButton = ({
           })
           setPendingExecution(true)
         })
-        .on('error', (e: Error) => setError(e.message))
+        .on('error', async (e: Error, receipt: TransactionReceipt) => {
+          if (e.message.includes('Transaction has been reverted by the EVM')) {
+            const successExecutionData = await getSuccessExecutionData(bridge, 'RelayedMessage', library, messageId)
+            if (successExecutionData) {
+              setExecutionData(successExecutionData)
+              setError(DOUBLE_EXECUTION_ATTEMPT_ERROR)
+            } else {
+              const { gas } = await library.eth.getTransaction(receipt.transactionHash)
+              setExecutionData({
+                status: VALIDATOR_CONFIRMATION_STATUS.FAILED,
+                validator: account,
+                txHash: receipt.transactionHash,
+                timestamp: Math.floor(new Date().getTime() / 1000.0),
+                executionResult: false
+              })
+              setError(gas === receipt.gasUsed ? EXECUTION_OUT_OF_GAS_ERROR : EXECUTION_FAILED_ERROR)
+            }
+          } else {
+            setError(e.message)
+          }
+        })
     },
     [
       manualExecution,

alm/src/components/StatusContainer.tsx

@@ -10,6 +10,7 @@ import { ExplorerTxLink } from './commons/ExplorerTxLink'
 import { ConfirmationsContainer } from './ConfirmationsContainer'
 import { TransactionReceipt } from 'web3-eth'
 import { BackButton } from './commons/BackButton'
+import { useClosestBlock } from '../hooks/useClosestBlock'
 
 export interface StatusContainerParam {
   onBackToMain: () => void
@@ -23,12 +24,15 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar
   const { chainId, txHash, messageIdParam } = useParams()
   const validChainId = chainId === home.chainId.toString() || chainId === foreign.chainId.toString()
   const validParameters = validChainId && validTxHash(txHash)
+  const isHome = chainId === home.chainId.toString()
 
   const { messages, receipt, status, description, timestamp, loading } = useTransactionStatus({
     txHash: validParameters ? txHash : '',
     chainId: validParameters ? parseInt(chainId) : 0,
     receiptParam
   })
+  const homeStartBlock = useClosestBlock(true, isHome, receipt, timestamp)
+  const foreignStartBlock = useClosestBlock(false, isHome, receipt, timestamp)
 
   const selectedMessageId = messageIdParam === undefined || messages[messageIdParam] === undefined ? -1 : messageIdParam
 
@@ -64,7 +68,6 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar
   const displayReference = multiMessageSelected ? messages[selectedMessageId].id : txHash
   const formattedMessageId = formatTxHash(displayReference)
 
-  const isHome = chainId === home.chainId.toString()
   const txExplorerLink = getExplorerTxUrl(txHash, isHome)
   const displayExplorerLink = status !== TRANSACTION_STATUS.NOT_FOUND
 
@@ -101,7 +104,13 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar
       )}
       {displayMessageSelector && <MessageSelector messages={messages} onMessageSelected={onMessageSelected} />}
       {displayConfirmations && (
-        <ConfirmationsContainer message={messageToConfirm} receipt={receipt} fromHome={isHome} timestamp={timestamp} />
+        <ConfirmationsContainer
+          message={messageToConfirm}
+          receipt={receipt}
+          fromHome={isHome}
+          homeStartBlock={homeStartBlock}
+          foreignStartBlock={foreignStartBlock}
+        />
       )}
       <BackButton onBackToMain={onBackToMain} />
     </div>

alm/src/components/commons/ErrorAlert.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { InfoIcon } from './InfoIcon'
 import { CloseIcon } from './CloseIcon'
+import { ExplorerTxLink } from './ExplorerTxLink'
 
 const StyledErrorAlert = styled.div`
   border: 1px solid var(--failed-color);
@@ -15,17 +16,33 @@ const CloseIconContainer = styled.div`
 `
 
 const TextContainer = styled.div`
+  white-space: pre-wrap;
   flex-direction: column;
 `
 
-export const ErrorAlert = ({ onClick, error }: { onClick: () => void; error: string }) => (
-  <div className="row is-center">
-    <StyledErrorAlert className="col-10 is-vertical-align row">
-      <InfoIcon color="var(--failed-color)" />
-      <TextContainer className="col-10">{error}</TextContainer>
-      <CloseIconContainer className="col-1 is-vertical-align is-center" onClick={onClick}>
-        <CloseIcon color="var(--failed-color)" />
-      </CloseIconContainer>
-    </StyledErrorAlert>
-  </div>
-)
+export const ErrorAlert = ({ onClick, error }: { onClick: () => void; error: string }) => {
+  const errorArray = error.split('%link')
+  const text = errorArray[0]
+  let link
+  if (errorArray.length > 1) {
+    link = (
+      <ExplorerTxLink href={errorArray[1]} target="_blank" rel="noopener noreferrer">
+        {errorArray[1]}
+      </ExplorerTxLink>
+    )
+  }
+  return (
+    <div className="row is-center">
+      <StyledErrorAlert className="col-10 is-vertical-align row">
+        <InfoIcon color="var(--failed-color)" />
+        <TextContainer className="col-10">
+          {text}
+          {link}
+        </TextContainer>
+        <CloseIconContainer className="col-1 is-vertical-align is-center" onClick={onClick}>
+          <CloseIcon color="var(--failed-color)" />
+        </CloseIconContainer>
+      </StyledErrorAlert>
+    </div>
+  )
+}

alm/src/config/constants.ts

@@ -18,9 +18,8 @@ export const ALM_HOME_TO_FOREIGN_MANUAL_EXECUTION: boolean =
 
 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 BLOCK_RANGE: number = 500
+export const MAX_TX_SEARCH_BLOCK_RANGE: number = 10000
 
 export const EXECUTE_AFFIRMATION_HASH = 'e7a2c01f'
 export const SUBMIT_SIGNATURE_HASH = '630cea8e'
@@ -66,3 +65,12 @@ export const VALIDATOR_CONFIRMATION_STATUS = {
 export const SEARCHING_TX = 'Searching Transaction...'
 
 export const INCORRECT_CHAIN_ERROR = `Incorrect chain chosen. Switch to ${FOREIGN_NETWORK_NAME} in the wallet.`
+
+export const DOUBLE_EXECUTION_ATTEMPT_ERROR = `Your execution transaction has been reverted.
+However, the execution completed successfully in the transaction sent by a different party.`
+
+export const EXECUTION_FAILED_ERROR = `Your execution transaction has been reverted.
+Please, contact the support by messaging on %linkhttps://forum.poa.network/c/support`
+
+export const EXECUTION_OUT_OF_GAS_ERROR = `Your execution transaction has been reverted due to Out-of-Gas error.
+Please, resend the transaction and provide more gas to it.`

alm/src/hooks/useClosestBlock.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { TransactionReceipt } from 'web3-eth'
+import { useStateProvider } from '../state/StateProvider'
+import { FOREIGN_EXPLORER_API, HOME_EXPLORER_API } from '../config/constants'
+import { getClosestBlockByTimestamp } from '../utils/explorer'
+
+export function useClosestBlock(
+  searchHome: boolean,
+  fromHome: boolean,
+  receipt: Maybe<TransactionReceipt>,
+  timestamp: number
+) {
+  const { home, foreign } = useStateProvider()
+  const [blockNumber, setBlockNumber] = useState<number | null>(null)
+
+  useEffect(
+    () => {
+      if (!receipt || blockNumber || !timestamp) return
+
+      if (fromHome === searchHome) {
+        setBlockNumber(receipt.blockNumber)
+        return
+      }
+
+      const web3 = searchHome ? home.web3 : foreign.web3
+      if (!web3) return
+
+      const getBlock = async () => {
+        // try to fast-fetch closest block number from the chain explorer
+        try {
+          const api = searchHome ? HOME_EXPLORER_API : FOREIGN_EXPLORER_API
+          setBlockNumber(await getClosestBlockByTimestamp(api, timestamp))
+          return
+        } catch {}
+
+        const lastBlock = await web3.eth.getBlock('latest')
+        if (lastBlock.timestamp <= timestamp) {
+          setBlockNumber(lastBlock.number)
+          return
+        }
+
+        const oldBlock = await web3.eth.getBlock(Math.max(lastBlock.number - 10000, 1))
+        const blockDiff = lastBlock.number - oldBlock.number
+        const timeDiff = (lastBlock.timestamp as number) - (oldBlock.timestamp as number)
+        const averageBlockTime = timeDiff / blockDiff
+        let currentBlock = lastBlock
+
+        let prevBlockDiff = Infinity
+        while (true) {
+          const timeDiff = (currentBlock.timestamp as number) - timestamp
+          const blockDiff = Math.ceil(timeDiff / averageBlockTime)
+          if (Math.abs(blockDiff) < 5 || Math.abs(blockDiff) >= Math.abs(prevBlockDiff)) {
+            setBlockNumber(currentBlock.number - blockDiff - 5)
+            break
+          }
+
+          prevBlockDiff = blockDiff
+          currentBlock = await web3.eth.getBlock(currentBlock.number - blockDiff)
+        }
+      }
+
+      getBlock()
+    },
+    [blockNumber, foreign.web3, fromHome, home.web3, receipt, searchHome, timestamp]
+  )
+
+  return blockNumber
+}