From 7b51ed7a14a3202d7285b0347ad45a18eef16cef Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 24 May 2022 16:33:47 +0100 Subject: [PATCH 01/24] Moved delegates components to dPos domain and created manager files --- .../screens/managers/monitor/delegates/activeDelegatesManager.js | 0 .../managers/monitor/delegates/sanctionedDelegatesManager.js | 0 .../screens/managers/monitor/delegates/standbyDelegatesManager.js | 0 .../screens/managers/monitor/delegates/votedDelegatesManager.js | 0 .../dpos/validator/components}/delegatesTable/dataColumns.js | 0 .../dpos/validator/components}/delegatesTable/delegateRow.js | 0 .../modules/dpos/validator/components}/delegatesTable/index.js | 0 .../dpos/validator/components}/delegatesTable/tableHeader.js | 0 .../modules/dpos/validator/components}/latestVotes/index.js | 0 .../modules/dpos/validator/components}/latestVotes/tableHeader.js | 0 .../modules/dpos/validator/components}/latestVotes/voteRow.js | 0 .../dpos/validator/components}/overview/delegatesOverview.js | 0 .../modules/dpos/validator/components}/overview/forger.js | 0 .../modules/dpos/validator/components}/overview/forgingDetails.js | 0 .../modules/dpos/validator/components}/overview/numericInfo.js | 0 .../modules/dpos/validator/components}/overview/overview.css | 0 16 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js create mode 100644 packages/views/screens/managers/monitor/delegates/sanctionedDelegatesManager.js create mode 100644 packages/views/screens/managers/monitor/delegates/standbyDelegatesManager.js create mode 100644 packages/views/screens/managers/monitor/delegates/votedDelegatesManager.js rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/delegatesTable/dataColumns.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/delegatesTable/delegateRow.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/delegatesTable/index.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/delegatesTable/tableHeader.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/latestVotes/index.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/latestVotes/tableHeader.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/latestVotes/voteRow.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/overview/delegatesOverview.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/overview/forger.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/overview/forgingDetails.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/overview/numericInfo.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components}/overview/overview.css (100%) diff --git a/packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js b/packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/views/screens/managers/monitor/delegates/sanctionedDelegatesManager.js b/packages/views/screens/managers/monitor/delegates/sanctionedDelegatesManager.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/views/screens/managers/monitor/delegates/standbyDelegatesManager.js b/packages/views/screens/managers/monitor/delegates/standbyDelegatesManager.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/views/screens/managers/monitor/delegates/votedDelegatesManager.js b/packages/views/screens/managers/monitor/delegates/votedDelegatesManager.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/views/screens/managers/monitor/delegates/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegatesTable/dataColumns.js rename to src/modules/dpos/validator/components/delegatesTable/dataColumns.js diff --git a/packages/views/screens/managers/monitor/delegates/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegatesTable/delegateRow.js rename to src/modules/dpos/validator/components/delegatesTable/delegateRow.js diff --git a/packages/views/screens/managers/monitor/delegates/delegatesTable/index.js b/src/modules/dpos/validator/components/delegatesTable/index.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegatesTable/index.js rename to src/modules/dpos/validator/components/delegatesTable/index.js diff --git a/packages/views/screens/managers/monitor/delegates/delegatesTable/tableHeader.js b/src/modules/dpos/validator/components/delegatesTable/tableHeader.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegatesTable/tableHeader.js rename to src/modules/dpos/validator/components/delegatesTable/tableHeader.js diff --git a/packages/views/screens/managers/monitor/delegates/latestVotes/index.js b/src/modules/dpos/validator/components/latestVotes/index.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/latestVotes/index.js rename to src/modules/dpos/validator/components/latestVotes/index.js diff --git a/packages/views/screens/managers/monitor/delegates/latestVotes/tableHeader.js b/src/modules/dpos/validator/components/latestVotes/tableHeader.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/latestVotes/tableHeader.js rename to src/modules/dpos/validator/components/latestVotes/tableHeader.js diff --git a/packages/views/screens/managers/monitor/delegates/latestVotes/voteRow.js b/src/modules/dpos/validator/components/latestVotes/voteRow.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/latestVotes/voteRow.js rename to src/modules/dpos/validator/components/latestVotes/voteRow.js diff --git a/packages/views/screens/managers/monitor/delegates/overview/delegatesOverview.js b/src/modules/dpos/validator/components/overview/delegatesOverview.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/overview/delegatesOverview.js rename to src/modules/dpos/validator/components/overview/delegatesOverview.js diff --git a/packages/views/screens/managers/monitor/delegates/overview/forger.js b/src/modules/dpos/validator/components/overview/forger.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/overview/forger.js rename to src/modules/dpos/validator/components/overview/forger.js diff --git a/packages/views/screens/managers/monitor/delegates/overview/forgingDetails.js b/src/modules/dpos/validator/components/overview/forgingDetails.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/overview/forgingDetails.js rename to src/modules/dpos/validator/components/overview/forgingDetails.js diff --git a/packages/views/screens/managers/monitor/delegates/overview/numericInfo.js b/src/modules/dpos/validator/components/overview/numericInfo.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/overview/numericInfo.js rename to src/modules/dpos/validator/components/overview/numericInfo.js diff --git a/packages/views/screens/managers/monitor/delegates/overview/overview.css b/src/modules/dpos/validator/components/overview/overview.css similarity index 100% rename from packages/views/screens/managers/monitor/delegates/overview/overview.css rename to src/modules/dpos/validator/components/overview/overview.css From c0a39221ebfcd99dbb5884ee66eb983fbe3bf290 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 25 May 2022 11:21:23 +0100 Subject: [PATCH 02/24] Moved basic delegate managers to dpos domain --- .../delegates/activeDelegatesManager.js | 0 .../manager/activeDelegatesManager.js | 18 ++++++++++++++++++ .../manager}/sanctionedDelegatesManager.js | 0 .../manager}/standbyDelegatesManager.js | 0 .../manager}/votedDelegatesManager.js | 0 5 files changed, 18 insertions(+) delete mode 100644 packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js create mode 100644 src/modules/dpos/validator/manager/activeDelegatesManager.js rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/manager}/sanctionedDelegatesManager.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/manager}/standbyDelegatesManager.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/manager}/votedDelegatesManager.js (100%) diff --git a/packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js b/packages/views/screens/managers/monitor/delegates/activeDelegatesManager.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/modules/dpos/validator/manager/activeDelegatesManager.js b/src/modules/dpos/validator/manager/activeDelegatesManager.js new file mode 100644 index 0000000000..e30cdf4136 --- /dev/null +++ b/src/modules/dpos/validator/manager/activeDelegatesManager.js @@ -0,0 +1,18 @@ +import { compose } from 'redux'; +// import { withRouter } from 'react-router-dom'; +import { connect } from 'react-redux'; +import { withTranslation } from 'react-i18next'; +import withData from 'src/utils/withData'; +import withFilters from 'src/utils/withFilters'; + +const mapStateToProps = (state) => ({ + blocks: state.blocks, +}); + +const activeDelegatesManager = compose( + // withRouter, + connect(mapStateToProps), + // withData({ +); + +export default activeDelegatesManager; \ No newline at end of file diff --git a/packages/views/screens/managers/monitor/delegates/sanctionedDelegatesManager.js b/src/modules/dpos/validator/manager/sanctionedDelegatesManager.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/sanctionedDelegatesManager.js rename to src/modules/dpos/validator/manager/sanctionedDelegatesManager.js diff --git a/packages/views/screens/managers/monitor/delegates/standbyDelegatesManager.js b/src/modules/dpos/validator/manager/standbyDelegatesManager.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/standbyDelegatesManager.js rename to src/modules/dpos/validator/manager/standbyDelegatesManager.js diff --git a/packages/views/screens/managers/monitor/delegates/votedDelegatesManager.js b/src/modules/dpos/validator/manager/votedDelegatesManager.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/votedDelegatesManager.js rename to src/modules/dpos/validator/manager/votedDelegatesManager.js From 0afe7149e532174a23cac11cda87fac436d3991a Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 25 May 2022 12:24:08 +0100 Subject: [PATCH 03/24] Moved delegates monitor files to dpos domain and updated imports --- .../components/delegatesMonitorView}/delegates.css | 0 .../components/delegatesMonitorView}/delegates.js | 8 ++++---- .../components/delegatesMonitorView}/delegates.test.js | 0 .../validator/components/delegatesMonitorView}/index.js | 0 4 files changed, 4 insertions(+), 4 deletions(-) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components/delegatesMonitorView}/delegates.css (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components/delegatesMonitorView}/delegates.js (95%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components/delegatesMonitorView}/delegates.test.js (100%) rename {packages/views/screens/managers/monitor/delegates => src/modules/dpos/validator/components/delegatesMonitorView}/index.js (100%) diff --git a/packages/views/screens/managers/monitor/delegates/delegates.css b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.css similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegates.css rename to src/modules/dpos/validator/components/delegatesMonitorView/delegates.css diff --git a/packages/views/screens/managers/monitor/delegates/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js similarity index 95% rename from packages/views/screens/managers/monitor/delegates/delegates.js rename to src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index b0789e69b1..6b650da349 100644 --- a/packages/views/screens/managers/monitor/delegates/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -7,10 +7,10 @@ import BoxContent from 'src/theme/box/content'; import BoxTabs from 'src/theme/tabs'; import { ROUND_LENGTH } from '@dpos/validator/consts'; import styles from './delegates.css'; -import DelegatesOverview from './overview/delegatesOverview'; -import ForgingDetails from './overview/forgingDetails'; -import LatestVotes from './latestVotes'; -import DelegatesTable from './delegatesTable'; +import DelegatesOverview from '../overview/delegatesOverview'; +import ForgingDetails from '../overview/forgingDetails'; +import LatestVotes from '../latestVotes'; +import DelegatesTable from '../delegatesTable'; // eslint-disable-next-line max-statements const DelegatesMonitor = ({ diff --git a/packages/views/screens/managers/monitor/delegates/delegates.test.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/delegates.test.js rename to src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js diff --git a/packages/views/screens/managers/monitor/delegates/index.js b/src/modules/dpos/validator/components/delegatesMonitorView/index.js similarity index 100% rename from packages/views/screens/managers/monitor/delegates/index.js rename to src/modules/dpos/validator/components/delegatesMonitorView/index.js From a07f401ad606d74739ee7d9c6f3de5d553b6334a Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 25 May 2022 12:26:11 +0100 Subject: [PATCH 04/24] Removed individual delegate managers --- .../manager/activeDelegatesManager.js | 18 ------------------ .../manager/sanctionedDelegatesManager.js | 0 .../manager/standbyDelegatesManager.js | 0 .../validator/manager/votedDelegatesManager.js | 0 4 files changed, 18 deletions(-) delete mode 100644 src/modules/dpos/validator/manager/activeDelegatesManager.js delete mode 100644 src/modules/dpos/validator/manager/sanctionedDelegatesManager.js delete mode 100644 src/modules/dpos/validator/manager/standbyDelegatesManager.js delete mode 100644 src/modules/dpos/validator/manager/votedDelegatesManager.js diff --git a/src/modules/dpos/validator/manager/activeDelegatesManager.js b/src/modules/dpos/validator/manager/activeDelegatesManager.js deleted file mode 100644 index e30cdf4136..0000000000 --- a/src/modules/dpos/validator/manager/activeDelegatesManager.js +++ /dev/null @@ -1,18 +0,0 @@ -import { compose } from 'redux'; -// import { withRouter } from 'react-router-dom'; -import { connect } from 'react-redux'; -import { withTranslation } from 'react-i18next'; -import withData from 'src/utils/withData'; -import withFilters from 'src/utils/withFilters'; - -const mapStateToProps = (state) => ({ - blocks: state.blocks, -}); - -const activeDelegatesManager = compose( - // withRouter, - connect(mapStateToProps), - // withData({ -); - -export default activeDelegatesManager; \ No newline at end of file diff --git a/src/modules/dpos/validator/manager/sanctionedDelegatesManager.js b/src/modules/dpos/validator/manager/sanctionedDelegatesManager.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/modules/dpos/validator/manager/standbyDelegatesManager.js b/src/modules/dpos/validator/manager/standbyDelegatesManager.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/modules/dpos/validator/manager/votedDelegatesManager.js b/src/modules/dpos/validator/manager/votedDelegatesManager.js deleted file mode 100644 index e69de29bb2..0000000000 From c4bc60c04d32dcffca831a77afdb4913466afd7a Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 25 May 2022 16:39:20 +0100 Subject: [PATCH 05/24] Updated file imports and route map --- packages/views/screens/router/routesMap.js | 2 +- .../dpos/validator/components/delegatesTable/dataColumns.js | 2 +- .../dpos/validator/components/delegatesTable/delegateRow.js | 2 +- .../dpos/validator/components/delegatesTable/tableHeader.js | 2 +- src/modules/dpos/validator/components/latestVotes/voteRow.js | 2 +- src/modules/dpos/validator/components/overview/overview.css | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/views/screens/router/routesMap.js b/packages/views/screens/router/routesMap.js index 860e92212d..79435226f0 100644 --- a/packages/views/screens/router/routesMap.js +++ b/packages/views/screens/router/routesMap.js @@ -3,7 +3,7 @@ import BlockDetails from '@block/manager/blockDetailsManager'; import Blocks from '@block/manager/blocksManager'; import Bookmarks from '@bookmark/manager/BookmarkListManager'; import Dashboard from '@screens/managers/dashboard'; -import DelegatesMonitor from '@screens/managers/monitor/delegates'; +import DelegatesMonitor from '@dpos/validator/components/delegatesMonitorView'; import DelegatesPerformanceModal from '@screens/managers/wallet/delegatePerformanceModal'; import HwWalletLogin from '@screens/managers/hwWalletLogin'; import Login from '@auth/components/Signin'; diff --git a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js index c00df92ceb..43d565fbaf 100644 --- a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js +++ b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js @@ -15,7 +15,7 @@ import { getForgingTimeClass, getDelegateRankClass, } from './tableHeader'; -import styles from '../delegates.css'; +import styles from '../delegatesMonitorView/delegates.css'; const roundStates = { forging: 'Forging', diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index b1e3c5480c..955bf373e7 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'; import routes from '@screens/router/routes'; import { useTheme } from 'src/theme/Theme'; import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; -import styles from '../delegates.css'; +import styles from '../delegatesMonitorView/delegates.css'; import { DelegateWeight, DelegateDetails, diff --git a/src/modules/dpos/validator/components/delegatesTable/tableHeader.js b/src/modules/dpos/validator/components/delegatesTable/tableHeader.js index 1fe78a1190..e0bea090ed 100644 --- a/src/modules/dpos/validator/components/delegatesTable/tableHeader.js +++ b/src/modules/dpos/validator/components/delegatesTable/tableHeader.js @@ -1,6 +1,6 @@ /* eslint-disable no-nested-ternary */ import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import styles from '../delegates.css'; +import styles from '../delegatesMonitorView/delegates.css'; export const getStatusClass = (activeTab) => { switch (activeTab) { diff --git a/src/modules/dpos/validator/components/latestVotes/voteRow.js b/src/modules/dpos/validator/components/latestVotes/voteRow.js index 84a1bcc85a..a1b09a3b13 100644 --- a/src/modules/dpos/validator/components/latestVotes/voteRow.js +++ b/src/modules/dpos/validator/components/latestVotes/voteRow.js @@ -7,7 +7,7 @@ import DateTimeFromTimestamp from 'src/modules/common/components/timestamp'; import WalletVisualWithAddress from '@wallet/components/walletVisualWithAddress'; import DialogLink from 'src/theme/dialog/link'; import VoteDetails from '@transaction/components/VoteItem'; -import styles from '../delegates.css'; +import styles from '../delegatesMonitorView/delegates.css'; const VotesItemsList = ({ votes = [], delegates }) => { const [showAll, setShowAll] = useState(false); diff --git a/src/modules/dpos/validator/components/overview/overview.css b/src/modules/dpos/validator/components/overview/overview.css index 99b3b109bd..beedd190d1 100644 --- a/src/modules/dpos/validator/components/overview/overview.css +++ b/src/modules/dpos/validator/components/overview/overview.css @@ -1,4 +1,4 @@ -@import '../../../../../../../setup/react/app/mixins.css'; +@import '../../../../../../setup/react/app/mixins.css'; .wrapper { & .content { From a3d4002ed0c7ad3b2c574765b6c218326b9a3b74 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 27 May 2022 12:54:46 +0100 Subject: [PATCH 06/24] Created delegate monitor tabs --- .../components/activeDelegatesTab/index.js | 22 ++++++++++ .../delegatesMonitorView/delegates.js | 42 +++++++++++++++++++ .../sanctionedDelegatesTab/index.js | 22 ++++++++++ .../components/standByDelegatesTab/index.js | 22 ++++++++++ .../components/watchedDelegatesTab/index.js | 22 ++++++++++ 5 files changed, 130 insertions(+) create mode 100644 src/modules/dpos/validator/components/activeDelegatesTab/index.js create mode 100644 src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js create mode 100644 src/modules/dpos/validator/components/standByDelegatesTab/index.js create mode 100644 src/modules/dpos/validator/components/watchedDelegatesTab/index.js diff --git a/src/modules/dpos/validator/components/activeDelegatesTab/index.js b/src/modules/dpos/validator/components/activeDelegatesTab/index.js new file mode 100644 index 0000000000..504d6dba31 --- /dev/null +++ b/src/modules/dpos/validator/components/activeDelegatesTab/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import DelegatesTable from '../delegatesTable'; + +const ActiveDelegatesTab = ({ + blocks, + delegatesWithForgingTimes, + filters, + watchList, + t, + activeTab, +}) => ( + +); + +export default ActiveDelegatesTab; diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index 6b650da349..69e9cd84e0 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -1,3 +1,5 @@ +/* eslint-disable complexity */ +/* eslint-disable no-nested-ternary */ import React, { useState, useEffect } from 'react'; import { Input } from 'src/theme'; @@ -11,6 +13,10 @@ import DelegatesOverview from '../overview/delegatesOverview'; import ForgingDetails from '../overview/forgingDetails'; import LatestVotes from '../latestVotes'; import DelegatesTable from '../delegatesTable'; +import ActiveDelegatesTab from '../activeDelegatesTab'; +import StandByDelegatesTab from '../standByDelegatesTab'; +import SanctionedDelegatesTab from '../sanctionedDelegatesTab'; +import WatchedDelegatesTab from '../watchedDelegatesTab'; // eslint-disable-next-line max-statements const DelegatesMonitor = ({ @@ -149,6 +155,42 @@ const DelegatesMonitor = ({ {activeTab === 'votes' ? ( + ) : activeTab === 'active' ? ( + + ) : activeTab === 'standby' ? ( + + ) : activeTab === 'sanctioned' ? ( + + ) : activeTab === 'watched' ? ( + ) : ( ( + +); + +export default SanctionedDelegatesTab; diff --git a/src/modules/dpos/validator/components/standByDelegatesTab/index.js b/src/modules/dpos/validator/components/standByDelegatesTab/index.js new file mode 100644 index 0000000000..d28215b576 --- /dev/null +++ b/src/modules/dpos/validator/components/standByDelegatesTab/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import DelegatesTable from '../delegatesTable'; + +const StandByDelegatesTab = ({ + blocks, + standByDelegates, + filters, + watchList, + t, + activeTab, +}) => ( + +); + +export default StandByDelegatesTab; diff --git a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js new file mode 100644 index 0000000000..7ae432e721 --- /dev/null +++ b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import DelegatesTable from '../delegatesTable'; + +const WatchedDelegatesTab = ({ + blocks, + watchedDelegates, + filters, + watchList, + t, + activeTab, +}) => ( + +); + +export default WatchedDelegatesTab; From a51f38ceda458aac164fbd487593ce7bfb6d57c6 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 27 May 2022 16:46:09 +0100 Subject: [PATCH 07/24] Refactored delegateRow utils --- .../components/delegatesTable/delegateRow.js | 14 +------------- src/modules/dpos/validator/utils/getForgingTime.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 13 deletions(-) create mode 100644 src/modules/dpos/validator/utils/getForgingTime.js diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index 955bf373e7..2dfaaf665a 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux'; import routes from '@screens/router/routes'; import { useTheme } from 'src/theme/Theme'; import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; +import getForgingTime from '../../utils/getForgingTime'; import styles from '../delegatesMonitorView/delegates.css'; import { DelegateWeight, @@ -15,19 +16,6 @@ import { DelegateRank, } from './dataColumns'; -const getForgingTime = (time) => { - if (!time) return '-'; - const diff = time - Math.floor((new Date()).getTime() / 1000); - if (Math.abs(diff) < 9) return 'now'; - const absTime = Math.abs(diff); - const minutes = absTime / 60 >= 1 ? `${Math.floor(absTime / 60)}m ` : ''; - const seconds = absTime % 60 >= 1 ? `${absTime % 60}s` : ''; - if (diff > 0) { - return `in ${minutes}${seconds}`; - } - return `${minutes}${seconds} ago`; -}; - const DelegateRow = ({ data, className, t, activeTab, watchList, setActiveTab, blocks, }) => { diff --git a/src/modules/dpos/validator/utils/getForgingTime.js b/src/modules/dpos/validator/utils/getForgingTime.js new file mode 100644 index 0000000000..179e311246 --- /dev/null +++ b/src/modules/dpos/validator/utils/getForgingTime.js @@ -0,0 +1,14 @@ +const getForgingTime = (time) => { + if (!time) return '-'; + const diff = time - Math.floor((new Date()).getTime() / 1000); + if (Math.abs(diff) < 9) return 'now'; + const absTime = Math.abs(diff); + const minutes = absTime / 60 >= 1 ? `${Math.floor(absTime / 60)}m ` : ''; + const seconds = absTime % 60 >= 1 ? `${absTime % 60}s` : ''; + if (diff > 0) { + return `in ${minutes}${seconds}`; + } + return `${minutes}${seconds} ago`; +}; + +export default getForgingTime; From f7246e06b2bea07071326642bedd436ef326e435 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 27 May 2022 19:11:28 +0100 Subject: [PATCH 08/24] Refactored delegatesRow component to use context and layout schema --- .../components/delegatesTable/dataColumns.js | 83 +++++++---- .../components/delegatesTable/delegateRow.js | 45 ++++-- .../components/delegatesTable/layoutSchema.js | 39 +++++ .../components/delegatesTable/schemas.css | 140 ++++++++++++++++++ .../validator/context/delegateRowContext.js | 21 +++ 5 files changed, 292 insertions(+), 36 deletions(-) create mode 100644 src/modules/dpos/validator/components/delegatesTable/layoutSchema.js create mode 100644 src/modules/dpos/validator/components/delegatesTable/schemas.css create mode 100644 src/modules/dpos/validator/context/delegateRowContext.js diff --git a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js index 43d565fbaf..f47de59d18 100644 --- a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js +++ b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { formatAmountBasedOnLocale } from 'src/utils/formattedNumber'; import { fromRawLsk } from '@token/fungible/utils/lsk'; @@ -7,6 +7,8 @@ import WalletVisual from '@wallet/components/walletVisual'; import Tooltip from 'src/theme/Tooltip'; import Icon from 'src/theme/Icon'; import { DEFAULT_STANDBY_THRESHOLD } from '@dpos/validator/consts'; +import DelegateRowContext from '../../context/delegateRowContext'; +import styles from '../delegatesMonitorView/delegates.css'; import { getDelegateDetailsClass, getStatusClass, @@ -15,7 +17,6 @@ import { getForgingTimeClass, getDelegateRankClass, } from './tableHeader'; -import styles from '../delegatesMonitorView/delegates.css'; const roundStates = { forging: 'Forging', @@ -37,13 +38,26 @@ const delegateStatus = { ineligible: 'Ineligible', }; -export const DelegateRank = ({ data, activeTab }) => ( - - {data.rank} - -); +// const { +// data, activeTab, watched = false, addToWatchList, +// removeFromWatchList, value, /* watchList, setActiveTab, */ +// /* blocks, */ state, time, status, /* lastBlock, */ +// isBanned, totalVotesReceived, theme, t, +// } = useContext(DelegateRowContext); -export const DelegateWeight = ({ value, activeTab }) => { +// export const DelegateRank = ({ data, activeTab }) => ( +export const DelegateRank = () => { + const { data, activeTab } = useContext(DelegateRowContext); + return ( + + {data.rank} + + ); +}; + +// export const DelegateWeight = ({ value, activeTab }) => { +export const DelegateWeight = () => { + const { value, activeTab } = useContext(DelegateRowContext); const formatted = formatAmountBasedOnLocale({ value: fromRawLsk(value), format: '0a', @@ -56,9 +70,13 @@ export const DelegateWeight = ({ value, activeTab }) => { ); }; -export const DelegateDetails = ({ - t, watched = false, data, activeTab, removeFromWatchList, addToWatchList, -}) => { +// export const DelegateDetails = ({ +// t, watched = false, data, activeTab, removeFromWatchList, addToWatchList, +// }) => { +export const DelegateDetails = () => { + const { + data, activeTab, watched = false, addToWatchList, removeFromWatchList, t, + } = useContext(DelegateRowContext); const showEyeIcon = activeTab === 'active' || activeTab === 'standby' || activeTab === 'sanctioned' || activeTab === 'watched'; return ( @@ -99,9 +117,13 @@ export const DelegateDetails = ({ ); }; -export const RoundState = ({ - activeTab, state, isBanned, t, time, -}) => { +// export const RoundState = ({ +// activeTab, state, isBanned, t, time, +// }) => { +export const RoundState = () => { + const { + state, activeTab, isBanned, time, t, + } = useContext(DelegateRowContext); if (state === undefined) { return ( - @@ -138,31 +160,40 @@ export const RoundState = ({ ); }; -const getDelegateStatus = (key, totalVotesReceived) => { +// const getDelegateStatus = (key, totalVotesReceived) => { +const getDelegateStatus = (key, grossVotesReceived) => { if (key === 'banned' || key === 'punished' || key === 'active') { return [key, delegateStatus[key]]; } - if (totalVotesReceived < DEFAULT_STANDBY_THRESHOLD) { + if (grossVotesReceived < DEFAULT_STANDBY_THRESHOLD) { return ['ineligible', delegateStatus.ineligible]; } return [key, delegateStatus[key]]; }; -export const DelegateStatus = ({ - activeTab, status, totalVotesReceived, theme, -}) => { - const [key, value] = getDelegateStatus(status, totalVotesReceived); +// export const DelegateStatus = ({ +// activeTab, status, totalVotesReceived, theme, +// }) => { +export const DelegateStatus = () => { + const { + activeTab, status, totalVotesReceived, theme, + } = useContext(DelegateRowContext); + const [key, val] = getDelegateStatus(status, totalVotesReceived); return ( - {value} + {val} ); }; -export const ForgingTime = ({ activeTab, time, state }) => ( - - {state === 'missedBlock' ? '-' : time} - -); +// export const ForgingTime = ({ activeTab, time, state }) => ( +export const ForgingTime = () => { + const { activeTab, state, time } = useContext(DelegateRowContext); + return ( + + {state === 'missedBlock' ? '-' : time} + + ); +}; diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index 2dfaaf665a..b716b5c2b5 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -6,15 +6,17 @@ import routes from '@screens/router/routes'; import { useTheme } from 'src/theme/Theme'; import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; import getForgingTime from '../../utils/getForgingTime'; +import DelegateRowContext from '../../context/delegateRowContext'; import styles from '../delegatesMonitorView/delegates.css'; -import { - DelegateWeight, - DelegateDetails, - RoundState, - DelegateStatus, - ForgingTime, - DelegateRank, -} from './dataColumns'; +// import { +// DelegateWeight, +// DelegateDetails, +// RoundState, +// DelegateStatus, +// ForgingTime, +// DelegateRank, +// } from './dataColumns'; +import LayoutSchema from './layoutSchema'; const DelegateRow = ({ data, className, t, activeTab, watchList, setActiveTab, blocks, @@ -42,12 +44,35 @@ const DelegateRow = ({ dispatch(addedToWatchList({ address: data.address })); }; + const Layout = LayoutSchema[activeTab] || LayoutSchema.default; + return ( - + {Layout.components.map((Component, index) => ( + + ))} + + {/* ) : null - } + } */} ); }; diff --git a/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js b/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js new file mode 100644 index 0000000000..29352a142f --- /dev/null +++ b/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js @@ -0,0 +1,39 @@ +import { + DelegateWeight, + DelegateDetails, + RoundState, + DelegateStatus, + ForgingTime, + DelegateRank, +} from './dataColumns'; +import styles from './schemas.css'; + +const basic = [DelegateDetails]; +const minimal = [...basic, DelegateStatus]; +const hosted = [...basic, DelegateWeight]; +const full = [DelegateDetails, DelegateWeight, DelegateRank, ForgingTime, RoundState]; + +const LayoutSchema = { + active: { + components: full, + className: styles.fullLayout, + }, + standBy: { + components: [...hosted, DelegateRank, DelegateStatus], + className: styles.standbyLayout, + }, + sanctioned: { + components: minimal, + className: styles.sanctionedLayout, + }, + watched: { + components: [...full, DelegateRank], + className: styles.hostedLayout, + }, + default: { + components: full, + className: styles.generalLayout, + }, +}; + +export default LayoutSchema; diff --git a/src/modules/dpos/validator/components/delegatesTable/schemas.css b/src/modules/dpos/validator/components/delegatesTable/schemas.css new file mode 100644 index 0000000000..12a0f1e5e4 --- /dev/null +++ b/src/modules/dpos/validator/components/delegatesTable/schemas.css @@ -0,0 +1,140 @@ +.container { + & .votes { + grid-area: votes; + } + + &.full, + &.general { + grid-template-areas: "sender recipient date amount fee status"; + + & > * { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + } + + & > *:nth-child(1), + & > *:nth-child(2) { + flex-basis: 25%; + max-width: 25%; + } + + & > *:nth-child(4), + & > *:nth-child(3) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + & > *:nth-child(5), + & > *:nth-child(6) { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + & > *:last-child { + justify-content: flex-end; + } + + @media (--medium-viewport) { + & > *:nth-child(4) { + flex-basis: 25%; + max-width: 25%; + } + + & > *:nth-child(5) { + display: none; + } + } + } + + &.standbyLayout { + grid-template-areas: "counterpart date fee assets amount"; + + & > * { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + } + + & > *:nth-child(1) { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + + & > *:nth-child(2), + & > *:nth-child(3), + & > *:nth-child(4), + & > *:nth-child(5) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + & > *:first-child { + padding-left: 10px; + } + + & > *:last-child { + justify-content: flex-end; + } + } + + &.watchedLayout { + grid-template-areas: "counterpart date fee assets amount"; + + & > * { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + } + + & > *:nth-child(1) { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + + & > *:nth-child(2), + & > *:nth-child(3), + & > *:nth-child(4), + & > *:nth-child(5) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + & > *:first-child { + padding-left: 10px; + } + + & > *:last-child { + justify-content: flex-end; + } + } + + &.sanctionedLayout { + grid-template-areas: "counterpart amount"; + + & > * { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + & > *:first-child { + flex-flow: row nowrap; + justify-content: flex-start; + flex-grow: 1; + padding-left: 10px; + } + + & > *:last-child { + width: auto; + justify-content: flex-end; + } + } +} diff --git a/src/modules/dpos/validator/context/delegateRowContext.js b/src/modules/dpos/validator/context/delegateRowContext.js new file mode 100644 index 0000000000..f67beb589f --- /dev/null +++ b/src/modules/dpos/validator/context/delegateRowContext.js @@ -0,0 +1,21 @@ +import { createContext } from 'react'; + +const DelegateRowContext = createContext( + { + data: {}, + activeTab: '', + watched: '', + addToWatchList: () => {}, + removeFromWatchList: () => {}, + value: '0', + state: '', + time: '', + status: '', + isBanned: false, + totalVotesReceived: '0', + theme: '', + t: str => str, + }, +); + +export default DelegateRowContext; From 6f149a902185b7021a466adf6640834c76db45c9 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 30 May 2022 16:04:50 +0100 Subject: [PATCH 09/24] Refactored delegate row component including context --- .../components/delegatesTable/dataColumns.js | 28 ++------ .../components/delegatesTable/delegateRow.js | 66 ------------------- .../components/delegatesTable/layoutSchema.js | 5 +- .../validator/context/delegateRowContext.js | 5 -- 4 files changed, 6 insertions(+), 98 deletions(-) diff --git a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js index f47de59d18..e1c017653e 100644 --- a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js +++ b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js @@ -38,14 +38,6 @@ const delegateStatus = { ineligible: 'Ineligible', }; -// const { -// data, activeTab, watched = false, addToWatchList, -// removeFromWatchList, value, /* watchList, setActiveTab, */ -// /* blocks, */ state, time, status, /* lastBlock, */ -// isBanned, totalVotesReceived, theme, t, -// } = useContext(DelegateRowContext); - -// export const DelegateRank = ({ data, activeTab }) => ( export const DelegateRank = () => { const { data, activeTab } = useContext(DelegateRowContext); return ( @@ -55,9 +47,8 @@ export const DelegateRank = () => { ); }; -// export const DelegateWeight = ({ value, activeTab }) => { export const DelegateWeight = () => { - const { value, activeTab } = useContext(DelegateRowContext); + const { data: { value }, activeTab } = useContext(DelegateRowContext); const formatted = formatAmountBasedOnLocale({ value: fromRawLsk(value), format: '0a', @@ -70,9 +61,6 @@ export const DelegateWeight = () => { ); }; -// export const DelegateDetails = ({ -// t, watched = false, data, activeTab, removeFromWatchList, addToWatchList, -// }) => { export const DelegateDetails = () => { const { data, activeTab, watched = false, addToWatchList, removeFromWatchList, t, @@ -117,12 +105,9 @@ export const DelegateDetails = () => { ); }; -// export const RoundState = ({ -// activeTab, state, isBanned, t, time, -// }) => { export const RoundState = () => { const { - state, activeTab, isBanned, time, t, + data: { state, isBanned }, activeTab, time, t, } = useContext(DelegateRowContext); if (state === undefined) { return ( @@ -160,7 +145,6 @@ export const RoundState = () => { ); }; -// const getDelegateStatus = (key, totalVotesReceived) => { const getDelegateStatus = (key, grossVotesReceived) => { if (key === 'banned' || key === 'punished' || key === 'active') { return [key, delegateStatus[key]]; @@ -172,12 +156,9 @@ const getDelegateStatus = (key, grossVotesReceived) => { return [key, delegateStatus[key]]; }; -// export const DelegateStatus = ({ -// activeTab, status, totalVotesReceived, theme, -// }) => { export const DelegateStatus = () => { const { - activeTab, status, totalVotesReceived, theme, + activeTab, data: { status, totalVotesReceived }, theme, } = useContext(DelegateRowContext); const [key, val] = getDelegateStatus(status, totalVotesReceived); @@ -188,9 +169,8 @@ export const DelegateStatus = () => { ); }; -// export const ForgingTime = ({ activeTab, time, state }) => ( export const ForgingTime = () => { - const { activeTab, state, time } = useContext(DelegateRowContext); + const { activeTab, data: { state }, time } = useContext(DelegateRowContext); return ( {state === 'missedBlock' ? '-' : time} diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index b716b5c2b5..a7d19bf815 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -8,14 +8,6 @@ import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; import getForgingTime from '../../utils/getForgingTime'; import DelegateRowContext from '../../context/delegateRowContext'; import styles from '../delegatesMonitorView/delegates.css'; -// import { -// DelegateWeight, -// DelegateDetails, -// RoundState, -// DelegateStatus, -// ForgingTime, -// DelegateRank, -// } from './dataColumns'; import LayoutSchema from './layoutSchema'; const DelegateRow = ({ @@ -58,12 +50,7 @@ const DelegateRow = ({ watched: isWatched, addToWatchList, removeFromWatchList, - value: data.totalVotesReceived, - state: data.state, time: formattedForgingTime, - status: data.status, - isBanned: data.isBanned, - totalVotesReceived: data.totalVotesReceived, theme, t, }} @@ -72,59 +59,6 @@ const DelegateRow = ({ ))} - {/* - - { - (activeTab === 'active' || activeTab === 'watched' || activeTab === 'standby') - ? ( - - ) : null - } - { - (activeTab === 'active' || activeTab === 'watched') - ? ( - <> - - - - ) : null - } - { - activeTab !== 'active' - ? ( - - ) : null - } */} ); }; diff --git a/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js b/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js index 29352a142f..5a4ee0f89b 100644 --- a/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js +++ b/src/modules/dpos/validator/components/delegatesTable/layoutSchema.js @@ -8,9 +8,8 @@ import { } from './dataColumns'; import styles from './schemas.css'; -const basic = [DelegateDetails]; -const minimal = [...basic, DelegateStatus]; -const hosted = [...basic, DelegateWeight]; +const minimal = [DelegateDetails, DelegateStatus]; +const hosted = [DelegateDetails, DelegateWeight]; const full = [DelegateDetails, DelegateWeight, DelegateRank, ForgingTime, RoundState]; const LayoutSchema = { diff --git a/src/modules/dpos/validator/context/delegateRowContext.js b/src/modules/dpos/validator/context/delegateRowContext.js index f67beb589f..944edcaa98 100644 --- a/src/modules/dpos/validator/context/delegateRowContext.js +++ b/src/modules/dpos/validator/context/delegateRowContext.js @@ -7,12 +7,7 @@ const DelegateRowContext = createContext( watched: '', addToWatchList: () => {}, removeFromWatchList: () => {}, - value: '0', - state: '', time: '', - status: '', - isBanned: false, - totalVotesReceived: '0', theme: '', t: str => str, }, From 6a732ae742e3bc7405a4ef9d91a6955576f54c31 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 31 May 2022 14:22:51 +0100 Subject: [PATCH 10/24] Fixed some failing tests --- .../validator/context/delegateRowContext.js | 13 ++++++-- .../validator/utils/getForgingTime.test.js | 32 +++++++++++++++++++ 2 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/modules/dpos/validator/utils/getForgingTime.test.js diff --git a/src/modules/dpos/validator/context/delegateRowContext.js b/src/modules/dpos/validator/context/delegateRowContext.js index 944edcaa98..ec9dee6b46 100644 --- a/src/modules/dpos/validator/context/delegateRowContext.js +++ b/src/modules/dpos/validator/context/delegateRowContext.js @@ -1,14 +1,21 @@ +/* istanbul ignore file */ import { createContext } from 'react'; const DelegateRowContext = createContext( { - data: {}, - activeTab: '', + data: { + value: '', + state: 'forging', + status: 'active', + time: '', + totalVotesReceived: 0, + }, + activeTab: 'active', watched: '', addToWatchList: () => {}, removeFromWatchList: () => {}, time: '', - theme: '', + theme: 'light', t: str => str, }, ); diff --git a/src/modules/dpos/validator/utils/getForgingTime.test.js b/src/modules/dpos/validator/utils/getForgingTime.test.js new file mode 100644 index 0000000000..23e41f3846 --- /dev/null +++ b/src/modules/dpos/validator/utils/getForgingTime.test.js @@ -0,0 +1,32 @@ +import getForgingTime from './getForgingTime'; + +describe('getForgingTime', () => { + it('returns empty result if no time argument is passed', () => { + const emptyResult = getForgingTime(); + expect(emptyResult).toBe('-'); + }); + + it('returns now if time difference is less than 9 seconds', () => { + const recentTime = Math.floor((new Date().getTime() / 1000) - 5); + const nowResult = getForgingTime(recentTime); + expect(nowResult).toBe('now'); + }); + + it('returns time in the past if time difference is more than 9 seconds', () => { + const recentTime = Math.floor((new Date().getTime() / 1000) - 12); + const nowResult = getForgingTime(recentTime); + expect(nowResult).toBe('12s ago'); + }); + + it('returns future time if forging time is in the future', () => { + const recentTime = Math.floor((new Date().getTime() / 1000) + 80); + const nowResult = getForgingTime(recentTime); + expect(nowResult).toBe('in 1m 20s'); + }); + + it('returns future time without seconds if forging time is in the future and has no seconds', () => { + const recentTime = Math.floor((new Date().getTime() / 1000) + 60); + const nowResult = getForgingTime(recentTime); + expect(nowResult).toBe('in 1m '); + }); +}); From c4acc60d133422a6984672c63b204335f7fdc37f Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 1 Jun 2022 04:30:56 +0100 Subject: [PATCH 11/24] Added vote and delegate test utils with latest votes test --- .../components/delegatesMonitorView/index.js | 2 +- .../components/latestVotes/index.test.js | 27 +++++++++++++++++++ tests/constants/delegates.js | 12 +++++++++ tests/constants/votes.js | 17 ++++++++++++ 4 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/modules/dpos/validator/components/latestVotes/index.test.js diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/index.js b/src/modules/dpos/validator/components/delegatesMonitorView/index.js index e0daa584ac..25010f5533 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/index.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/index.js @@ -141,7 +141,7 @@ const ComposedDelegates = compose( transformResponse: (response) => { const transformedResponse = mergeUniquelyByUsername(response); const responseMap = transformedResponse.reduce((acc, delegate) => { - acc[delegate.address] = delegate.summary?.address; + acc[delegate.summary?.address] = delegate; return acc; }, {}); return responseMap; diff --git a/src/modules/dpos/validator/components/latestVotes/index.test.js b/src/modules/dpos/validator/components/latestVotes/index.test.js new file mode 100644 index 0000000000..7fa978a4f7 --- /dev/null +++ b/src/modules/dpos/validator/components/latestVotes/index.test.js @@ -0,0 +1,27 @@ +import { mountWithRouter } from 'src/utils/testHelpers'; +import { delegateList } from '@tests/constants/delegates'; +import { votesList } from '@tests/constants/votes'; +import LatestVotes from './index'; + +const delegateDataList = delegateList(10); +const delegateData = Object.assign({}, ...delegateDataList); + +const props = { + votes: { + isLoading: false, + data: votesList, + loadData: jest.fn(), + clearData: jest.fn(), + urlSearchParams: {}, + meta: { total: delegateList.length, count: 10, offset: 0 }, + }, + t: str => str, + delegates: { data: delegateData }, +}; + +describe('Latest votes', () => { + it('displays initial table of votes', () => { + const wrapper = mountWithRouter(LatestVotes, props); + expect(wrapper.find('.vote-row-wrapper')).toHaveLength(10); + }); +}); diff --git a/tests/constants/delegates.js b/tests/constants/delegates.js index 7ed574d751..1a3e9ac40e 100644 --- a/tests/constants/delegates.js +++ b/tests/constants/delegates.js @@ -16,4 +16,16 @@ const delegate = index => ({ const delegates = Array(101).fill(1).map((item, index) => delegate(index)); +const generateDelegate = (index) => ({ + [`lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y1${index}`]: { + summary: { + address: `lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y1${index}`, + username: `testUsername_${index}`, + }, + }, +}); + +export const delegateList = (delegateCount = 0) => + Array(delegateCount).fill(1).map((_, index) => generateDelegate(index)); + export default delegates; diff --git a/tests/constants/votes.js b/tests/constants/votes.js index 1f82876923..58a6c59942 100644 --- a/tests/constants/votes.js +++ b/tests/constants/votes.js @@ -14,3 +14,20 @@ export default [ }, }, ]; + +const generateVotes = (index) => ({ + asset: { votes: [{ delegateAddress: `lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y${index + 10}`, amount: `${index + 10}0000000` }] }, + block: { + height: 16418742 + index, + id: '1f48b9f4dae3a027b73685810016edadfff45175955b6ea3b24951597a99b498', + timestamp: 1653519360, + }, + sender: { + address: 'lskd6yo4kkzrbjadh3tx6kz2qt5o3vy5zdnuwycmw', + publicKey: 'ea62fbdd5731a748a63b593db2c22129462f47db0f066d4ed3fc70957a456ebc', + username: `testUsername_${index + 1}`, + }, + height: 16418742 + index, +}); + +export const votesList = Array(10).fill(1).map((_, idx) => generateVotes(idx)); From d3791183ab968d01874d9de46a87c31880964a02 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 1 Jun 2022 15:13:00 +0100 Subject: [PATCH 12/24] Refactored delegate monitor and latest votes components --- .../components/activeDelegatesTab/index.js | 35 ++++----- .../delegatesMonitorView/delegates.js | 77 +++++++------------ .../components/delegatesMonitorView/index.js | 2 +- .../validator/components/latestVotes/index.js | 6 +- .../components/latestVotes/voteRow.js | 56 +++++++------- .../sanctionedDelegatesTab/index.js | 35 ++++----- .../components/standByDelegatesTab/index.js | 35 ++++----- .../components/watchedDelegatesTab/index.js | 36 ++++----- .../validator/context/delegateTabContext.js | 18 +++++ .../components/TransactionRow/components.js | 4 +- .../components/TransactionRow/index.js | 2 + .../components/TransactionRow/layoutSchema.js | 5 ++ .../components/TransactionRow/schemas.css | 12 +++ 13 files changed, 169 insertions(+), 154 deletions(-) create mode 100644 src/modules/dpos/validator/context/delegateTabContext.js diff --git a/src/modules/dpos/validator/components/activeDelegatesTab/index.js b/src/modules/dpos/validator/components/activeDelegatesTab/index.js index 504d6dba31..3d49fc4637 100644 --- a/src/modules/dpos/validator/components/activeDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/activeDelegatesTab/index.js @@ -1,22 +1,21 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesTable from '../delegatesTable'; -const ActiveDelegatesTab = ({ - blocks, - delegatesWithForgingTimes, - filters, - watchList, - t, - activeTab, -}) => ( - -); +const ActiveDelegatesTab = () => { + const { + blocks, delegatesWithForgingTimes, filters, watchList, t, activeTab, + } = useContext(DelegateTabContext); + return ( + + ); +}; export default ActiveDelegatesTab; diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index 69e9cd84e0..0684aad0db 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -1,6 +1,6 @@ /* eslint-disable complexity */ /* eslint-disable no-nested-ternary */ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { Input } from 'src/theme'; import Box from 'src/theme/box'; @@ -8,7 +8,7 @@ import BoxHeader from 'src/theme/box/header'; import BoxContent from 'src/theme/box/content'; import BoxTabs from 'src/theme/tabs'; import { ROUND_LENGTH } from '@dpos/validator/consts'; -import styles from './delegates.css'; +import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesOverview from '../overview/delegatesOverview'; import ForgingDetails from '../overview/forgingDetails'; import LatestVotes from '../latestVotes'; @@ -17,6 +17,7 @@ import ActiveDelegatesTab from '../activeDelegatesTab'; import StandByDelegatesTab from '../standByDelegatesTab'; import SanctionedDelegatesTab from '../sanctionedDelegatesTab'; import WatchedDelegatesTab from '../watchedDelegatesTab'; +import styles from './delegates.css'; // eslint-disable-next-line max-statements const DelegatesMonitor = ({ @@ -119,6 +120,14 @@ const DelegatesMonitor = ({ }); } + const displayTab = useCallback((tab) => { + if (tab === 'active') return ; + if (tab === 'standby') return ; + if (tab === 'sanctioned') return ; + if (tab === 'watched') return ; + return ; + }, [activeTab]); + return (
{activeTab === 'votes' ? ( - ) : activeTab === 'active' ? ( - - ) : activeTab === 'standby' ? ( - - ) : activeTab === 'sanctioned' ? ( - - ) : activeTab === 'watched' ? ( - ) : ( - + + {displayTab(activeTab)} + )} diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/index.js b/src/modules/dpos/validator/components/delegatesMonitorView/index.js index 25010f5533..aca9f739a3 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/index.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/index.js @@ -141,7 +141,7 @@ const ComposedDelegates = compose( transformResponse: (response) => { const transformedResponse = mergeUniquelyByUsername(response); const responseMap = transformedResponse.reduce((acc, delegate) => { - acc[delegate.summary?.address] = delegate; + acc[delegate.summary.address] = delegate; return acc; }, {}); return responseMap; diff --git a/src/modules/dpos/validator/components/latestVotes/index.js b/src/modules/dpos/validator/components/latestVotes/index.js index fd30db8aee..7cf6ca73db 100644 --- a/src/modules/dpos/validator/components/latestVotes/index.js +++ b/src/modules/dpos/validator/components/latestVotes/index.js @@ -1,6 +1,6 @@ import React from 'react'; import Table from 'src/theme/table'; -import VoteRow from './voteRow'; +import TransactionRow from '@transaction/components/TransactionRow'; import header from './tableHeader'; const LatestVotes = ({ votes, t, delegates }) => { @@ -14,10 +14,12 @@ const LatestVotes = ({ votes, t, delegates }) => { { address={delegateAddress} title={ delegates[delegateAddress] - && delegates[delegateAddress].username + && delegates[delegateAddress].summary?.username } truncate /> @@ -53,33 +53,35 @@ const VotesItemsList = ({ votes = [], delegates }) => { const VoteRow = ({ data, className, delegates }) => { const { votes } = data.asset; return ( - - - - - - - - + - {Math.ceil(data.height / 101)} - - - - - + + + + + + + + {Math.ceil(data.height / 101)} + + + + + + ); }; diff --git a/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js b/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js index fff843e209..e0b2d5e2dd 100644 --- a/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js @@ -1,22 +1,21 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesTable from '../delegatesTable'; -const SanctionedDelegatesTab = ({ - blocks, - sanctionedDelegates, - filters, - watchList, - t, - activeTab, -}) => ( - -); +const SanctionedDelegatesTab = () => { + const { + blocks, sanctionedDelegates, filters, watchList, t, activeTab, + } = useContext(DelegateTabContext); + return ( + + ); +}; export default SanctionedDelegatesTab; diff --git a/src/modules/dpos/validator/components/standByDelegatesTab/index.js b/src/modules/dpos/validator/components/standByDelegatesTab/index.js index d28215b576..6aae1c8b02 100644 --- a/src/modules/dpos/validator/components/standByDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/standByDelegatesTab/index.js @@ -1,22 +1,21 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesTable from '../delegatesTable'; -const StandByDelegatesTab = ({ - blocks, - standByDelegates, - filters, - watchList, - t, - activeTab, -}) => ( - -); +const StandByDelegatesTab = () => { + const { + blocks, standByDelegates, filters, watchList, t, activeTab, + } = useContext(DelegateTabContext); + return ( + + ); +}; export default StandByDelegatesTab; diff --git a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js index 7ae432e721..1cb0ea18ae 100644 --- a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js @@ -1,22 +1,22 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesTable from '../delegatesTable'; -const WatchedDelegatesTab = ({ - blocks, - watchedDelegates, - filters, - watchList, - t, - activeTab, -}) => ( - -); +const WatchedDelegatesTab = () => { + const { + blocks, watchedDelegates, filters, watchList, t, activeTab, setActiveTab, + } = useContext(DelegateTabContext); + return ( + + ); +}; export default WatchedDelegatesTab; diff --git a/src/modules/dpos/validator/context/delegateTabContext.js b/src/modules/dpos/validator/context/delegateTabContext.js new file mode 100644 index 0000000000..e489334815 --- /dev/null +++ b/src/modules/dpos/validator/context/delegateTabContext.js @@ -0,0 +1,18 @@ +/* istanbul ignore file */ +import { createContext } from 'react'; + +const DelegateTabContext = createContext( + { + blocks: [], + delegatesWithForgingTimes: [], + filters: '', + watchList: [], + t: str => str, + standByDelegates: [], + sanctionedDelegates: [], + watchedDelegates: [], + activeTab: '', + }, +); + +export default DelegateTabContext; diff --git a/src/modules/transaction/components/TransactionRow/components.js b/src/modules/transaction/components/TransactionRow/components.js index 9fe2c70f6d..26cd37356e 100644 --- a/src/modules/transaction/components/TransactionRow/components.js +++ b/src/modules/transaction/components/TransactionRow/components.js @@ -182,8 +182,8 @@ const generateVotes = (asset, delegates, token, t) => { > - {delegates[vote.delegateAddress] - || truncateAddress(vote.delegateAddress)} + {delegates[vote.delegateAddress]?.dpos.delegate.username + ?? truncateAddress(vote.delegateAddress)} diff --git a/src/modules/transaction/components/TransactionRow/index.js b/src/modules/transaction/components/TransactionRow/index.js index fc18ccb478..8aad8bbb8a 100644 --- a/src/modules/transaction/components/TransactionRow/index.js +++ b/src/modules/transaction/components/TransactionRow/index.js @@ -16,6 +16,7 @@ const TransactionRow = ({ layout, avatarSize, activeToken, + delegates, }) => { const Layout = LayoutSchema[layout] || LayoutSchema.default; @@ -32,6 +33,7 @@ const TransactionRow = ({ host, activeToken, avatarSize, + delegates, }} > {Layout.components.map((Component, index) => ( diff --git a/src/modules/transaction/components/TransactionRow/layoutSchema.js b/src/modules/transaction/components/TransactionRow/layoutSchema.js index a73c924bb1..08a91c644d 100644 --- a/src/modules/transaction/components/TransactionRow/layoutSchema.js +++ b/src/modules/transaction/components/TransactionRow/layoutSchema.js @@ -7,6 +7,7 @@ import styles from './schemas.css'; const hosted = [Counterpart, Date, Fee, Assets, Amount]; const full = [Sender, Recipient, Date, Amount, Fee, Status]; const minimal = [Counterpart, Amount]; +const vote = [Sender, Date, Assets]; const LayoutSchema = { full: { @@ -21,6 +22,10 @@ const LayoutSchema = { components: minimal, className: styles.minimalLayout, }, + vote: { + components: vote, + className: styles.voteLayout, + }, default: { components: full, className: styles.generalLayout, diff --git a/src/modules/transaction/components/TransactionRow/schemas.css b/src/modules/transaction/components/TransactionRow/schemas.css index 1c405f95c3..ea9e5d9954 100644 --- a/src/modules/transaction/components/TransactionRow/schemas.css +++ b/src/modules/transaction/components/TransactionRow/schemas.css @@ -104,4 +104,16 @@ justify-content: flex-end; } } + + &.vote { + grid-template-areas: "sender date assets"; + + & > * { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex: 0 0 auto; + } + } } From 287d16ccd0c7a1cba3d90847bc3fde33784ede95 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 1 Jun 2022 15:14:32 +0100 Subject: [PATCH 13/24] Removed voteRow component --- .../components/latestVotes/voteRow.js | 92 ------------------- 1 file changed, 92 deletions(-) delete mode 100644 src/modules/dpos/validator/components/latestVotes/voteRow.js diff --git a/src/modules/dpos/validator/components/latestVotes/voteRow.js b/src/modules/dpos/validator/components/latestVotes/voteRow.js deleted file mode 100644 index 6765c0e354..0000000000 --- a/src/modules/dpos/validator/components/latestVotes/voteRow.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import gridVisibility from 'flexboxgrid-helpers/dist/flexboxgrid-helpers.min.css'; - -import DateTimeFromTimestamp from 'src/modules/common/components/timestamp'; -import WalletVisualWithAddress from '@wallet/components/walletVisualWithAddress'; -import DialogLink from 'src/theme/dialog/link'; -import VoteDetails from '@transaction/components/VoteItem'; -import styles from '../delegatesMonitorView/delegates.css'; - -const VotesItemsList = ({ votes = [], delegates }) => { - const [showAll, setShowAll] = useState(false); - const { t } = useTranslation(); - return ( - <> - {votes.length > 0 && ( - - - {votes - .slice(0, showAll ? votes.length : 2) - .map(({ amount, delegateAddress }) => ( - - ))} - - {!showAll && votes.length > 2 && ( - - )} - - )} - - ); -}; - -const VoteRow = ({ data, className, delegates }) => { - const { votes } = data.asset; - return ( -
- - - - - - - - - {Math.ceil(data.height / 101)} - - - - - -
- ); -}; - -/* istanbul ignore next */ -const areEqual = (prevProps, nextProps) => - prevProps.data.id === nextProps.data.id; - -export default React.memo(VoteRow, areEqual); From 0ba5819c74a1d15cb67688e729b457336764da25 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 1 Jun 2022 15:30:57 +0100 Subject: [PATCH 14/24] Minor change --- src/modules/dpos/validator/context/delegateTabContext.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/dpos/validator/context/delegateTabContext.js b/src/modules/dpos/validator/context/delegateTabContext.js index e489334815..fd96da54a7 100644 --- a/src/modules/dpos/validator/context/delegateTabContext.js +++ b/src/modules/dpos/validator/context/delegateTabContext.js @@ -12,6 +12,7 @@ const DelegateTabContext = createContext( sanctionedDelegates: [], watchedDelegates: [], activeTab: '', + setActiveTab: () => {}, }, ); From 3b52a6ea004653d4dfbb59b04c0d66bf4e0b1eaf Mon Sep 17 00:00:00 2001 From: Ali Haghighatkhah Date: Wed, 1 Jun 2022 16:40:45 +0200 Subject: [PATCH 15/24] Fix the alignment of vote details --- .../dpos/validator/components/latestVotes/tableHeader.js | 9 ++------- .../transaction/components/TransactionRow/schemas.css | 8 +++++++- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/modules/dpos/validator/components/latestVotes/tableHeader.js b/src/modules/dpos/validator/components/latestVotes/tableHeader.js index 5ea843d9d2..8a55cf6be1 100644 --- a/src/modules/dpos/validator/components/latestVotes/tableHeader.js +++ b/src/modules/dpos/validator/components/latestVotes/tableHeader.js @@ -1,5 +1,4 @@ import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import gridVisibility from 'flexboxgrid-helpers/dist/flexboxgrid-helpers.min.css'; export default t => ([ { @@ -8,14 +7,10 @@ export default t => ([ }, { title: t('Date'), - classList: grid['col-xs-3'], - }, - { - title: t('Round'), - classList: `${grid['col-lg-2']} ${gridVisibility['hidden-md']} ${gridVisibility['hidden-sm']} ${gridVisibility['hidden-xs']}`, + classList: grid['col-xs-4'], }, { title: t('Votes'), - classList: `${grid['col-xs-5']} ${grid['col-lg-3']}`, + classList: grid['col-xs-4'], }, ]); diff --git a/src/modules/transaction/components/TransactionRow/schemas.css b/src/modules/transaction/components/TransactionRow/schemas.css index ea9e5d9954..0a135bd75d 100644 --- a/src/modules/transaction/components/TransactionRow/schemas.css +++ b/src/modules/transaction/components/TransactionRow/schemas.css @@ -111,9 +111,15 @@ & > * { height: 100%; display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; flex: 0 0 auto; + flex-basis: 33.3333333%; + max-width: 33.3333333%; + } + + & > *:last-child { + justify-content: flex-end !important; } } } From a87825a53aec073bd237f6faa07f7a31f18c9edd Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 1 Jun 2022 17:23:04 +0100 Subject: [PATCH 16/24] Updated latest votes test --- .../components/latestVotes/index.test.js | 2 +- .../components/TransactionRow/index.js | 40 ++++++++++--------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/modules/dpos/validator/components/latestVotes/index.test.js b/src/modules/dpos/validator/components/latestVotes/index.test.js index 7fa978a4f7..5b949e5881 100644 --- a/src/modules/dpos/validator/components/latestVotes/index.test.js +++ b/src/modules/dpos/validator/components/latestVotes/index.test.js @@ -22,6 +22,6 @@ const props = { describe('Latest votes', () => { it('displays initial table of votes', () => { const wrapper = mountWithRouter(LatestVotes, props); - expect(wrapper.find('.vote-row-wrapper')).toHaveLength(10); + expect(wrapper.find('.transaction-row-wrapper')).toHaveLength(10); }); }); diff --git a/src/modules/transaction/components/TransactionRow/index.js b/src/modules/transaction/components/TransactionRow/index.js index 8aad8bbb8a..0e5e538867 100644 --- a/src/modules/transaction/components/TransactionRow/index.js +++ b/src/modules/transaction/components/TransactionRow/index.js @@ -21,26 +21,28 @@ const TransactionRow = ({ const Layout = LayoutSchema[layout] || LayoutSchema.default; return ( - - + - {Layout.components.map((Component, index) => ( - - ))} - - + + {Layout.components.map((Component, index) => ( + + ))} + + + ); }; From fa7ca0ee0c31da26ffaa3aaa40a3708201f9f98e Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 2 Jun 2022 03:04:36 +0100 Subject: [PATCH 17/24] Updated tests with coverage issues --- .../delegatesMonitorView/delegates.js | 1 - .../delegatesMonitorView/delegates.test.js | 57 ++++++++++++++++++- .../components/latestVotes/index.test.js | 33 +++++++++++ .../components/overview/numericInfo.js | 1 + .../components/watchedDelegatesTab/index.js | 1 + 5 files changed, 91 insertions(+), 2 deletions(-) diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index 0684aad0db..5e515db737 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -1,5 +1,4 @@ /* eslint-disable complexity */ -/* eslint-disable no-nested-ternary */ import React, { useState, useEffect, useCallback } from 'react'; import { Input } from 'src/theme'; diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js index 77877d0916..b9e6be61d4 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.test.js @@ -1,6 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { Provider } from 'react-redux'; +import { mountWithRouter } from 'src/utils/testHelpers'; import fakeStore from '@tests/unit-test-utils/fakeStore'; import delegatesList from '@tests/constants/delegates'; import accounts from '@tests/constants/wallets'; @@ -154,7 +155,19 @@ describe('Delegates monitor page', () => { }, votes: { isLoading: false, - data: [{ asset: { votes: [{ delegateAddress: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y11', amount: '100000000' }] } }], + data: [{ + asset: { votes: [{ delegateAddress: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y11', amount: '100000000' }] }, + block: { + height: 164187423, + id: '1f48b9f4dae3a027b73685810016edadfff45175955b6ea3b24951597a99b498', + timestamp: 1653519360, + }, + sender: { + address: 'lskd6yo4kkzrbjadh3tx6kz2qt5o3vy5zdnuwycmw', + publicKey: 'ea62fbdd5731a748a63b593db2c22129462f47db0f066d4ed3fc70957a456ebc', + username: 'test_del', + }, + }], loadData: jest.fn(), clearData: jest.fn(), urlSearchParams: {}, @@ -216,4 +229,46 @@ describe('Delegates monitor page', () => { expect(status).equal(index === 2 ? 'Punished' : 'Banned'); }); }); + + it('displays watched delegates once the watch list is populated', () => { + wrapper = setup(props); + const updatedProps = { ...props, watchList: ['lsktaa9xuys6hztyaryvx6msu279mpkn9sz6w5or2'] }; + wrapper = setup(updatedProps); + expect(props.watchedDelegates.loadData).toHaveBeenCalledTimes(1); + }); + + it('does not display watched tab if watchlist is empty', () => { + wrapper = setup(props); + expect(wrapper.find('.tab.watched')).not.toExist(); + }); + + it('displays latest votes component if active tab is votes', () => { + wrapper = mountWithRouter(Delegates, props); + wrapper.find('.tab.votes').simulate('click'); + expect(wrapper.find('.transaction-row-wrapper')).toExist(); + }); + + it('applies the correct filter based on active tab', () => { + wrapper = setup(props); + const expectedArgs = { + limit: 100, + offset: 0, + search: 'lisk', + tab: 'active', + }; + const updatedProps = { ...props, watchList: ['lsktaa9xuys6hztyaryvx6msu279mpkn9sz6w5or2'] }; + + switchTab('sanctioned'); + wrapper.find('.filter-by-name').last().simulate('change', { target: { value: 'lisk' } }); + expect(props.applyFilters).toHaveBeenCalledWith(expectedArgs, 'sanctionedDelegates'); + + wrapper = setup(updatedProps); + switchTab('watched'); + wrapper.find('.filter-by-name').last().simulate('change', { target: { value: 'li' } }); + expect(props.applyFilters).toHaveBeenCalledWith({ ...expectedArgs, search: 'li' }, 'watchedDelegates'); + + switchTab('standby'); + wrapper.find('.filter-by-name').last().simulate('change', { target: { value: 'lisk' } }); + expect(props.applyFilters).toHaveBeenCalledWith(expectedArgs, 'standByDelegates'); + }); }); diff --git a/src/modules/dpos/validator/components/latestVotes/index.test.js b/src/modules/dpos/validator/components/latestVotes/index.test.js index 5b949e5881..fd204d362a 100644 --- a/src/modules/dpos/validator/components/latestVotes/index.test.js +++ b/src/modules/dpos/validator/components/latestVotes/index.test.js @@ -24,4 +24,37 @@ describe('Latest votes', () => { const wrapper = mountWithRouter(LatestVotes, props); expect(wrapper.find('.transaction-row-wrapper')).toHaveLength(10); }); + + it('can load more votes if possible', () => { + const updatedDelegatesDataList = delegateList(30); + const updatedDelegateData = Object.assign({}, ...updatedDelegatesDataList); + const updatedProps = { + ...props, + votes: { + ...props.votes, + meta: { total: updatedDelegatesDataList.length, count: 10, offset: 0 }, + }, + delgates: { data: updatedDelegateData }, + }; + const wrapper = mountWithRouter(LatestVotes, updatedProps); + expect(wrapper.find('.load-more')).toExist(); + wrapper.find('.load-more').first().simulate('click'); + expect(props.votes.loadData).toHaveBeenCalledTimes(1); + }); + + it('can not load more votes if meta property is unavailable', () => { + const updatedDelegatesDataList = delegateList(30); + const updatedDelegateData = Object.assign({}, ...updatedDelegatesDataList); + const updatedProps = { + ...props, + votes: { + ...props.votes, + meta: {}, + }, + delgates: { data: updatedDelegateData }, + }; + delete updatedProps.votes.meta; + const wrapper = mountWithRouter(LatestVotes, updatedProps); + expect(wrapper.find('.load-more')).not.toExist(); + }); }); diff --git a/src/modules/dpos/validator/components/overview/numericInfo.js b/src/modules/dpos/validator/components/overview/numericInfo.js index 3299d672df..58a75a03eb 100644 --- a/src/modules/dpos/validator/components/overview/numericInfo.js +++ b/src/modules/dpos/validator/components/overview/numericInfo.js @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import React from 'react'; import Icon from 'src/theme/Icon'; import styles from './overview.css'; diff --git a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js index 1cb0ea18ae..0a35d96af4 100644 --- a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import React, { useContext } from 'react'; import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesTable from '../delegatesTable'; From 590618c024dcff898bb56579881512c3f9542765 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 2 Jun 2022 04:53:07 +0100 Subject: [PATCH 18/24] Updated other tests to fix coverage issues --- .../components/delegatesTable/dataColumns.js | 3 +- .../delegatesTable/delegateRow.test.js | 53 +++++++++++++++++++ .../components/delegatesTable/index.js | 1 + 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/modules/dpos/validator/components/delegatesTable/delegateRow.test.js diff --git a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js index e1c017653e..23e414b208 100644 --- a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js +++ b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import React, { useContext } from 'react'; import { formatAmountBasedOnLocale } from 'src/utils/formattedNumber'; @@ -78,7 +79,7 @@ export const DelegateDetails = () => { content={( diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.test.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.test.js new file mode 100644 index 0000000000..f2700ea29f --- /dev/null +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.test.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { mountWithContext } from '@tests/unit-test-utils/mountHelpers'; +import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; +import DelegateRow from './delegateRow'; + +jest.mock('@common/store/actions'); + +let wrapper; +const props = { + data: { + address: 'lskbgyrx3v76jxowgkgthu9yaf3dr29wqxbtxz8yp', + username: 'test_del_2', + }, + className: '', + t: str => str, + activeTab: 'active', + watchList: [], + setActiveTab: jest.fn(), + blocks: { + forgers: [{ + address: 'lskbgyrx3v76jxowgkgthu9yaf3dr29wqxbtxz8yp', + isConsensusParticipant: true, + minActiveHeight: 14075261, + nextForgingTime: 1654135710, + rank: 22, + state: 'awaitingSlot', + totalVotesReceived: '10828000000000', + username: 'test_del_2', + }], + indexBook: { lskbgyrx3v76jxowgkgthu9yaf3dr29wqxbtxz8yp: 0 }, + }, +}; + +describe('DelegateRow', () => { + it('adds delegates to watch list when watch icon is clicked', () => { + wrapper = mountWithContext(, { storeState: {} }); + wrapper.find('.watch-icon').simulate('click'); + expect(addedToWatchList).toHaveBeenCalledWith({ address: props.data.address }); + }); + + it('removes delegate from watched list when watch icon is clicked', () => { + const updatedProps = { ...props, activeTab: 'watched', watchList: ['lskbgyrx3v76jxowgkgthu9yaf3dr29wqxbtxz8yp'] }; + wrapper = mountWithContext(, { storeState: {} }); + wrapper.find('.watch-icon').simulate('click'); + expect(removedFromWatchList).toHaveBeenCalledWith({ address: props.data.address }); + }); + + it('displays default layout if active tab is invalid', () => { + const updatedProps = { ...props, activeTab: 'invalidTab' }; + wrapper = mountWithContext(, { storeState: {} }); + expect(wrapper.find('.watch-icon')).toExist(); + }); +}); diff --git a/src/modules/dpos/validator/components/delegatesTable/index.js b/src/modules/dpos/validator/components/delegatesTable/index.js index 84c680166e..01af13922a 100644 --- a/src/modules/dpos/validator/components/delegatesTable/index.js +++ b/src/modules/dpos/validator/components/delegatesTable/index.js @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import React from 'react'; import { compose } from 'redux'; import withLocalSort from 'src/utils/withLocalSort'; From 64edaa2feae15f2ba473673c02b3c1d7fe24214d Mon Sep 17 00:00:00 2001 From: masoud soroush Date: Thu, 2 Jun 2022 14:30:21 +0200 Subject: [PATCH 19/24] extract utils and components --- .../delegatesMonitorView/delegates.js | 3 +- .../components/delegatesTable/TableWrapper.js | 71 ++++++++++ .../components/delegatesTable/index.js | 132 +----------------- .../dpos/validator/utils/filterDelegates.js | 12 ++ src/modules/dpos/validator/utils/index.js | 3 + .../dpos/validator/utils/selectDelegates.js | 32 +++++ .../validator/utils/shouldAllowLoadMore.js | 21 +++ 7 files changed, 142 insertions(+), 132 deletions(-) create mode 100644 src/modules/dpos/validator/components/delegatesTable/TableWrapper.js create mode 100644 src/modules/dpos/validator/utils/filterDelegates.js create mode 100644 src/modules/dpos/validator/utils/index.js create mode 100644 src/modules/dpos/validator/utils/selectDelegates.js create mode 100644 src/modules/dpos/validator/utils/shouldAllowLoadMore.js diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index 5e515db737..843bf45489 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -11,7 +11,6 @@ import DelegateTabContext from '../../context/delegateTabContext'; import DelegatesOverview from '../overview/delegatesOverview'; import ForgingDetails from '../overview/forgingDetails'; import LatestVotes from '../latestVotes'; -import DelegatesTable from '../delegatesTable'; import ActiveDelegatesTab from '../activeDelegatesTab'; import StandByDelegatesTab from '../standByDelegatesTab'; import SanctionedDelegatesTab from '../sanctionedDelegatesTab'; @@ -124,7 +123,7 @@ const DelegatesMonitor = ({ if (tab === 'standby') return ; if (tab === 'sanctioned') return ; if (tab === 'watched') return ; - return ; + return null; }, [activeTab]); return ( diff --git a/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js b/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js new file mode 100644 index 0000000000..015f457750 --- /dev/null +++ b/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js @@ -0,0 +1,71 @@ +/* istanbul ignore file */ +import React from 'react'; +import { compose } from 'redux'; +import withLocalSort from 'src/utils/withLocalSort'; +import Table from 'src/theme/table'; +import { DEFAULT_STANDBY_THRESHOLD } from '@dpos/validator/consts'; +import DelegateRow from './delegateRow'; +import header from './tableHeader'; + +const TableWrapper = compose( + withLocalSort('delegates', 'forgingTime:asc', { + forgingTime: (a, b, direction) => + (a.nextForgingTime > b.nextForgingTime ? 1 : -1) + * (direction === 'asc' ? 1 : -1), + status: (a, b, direction) => { + if (a.status === 'active') { + return 1 * (direction === 'asc' ? 1 : -1); + } + if (b.status === 'active' || a.status !== 'standby') { + return -1 * (direction === 'asc' ? 1 : -1); + } + if (a.voteWeight < DEFAULT_STANDBY_THRESHOLD) { + return -1 * (direction === 'asc' ? 1 : -1); + } + if (b.voteWeight < DEFAULT_STANDBY_THRESHOLD) { + return 1 * (direction === 'asc' ? 1 : -1); + } + return 0; + }, + sanctionedStatus: (a, b, direction) => + ((direction === 'asc' ? a.status > b.status : b.status > a.status) + ? 1 + : -1), + }), +)( + ({ + delegates, + handleLoadMore, + t, + activeTab, + blocks, + changeSort, + sort, + canLoadMore, + watchList, + setActiveTab, + }) => ( +
+ ), +); + +export default TableWrapper; diff --git a/src/modules/dpos/validator/components/delegatesTable/index.js b/src/modules/dpos/validator/components/delegatesTable/index.js index 01af13922a..0d260193f2 100644 --- a/src/modules/dpos/validator/components/delegatesTable/index.js +++ b/src/modules/dpos/validator/components/delegatesTable/index.js @@ -1,135 +1,7 @@ /* istanbul ignore file */ import React from 'react'; -import { compose } from 'redux'; -import withLocalSort from 'src/utils/withLocalSort'; -import Table from 'src/theme/table'; -import { DEFAULT_STANDBY_THRESHOLD } from '@dpos/validator/consts'; -import DelegateRow from './delegateRow'; -import header from './tableHeader'; - -const TableWrapper = compose( - withLocalSort('delegates', 'forgingTime:asc', { - forgingTime: (a, b, direction) => - (a.nextForgingTime > b.nextForgingTime ? 1 : -1) - * (direction === 'asc' ? 1 : -1), - status: (a, b, direction) => { - if (a.status === 'active') { - return 1 * (direction === 'asc' ? 1 : -1); - } - if (b.status === 'active' || a.status !== 'standby') { - return -1 * (direction === 'asc' ? 1 : -1); - } - if (a.voteWeight < DEFAULT_STANDBY_THRESHOLD) { - return -1 * (direction === 'asc' ? 1 : -1); - } - if (b.voteWeight < DEFAULT_STANDBY_THRESHOLD) { - return 1 * (direction === 'asc' ? 1 : -1); - } - return 0; - }, - sanctionedStatus: (a, b, direction) => - ((direction === 'asc' ? a.status > b.status : b.status > a.status) - ? 1 - : -1), - }), -)( - ({ - delegates, - handleLoadMore, - t, - activeTab, - blocks, - changeSort, - sort, - canLoadMore, - watchList, - setActiveTab, - }) => ( -
- ), -); - -const filterDelegates = (delegates, filters) => ({ - ...delegates, - data: - filters.search || filters.address - ? delegates.data.filter( - (delegate) => - delegate.username.includes(filters.search) - && (!filters.address || filters.address.includes(delegate.address)), - ) - : delegates.data, -}); - -const selectDelegates = ({ - activeTab, - delegates, - standByDelegates, - sanctionedDelegates, - watchedDelegates, - filters, - watchList, -}) => { - switch (activeTab) { - case 'active': - return filterDelegates(delegates, filters); - - case 'standby': - return filterDelegates(standByDelegates, filters); - - case 'sanctioned': - return filterDelegates(sanctionedDelegates, filters); - - case 'watched': - return filterDelegates(watchedDelegates, { - search: filters.search || '', - address: watchList, - }); - - default: - return undefined; - } -}; - -const shouldAllowLoadMore = ( - activeTab, - standByDelegates, - sanctionedDelegates, -) => { - if (activeTab === 'standby') { - return ( - standByDelegates.meta?.offset + standByDelegates.meta?.count - < standByDelegates.meta?.total - ); - } - if (activeTab === 'sanctioned') { - return ( - sanctionedDelegates.meta?.offset + sanctionedDelegates.meta?.count - < sanctionedDelegates.meta?.total - ); - } - - return false; -}; +import TableWrapper from './TableWrapper'; +import { selectDelegates, shouldAllowLoadMore } from '../../utils'; const DelegatesTable = ({ setActiveTab, diff --git a/src/modules/dpos/validator/utils/filterDelegates.js b/src/modules/dpos/validator/utils/filterDelegates.js new file mode 100644 index 0000000000..20062ae5f3 --- /dev/null +++ b/src/modules/dpos/validator/utils/filterDelegates.js @@ -0,0 +1,12 @@ +// eslint-disable-next-line import/prefer-default-export +export const filterDelegates = (delegates, filters) => ({ + ...delegates, + data: + filters.search || filters.address + ? delegates.data.filter( + (delegate) => + delegate.username.includes(filters.search) + && (!filters.address || filters.address.includes(delegate.address)), + ) + : delegates.data, +}); diff --git a/src/modules/dpos/validator/utils/index.js b/src/modules/dpos/validator/utils/index.js new file mode 100644 index 0000000000..92774929f8 --- /dev/null +++ b/src/modules/dpos/validator/utils/index.js @@ -0,0 +1,3 @@ +export * from './filterDelegates'; +export * from './selectDelegates'; +export * from './shouldAllowLoadMore'; diff --git a/src/modules/dpos/validator/utils/selectDelegates.js b/src/modules/dpos/validator/utils/selectDelegates.js new file mode 100644 index 0000000000..8e829b87d4 --- /dev/null +++ b/src/modules/dpos/validator/utils/selectDelegates.js @@ -0,0 +1,32 @@ +import { filterDelegates } from './filterDelegates'; + +// eslint-disable-next-line import/prefer-default-export +export const selectDelegates = ({ + activeTab, + delegates, + standByDelegates, + sanctionedDelegates, + watchedDelegates, + filters, + watchList, +}) => { + switch (activeTab) { + case 'active': + return filterDelegates(delegates, filters); + + case 'standby': + return filterDelegates(standByDelegates, filters); + + case 'sanctioned': + return filterDelegates(sanctionedDelegates, filters); + + case 'watched': + return filterDelegates(watchedDelegates, { + search: filters.search || '', + address: watchList, + }); + + default: + return undefined; + } +}; diff --git a/src/modules/dpos/validator/utils/shouldAllowLoadMore.js b/src/modules/dpos/validator/utils/shouldAllowLoadMore.js new file mode 100644 index 0000000000..d0f2f94324 --- /dev/null +++ b/src/modules/dpos/validator/utils/shouldAllowLoadMore.js @@ -0,0 +1,21 @@ +// eslint-disable-next-line import/prefer-default-export +export const shouldAllowLoadMore = ( + activeTab, + standByDelegates, + sanctionedDelegates, +) => { + if (activeTab === 'standby') { + return ( + standByDelegates.meta?.offset + standByDelegates.meta?.count + < standByDelegates.meta?.total + ); + } + if (activeTab === 'sanctioned') { + return ( + sanctionedDelegates.meta?.offset + sanctionedDelegates.meta?.count + < sanctionedDelegates.meta?.total + ); + } + + return false; +}; From 9b17729cc004818d6555fe2f68959f8ca4ffe0d4 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 2 Jun 2022 15:25:59 +0100 Subject: [PATCH 20/24] Refactored delegates component tab display --- .../components/activeDelegatesTab/index.js | 14 +++---- .../delegatesMonitorView/delegates.js | 41 ++++++------------- .../validator/components/latestVotes/index.js | 4 +- .../sanctionedDelegatesTab/index.js | 12 +++--- .../components/standByDelegatesTab/index.js | 12 +++--- .../components/watchedDelegatesTab/index.js | 13 +++--- 6 files changed, 41 insertions(+), 55 deletions(-) diff --git a/src/modules/dpos/validator/components/activeDelegatesTab/index.js b/src/modules/dpos/validator/components/activeDelegatesTab/index.js index 3d49fc4637..24bd913636 100644 --- a/src/modules/dpos/validator/components/activeDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/activeDelegatesTab/index.js @@ -1,15 +1,15 @@ -import React, { useContext } from 'react'; -import DelegateTabContext from '../../context/delegateTabContext'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; import DelegatesTable from '../delegatesTable'; -const ActiveDelegatesTab = () => { - const { - blocks, delegatesWithForgingTimes, filters, watchList, t, activeTab, - } = useContext(DelegateTabContext); +const ActiveDelegatesTab = ({ + blocks, delegates, filters, watchList, activeTab, +}) => { + const { t } = useTranslation(); return ( { - if (tab === 'active') return ; - if (tab === 'standby') return ; - if (tab === 'sanctioned') return ; - if (tab === 'watched') return ; + const commonProps = { + blocks, filters, watchList, activeTab, + }; + + const displayTab = (tab) => { + if (tab === 'active') return ; + if (tab === 'standby') return ; + if (tab === 'sanctioned') return ; + if (tab === 'watched') return ; + if (tab === 'votes') return ; return null; - }, [activeTab]); + }; return (
@@ -160,26 +164,7 @@ const DelegatesMonitor = ({ - {activeTab === 'votes' ? ( - - ) : ( - - {displayTab(activeTab)} - - )} + {displayTab(activeTab)}
diff --git a/src/modules/dpos/validator/components/latestVotes/index.js b/src/modules/dpos/validator/components/latestVotes/index.js index 7cf6ca73db..5b836a1d26 100644 --- a/src/modules/dpos/validator/components/latestVotes/index.js +++ b/src/modules/dpos/validator/components/latestVotes/index.js @@ -1,9 +1,11 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import Table from 'src/theme/table'; import TransactionRow from '@transaction/components/TransactionRow'; import header from './tableHeader'; -const LatestVotes = ({ votes, t, delegates }) => { +const LatestVotes = ({ votes, delegates }) => { + const { t } = useTranslation(); const canLoadMore = votes.meta ? votes.data.length < votes.meta.total : false; const handleLoadMore = () => { diff --git a/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js b/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js index e0b2d5e2dd..8e23279a5a 100644 --- a/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js +++ b/src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js @@ -1,11 +1,11 @@ -import React, { useContext } from 'react'; -import DelegateTabContext from '../../context/delegateTabContext'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; import DelegatesTable from '../delegatesTable'; -const SanctionedDelegatesTab = () => { - const { - blocks, sanctionedDelegates, filters, watchList, t, activeTab, - } = useContext(DelegateTabContext); +const SanctionedDelegatesTab = ({ + blocks, sanctionedDelegates, filters, watchList, activeTab, +}) => { + const { t } = useTranslation(); return ( { - const { - blocks, standByDelegates, filters, watchList, t, activeTab, - } = useContext(DelegateTabContext); +const StandByDelegatesTab = ({ + blocks, standByDelegates, filters, watchList, activeTab, +}) => { + const { t } = useTranslation(); return ( { - const { - blocks, watchedDelegates, filters, watchList, t, activeTab, setActiveTab, - } = useContext(DelegateTabContext); +const WatchedDelegatesTab = ({ + blocks, watchedDelegates, filters, watchList, activeTab, setActiveTab, +}) => { + const { t } = useTranslation(); return ( Date: Thu, 2 Jun 2022 19:48:25 +0100 Subject: [PATCH 21/24] Refactored delegate monitor components and removed some unused files --- .../components/activeDelegatesTab/index.js | 21 ----- .../delegatesMonitorView/delegates.js | 18 +++-- .../components/delegatesTable/TableWrapper.js | 77 ++++++++++--------- .../components/delegatesTable/index.js | 40 ++++------ .../sanctionedDelegatesTab/index.js | 21 ----- .../components/standByDelegatesTab/index.js | 21 ----- .../components/watchedDelegatesTab/index.js | 22 ------ src/modules/dpos/validator/utils/index.js | 2 - .../dpos/validator/utils/selectDelegates.js | 32 -------- .../validator/utils/shouldAllowLoadMore.js | 21 ----- 10 files changed, 64 insertions(+), 211 deletions(-) delete mode 100644 src/modules/dpos/validator/components/activeDelegatesTab/index.js delete mode 100644 src/modules/dpos/validator/components/sanctionedDelegatesTab/index.js delete mode 100644 src/modules/dpos/validator/components/standByDelegatesTab/index.js delete mode 100644 src/modules/dpos/validator/components/watchedDelegatesTab/index.js delete mode 100644 src/modules/dpos/validator/utils/selectDelegates.js delete mode 100644 src/modules/dpos/validator/utils/shouldAllowLoadMore.js diff --git a/src/modules/dpos/validator/components/activeDelegatesTab/index.js b/src/modules/dpos/validator/components/activeDelegatesTab/index.js deleted file mode 100644 index 24bd913636..0000000000 --- a/src/modules/dpos/validator/components/activeDelegatesTab/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import DelegatesTable from '../delegatesTable'; - -const ActiveDelegatesTab = ({ - blocks, delegates, filters, watchList, activeTab, -}) => { - const { t } = useTranslation(); - return ( - - ); -}; - -export default ActiveDelegatesTab; diff --git a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js index 5a2c8471e9..e76df10008 100644 --- a/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js +++ b/src/modules/dpos/validator/components/delegatesMonitorView/delegates.js @@ -9,11 +9,8 @@ import BoxTabs from 'src/theme/tabs'; import { ROUND_LENGTH } from '@dpos/validator/consts'; import DelegatesOverview from '../overview/delegatesOverview'; import ForgingDetails from '../overview/forgingDetails'; +import DelegatesTable from '../delegatesTable'; import LatestVotes from '../latestVotes'; -import ActiveDelegatesTab from '../activeDelegatesTab'; -import StandByDelegatesTab from '../standByDelegatesTab'; -import SanctionedDelegatesTab from '../sanctionedDelegatesTab'; -import WatchedDelegatesTab from '../watchedDelegatesTab'; import styles from './delegates.css'; // eslint-disable-next-line max-statements @@ -121,11 +118,16 @@ const DelegatesMonitor = ({ blocks, filters, watchList, activeTab, }; + const watchedFilters = { + search: filters.search || '', + address: watchList, + }; + const displayTab = (tab) => { - if (tab === 'active') return ; - if (tab === 'standby') return ; - if (tab === 'sanctioned') return ; - if (tab === 'watched') return ; + if (tab === 'active') return ; + if (tab === 'standby') return ; + if (tab === 'sanctioned') return ; + if (tab === 'watched') return ; if (tab === 'votes') return ; return null; }; diff --git a/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js b/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js index 015f457750..50eb4adda3 100644 --- a/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js +++ b/src/modules/dpos/validator/components/delegatesTable/TableWrapper.js @@ -1,13 +1,50 @@ /* istanbul ignore file */ import React from 'react'; import { compose } from 'redux'; +import { useTranslation } from 'react-i18next'; import withLocalSort from 'src/utils/withLocalSort'; import Table from 'src/theme/table'; import { DEFAULT_STANDBY_THRESHOLD } from '@dpos/validator/consts'; import DelegateRow from './delegateRow'; import header from './tableHeader'; -const TableWrapper = compose( +const TableWrapper = ({ + delegates, + handleLoadMore, + activeTab, + blocks, + changeSort, + sort, + canLoadMore, + watchList, + setActiveTab, +}) => { + const { t } = useTranslation(); + return ( +
+ ); +}; + +export default compose( withLocalSort('delegates', 'forgingTime:asc', { forgingTime: (a, b, direction) => (a.nextForgingTime > b.nextForgingTime ? 1 : -1) @@ -32,40 +69,4 @@ const TableWrapper = compose( ? 1 : -1), }), -)( - ({ - delegates, - handleLoadMore, - t, - activeTab, - blocks, - changeSort, - sort, - canLoadMore, - watchList, - setActiveTab, - }) => ( -
- ), -); - -export default TableWrapper; +)(TableWrapper); diff --git a/src/modules/dpos/validator/components/delegatesTable/index.js b/src/modules/dpos/validator/components/delegatesTable/index.js index 0d260193f2..622dbd9e8c 100644 --- a/src/modules/dpos/validator/components/delegatesTable/index.js +++ b/src/modules/dpos/validator/components/delegatesTable/index.js @@ -1,47 +1,38 @@ /* istanbul ignore file */ -import React from 'react'; +import React, { useMemo } from 'react'; +import { filterDelegates } from '../../utils'; import TableWrapper from './TableWrapper'; -import { selectDelegates, shouldAllowLoadMore } from '../../utils'; const DelegatesTable = ({ setActiveTab, delegates, watchList, - watchedDelegates, - standByDelegates, - sanctionedDelegates, + hasLoadMore, activeTab, changeSort, blocks, filters, sort, - t, }) => { - const delegatesToShow = selectDelegates({ - activeTab, - delegates, - standByDelegates, - sanctionedDelegates, - watchedDelegates, - filters, - watchList, - }); - - const canLoadMore = shouldAllowLoadMore( - activeTab, - standByDelegates, - sanctionedDelegates, - ); + const { delegatesFilter, canLoadMore, currentOffset } = useMemo(() => { + const { offset: defaultOffset, count, total } = delegates?.meta || {}; + const offset = defaultOffset + count; + return { + delegatesFilter: filterDelegates(delegates, filters), + canLoadMore: hasLoadMore && (offset < total), + currentOffset: offset, + }; + }, [delegates, filters]); const handleLoadMore = () => { - delegatesToShow.loadData( + delegatesFilter.loadData( Object.keys(filters).reduce( (acc, key) => ({ ...acc, ...(filters[key] && { [key]: filters[key] }), }), { - offset: delegatesToShow.meta.count + delegatesToShow.meta.offset, + offset: currentOffset, }, ), ); @@ -49,12 +40,11 @@ const DelegatesTable = ({ return ( { - const { t } = useTranslation(); - return ( - - ); -}; - -export default SanctionedDelegatesTab; diff --git a/src/modules/dpos/validator/components/standByDelegatesTab/index.js b/src/modules/dpos/validator/components/standByDelegatesTab/index.js deleted file mode 100644 index bc62e1c63c..0000000000 --- a/src/modules/dpos/validator/components/standByDelegatesTab/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import DelegatesTable from '../delegatesTable'; - -const StandByDelegatesTab = ({ - blocks, standByDelegates, filters, watchList, activeTab, -}) => { - const { t } = useTranslation(); - return ( - - ); -}; - -export default StandByDelegatesTab; diff --git a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js b/src/modules/dpos/validator/components/watchedDelegatesTab/index.js deleted file mode 100644 index c97c6cd8de..0000000000 --- a/src/modules/dpos/validator/components/watchedDelegatesTab/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import DelegatesTable from '../delegatesTable'; - -const WatchedDelegatesTab = ({ - blocks, watchedDelegates, filters, watchList, activeTab, setActiveTab, -}) => { - const { t } = useTranslation(); - return ( - - ); -}; - -export default WatchedDelegatesTab; diff --git a/src/modules/dpos/validator/utils/index.js b/src/modules/dpos/validator/utils/index.js index 92774929f8..4b16a96e2f 100644 --- a/src/modules/dpos/validator/utils/index.js +++ b/src/modules/dpos/validator/utils/index.js @@ -1,3 +1 @@ export * from './filterDelegates'; -export * from './selectDelegates'; -export * from './shouldAllowLoadMore'; diff --git a/src/modules/dpos/validator/utils/selectDelegates.js b/src/modules/dpos/validator/utils/selectDelegates.js deleted file mode 100644 index 8e829b87d4..0000000000 --- a/src/modules/dpos/validator/utils/selectDelegates.js +++ /dev/null @@ -1,32 +0,0 @@ -import { filterDelegates } from './filterDelegates'; - -// eslint-disable-next-line import/prefer-default-export -export const selectDelegates = ({ - activeTab, - delegates, - standByDelegates, - sanctionedDelegates, - watchedDelegates, - filters, - watchList, -}) => { - switch (activeTab) { - case 'active': - return filterDelegates(delegates, filters); - - case 'standby': - return filterDelegates(standByDelegates, filters); - - case 'sanctioned': - return filterDelegates(sanctionedDelegates, filters); - - case 'watched': - return filterDelegates(watchedDelegates, { - search: filters.search || '', - address: watchList, - }); - - default: - return undefined; - } -}; diff --git a/src/modules/dpos/validator/utils/shouldAllowLoadMore.js b/src/modules/dpos/validator/utils/shouldAllowLoadMore.js deleted file mode 100644 index d0f2f94324..0000000000 --- a/src/modules/dpos/validator/utils/shouldAllowLoadMore.js +++ /dev/null @@ -1,21 +0,0 @@ -// eslint-disable-next-line import/prefer-default-export -export const shouldAllowLoadMore = ( - activeTab, - standByDelegates, - sanctionedDelegates, -) => { - if (activeTab === 'standby') { - return ( - standByDelegates.meta?.offset + standByDelegates.meta?.count - < standByDelegates.meta?.total - ); - } - if (activeTab === 'sanctioned') { - return ( - sanctionedDelegates.meta?.offset + sanctionedDelegates.meta?.count - < sanctionedDelegates.meta?.total - ); - } - - return false; -}; From 1842149cb1dc526187b2d1d99196cb04791bd4f3 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 2 Jun 2022 20:23:19 +0100 Subject: [PATCH 22/24] Added unit test and removed unused file --- .../validator/context/delegateTabContext.js | 19 -------- .../validator/utils/filterDelegates.test.js | 44 +++++++++++++++++++ 2 files changed, 44 insertions(+), 19 deletions(-) delete mode 100644 src/modules/dpos/validator/context/delegateTabContext.js create mode 100644 src/modules/dpos/validator/utils/filterDelegates.test.js diff --git a/src/modules/dpos/validator/context/delegateTabContext.js b/src/modules/dpos/validator/context/delegateTabContext.js deleted file mode 100644 index fd96da54a7..0000000000 --- a/src/modules/dpos/validator/context/delegateTabContext.js +++ /dev/null @@ -1,19 +0,0 @@ -/* istanbul ignore file */ -import { createContext } from 'react'; - -const DelegateTabContext = createContext( - { - blocks: [], - delegatesWithForgingTimes: [], - filters: '', - watchList: [], - t: str => str, - standByDelegates: [], - sanctionedDelegates: [], - watchedDelegates: [], - activeTab: '', - setActiveTab: () => {}, - }, -); - -export default DelegateTabContext; diff --git a/src/modules/dpos/validator/utils/filterDelegates.test.js b/src/modules/dpos/validator/utils/filterDelegates.test.js new file mode 100644 index 0000000000..097464c609 --- /dev/null +++ b/src/modules/dpos/validator/utils/filterDelegates.test.js @@ -0,0 +1,44 @@ +import { filterDelegates } from './filterDelegates'; + +const delegates = { + data: [ + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y11', + username: 'testUsername_1', + }, + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y32', + username: 'liskUsername_3', + }, + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y53', + username: 'testUsername_5', + }, + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y74', + username: 'liskUsername_7', + }, + ], +}; + +const filters = { + search: 'lisk', +}; + +describe('filterDelegates', () => { + it('properly filters delegates based on username', () => { + const expectedResult = { + data: [ + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y32', + username: 'liskUsername_3', + }, + { + address: 'lskdwsyfmcko6mcd357446yatromr9vzgu7eb8y74', + username: 'liskUsername_7', + }, + ], + }; + expect(filterDelegates(delegates, filters)).toEqual(expectedResult); + }); +}); From a95f77016cd02750f77e92e1601262c1c973339e Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 3 Jun 2022 11:29:35 +0100 Subject: [PATCH 23/24] Minor CSS fixes --- .../components/delegatesTable/delegateRow.js | 6 +- .../components/delegatesTable/layoutSchema.js | 6 +- .../components/delegatesTable/schemas.css | 102 ++++++++++++------ 3 files changed, 74 insertions(+), 40 deletions(-) diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index a7d19bf815..71700ce012 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -7,7 +7,8 @@ import { useTheme } from 'src/theme/Theme'; import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; import getForgingTime from '../../utils/getForgingTime'; import DelegateRowContext from '../../context/delegateRowContext'; -import styles from '../delegatesMonitorView/delegates.css'; +import delegateStyles from '../delegatesMonitorView/delegates.css'; +import styles from './schemas.css'; import LayoutSchema from './layoutSchema'; const DelegateRow = ({ @@ -37,10 +38,11 @@ const DelegateRow = ({ }; const Layout = LayoutSchema[activeTab] || LayoutSchema.default; + const activeStyle = activeTab === 'active' ? styles.fullLayout : styles[activeTab]; return ( * { height: 100%; @@ -15,20 +15,27 @@ flex: 0 0 auto; } - & > *:nth-child(1), + & > *:nth-child(1) { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + & > *:nth-child(2) { flex-basis: 25%; max-width: 25%; } - & > *:nth-child(4), & > *:nth-child(3) { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + & > *:nth-child(4) { flex-basis: 16.66666667%; max-width: 16.66666667%; } - & > *:nth-child(5), - & > *:nth-child(6) { + & > *:nth-child(5) { flex-basis: 8.33333333%; max-width: 8.33333333%; } @@ -49,8 +56,8 @@ } } - &.standbyLayout { - grid-template-areas: "counterpart date fee assets amount"; + &.standby { + grid-template-areas: "delegatedetails delegateweight delegaterank delegatestatus"; & > * { height: 100%; @@ -61,14 +68,21 @@ } & > *:nth-child(1) { - flex-basis: 33.33333%; - max-width: 33.33333%; + flex-basis: 41.66666667%; + max-width: 41.66666667%; } - & > *:nth-child(2), - & > *:nth-child(3), - & > *:nth-child(4), - & > *:nth-child(5) { + & > *:nth-child(2) { + flex-basis: 25%; + max-width: 25%; + } + + & > *:nth-child(3) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + & > *:nth-child(4) { flex-basis: 16.66666667%; max-width: 16.66666667%; } @@ -82,8 +96,31 @@ } } - &.watchedLayout { - grid-template-areas: "counterpart date fee assets amount"; + &.sanctioned { + grid-template-areas: "delegatedetails delegatestatus"; + + & > * { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + & > *:first-child { + flex-flow: row nowrap; + justify-content: flex-start; + flex-grow: 1; + padding-left: 10px; + } + + & > *:last-child { + width: auto; + justify-content: flex-end; + } + } + + &.watched { + grid-template-areas: "delegatedetails delegateweight delegaterank forgingtime roundstate delegatestatus"; & > * { height: 100%; @@ -98,42 +135,37 @@ max-width: 33.33333%; } - & > *:nth-child(2), - & > *:nth-child(3), - & > *:nth-child(4), - & > *:nth-child(5) { + & > *:nth-child(2) { flex-basis: 16.66666667%; max-width: 16.66666667%; } - & > *:first-child { - padding-left: 10px; + & > *:nth-child(3) { + flex-basis: 8.33333333%; + max-width: 8.33333333%; } - & > *:last-child { - justify-content: flex-end; + & > *:nth-child(4) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } - } - &.sanctionedLayout { - grid-template-areas: "counterpart amount"; + & > *:nth-child(5) { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + justify-content: center !important; + } - & > * { - height: 100%; - display: flex; - justify-content: center; - align-items: center; + & > *:nth-child(6) { + flex-basis: 16.66666667%; + max-width: 16.66666667%; } & > *:first-child { - flex-flow: row nowrap; - justify-content: flex-start; - flex-grow: 1; padding-left: 10px; } & > *:last-child { - width: auto; justify-content: flex-end; } } From 516672b3a7c0d016c7ed9308ff5983d561bb6596 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 3 Jun 2022 11:38:14 +0100 Subject: [PATCH 24/24] PR fix --- .../dpos/validator/components/delegatesTable/dataColumns.js | 4 +++- .../dpos/validator/components/delegatesTable/delegateRow.js | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js index 23e414b208..1b5b442bf5 100644 --- a/src/modules/dpos/validator/components/delegatesTable/dataColumns.js +++ b/src/modules/dpos/validator/components/delegatesTable/dataColumns.js @@ -7,6 +7,7 @@ import { truncateAddress } from '@wallet/utils/account'; import WalletVisual from '@wallet/components/walletVisual'; import Tooltip from 'src/theme/Tooltip'; import Icon from 'src/theme/Icon'; +import { useTheme } from 'src/theme/Theme'; import { DEFAULT_STANDBY_THRESHOLD } from '@dpos/validator/consts'; import DelegateRowContext from '../../context/delegateRowContext'; import styles from '../delegatesMonitorView/delegates.css'; @@ -159,8 +160,9 @@ const getDelegateStatus = (key, grossVotesReceived) => { export const DelegateStatus = () => { const { - activeTab, data: { status, totalVotesReceived }, theme, + activeTab, data: { status, totalVotesReceived }, } = useContext(DelegateRowContext); + const theme = useTheme(); const [key, val] = getDelegateStatus(status, totalVotesReceived); return ( diff --git a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js index 71700ce012..3dfc211538 100644 --- a/src/modules/dpos/validator/components/delegatesTable/delegateRow.js +++ b/src/modules/dpos/validator/components/delegatesTable/delegateRow.js @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import routes from '@screens/router/routes'; -import { useTheme } from 'src/theme/Theme'; import { addedToWatchList, removedFromWatchList } from '@common/store/actions'; import getForgingTime from '../../utils/getForgingTime'; import DelegateRowContext from '../../context/delegateRowContext'; @@ -18,7 +17,6 @@ const DelegateRow = ({ data.nextForgingTime || blocks.forgers[blocks.indexBook[data.address]]?.nextForgingTime, ); const dispatch = useDispatch(); - const theme = useTheme(); const isWatched = watchList.find(address => address === data.address); @@ -53,7 +51,6 @@ const DelegateRow = ({ addToWatchList, removeFromWatchList, time: formattedForgingTime, - theme, t, }} >