Merge pull request #3985 from nymtech/bug/issue-3984/fix-mixnode-sorting

Fix sorting for mixnodes and gateways

explorer/src/components/Gateways.ts

@@ -1,5 +1,5 @@
 import { GatewayResponse, GatewayBond, GatewayReportResponse } from '../typeDefs/explorer-api';
-import { toPercentIntegerString } from '../utils';
+import { toPercentInteger } from '../utils';
 
 export type GatewayRowType = {
   id: string;
@@ -9,7 +9,7 @@ export type GatewayRowType = {
   host: string;
   location: string;
   version: string;
-  node_performance: string;
+  node_performance: number;
 };
 
 export type GatewayEnrichedRowType = GatewayRowType & {
@@ -30,7 +30,7 @@ export function gatewayToGridRow(arrayOfGateways: GatewayResponse): GatewayRowTy
         bond: gw.pledge_amount.amount || 0,
         host: gw.gateway.host || '',
         version: gw.gateway.version || '',
-        node_performance: toPercentIntegerString(gw.node_performance.last_24h),
+        node_performance: toPercentInteger(gw.node_performance.last_24h),
       }));
 }
 
@@ -47,6 +47,6 @@ export function gatewayEnrichedToGridRow(gateway: GatewayBond, report: GatewayRe
     mixPort: gateway.gateway.mix_port || 0,
     routingScore: `${report.most_recent}%`,
     avgUptime: `${report.last_day || report.last_hour}%`,
-    node_performance: toPercentIntegerString(gateway.node_performance.most_recent),
+    node_performance: toPercentInteger(gateway.node_performance.most_recent),
   };
 }

explorer/src/components/MixNodes/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { MixNodeResponse, MixNodeResponseItem, MixnodeStatus, NodePerformance } from '../../typeDefs/explorer-api';
-import { toPercentIntegerString } from '../../utils';
+import { MixNodeResponse, MixNodeResponseItem, MixnodeStatus } from '../../typeDefs/explorer-api';
+import { toPercentInteger, toPercentIntegerString } from '../../utils';
 import { unymToNym } from '../../utils/currency';
 
 export type MixnodeRowType = {
@@ -15,11 +15,11 @@ export type MixnodeRowType = {
   pledge_amount: number;
   host: string;
   layer: string;
-  profit_percentage: string;
+  profit_percentage: number;
   avg_uptime: string;
   stake_saturation: React.ReactNode;
-  operating_cost: string;
-  node_performance: NodePerformance['most_recent'];
+  operating_cost: number;
+  node_performance: number;
   blacklisted: boolean;
 };
 
@@ -32,7 +32,7 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
   const delegations = Number(item.total_delegation.amount) || 0;
   const totalBond = pledge + delegations;
   const selfPercentage = ((pledge * 100) / totalBond).toFixed(2);
-  const profitPercentage = toPercentIntegerString(item.profit_margin_percent) || 0;
+  const profitPercentage = toPercentInteger(item.profit_margin_percent) || 0;
   const uncappedSaturation = typeof item.uncapped_saturation === 'number' ? item.uncapped_saturation * 100 : 0;
 
   return {
@@ -47,11 +47,11 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
     pledge_amount: pledge,
     host: item?.mix_node?.host || '',
     layer: item?.layer || '',
-    profit_percentage: `${profitPercentage}%`,
+    profit_percentage: profitPercentage,
     avg_uptime: `${toPercentIntegerString(item.node_performance.last_24h)}%`,
     stake_saturation: Number(uncappedSaturation.toFixed(2)),
-    operating_cost: `${unymToNym(item.operating_cost?.amount, 6)} NYM`,
-    node_performance: `${toPercentIntegerString(item.node_performance.most_recent)}%`,
+    operating_cost: Number(unymToNym(item.operating_cost?.amount, 6)) || 0,
+    node_performance: toPercentInteger(item.node_performance.most_recent),
     blacklisted: item.blacklisted,
   };
 }

explorer/src/pages/Mixnodes/index.tsx

@@ -210,7 +210,7 @@ export const PageMixnodes: FCWithChildren = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
-          {params.value}
+          {params.value}%
         </MuiLink>
       ),
     },
@@ -233,7 +233,7 @@ export const PageMixnodes: FCWithChildren = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
-          {params.value}
+          {params.value} NYM
         </MuiLink>
       ),
     },
@@ -256,7 +256,7 @@ export const PageMixnodes: FCWithChildren = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
-          {params.value}
+          {params.value}%
         </MuiLink>
       ),
     },

explorer/src/utils/index.ts

@@ -55,6 +55,7 @@ export const splice = (start: number, deleteCount: number, address?: string): st
  * @returns A stringified integer
  */
 export const toPercentIntegerString = (value: string) => Math.round(Number(value) * 100).toString();
+export const toPercentInteger = (value: string) => Math.round(Number(value) * 100);
 
 export const textColour = (value: EconomicsRowsType, field: string, theme: Theme) => {
   const progressBarValue = value?.progressBarValue || 0;