diff --git a/explorer/src/components/MixNodes/index.ts b/explorer/src/components/MixNodes/index.ts
index b9e696e785..298f449e87 100644
--- a/explorer/src/components/MixNodes/index.ts
+++ b/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)} %` : '-',
};
}
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index 4663cd2644..1d50112b91 100644
--- a/explorer/src/context/main.tsx
+++ b/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({
diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
index 49919b00d0..a8f15deafe 100644
--- a/explorer/src/pages/Mixnodes/index.tsx
+++ b/explorer/src/pages/Mixnodes/index.tsx
@@ -248,6 +248,23 @@ export const PageMixnodes: React.FC = () => {
),
},
+ {
+ field: 'stake_saturation',
+ headerName: 'Stake Saturation',
+ renderHeader: () => ,
+ headerClassName: 'MuiDataGrid-header-override',
+ width: 175,
+ headerAlign: 'left',
+ renderCell: (params: GridRenderCellParams) => (
+
+ {params.value}
+
+ ),
+ },
];
const handlePageSize = (event: SelectChangeEvent) => {
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index 36dd210181..1ff353839c 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/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[];