refactor: use fetch rather than custom implementation

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

@@ -1,3 +1,4 @@
+import { useFetch } from '@vegaprotocol/react-helpers';
 import type { Networks, Tranche } from '@vegaprotocol/smart-contracts-sdk';
 import React from 'react';
 import { APP_ENV } from '../config';
@@ -15,20 +16,12 @@ const TRANCHES_URLS: { [N in Networks]: string } = {
 
 export function useTranches() {
   const [tranches, setTranches] = React.useState<Tranche[] | null>(null);
-  const [error, setError] = React.useState<Error | null>(null);
-  const [loading, setLoading] = React.useState<boolean>(false);
   const url = React.useMemo(() => TRANCHES_URLS[APP_ENV], []);
-  React.useEffect(() => {
-    const run = async () => {
-      try {
-        setLoading(true);
-        const res = await fetch(url);
-        if (!res.ok) {
-          throw new Error(res.statusText);
-        }
-        const tranchesJson = await res.json();
-        const processedTrances = tranchesJson
-          .map((t: Tranche) => ({
+  const {
+    state: { data, loading, error },
+  } = useFetch<Tranche[] | null>(url);
+  const processedTrances = data
+    ?.map((t) => ({
       ...t,
       tranche_start: new Date(t.tranche_start),
       tranche_end: new Date(t.tranche_end),
@@ -61,15 +54,7 @@ export function useTranches() {
       })),
     }))
     .sort((a: Tranche, b: Tranche) => a.tranche_id - b.tranche_id);
-        setTranches(processedTrances);
-      } catch (e) {
-        setError(e as Error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    run();
-  }, [setTranches, url]);
+  setTranches(processedTrances ? processedTrances : null);
 
   return {
     tranches,