fix(no-tx-addr): fixed ui

src/app/_components/ErrorBoundary.tsx

@@ -5,27 +5,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { ExplorerError } from '../../common/types/Error';
 import { ErrorBox } from './ErrorBox';
 
-export class ExpectedError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'RetryableError';
-  }
-}
-
-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;
@@ -48,10 +27,6 @@ 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 ? (
@@ -63,7 +38,7 @@ export function ExplorerErrorBoundary<WrapperProps extends PropsWithChildren<unk
                       reset();
                       resetErrorBoundary();
                     }}
-                    tryAgainButton={showTryAgain}
+                    tryAgainButton={tryAgainButton}
                     homeButton={homeButton}
                   />
                 )}

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

@@ -43,12 +43,10 @@ export default function AddressPage({ params: { principal } }: any) {
           />
           <AddressTxListTabs address={principal} />
         </Stack>
-        {balance && (
-          <Stack gap={8}>
-            <StxBalance address={principal} />
-            <TokenBalanceCard address={principal} />
-          </Stack>
-        )}
+        <Stack gap={8}>
+          <StxBalance address={principal} />
+          <TokenBalanceCard address={principal} />
+        </Stack>
       </AddressPageLayout>
     </>
   );

src/app/address/[principal]/StxBalance/index.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Circle } from '../../../../common/components/Circle';
 import { Section } from '../../../../common/components/Section';
 import { useAccountBalance } from '../../../../common/queries/useAccountBalance';
-import { hasStxBalance } from '../../../../common/utils/accounts';
 import { microToStacks } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
 import { Grid } from '../../../../ui/Grid';
@@ -65,8 +64,6 @@ function StxBalanceBase({ address }: StxBalanceProps) {
     </Box>
   );
 
-  if (!hasStxBalance(balance)) return null;
-
   return (
     <Section title={qrShowing ? 'Address QR code' : 'STX Balance'} topRight={TopRight}>
       {!qrShowing ? (

src/app/address/[principal]/TokenBalanceCard/FtBalance.tsx

@@ -20,13 +20,13 @@ const TokenAssetListItem = dynamic(
 );
 
 export const FtBalance: React.FC<{ balance: AddressBalanceResponse }> = ({ balance }) => {
-  const FTokens = Object.keys(balance.fungible_tokens).filter(
+  const ft = Object.keys(balance.fungible_tokens).filter(
     key => Number(balance.fungible_tokens[key]?.balance) > 0
   );
 
-  return FTokens.length ? (
+  return ft.length > 0 ? (
     <>
-      {FTokens?.map((key, index, arr) => (
+      {ft?.map((key, index, arr) => (
         <TokenAssetListItem
           amount={balance.fungible_tokens[key]?.balance || ''}
           key={index}

src/app/address/[principal]/TokenBalanceCard/index.tsx

@@ -1,17 +1,12 @@
 'use client';
 
-import * as React from 'react';
-import { Fragment, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { cvToJSON, hexToCV } from '@stacks/transactions';
 
 import { Section } from '../../../../common/components/Section';
-import {
-  useAccountBalance,
-  useSuspenseAccountBalance,
-} from '../../../../common/queries/useAccountBalance';
+import { useAccountBalance } from '../../../../common/queries/useAccountBalance';
 import { useSuspenseNftHoldings } from '../../../../common/queries/useNftHoldings';
-import { hasTokenBalance } from '../../../../common/utils/accounts';
 import { hexToString } from '../../../../common/utils/utils';
 import { Tab } from '../../../../ui/Tab';
 import { TabList } from '../../../../ui/TabList';
@@ -52,8 +47,6 @@ function TokenBalanceCardBase({ address, ...rest }: TokenBalanceCardProps) {
     [nftHoldings]
   );
 
-  if (!hasTokenBalance(balance)) return null;
-
   return (
     <Section title="Holdings" {...rest}>
       <Tabs isLazy>

src/common/queries/useAccountBalance.ts

@@ -10,17 +10,20 @@ import { AddressBalanceResponse } from '@stacks/stacks-blockchain-api-types';
 import { useApi } from '../api/useApi';
 import { ONE_MINUTE } from './query-stale-time';
 
+const ACCOUNT_BALANCE_QUERY_KEY = 'accountBalance';
+
 export function useAccountBalance(
-  address?: string,
+  address: string,
   options: Omit<UseQueryOptions<any, any, AddressBalanceResponse, any>, 'queryKey' | 'queryFn'> = {}
 ) {
   const api = useApi();
   return useQuery({
-    queryKey: ['accountBalance', address],
+    queryKey: [ACCOUNT_BALANCE_QUERY_KEY, address],
     queryFn: () => {
-      return api.accountsApi.getAccountBalance({
-        principal: address!,
+      const response = api.accountsApi.getAccountBalance({
+        principal: address,
       });
+      return response;
     },
     staleTime: ONE_MINUTE,
     enabled: !!address,
@@ -38,11 +41,13 @@ export function useSuspenseAccountBalance(
   const api = useApi();
   if (!address) throw new Error('Address is required');
   return useSuspenseQuery({
-    queryKey: ['accountBalance', address],
+    queryKey: [ACCOUNT_BALANCE_QUERY_KEY, address],
     queryFn: () => {
-      return api.accountsApi.getAccountBalance({
+      const response = api.accountsApi.getAccountBalance({
         principal: address,
       });
+
+      return response;
     },
     staleTime: ONE_MINUTE,
     ...options,

src/common/utils/utils.ts

@@ -125,7 +125,7 @@ export const getUsdValue = (
   stxPrice: number,
   isInMicroStacks = false
 ): string => {
-  if (!stxAmount || !stxPrice) return 'N/A';
+  if (!stxPrice) return 'N/A';
   const amountInStx = isInMicroStacks ? microToStacks(stxAmount) : stxAmount;
   const price = amountInStx * stxPrice;
   return price > 0 && price < 0.01 ? '<$0.01' : usdFormatter.format(price);