feat(frontend): Implementation of new design on Nodes page #613

shelegdmitriy · 2021-04-22T13:52:23Z

Resolves #370

Test plan

Existing tests pass;
ValidatorsList unit test covering a list of validators and proposals with all data;
ValidatorsRow unit test covering a single validator row with all data;
ValidatorsRow unit test covering a single validator row with partial data;
NodeEpoch unit test covering a section with information about epoch status;

render · 2021-04-22T13:52:27Z

Your Render PR Server URL is https://near-explorer-frontend-with-indexer-pr.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-c20nv6bs1gh9plsflk9g.

shelegdmitriy · 2021-04-22T13:55:53Z

@frol, currently I don't know how to get some data. But I have some thoughts of how to do it

backend/src/wamp.js

backend/src/index.js

backend/src/near.js

frontend/src/components/nodes/CumuativeStakeChart.tsx

frol · 2021-05-07T19:13:02Z

frontend/src/components/nodes/CumulativeStakeChart.tsx

+    <div className="total-value" style={{ width: `${value.total}%` }} />
+    <div className="current-value" />
+    <div className="cumulative-stake-label">{value.current}%</div>


It is just a coincidence that the width of the dark blue chunk has a constant size

On the second line the light-blue block on the left represents 27% of the width, and the width of the dark blue line is the % of the current stake out of the total stake (8% in that case). In other words, 27%+8% = 35%

frol · 2021-05-07T19:20:17Z

frontend/src/components/nodes/NodesCard.tsx

+        Number(
+          utils.format.formatNearAmount(amount.toString(), 0).replace(/,/g, "")
+        ) /
+        10 ** 6


You do not need to format the amount and then convert it back to Number. If amount is BN, just divide it by 10 ** (24 + 9)

frol · 2021-05-07T19:45:55Z

frontend/src/components/nodes/NodesEpoch.tsx

