refactor: display "--" as placeholder when total rewards api call fails

apps/portal/src/components/widgets/staking/substrate/ValidatorStakeItem.tsx

@@ -1,3 +1,12 @@
+import { type DeriveStakingAccount } from '@polkadot/api-derive/types'
+import { useDeriveState } from '@talismn/react-polkadot-api'
+import { CircularProgressIndicator } from '@talismn/ui'
+import BN from 'bn.js'
+import { useMemo, useState } from 'react'
+import { useRecoilValueLoadable, waitForAll } from 'recoil'
+
+import StakePosition from '@/components/recipes/StakePosition'
+
 import { type Account } from '../../../../domains/accounts/recoils'
 import { useChainState, useNativeTokenDecimalState, useNativeTokenPriceState } from '../../../../domains/chains'
 import { useSubstrateApiState } from '../../../../domains/common'
@@ -13,18 +22,21 @@ import FastUnstakeDialog from '../../../recipes/FastUnstakeDialog'
 import AnimatedFiatNumber from '../../AnimatedFiatNumber'
 import RedactableBalance from '../../RedactableBalance'
 import ValidatorUnstakeDialog from './ValidatorUnstakeDialog'
-import StakePosition from '@/components/recipes/StakePosition'
-import { type DeriveStakingAccount } from '@polkadot/api-derive/types'
-import { useDeriveState } from '@talismn/react-polkadot-api'
-import { CircularProgressIndicator } from '@talismn/ui'
-import BN from 'bn.js'
-import { useMemo, useState } from 'react'
-import { waitForAll, useRecoilValueLoadable } from 'recoil'
 
-const TotalRewards = (props: { account: Account }) => useTotalValidatorStakingRewards(props.account).toLocaleString()
+const TotalRewards = (props: { account: Account }) => {
+  const { totalRewards, isError } = useTotalValidatorStakingRewards(props.account)
+  if (isError) return '--'
 
-const TotalFiatRewards = (props: { account: Account }) =>
-  useNativeTokenLocalizedFiatAmount(useTotalValidatorStakingRewards(props.account))
+  return totalRewards.toLocaleString()
+}
+
+const TotalFiatRewards = (props: { account: Account }) => {
+  const { totalRewards, isError } = useTotalValidatorStakingRewards(props.account)
+  const totalFiatRewards = useNativeTokenLocalizedFiatAmount(totalRewards)
+  if (isError) return null
+
+  return totalFiatRewards
+}
 
 const ValidatorStakeItem = (props: {
   account: Account

apps/portal/src/domains/staking/substrate/validator/hooks/useTotalRewards.ts

@@ -24,10 +24,10 @@ const totalValidatorStakingRewardsAtomFamily = atomFamily(
           `),
           { address }
         )
-        return response.accumulatedReward?.amount || null
+        return { data: response.accumulatedReward?.amount || null, isError: false }
       } catch (error) {
         console.error('Error fetching staking rewards:', error)
-        return null // Return null as a fallback in case of errors
+        return { isError: true }
       }
     }),
   (a, b) => a.apiUrl === b.apiUrl && a.address === b.address
@@ -38,14 +38,19 @@ export const useTotalValidatorStakingRewards = (account: Account) => {
 
   assertChain(chain, { hasNominationPools: true })
 
-  const response = useAtomValue(
+  const { data, isError } = useAtomValue(
     totalValidatorStakingRewardsAtomFamily({
       apiUrl: chain.novaIndexerUrl,
       address: encodeAddress(account.address, chain.prefix),
     })
   )
 
-  const amount = response?.accumulatedReward?.amount as string | undefined
+  const amount = data?.accumulatedReward?.amount as string | undefined
 
-  return Decimal.fromPlanck(amount ?? 0, chain.nativeToken?.decimals ?? 0, { currency: chain.nativeToken?.symbol })
+  return {
+    totalRewards: Decimal.fromPlanck(amount ?? 0, chain.nativeToken?.decimals ?? 0, {
+      currency: chain.nativeToken?.symbol,
+    }),
+    isError,
+  }
 }