merge

.env.example

@@ -1,2 +1,4 @@
-WS_CORETIME_CHAIN="WSS endpoint of the coretime chain"
-WS_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
+WS_ROCOCO_CORETIME_CHAIN="WSS endpoint of the coretime chain"
+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"

Dockerfile

@@ -5,8 +5,8 @@ WORKDIR /corehub
 COPY . .
 
 # Set the necessary environment variables
-ENV WS_CORETIME_CHAIN="ws://127.0.0.1:9910"
-ENV WS_RELAY_CHAIN="ws://127.0.0.1:9900"
+ENV WS_ROCOCO_CORETIME_CHAIN="ws://127.0.0.1:9910"
+ENV WS_ROCOCO_RELAY_CHAIN="ws://127.0.0.1:9900"
 
 RUN apk add --no-cache libc6-compat
 

next.config.js

@@ -1,12 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     domains: ['github.com'],
   },
   env: {
-    WS_CORETIME_CHAIN: process.env.WS_CORETIME_CHAIN || '',
-    WS_RELAY_CHAIN: process.env.WS_RELAY_CHAIN,
+    WS_ROCOCO_CORETIME_CHAIN: process.env.WS_ROCOCO_CORETIME_CHAIN || '',
+    WS_KUSAMA_CORETIME_CHAIN: process.env.WS_KUSAMA_CORETIME_CHAIN || '',
+    WS_ROCOCO_RELAY_CHAIN: process.env.WS_ROCOCO_RELAY_CHAIN,
+    WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN,
   },
 };
 

package.json

@@ -32,6 +32,7 @@
     "decimal.js": "^10.4.3",
     "humanize-duration": "^3.31.0",
     "javascript-time-ago": "^2.5.9",
+    "moment": "^2.30.1",
     "next": "^13.3.1",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

src/components/Elements/Buttons/ActionButton/index.module.scss

@@ -0,0 +1,8 @@
+.buttonContainer {
+  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
+  border-radius: 100px;
+  font-weight: 500;
+  text-transform: none;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+}

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

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

src/components/Elements/Buttons/ProgressButton/index.module.scss

@@ -0,0 +1,8 @@
+.buttonContainer {
+  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
+  border-radius: 100px;
+  font-weight: 500;
+  text-transform: none;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+}

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

@@ -0,0 +1,25 @@
+import { LoadingButton } from '@mui/lab';
+
+import styles from './index.module.scss';
+
+interface ProgressButtonProps {
+  label: string;
+  onClick: () => void;
+  loading: boolean;
+}
+export const ProgressButton = ({
+  label,
+  onClick,
+  loading,
+}: ProgressButtonProps) => {
+  return (
+    <LoadingButton
+      onClick={onClick}
+      variant='contained'
+      loading={loading}
+      className={styles.buttonContainer}
+    >
+      {label}
+    </LoadingButton>
+  );
+};

src/components/Elements/Buttons/index.tsx

@@ -0,0 +1,2 @@
+export * from './ActionButton';
+export * from './ProgressButton';

src/components/Elements/CoreDetailsPanel/index.module.scss