+      const currentTimestamp = moment() as moment.Moment;
+      const endEpochTimestamp = moment(
+        this.props.epochStartBlock.timestamp
+      ).add(12, "h");
+      const duration = moment
+        .duration(
+          endEpochTimestamp.diff(moment(this.props.epochStartBlock.timestamp))
+        )
+        .asSeconds();
+      const durationProseed = moment
+        .duration(
+          currentTimestamp.diff(moment(this.props.epochStartBlock.timestamp))
+        )
+        .asSeconds();
+      const durationValue = (durationProseed / duration) * 100;
+      this.setState({
+        timeRemaining: moment
+          .duration(endEpochTimestamp.diff(currentTimestamp))
+          .asMilliseconds(),
+        epochProseed: Number(durationValue.toFixed(2)),


epochProgress = (latestBlock.height - epochStartBlock.height) / epochLength * 100 timeRemaining = (latestBlock.timestamp - epochStartBlock.timestamp) / epochProgress * (100 - epochProgress)

frol · 2021-05-07T19:49:45Z

frontend/src/components/nodes/NodesEpoch.tsx

+              (
+              {timeRemaining
+                ? moment(timeRemaining)?.format("HH:mm:ss")
+                : "00:00:00"}{" "}
+              remaining)


I feel this is easier to read:

Suggested change

(

{timeRemaining

? moment(timeRemaining)?.format("HH:mm:ss")

: "00:00:00"}{" "}

remaining)

{`({timeRemaining

? moment(timeRemaining)?.format("HH:mm:ss")

: "00:00:00"} remaining)`}

frol · 2021-05-07T19:54:50Z

frontend/src/components/nodes/ValidatorRow.tsx

  render() {
-    const { node } = this.props;
+    const { node, index, cellCount, validatorType } = this.props;
+    let persntStake = 0;


The naming looks odd to me O_o

frol · 2021-05-07T20:03:53Z

frontend/src/components/nodes/ValidatorsList.tsx

+class ValidatorsList extends React.PureComponent<Props> {
+  calculateStake = (nodeIndex: number, totalStake: BN) => {
+    let total = new BN(0);
+    let networkHolderIndex = [];


You don't need an array here, you only care about the very first value. Just initialize it as null and only set it if the accumulated stake is over 33% and also this variable is still null.

I could not figure out of how to do it differently here

frol · 2021-05-07T20:04:43Z

frontend/src/components/nodes/ValidatorsList.tsx

+    for (let i = 0; i <= nodeIndex; i++) {
+      total = total.add(new BN(this.props.validators[i].stake));
+
+      if (total.gt(totalStake.div(new BN(3)))) {


Precompute the totalStake.divn(3) in a const before the loop, so you don't need to re-compute it over and over again in the loop.

frol · 2021-05-07T20:11:29Z

frontend/src/components/utils/Balance.jsx

@@ -5,19 +5,23 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";

 const FRAC_DIGITS = 5;

-const Balance = ({ amount }) => {
+const Balance = ({ amount, label = null, className = "" }) => {


It think it is better to leave className undefined if it was not defined

Suggested change

const Balance = ({ amount, label = null, className = "" }) => {

const Balance = ({ amount, label = null, className }) => {

frol · 2021-05-07T20:18:09Z

frontend/src/context/NodeStatsProvider.tsx

    return () => {
      explorerApi.unsubscribe("node-stats");
    };
-  }, []);
+  }, [epochStartHeight]);


Create a separate useEffect since otherwise, this code will re-subscribe to node-stats for no good reason.

frol · 2021-05-07T20:43:06Z

backend/src/index.js

@@ -285,6 +319,24 @@ async function main() {
  };
  setTimeout(regularCheckNodeStatus, 0);

+  // Periodic check of validator's fee and delegators
+  const regularCheckValidatorsExtraInfo = async (validators) => {


Use a dedicated setTimeout for this regularCheckValidatorsExtraInfo, and don't call it from regularCheckNodeStatus. Fetch the validators (current validators and current proposals) inside this regular job, so you do not need to call it from regularCheckNodeStatus.

frol · 2021-05-07T21:04:01Z

Bugreport:

B, M are off.

Seat price precision should does not need the float precision.

shelegdmitriy · 2021-05-10T15:03:30Z

backend/src/index.js

+  const regularCheckValidatorsExtraInfo = async () => {
+    if (validators) {
+      validatorsExtraInfo = validatorsExtraInfo || validators;
+
+      for (let i = 0; i < validatorsExtraInfo.length; i++) {
+        const { account_id } = validatorsExtraInfo[i];
+        validatorsExtraInfo[i].fee = await nearRpc.callViewMethod(
+          account_id,
+          "get_reward_fee_fraction",
+          {}
+        );
+        validatorsExtraInfo[i].delegators = await nearRpc.callViewMethod(
+          account_id,
+          "get_number_of_accounts",
+          {}
+        );
+      }
    }
-    return validators;
+
+    if (proposals) {
+      proposalsExtraInfo = proposalsExtraInfo || proposals;
+
+      for (let i = 0; i < proposalsExtraInfo.length; i++) {
+        const { account_id } = proposalsExtraInfo[i];
+        proposalsExtraInfo[i].fee = await nearRpc.callViewMethod(
+          account_id,
+          "get_reward_fee_fraction",
+          {}
+        );
+        proposalsExtraInfo[i].delegators = await nearRpc.callViewMethod(
+          account_id,
+          "get_number_of_accounts",
+          {}
+        );
+      }
+    }


@frol , I don't know is it a good idea or not... Could you please look at it and tell me your mind?

shelegdmitriy · 2021-05-10T15:04:22Z

frontend/src/components/nodes/NodesCard.tsx

+    value = (Number(amount) / 10 ** (24 + 6)).toFixed(1);
  } else if (type === "totalStakeAmount") {
-    value =
-      (
-        Number(
-          utils.format.formatNearAmount(amount.toString(), 0).replace(/,/g, "")
-        ) /
-        10 ** 3
-      ).toFixed(1) + "M";
+    value = (Number(amount) / 10 ** (24 + 3)).toFixed(1);
+  } else if (type === "seatPriceAmount") {
+    value = (Number(amount) / 10 ** 24).toFixed(1);


@frol , also this looks strange but with BN it fails

frontend/src/context/DatabaseProvider.tsx

frol · 2021-05-12T22:57:04Z

@shelegdmitriy I had to move a lot of things around to hopefully name things a little bit better. There are lots of things that remain to be named in a way that is hard to reason about, but I did not want to block this PR even more.

Please, go over the Figma design and especially font sizes as it seems that they might be off.

Bug report:

missing "M" (million) suffix
let's make total stake the same magnitude as total supply ("M")
Let's add comma-formatting

…g at least somewhat sane

frol · 2021-05-14T09:12:37Z

Bugs on mobile:

frontend/src/components/nodes/ValidatorRow.tsx

…mation fetching

shelegdmitriy requested a review from frol April 22, 2021 13:52

shelegdmitriy self-assigned this Apr 22, 2021

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch from 7e1afc0 to 256eb68 Compare April 22, 2021 13:53

shelegdmitriy commented Apr 22, 2021

View reviewed changes

backend/src/wamp.js Outdated Show resolved Hide resolved

frol mentioned this pull request May 4, 2021

Design Dashboard for Validators #370

Closed

2 tasks

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch from 4a3e2a4 to 5fd1044 Compare May 5, 2021 10:06

frol reviewed May 5, 2021

View reviewed changes

frol changed the title ~~feat(fronted): Implementation of new design on Nodes page~~ feat(frontend): Implementation of new design on Nodes page May 5, 2021

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch 6 times, most recently from 42c0105 to 0237158 Compare May 6, 2021 14:47

shelegdmitriy marked this pull request as ready for review May 7, 2021 07:48

frol suggested changes May 7, 2021

View reviewed changes

shelegdmitriy commented May 10, 2021

View reviewed changes

frontend/src/context/DatabaseProvider.tsx Show resolved Hide resolved

shelegdmitriy added 7 commits May 13, 2021 08:58

feat(fronted): Implementation of new design on Nodes page

4692b10

feat(fronted): Add fee and delegators to validators

f4a25e7

Fix fee and delegators caching

bd4dc47

Round off numbers on NodesCard

d57ae5a

Write tests

9102a28

Fix tests

d6fa33d

Rewrite caching of fee and delegators

724b266

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch from ecb0a96 to fb7ba55 Compare May 13, 2021 06:05

refactor: Moved things around to clean up the code and make the namin…

c4124bd

…g at least somewhat sane

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch 2 times, most recently from 12360ad to 2075cf5 Compare May 13, 2021 07:02

Update test snapshots

c3c092d

shelegdmitriy force-pushed the feat/design_dashboard_for_validators branch from 2075cf5 to c3c092d Compare May 13, 2021 07:18

Bugfix of card and pagination on mobile

dee7769