explorer: stake saturation colour

explorer/src/components/MixNodes/index.ts

@@ -13,7 +13,7 @@ export type MixnodeRowType = {
   layer: string;
   profit_percentage: string;
   avg_uptime: string;
-  stake_saturation: string;
+  stake_saturation: number;
 };
 
 export function mixnodeToGridRow(arrayOfMixnodes?: MixNodeResponse): MixnodeRowType[] {
@@ -26,7 +26,7 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
   const totalBond = pledge + delegations;
   const selfPercentage = ((pledge * 100) / totalBond).toFixed(2);
   const profitPercentage = item.mix_node.profit_margin_percent || 0;
-  const stakeSaturation = item.stake_saturation || '';
+  const stakeSaturation = typeof item.stake_saturation === 'number' ? item.stake_saturation * 100 : 0;
   return {
     id: item.owner,
     status: item.status,
@@ -39,6 +39,6 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
     layer: item?.layer || '',
     profit_percentage: `${profitPercentage}%`,
     avg_uptime: `${item.avg_uptime}%` || '-',
-    stake_saturation: typeof stakeSaturation === 'number' ? `${(stakeSaturation * 100).toFixed(2)} %` : '-',
+    stake_saturation: stakeSaturation,
   };
 }

explorer/src/pages/Mixnodes/index.tsx

@@ -257,11 +257,15 @@ export const PageMixnodes: React.FC = () => {
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
-          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
+          sx={{
+            ...getCellStyles(theme, params.row),
+            textAlign: 'left',
+            colour: params.value > 100 ? theme.palette.warning.main : 'inherit',
+          }}
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.identity_key}`}
         >
-          {params.value}
+          {`${params.value.toFixed(2)} %`}
         </MuiLink>
       ),
     },