From ac47b7784f9681fdebf98e11290b6b9525d9af9a Mon Sep 17 00:00:00 2001
From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>
Date: Tue, 30 Apr 2024 09:10:39 +0200
Subject: [PATCH] More sale phase info (#88)

* More sale phase info

* sale phase info panel

* fixes

* remove big circular progress

* fix loading

* off-topic | remove border from network selector

* lint & format

* fix build error

---------

Co-authored-by: topeth <supernathanliu@gmail.com>
---
 package.json                                  |   1 +
 src/components/Elements/Progress/index.tsx    |  64 ------
 .../Elements/SaleInfoPanel/index.module.scss  |  11 +-
 .../Elements/SaleInfoPanel/index.tsx          |  10 +-
 .../SalePhaseInfoPanel/index.module.scss      |  53 +++++
 .../Elements/SalePhaseInfoPanel/index.tsx     | 192 ++++++++++++++++++
 .../Selectors/NetworkSelector/index.tsx       |  25 +--
 src/components/Elements/index.ts              |   2 +-
 .../Modals/Interlace/index.module.scss        |   2 +-
 ...seRenewableParas.ts => renewableParas.tsx} |   0
 src/hooks/salePhase.tsx                       |  73 ++++---
 src/pages/purchase.tsx                        |  36 ++--
 src/pages/renewal.tsx                         |   2 +-
 src/utils/muiTheme.ts                         |   7 +
 14 files changed, 340 insertions(+), 138 deletions(-)
 delete mode 100644 src/components/Elements/Progress/index.tsx
 create mode 100644 src/components/Elements/SalePhaseInfoPanel/index.module.scss
 create mode 100644 src/components/Elements/SalePhaseInfoPanel/index.tsx
 rename src/hooks/{useRenewableParas.ts => renewableParas.tsx} (100%)

diff --git a/package.json b/package.json
index 188f28cc..4cfcfb6e 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "next": "^13.3.1",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
+    "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "^18.2.0",
     "sass": "^1.48.0",
     "sharp": "^0.32.6"
diff --git a/src/components/Elements/Progress/index.tsx b/src/components/Elements/Progress/index.tsx
deleted file mode 100644
index 81996ea2..00000000
--- a/src/components/Elements/Progress/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  Box,
-  LinearProgress,
-  linearProgressClasses,
-  styled,
-  Typography,
-} from '@mui/material';
-
-import theme from '@/utils/muiTheme';
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 20,
-  borderRadius: 5,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: '#eeeff4',
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 5,
-    backgroundColor: theme.palette.primary['light'],
-  },
-}));
-
-export type Section = {
-  name: string;
-  value: number;
-};
-
-interface ProgressProps {
-  progress: number;
-  sections: Section[];
-}
-
-export const Progress = ({ progress, sections }: ProgressProps) => {
-  return (
-    <Box position='relative' width='100%' height='20px'>
-      <BorderLinearProgress variant='determinate' value={progress} />
-      {sections
-        .filter((s) => s.value > 0)
-        .map(({ name, value }, index) => (
-          <div key={index}>
-            <Box
-              key={index}
-              position='absolute'
-              top='0'
-              borderRadius={5}
-              left={`${value}%`}
-              width='5px'
-              height='100%'
-              bgcolor={theme.palette.primary['dark']}
-              zIndex='1'
-            />
-            <Box
-              position='absolute'
-              top='25px' // Position below the divisor
-              left={`${value > 0 ? value : -15}%`} // Adjust to center the text below the divisor
-              zIndex='2'
-            >
-              <Typography component='div'>{`${name}`}</Typography>
-            </Box>
-          </div>
-        ))}
-    </Box>
-  );
-};
diff --git a/src/components/Elements/SaleInfoPanel/index.module.scss b/src/components/Elements/SaleInfoPanel/index.module.scss
index 60162965..2f17047d 100644
--- a/src/components/Elements/SaleInfoPanel/index.module.scss
+++ b/src/components/Elements/SaleInfoPanel/index.module.scss
@@ -2,12 +2,11 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: auto auto;
-  gap: 2em;
-  padding: 1.5em;
-  border-radius: .5em;
-  box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
+  grid-column-gap: 0.75rem;
+  grid-row-gap: 0;
+  margin-top: 1rem;
 }
 
 .gridItem {
-  color: #181336
-}
\ No newline at end of file
+  color: #181336;
+}
diff --git a/src/components/Elements/SaleInfoPanel/index.tsx b/src/components/Elements/SaleInfoPanel/index.tsx
index 17495ce3..e625eaa8 100644
--- a/src/components/Elements/SaleInfoPanel/index.tsx
+++ b/src/components/Elements/SaleInfoPanel/index.tsx
@@ -12,6 +12,7 @@ import { useCoretimeApi } from '@/contexts/apis';
 import { SaleInfo, SalePhase } from '@/models';
 
 import { DetailCard } from './DetailCard';
