fix: use static tranches data (#454)

* fix: use static tranches data

* fix: lint

* refactor: use fetch rather than custom implementation

* fix: make error handling consistent for useTranches

* Revert "fix: make error handling consistent for useTranches"

This reverts commit 357cbc45f8.

* Revert "Revert "fix: make error handling consistent for useTranches""

This reverts commit 14f84608dd.

* fix: render loop

apps/token/src/hooks/use-get-user-tranche-balances.ts

@@ -7,20 +7,24 @@ import {
   useAppState,
 } from '../contexts/app-state/app-state-context';
 import { BigNumber } from '../lib/bignumber';
+import { useTranches } from './use-tranches';
 
 export const useGetUserTrancheBalances = (
   address: string,
   vesting: VegaVesting
 ) => {
   const { appDispatch } = useAppState();
+  const { tranches } = useTranches();
   return React.useCallback(async () => {
     appDispatch({
       type: AppStateActionType.SET_TRANCHE_ERROR,
       error: null,
     });
     try {
-      const tranches = await vesting.getAllTranches();
+      if (!tranches) {
-      const userTranches = tranches.filter((t) =>
+        return;
+      }
+      const userTranches = tranches?.filter((t) =>
         t.users.some(
           ({ address: a }) =>
             a && address && a.toLowerCase() === address.toLowerCase()
@@ -52,5 +56,5 @@ export const useGetUserTrancheBalances = (
         error: e as Error,
       });
     }
-  }, [address, appDispatch, vesting]);
+  }, [address, appDispatch, tranches, vesting]);
 };

apps/token/src/hooks/use-tranches.ts

@@ -1,29 +1,66 @@
-import React from 'react';
+import { useFetch } from '@vegaprotocol/react-helpers';
-import * as Sentry from '@sentry/react';
+import type { Networks, Tranche } from '@vegaprotocol/smart-contracts-sdk';
-import type { Tranche } from '@vegaprotocol/smart-contracts-sdk';
+import React, { useEffect } from 'react';
+import { APP_ENV } from '../config';
 
-import { useContracts } from '../contexts/contracts/contracts-context';
+import { BigNumber } from '../lib/bignumber';
+
+const TRANCHES_URLS: { [N in Networks]: string } = {
+  MAINNET: 'https://static.vega.xyz/assets/mainnet-tranches.json',
+  TESTNET: 'https://static.vega.xyz/assets/testnet-tranches.json',
+  STAGNET: 'https://static.vega.xyz/assets/stagnet1-tranches.json',
+  STAGNET2: 'https://static.vega.xyz/assets/stagnet2-tranches.json',
+  DEVNET: 'https://static.vega.xyz/assets/devnet-tranches.json',
+  CUSTOM: '',
+};
 
 export function useTranches() {
-  const { vesting } = useContracts();
   const [tranches, setTranches] = React.useState<Tranche[] | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+  const url = React.useMemo(() => TRANCHES_URLS[APP_ENV], []);
-
+  const {
-  React.useEffect(() => {
+    state: { data, loading, error },
-    const run = async () => {
+  } = useFetch<Tranche[] | null>(url);
-      try {
+  useEffect(() => {
-        const res = await vesting.getAllTranches();
+    const processedTrances = data
-        setTranches(res);
+      ?.map((t) => ({
-      } catch (err) {
+        ...t,
-        Sentry.captureException(err);
+        tranche_start: new Date(t.tranche_start),
-        setError((err as Error).message);
+        tranche_end: new Date(t.tranche_end),
-      }
+        total_added: new BigNumber(t.total_added),
-    };
+        total_removed: new BigNumber(t.total_removed),
-    run();
+        locked_amount: new BigNumber(t.locked_amount),
-  }, [vesting]);
+        deposits: t.deposits.map((d) => ({
+          ...d,
+          amount: new BigNumber(d.amount),
+        })),
+        withdrawals: t.withdrawals.map((w) => ({
+          ...w,
+          amount: new BigNumber(w.amount),
+        })),
+        users: t.users.map((u) => ({
+          ...u,
+          // @ts-ignore - types are incorrect in the SDK lib
+          deposits: u.deposits.map((d) => ({
+            ...d,
+            amount: new BigNumber(d.amount),
+          })),
+          // @ts-ignore - types are incorrect in the SDK lib
+          withdrawals: u.withdrawals.map((w) => ({
+            ...w,
+            amount: new BigNumber(w.amount),
+          })),
+          total_tokens: new BigNumber(u.total_tokens),
+          withdrawn_tokens: new BigNumber(u.withdrawn_tokens),
+          remaining_tokens: new BigNumber(u.remaining_tokens),
+        })),
+      }))
+      .sort((a: Tranche, b: Tranche) => a.tranche_id - b.tranche_id);
+    setTranches(processedTrances ? processedTrances : null);
+  }, [data]);
 
   return {
     tranches,
+    loading,
     error,
   };
 }

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')} />