From 8656abcbde951bb58c0005ceaf69ff697aca6055 Mon Sep 17 00:00:00 2001
From: Pierre Dommerc <dommerc.pierre@gmail.com>
Date: Thu, 27 Oct 2022 17:16:30 +0200
Subject: [PATCH] fix(explorer): minoxde details page (#1715)

* fix(explorer): minoxde details page

* feat(explorer): add mix_id column in mixnodes list
---
 explorer-api/src/mix_node/models.rs       |  1 +
 explorer-api/src/mix_nodes/models.rs      |  1 +
 explorer/src/components/MixNodes/index.ts |  2 ++
 explorer/src/pages/Mixnodes/index.tsx     | 32 ++++++++++++++++++-----
 explorer/src/typeDefs/explorer-api.ts     |  1 +
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/explorer-api/src/mix_node/models.rs b/explorer-api/src/mix_node/models.rs
index 0332aeaa17..225aab1f4c 100644
--- a/explorer-api/src/mix_node/models.rs
+++ b/explorer-api/src/mix_node/models.rs
@@ -24,6 +24,7 @@ pub(crate) enum MixnodeStatus {
 pub(crate) struct PrettyDetailedMixNodeBond {
     // I leave this to @MS to refactor this type as a lot of things here are redundant thanks to
     // the existence of `MixNodeDetails`
+    pub mix_id: MixId,
     pub location: Option<Location>,
     pub status: MixnodeStatus,
     pub pledge_amount: Coin,
diff --git a/explorer-api/src/mix_nodes/models.rs b/explorer-api/src/mix_nodes/models.rs
index 11d91a6eb1..4909ebdf6e 100644
--- a/explorer-api/src/mix_nodes/models.rs
+++ b/explorer-api/src/mix_nodes/models.rs
@@ -154,6 +154,7 @@ impl ThreadsafeMixNodesCache {
         let rewarding_info = &node.mixnode_details.rewarding_details;
 
         PrettyDetailedMixNodeBond {
+            mix_id,
             location: location.and_then(|l| l.location.clone()),
             status: mixnodes_guard.determine_node_status(mix_id),
             pledge_amount: truncate_reward(rewarding_info.operator, denom),
diff --git a/explorer/src/components/MixNodes/index.ts b/explorer/src/components/MixNodes/index.ts
index 112e55163a..6718e341bd 100644
--- a/explorer/src/components/MixNodes/index.ts
+++ b/explorer/src/components/MixNodes/index.ts
@@ -2,6 +2,7 @@
 import { MixNodeResponse, MixNodeResponseItem, MixnodeStatus } from '../../typeDefs/explorer-api';
 
 export type MixnodeRowType = {
+  mix_id: number;
   id: string;
   status: MixnodeStatus;
   owner: string;
@@ -29,6 +30,7 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
   const profitPercentage = item.mix_node.profit_margin_percent || 0;
   const stakeSaturation = typeof item.stake_saturation === 'number' ? item.stake_saturation * 100 : 0;
   return {
+    mix_id: item.mix_id,
     id: item.owner,
     status: item.status,
     owner: item.owner,
diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
index 93eb35b3e6..3cede1e92f 100644
--- a/explorer/src/pages/Mixnodes/index.tsx
+++ b/explorer/src/pages/Mixnodes/index.tsx
@@ -81,6 +81,24 @@ export const PageMixnodes: React.FC = () => {
   };
 
   const columns: GridColDef[] = [
+    {
+      field: 'mix_id',
+      headerName: 'Mix ID',
+      renderHeader: () => <CustomColumnHeading headingTitle="Mix ID" />,
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 100,
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={getCellStyles(theme, params.row)}
+          component={RRDLink}
+          to={`/network-components/mixnode/${params.value}`}
+          data-testid="mix-id"
+        >
+          {params.value}
+        </MuiLink>
+      ),
+    },
     {
       field: 'identity_key',
       headerName: 'Identity Key',
@@ -98,7 +116,7 @@ export const PageMixnodes: React.FC = () => {
           <MuiLink
             sx={getCellStyles(theme, params.row)}
             component={RRDLink}
-            to={`/network-components/mixnode/${params.value}`}
+            to={`/network-components/mixnode/${params.row.mix_id}`}
             data-testid="identity-link"
           >
             {splice(7, 29, params.value)}
@@ -118,7 +136,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={getCellStyles(theme, params.row)}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {currencyToString(params.value)}
         </MuiLink>
@@ -143,7 +161,7 @@ export const PageMixnodes: React.FC = () => {
             ...getCellStyles(theme, params.row, params.value > 100 ? 'theme.palette.warning.main' : undefined),
           }}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {`${params.value.toFixed(2)} %`}
         </MuiLink>
@@ -161,7 +179,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={getCellStyles(theme, params.row)}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {currencyToString(params.value)}
         </MuiLink>
@@ -183,7 +201,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {params.value}
         </MuiLink>
@@ -205,7 +223,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {params.value}
         </MuiLink>
@@ -286,7 +304,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={getCellStyles(theme, params.row)}
           component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
+          to={`/network-components/mixnode/${params.row.mix_id}`}
         >
           {params.value}
         </MuiLink>
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index dd342ac149..dcd7554c89 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/explorer/src/typeDefs/explorer-api.ts
@@ -70,6 +70,7 @@ export const toMixnodeStatus = (status?: MixnodeStatusWithAll): MixnodeStatus |
 };
 
 export interface MixNodeResponseItem {
+  mix_id: number;
   pledge_amount: Amount;
   total_delegation: Amount;
   owner: string;