fix: make error handling consistent for useTranches

apps/token/src/routes/claim/index.tsx

@@ -10,15 +10,15 @@ import type { RouteChildProps } from '..';
 import Claim from './claim';
 import { ClaimRestricted } from './claim-restricted';
 import { isRestricted } from './lib/is-restricted';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
 
 const ClaimIndex = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);
   const { t } = useTranslation();
   const { account } = useWeb3React();
-  const { tranches } = useTranches();
+  const { tranches, loading, error } = useTranches();
 
-  if (!tranches) {
+  if (loading || !tranches) {
     return (
       <Splash>
         <SplashLoader />
@@ -26,6 +26,14 @@ const ClaimIndex = ({ name }: RouteChildProps) => {
     );
   }
 
+  if (error) {
+    return (
+      <Callout intent={Intent.Danger} title={t('errorLoadingTranches')}>
+        {error}
+      </Callout>
+    );
+  }
+
   let content = null;
 
   if (!account) {

apps/token/src/routes/home/token-details/token-details.tsx

@@ -1,12 +1,18 @@
 import { useTranslation } from 'react-i18next';
 
-import { EtherscanLink } from '@vegaprotocol/ui-toolkit';
+import {
+  Callout,
+  EtherscanLink,
+  Intent,
+  Splash,
+} from '@vegaprotocol/ui-toolkit';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { ADDRESSES } from '../../../config';
 import { useTranches } from '../../../hooks/use-tranches';
 import type { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
 import { TokenDetailsCirculating } from './token-details-circulating';
+import { SplashLoader } from '../../../components/splash-loader';
 
 export const TokenDetails = ({
   totalSupply,
@@ -17,7 +23,24 @@ export const TokenDetails = ({
 }) => {
   const { t } = useTranslation();
 
-  const { tranches } = useTranches();
+  const { tranches, loading, error } = useTranches();
+
+  if (error) {
+    return (
+      <Callout intent={Intent.Danger} title={t('errorLoadingTranches')}>
+        {error}
+      </Callout>
+    );
+  }
+
+  if (!tranches || loading) {
+    return (
+      <Splash>
+        <SplashLoader />
+      </Splash>
+    );
+  }
+
   return (
     <KeyValueTable className={'token-details'}>
       <KeyValueTableRow>

apps/token/src/routes/redemption/redemption.tsx

@@ -28,7 +28,7 @@ const RedemptionRouter = () => {
     appState: { trancheBalances },
   } = useAppState();
   const { account } = useWeb3React();
-  const { tranches, error } = useTranches();
+  const { tranches, error, loading } = useTranches();
 
   React.useEffect(() => {
     const run = (address: string) => {
@@ -59,7 +59,7 @@ const RedemptionRouter = () => {
     );
   }
 
-  if (!tranches) {
+  if (!tranches || loading) {
     return (
       <Splash>
         <SplashLoader />

apps/token/src/routes/tranches/index.tsx

@@ -6,14 +6,14 @@ import { SplashLoader } from '../../components/splash-loader';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import { useTranches } from '../../hooks/use-tranches';
 import type { RouteChildProps } from '..';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
 
 const TrancheRouter = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);
   const { t } = useTranslation();
-  const { tranches } = useTranches();
+  const { tranches, error, loading } = useTranches();
 
-  if (!tranches) {
+  if (!tranches || loading) {
     return (
       <Splash>
         <SplashLoader />
@@ -21,6 +21,14 @@ const TrancheRouter = ({ name }: RouteChildProps) => {
     );
   }
 
+  if (error) {
+    return (
+      <Callout intent={Intent.Danger} title={t('errorLoadingTranches')}>
+        {error}
+      </Callout>
+    );
+  }
+
   return (
     <>
       <Heading title={t('pageTitleTranches')} />