fix(explorer): update tx navigation for 0.74.0 (#5662)

apps/explorer/src/app/components/txs/tx-list-navigation.spec.tsx

@@ -61,53 +61,4 @@ describe('TxsListNavigation', () => {
 
     expect(nextPageMock).toHaveBeenCalledTimes(1);
   });
-
-  it('disables "Older" button if hasMoreTxs is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
-
-  it('disables "Newer" button if hasPreviousPage is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={true}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-  });
-
-  it('disables both buttons when more and previous are false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
 });

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -10,7 +10,8 @@ export interface TxListNavigationProps {
   loading?: boolean;
   hasPreviousPage: boolean;
   hasMoreTxs: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  isEmpty?: boolean;
 }
 /**
  * Displays a list of transactions with filters and controls to navigate through the list.
@@ -21,9 +22,8 @@ export const TxsListNavigation = ({
   refreshTxs,
   nextPage,
   previousPage,
-  hasMoreTxs,
-  hasPreviousPage,
   children,
+  isEmpty,
   loading = false,
 }: TxListNavigationProps) => {
   return (
@@ -35,7 +35,6 @@ export const TxsListNavigation = ({
           <Button
             className="mr-2"
             size="xs"
-            disabled={!hasPreviousPage || loading}
             onClick={() => {
               previousPage();
             }}
@@ -44,7 +43,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={!hasMoreTxs}
+            disabled={isEmpty}
             onClick={() => {
               nextPage();
             }}

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -43,7 +43,7 @@ export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
     url.searchParams.append('first', count);
     url.searchParams.append('after', params.after);
   } else {
-    url.searchParams.append('last', count);
+    url.searchParams.append('first', count);
   }
 
   // Hacky fix for param as array

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -6,7 +6,7 @@ describe('getTxsDataUrl', () => {
       count: 10,
       baseUrl: 'https://example.com/transactions',
     };
-    const expectedUrl = 'https://example.com/transactions?last=10';
+    const expectedUrl = 'https://example.com/transactions?first=10';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });
@@ -41,7 +41,7 @@ describe('getTxsDataUrl', () => {
       baseUrl: 'https://example.com/transactions',
     };
     const expectedUrl =
-      'https://example.com/transactions?last=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -31,14 +31,14 @@ export interface IUseTxsData {
 }
 
 export const useTxsData = ({
-  count = 25,
+  count = 50,
   before,
   after,
   filters,
   party,
 }: IUseTxsData) => {
   const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = true;
+  let hasMoreTxs = false;
   let txsData: BlockExplorerTransactionResult[] = [];
 
   const url = getTxsDataUrl({
@@ -60,8 +60,8 @@ export const useTxsData = ({
   }
 
   const nextPage = useCallback(() => {
-    const after = data?.transactions.at(-1)?.cursor || '';
+    const before = data?.transactions.at(-1)?.cursor || '';
-    const params: URLSearchParamsInit = { after };
+    const params: URLSearchParamsInit = { before };
     if (filters) {
       params.filters = Array.from(filters).join(',');
     }
@@ -69,8 +69,8 @@ export const useTxsData = ({
   }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    const before = data?.transactions[0]?.cursor || '';
+    const after = data?.transactions[0]?.cursor || '';
-    const params: URLSearchParamsInit = { before };
+    const params: URLSearchParamsInit = { after };
     if (filters && filters.size > 0 && filters.size === 1) {
       params.filters = Array.from(filters)[0];
     }

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -51,9 +51,10 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={true}
+        hasPreviousPage={hasMoreTxs}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
+        isEmpty={txsData.length === 0}
       >
         <TxsFilter
           filters={filters}
@@ -70,7 +71,16 @@ export const TxsListFiltered = () => {
         txs={txsData}
         loadMoreTxs={nextPage}
         error={error}
-        className="mb-28 w-full min-w-[400px]"
+        className="mb-4 w-full min-w-[400px]"
+      />
+      <TxsListNavigation
+        refreshTxs={refreshTxs}
+        nextPage={nextPage}
+        previousPage={previousPage}
+        hasPreviousPage={hasMoreTxs}
+        loading={loading}
+        hasMoreTxs={hasMoreTxs}
+        isEmpty={txsData.length === 0}
       />
     </>
   );