[+] added node rating

src/components/NodeRating/NodeRating.tsx

@@ -0,0 +1,75 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import BigNumber from 'bignumber.js';
+import classNames from 'classnames';
+
+import { Overlay } from 'components';
+import { faDownRight, faUpRight } from 'icons/regular';
+import { NodeType, WithClassnameType } from 'types';
+
+export interface NodeRatingType extends WithClassnameType {
+  node: NodeType;
+}
+
+const getNodeRatingDisplay = (ratingDifference: BigNumber) => {
+  const shouldDisplayDifference = ratingDifference
+    .absoluteValue()
+    .isGreaterThanOrEqualTo(0.1);
+
+  if (ratingDifference.isZero() || !shouldDisplayDifference) {
+    return {
+      icon: undefined,
+      iconColor: ''
+    };
+  }
+  if (ratingDifference.isPositive()) {
+    return {
+      icon: faUpRight,
+      iconColor: 'text-success'
+    };
+  }
+  if (ratingDifference.isNegative()) {
+    return {
+      icon: faDownRight,
+      iconColor: 'text-danger'
+    };
+  }
+  return {
+    icon: undefined,
+    iconColor: ''
+  };
+};
+
+export const NodeRating = ({ node, className }: NodeRatingType) => {
+  const { rating, tempRating } = node;
+
+  if (isNaN(tempRating)) {
+    return <span className='text-neutral-400'>N/A</span>;
+  }
+
+  const bNtempRating = new BigNumber(tempRating || 0);
+  const bNRating = new BigNumber(rating || 0);
+
+  const ratingDifference = bNtempRating.minus(bNRating);
+  const { icon, iconColor } = getNodeRatingDisplay(ratingDifference);
+
+  return (
+    <div className={classNames('d-flex align-items-center gap-2', className)}>
+      {bNtempRating.toFormat(0)}
+      {icon && iconColor && (
+        <Overlay
+          title={`${
+            ratingDifference.isPositive()
+              ? `+${ratingDifference.toFormat()}`
+              : ratingDifference.toFormat()
+          } compared to Epoch Start Rating`}
+        >
+          <FontAwesomeIcon
+            icon={icon}
+            className={classNames('cursor-context', iconColor)}
+          />
+        </Overlay>
+      )}
+    </div>
+  );
+};

src/components/NodeRating/index.ts

@@ -0,0 +1 @@
+export * from './NodeRating';

src/components/NodesTable/components/TableBody/Rows/StandardRow.tsx

@@ -1,4 +1,5 @@
 import {
+  NodeRating,
   NodeStatus,
   ShardSpan,
   NetworkLink,
@@ -101,11 +102,7 @@ export const StandardRow = ({
         <NodeStatus node={nodeData} className='align-items-end' />
       </td>
       <td className='text-end'>
-        {!isNaN(nodeData.tempRating) ? (
-          Math.floor(nodeData.tempRating)
-        ) : (
-          <span className='text-neutral-400'>N/A</span>
-        )}
+        <NodeRating node={nodeData} className='justify-content-end' />
       </td>
       <td className='text-end'>
         {nodeData.nonce ? (

src/components/NodesTable/components/TableBody/Rows/StatisticsRow.tsx

@@ -1,4 +1,4 @@
-import { NetworkLink, Trim } from 'components';
+import { NetworkLink, NodeRating, Trim } from 'components';
 import { urlBuilder } from 'helpers';
 import { NodeType } from 'types';
 import { RowIcon } from '../../RowIcon';
@@ -62,11 +62,7 @@ export const StatisticsRow = ({ nodeData }: { nodeData: NodeType }) => {
         )}
       </td>
       <td className='text-end'>
-        {nodeData.tempRating ? (
-          nodeData.tempRating.toLocaleString('en')
-        ) : (
-          <span className='text-neutral-400'>N/A</span>
-        )}
+        <NodeRating node={nodeData} className='justify-content-end' />
       </td>
     </>
   );

src/components/index.ts

@@ -35,6 +35,7 @@ export * from './NftBadge';
 export * from './NftBlock';
 export * from './NftPreview';
 export * from './NodesFilters';
+export * from './NodeRating';
 export * from './NodeStatus';
 export * from './NotificationsBar';
 export * from './Overlay';

src/icons/regular/fontawesomeFree.ts

@@ -4,7 +4,9 @@ import {
   faCircleCheck as faShieldCheck,
   faCircleCheck,
   faCircleDot as faCircleBolt,
+  faCircleDown as faDownRight,
   faCircleDown,
+  faCircleUp as faUpRight,
   faCircleUp,
   faClock,
   faClone,
@@ -136,6 +138,7 @@ export {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -187,6 +190,7 @@ export {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,

src/icons/regular/fontawesomePro.ts

@@ -38,6 +38,7 @@ import {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -89,6 +90,7 @@ import {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,
@@ -138,6 +140,7 @@ export {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -189,6 +192,7 @@ export {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,

src/icons/solid/fontawesomeFree.ts

@@ -25,11 +25,13 @@ import {
   faCircleCheck as faShieldCheck,
   faCircleCheck,
   faCircleDot as faCircleBolt,
+  faCircleDown as faDownRight,
   faCircleDown,
   faCircleMinus,
   faCircleNotch as faSpinnerThird,
   faCircleNotch,
   faCirclePlus,
+  faCircleUp as faUpRight,
   faCircleUp,
   faCity,
   faClock,
@@ -134,6 +136,7 @@ export {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -185,6 +188,7 @@ export {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,

src/icons/solid/fontawesomePro.ts

@@ -38,6 +38,7 @@ import {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -89,6 +90,7 @@ import {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,
@@ -138,6 +140,7 @@ export {
   faCube,
   faDiamond,
   faDollarSign,
+  faDownRight,
   faEllipsis,
   faEnvelope,
   faExchange,
@@ -189,6 +192,7 @@ export {
   faTerminal,
   faTimes,
   faTrophy,
+  faUpRight,
   faUser,
   faUserCheck,
   faUserFriends,