Purchase components refactor (#78)

* Purchase components refactor

* lint fix

src/components/Elements/SaleInfo/index.tsx

@@ -1,13 +1,10 @@
 import { Box, Typography } from '@mui/material';
-import { ApiPromise } from '@polkadot/api';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
-import React, { useCallback, useEffect, useState } from 'react';
 
-import { formatBalance, getBlockTimestamp } from '@/utils/functions';
+import { formatBalance } from '@/utils/functions';
 
 import { useCoretimeApi } from '@/contexts/apis';
-import { ApiState } from '@/contexts/apis/types';
 import { SaleInfo, SalePhase } from '@/models';
 
 import styles from './index.module.scss';
@@ -16,22 +13,22 @@ interface SaleInfoGridProps {
   saleInfo: SaleInfo;
   currentPhase: SalePhase;
   currentPrice: number;
-  saleEnd: number;
+  saleEndTimestamp: number;
+  saleStartTimestamp: number;
 }
 
 export const SaleInfoGrid = ({
   saleInfo,
   currentPhase,
   currentPrice,
-  saleEnd,
+  saleEndTimestamp,
+  saleStartTimestamp,
 }: SaleInfoGridProps) => {
   TimeAgo.addLocale(en);
   const timeAgo = new TimeAgo('en-US');
 
-  const [saleStartTimestamp, setSaleStartTimestamp] = useState(0);
-  const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
   const {
-    state: { api, apiState, symbol },
+    state: { symbol },
   } = useCoretimeApi();
 
   const nextPhase = (): SalePhase => {
@@ -43,26 +40,6 @@ export const SaleInfoGrid = ({
     return phases[nextIndex];
   };
 
-  const setTimestamps = useCallback(
-    (api: ApiPromise) => {
-      getBlockTimestamp(api, saleInfo.saleStart).then((value) =>
-        setSaleStartTimestamp(value)
-      );
-      getBlockTimestamp(api, saleEnd).then((value) =>
-        setSaleEndTimestamp(value)
-      );
-    },
-    [saleInfo.saleStart, saleEnd]
-  );
-
-  useEffect(() => {
-    if (!api || apiState !== ApiState.READY) {
-      return;
-    }
-
-    setTimestamps(api);
-  }, [api, apiState, setTimestamps]);
-
   return (
     <Box className={styles.grid}>
       <Box className={styles.gridItem}>

src/hooks/balance.tsx

@@ -0,0 +1,42 @@
+import { useInkathon } from '@scio-labs/use-inkathon';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useCoretimeApi } from '@/contexts/apis';
+import { ApiState } from '@/contexts/apis/types';
+import { useToast } from '@/contexts/toast';
+
+// React hook for fetching balance.
+const useBalance = () => {
+  const {
+    state: { api, apiState, symbol },
+  } = useCoretimeApi();
+  const { activeAccount } = useInkathon();
+
+  const [balance, setBalance] = useState(0);
+
+  const { toastWarning } = useToast();
+
+  const fetchBalance = useCallback(async () => {
+    if (api && apiState == ApiState.READY && activeAccount) {
+      const accountData: any = (
+        await api.query.system.account(activeAccount.address)
+      ).toHuman();
+      const balance = parseFloat(accountData.data.free.toString());
+      setBalance(balance);
+
+      if (balance === 0) {
+        toastWarning(
+          `The selected account does not have any ${symbol} tokens on the Coretime chain.`
+        );
+      }
+    }
+  }, [api, apiState, activeAccount, toastWarning, symbol]);
+
+  useEffect(() => {
+    fetchBalance();
+  }, [fetchBalance]);
+
+  return balance;
+};
+
+export default useBalance;

src/hooks/salePhase.tsx

@@ -0,0 +1,104 @@
+import { ApiPromise } from '@polkadot/api';
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  getBlockTimestamp,
+  parseHNString,
+} from '@/utils/functions';
+import {
+  getCurrentPhase,
+  getSaleEndInBlocks,
+  getSaleProgress,
+  getSaleStartInBlocks,
+} from '@/utils/sale/utils';
+
+import { Section } from '@/components/Elements';
+
+import { useCoretimeApi } from '@/contexts/apis';
+import { ApiState } from '@/contexts/apis/types';
+import { useSaleInfo } from '@/contexts/sales';
+import { SalePhase } from '@/models';
+
+// Custom hook for fetching current phase
+const useSalePhase = () => {
+  const {
+    state: { api, apiState },
+  } = useCoretimeApi();
+  const { saleInfo, config } = useSaleInfo();
+
+  const [currentPhase, setCurrentPhase] = useState<SalePhase | null>(null);
+
+  const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
+  const [saleStartTimestamp, setSaleStartTimestamp] = useState(0);
+
+  const [progress, setProgress] = useState<number | null>(0);
+  const [saleSections, setSaleSections] = useState<Section[]>([]);
+
+  const fetchCurrentPhase = useCallback(
+    async (api: ApiPromise) => {
+      const blockNumber = (await api.query.system.number()).toJSON() as number;
+      const lastCommittedTimeslice = parseHNString(
+        (
+          (await api.query.broker.status()).toHuman() as any
+        ).lastCommittedTimeslice.toString()
+      );
+
+      const _saleStart = getSaleStartInBlocks(saleInfo, config);
+      const _saleEnd = getSaleEndInBlocks(
+        saleInfo,
+        blockNumber,
+        lastCommittedTimeslice,
+      );
+
+      getBlockTimestamp(api, _saleStart).then(
+        (value: number) => setSaleStartTimestamp(value)
+      );
+      getBlockTimestamp(api, _saleEnd).then(
+        (value: number) => setSaleEndTimestamp(value)
+      );
+
+      const progress = getSaleProgress(
+        saleInfo,
+        config,
+        blockNumber,
+        lastCommittedTimeslice,
+      );
+      setProgress(progress);
+
+      setCurrentPhase(getCurrentPhase(saleInfo, blockNumber));
+
+      const saleDuration = _saleEnd - _saleStart;
+
+      setSaleSections([
+        { name: 'Interlude', value: 0 },
+        {
+          name: 'Leadin phase',
+          value: (config.interludeLength / saleDuration) * 100,
+        },
+        {
+          name: 'Fixed price phase',
+          value:
+            ((config.interludeLength + config.leadinLength) / saleDuration) *
+            100,
+        },
+      ]);
+    },
+    [saleInfo, config]
+  );
+
+  useEffect(() => {
+    if (!api || apiState !== ApiState.READY) return;
+
+    fetchCurrentPhase(api);
+  }, [fetchCurrentPhase, api, apiState]);
+
+  return {
+    currentPhase,
+    saleStartTimestamp,
+    saleEndTimestamp,
+    progress,
+    saleSections,
+  };
+};
+
+export default useSalePhase;

src/hooks/salePrice.tsx

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { getCurrentPrice } from '@/utils/sale/utils';
+
+import { useCoretimeApi } from '@/contexts/apis';
+import { ApiState } from '@/contexts/apis/types';
+import { useSaleInfo } from '@/contexts/sales';
+
+const useSalePrice = () => {
+  const {
+    state: { api, apiState },
+  } = useCoretimeApi();
+  const { saleInfo } = useSaleInfo();
+
+  const [currentPrice, setCurrentPrice] = useState(0);
+
+  const fetchCurrentPrice = useCallback(async () => {
+    if (api && apiState === ApiState.READY) {
+      const blockNumber = (await api.query.system.number()).toJSON() as number;
+      const price = getCurrentPrice(saleInfo, blockNumber);
+      setCurrentPrice(price);
+    }
+  }, [api, apiState, saleInfo]);
+
+  useEffect(() => {
+    fetchCurrentPrice();
+  }, [fetchCurrentPrice]);
+
+  return currentPrice;
+};
+
+export default useSalePrice;