chore: add proposer address in block list

apps/web-namada/src/chain.json

@@ -130,21 +130,21 @@
   "chains": [
     {
       "network": "crescent-1",
-      "chainType": "Mainnet",
+      "chainType": "Testnet",
       "genesis": {
         "time": "2022-04-13T00:00:00",
         "height": 1
       },
       "prefix": {
         "consensus": "crevalcons",
         "validator": "crevaloper",
-        "account": "cre"
+        "account": "tnam"
       },
-      "primaryTokenUnit": "ucre",
-      "votingPowerTokenUnit": "ucre",
+      "primaryTokenUnit": "unam",
+      "votingPowerTokenUnit": "unam",
       "tokenUnits": {
-        "ucre": {
-          "display": "cre",
+        "unam": {
+          "display": "nam",
           "exponent": 6
         }
       },

apps/web-namada/src/graphql/general/blocks.graphql

@@ -4,5 +4,6 @@ query Blocks($limit: Int = 7, $offset: Int = 0) {
     txs: num_txs
     hash
     timestamp
+    proposerAddress: proposer_address
   }
 }

apps/web-namada/src/graphql/types/general_types.ts

@@ -1178,7 +1178,7 @@ export type BlocksQueryVariables = Exact<{
 }>;
 
 
-export type BlocksQuery = { blocks: Array<{ __typename?: 'block', height: any, hash: string, timestamp: any, txs?: number | null }> };
+export type BlocksQuery = { blocks: Array<{ __typename?: 'block', height: any, hash: string, timestamp: any, txs?: number | null, proposerAddress?: string | null }> };
 
 
 export const BlocksDocument = gql`
@@ -1188,6 +1188,7 @@ export const BlocksDocument = gql`
     txs: num_txs
     hash
     timestamp
+    proposerAddress: proposer_address
   }
 }
     `;

apps/web-namada/src/screens/blocks/hooks.ts

@@ -0,0 +1,140 @@
+import * as R from 'ramda';
+import { useCallback, useState } from 'react';
+import {
+  BlocksListenerSubscription,
+  useBlocksListenerSubscription,
+  useBlocksQuery,
+} from '@/graphql/types/general_types';
+import type { BlocksState, BlockType } from '@/screens/blocks/types';
+
+// This is a bandaid as it can get extremely
+// expensive if there is too much data
+/**
+ * Helps remove any possible duplication
+ * and sorts by height in case it bugs out
+ */
+const uniqueAndSort = R.pipe(
+  R.uniqBy((r: BlockType) => r?.height),
+  R.sort(R.descend((r) => r?.height))
+);
+
+const formatBlocks = (data: BlocksListenerSubscription): BlockType[] => {
+  let formattedData = data.blocks;
+  if (data.blocks.length === 51) {
+    formattedData = data.blocks.slice(0, 51);
+  }
+  return (
+    formattedData?.map((x) => {
+      const proposerAddress =
+        x?.validator?.validatorInfo?.operatorAddress ?? x.proposerAddress ?? '';
+      console.log('debug: hooks.ts: proposerAddress', proposerAddress);
+      return {
+        height: x.height,
+        txs: x.txs ?? 0,
+        hash: x.hash,
+        timestamp: x.timestamp,
+        proposer: proposerAddress,
+      };
+    }) ?? []
+  );
+};
+
+export const useBlocks = () => {
+  const [state, setState] = useState<BlocksState>({
+    loading: true,
+    exists: true,
+    items: [],
+    hasNextPage: false,
+    isNextPageLoading: true,
+  });
+
+  const handleSetState = useCallback((stateChange: (prevState: BlocksState) => BlocksState) => {
+    setState((prevState) => {
+      const newState = stateChange(prevState);
+      return R.equals(prevState, newState) ? prevState : newState;
+    });
+  }, []);
+
+  // ================================
+  // block subscription
+  // ================================
+  useBlocksListenerSubscription?.({
+    variables: {
+      limit: 1,
+      offset: 0,
+    },
+    onData: (data) => {
+      const newItems = uniqueAndSort([
+        ...(data.data.data ? formatBlocks(data.data.data) : []),
+        ...state.items,
+      ]);
+      handleSetState((prevState) => ({
+        ...prevState,
+        loading: false,
+        items: newItems,
+      }));
+    },
+  });
+
+  // ================================
+  // block query
+  // ================================
+  const LIMIT = 51;
+  const blockQuery =
+    useBlocksQuery?.({
+      variables: {
+        limit: LIMIT,
+        offset: 1,
+      },
+      onCompleted: (data) => {
+        const itemsLength = data.blocks.length;
+        const newItems = uniqueAndSort([...state.items, ...formatBlocks(data)]);
+        handleSetState((prevState) => ({
+          ...prevState,
+          loading: false,
+          items: newItems,
+          hasNextPage: itemsLength === 51,
+          isNextPageLoading: false,
+        }));
+      },
+      onError: () => {
+        handleSetState((prevState) => ({ ...prevState, loading: false }));
+      },
+    }) || {};
+
+  const loadNextPage = async () => {
+    handleSetState((prevState) => ({ ...prevState, isNextPageLoading: true }));
+    // refetch query
+    await blockQuery
+      .fetchMore({
+        variables: {
+          offset: state.items.length,
+          limit: LIMIT,
+        },
+      })
+      .then(({ data }) => {
+        const itemsLength = data.blocks.length;
+        const newItems = uniqueAndSort([...state.items, ...formatBlocks(data)]);
+
+        // set new state
+        handleSetState((prevState) => ({
+          ...prevState,
+          items: newItems,
+          isNextPageLoading: false,
+          hasNextPage: itemsLength === 51,
+        }));
+      });
+  };
+
+  const itemCount = state.hasNextPage ? state.items.length + 1 : state.items.length;
+  const loadMoreItems = state.isNextPageLoading ? () => null : loadNextPage;
+  const isItemLoaded = (index: number) => !state.hasNextPage || index < state.items.length;
+
+  return {
+    state,
+    loadNextPage,
+    itemCount,
+    loadMoreItems,
+    isItemLoaded,
+  };
+};

packages/ui/src/screens/account_details/components/staking/hooks.ts

@@ -184,7 +184,7 @@ export const useStaking = (
       pagination: true,
     },
     skip: delegationsPagination !== undefined,
-  });
+  }) || {};
   useEffect(() => {
     if (dError) {
       dRefetch();

packages/ui/src/screens/account_details/components/transactions/hooks.ts

@@ -74,25 +74,26 @@ export function useTransactions() {
     });
   };
 
-  const { fetchMore } = useGetMessagesByAddressQuery({
-    variables: {
-      limit: LIMIT + 1, // to check if more exist
-      offset: 0,
-      address: `{${router?.query?.address ?? ''}}`,
-    },
-    onCompleted: (data) => {
-      const itemsLength = data.messagesByAddress.length;
-      const newItems = R.uniq([...state.data, ...formatTransactions(data)]);
-      const stateChange: TransactionState = {
-        data: newItems,
-        hasNextPage: itemsLength === 51,
-        isNextPageLoading: false,
-        offsetCount: state.offsetCount + LIMIT,
-      };
+  const { fetchMore } =
+    useGetMessagesByAddressQuery?.({
+      variables: {
+        limit: LIMIT + 1, // to check if more exist
+        offset: 0,
+        address: `{${router?.query?.address ?? ''}}`,
+      },
+      onCompleted: (data) => {
+        const itemsLength = data.messagesByAddress.length;
+        const newItems = R.uniq([...state.data, ...formatTransactions(data)]);
+        const stateChange: TransactionState = {
+          data: newItems,
+          hasNextPage: itemsLength === 51,
+          isNextPageLoading: false,
+          offsetCount: state.offsetCount + LIMIT,
+        };
 
-      handleSetState((prevState) => ({ ...prevState, ...stateChange }));
-    },
-  });
+        handleSetState((prevState) => ({ ...prevState, ...stateChange }));
+      },
+    }) || {};
 
   const loadNextPage = async () => {
     handleSetState((prevState) => ({ ...prevState, isNextPageLoading: true }));

packages/ui/src/screens/account_details/utils.tsx

@@ -26,12 +26,13 @@ export const useCommission = (address?: string) => {
     }),
     []
   );
-  const { data, error, refetch } = useAccountCommissionQuery({
-    variables: {
-      validatorAddress,
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountCommissionQuery?.({
+      variables: {
+        validatorAddress,
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);
@@ -47,12 +48,13 @@ export const useAccountWithdrawalAddress = (address?: string) => {
     }),
     [address]
   );
-  const { data, error, refetch } = useAccountWithdrawalAddressQuery({
-    variables: {
-      address: address ?? '',
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountWithdrawalAddressQuery?.({
+      variables: {
+        address: address ?? '',
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);
@@ -68,12 +70,13 @@ export const useAvailableBalances = (address?: string) => {
     }),
     []
   );
-  const { data, error, refetch } = useAccountBalancesQuery({
-    variables: {
-      address: address ?? '',
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountBalancesQuery?.({
+      variables: {
+        address: address ?? '',
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);
@@ -89,12 +92,13 @@ export const useDelegationBalance = (address?: string) => {
     }),
     []
   );
-  const { data, error, refetch } = useAccountDelegationBalanceQuery({
-    variables: {
-      address: address ?? '',
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountDelegationBalanceQuery?.({
+      variables: {
+        address: address ?? '',
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);
@@ -110,12 +114,13 @@ export const useUnbondingBalance = (address?: string) => {
     }),
     []
   );
-  const { data, error, refetch } = useAccountUnbondingBalanceQuery({
-    variables: {
-      address: address ?? '',
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountUnbondingBalanceQuery?.({
+      variables: {
+        address: address ?? '',
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);
@@ -124,12 +129,13 @@ export const useUnbondingBalance = (address?: string) => {
 
 export const useRewards = (address?: string) => {
   const defaultReturnValue = useMemo(() => ({ delegationRewards: [] }), []);
-  const { data, error, refetch } = useAccountDelegationRewardsQuery({
-    variables: {
-      address: address ?? '',
-    },
-    skip: !address,
-  });
+  const { data, error, refetch } =
+    useAccountDelegationRewardsQuery?.({
+      variables: {
+        address: address ?? '',
+      },
+      skip: !address,
+    }) || {};
   useEffect(() => {
     if (error) refetch();
   }, [error, refetch]);