explorer: mook stake saturation response from API

explorer/src/components/MixNodes/index.ts

@@ -13,6 +13,7 @@ export type MixnodeRowType = {
   layer: string;
   profit_percentage: string;
   avg_uptime: string;
+  stake_saturation: string;
 };
 
 export function mixnodeToGridRow(arrayOfMixnodes?: MixNodeResponse): MixnodeRowType[] {
@@ -25,6 +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 || '';
   return {
     id: item.owner,
     status: item.status,
@@ -37,5 +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)} %` : '-',
   };
 }

explorer/src/context/main.tsx

@@ -81,6 +81,12 @@ export const MainContextProvider: React.FC = ({ children }) => {
     setMixnodes((d) => ({ ...d, isLoading: true }));
     try {
       const data = status ? await Api.fetchMixnodesActiveSetByStatus(status) : await Api.fetchMixnodes();
+      // TODO remove hard coded API response
+      data.map((item) => {
+        const node = item;
+        node.stake_saturation = 0.32;
+        return node;
+      });
       setMixnodes({ data, isLoading: false });
     } catch (error) {
       setMixnodes({

explorer/src/pages/Mixnodes/index.tsx

@@ -248,6 +248,23 @@ export const PageMixnodes: React.FC = () => {
         </MuiLink>
       ),
     },
+    {
+      field: 'stake_saturation',
+      headerName: 'Stake Saturation',
+      renderHeader: () => <CustomColumnHeading headingTitle="Stake Saturation" />,
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 175,
+      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;
+  stake_saturation: number;
 }
 
 export type MixNodeResponse = MixNodeResponseItem[];