More info on the sale details modal

src/apis/index.ts

@@ -95,12 +95,18 @@ export const fetchSalesHistoryData = async (
   const query = `{
       sales(
         after: ${after},
-        orderBy: REGION_BEGIN_DESC
+        orderBy: SALE_CYCLE_DESC
       ) {
         nodes {
           saleCycle
           regionBegin
           regionEnd
+          height
+          saleEnd
+          timestamp
+          tsSaleEnd
+          startPrice
+          endPrice
         }
         pageInfo {
           hasNextPage

src/components/Charts/SalePrice/index.tsx

@@ -1,10 +1,13 @@
 import { CircularProgress, Stack } from '@mui/material';
 import { ApexOptions } from 'apexcharts';
-import moment from 'moment';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-import { formatNumber, planckBnToUnit } from '@/utils/functions';
+import {
+  formatNumber,
+  getTimeStringShort,
+  planckBnToUnit,
+} from '@/utils/functions';
 import { getCorePriceAt, isNewPricing } from '@/utils/sale';
 
 import { useCoretimeApi } from '@/contexts/apis';
@@ -135,7 +138,7 @@ export const SalePriceChart = () => {
       shared: false,
       x: {
         formatter: (v: number) =>
-          v === currentTimestamp ? 'Now' : moment(v).format('D MMM HH:mm'),
+          v === currentTimestamp ? 'Now' : getTimeStringShort(v),
       },
     },
     grid: {

src/components/Elements/InfoItem/index.tsx

@@ -0,0 +1,25 @@
+import { Stack, Typography, useTheme } from '@mui/material';
+
+export type ItemDetail = {
+  label: string;
+  value: string | React.ReactNode;
+};
+export const InfoItem = ({ label, value }: ItemDetail) => {
+  const theme = useTheme();
+  return (
+    <Stack direction='column' gap='0.5rem'>
+      <Typography sx={{ color: theme.palette.text.primary }}>
+        {label}
+      </Typography>
+      <Typography
+        sx={{
+          color: theme.palette.common.black,
+          fontWeight: 700,
+          marginRight: '0.2em',
+        }}
+      >
+        {value}
+      </Typography>
+    </Stack>
+  );
+};

src/components/Elements/index.ts

@@ -4,6 +4,7 @@ export * from './Banner';
 export * from './Buttons';
 export * from './Cards';
 export * from './CountDown';
+export * from './InfoItem';
 export * from './Inputs';
 export * from './Label';
 export * from './Link';

src/components/Modals/Orders/OrderCreation/index.tsx

@@ -204,7 +204,7 @@ export const OrderCreationModal = ({
           </FormControl>
         </Stack>
         <Typography>Region duration:</Typography>
-        <Stack sx={{ padding: '1rem', bgcolor: '#EFF0F3' }} gap='1rem'>
+        <Stack padding='1rem' bgcolor='#EFF0F3' gap='1rem'>
           <FormControl>
             <ToggleButtonGroup
               value={durationType}

src/components/Modals/SaleDetails/index.tsx

@@ -1,38 +1,59 @@
 import { Warning } from '@mui/icons-material';
+import InfoIcon from '@mui/icons-material/Info';
 import {
   Box,
   CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogProps,
+  IconButton,
   Stack,
+  Tooltip,
   Typography,
   useTheme,
 } from '@mui/material';
 import React from 'react';
 
 import { useSaleDetails } from '@/hooks';
+import { getBalanceString, getTimeStringShort } from '@/utils/functions';
 
-import { ActionButton } from '@/components/Elements';
+import { ActionButton, InfoItem } from '@/components/Elements';
 import { PurchaseHistoryTable } from '@/components/Tables';
 
+import { useCoretimeApi } from '@/contexts/apis';
 import { useNetwork } from '@/contexts/network';
+import { SalesHistoryItem } from '@/models';
 
 import styles from './index.module.scss';
 
 interface SaleDetailsModalProps extends DialogProps {
   onClose: () => void;
-  saleCycle: number;
+  info: SalesHistoryItem;
 }
 
 export const SaleDetailsModal = ({
   open,
   onClose,
-  saleCycle,
+  info,
 }: SaleDetailsModalProps) => {
   const theme = useTheme();
   const { network } = useNetwork();
+  const {
+    state: { decimals, symbol },
+  } = useCoretimeApi();
+  const {
+    saleCycle,
+    regionBegin,
+    regionEnd,
+    startPrice,
+    endPrice,
+    startTimestamp,
+    endTimestamp,
+    startBlock,
+    endBlock,
+  } = info;
+
   const { loading, data, isError } = useSaleDetails(network, saleCycle);
 
   return (
@@ -48,7 +69,7 @@ export const SaleDetailsModal = ({
             variant='subtitle1'
             sx={{ color: theme.palette.common.black }}
           >
-            Sale Details
+            Coretime Sale#{saleCycle}
           </Typography>
         </Box>
         {loading || isError ? (
@@ -64,6 +85,56 @@ export const SaleDetailsModal = ({
           </Stack>
         ) : (
           <Box className={styles.tableContainer}>
+            <Stack direction='row' justifyContent='space-between'>
+              <InfoItem
+                label='Region Begin'
+                value={regionBegin.toLocaleString()}
+              />
+              <InfoItem
+                label='Length'
+                value={(regionEnd - regionBegin).toLocaleString()}
+              />
+              <InfoItem
+                label='Start Price'
+                value={getBalanceString(
+                  startPrice.toString(),
+                  decimals,
+                  symbol
+                )}
+              />
+              <InfoItem
+                label='End Price'
+                value={getBalanceString(endPrice.toString(), decimals, symbol)}
+              />
+            </Stack>
+            <Stack direction='row' alignItems='center'>
+              <Typography sx={{ color: theme.palette.text.primary }}>
+                {endTimestamp ? 'Sale Ended' : 'Sale Started'}
+              </Typography>
+              <Typography
+                sx={{
+                  color: theme.palette.common.black,
+                  fontWeight: 700,
+                  ml: '1rem',
+                }}
+              >
+                {endTimestamp
+                  ? `${getTimeStringShort(
+                      startTimestamp
+                    )} ~ ${getTimeStringShort(endTimestamp)}`
+                  : getTimeStringShort(startTimestamp)}
+              </Typography>
+              <Tooltip
+                title={`Start Block: ${startBlock.toLocaleString()}${
+                  endBlock ? ' End Block: ' + endBlock.toLocaleString() : ''
+                }`}
+                placement='right'
+              >
+                <IconButton>
+                  <InfoIcon />
+                </IconButton>
+              </Tooltip>
+            </Stack>
             <PurchaseHistoryTable data={data} />
           </Box>
         )}

src/components/Panels/SaleInfoPanel/DetailCard/index.module.scss

@@ -29,9 +29,3 @@
   align-items: center;
   justify-content: space-between;
 }
-
-.infoItem {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}

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

@@ -2,12 +2,9 @@ import { Box, Paper, Typography, useTheme } from '@mui/material';
 import Image from 'next/image';
 import React from 'react';
 
-import styles from './index.module.scss';
+import { InfoItem, ItemDetail } from '@/components/Elements';
 
-interface ItemDetail {
-  label: string;
-  value: string | React.ReactNode;
-}
+import styles from './index.module.scss';
 
 interface DetailCardProps {
   icon: any;
@@ -20,26 +17,6 @@ interface DetailCardProps {
   children?: React.ReactNode;
 }
 
-const ItemContainer = ({ label, value }: ItemDetail) => {
-  const theme = useTheme();
-  return (
-    <Box className={styles.infoItem}>
-      <Typography sx={{ color: theme.palette.text.primary }}>
-        {label}
-      </Typography>
-      <Typography
-        sx={{
-          color: theme.palette.common.black,
-          fontWeight: 700,
-          marginRight: '0.2em',
-        }}
-      >
-        {value}
-      </Typography>
-    </Box>
-  );
-};
-
 export const DetailCard = ({
   icon,
   title,
@@ -68,8 +45,8 @@ export const DetailCard = ({
       >
         {items ? (
           <>
-            <ItemContainer {...items.left} />
-            <ItemContainer {...items.right} />
+            <InfoItem {...items.left} />
+            <InfoItem {...items.right} />
           </>
         ) : (
           children

src/components/Panels/SaleInfoPanel/index.tsx

@@ -1,10 +1,9 @@
 import { Box, Button, CircularProgress, useTheme } from '@mui/material';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
-import moment from 'moment';
 import { useState } from 'react';
 
-import { getBalanceString } from '@/utils/functions';
+import { getBalanceString, getTimeStringShort } from '@/utils/functions';
 
 import { SalePhaseCard } from '@/components/Elements';
 import { PriceModal } from '@/components/Modals';
@@ -61,11 +60,11 @@ export const SaleInfoPanel = () => {
             left: {
               label:
                 saleStartTimestamp < Date.now() ? 'Started at' : 'Starts at:',
-              value: moment(saleStartTimestamp).format('D MMM HH:mm'),
+              value: getTimeStringShort(saleStartTimestamp),
             },
             right: {
               label: saleEndTimestamp > Date.now() ? 'Ends at' : 'Ended at:',
-              value: moment(saleEndTimestamp).format('D MMMM HH:mm'),
+              value: getTimeStringShort(saleEndTimestamp),
             },
           }}
         />

src/components/Regions/MarketRegion/index.tsx

@@ -8,10 +8,9 @@ import {
   useTheme,
 } from '@mui/material';
 import { humanizer } from 'humanize-duration';
-import moment from 'moment';
 import React from 'react';
 
-import { getBalanceString } from '@/utils/functions';
+import { getBalanceString, getTimeStringShort } from '@/utils/functions';
 
 import { useRelayApi } from '@/contexts/apis';
 import { Listing } from '@/models';
@@ -94,15 +93,15 @@ export const MarketRegion = ({ listing }: MarketRegionProps) => {
           <Typography
             sx={{ color: theme.palette.common.black, fontWeight: 500 }}
           >
-            {moment(beginTimestamp).format('D MMM HH:mm')}
+            {getTimeStringShort(beginTimestamp)}
           </Typography>
         </Box>
         <Box className={styles.timeItem}>
           <Typography>End: </Typography>
           <Typography
             sx={{ color: theme.palette.common.black, fontWeight: 500 }}
           >
-            {moment(endTimestamp).format('D MMM HH:mm')}
+            {getTimeStringShort(endTimestamp)}
           </Typography>
         </Box>
       </Box>

src/components/Tables/PurchaseHistoryTable/index.tsx

@@ -58,7 +58,7 @@ export const PurchaseHistoryTable = ({ data }: PurchaseHistoryTableProps) => {
 
   return (
     <Stack direction='column' gap='1em'>
-      <TableContainer component={Paper} sx={{ height: '35rem' }}>
+      <TableContainer component={Paper} sx={{ height: '32rem' }}>
         <Table stickyHeader>
           <TableHead>
             <TableRow>
@@ -76,7 +76,14 @@ export const PurchaseHistoryTable = ({ data }: PurchaseHistoryTableProps) => {
               : data
             ).map(
               (
-                { address, core, extrinsicId: extrinsic_index, timestamp, price, type },
+                {
+                  address,
+                  core,
+                  extrinsicId: extrinsic_index,
+                  timestamp,
+                  price,
+                  type,
+                },
                 index
               ) => (
                 <StyledTableRow key={index}>