From aca477e603e5165f955448d316f9416b7e49204f Mon Sep 17 00:00:00 2001 From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com> Date: Mon, 22 Jan 2024 09:51:46 +0100 Subject: [PATCH] Cleanup & fixes (#37) * Cleanup & fixes * fix linting errors & add banner * final touches --- src/components/Banner/index.tsx | 40 ++++++++++++++ src/components/Header/index.tsx | 25 +++++---- src/components/Layout/index.tsx | 5 ++ src/components/Modals/Interlace/index.tsx | 11 ++-- src/components/Sidebar/index.tsx | 5 +- src/components/elements/FeatureCard/index.tsx | 19 ++++--- src/components/elements/RegionCard/index.tsx | 6 +-- src/contexts/regions/index.tsx | 53 ++++++++++++------- src/pages/_app.tsx | 4 +- src/pages/index.tsx | 45 ++++++++++------ 10 files changed, 150 insertions(+), 63 deletions(-) create mode 100644 src/components/Banner/index.tsx diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx new file mode 100644 index 00000000..1764d2ff --- /dev/null +++ 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 ( + + + + } + > + {content} + + ); +}; + +export default Banner; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index a1150f90..cd2dde75 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -53,17 +53,20 @@ export const Header = () => { - {accounts?.map((account, index) => ( - { - setActiveAccount && setActiveAccount(account); - openAccounts(false); - }} - > - {account.name} - - ))} + {accounts?.map( + (account, index) => + account.type == 'sr25519' && ( + { + setActiveAccount && setActiveAccount(account); + openAccounts(false); + }} + > + {account.name} + + ) + )} diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 6e96c5e8..6e610bd3 100644 --- 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 (
+
diff --git a/src/components/Modals/Interlace/index.tsx b/src/components/Modals/Interlace/index.tsx index 0758c535..c91d3ab2 100644 --- 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 index 4daf4b7f..f51724e5 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -25,8 +25,9 @@ const MenuItem = ({ label, route, icon }: MenuItemProps) => { return ( route && push(route)} > {{ diff --git a/src/components/elements/FeatureCard/index.tsx b/src/components/elements/FeatureCard/index.tsx index 017ab9a4..cba08c9e 100644 --- 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 ( - + - + {title} - - diff --git a/src/components/elements/RegionCard/index.tsx b/src/components/elements/RegionCard/index.tsx index a238efb8..65246308 100644 --- 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 = ({ {taskId !== null ? ( - {`Task: ${getTaskName(taskId)}`} + {`Task: ${taskId ? getTaskName(taskId) : 'Unassigned'}`} ) : ( <> diff --git a/src/contexts/regions/index.tsx b/src/contexts/regions/index.tsx index 725c435a..57796d9f 100644 --- 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 = {}; + const tasks: Record = {}; 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 = 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; @@ -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 index 4dcf8f7b..4bdeebe5 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -41,7 +41,7 @@ export default function MyApp(props: MyAppProps) { - Coretime UI + CoreHub @@ -49,7 +49,7 @@ export default function MyApp(props: MyAppProps) { { Home - + - + - - + + - - + + - - + + - + ); };