Network Explorer improvements:

- fix up API urls after Network Explorer API changes
- set currency denominations in `.env` file
- set API endpoints in `.env` file

explorer/.env.example

@@ -1,3 +0,0 @@
-EXPLORER_API_URL=https://testnet-milhon-explorer.nymtech.net
-VALIDATOR_API_URL=https://testnet-milhon-validator1.nymtech.net
-BIG_DIPPER_URL=https://testnet-milhon-blocks.nymtech.net

explorer/.env.prod

@@ -1,3 +1,5 @@
-EXPLORER_API_URL=https://testnet-milhon-explorer.nymtech.net
-VALIDATOR_API_URL=https://testnet-milhon-validator1.nymtech.net
-BIG_DIPPER_URL=https://testnet-milhon-blocks.nymtech.net
+EXPLORER_API_URL=https://sandbox-explorer.nymtech.net/api/v1
+VALIDATOR_API_URL=https://sandbox-validator1.nymtech.net
+BIG_DIPPER_URL=https://sandbox-blocks.nymtech.net
+CURRENCY_DENOM=unymt
+CURRENCY_STAKING_DENOM=unyxt

explorer/src/api/constants.ts

@@ -6,6 +6,7 @@ export const BIG_DIPPER = process.env.BIG_DIPPER_URL;
 // specific API routes
 export const MIXNODE_PING = `${API_BASE_URL}/ping`;
 export const MIXNODES_API = `${API_BASE_URL}/mix-nodes`;
+export const MIXNODE_API = `${API_BASE_URL}/mix-node`;
 export const GATEWAYS_API = `${VALIDATOR_API_BASE_URL}/api/v1/gateways`;
 export const VALIDATORS_API = `${VALIDATOR_API_BASE_URL}/validators`;
 export const BLOCK_API = `${VALIDATOR_API_BASE_URL}/block`;

explorer/src/api/index.ts

