Merge pull request #267 from blockscout/block-txs-api

api for block txs

lib/api/getSearchParams.ts

+import type { NextApiRequest } from 'next';
+
+export default function getSearchParams(req: NextApiRequest) {
+  const searchParams: Record<string, string> = {};
+  Object.entries(req.query).forEach(([ key, value ]) => {
+    searchParams[key] = Array.isArray(value) ? value.join(',') : (value || '');
+  });
+
+  return new URLSearchParams(searchParams).toString();
+}

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

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

pages/api/transactions/index.ts

 import type { NextApiRequest } from 'next';
 
+import getSearchParams from 'lib/api/getSearchParams';
 import handler from 'lib/api/handler';
 
 const getUrl = (req: NextApiRequest) => {
-  const searchParams: Record<string, string> = {};
-  Object.entries(req.query).forEach(([ key, value ]) => {
-    searchParams[key] = Array.isArray(value) ? value.join(',') : (value || '');
-  });
-  const searchParamsStr = new URLSearchParams(searchParams).toString();
+  const searchParamsStr = getSearchParams(req);
   return `/v2/transactions/${ searchParamsStr ? '?' + searchParamsStr : '' }`;
 };
 

types/api/block.ts

 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/api/transaction.ts

@@ -47,5 +47,5 @@ export interface TransactionsResponse {
     block_number: number;
     index: number;
     items_count: number;
-  };
+  } | null;
 }

types/client/queries.ts

@@ -6,4 +6,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

+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

@@ -2,6 +2,7 @@ import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
 import type { TTxsFilters } from 'types/api/txsFilters';
+import type { QueryKeys } from 'types/client/queries';
 import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -17,13 +18,17 @@ import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
 type Props = {
+  queryName: QueryKeys;
   showDescription?: boolean;
-  stateFilter: TTxsFilters['filter'];
+  stateFilter?: TTxsFilters['filter'];
+  apiPath: string;
 }
 
 const TxsContent = ({
+  queryName,
   showDescription,
   stateFilter,
+  apiPath,
 }: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
   // const [ filters, setFilters ] = useState<Partial<TTxsFilters>>({ type: [], method: [] });
@@ -62,8 +67,8 @@ const TxsContent = ({
     onNextPageClick,
     hasPagination,
     resetPage,
-  } = useQueryWithPages({ filter: stateFilter });
-  // } = useQueryWithPages({ ...filters, filter: stateFilter });
+  } = useQueryWithPages(apiPath, queryName, stateFilter && { filter: stateFilter });
+  // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
 
   const isMobile = useIsMobile(false);
 
@@ -120,7 +125,7 @@ const TxsContent = ({
         { hasPagination ? (
           <Pagination
             currentPage={ page }
-            hasNextPage={ data?.next_page_params !== undefined && Object.keys(data?.next_page_params).length > 0 }
+            hasNextPage={ data?.next_page_params !== undefined && Object.keys(data?.next_page_params || {}).length > 0 }
             onNextPageClick={ onNextPageClick }
             onPrevPageClick={ onPrevPageClick }
           />

ui/txs/TxsTab.tsx

 import React from 'react';
 
+import { QueryKeys } from 'types/client/queries';
+
 import TxsContent from './TxsContent';
 
 type Props = {
@@ -9,8 +11,10 @@ type Props = {
 const TxsTab = ({ tab }: Props) => {
   return (
     <TxsContent
+      queryName={ QueryKeys.transactions }
       showDescription={ tab === 'validated' }
       stateFilter={ tab }
+      apiPath="/api/transactions"
     />
   );
 };

ui/txs/useQueryWithPages.ts

@@ -6,13 +6,13 @@ import { animateScroll } from 'react-scroll';
 
 import type { TransactionsResponse } from 'types/api/transaction';
 import type { TTxsFilters } from 'types/api/txsFilters';
-import { QueryKeys } from 'types/client/queries';
+import type { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 
 const PAGINATION_FIELDS = [ 'block_number', 'index', 'items_count' ];
 
-export default function useQueryWithPages(filters: TTxsFilters) {
+export default function useQueryWithPages(apiPath: string, queryName: QueryKeys, filters?: TTxsFilters) {
   const queryClient = useQueryClient();
   const router = useRouter();
   const [ page, setPage ] = React.useState(1);
@@ -21,7 +21,7 @@ export default function useQueryWithPages(filters: TTxsFilters) {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, TransactionsResponse>(
-    [ QueryKeys.transactions, { page, filters } ],
+    [ queryName, { page, filters } ],
     async() => {
       const params: Array<string> = [];
 
@@ -33,7 +33,7 @@ export default function useQueryWithPages(filters: TTxsFilters) {
         }
       });
 
-      return fetch(`/api/transactions${ params.length ? '?' + params.join('&') : '' }`);
+      return fetch(`${ apiPath }${ params.length ? '?' + params.join('&') : '' }`);
     },
     { staleTime: Infinity },
   );