Set descriptions for every state in ALM (#398)

alm/src/components/ConfirmationsContainer.tsx

@@ -4,7 +4,7 @@ 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 } from '../config/descriptions'
+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'
@@ -12,6 +12,8 @@ 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;
@@ -57,21 +59,42 @@ export const ConfirmationsContainer = ({ message, receipt, fromHome, timestamp }
     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>
-            {status !== CONFIRMATIONS_STATUS.UNDEFINED ? CONFIRMATIONS_STATUS_LABEL[status] : <SimpleLoading />}
+            {status !== CONFIRMATIONS_STATUS.UNDEFINED ? statusLabel[status] : <SimpleLoading />}
           </StatusResultLabel>
         </div>
         <StatusDescription className="row is-center">
-          <p className="col-10">
+          <MultiLine className="col-10">
-            {status !== CONFIRMATIONS_STATUS.UNDEFINED
+            {status !== CONFIRMATIONS_STATUS.UNDEFINED ? parseDescription() : ''}
-              ? getConfirmationsStatusDescription(status, homeName, foreignName)
+          </MultiLine>
-              : ''}
-          </p>
         </StatusDescription>
         <ValidatorsConfirmations
           confirmations={confirmations}

alm/src/components/StatusContainer.tsx

@@ -81,7 +81,7 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar
         <p>
           The request{' '}
           {displayExplorerLink && (
-            <ExplorerTxLink href={txExplorerLink} target="blank">
+            <ExplorerTxLink href={txExplorerLink} target="_blank">
               {formattedMessageId}
             </ExplorerTxLink>
           )}

alm/src/config/constants.ts

@@ -45,7 +45,8 @@ export const CONFIRMATIONS_STATUS = {
   EXECUTION_WAITING: 'EXECUTION_WAITING',
   FAILED: 'FAILED',
   PENDING: 'PENDING',
-  WAITING: 'WAITING',
+  WAITING_VALIDATORS: 'WAITING_VALIDATORS',
+  WAITING_CHAIN: 'WAITING_CHAIN',
   UNDEFINED: 'UNDEFINED'
 }
 

alm/src/config/descriptions.ts

@@ -9,29 +9,58 @@ export const TRANSACTION_STATUS_DESCRIPTION: { [key: string]: string } = {
 }
 
 export const CONFIRMATIONS_STATUS_LABEL: { [key: string]: string } = {
+  SUCCESS: 'Success',
+  SUCCESS_MESSAGE_FAILED: 'Success',
+  FAILED: 'Failed',
+  PENDING: 'Pending',
+  WAITING_VALIDATORS: '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: 'Failed',
+  FAILED: 'Confirmation Failed',
-  PENDING: 'Pending',
+  PENDING: 'Confirmation Pending',
-  WAITING: 'Waiting'
+  WAITING_VALIDATORS: 'Confirmation Waiting',
+  WAITING_CHAIN: 'Confirmation Waiting'
 }
 
-// %homeChain will be replaced by the home network name
+// use %link to identify a link
-// %foreignChain will be replaced by the foreign network name
 export const CONFIRMATIONS_STATUS_DESCRIPTION: { [key: string]: string } = {
   SUCCESS: '',
   SUCCESS_MESSAGE_FAILED:
-    'Signatures have been collected in the %homeChain and they were successfully sent to the %foreignChain but the contained message execution 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:
-    'Signatures have been collected in the %homeChain and they were sent to the %foreignChain but the transaction with signatures failed',
-  EXECUTION_PENDING:
-    'Signatures have been collected in the %homeChain and they were sent to the %foreignChain but the transaction is in the pending state (transactions congestion or low gas price)',
-  EXECUTION_WAITING: 'Execution waiting',
   FAILED:
-    'Some validators sent improper transactions as so they were failed, collected confirmations are not enough to execute the relay request',
+    '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: 'Some confirmations are in pending state',
+  PENDING:
-  WAITING: 'Validators are waiting for the chain finalization'
+    '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.',
+  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.',
+  WAITING_CHAIN:
+    'The specified transaction was included in a block.\nValidators are waiting for chain finalization\nbefore sending their signatures.'
 }

alm/src/hooks/useMessageConfirmations.ts

@@ -83,6 +83,13 @@ export const useMessageConfirmations = ({
   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(
     () => {
@@ -319,6 +326,8 @@ export const useMessageConfirmations = ({
             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.UNDEFINED)
           }
@@ -326,11 +335,13 @@ export const useMessageConfirmations = ({
           setStatus(CONFIRMATIONS_STATUS.UNDEFINED)
         }
       } else if (waitingBlocks) {
-        setStatus(CONFIRMATIONS_STATUS.WAITING)
+        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 {
         setStatus(CONFIRMATIONS_STATUS.UNDEFINED)
       }
@@ -344,7 +355,10 @@ export const useMessageConfirmations = ({
       failedConfirmations,
       failedExecution,
       pendingConfirmations,
-      pendingExecution
+      pendingExecution,
+      waitingBlocksResolved,
+      confirmations,
+      waitingBlocksForExecutionResolved
     ]
   )
 

alm/src/utils/executionWaitingForBlocks.ts

@@ -22,8 +22,8 @@ export const checkWaitingBlocksForExecution = async (
       timestamp: 0,
       executionResult: false
     })
-    setWaitingBlocksForExecution(false)
     setWaitingBlocksForExecutionResolved(true)
+    setWaitingBlocksForExecution(false)
     blockProvider.stop()
   } else {
     let nextInterval = interval

alm/src/utils/networks.ts

@@ -1,5 +1,9 @@
 import { formatDistance } from 'date-fns'
-import { CONFIRMATIONS_STATUS_DESCRIPTION, TRANSACTION_STATUS_DESCRIPTION } from '../config/descriptions'
+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)
@@ -31,11 +35,8 @@ export const getTransactionStatusDescription = (status: string, timestamp: Maybe
   return description
 }
 
-export const getConfirmationsStatusDescription = (status: string, home: string, foreign: string) => {
+export const getConfirmationsStatusDescription = (status: string, home: string, foreign: string, fromHome: boolean) => {
-  let description = CONFIRMATIONS_STATUS_DESCRIPTION[status]
+  const statusDescription = fromHome ? CONFIRMATIONS_STATUS_DESCRIPTION_HOME : CONFIRMATIONS_STATUS_DESCRIPTION
 
-  description = description.replace('%homeChain', home)
+  return statusDescription[status]
-  description = description.replace('%foreignChain', foreign)
-
-  return description
 }

alm/src/utils/signatureWaitingForBlocks.ts

@@ -14,8 +14,8 @@ export const checkSignaturesWaitingForBLocks = async (
   const currentBlock = blockProvider.get()
 
   if (currentBlock && currentBlock >= targetBlock) {
-    setWaitingStatus(false)
     setWaitingBlocksResolved(true)
+    setWaitingStatus(false)
     blockProvider.stop()
   } else {
     let nextInterval = interval