Sale info fixes (#89)

* sale info fixes

* fixes

* lint fixes

* label

src/components/Elements/SaleInfoPanel/DetailCard/index.tsx

@@ -20,7 +20,13 @@ const ItemContainer = ({ label, value }: ItemDetail) => {
   return (
     <Box className={styles.infoItem}>
       <Typography>{label}</Typography>
-      <Typography sx={{ color: theme.palette.common.black, fontWeight: 700 }}>
+      <Typography
+        sx={{
+          color: theme.palette.common.black,
+          fontWeight: 700,
+          marginRight: '0.2em',
+        }}
+      >
         {value}
       </Typography>
     </Box>

src/components/Elements/SaleInfoPanel/index.tsx

@@ -56,11 +56,11 @@ export const SaleInfoPanel = ({
         title='Sale details'
         left={{
           label: 'Started at',
-          value: moment(saleStartTimestamp).format('D MMM yyyy'),
+          value: moment(saleStartTimestamp).format('D MMM HH:mm'),
         }}
         right={{
           label: 'End at',
-          value: moment(saleEndTimestamp).format('D MMM yyyy'),
+          value: moment(saleEndTimestamp).format('D MMMM HH:mm'),
         }}
       />
       <DetailCard
@@ -73,7 +73,10 @@ export const SaleInfoPanel = ({
         icon={DollarIcon}
         title='Price details'
         left={{
-          label: 'Current price',
+          label:
+            (currentPhase as SalePhase) === SalePhase.Interlude
+              ? 'Start price'
+              : 'Current price',
           value: `${formatBalance(currentPrice.toString(), false)} ${symbol}`,
         }}
         right={{

src/hooks/salePhase.tsx

@@ -31,6 +31,8 @@ const useSalePhase = () => {
   const [currentPhase, setCurrentPhase] = useState<SalePhase | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const [saleStart, setSaleStart] = useState(0);
+  const [saleEnd, setSaleEnd] = useState(0);
   const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
   const [saleStartTimestamp, setSaleStartTimestamp] = useState(0);
 
@@ -57,6 +59,9 @@ const useSalePhase = () => {
         network
       );
 
+      setSaleStart(_saleStart);
+      setSaleEnd(_saleEnd);
+
       getBlockTimestamp(api, _saleStart, getBlockTime(network)).then(
         (value: number) => setSaleStartTimestamp(value)
       );
@@ -106,6 +111,8 @@ const useSalePhase = () => {
   }, [fetchCurrentPhase, api, apiState]);
 
   return {
+    saleStart,
+    saleEnd,
     currentPhase,
     saleStartTimestamp,
     saleEndTimestamp,

src/hooks/salePrice.tsx

@@ -1,30 +1,35 @@
+import { useRouter } from 'next/router';
 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();
+interface SalePriceProps {
+  at?: number;
+}
+
+const useSalePrice = ({ at }: SalePriceProps) => {
   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]);
+  const router = useRouter();
+  const { network } = router.query;
+
+  const fetchCurrentPrice = useCallback(
+    async (at: number) => {
+      if (at) {
+        const price = getCurrentPrice(saleInfo, at, network);
+        setCurrentPrice(price);
+      }
+    },
+    [network, saleInfo]
+  );
 
   useEffect(() => {
-    fetchCurrentPrice();
-  }, [fetchCurrentPrice]);
+    if (!at) return;
+    fetchCurrentPrice(at);
+  }, [at, fetchCurrentPrice]);
 
   return currentPrice;
 };

src/pages/purchase.tsx

@@ -9,11 +9,11 @@ import {
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import useSalePhase from '@/hooks/salePhase';
 import useSalePrice from '@/hooks/salePrice';
-import { sendTx } from '@/utils/functions';
+import { parseHNString, sendTx } from '@/utils/functions';
 
 import { CoreDetailsPanel, ProgressButton, SaleInfoPanel } from '@/components';
 import Balance from '@/components/Elements/Balance';
@@ -25,11 +25,13 @@ import { useBalances } from '@/contexts/balance';
 import { useRegions } from '@/contexts/regions';
 import { useSaleInfo } from '@/contexts/sales';
 import { useToast } from '@/contexts/toast';
+import { SalePhase } from '@/models';
 
 const Purchase = () => {
   const theme = useTheme();
 
   const [working, setWorking] = useState(false);
+  const [at, setAt] = useState<number | undefined>(undefined);
   TimeAgo.addLocale(en);
   // Create formatter (English).
 
@@ -46,15 +48,30 @@ const Purchase = () => {
   const { fetchRegions } = useRegions();
 
   const { balance } = useBalances();
-  const currentPrice = useSalePrice();
+  const currentPrice = useSalePrice({ at });
   const {
+    saleStart,
     currentPhase,
     progress,
     saleStartTimestamp,
     saleEndTimestamp,
     loading: loadingSalePhase,
   } = useSalePhase();
 
+  useEffect(() => {
+    if (!currentPhase) return;
+
+    // If the sale hasn't started yet, get the price from when the sale begins.
+    if ((currentPhase as SalePhase) === SalePhase.Interlude) {
+      setAt(saleStart);
+    } else {
+      if (!api || apiState !== ApiState.READY) return;
+      api.query.system.number().then((height) => {
+        setAt(parseHNString(height.toHuman() as string));
+      });
+    }
+  }, [api, apiState, saleStart, currentPhase]);
+
   const purchase = async () => {
     if (!api || apiState !== ApiState.READY || !activeAccount || !activeSigner)
       return;

src/utils/functions.ts

@@ -87,8 +87,11 @@ export const formatBalance = (balance: string, regionXChain: boolean) => {
 // TODO: should be queried from runtime api instead.
 //
 // https://github.com/paritytech/polkadot-sdk/pull/3485
-export const leadinFactorAt = (when: number) => {
-  return 2 - when;
+export const leadinFactorAt = (network: any, when: number) => {
+  if (!network || network === 'rococo') return 2 - when;
+  else {
+    return 5 - 4 * when;
+  }
 };
 
 export const extractRegionIdFromRaw = (rawRegionId: bigint): RegionId => {

src/utils/sale/utils.test.ts

@@ -135,13 +135,22 @@ describe('Purchase page', () => {
   });
 
   describe('getCurrentPrice', () => {
-    it('works', () => {
+    it('works for rococo', () => {
       const blockNumber = mockSaleInfo.saleStart;
 
       // leading factor is equal to 2 at the start of the sale.
-      expect(getCurrentPrice(mockSaleInfo, blockNumber)).toBe(
+      expect(getCurrentPrice(mockSaleInfo, blockNumber, 'rococo')).toBe(
         mockSaleInfo.price * 2
       );
     });
+
+    it('works for kusama', () => {
+      const blockNumber = mockSaleInfo.saleStart;
+
+      // leading factor is equal to 2 at the start of the sale.
+      expect(getCurrentPrice(mockSaleInfo, blockNumber, 'kusama')).toBe(
+        mockSaleInfo.price * 5
+      );
+    });
   });
 });

src/utils/sale/utils.ts

@@ -58,9 +58,13 @@ export const getSaleProgress = (
   return Number((progress * 100).toFixed(2));
 };
 
-export const getCurrentPrice = (saleInfo: SaleInfo, blockNumber: number) => {
+export const getCurrentPrice = (
+  saleInfo: SaleInfo,
+  blockNumber: number,
+  network: any
+) => {
   const num = Math.min(blockNumber - saleInfo.saleStart, saleInfo.leadinLength);
   const through = num / saleInfo.leadinLength;
 
-  return Number((leadinFactorAt(through) * saleInfo.price).toFixed());
+  return Number((leadinFactorAt(network, through) * saleInfo.price).toFixed());
 };