Gaming dashboard - API keys as cards

packages/common-components/src/index.ts

@@ -20,6 +20,7 @@ export * from "./Icons"
 export * from "./Modal"
 export * from "./NumberInput"
 export * from "./MenuDropdown"
+export * from "./Paper"
 export * from "./ProgressBar"
 export * from "./RadioInput"
 export * from "./Router"

packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+import { AccessKey } from "@chainsafe/files-api-client"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { CSGTheme } from "../../Themes/types"
+import { Button, Typography, Paper } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
+import dayjs from "dayjs"
+
+
+const useStyles = makeStyles(({ constants }: CSGTheme) =>
+  createStyles({
+    root: {
+      position: "relative",
+      margin: constants.generalUnit,
+      borderRadius: constants.generalUnit / 2,
+      maxWidth: 250,
+      padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px`
+    },
+    button: {
+      marginTop: constants.generalUnit * 2
+    }
+  })
+)
+
+interface IApiKeyCard {
+  apiKey: AccessKey
+  deleteKey: () => void
+}
+
+const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => {
+  const classes = useStyles()
+
+  return (
+    <Paper className={classes.root}>
+      <Typography variant="h4"
+        component="h4">
+        <Trans>
+          Id:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p"
+      >
+        { apiKey.id }
+      </Typography>
+      <Typography variant="h4"
+        component="h4">
+        <Trans>
+          Status:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p">
+        { apiKey.status }
+      </Typography>
+      <Typography
+        variant="h4"
+        component="h4"
+      >
+        <Trans>
+          Created on:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p"
+      >
+        { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") }
+      </Typography>
+      <Button
+        className={classes.button}
+        variant="secondary"
+        fullsize={true}
+        onClick={deleteKey}
+      >
+        <Trans>
+          Delete key
+        </Trans>
+      </Button>
+    </Paper>
+  )
+}
+
+export default ApiKeyCard

packages/gaming-ui/src/Components/GamingRoutes.tsx

@@ -31,7 +31,9 @@ const GamingRoutes = () => {
       />
       <ConditionalRoute
         path={ROUTE_LINKS.SettingsRoot}
-        isAuthorized={isLoggedIn}
+        isAuthorized={false}
+        // Settings not required yet
+        // isAuthorized={isLoggedIn}
         component={SettingsPage}
         redirectPath={ROUTE_LINKS.Landing}
       />

packages/gaming-ui/src/Components/Layouts/AppNav.tsx

@@ -9,10 +9,7 @@ import {
   Link,
   Typography,
   PowerDownSvg,
-  // ProgressBar,
-  // formatBytes,
-  ChainsafeLogo,
-  SettingSvg
+  ChainsafeLogo
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../GamingRoutes"
 import { Trans } from "@lingui/macro"
@@ -240,39 +237,9 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
           )}
           <div className={classes.linksArea}>
             <nav className={classes.navMenu}>
-              <Link
-                data-cy="settings-nav"
-                onClick={handleOnClick}
-                className={classes.navItem}
-                to={ROUTE_LINKS.SettingsRoot}
-              >
-                <SettingSvg />
-                <Typography
-                  variant="h5"
-                  className={classes.navItemText}
-                >
-                  <Trans>Settings</Trans>
-                </Typography>
-              </Link>
             </nav>
           </div>
           <section>
-            {desktop && (
-              <div>
-                {/* <Typography
-                  variant="body2"
-                  className={classes.spaceUsedMargin}
-                  component="p"
-                >{`${formatBytes(spaceUsed, 2)} of ${formatBytes(
-                    FREE_PLAN_LIMIT, 2
-                  )} used`}</Typography>
-                <ProgressBar
-                  className={classes.spaceUsedMargin}
-                  progress={(spaceUsed / FREE_PLAN_LIMIT) * 100}
-                  size="small"
-                /> */}
-              </div>
-            )}
             {!desktop && (
               <div
                 className={classes.navItem}