+import styles from './index.module.scss';
 
 interface SaleInfoGridProps {
   saleInfo: SaleInfo;
@@ -43,14 +44,7 @@ export const SaleInfoPanel = ({
   };
 
   return (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        mt: '2rem',
-        gap: '1rem',
-      }}
-    >
+    <Box className={styles.grid}>
       <DetailCard
         icon={ShoppingIcon}
         title='Sale details'
diff --git a/src/components/Elements/SalePhaseInfoPanel/index.module.scss b/src/components/Elements/SalePhaseInfoPanel/index.module.scss
new file mode 100644
index 00000000..bd8046d3
--- /dev/null
+++ b/src/components/Elements/SalePhaseInfoPanel/index.module.scss
@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 2rem;
+  padding: 1.5rem;
+  flex-grow: 1;
+  box-shadow: 2px 2px 55px rgba(0, 0, 0, 0.08);
+}
+
+.titleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.progress {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.currentPhase {
+  font-weight: 700;
+  margin: 0 auto;
+}
+
+.buttonWrapper {
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin-left: auto;
+}
+
+.timerWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 2rem;
+}
+
+.countDown {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.timeElement {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/Elements/SalePhaseInfoPanel/index.tsx b/src/components/Elements/SalePhaseInfoPanel/index.tsx
new file mode 100644
index 00000000..2e08d4fe
--- /dev/null
+++ b/src/components/Elements/SalePhaseInfoPanel/index.tsx
@@ -0,0 +1,192 @@
+import { Box, Button, Paper, Typography, useTheme } from '@mui/material';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
+
+import { PhaseEndpoints } from '@/hooks/salePhase';
+
+import { SalePhase } from '@/models';
+
+import styles from './index.module.scss';
+
+interface SalePhaseInfoPanelProps {
+  currentPhase: string;
+  saleEndTimestamp: number;
+  saleStartTimestamp: number;
+  endpoints: PhaseEndpoints;
+}
+
+export const SalePhaseInfoPanel = ({
+  currentPhase,
+  endpoints,
+}: SalePhaseInfoPanelProps) => {
+  const theme = useTheme();
+  const router = useRouter();
+
+  const onManage = () => {
+    router.push({
+      pathname: '/regions',
+      query: { ...router.query },
+    });
+  };
+  const minuteSeconds = 60;
+  const hourSeconds = 3600;
+  const daySeconds = 86400;
+
+  const [remainingTime, setRemainingTime] = useState(0);
+  const [daysDuration, setDaysDuration] = useState(0);
+
+  useEffect(() => {
+    let _remainingTime;
+    if (currentPhase == SalePhase.Interlude) {
+      _remainingTime = Math.floor(
+        (endpoints.interlude.end - Date.now()) / 1000
+      );
+    } else if (currentPhase == SalePhase.Leadin) {
+      _remainingTime = Math.floor((endpoints.leadin.end - Date.now()) / 1000);
+    } else if (currentPhase == SalePhase.Regular) {
+      _remainingTime = Math.floor((endpoints.fixed.end - Date.now()) / 1000);
+    } else return;
+
+    const days = Math.ceil(_remainingTime / daySeconds);
+    const _daysDuration = days * daySeconds;
+
+    setDaysDuration(_daysDuration);
+    setRemainingTime(_remainingTime);
+  }, [endpoints, currentPhase]);
+
+  const timerProps = {
+    isPlaying: true,
+    size: 96,
+    strokeWidth: 2,
+  };
+
+  const renderTime = (dimension: string, time: number) => {
+    return (
+      <div className={styles.timeElement}>
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '1rem',
+            color: theme.palette.common.black,
+          }}
+        >
+          {time}
+        </Typography>
+        <Typography
+          sx={{
+            fontWeight: 400,
+            fontSize: '0.75rem',
+            color: theme.palette.text.primary,
+          }}
+        >
+          {dimension}
+        </Typography>
+      </div>
+    );
+  };
+
+  const getTimeSeconds = (time: number) => (minuteSeconds - time) | 0;
+  const getTimeMinutes = (time: number) =>
+    ((time % hourSeconds) / minuteSeconds) | 0;
+  const getTimeHours = (time: number) =>
+    ((time % daySeconds) / hourSeconds) | 0;
+  const getTimeDays = (time: number) => (time / daySeconds) | 0;
+
+  if (remainingTime <= 0) return <></>;
+
+  return (
+    <Paper className={styles.container}>
+      <Box className={styles.titleWrapper}>
+        <Typography
+          sx={{
+            color: theme.palette.common.black,
+            fontSize: '1rem',
+            fontWeight: 700,
+          }}
+        >
+          Current Phase
+        </Typography>
+
+        <Button
+          size='small'
+          variant='text'
+          className={styles.buttonWrapper}
+          sx={{
+            background: '#e8eff7',
+            color: theme.palette.text.secondary,
+          }}
+          onClick={onManage}
+        >
+          Manage your regions
+        </Button>
+      </Box>
+      <Box className={styles.timerWrapper}>
+        <Typography className={styles.currentPhase}>{currentPhase}</Typography>
+        <Typography>Ends in:</Typography>
+        <Box className={styles.countDown}>
+          <CountdownCircleTimer
+            {...timerProps}
+            colors='#64A537'
+            duration={daysDuration}
+            initialRemainingTime={remainingTime}
+          >
+            {({ elapsedTime, color }) => (
+              <span style={{ color }}>
+                {renderTime('days', getTimeDays(daysDuration - elapsedTime))}
+              </span>
+            )}
+          </CountdownCircleTimer>
+          <CountdownCircleTimer
+            {...timerProps}
+            colors='#64A537'
+            duration={daySeconds}
+            initialRemainingTime={remainingTime % daySeconds}
+            onComplete={(totalElapsedTime) => ({
+              shouldRepeat: remainingTime - totalElapsedTime > hourSeconds,
+            })}
+          >
+            {({ elapsedTime, color }) => (
+              <span style={{ color }}>
+                {renderTime('hours', getTimeHours(daySeconds - elapsedTime))}
+              </span>
+            )}
+          </CountdownCircleTimer>
+          <CountdownCircleTimer
+            {...timerProps}
+            colors='#64A537'
+            duration={hourSeconds}
+            initialRemainingTime={remainingTime % hourSeconds}
+            onComplete={(totalElapsedTime) => ({
+              shouldRepeat: remainingTime - totalElapsedTime > minuteSeconds,
+            })}
+          >
+            {({ elapsedTime, color }) => (
+              <span style={{ color }}>
+                {renderTime(
+                  'minutes',
+                  getTimeMinutes(hourSeconds - elapsedTime)
+                )}
+              </span>
+            )}
+          </CountdownCircleTimer>
+          <CountdownCircleTimer
+            {...timerProps}
+            colors='#64A537'
+            duration={minuteSeconds}
+            initialRemainingTime={remainingTime % minuteSeconds}
+            onComplete={(totalElapsedTime) => ({
+              shouldRepeat: remainingTime - totalElapsedTime > 0,
+            })}
+          >
+            {({ elapsedTime, color }) => (
+              <span style={{ color }}>
+                {renderTime('seconds', getTimeSeconds(elapsedTime))}
+              </span>
+            )}
+          </CountdownCircleTimer>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};
diff --git a/src/components/Elements/Selectors/NetworkSelector/index.tsx b/src/components/Elements/Selectors/NetworkSelector/index.tsx
index 10754192..a8f67e10 100644
--- a/src/components/Elements/Selectors/NetworkSelector/index.tsx
+++ b/src/components/Elements/Selectors/NetworkSelector/index.tsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@mui/material';
-import { useTheme } from '@mui/material';
+import { Box, FormControl, MenuItem, Select, Typography } from '@mui/material';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -30,8 +22,6 @@ const RelaySelect = () => {
     );
   };
 
