Feat/2271 blacklisted banner

packages/storage-ui/src/Components/Elements/BlacklistedModeBanner.tsx

@@ -0,0 +1,48 @@
+import { Typography, Button } from "@chainsafe/common-components"
+import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import React from "react"
+import { CSSTheme } from "../../Themes/types"
+import { ROUTE_LINKS } from "../StorageRoutes"
+
+const useStyles = makeStyles(
+  ({ breakpoints, constants, palette }: CSSTheme) => {
+    return createStyles({
+      accountRestrictedNotification: {
+        position: "fixed",
+        bottom: 0,
+        backgroundColor: palette.additional["gray"][10],
+        color: palette.additional["gray"][1],
+        padding: `${constants.generalUnit * 2}px ${constants.generalUnit * 3}px`,
+        left: 0,
+        width: "100vw",
+        [breakpoints.up("md")]: {
+          left: `${constants.navWidth}px`,
+          width:`calc(100vw - ${constants.navWidth}px)`,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      }
+    })
+  }
+)
+
+const BlacklistedModeBanner = () => {
+  const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
+
+  return (
+    <div className={classes.accountRestrictedNotification}>
+      <Typography variant={desktop ? "body1" : "body2"}>
+        <Trans>Your account has been blacklisted due to unusual activity</Trans>
+      </Typography>
+      <Button
+        onClick={() => window.open(ROUTE_LINKS.DiscordInvite, "_blank")}
+        fullsize={!desktop}>
+        <Trans>Discord support</Trans>
+      </Button>
+    </div>)
+}
+
+export default BlacklistedModeBanner

packages/storage-ui/src/Components/Elements/BucketRow.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from "react"
-import { makeStyles, createStyles, useOnClickOutside } from "@chainsafe/common-theme"
+import { makeStyles, createStyles, useOnClickOutside, useThemeSwitcher } from "@chainsafe/common-theme"
 import {
+  CopyIcon,
   DeleteSvg,
   EditSvg,
   formatBytes,
@@ -12,7 +13,8 @@ import {
   TableCell,
   TableRow,
   Typography,
-  useHistory
+  useHistory,
+  useToasts
 } from "@chainsafe/common-components"
 import { t, Trans } from "@lingui/macro"
 import { Bucket } from "@chainsafe/files-api-client"
@@ -23,7 +25,7 @@ import clsx from "clsx"
 import { Form, FormikProvider, useFormik } from "formik"
 import { nameValidator } from "../../Utils/validationSchema"
 
-const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =>
+const useStyles = makeStyles(({ palette, animation, constants, breakpoints }: CSSTheme) =>
   createStyles({
     dropdownIcon: {
       "& svg": {
@@ -93,6 +95,15 @@ const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =
       [breakpoints.down("md")]: {
         margin: `${constants.generalUnit * 4.2}px 0`
       }
+    },
+    idRow: {
+      display: "flex",
+      alignItems: "center"
+    },
+    copyIcon: {
+      fontSize: "16px",
+      fill: palette.additional["gray"][8],
+      marginLeft: "8px"
     }
   })
 )
@@ -106,6 +117,9 @@ interface Props {
 const BucketRow = ({ bucket, onRemoveBucket, handleContextMenu, handleRename }: Props) => {
   const classes = useStyles()
   const { redirect } = useHistory()
+  const { addToast } = useToasts()
+  const { desktop } = useThemeSwitcher()
+
   const menuItems = useMemo(() => [
     {
       contents: (
@@ -168,6 +182,14 @@ const BucketRow = ({ bucket, onRemoveBucket, handleContextMenu, handleRename }:
 
   useOnClickOutside(formRef, formik.submitForm)
 
+  const onCopyBucketId = () => {
+    navigator.clipboard.writeText(bucket.id)
+    addToast({
+      title: t`Bucket Id copied`,
+      type: "success"
+    })
+  }
+
   return (
     <TableRow
       type="grid"
@@ -217,6 +239,19 @@ const BucketRow = ({ bucket, onRemoveBucket, handleContextMenu, handleRename }:
           )
         }
       </TableCell>
+      {desktop &&
+        <TableCell
+          data-cy="cell-file-system-id"
+          align="left"
+          className={classes.idRow}
+        >
+          {bucket.id }
+          <CopyIcon
+            className={classes.copyIcon}
+            onClick={onCopyBucketId}
+          />
+        </TableCell>
+      }
       <TableCell
         data-cy="cell-file-system-type"
       >

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

@@ -18,7 +18,6 @@ import {
   useLocation,
   KeySvg,
   CreditCardOutlinedSvg
-  // FileWithImageSvg
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"

packages/storage-ui/src/Components/Layouts/AppWrapper.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { ReactNode } from "react"
 import clsx from "clsx"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
-import { CssBaseline } from "@chainsafe/common-components"
+import {  CssBaseline } from "@chainsafe/common-components"
 import AppHeader from "./AppHeader"
 import AppNav from "./AppNav"
 

packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx

@@ -44,6 +44,7 @@ import { ISelectedFile, useFileBrowser } from "../../../Contexts/FileBrowserCont
 import SurveyBanner from "../SurveyBanner"
 import { useStorageApi } from "../../../Contexts/StorageApiContext"
 import RestrictedModeBanner from "../../Elements/RestrictedModeBanner"
+import BlacklistedModeBanner from "../../Elements/BlacklistedModeBanner"
 import { DragPreviewLayer } from "./DragPreviewLayer"
 import FolderBreadcrumb from "./FolderBreadcrumb"
 import { DragTypes } from "./DragConstants"
@@ -326,7 +327,7 @@ const sortFoldersFirst = (a: FileSystemItemType, b: FileSystemItemType) =>
 
 const FilesList = () => {
   const { themeKey, desktop } = useThemeSwitcher()
-  const { accountRestricted } = useStorageApi()
+  const { accountRestricted, accountBlacklisted } = useStorageApi()
   const {
     heading,
     controls = true,
@@ -1212,9 +1213,8 @@ const FilesList = () => {
           </>
         )
       }
-      {accountRestricted &&
-        <RestrictedModeBanner />
-      }
+      {accountRestricted && <RestrictedModeBanner />}
+      {accountBlacklisted && <BlacklistedModeBanner />}
     </>
   )
 }

packages/storage-ui/src/Components/Pages/BucketsPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react"
-import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import {
   Button,
   Dialog,
@@ -30,9 +30,10 @@ import { usePageTrack } from "../../Contexts/PosthogContext"
 import { Bucket, FileSystemType } from "@chainsafe/files-api-client"
 import { Helmet } from "react-helmet-async"
 import AnchorMenu, { AnchorMenuPosition } from "../UI-components/AnchorMenu"
+import BlacklistedModeBanner from "../Elements/BlacklistedModeBanner"
 
-export const desktopGridSettings = "3fr 150px 150px 70px !important"
-export const mobileGridSettings = "3fr 100px 100px 70px !important"
+export const desktopGridSettings = "2fr 5fr 150px 150px 50px !important"
+export const mobileGridSettings = "1fr 150px 110px 50px !important"
 
 const useStyles = makeStyles(({ breakpoints, animation, constants, typography }: CSSTheme) =>
   createStyles({
@@ -127,7 +128,7 @@ type SortDirection = "ascend" | "descend"
 const BucketsPage = () => {
   const classes = useStyles()
   const { storageBuckets, createBucket, refreshBuckets, removeBucket, editBucket } = useStorage()
-  const { accountRestricted } = useStorageApi()
+  const { accountRestricted, accountBlacklisted } = useStorageApi()
   const [isCreateBucketModalOpen, setIsCreateBucketModalOpen] = useState(false)
   const [bucketToRemove, setBucketToRemove] = useState<Bucket | undefined>()
   const [isRemovingBucket, setIsRemovingBucket] = useState(false)
@@ -136,6 +137,8 @@ const BucketsPage = () => {
   const [sortColumn, setSortColumn] = useState<SortColumn | undefined>(undefined)
   const [sortDirection, setSortDirection] = useState<SortDirection>("descend")
 
+  const { desktop } = useThemeSwitcher()
+
   const generalContextMenuOptions: IMenuItem[] = useMemo(() => [
     {
       contents: (
@@ -317,6 +320,14 @@ const BucketsPage = () => {
             >
               <Trans>Name</Trans>
             </TableHeadCell>
+            {desktop &&
+              <TableHeadCell
+                data-cy="buckets-table-header-id"
+                align="left"
+              >
+                <Trans>Bucket Id</Trans>
+              </TableHeadCell>
+            }
             <TableHeadCell
               data-cy="buckets-table-header-file-system"
               align="center"
@@ -353,9 +364,8 @@ const BucketsPage = () => {
             )}
         </TableBody>
       </Table>
-      {accountRestricted &&
-        <RestrictedModeBanner />
-      }
+      {accountRestricted && <RestrictedModeBanner />}
+      {accountBlacklisted && <BlacklistedModeBanner />}
       <CustomModal
         active={isCreateBucketModalOpen}
         className={classes.createBucketModal}

packages/storage-ui/src/Components/Pages/CidsPage.tsx

@@ -23,6 +23,7 @@ import { useStorageApi } from "../../Contexts/StorageApiContext"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import { Helmet } from "react-helmet-async"
 import { cid as isCid } from "is-ipfs"
+import BlacklistedModeBanner from "../Elements/BlacklistedModeBanner"
 
 export const desktopGridSettings = "2fr 3fr 180px 110px 80px 20px 70px !important"
 export const mobileGridSettings = "2fr 4fr 50px !important"
@@ -100,7 +101,7 @@ const CidsPage = () => {
     isLoadingPins,
     resetPins
   } = useStorage()
-  const { accountRestricted } = useStorageApi()
+  const { accountRestricted, accountBlacklisted } = useStorageApi()
   const [addCIDOpen, setAddCIDOpen] = useState(false)
   const [sortColumn, setSortColumn] = useState<SortColumn>("date_uploaded")
   const [sortDirection, setSortDirection] = useState<SortDirection>("descend")
@@ -294,9 +295,8 @@ const CidsPage = () => {
         close={() => setAddCIDOpen(false)}
         modalOpen={addCIDOpen}
       />
-      {accountRestricted &&
-        <RestrictedModeBanner />
-      }
+      {accountRestricted && <RestrictedModeBanner />}
+      {accountBlacklisted && <BlacklistedModeBanner />}
     </>
   )
 }