Display latest operations in UI status page for mediators (#332)

ui/package.json

@@ -7,6 +7,7 @@
     "bignumber.js": "^6.0.0",
     "coveralls": "^3.0.0",
     "customize-cra": "^0.2.12",
+    "date-fns": "^2.13.0",
     "dotenv": "^7.0.0",
     "fs-extra": "^5.0.0",
     "mobx": "^4.0.2",

ui/src/assets/stylesheets/application/_status.scss

@@ -32,7 +32,7 @@
 
       .status-configuration-data {
         display: flex;
-        justify-content: space-evenly;
+        justify-content: space-around;
 
         @media screen and (max-width: $tablet-width) {
           column-gap: 30px;

ui/src/components/Configuration.js

@@ -4,19 +4,25 @@ import { DataBlock } from './DataBlock'
 
 export const Configuration = ({ requiredSignatures, authorities, symbol, maxSingleDeposit, maxTotalBalance }) => (
   <div className="status-configuration-data">
+    {requiredSignatures.toString() !== '0' && (
       <DataBlock description="Required Signatures" value={numeral(requiredSignatures).format('0')} type="" />
-    <div className="separator" />
+    )}
+    {authorities.toString() !== '0' && <div className="separator" />}
+    {authorities.toString() !== '0' && (
       <DataBlock description="Authorities" value={numeral(authorities).format('0')} type="" />
+    )}
+    {maxSingleDeposit && maxSingleDeposit !== '0' && authorities.toString() !== '0' && <div className="separator" />}
     {maxSingleDeposit &&
-      maxSingleDeposit !== '0' && <div className="separator" /> && (
+      maxSingleDeposit !== '0' && (
         <DataBlock
           description="Max Single Deposit"
           value={numeral(maxSingleDeposit).format('0.00 a', Math.floor)}
           type={symbol}
         />
       )}
+    {maxSingleDeposit && maxSingleDeposit !== '0' && authorities.toString() !== '0' && <div className="separator" />}
     {maxSingleDeposit &&
-      maxSingleDeposit !== '0' && <div className="separator" /> && (
+      maxSingleDeposit !== '0' && (
         <DataBlock
           description={`Remaining Daily ${symbol} Quota`}
           value={numeral(maxTotalBalance).format('0.00 a', Math.floor)}

ui/src/components/StatusPage.js

@@ -3,12 +3,15 @@ import yn from './utils/yn'
 import { Authority } from './Authority'
 import { Configuration } from './Configuration'
 import { inject, observer } from 'mobx-react'
+import { isMediatorMode } from 'commons'
+import { formatDistanceStrict } from 'date-fns'
+import { DataBlock } from './DataBlock'
 
 @inject('RootStore')
 @observer
 export class StatusPage extends React.Component {
   render() {
-    const { homeStore, foreignStore, web3Store } = this.props.RootStore
+    const { homeStore, foreignStore, web3Store, bridgeMode } = this.props.RootStore
     const isHome = web3Store.isSelectedNetwork(web3Store.homeNet.id)
     const requiredSignatures = isHome ? homeStore.requiredSignatures : foreignStore.requiredSignatures
     const authorities = isHome ? homeStore.validatorsCount : foreignStore.validatorsCount
@@ -18,7 +21,27 @@ export class StatusPage extends React.Component {
     const validatorsList = isHome ? homeStore.validators : foreignStore.validators
     const { REACT_APP_UI_HOME_WITHOUT_EVENTS: HOME, REACT_APP_UI_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
     const withoutEvents = web3Store.isSelectedNetwork(web3Store.homeNet.id) ? yn(HOME) : yn(FOREIGN)
+    const displayLatestOperations =
+      isMediatorMode(bridgeMode) && homeStore.lastEventRelayedOnHome > 0 && foreignStore.lastEventRelayedOnForeign > 0
 
+    let fromHomeToForeignText
+    let fromForeignToHomeText
+    let lastEventOnHome
+    let lastEventOnForeign
+    if (displayLatestOperations) {
+      fromHomeToForeignText = `From ${homeStore.networkName} To ${foreignStore.networkName}`
+      fromForeignToHomeText = `From ${foreignStore.networkName} To ${homeStore.networkName}`
+
+      const lastDateOnHome = new Date(0).setUTCSeconds(homeStore.lastEventRelayedOnHome)
+      lastEventOnHome = formatDistanceStrict(lastDateOnHome, new Date(), {
+        addSuffix: true
+      })
+
+      const lastDateOnForeign = new Date(0).setUTCSeconds(foreignStore.lastEventRelayedOnForeign)
+      lastEventOnForeign = formatDistanceStrict(lastDateOnForeign, new Date(), {
+        addSuffix: true
+      })
+    }
     return (
       <div className="status-page">
         <div className="status-left-container" />
@@ -33,7 +56,7 @@ export class StatusPage extends React.Component {
               maxTotalBalance={maxTotalBalance}
             />
           </div>
-          {withoutEvents ? null : (
+          {withoutEvents || authorities.toString() === '0' ? null : (
             <div className="status-authorities-container">
               <span className="status-authorities-title status-title">Authorities</span>
               <div className="status-authorities-data">
@@ -43,6 +66,15 @@ export class StatusPage extends React.Component {
               </div>
             </div>
           )}
+          {displayLatestOperations && (
+            <div className="status-configuration-container">
+              <span className="status-configuration-title status-title">Latest Operations</span>
+              <div className="status-configuration-data">
+                <DataBlock description={fromHomeToForeignText} value={lastEventOnForeign} type="" />
+                <DataBlock description={fromForeignToHomeText} value={lastEventOnHome} type="" />
+              </div>
+            </div>
+          )}
         </div>
         <div className="pattern-background">
           <div className="pattern-background-image" />

ui/src/stores/ForeignStore.js

@@ -110,6 +110,9 @@ class ForeignStore {
     finished: false
   }
 
+  @observable
+  lastEventRelayedOnForeign = 0
+
   feeManager = {
     totalFeeDistributedFromSignatures: BN(0),
     totalFeeDistributedFromAffirmation: BN(0)
@@ -419,6 +422,12 @@ class ForeignStore {
             this.rootStore.homeStore.statistics.withdrawalsValue
           )
         })
+        const lastEventRelayedOnForeign = events.length ? events[events.length - 1] : null
+        if (lastEventRelayedOnForeign) {
+          const blockNumber = lastEventRelayedOnForeign.blockNumber
+          const block = await this.foreignWeb3.eth.getBlock(blockNumber)
+          this.lastEventRelayedOnForeign = block.timestamp
+        }
       } else {
         this.statistics.finished = true
       }

ui/src/stores/HomeStore.js

@@ -126,6 +126,9 @@ class HomeStore {
   @observable
   feeEventsFinished = false
 
+  @observable
+  lastEventRelayedOnHome = 0
+
   @observable
   depositFeeCollected = {
     value: BN(0),
@@ -462,6 +465,12 @@ class HomeStore {
           this.statistics.finished = true
           this.statistics.totalBridged = this.statistics.depositsValue.plus(this.statistics.withdrawalsValue)
         })
+        const lastEventRelayedOnHome = events.length ? events[events.length - 1] : null
+        if (lastEventRelayedOnHome) {
+          const blockNumber = lastEventRelayedOnHome.blockNumber
+          const block = await this.homeWeb3.eth.getBlock(blockNumber)
+          this.lastEventRelayedOnHome = block.timestamp
+        }
       }
     } catch (e) {
       console.error(e)

yarn.lock

@@ -6617,6 +6617,11 @@ date-fns@^1.23.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.13.0.tgz#d7b8a0a2d392e8d88a8024d0a46b980bbfdbd708"
+  integrity sha512-xm0c61mevGF7f0XpCGtDTGpzEFC/1fpLXHbmFpxZZQJuvByIK2ozm6cSYuU+nxFYOPh2EuCfzUwlTEFwKG+h5w==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -8183,7 +8188,7 @@ ethereumjs-abi@0.6.7:
     bn.js "^4.11.8"
     ethereumjs-util "^6.0.0"
 
-"ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
+ethereumjs-abi@0.6.8, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
   version "0.6.8"
   resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#1cfbb13862f90f0b391d8a699544d5fe4dfb8c7b"
   dependencies:
@@ -8267,6 +8272,19 @@ ethereumjs-tx@^1.1.1, ethereumjs-tx@^1.2.0, ethereumjs-tx@^1.2.2, ethereumjs-tx@
     ethereum-common "^0.0.18"
     ethereumjs-util "^5.0.0"
 
+ethereumjs-util@5.2.0, ethereumjs-util@^5.0.0, ethereumjs-util@^5.0.1, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereumjs-util@^5.1.3, ethereumjs-util@^5.1.5:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz#3e0c0d1741471acf1036052d048623dee54ad642"
+  integrity sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==
+  dependencies:
+    bn.js "^4.11.0"
+    create-hash "^1.1.2"
+    ethjs-util "^0.1.3"
+    keccak "^1.0.2"
+    rlp "^2.0.0"
+    safe-buffer "^5.1.1"
+    secp256k1 "^3.0.1"
+
 ethereumjs-util@6.1.0, ethereumjs-util@~6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-6.1.0.tgz#e9c51e5549e8ebd757a339cc00f5380507e799c8"
@@ -8304,19 +8322,6 @@ ethereumjs-util@^4.0.1, ethereumjs-util@^4.3.0:
     rlp "^2.0.0"
     secp256k1 "^3.0.1"
 
-ethereumjs-util@^5.0.0, ethereumjs-util@^5.0.1, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereumjs-util@^5.1.3, ethereumjs-util@^5.1.5:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz#3e0c0d1741471acf1036052d048623dee54ad642"
-  integrity sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==
-  dependencies:
-    bn.js "^4.11.0"
-    create-hash "^1.1.2"
-    ethjs-util "^0.1.3"
-    keccak "^1.0.2"
-    rlp "^2.0.0"
-    safe-buffer "^5.1.1"
-    secp256k1 "^3.0.1"
-
 ethereumjs-vm@4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ethereumjs-vm/-/ethereumjs-vm-4.1.3.tgz#dc8eb45f47d775da9f0b2437d5e20896fdf66f37"