-  const theme = useTheme();
-
   const menuItems = [
     {
       value: NetworkType.ROCOCO,
@@ -47,12 +37,23 @@ const RelaySelect = () => {
 
   return network !== NetworkType.NONE ? (
     <FormControl size='small'>
-      <InputLabel sx={{ color: theme.palette.grey[800] }}>Network</InputLabel>
       <Select
         id='network-select'
         value={network}
         label='Relay chain'
         onChange={handleChange}
+        sx={{
+          border: 'none', // Remove border
+          '& .MuiOutlinedInput-notchedOutline': {
+            border: 'none', // Ensure no border is shown
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            border: 'none', // Ensure no border on hover
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            border: 'none', // Ensure no border when focused
+          },
+        }}
       >
         {menuItems.map(({ value, label, icon }, index) => (
           <MenuItem value={value} key={index}>
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
index 707a2bfd..6790cd5f 100644
--- a/src/components/Elements/index.ts
+++ b/src/components/Elements/index.ts
@@ -7,9 +7,9 @@ export * from './FeatureCard';
 export * from './Label';
 export * from './ListingCard';
 export * from './MarketFilters';
-export * from './Progress';
 export * from './RegionCard';
 export * from './SaleInfoPanel';
+export * from './SalePhaseInfoPanel';
 export * from './Selectors';
 export * from './SimpleRegionCard';
 export * from './StatusIndicator';
diff --git a/src/components/Modals/Interlace/index.module.scss b/src/components/Modals/Interlace/index.module.scss
index f0413e1b..c90d61fe 100644
--- a/src/components/Modals/Interlace/index.module.scss
+++ b/src/components/Modals/Interlace/index.module.scss
@@ -31,4 +31,4 @@
   width: 100%;
   overflow-x: clip;
   font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/src/hooks/useRenewableParas.ts b/src/hooks/renewableParas.tsx
similarity index 100%
rename from src/hooks/useRenewableParas.ts
rename to src/hooks/renewableParas.tsx
diff --git a/src/hooks/salePhase.tsx b/src/hooks/salePhase.tsx
index 480d7484..9fea220f 100644
--- a/src/hooks/salePhase.tsx
+++ b/src/hooks/salePhase.tsx
@@ -10,17 +10,25 @@ import {
 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';
 
+type Endpoint = {
+  start: number;
+  end: number;
+};
+
+export type PhaseEndpoints = {
+  interlude: Endpoint;
+  leadin: Endpoint;
+  fixed: Endpoint;
+};
+
 // Custom hook for fetching current phase
 const useSalePhase = () => {
   const {
@@ -36,8 +44,7 @@ const useSalePhase = () => {
   const [saleEndTimestamp, setSaleEndTimestamp] = useState(0);
   const [saleStartTimestamp, setSaleStartTimestamp] = useState(0);
 
-  const [progress, setProgress] = useState<number | null>(0);
-  const [saleSections, setSaleSections] = useState<Section[]>([]);
+  const [endpoints, SetEndpoints] = useState<PhaseEndpoints | null>(null);
 
   const router = useRouter();
   const { network } = router.query;
@@ -62,39 +69,40 @@ const useSalePhase = () => {
       setSaleStart(_saleStart);
       setSaleEnd(_saleEnd);
 
-      getBlockTimestamp(api, _saleStart, getBlockTime(network)).then(
-        (value: number) => setSaleStartTimestamp(value)
+      const _saleStartTimestamp = await getBlockTimestamp(
+        api,
+        _saleStart,
+        getBlockTime(network)
       );
-      getBlockTimestamp(api, _saleEnd, getBlockTime(network)).then(
-        (value: number) => setSaleEndTimestamp(value)
+      setSaleStartTimestamp(_saleStartTimestamp);
+      const _saleEndTimestamp = await getBlockTimestamp(
+        api,
+        _saleEnd,
+        getBlockTime(network)
       );
-
-      const progress = getSaleProgress(
-        saleInfo,
-        config,
-        blockNumber,
-        lastCommittedTimeslice,
-        network
-      );
-      setProgress(progress);
+      setSaleEndTimestamp(_saleEndTimestamp);
 
       setCurrentPhase(getCurrentPhase(saleInfo, blockNumber));
 
-      const saleDuration = _saleEnd - _saleStart;
-
-      setSaleSections([
-        { name: 'Interlude', value: 0 },
-        {
-          name: 'Leadin phase',
-          value: (config.interludeLength / saleDuration) * 100,
+      const _endpoints = {
+        interlude: {
+          start:
+            _saleStartTimestamp -
+            config.interludeLength * getBlockTime(network),
+          end: _saleStartTimestamp,
+        },
+        leadin: {
+          start: _saleStartTimestamp,
+          end:
+            _saleStartTimestamp + config.leadinLength * getBlockTime(network),
         },
-        {
-          name: 'Fixed price phase',
-          value:
-            ((config.interludeLength + config.leadinLength) / saleDuration) *
-            100,
+        fixed: {
+          start:
+            _saleStartTimestamp + config.leadinLength * getBlockTime(network),
+          end: _saleEndTimestamp,
         },
-      ]);
+      };
+      SetEndpoints(_endpoints);
     },
     [saleInfo, config, network]
   );
@@ -116,9 +124,8 @@ const useSalePhase = () => {
     currentPhase,
     saleStartTimestamp,
     saleEndTimestamp,
-    progress,
-    saleSections,
     loading,
+    endpoints,
   };
 };
 
diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx
index 442437d5..e0ba207a 100644
--- a/src/pages/purchase.tsx
+++ b/src/pages/purchase.tsx
@@ -1,21 +1,24 @@
 import {
   Backdrop,
   Box,
-  Button,
   CircularProgress,
   Typography,
   useTheme,
 } from '@mui/material';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
-import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 import useSalePhase from '@/hooks/salePhase';
 import useSalePrice from '@/hooks/salePrice';
 import { parseHNString, sendTx } from '@/utils/functions';
 
-import { CoreDetailsPanel, ProgressButton, SaleInfoPanel } from '@/components';
+import {
+  CoreDetailsPanel,
+  ProgressButton,
+  SaleInfoPanel,
+  SalePhaseInfoPanel,
+} from '@/components';
 import Balance from '@/components/Elements/Balance';
 
 import { useAccounts } from '@/contexts/account';
@@ -52,12 +55,14 @@ const Purchase = () => {
   const {
     saleStart,
     currentPhase,
-    progress,
     saleStartTimestamp,
     saleEndTimestamp,
     loading: loadingSalePhase,
+    endpoints,
   } = useSalePhase();
 
+  const duration = saleEndTimestamp - saleStartTimestamp;
+
   useEffect(() => {
     if (!currentPhase) return;
 
@@ -126,17 +131,16 @@ const Purchase = () => {
           <Backdrop open>
             <CircularProgress />
           </Backdrop>
-        ) : !currentPhase ||
-          !progress ||
-          !saleStartTimestamp ||
-          !saleEndTimestamp ? (
+        ) : !currentPhase || !saleStartTimestamp || !saleEndTimestamp ? (
           <>
             <Typography variant='h5' align='center'>
               Check your network conection and connect your wallet
             </Typography>
           </>
         ) : (
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+          <Box
+            sx={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}
+          >
             <SaleInfoPanel
               currentPhase={currentPhase}
               currentPrice={currentPrice}
@@ -146,6 +150,17 @@ const Purchase = () => {
             />
             <Box sx={{ display: 'flex', gap: '1rem' }}>
               <CoreDetailsPanel saleInfo={saleInfo} />
+              {endpoints && (
+                <SalePhaseInfoPanel
+                  {...{
+                    currentPhase,
+                    duration,
+                    saleEndTimestamp,
+                    saleStartTimestamp,
+                    endpoints,
+                  }}
+                />
+              )}
             </Box>
 
             <Box
@@ -155,9 +170,6 @@ const Purchase = () => {
                 justifyContent: 'flex-end',
               }}
             >
-              <Link href='/regions'>
-                <Button variant='outlined'>Manage your regions</Button>
-              </Link>
               <ProgressButton
                 onClick={purchase}
                 loading={working}
diff --git a/src/pages/renewal.tsx b/src/pages/renewal.tsx
index fbddf24e..c9b1f79c 100644
--- a/src/pages/renewal.tsx
+++ b/src/pages/renewal.tsx
@@ -14,7 +14,7 @@ import {
 import Link from 'next/link';
 import { useState } from 'react';
 
-import { useRenewableParachains } from '@/hooks/useRenewableParas';
+import { useRenewableParachains } from '@/hooks/renewableParas';
 import { formatBalance, sendTx } from '@/utils/functions';
 
 import { ProgressButton } from '@/components';
diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts
index bd5b1e40..9877b7b0 100644
--- a/src/utils/muiTheme.ts
+++ b/src/utils/muiTheme.ts
@@ -58,6 +58,13 @@ let theme = createTheme({
     },
   },
   components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'capitalize',
+        },
+      },
+    },
     MuiDialog: {
       styleOverrides: {
         paper: {