api for block txs

pages/api/blocks/[id]/transactions.ts

@@ -0,0 +1,11 @@
+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/blocks/${ req.query.id }/transactions`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/block.ts

@@ -1,5 +1,6 @@
 import type { AddressParam } from 'types/api/addressParams';
 import type { Reward } from 'types/api/reward';
+import type { Transaction } from 'types/api/transaction';
 
 export type BlockType = 'block' | 'reorg' | 'uncle';
 
@@ -37,3 +38,12 @@ export interface BlocksResponse {
     items_count: number;
   };
 }
+
+export interface BlockTransactionsResponse {
+  items: Array<Transaction>;
+  next_page_params: {
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+}

types/client/queries.ts

@@ -7,4 +7,5 @@ export enum QueryKeys {
   txInternals = 'tx-internals',
   txLog = 'tx-log',
   txRawTrace = 'tx-raw-trace',
+  blockTxs = 'block-transactions',
 }

ui/block/BlockDetails.tsx

@@ -109,7 +109,7 @@ const BlockDetails = () => {
         title="Transactions"
         hint="The number of transactions in the block."
       >
-        <Link href={ link('block', { id: router.query.id }, { tab: 'transactions' }) }>
+        <Link href={ link('block', { id: router.query.id }, { tab: 'txs' }) }>
           { data.tx_count } transactions
         </Link>
       </DetailsInfoItem>

ui/block/BlockTxs.tsx

@@ -1,21 +1,18 @@
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import TxsWithSort from 'ui/txs/TxsWithSort';
+import { QueryKeys } from 'types/client/queries';
+
+import TxsContent from 'ui/txs/TxsContent';
 
 const BlockTxs = () => {
+  const router = useRouter();
+
   return (
-    // <TxsContent
-    //   showDescription={ false }
-    //   showSortButton={ false }
-    //   txs={ [] }
-    //   page={ 1 }
-    //   // eslint-disable-next-line react/jsx-no-bind
-    //   onNextPageClick={ () => {} }
-    //   // eslint-disable-next-line react/jsx-no-bind
-    //   onPrevPageClick={ () => {} }
-    // />
-    // eslint-disable-next-line react/jsx-no-bind
-    <TxsWithSort txs={ [] } sort={ () => () => {} }/>
+    <TxsContent
+      queryName={ QueryKeys.blockTxs }
+      apiPath={ `/api/blocks/${ router.query.id }/transactions` }
+    />
   );
 };
 

ui/txs/TxsContent.tsx

@@ -1,6 +1,7 @@
 import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
+import type { QueryKeys } from 'types/client/queries';
 import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -16,15 +17,17 @@ import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
 type Props = {
-  queryName: string;
+  queryName: QueryKeys;
   showDescription?: boolean;
-  stateFilter: 'validated' | 'pending';
+  stateFilter?: 'validated' | 'pending';
+  apiPath: string;
 }
 
 const TxsContent = ({
   showDescription,
   queryName,
   stateFilter,
+  apiPath,
 }: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
 
@@ -62,7 +65,7 @@ const TxsContent = ({
     onNextPageClick,
     hasPagination,
     resetPage,
-  } = useQueryWithPages(queryName, stateFilter);
+  } = useQueryWithPages(queryName, stateFilter, apiPath);
 
   const isMobile = useIsMobile(false);
 

ui/txs/TxsTab.tsx

@@ -14,6 +14,7 @@ const TxsTab = ({ tab }: Props) => {
       queryName={ tab === 'validated' ? QueryKeys.transactionsValidated : QueryKeys.transactionsPending }
       showDescription={ tab === 'validated' }
       stateFilter={ tab }
+      apiPath="/api/transactions"
     />
   );
 };

ui/txs/useQueryWithPages.ts

@@ -10,7 +10,7 @@ import useFetch from 'lib/hooks/useFetch';
 
 const PAGINATION_FIELDS = [ 'block_number', 'index', 'items_count' ];
 
-export default function useQueryWithPages(queryName: string, filter: string) {
+export default function useQueryWithPages(queryName: string, filter: string | undefined, apiPath: string) {
   const queryClient = useQueryClient();
   const router = useRouter();
   const [ page, setPage ] = React.useState(1);
@@ -23,9 +23,12 @@ export default function useQueryWithPages(queryName: string, filter: string) {
     async() => {
       const params: Array<string> = [];
 
-      Object.entries(currPageParams).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
+      Object.entries({
+        ...currPageParams,
+        filter,
+      }).forEach(([ key, val ]) => val && params.push(`${ key }=${ val }`));
 
-      return fetch(`/api/transactions?filter=${ filter }${ params.length ? '&' + params.join('&') : '' }`);
+      return fetch(`${ apiPath }${ params.length ? '?' + params.join('&') : '' }`);
     },
     { staleTime: Infinity },
   );