Display latest operations in UI status page for mediators (#332)
This commit is contained in:
parent
d3576f5a79
commit
4bd3576691
@ -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",
|
||||
|
@ -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;
|
||||
|
@ -4,19 +4,25 @@ import { DataBlock } from './DataBlock'
|
||||
|
||||
export const Configuration = ({ requiredSignatures, authorities, symbol, maxSingleDeposit, maxTotalBalance }) => (
|
||||
<div className="status-configuration-data">
|
||||
<DataBlock description="Required Signatures" value={numeral(requiredSignatures).format('0')} type="" />
|
||||
<div className="separator" />
|
||||
<DataBlock description="Authorities" value={numeral(authorities).format('0')} type="" />
|
||||
{requiredSignatures.toString() !== '0' && (
|
||||
<DataBlock description="Required Signatures" value={numeral(requiredSignatures).format('0')} type="" />
|
||||
)}
|
||||
{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)}
|
||||
|
@ -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" />
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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)
|
||||
|
33
yarn.lock
33
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"
|
||||
|
Loading…
Reference in New Issue
Block a user