Merge pull request #1303 from nymtech/feature-225-delegation-number

explorer: implement SummedDelegations endpoint and display value on f…

explorer/src/api/index.ts

@@ -13,6 +13,7 @@ import {
 import {
   CountryDataResponse,
   DelegationsResponse,
+  UniqDelegationsResponse,
   GatewayResponse,
   MixNodeDescriptionResponse,
   MixNodeResponse,
@@ -117,6 +118,9 @@ export class Api {
   static fetchDelegationsById = async (id: string): Promise<DelegationsResponse> =>
     (await fetch(`${MIXNODE_API}/${id}/delegations`)).json();
 
+  static fetchUniqDelegationsById = async (id: string): Promise<UniqDelegationsResponse> =>
+    (await fetch(`${MIXNODE_API}/${id}/delegations/summed`)).json();
+
   static fetchStatsById = async (id: string): Promise<StatsResponse> =>
     (await fetch(`${MIXNODE_API}/${id}/stats`)).json();
 

explorer/src/components/MixNodes/BondBreakdown.tsx

@@ -13,7 +13,7 @@ import { currencyToString } from '../../utils/currency';
 import { useMixnodeContext } from '../../context/mixnode';
 
 export const BondBreakdownTable: React.FC = () => {
-  const { mixNode, delegations } = useMixnodeContext();
+  const { mixNode, delegations, uniqDelegations } = useMixnodeContext();
   const [showDelegations, toggleShowDelegations] = React.useState<boolean>(false);
 
   const [bonds, setBonds] = React.useState({
@@ -155,7 +155,7 @@ export const BondBreakdownTable: React.FC = () => {
                 fontWeight: 400,
               }}
             >
-              {`(${delegations?.data?.length} delegators)`}
+              {`(${uniqDelegations?.data?.length} delegators)`}
             </Typography>
           </Box>
           <Table stickyHeader>
@@ -193,7 +193,7 @@ export const BondBreakdownTable: React.FC = () => {
             </TableHead>
 
             <TableBody>
-              {delegations?.data?.map(({ owner, amount: { amount, denom } }) => (
+              {uniqDelegations?.data?.map(({ owner, amount: { amount, denom } }) => (
                 <TableRow key={owner}>
                   <TableCell sx={matches ? { width: 190 } : null} align="left">
                     {owner}

explorer/src/context/mixnode.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ApiState,
   DelegationsResponse,
+  UniqDelegationsResponse,
   MixNodeDescriptionResponse,
   MixNodeEconomicDynamicsStatsResponse,
   MixNodeResponseItem,
@@ -18,6 +19,7 @@ import { mixNodeResponseItemToMixnodeRowType, MixnodeRowType } from '../componen
 
 interface MixnodeState {
   delegations?: ApiState<DelegationsResponse>;
+  uniqDelegations?: ApiState<UniqDelegationsResponse>;
   description?: ApiState<MixNodeDescriptionResponse>;
   economicDynamicsStats?: ApiState<MixNodeEconomicDynamicsStatsResponse>;
   mixNode?: ApiState<MixNodeResponseItem | undefined>;
@@ -55,6 +57,12 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
     'Failed to fetch delegations for mixnode',
   );
 
+  const [uniqDelegations, fetchUniqDelegations, clearUniqDelegations] = useApiState<UniqDelegationsResponse>(
+    mixNodeIdentityKey,
+    Api.fetchUniqDelegationsById,
+    'Failed to fetch delegations for mixnode',
+  );
+
   const [status, fetchStatus, clearStatus] = useApiState<StatusResponse>(
     mixNodeIdentityKey,
     Api.fetchStatusById,
@@ -90,6 +98,7 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
     // when the identity key changes, remove all previous data
     clearMixnodeById();
     clearDelegations();
+    clearUniqDelegations();
     clearStatus();
     clearStats();
     clearDescription();
@@ -105,6 +114,7 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
       setMixnodeRow(mixNodeResponseItemToMixnodeRowType(value.data));
       Promise.all([
         fetchDelegations(),
+        fetchUniqDelegations(),
         fetchStatus(),
         fetchStats(),
         fetchDescription(),
@@ -117,6 +127,7 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
   const state = React.useMemo<MixnodeState>(
     () => ({
       delegations,
+      uniqDelegations,
       mixNode,
       mixNodeRow,
       description,
@@ -128,6 +139,7 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
     [
       {
         delegations,
+        uniqDelegations,
         mixNode,
         mixNodeRow,
         description,

explorer/src/typeDefs/explorer-api.ts

@@ -171,8 +171,15 @@ export type Delegation = {
   block_height: number;
 };
 
+export type DelegationUniq = {
+  owner: string;
+  amount: Amount;
+};
+
 export type DelegationsResponse = Delegation[];
 
+export type UniqDelegationsResponse = DelegationUniq[];
+
 export interface CountryDataResponse {
   [threeLetterCountryCode: string]: CountryData;
 }