Development

.github/workflows/deploy-testnet.yml

@@ -30,22 +30,22 @@ jobs:
           VITE_APP_MARKERS_API_URL: ${{ secrets.MARKERS_API_URL }}
           VITE_APP_VERSION_URL: ${{ secrets.APP_VERSION_URL }}
           VITE_APP_WALLETCONNECT_ID: ${{ secrets.WALLETCONNECT_ID }}
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: 'us-east-1'
-      - name: Deploy to S3 bucket
-        run: aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET_TESTNET }} --delete
-      - name: No-cache index.html
-        run: aws s3 cp s3://${{ secrets.AWS_S3_BUCKET_TESTNET }}/index.html s3://${{ secrets.AWS_S3_BUCKET_TESTNET }}/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --acl public-read
-      - name: Slack Notification
-        uses: rtCamp/action-slack-notify@master
-        env:
-          SLACK_ICON_EMOJI: ':globe_with_meridians:'
-          SLACK_USERNAME: ${{ secrets.AWS_S3_BUCKET_TESTNET }}
-          SLACK_MESSAGE: ${{ secrets.AWS_S3_BUCKET_TESTNET }}
-          SLACK_FOOTER: ''
-          MSG_MINIMAL: true
-          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+      # - name: Configure AWS Credentials
+      #   uses: aws-actions/configure-aws-credentials@v1
+      #   with:
+      #     aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      #     aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      #     aws-region: 'us-east-1'
+      # - name: Deploy to S3 bucket
+      #   run: aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET_TESTNET }} --delete
+      # - name: No-cache index.html
+      #   run: aws s3 cp s3://${{ secrets.AWS_S3_BUCKET_TESTNET }}/index.html s3://${{ secrets.AWS_S3_BUCKET_TESTNET }}/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --acl public-read
+      # - name: Slack Notification
+      #   uses: rtCamp/action-slack-notify@master
+      #   env:
+      #     SLACK_ICON_EMOJI: ':globe_with_meridians:'
+      #     SLACK_USERNAME: ${{ secrets.AWS_S3_BUCKET_TESTNET }}
+      #     SLACK_MESSAGE: ${{ secrets.AWS_S3_BUCKET_TESTNET }}
+      #     SLACK_FOOTER: ''
+      #     MSG_MINIMAL: true
+      #     SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

src/assets/scss/components/_components.scss

@@ -12,6 +12,7 @@
 @import '../../../components/MultilayerPercentageBar/multilayerPercentageBar.styles.scss';
 @import '../../../components/MultilayerPercentageRing/multilayerPercentageRing.styles.scss';
 @import '../../../components/NftPreview/nftPreview.styles.scss';
+@import '../../../components/NodesTable/nodesTable.styles.scss';
 @import '../../../components/NotificationsBar/notificationsBar.styles.scss';
 @import '../../../components/Pager/pager.styles.scss';
 @import '../../../components/PageState/components/IconState/iconState.styles.scss';

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/NodeStatus/NodeStatus.tsx

