purchase history table

.env.example

@@ -3,4 +3,6 @@ WS_KUSAMA_CORETIME_CHAIN="WSS endpoint of the coretime chain"
 WS_ROCOCO_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
 WS_KUSAMA_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
 WS_REGIONX_CHAIN="WSS endpoint of the regionx chain"
+ROCOCO_CORETIME_API="API endpoint for Rococo Coretime"
+KUSAMA_CORETIME_API="API endpoint for Kusama Coretime"
 EXPERIMENTAL=false

next.config.js

@@ -10,6 +10,8 @@ const nextConfig = {
     WS_REGIONX_CHAIN: process.env.WS_REGIONX_CHAIN || '',
     WS_ROCOCO_RELAY_CHAIN: process.env.WS_ROCOCO_RELAY_CHAIN,
     WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN,
+    KUSAMA_CORETIME_API: process.env.KUSAMA_CORETIME_API,
+    ROCOCO_CORETIME_API: process.env.ROCOCO_CORETIME_API,
     EXPERIMENTAL: process.env.EXPERIMENTAL,
   },
 };

src/components/Charts/SalePrice/index.tsx

@@ -106,7 +106,7 @@ export const SalePriceChart = () => {
     yaxis: {
       min: 0,
       title: {
-        text: `Price (${symbol})`,
+        text: symbol ? `Price (${symbol})` : 'Price',
       },
       labels: {
         formatter: (v: number) => v?.toFixed(2),

src/components/Elements/Buttons/ActionButton/index.tsx

@@ -5,13 +5,19 @@ import styles from './index.module.scss';
 interface ActionButtonProps {
   label: string;
   onClick: () => void;
+  disabled?: boolean;
 }
-export const ActionButton = ({ label, onClick }: ActionButtonProps) => {
+export const ActionButton = ({
+  label,
+  onClick,
+  disabled,
+}: ActionButtonProps) => {
   return (
     <Button
       variant='contained'
       onClick={onClick}
       className={styles.buttonContainer}
+      disabled={disabled}
     >
       {label}
     </Button>

src/components/Elements/Link/index.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@mui/material';
+import React from 'react';
+
+interface LinkProps {
+  href: string;
+  target?: string;
+  children: React.ReactNode;
+}
+
+export const Link = ({ href, target = '_blank', children }: LinkProps) => {
+  const onClick = () => {
+    if (!href) return;
+    window.open(href, target);
+  };
+
+  return <Button onClick={onClick}>{children}</Button>;
+};

src/components/Elements/index.ts

@@ -6,6 +6,7 @@ export * from './Cards';
 export * from './CountDown';
 export * from './Inputs';
 export * from './Label';
+export * from './Link';
 export * from './MarketFilters';
 export * from './Selectors';
 export * from './StatusIndicator';

src/components/Modals/Regions/PurchaseHistory/index.module.scss

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 55rem;
+}
+
+.tableContainer {
+  overflow-y: auto;
+}

src/components/Modals/Regions/PurchaseHistory/index.tsx

@@ -0,0 +1,93 @@
+import { Warning } from '@mui/icons-material';
+import {
+  Box,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import React from 'react';
+
+import { usePurchaseHistory } from '@/hooks';
+
+import { ActionButton } from '@/components/Elements';
+import { PurchaseHistoryTable } from '@/components/Tables';
+
+import { useNetwork } from '@/contexts/network';
+import { useSaleInfo } from '@/contexts/sales';
+
+import styles from './index.module.scss';
+
+interface PurchaseHistoryModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const PurchaseHistoryModal = ({
+  open,
+  onClose,
+}: PurchaseHistoryModalProps) => {
+  const theme = useTheme();
+  const { network } = useNetwork();
+  const {
+    saleInfo: { regionBegin },
+  } = useSaleInfo();
+  const { loading, data, isError } = usePurchaseHistory(
+    network,
+    regionBegin,
+    0,
+    20
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='md'>
+      <DialogContent className={styles.container}>
+        <Box>
+          <Typography
+            variant='subtitle1'
+            sx={{ color: theme.palette.common.black }}
+          >
+            Purchase History
+          </Typography>
+          <Typography
+            variant='subtitle2'
+            sx={{ color: theme.palette.text.primary }}
+          >
+            Get an insight into all purchases and renewals made during the
+            current bulk period.
+          </Typography>
+        </Box>
+        <Box>
+          {loading || isError ? (
+            <Stack
+              alignItems='center'
+              minHeight='10rem'
+              justifyContent='center'
+            >
+              {loading ? (
+                <CircularProgress />
+              ) : (
+                <Stack alignItems='center' direction='row' gap='1rem'>
+                  <Warning color='error' />
+                  <Typography>Failed to fetch purchase history</Typography>
+                </Stack>
+              )}
+            </Stack>
+          ) : (
+            <Box className={styles.tableContainer}>
+              <PurchaseHistoryTable data={data} />
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Box>
+          <ActionButton label='Close' onClick={onClose} disabled={loading} />
+        </Box>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/components/Modals/Regions/index.ts

@@ -4,6 +4,7 @@ export * from './Partition';
 export * from './Pooling';
 export * from './Price';
 export * from './Purchase';
+export * from './PurchaseHistory';
 export * from './Sell';
 export * from './TaskAssign';
 export * from './Transfer';

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

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  padding: 1rem 2rem;
+  padding: 1rem 1.5rem;
   border-radius: 0.5rem;
   gap: 1.5rem;
 }

src/components/Panels/SalePhaseInfoPanel/index.tsx

@@ -1,34 +1,25 @@
 import { Box, Button, Paper, Typography, useTheme } from '@mui/material';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { CountDown, SalePhaseCard } from '@/components/Elements';
+import { PurchaseHistoryModal } from '@/components/Modals';
 
-import { useNetwork } from '@/contexts/network';
 import { useSaleInfo } from '@/contexts/sales';
 import { SalePhase } from '@/models';
 
 import styles from './index.module.scss';
 export const SalePhaseInfoPanel = () => {
   const theme = useTheme();
-  const router = useRouter();
-  const { network } = useNetwork();
 
   const {
     phase: { currentPhase, endpoints },
   } = useSaleInfo();
 
   const [remainingTime, setRemainingTime] = useState(0);
+  const [historyModalOpen, openHistoryModal] = useState(false);
 
   const valEndpoints = JSON.stringify(endpoints);
 
-  const onManage = () => {
-    router.push({
-      pathname: '/regions',
-      query: { network },
-    });
-  };
-
   useEffect(() => {
     let _remainingTime;
 
@@ -46,38 +37,44 @@ export const SalePhaseInfoPanel = () => {
   }, [valEndpoints, currentPhase]);
 
   return (
-    <Paper className={styles.container}>
-      <Box className={styles.titleWrapper}>
-        <Typography
-          sx={{
-            color: theme.palette.common.black,
-            fontSize: '1rem',
-            fontWeight: 700,
-          }}
-        >
-          Current Phase
-        </Typography>
+    <>
+      <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}>
-        <Box className={styles.currentPhase}>
-          <SalePhaseCard label='' value={currentPhase} />
+          <Button
+            size='small'
+            variant='text'
+            className={styles.buttonWrapper}
+            sx={{
+              background: '#e8eff7',
+              color: theme.palette.text.secondary,
+            }}
+            onClick={() => openHistoryModal(true)}
+          >
+            Purchase History
+          </Button>
+        </Box>
+        <Box className={styles.timerWrapper}>
+          <Box className={styles.currentPhase}>
+            <SalePhaseCard label='' value={currentPhase} />
+          </Box>
+          <Typography>Ends in:</Typography>
+          <CountDown remainingTime={remainingTime} />
         </Box>
-        <Typography>Ends in:</Typography>
-        <CountDown remainingTime={remainingTime} />
-      </Box>
-    </Paper>
+      </Paper>
+      <PurchaseHistoryModal
+        open={historyModalOpen}
+        onClose={() => openHistoryModal(false)}
+      />
+    </>
   );
 };

src/components/Paras/index.ts

@@ -1,5 +1,4 @@
 export * from './CoreExpiryCard';
 export * from './LeaseStateCard';
-export * from './ParachainTable';
 export * from './ParaDisplay';
 export * from './ParaStateCard';

src/components/Paras/ParachainTable/index.tsx → src/components/Tables/ParachainTable/index.tsx

@@ -10,8 +10,6 @@ import {
   styled,
   Table,
   TableBody,
-  TableCell,
-  tableCellClasses,
   TableContainer,
   TableFooter,
   TableHead,
@@ -21,16 +19,19 @@ import {
   useTheme,
 } from '@mui/material';
 import Image from 'next/image';
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
+import { Link } from '@/components/Elements';
+
+import { SUBSCAN_URL } from '@/consts';
 import { useRelayApi } from '@/contexts/apis';
 import { useNetwork } from '@/contexts/network';
 import { ParachainInfo, ParaState } from '@/models';
 
-import { CoreExpiryCard } from '../CoreExpiryCard';
-import { LeaseStateCard } from '../LeaseStateCard';
-import { ParaStateCard } from '../ParaStateCard';
+import { StyledTableCell, StyledTableRow } from '../common';
+import { CoreExpiryCard } from '../../Paras/CoreExpiryCard';
+import { LeaseStateCard } from '../../Paras/LeaseStateCard';
+import { ParaStateCard } from '../../Paras/ParaStateCard';
 
 export type Order = 'asc' | 'desc';
 
@@ -48,28 +49,6 @@ interface ParachainTableProps {
   handleSort: (_orderBy: string, _direction: Order) => void;
 }
 
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.common.black,
-    color: theme.palette.common.white,
-    fontSize: '1rem',
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: 14,
-    color: theme.palette.common.black,
-  },
-}));
-
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover,
-  },
-  // hide last border
-  '&:last-child td, &:last-child th': {
-    border: 0,
-  },
-}));
-
 const ParaActionButton = styled(Button)(({ theme }: any) => ({
   width: 'mind-width',
   fontWeight: 'bold',
@@ -179,15 +158,9 @@ export const ParachainTable = ({
           ).map(({ id, name, state, watching, logo, homepage }, index) => (
             <StyledTableRow key={index}>
               <StyledTableCell style={{ width: '10%' }}>
-                <Button
-                  onClick={() => {
-                    window.open(
-                      `https://${network}.subscan.io/parachain/${id}`
-                    );
-                  }}
-                >
+                <Link href={`${SUBSCAN_URL[network]}/parachain/${id}`}>
                   {id}
-                </Button>
+                </Link>
               </StyledTableCell>
               <StyledTableCell style={{ width: '25%' }}>
                 <Stack direction='row' alignItems='center' gap='1rem'>