Fix unnecessary re-render

near · Aug 2, 2021 · a7ccb82 · a7ccb82
1 parent 4447efc
commit a7ccb82
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 93 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -62,6 +62,7 @@
     "autobahn": "^20.9.2",
     "bn.js": "^5.2.0",
     "bootstrap": "^4.6.0",
+    "country-data": "0.0.31",
     "d3": "^5.16.0",
     "echarts": "^4.9.0",
     "echarts-for-react": "^2.0.16",

diff --git a/frontend/src/components/nodes/ValidatorRow.tsx b/frontend/src/components/nodes/ValidatorRow.tsx
@@ -1,7 +1,15 @@
 import BN from "bn.js";
 import React from "react";
 
-import { Badge, Row, Col, Spinner } from "react-bootstrap";
+import {
+  Badge,
+  Row,
+  Col,
+  Spinner,
+  OverlayTrigger,
+  Tooltip,
+} from "react-bootstrap";
+import { countries } from "country-data";
 
 import { DatabaseConsumer } from "../../context/DatabaseProvider";
 import * as N from "../../libraries/explorer-wamp/nodes";
@@ -124,9 +132,24 @@ class ValidatorRow extends React.PureComponent<Props, State> {
 
                     <td className="order">{index}</td>
                     <td className="country-flag">
-                      <CountryFlag
-                        countryCode={node.poolDetails?.country_code}
-                      />
+                      <OverlayTrigger
+                        overlay={
+                          <Tooltip
+                            id={`${node.poolDetails?.country_code}_${index}`}
+                          >
+                            {node.poolDetails?.country_code &&
+                            typeof node.poolDetails?.country_code !== undefined
+                              ? countries[
+                                  node.poolDetails?.country_code?.toUpperCase()
+                                ].name
+                              : node.poolDetails?.country}
+                          </Tooltip>
+                        }
+                      >
+                        <CountryFlag
+                          countryCode={node.poolDetails?.country_code}
+                        />
+                      </OverlayTrigger>
                     </td>
 
                     <td>
@@ -640,7 +663,7 @@ class ValidatorRow extends React.PureComponent<Props, State> {
 
                     @media (min-width: 1200px) {
                       .validator-name {
-                        max-width: 420px;
+                        max-width: 370px;
                       }
                     }
                   `}</style>

diff --git a/frontend/src/components/nodes/Validators.tsx b/frontend/src/components/nodes/Validators.tsx
@@ -14,7 +14,7 @@ interface Props {
   itemsPerPage: number;
 }
 
-class Validators extends React.PureComponent<Props> {
+class Validators extends React.Component<Props> {
   static defaultProps = {
     itemsPerPage: 120,
   };

diff --git a/frontend/src/components/nodes/ValidatorsList.tsx b/frontend/src/components/nodes/ValidatorsList.tsx
@@ -2,10 +2,6 @@ import BN from "bn.js";
 import React from "react";
 
 import * as N from "../../libraries/explorer-wamp/nodes";
-import {
-  NetworkStatsContext,
-  NetworkStatsContextProps,
-} from "../../context/NetworkStatsProvider";
 
 import ValidatorRow from "./ValidatorRow";
 
@@ -25,11 +21,10 @@ class ValidatorsList extends React.PureComponent<Props> {
       cellCount,
     } = this.props;
 
-    const { networkStats }: NetworkStatsContextProps = this.context;
-
     let validatorsList = validators.sort(
-      (a: N.ValidationNodeInfo, b: N.ValidationNodeInfo) =>
-        new BN(b.stake).sub(new BN(a.stake))
+      (a: N.ValidationNodeInfo, b: N.ValidationNodeInfo) => {
+        return new BN(b.stake).sub(new BN(a.stake));
+      }
     );
 
     // filter validators list by 'active' and 'leaving' validators to culculate cumulative
@@ -40,6 +35,11 @@ class ValidatorsList extends React.PureComponent<Props> {
         ["active", "leaving"].indexOf(i.validatorStatus) >= 0
     );
 
+    const totalStake = activeValidatorsList.reduce(
+      (acc: BN, node: N.ValidationNodeInfo) => acc.add(new BN(node.stake)),
+      new BN(0)
+    );
+
     activeValidatorsList.forEach(
       (validator: N.ValidationNodeInfo, index: number) => {
         let total = new BN(0);
@@ -58,13 +58,14 @@ class ValidatorsList extends React.PureComponent<Props> {
     });
 
     validatorsList.some((validator: N.ValidationNodeInfo, index: number) =>
-      networkStats?.totalStake &&
+      totalStake &&
       validator.cumulativeStakeAmount &&
-      validator.cumulativeStakeAmount.gt(networkStats.totalStake.divn(3))
+      validator.cumulativeStakeAmount.gt(totalStake.divn(3))
         ? (validatorsList[index].networkHolder = true)
         : false
     );
 
+    console.log("Update");
     return (
       <>
         {validatorsList
@@ -75,14 +76,12 @@ class ValidatorsList extends React.PureComponent<Props> {
               node={node}
               index={activePage * itemsPerPage + index + 1}
               cellCount={cellCount}
-              totalStake={networkStats?.totalStake}
+              totalStake={totalStake}
             />
           ))}
       </>
     );
   }
 }
 
-ValidatorsList.contextType = NetworkStatsContext;
-
 export default ValidatorsList;