From 5fbf20aace3c0e595c55e9bb18bc3974946e8145 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Fri, 24 Nov 2023 17:36:12 +0200 Subject: [PATCH] [+] added node rating --- src/components/NodeRating/NodeRating.tsx | 75 +++++++++++++++++++ src/components/NodeRating/index.ts | 1 + .../components/TableBody/Rows/StandardRow.tsx | 7 +- .../TableBody/Rows/StatisticsRow.tsx | 8 +- src/components/index.ts | 1 + src/icons/regular/fontawesomeFree.ts | 4 + src/icons/regular/fontawesomePro.ts | 4 + src/icons/solid/fontawesomeFree.ts | 4 + src/icons/solid/fontawesomePro.ts | 4 + 9 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 src/components/NodeRating/NodeRating.tsx create mode 100644 src/components/NodeRating/index.ts diff --git a/src/components/NodeRating/NodeRating.tsx b/src/components/NodeRating/NodeRating.tsx new file mode 100644 index 000000000..c993f5757 --- /dev/null +++ b/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 N/A; + } + + const bNtempRating = new BigNumber(tempRating || 0); + const bNRating = new BigNumber(rating || 0); + + const ratingDifference = bNtempRating.minus(bNRating); + const { icon, iconColor } = getNodeRatingDisplay(ratingDifference); + + return ( +
+ {bNtempRating.toFormat(0)} + {icon && iconColor && ( + + + + )} +
+ ); +}; diff --git a/src/components/NodeRating/index.ts b/src/components/NodeRating/index.ts new file mode 100644 index 000000000..5a664853d --- /dev/null +++ b/src/components/NodeRating/index.ts @@ -0,0 +1 @@ +export * from './NodeRating'; diff --git a/src/components/NodesTable/components/TableBody/Rows/StandardRow.tsx b/src/components/NodesTable/components/TableBody/Rows/StandardRow.tsx index 28c32ae35..14e74a936 100644 --- a/src/components/NodesTable/components/TableBody/Rows/StandardRow.tsx +++ b/src/components/NodesTable/components/TableBody/Rows/StandardRow.tsx @@ -1,4 +1,5 @@ import { + NodeRating, NodeStatus, ShardSpan, NetworkLink, @@ -101,11 +102,7 @@ export const StandardRow = ({ - {!isNaN(nodeData.tempRating) ? ( - Math.floor(nodeData.tempRating) - ) : ( - N/A - )} + {nodeData.nonce ? ( diff --git a/src/components/NodesTable/components/TableBody/Rows/StatisticsRow.tsx b/src/components/NodesTable/components/TableBody/Rows/StatisticsRow.tsx index a44ee6c0b..f57b02faa 100644 --- a/src/components/NodesTable/components/TableBody/Rows/StatisticsRow.tsx +++ b/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 }) => { )} - {nodeData.tempRating ? ( - nodeData.tempRating.toLocaleString('en') - ) : ( - N/A - )} + ); diff --git a/src/components/index.ts b/src/components/index.ts index 591bd2e7d..ee504ebc8 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/icons/regular/fontawesomeFree.ts b/src/icons/regular/fontawesomeFree.ts index 5176e65cf..54fbe8670 100644 --- a/src/icons/regular/fontawesomeFree.ts +++ b/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, diff --git a/src/icons/regular/fontawesomePro.ts b/src/icons/regular/fontawesomePro.ts index 8229496fc..a9b102111 100644 --- a/src/icons/regular/fontawesomePro.ts +++ b/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, diff --git a/src/icons/solid/fontawesomeFree.ts b/src/icons/solid/fontawesomeFree.ts index 2c5341919..8ee495f7d 100644 --- a/src/icons/solid/fontawesomeFree.ts +++ b/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, diff --git a/src/icons/solid/fontawesomePro.ts b/src/icons/solid/fontawesomePro.ts index 53d21f1e2..ad9075c65 100644 --- a/src/icons/solid/fontawesomePro.ts +++ b/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,