Cleanup & fixes (#37)

* Cleanup & fixes * fix linting errors & add banner * final touches
RegionX-Labs · Jan 22, 2024 · aca477e · aca477e
1 parent d4296e7
commit aca477e
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 63 deletions.
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -0,0 +1,40 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, IconButton } from '@mui/material';
+import React, { useState } from 'react';
+
+interface BannerProps {
+  content: string;
+  severity: 'info' | 'error' | 'warning' | 'success';
+}
+
+const Banner = ({ content, severity }: BannerProps) => {
+  const [open, setOpen] = useState(true);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity={severity}
+      action={
+        <IconButton
+          aria-label='close'
+          color='inherit'
+          size='small'
+          onClick={handleClose}
+        >
+          <CloseIcon fontSize='inherit' />
+        </IconButton>
+      }
+    >
+      {content}
+    </Alert>
+  );
+};
+
+export default Banner;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -53,17 +53,20 @@ export const Header = () => {
 
               <Collapse in={accountsOpen} className={styles.accountsWrapper}>
                 <List component='div' className={styles.accountsList}>
-                  {accounts?.map((account, index) => (
-                    <ListItemButton
-                      key={index}
-                      onClick={() => {
-                        setActiveAccount && setActiveAccount(account);
-                        openAccounts(false);
-                      }}
-                    >
-                      {account.name}
-                    </ListItemButton>
-                  ))}
+                  {accounts?.map(
+                    (account, index) =>
+                      account.type == 'sr25519' && (
+                        <ListItemButton
+                          key={index}
+                          onClick={() => {
+                            setActiveAccount && setActiveAccount(account);
+                            openAccounts(false);
+                          }}
+                        >
+                          {account.name}
+                        </ListItemButton>
+                      )
+                  )}
                 </List>
                 <Divider />
                 <ListItemButton onClick={onDisconnect}>

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -2,6 +2,7 @@ import { Divider, Paper, useTheme } from '@mui/material';
 import React, { ReactElement } from 'react';
 
 import styles from './index.module.scss';
+import Banner from '../Banner';
 import { Header } from '../Header';
 import { Sidebar } from '../Sidebar';
 
@@ -14,6 +15,10 @@ export const Layout = ({ children }: Props) => {
   return (
     <div className={styles.layout}>
       <Header />
+      <Banner
+        content='The UI is still under active development and is released only for testing purposes!'
+        severity='error'
+      />
       <div className={styles.content}>
         <div className={styles.sidebar}>
           <Sidebar />

diff --git a/src/components/Modals/Interlace/index.tsx b/src/components/Modals/Interlace/index.tsx
@@ -42,9 +42,7 @@ export const InterlaceModal = ({
     state: { api },
   } = useCoretimeApi();
   const { toastError, toastSuccess, toastInfo } = useToast();
-  const {
-    fetchRegions,
-  } = useRegions();
+  const { fetchRegions } = useRegions();
 
   const currentMask = regionMetadata.region.getMask().toBin();
   const oneStart = currentMask.indexOf('1');
@@ -134,9 +132,10 @@ export const InterlaceModal = ({
                 onChange={(_e, v) => setPosition(Number(v))}
                 valueLabelDisplay='on'
                 valueLabelFormat={(v) =>
-                  `${(((v - oneStart + 1) / (COREMASK_BYTES_LEN * 8)) * 100).toFixed(
-                    2
-                  )}%`
+                  `${(
+                    ((v - oneStart + 1) / (COREMASK_BYTES_LEN * 8)) *
+                    100
+                  ).toFixed(2)}%`
                 }
                 className={styles.slider}
               />

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -25,8 +25,9 @@ const MenuItem = ({ label, route, icon }: MenuItemProps) => {
 
   return (
     <Box
-      className={`${styles.menuItem} ${isActive ? styles.active : styles.inactive
-        }`}
+      className={`${styles.menuItem} ${
+        isActive ? styles.active : styles.inactive
+      }`}
       onClick={() => route && push(route)}
     >
       {{

diff --git a/src/components/elements/FeatureCard/index.tsx b/src/components/elements/FeatureCard/index.tsx
@@ -1,4 +1,11 @@
-import { Button, Card, CardActions, CardContent, Link, Typography } from '@mui/material';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Link,
+  Typography,
+} from '@mui/material';
 import Image, { StaticImageData } from 'next/image';
 import React from 'react';
 
@@ -8,21 +15,21 @@ interface FeatureCardProps {
   title: string;
   buttonText: string;
   image: StaticImageData;
-  href: string
+  href: string;
 }
 
 const FeatureCard = ({ title, buttonText, image, href }: FeatureCardProps) => {
   return (
     <Card className={styles.card}>
       <CardContent>
-        <Image className={styles.icon} src={image} alt="" />
+        <Image className={styles.icon} src={image} alt='' />
       </CardContent>
-      <Typography variant="h5" component="h2" gutterBottom>
+      <Typography variant='h5' component='h2' gutterBottom>
         {title}
       </Typography>
       <CardActions>
-        <Link margin="0 auto" href={href}>
-          <Button size="small" variant='text' className={styles.button}>
+        <Link margin='0 auto' href={href}>
+          <Button size='small' variant='text' className={styles.button}>
             {buttonText}
           </Button>
         </Link>

diff --git a/src/components/elements/RegionCard/index.tsx b/src/components/elements/RegionCard/index.tsx
@@ -21,7 +21,7 @@ import React, { useEffect, useState } from 'react';
 
 import { timesliceToTimestamp } from '@/utils/functions';
 
-import { useCoretimeApi } from '@/contexts/apis';
+import { useRelayApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useTasks } from '@/contexts/tasks';
 import { RegionLocation, RegionMetadata } from '@/models';
@@ -103,7 +103,7 @@ const RegionCardInner = ({
 
   const {
     state: { api },
-  } = useCoretimeApi();
+  } = useRelayApi();
 
   const {
     config: { timeslicePeriod },
@@ -242,7 +242,7 @@ const RegionCardInner = ({
       <Box sx={{ color: theme.palette.grey[200] }}>
         {taskId !== null ? (
           <Typography variant='subtitle2'>
-            {`Task: ${getTaskName(taskId)}`}
+            {`Task: ${taskId ? getTaskName(taskId) : 'Unassigned'}`}
           </Typography>
         ) : (
           <></>

diff --git a/src/contexts/regions/index.tsx b/src/contexts/regions/index.tsx
@@ -4,12 +4,17 @@ import {
   useContract,
   useInkathon,
 } from '@scio-labs/use-inkathon';
-import { CoreMask, Region, RegionRecord } from 'coretime-utils';
+import { CoreMask, Region } from 'coretime-utils';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { parseHNString, parseHNStringToString } from '@/utils/functions';
 
-import { COREMASK_BYTES_LEN, RegionLocation, RegionMetadata, ScheduleItem } from '@/models';
+import {
+  COREMASK_BYTES_LEN,
+  RegionLocation,
+  RegionMetadata,
+  ScheduleItem,
+} from '@/models';
 
 import { useCoretimeApi, useRelayApi } from '../apis';
 import { CONTRACT_XC_REGIONS } from '../apis/consts';
@@ -75,7 +80,7 @@ const RegionDataProvider = ({ children }: Props) => {
   const fetchTasks = async () => {
     if (!coretimeApi || coretimeApiState !== ApiState.READY) return {};
     const workplan = await coretimeApi.query.broker.workplan.entries();
-    const tasks: Record<string, number> = {};
+    const tasks: Record<string, number | null> = {};
 
     for await (const [key, value] of workplan) {
       const [[begin, core]] = key.toHuman() as [[number, number]];
@@ -88,11 +93,16 @@ const RegionDataProvider = ({ children }: Props) => {
         } = record;
 
         const region = new Region(
-          { begin, core, mask: new CoreMask(mask) },
+          {
+            begin: parseHNString(begin.toString()),
+            core: parseHNString(core.toString()),
+            mask: new CoreMask(mask),
+          },
           { end: 0, owner: '', paid: null }
         );
-        tasks[region.getEncodedRegionId(contractsApi).toString()] =
-          parseHNString(taskId);
+        tasks[region.getEncodedRegionId(contractsApi).toString()] = taskId
+          ? parseHNString(taskId)
+          : null;
       });
     }
     return tasks;
@@ -138,8 +148,9 @@ const RegionDataProvider = ({ children }: Props) => {
         consumed = 0;
       }
 
-      const coretimeOwnership = region.getMask().countOnes() / (COREMASK_BYTES_LEN * 8);
-      const currentUsage = 0; // FIXME:
+      const coretimeOwnership =
+        region.getMask().countOnes() / (COREMASK_BYTES_LEN * 8);
+      const currentUsage = 0;
 
       _regions.push(
         new RegionMetadata(
@@ -198,13 +209,19 @@ const RegionDataProvider = ({ children }: Props) => {
     const brokerRegions: Array<Region> = brokerEntries
       .map(([key, value]) => {
         const keyTuple: any = key.toHuman();
-
-        // This is defensive.
-        if (keyTuple && Array.isArray(keyTuple) && keyTuple[0] !== undefined) {
-          const { begin, core, mask } = keyTuple[0];
-          const regionId = { begin, core, mask: new CoreMask(mask) };
-          return new Region(regionId, value.toHuman() as RegionRecord);
-        }
+        const { begin, core, mask } = keyTuple[0] as any;
+        const { end, owner, paid } = value.toHuman() as any;
+
+        const regionId = {
+          begin: parseHNString(begin.toString()),
+          core: parseHNString(core.toString()),
+          mask: new CoreMask(mask),
+        };
+        return new Region(regionId, {
+          end: parseHNString(end),
+          owner,
+          paid: paid ? parseHNString(paid) : null,
+        });
       })
       .filter((entry) => entry !== null) as Array<Region>;
 
@@ -285,12 +302,12 @@ const RegionDataProvider = ({ children }: Props) => {
         regions.push(
           new Region(
             {
-              begin: versionedRegion.region.begin,
-              core: versionedRegion.region.core,
+              begin: parseHNString(versionedRegion.region.begin),
+              core: parseHNString(versionedRegion.region.core),
               mask: new CoreMask(versionedRegion.region.mask),
             },
             {
-              end: versionedRegion.region.end,
+              end: parseHNString(versionedRegion.region.end),
               owner: activeAccount.address,
               paid: null,
             }

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -41,15 +41,15 @@ export default function MyApp(props: MyAppProps) {
     <CacheProvider value={emotionCache}>
       <Head>
         <meta name='viewport' content='initial-scale=1, width=device-width' />
-        <title>Coretime UI</title>
+        <title>CoreHub</title>
       </Head>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <ToastProvider>
           <CoretimeApiContextProvider>
             <RelayApiContextProvider>
               <UseInkathonProvider
-                appName='Coretime UI'
+                appName='CoreHub'
                 connectOnInit={false}
                 defaultChain={{
                   network: '',

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,9 +1,4 @@
-import {
-  Box,
-  Grid,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 
 import FeatureCard from '@/components/elements/FeatureCard';
 
@@ -31,23 +26,43 @@ const Home = () => {
           Home
         </Typography>
       </Box>
-      <Box marginTop="2em">
+      <Box marginTop='2em'>
         <Grid spacing={8} container>
           <Grid container item xs={6}>
-            <FeatureCard title={"Manage your regions"} image={Config} buttonText={"Region Dashboard"} href="/regions" />
+            <FeatureCard
+              title={'Manage your regions'}
+              image={Config}
+              buttonText={'Region Dashboard'}
+              href='/regions'
+            />
           </Grid>
-          <Grid container item xs={6} direction="column">
-            <FeatureCard title={"Track Blockspace Consumption"} image={Chart} buttonText={"Corespace Weigher"} href="https://www.polkadot-weigher.com/" />
+          <Grid container item xs={6} direction='column'>
+            <FeatureCard
+              title={'Track Blockspace Consumption'}
+              image={Chart}
+              buttonText={'Corespace Weigher'}
+              href='https://www.polkadot-weigher.com/'
+            />
           </Grid>
-          <Grid container item xs={6} direction="column">
-            <FeatureCard title={"Share a Polkadot Core"} image={Split} buttonText={"SOON"} href="/" />
+          <Grid container item xs={6} direction='column'>
+            <FeatureCard
+              title={'Share a Polkadot Core'}
+              image={Split}
+              buttonText={'SOON'}
+              href='/'
+            />
           </Grid>
-          <Grid container item xs={6} direction="column">
-            <FeatureCard title={"Trade Coretime"} image={Trade} buttonText={"Explore the market"} href="/" />
+          <Grid container item xs={6} direction='column'>
+            <FeatureCard
+              title={'Trade Coretime'}
+              image={Trade}
+              buttonText={'Explore the market'}
+              href='/'
+            />
           </Grid>
         </Grid>
       </Box>
-    </Box >
+    </Box>
   );
 };