@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  flex-grow: 1;
+  box-shadow: 2px 2px 55px rgba(0, 0, 0, 0.08);
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.iconWrapper {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0.5rem;
+}
+
+.infoWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.detailWrapper {
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
+
+.valueWrapper {
+  background: #ecf1f9;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+}

src/components/Elements/CoreDetailsPanel/index.tsx

@@ -0,0 +1,94 @@
+import { Box, Paper, Typography, useTheme } from '@mui/material';
+import Image from 'next/image';
+
+import GraphIcon from '@/assets/graph.png';
+import { SaleInfo } from '@/models';
+
+import styles from './index.module.scss';
+
+interface DetailItemProps {
+  label: string;
+  description: string;
+  value: number;
+}
+
+const DetailItem = ({ label, description, value }: DetailItemProps) => {
+  const theme = useTheme();
+  return (
+    <Paper className={styles.detailWrapper}>
+      <Box>
+        <Typography
+          sx={{
+            fontSize: '0.9rem',
+            fontWeight: 600,
+            color: theme.palette.common.black,
+          }}
+        >
+          {label}
+        </Typography>
+        <Typography
+          sx={{
+            fontSize: '0.8rem',
+            fontWeight: 400,
+            color: theme.palette.text.primary,
+          }}
+        >
+          {description}
+        </Typography>
+      </Box>
+      <Box className={styles.valueWrapper}>
+        <Typography
+          sx={{
+            fontSize: '0.8rem',
+            color: theme.palette.text.secondary,
+            fontWeight: 700,
+            lineHeight: 1,
+          }}
+        >
+          {value}
+        </Typography>
+      </Box>
+    </Paper>
+  );
+};
+
+interface CoreDetailsPanelProps {
+  saleInfo: SaleInfo;
+}
+
+export const CoreDetailsPanel = ({ saleInfo }: CoreDetailsPanelProps) => {
+  const theme = useTheme();
+  return (
+    <Paper className={styles.container}>
+      <Box className={styles.titleWrapper}>
+        <Image src={GraphIcon} alt='graph' className={styles.iconWrapper} />
+        <Typography
+          sx={{
+            color: theme.palette.common.black,
+            fontSize: '1rem',
+            fontWeight: 700,
+          }}
+        >
+          Core Details
+        </Typography>
+      </Box>
+      <Box className={styles.infoWrapper}>
+        <DetailItem
+          label='Cores offered'
+          description='Numbers of cores which are offered for sale'
+          value={saleInfo.coresOffered}
+        />
+        <DetailItem
+          label='Cores sold'
+          description='Numbers of cores which have been sold'
+          value={saleInfo.coresSold}
+        />
+        <DetailItem
+          label='Ideal cores sold'
+          description='Numbers of cores sold to not affect the price for next sale'
+          value={saleInfo.idealCoresSold}
+        />
+      </Box>
+    </Paper>
+  );
+};

src/components/Elements/FeatureCard/index.tsx

@@ -27,7 +27,7 @@ export const FeatureCard = ({
   enabled,
   href,
 }: FeatureCardProps) => {
-  const { push } = useRouter();
+  const { push, query } = useRouter();
   const theme = useTheme();
 
   return (
@@ -40,7 +40,7 @@ export const FeatureCard = ({
       </Typography>
       <CardActions>
         <Button
-          onClick={() => enabled && push(href)}
+          onClick={() => enabled && push({ pathname: href, query })}
           size='small'
           variant='text'
           disabled={!enabled}

src/components/Elements/ListingCard/index.tsx

@@ -196,7 +196,7 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Price/timeslice:</Typography>
           <Typography variant='h2'>
-            {`${formatBalance(listing.timeslicePrice.toString(),true)} ${symbol}`}
+            {`${formatBalance(listing.timeslicePrice.toString(), true)} ${symbol}`}
           </Typography>
         </Box>
         <Box

src/components/Elements/NetworkSelect/index.tsx

@@ -0,0 +1,35 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useRouter } from 'next/router';
+
+const RelaySelect = () => {
+  const router = useRouter();
+  const { network } = router.query;
+
+  const handleChange = (e: any) => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, network: e.target.value },
+      },
+      undefined,
+      { shallow: false }
+    );
+  };
+
+  return (
+    <FormControl sx={{ m: 2, minWidth: 150 }} fullWidth>
+      <InputLabel>Network</InputLabel>
+      <Select
+        id='network-select'
+        value={network ? network : 'rococo'}
+        label='Relay chain'
+        onChange={handleChange}
+      >
+        <MenuItem value='rococo'>Rococo</MenuItem>
+        <MenuItem value='kusama'>Kusama</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default RelaySelect;