display pledge_amount instead of self on mix nodes page

explorer/src/components/DetailTable.tsx

@@ -35,7 +35,10 @@ function formatCellValues(val: string | number, field: string) {
     );
   }
   if (field === 'bond') {
-    return currencyToString(val.toString());
+    if (typeof val === 'string') {
+      return currencyToString(val);
+    }
+    return currencyToString(val?.toString());
   }
   return val;
 }

explorer/src/components/MixNodes/index.ts

@@ -9,6 +9,10 @@ export type MixnodeRowType = {
   identity_key: string;
   bond: number;
   self_percentage: string;
+  pledge_amount: {
+    amount: string;
+    denom: string;
+  };
   host: string;
   layer: string;
   profit_percentage: string;
@@ -22,6 +26,7 @@ export function mixnodeToGridRow(arrayOfMixnodes?: MixNodeResponse): MixnodeRowT
 
 export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem): MixnodeRowType {
   const pledge = Number(item.pledge_amount.amount) || 0;
+  const { denom } = item.pledge_amount;
   const delegations = Number(item.total_delegation.amount) || 0;
   const totalBond = pledge + delegations;
   const selfPercentage = ((pledge * 100) / totalBond).toFixed(2);
@@ -35,6 +40,7 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
     bond: totalBond || 0,
     location: item?.location?.country_name || '',
     self_percentage: selfPercentage,
+    pledge_amount: { amount: pledge.toString(), denom },
     host: item?.mix_node?.host || '',
     layer: item?.layer || '',
     profit_percentage: `${profitPercentage}%`,

explorer/src/pages/Mixnodes/index.tsx

@@ -204,11 +204,11 @@ export const PageMixnodes: React.FC = () => {
       ),
     },
     {
-      field: 'self_percentage',
-      headerName: 'Raw Bond',
-      width: 140,
+      field: 'pledge_amount',
+      headerName: 'Bond',
+      width: 200,
       headerClassName: 'MuiDataGrid-header-override',
-      renderHeader: () => <CustomColumnHeading headingTitle="Raw Bond" tooltipInfo="Node operator's share of stake." />,
+      renderHeader: () => <CustomColumnHeading headingTitle="Bond" tooltipInfo="Node operator's share of stake." />,
       type: 'number',
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
@@ -217,7 +217,7 @@ export const PageMixnodes: React.FC = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.identity_key}`}
         >
-          {params.value}%
+          {currencyToString(params.value.amount, params.value.denom)}
         </MuiLink>
       ),
     },