explorer: altering api response to make ui work

explorer/src/api/index.ts

@@ -60,8 +60,15 @@ export class Api {
     }
     const res = await fetch(MIXNODES_API);
     const json = await res.json();
-    storeInCache('mixnodes', JSON.stringify(json));
-    return json;
+    // TODO remove hard coded API response
+    const nodeArr = json.map((element: MixNodeResponseItem) => {
+      const node = element;
+      node.delegators_number = 2;
+      return node;
+    });
+
+    storeInCache('mixnodes', JSON.stringify(nodeArr));
+    return nodeArr;
   };
 
   static fetchMixnodesActiveSetByStatus = async (status: MixnodeStatus): Promise<MixNodeResponse> => {
@@ -71,8 +78,14 @@ export class Api {
     }
     const res = await fetch(`${MIXNODES_API}/active-set/${status}`);
     const json = await res.json();
-    storeInCache(`mixnodes-${status}`, JSON.stringify(json));
-    return json;
+    // TODO remove hard coded API response
+    const nodeArr = json.map((element: MixNodeResponseItem) => {
+      const node = element;
+      node.delegators_number = 2;
+      return node;
+    });
+    storeInCache(`mixnodes-${status}`, JSON.stringify(nodeArr));
+    return nodeArr;
   };
 
   static fetchMixnodeByID = async (id: string): Promise<MixNodeResponseItem | undefined> => {

explorer/src/components/MixNodes/index.ts

@@ -13,6 +13,7 @@ export type MixnodeRowType = {
   layer: string;
   profit_percentage: string;
   avg_uptime: string;
+  delegators_number: number;
 };
 
 export function mixnodeToGridRow(arrayOfMixnodes?: MixNodeResponse): MixnodeRowType[] {
@@ -37,5 +38,6 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
     layer: item?.layer || '',
     profit_percentage: `${profitPercentage}%`,
     avg_uptime: `${item.avg_uptime}%` || '-',
+    delegators_number: Number(item.delegators_number) || 0,
   };
 }

explorer/src/pages/Mixnodes/index.tsx

@@ -231,6 +231,23 @@ export const PageMixnodes: React.FC = () => {
         </MuiLink>
       ),
     },
+    {
+      field: 'delegators_number',
+      headerName: 'Delegators Number',
+      renderHeader: () => <CustomColumnHeading headingTitle="Delegators Number" />,
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 185,
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
+          component={RRDLink}
+          to={`/network-components/mixnode/${params.row.identity_key}`}
+        >
+          {params.value}
+        </MuiLink>
+      ),
+    },
   ];
 
   const handlePageSize = (event: SelectChangeEvent<string>) => {

explorer/src/typeDefs/explorer-api.ts

@@ -84,6 +84,7 @@ export interface MixNodeResponseItem {
   };
   mix_node: MixNode;
   avg_uptime: number;
+  delegators_number: number;
 }
 
 export type MixNodeResponse = MixNodeResponseItem[];