From 82d62ce4268a2e8e367c2d76d4c589c785d249e8 Mon Sep 17 00:00:00 2001 From: Dexter Date: Wed, 25 May 2022 09:37:49 +0100 Subject: [PATCH] refactor: use fetch rather than custom implementation --- apps/token/src/hooks/use-tranches.ts | 93 ++++++++++++---------------- 1 file changed, 39 insertions(+), 54 deletions(-) diff --git a/apps/token/src/hooks/use-tranches.ts b/apps/token/src/hooks/use-tranches.ts index 32e7c9d7c..1f5321c18 100644 --- a/apps/token/src/hooks/use-tranches.ts +++ b/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,61 +16,45 @@ const TRANCHES_URLS: { [N in Networks]: string } = { export function useTranches() { const [tranches, setTranches] = React.useState(null); - const [error, setError] = React.useState(null); - const [loading, setLoading] = React.useState(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) => ({ - ...t, - tranche_start: new Date(t.tranche_start), - tranche_end: new Date(t.tranche_end), - total_added: new BigNumber(t.total_added), - total_removed: new BigNumber(t.total_removed), - locked_amount: new BigNumber(t.locked_amount), - 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); - } catch (e) { - setError(e as Error); - } finally { - setLoading(false); - } - }; - run(); - }, [setTranches, url]); + const { + state: { data, loading, error }, + } = useFetch(url); + const processedTrances = data + ?.map((t) => ({ + ...t, + tranche_start: new Date(t.tranche_start), + tranche_end: new Date(t.tranche_end), + total_added: new BigNumber(t.total_added), + total_removed: new BigNumber(t.total_removed), + locked_amount: new BigNumber(t.locked_amount), + 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); return { tranches,