@@ -6,6 +6,7 @@ import {
   COUNTRY_DATA_API,
   MIXNODE_PING,
   UPTIME_STORY_API,
+  MIXNODE_API,
 } from './constants';
 
 import {
@@ -87,10 +88,10 @@ export class Api {
   static fetchDelegationsById = async (
     id: string,
   ): Promise<DelegationsResponse> =>
-    (await fetch(`${MIXNODES_API}/${id}/delegations`)).json();
+    (await fetch(`${MIXNODE_API}/${id}/delegations`)).json();
 
   static fetchStatsById = async (id: string): Promise<StatsResponse> =>
-    (await fetch(`${MIXNODES_API}/${id}/stats`)).json();
+    (await fetch(`${MIXNODE_API}/${id}/stats`)).json();
 
   static fetchStatusById = async (id: string): Promise<StatusResponse> =>
     (await fetch(`${MIXNODE_PING}/${id}`)).json();

explorer/src/components/BondBreakdown.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { printableCoin } from '@nymproject/nym-validator-client';
-import { Alert, CircularProgress, useMediaQuery, Box } from '@mui/material';
+import { Alert, Box, CircularProgress, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -11,6 +10,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { useMainContext } from 'src/context/main';
 import { ExpandMore } from '@mui/icons-material';
+import { currencyToString } from '../utils/currency';
 
 export const BondBreakdownTable: React.FC = () => {
   const { mixnodeDetailInfo, delegations } = useMainContext();
@@ -34,24 +34,23 @@ export const BondBreakdownTable: React.FC = () => {
       const thisMixnode = mixnodeDetailInfo?.data[0];
 
       // delegations
-      const decimalisedDelegations = printableCoin({
-        amount: thisMixnode.total_delegation.amount.toString(),
-        denom: thisMixnode.total_delegation.denom,
-      });
+      const decimalisedDelegations = currencyToString(
+        thisMixnode.total_delegation.amount.toString(),
+        thisMixnode.total_delegation.denom,
+      );
 
       // pledges
-      const decimalisedPledges = printableCoin({
-        amount: thisMixnode.bond_amount.amount.toString(),
-        denom: thisMixnode.bond_amount.denom,
-      });
+      const decimalisedPledges = currencyToString(
+        thisMixnode.pledge_amount.amount.toString(),
+        thisMixnode.pledge_amount.denom,
+      );
 
       // bonds total (del + pledges)
-      const pledgesSum = Number(thisMixnode.bond_amount.amount);
+      const pledgesSum = Number(thisMixnode.pledge_amount.amount);
       const delegationsSum = Number(thisMixnode.total_delegation.amount);
-      const bondsTotal = printableCoin({
-        amount: (delegationsSum + pledgesSum).toString(),
-        denom: 'upunk',
-      });
+      const bondsTotal = currencyToString(
+        (delegationsSum + pledgesSum).toString(),
+      );
 
       setBonds({
         delegations: decimalisedDelegations,
@@ -89,7 +88,7 @@ export const BondBreakdownTable: React.FC = () => {
         mixnodeDetailInfo.data[0].total_delegation.amount,
       );
       const rawPledgeAmount = Number(
-        mixnodeDetailInfo.data[0].bond_amount.amount,
+        mixnodeDetailInfo.data[0].pledge_amount.amount,
       );
       const rawTotalBondsAmount = rawDelegationAmount + rawPledgeAmount;
       return ((num * 100) / rawTotalBondsAmount).toFixed(1);
@@ -203,7 +202,7 @@ export const BondBreakdownTable: React.FC = () => {
                           {owner}
                         </TableCell>
                         <TableCell align="left">
-                          {printableCoin({ amount: amount.toString(), denom })}
+                          {currencyToString(amount.toString(), denom)}
                         </TableCell>
                         <TableCell align="left">
                           {calcBondPercentage(amount)}%

explorer/src/components/DetailTable.tsx

@@ -8,9 +8,9 @@ import {
   TableHead,
   TableRow,
 } from '@mui/material';
-import { printableCoin } from '@nymproject/nym-validator-client';
 import { cellStyles } from './Universal-DataGrid';
 import { MixnodeRowType } from '../utils/index';
+import { currencyToString } from '../utils/currency';
 
 export type ColumnsType = {
   field: string;
@@ -28,7 +28,7 @@ export interface UniversalTableProps {
 
 function formatCellValues(val: string | number, field: string) {
   if (field === 'bond') {
-    return printableCoin({ amount: val.toString(), denom: 'upunk' });
+    return currencyToString(val.toString());
   }
   return val;
 }

explorer/src/pages/Gateways/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button, Card, Grid, Typography } from '@mui/material';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
-import { printableCoin } from '@nymproject/nym-validator-client';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { useMainContext } from 'src/context/main';
 import { gatewayToGridRow } from 'src/utils';
@@ -13,6 +12,7 @@ import {
   cellStyles,
   UniversalDataGrid,
 } from 'src/components/Universal-DataGrid';
+import { currencyToString } from '../../utils/currency';
 
 export const PageGateways: React.FC = () => {
   const { gateways } = useMainContext();
@@ -79,17 +79,11 @@ export const PageGateways: React.FC = () => {
       renderHeader: () => <CustomColumnHeading headingTitle="Pledge" />,
       headerClassName: 'MuiDataGrid-header-override',
       headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams) => {
-        const bondAsPunk = printableCoin({
-          amount: params.value as string,
-          denom: 'upunk',
-        });
-        return (
-          <Typography sx={cellStyles} data-testid="pledge-amount">
-            {bondAsPunk}
-          </Typography>
-        );
-      },
+      renderCell: (params: GridRenderCellParams) => (
+        <Typography sx={cellStyles} data-testid="pledge-amount">
+          {currencyToString(params.value)}
+        </Typography>
+      ),
     },
     {
       field: 'host',

explorer/src/pages/Mixnodes/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
-import { printableCoin } from '@nymproject/nym-validator-client';
 import { Button, Grid, Link as MuiLink, Card } from '@mui/material';
 import { Link as RRDLink } from 'react-router-dom';
 import { SelectChangeEvent } from '@mui/material/Select';
@@ -15,6 +14,7 @@ import {
   UniversalDataGrid,
   cellStyles,
 } from 'src/components/Universal-DataGrid';
+import { currencyToString } from '../../utils/currency';
 
 export const PageMixnodes: React.FC = () => {
   const { mixnodes } = useMainContext();
@@ -92,21 +92,15 @@ export const PageMixnodes: React.FC = () => {
       headerClassName: 'MuiDataGrid-header-override',
       width: 150,
       headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams) => {
-        const bondAsPunk = printableCoin({
-          amount: params.value as string,
-          denom: 'upunk',
-        });
-        return (
-          <MuiLink
-            sx={cellStyles}
-            component={RRDLink}
-            to={`/network-components/mixnodes/${params.row.identity_key}`}
-          >
-            {bondAsPunk}
-          </MuiLink>
-        );
-      },
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={cellStyles}
+          component={RRDLink}
+          to={`/network-components/mixnodes/${params.row.identity_key}`}
+        >
+          {currencyToString(params.value)}
+        </MuiLink>
+      ),
     },
     {
       field: 'location',

explorer/src/typeDefs/explorer-api.ts

@@ -7,13 +7,14 @@ export interface ClientConfig {
 
 export interface MixNode {
   host: string;
-  location: string;
+  mix_port: number;
+  http_api_port: number;
+  verloc_port: number;
   sphinx_key: string;
   identity_key: string;
   version: string;
-  mix_port: number;
-  verloc_port: number;
-  http_api_port: number;
+  profit_margin_percent: number;
+  location: string;
 }
 
 export interface Gateway {
@@ -32,7 +33,7 @@ export interface Amount {
 }
 
 export interface MixNodeResponseItem {
-  bond_amount: Amount;
+  pledge_amount: Amount;
   total_delegation: Amount;
   owner: string;
   layer: string;
@@ -74,7 +75,7 @@ export type MixNodeHistoryResponse = StatsResponse;
 
 export interface GatewayResponseItem {
   block_height: number;
-  bond_amount: Amount;
+  pledge_amount: Amount;
   total_delegation: Amount;
   owner: string;
   gateway: Gateway;

explorer/src/utils/currency.ts

@@ -0,0 +1,19 @@
+import { printableCoin } from '@nymproject/nym-validator-client';
+
+const DENOM = process.env.CURRENCY_DENOM || 'unym';
+const DENOM_STAKING = process.env.CURRENCY_STAKING_DENOM || 'unyx';
+
+export const currencyToString = (amount: string, denom: string = DENOM) =>
+  printableCoin({
+    amount,
+    denom,
+  });
+
+export const stakingCurrencyToString = (
+  amount: string,
+  denom: string = DENOM_STAKING,
+) =>
+  printableCoin({
+    amount,
+    denom,
+  });

explorer/src/utils/index.ts

@@ -69,7 +69,7 @@ export function mixnodeToGridRow(arrayOfMixnodes: MixNodeResponse): any {
   return !arrayOfMixnodes
     ? []
     : arrayOfMixnodes.map((mn) => {
-        const pledge = Number(mn.bond_amount.amount) || 0;
+        const pledge = Number(mn.pledge_amount.amount) || 0;
         const delegations = Number(mn.total_delegation.amount) || 0;
         const totalBond = pledge + delegations;
         const selfPercentage = ((pledge * 100) / totalBond).toFixed(2);
@@ -96,7 +96,7 @@ export function gatewayToGridRow(
         owner: gw.owner,
         identity_key: gw.gateway.identity_key || '',
         location: gw?.gateway?.location || '',
-        bond: gw.bond_amount.amount || 0,
+        bond: gw.pledge_amount.amount || 0,
         host: gw.gateway.host || '',
       }));
 }