fix(no-tx-addr): added custom error

src/app/_components/ErrorBoundary.tsx

@@ -5,6 +5,20 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { ExplorerError } from '../../common/types/Error';
 import { ErrorBox } from './ErrorBox';
 
+export class RetryableError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'RetryableError';
+  }
+}
+
+export class NonRetryableError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'NonRetryableError';
+  }
+}
+
 interface ErrorBoundaryProps<WrapperProps extends PropsWithChildren<Record<string, unknown>>> {
   Wrapper?: ComponentType<WrapperProps>;
   wrapperProps?: WrapperProps;
@@ -27,6 +41,10 @@ export function ExplorerErrorBoundary<WrapperProps extends PropsWithChildren<unk
       {({ reset }) => (
         <ErrorBoundary
           fallbackRender={({ error, resetErrorBoundary }) => {
+            let showTryAgain = tryAgainButton;
+            if (error instanceof NonRetryableError) {
+              showTryAgain = false;
+            }
             return (
               <Wrapper {...wrapperProps}>
                 {renderContent ? (
@@ -38,7 +56,7 @@ export function ExplorerErrorBoundary<WrapperProps extends PropsWithChildren<unk
                       reset();
                       resetErrorBoundary();
                     }}
-                    tryAgainButton={tryAgainButton}
+                    tryAgainButton={showTryAgain}
                     homeButton={homeButton}
                   />
                 )}

src/app/address/[principal]/PageClient.tsx

@@ -1,17 +1,28 @@
 'use client';
 
-import * as React from 'react';
-
 import { useSuspenseAccountBalance } from '../../../common/queries/useAccountBalance';
 import { useAddressNonces } from '../../../common/queries/useAddressNonces';
 import { hasTokenBalance } from '../../../common/utils/accounts';
 import { AddressTxListTabs } from '../../../features/txs-list/tabs/AddressTxListTabs';
+import { Grid, GridProps } from '../../../ui/Grid';
 import { Stack } from '../../../ui/components';
 import { PageTitle } from '../../_components/PageTitle';
 import { AddressSummary } from './AddressSummary';
 import { StxBalance } from './StxBalance';
 import { TokenBalanceCard } from './TokenBalanceCard';
-import { Wrapper } from './Wrapper';
+
+export function AddressPageLayout(props: GridProps) {
+  return (
+    <Grid
+      gridColumnGap="32px"
+      gridTemplateColumns={['100%', '100%', 'repeat(1, calc(100% - 352px) 320px)']}
+      gridRowGap={['32px', '32px', 'unset']}
+      maxWidth="100%"
+      alignItems="flex-start"
+      {...props}
+    />
+  );
+}
 
 export default function AddressPage({ params: { principal } }: any) {
   const { data: balance } = useSuspenseAccountBalance(principal, { refetchOnWindowFocus: true });
@@ -22,7 +33,7 @@ export default function AddressPage({ params: { principal } }: any) {
   return (
     <>
       <PageTitle>Address details</PageTitle>
-      <Wrapper>
+      <AddressPageLayout>
         <Stack gap={8}>
           <AddressSummary
             principal={principal}
@@ -38,7 +49,7 @@ export default function AddressPage({ params: { principal } }: any) {
             <TokenBalanceCard address={principal} />
           </Stack>
         )}
-      </Wrapper>
+      </AddressPageLayout>
     </>
   );
 }

src/app/getTokenPriceInfo.ts

@@ -1,5 +1,4 @@
 import { LUNAR_CRUSH_API_KEY } from '../common/constants/env';
-import { LunarCrushCoin } from '../common/types/lunarCrush';
 import { TokenPrice } from '../common/types/tokenPrice';
 import { getCacheClient } from '../common/utils/cache-client';
 

src/common/queries/useAddressConfirmedTxsWithTransfersInfinite.ts

@@ -1,10 +1,11 @@
+import { NoTransactionsError } from '@/features/txs-list/utils';
 import {
+  InfiniteData,
   UseInfiniteQueryResult,
   UseSuspenseInfiniteQueryResult,
   useInfiniteQuery,
   useSuspenseInfiniteQuery,
 } from '@tanstack/react-query';
-import { InfiniteData } from '@tanstack/react-query';
 
 import {
   AddressTransaction,
@@ -70,14 +71,22 @@ export function useSuspenseAddressTransactionInfinite(
   if (!address) throw new Error('Address is required');
   return useSuspenseInfiniteQuery({
     queryKey: ['addressConfirmedTxsWithTransfersInfinite', address],
-    queryFn: ({ pageParam }: { pageParam: number }) =>
-      api.transactionsApi.getAddressTransactions({
-        address: address,
-        limit: DEFAULT_LIST_LIMIT,
-        offset: pageParam || 0,
-      }),
+    queryFn: ({ pageParam }: { pageParam: number }) => {
+      const response = api.transactionsApi
+        .getAddressTransactions({
+          address: address,
+          limit: DEFAULT_LIST_LIMIT,
+          offset: pageParam || 0,
+        })
+        .catch(error => {
+          if (error.status === 404) {
+            throw new NoTransactionsError('This address has no transactions.');
+          }
+          throw new Error('Failed to fetch transactions.');
+        });
+      return response;
+    },
     getNextPageParam,
-
     initialPageParam: 0,
     staleTime: TWO_MINUTES,
     ...options,

src/features/txs-list/AddressMempoolTxsList.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { FC, memo } from 'react';
 
 import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';

src/features/txs-list/tabs/AddressTxListTabs.tsx

@@ -1,6 +1,5 @@
 import dynamic from 'next/dynamic';
 import { FC } from 'react';
-import * as React from 'react';
 
 import { ExplorerErrorBoundary } from '../../../app/_components/ErrorBoundary';
 import { Section } from '../../../common/components/Section';

src/features/txs-list/utils.ts

@@ -1,3 +1,5 @@
+import { NonRetryableError } from '@/app/_components/ErrorBoundary';
+
 import { TransactionType } from '@stacks/stacks-blockchain-api-types';
 
 export const getTransactionTypeLabel = (value: TransactionType) => {
@@ -16,3 +18,11 @@ export const getTransactionTypeLabel = (value: TransactionType) => {
       return 'Tenure change';
   }
 };
+
+export class NoTransactionsError extends NonRetryableError {
+  constructor(message: string) {
+    super(message);
+    this.name = 'No Transactions';
+    this.message = message;
+  }
+}