fix: block behind (#354)

Author: rickimoore

src/components/NetworkStats/NetworkStats.tsx

@@ -30,7 +30,7 @@ const NetworkStats: FC<NetworkStatsProps> = ({
   } = syncData
 
   const { rate, status } = valInclusionData
-  const headSlotStatus = formatAtHeadSlotStatus(-syncDistance)
+  const headSlotStatus = formatAtHeadSlotStatus(syncDistance)
 
   const participationClasses = addClassString('border-none', [!rate && 'opacity-20'])
 
@@ -57,7 +57,7 @@ const NetworkStats: FC<NetworkStatsProps> = ({
         title={t('networkStats.blockBehind')}
         status={headSlotStatus}
         metricFontSize='text-subtitle3'
-        metric={String(-syncDistance)}
+        metric={String(syncDistance)}
       />
       <NetworkPeerSpeedometer peerData={peerData} />
       <NetworkStatBlock

utilities/__tests__/formatAtHeadSlotStatus.spec.ts

@@ -4,9 +4,9 @@ import { StatusColor } from '../../src/types'
 describe('formatAtHeadSlotStatus', () => {
   it('should return correct status', () => {
     expect(formatAtHeadSlotStatus(0)).toBe(StatusColor.SUCCESS)
-    expect(formatAtHeadSlotStatus(-1)).toBe(StatusColor.SUCCESS)
-    expect(formatAtHeadSlotStatus(-3)).toBe(StatusColor.WARNING)
-    expect(formatAtHeadSlotStatus(-5)).toBe(StatusColor.ERROR)
+    expect(formatAtHeadSlotStatus(1)).toBe(StatusColor.SUCCESS)
+    expect(formatAtHeadSlotStatus(3)).toBe(StatusColor.WARNING)
+    expect(formatAtHeadSlotStatus(5)).toBe(StatusColor.ERROR)
     expect(formatAtHeadSlotStatus()).toBe(StatusColor.DARK)
     expect(formatAtHeadSlotStatus(NaN)).toBe(StatusColor.DARK)
   })

utilities/formatAtHeadSlotStatus.ts

@@ -4,11 +4,11 @@ const formatAtHeadSlotStatus = (status?: number): StatusColor => {
   if (status === undefined) return StatusColor.DARK
 
   switch (true) {
-    case status >= -1:
+    case status <= 1:
       return StatusColor.SUCCESS
-    case status <= -2 && status > -5:
+    case status >= 2 && status < 5:
       return StatusColor.WARNING
-    case status <= -5:
+    case status >= 5:
       return StatusColor.ERROR
     default:
       return StatusColor.DARK