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[];