@@ -0,0 +1,68 @@
+import BigNumber from 'bignumber.js';
+import classNames from 'classnames';
+import { Led, PercentageBar } from 'components';
+import { NodeType, WithClassnameType } from 'types';
+
+export interface NodeStatusType extends WithClassnameType {
+  node: NodeType;
+}
+
+const getNodeStatus = (node: NodeType) => {
+  const { online, syncProgress } = node;
+
+  switch (true) {
+    case online && !syncProgress:
+      return {
+        textColor: 'text-success',
+        ledColor: 'bg-success',
+        status: 'online'
+      };
+    case !online && !syncProgress:
+      return {
+        textColor: 'text-danger',
+        ledColor: 'bg-danger',
+        status: 'offline'
+      };
+    case syncProgress && Number(syncProgress) > 0:
+      return {
+        textColor: '',
+        ledColor: 'bg-primary',
+        status: 'syncing'
+      };
+    default:
+      return {
+        textColor: '',
+        ledColor: '',
+        status: ''
+      };
+  }
+};
+
+export const NodeStatus = ({ node, className }: NodeStatusType) => {
+  const { syncProgress } = node;
+  const { ledColor, textColor, status } = getNodeStatus(node);
+  const fillPercent = new BigNumber(syncProgress || 0).times(100);
+
+  return (
+    <div className={classNames('d-flex flex-column', className)}>
+      <div className='d-flex align-items-center gap-2'>
+        <Led color={ledColor} />
+        <span className={textColor}>{status}</span>
+        {node?.syncProgress && (
+          <span className='text-neutral-400'>
+            ({`${fillPercent.toFormat(2)}%`})
+          </span>
+        )}
+      </div>
+      {node?.syncProgress && (
+        <PercentageBar
+          overallPercent={0}
+          fillPercent={fillPercent.toNumber()}
+          fillPercentLabel={`${fillPercent.toFormat()}%`}
+          type='small'
+          className='mt-2'
+        />
+      )}
+    </div>
+  );
+};

src/components/NodeStatus/index.ts

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

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

@@ -1,4 +1,4 @@
-import { NetworkLink, Trim, Led } from 'components';
+import { NetworkLink, Trim, NodeStatus } from 'components';
 import { urlBuilder } from 'helpers';
 import { NodeType } from 'types';
 import { RowIcon } from '../../RowIcon';
@@ -50,16 +50,7 @@ export const QueueRow = ({ nodeData }: { nodeData: NodeType }) => {
         )}
       </td> */}
       <td>
-        <div className='d-flex align-items-center justify-content-end'>
-          <Led color={nodeData.online ? 'bg-success' : 'bg-danger'} />
-          <span
-            className={`ms-2 ${
-              nodeData.online ? 'text-success' : 'text-danger'
-            }`}
-          >
-            {nodeData.online ? 'online' : 'offline'}
-          </span>
-        </div>
+        <NodeStatus node={nodeData} className='align-items-end' />
       </td>
     </>
   );

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

@@ -1,8 +1,9 @@
 import {
+  NodeRating,
+  NodeStatus,
   ShardSpan,
   NetworkLink,
   Trim,
-  Led,
   Overlay,
   Denominate
 } from 'components';
@@ -98,23 +99,10 @@ export const StandardRow = ({
         )}
       </td>
       <td>
-        <div className='d-flex align-items-center justify-content-end'>
-          <Led color={nodeData.online ? 'bg-success' : 'bg-danger'} />
-          <span
-            className={`ms-2 ${
-              nodeData.online ? 'text-success' : 'text-danger'
-            }`}
-          >
-            {nodeData.online ? 'online' : 'offline'}
-          </span>
-        </div>
+        <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/NodesTable/nodesTable.styles.scss

@@ -0,0 +1,5 @@
+.nodes-table {
+  .percentage-bar {
+    width: 8.125rem;
+  }
+}

src/components/PercentageBar/PercentageBar.tsx

@@ -1,20 +1,30 @@
+import classNames from 'classnames';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
-export const PercentageBar = ({
-  overallPercent,
-  fillPercent,
-  fillPercentLabel,
-  type
-}: {
+import { WithClassnameType } from 'types';
+
+export interface PercentageBarType extends WithClassnameType {
   overallPercent: number;
   fillPercent: number;
   fillPercentLabel: string;
   type?: string;
-}) => (
+}
+
+export const PercentageBar = ({
+  overallPercent,
+  fillPercent,
+  fillPercentLabel,
+  type,
+  className
+}: PercentageBarType) => (
   <div
-    className={`d-flex h-100 align-items-center percentage-bar ${
-      type === 'small' ? 'small' : ''
-    }`}
+    className={classNames(
+      'd-flex h-100 align-items-center percentage-bar',
+      className,
+      {
+        small: type === 'small'
+      }
+    )}
   >
     {overallPercent + fillPercent > 0 ? (
       <div className='progress progress-sm w-100 my-2'>

src/components/index.ts

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

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,