Cids overview

packages/files-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.14.6",
+    "@chainsafe/files-api-client": "1.15.0-rc1",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

packages/storage-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.14.4-rc1",
+    "@chainsafe/files-api-client": "1.15.0-rc1",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

packages/storage-ui/src/App.tsx

@@ -26,8 +26,7 @@ if (
 }
 
 const availableLanguages = [
-  { id: "en", label: "English" },
-  { id: "fr", label: "Français" }
+  { id: "en", label: "English" }
 ]
 
 const onboardConfig = {
@@ -55,7 +54,7 @@ const onboardConfig = {
   }
 }
 
-const App: React.FC<{}> = () => {
+const App = () => {
   const { initHotjar } = useHotjar()
   const { canUseLocalStorage } = useLocalStorage()
   const hotjarId = process.env.REACT_APP_HOTJAR_ID

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

@@ -0,0 +1,54 @@
+import React from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { formatBytes, TableCell, TableRow  } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
+import dayjs from "dayjs"
+import { PinObject } from "@chainsafe/files-api-client"
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+    }
+  })
+)
+interface Props {
+    pinObject: PinObject
+}
+
+const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/"
+
+const PinRow = ({ pinObject }: Props) => {
+  const classes = useStyles()
+
+  return (
+    <TableRow
+      type="grid"
+      className={classes.root}
+    >
+      <TableCell>
+        {pinObject.pin?.cid}
+      </TableCell>
+      <TableCell>
+        {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")}
+      </TableCell>
+      <TableCell>
+        {/** as any needs to be removed when the api spec will be up to date */}
+        {formatBytes((pinObject as any).info.size)}
+      </TableCell>
+      <TableCell>
+        <a
+          href={`${IPFS_GATEWAY}${pinObject.pin?.cid}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Trans>Open on Gateway</Trans>
+        </a>
+      </TableCell>
+      <TableCell>
+
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export default PinRow

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

@@ -4,7 +4,7 @@ import clsx from "clsx"
 import {
   Link,
   Typography,
-  ChainsafeFilesLogo,
+  ChainsafeLogo,
   HamburgerMenu,
   MenuDropdown,
   PowerDownSvg,
@@ -205,9 +205,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               />
               <Link
                 className={classes.logo}
-                to={ROUTE_LINKS.Pins}
+                to={ROUTE_LINKS.Cids}
               >
-                <ChainsafeFilesLogo />
+                <ChainsafeLogo />
                 <Typography
                   variant="h5"
                   className={classes.title}

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

@@ -8,12 +8,13 @@ import clsx from "clsx"
 import {
   Link,
   Typography,
-  ChainsafeFilesLogo,
   DatabaseSvg,
   PowerDownSvg,
   ProgressBar,
   formatBytes,
-  DeleteSvg } from "@chainsafe/common-components"
+  ChainsafeLogo,
+  FolderSvg
+} from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
 import { Trans } from "@lingui/macro"
@@ -130,10 +131,6 @@ const useStyles = makeStyles(
           "&.active": {}
         }
       },
-      navHead: {
-        fontWeight: 600,
-        color: constants.nav.headingColor
-      },
       navItem: {
         textDecoration: "none",
         display: "flex",
@@ -238,59 +235,46 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
             <div>
               <Link
                 className={classes.logo}
-                to={ROUTE_LINKS.Pins}
+                to={ROUTE_LINKS.Cids}
               >
-                <ChainsafeFilesLogo />
-                <Typography variant="h5">
-                  Files
-                </Typography>
-                &nbsp;
-                <Typography
-                  variant="caption"
-                  className={classes.betaCaption}
-                >
-                  beta
+                <ChainsafeLogo />
+                <Typography variant="body1">
+                  ChainSafe Storage
                 </Typography>
               </Link>
             </div>
           )}
           <div className={classes.linksArea}>
-            <Typography className={classes.navHead}>
-              <Trans>Folders</Trans>
-            </Typography>
             <nav className={classes.navMenu}>
               <Link
                 onClick={() => {
                   handleOnClick()
                 }}
                 className={classes.navItem}
-                to={ROUTE_LINKS.Pins}
+                to={ROUTE_LINKS.Cids}
               >
                 <DatabaseSvg />
                 <Typography
                   variant="h5"
                   className={classes.navItemText}
                 >
-                  <Trans>Home</Trans>
+                  <Trans>Cids</Trans>
                 </Typography>
               </Link>
               <Link
                 onClick={handleOnClick}
                 className={classes.navItem}
-                to={ROUTE_LINKS.Pins}
+                to={ROUTE_LINKS.Buckets}
               >
-                <DeleteSvg />
+                <FolderSvg />
                 <Typography
                   variant="h5"
                   className={classes.navItemText}
                 >
-                  <Trans>Bin</Trans>
+                  <Trans>Buckets</Trans>
                 </Typography>
               </Link>
             </nav>
-            <Typography className={classes.navHead}>
-              {desktop ? <Trans>Resources</Trans> : <Trans>Account</Trans>}
-            </Typography>
             <nav className={classes.navMenu}>
 
             </nav>

packages/storage-ui/src/Components/Pages/PinsPage.tsx → packages/storage-ui/src/Components/Pages/Buckets.tsx

@@ -8,18 +8,21 @@ const useStyles = makeStyles(() =>
       position: "relative",
       minHeight: "100vh",
       overflow: "hidden"
+    },
+    tableHead: {
+      marginTop: 24
     }
   })
 )
 
-const PinsPage = () => {
+const BucketsPage = () => {
   const classes = useStyles()
 
   return (
     <div className={classes.root}>
-      <Typography variant='h1'>Pins</Typography>
+      <Typography variant='h1'>Buckets</Typography>
     </div>
   )
 }
 
-export default PinsPage
+export default BucketsPage

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

@@ -0,0 +1,79 @@
+import React, { useCallback } from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components"
+import { useStorage } from "../../Contexts/StorageContext"
+import { Trans } from "@lingui/macro"
+import PinRow from "../Elements/PinRow"
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      position: "relative",
+      minHeight: "100vh",
+      overflow: "hidden"
+    },
+    tableHead: {
+      marginTop: 24
+    }
+  })
+)
+
+const CidsPage = () => {
+  const classes = useStyles()
+  const { pins, addPin } = useStorage()
+
+  const onCreateHardcodedPin = useCallback(() => {
+    addPin("QmNbbff884cwp1pvH8muod4pNaUqHA2ph77nYXP7dps2Xw")
+  }, [addPin])
+
+  return (
+    <div className={classes.root}>
+      <Typography variant='h1'>Cids</Typography>
+      <button onClick={onCreateHardcodedPin}>create pin with hardcoded cid</button>
+      <Table
+        fullWidth={true}
+        striped={true}
+        hover={true}
+        className=""
+      >
+        <TableHead className={classes.tableHead}>
+          <TableRow
+            type="grid"
+            className=""
+          >
+            <TableHeadCell
+              sortButtons={false}
+              align="center"
+            >
+              <Trans>Cid</Trans>
+            </TableHeadCell>
+            <TableHeadCell
+              sortButtons={false}
+              align="center"
+            >
+              <Trans>Created</Trans>
+            </TableHeadCell>
+            <TableHeadCell
+              sortButtons={false}
+              align="center"
+            >
+              <Trans>Size</Trans>
+            </TableHeadCell>
+            <TableHeadCell>{/* IPFS Gateway */}</TableHeadCell>
+            <TableHeadCell>{/* Menu */}</TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {pins.map((pinObject, index) =>
+            <PinRow
+              pinObject={pinObject}
+              key={index}
+            />
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export default CidsPage

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

@@ -2,7 +2,7 @@ import React from "react"
 import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../Themes/types"
 import InitialScreen from "../Modules/LoginModule/InitialScreen"
-import { ChainsafeFilesLogo, ChainsafeLogo, Typography } from "@chainsafe/common-components"
+import { ChainsafeLogo, Typography } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
 import BottomDarkSVG from "../../Media/landing/layers/dark/Bottom.dark.svg"
@@ -127,7 +127,7 @@ const LoginPage = () => {
   return (
     <div className={classes.root}>
       <Typography className={classes.title}>
-        <ChainsafeFilesLogo className={classes.filesLogo} />
+        <ChainsafeLogo className={classes.filesLogo} />
         ChainSafe Storage
       </Typography>
       <>

packages/storage-ui/src/Components/StorageRoutes.tsx

@@ -2,11 +2,13 @@ import React from "react"
 import { Switch, ConditionalRoute } from "@chainsafe/common-components"
 import LoginPage from "./Pages/LoginPage"
 import { useStorageApi }  from "../Contexts/StorageApiContext"
-import PinsPage from "./Pages/PinsPage"
+import CidsPage from "./Pages/CidsPage"
+import BucketsPage from "./Pages/Buckets"
 
 export const ROUTE_LINKS = {
   Landing: "/",
-  Pins: "/pins",
+  Cids: "/cids",
+  Buckets: "/buckets",
   PrivacyPolicy: "https://files.chainsafe.io/privacy-policy",
   Terms: "https://files.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/"
@@ -22,16 +24,23 @@ const FilesRoutes = () => {
     <Switch>
       <ConditionalRoute
         exact
-        path={ROUTE_LINKS.Pins}
+        path={ROUTE_LINKS.Cids}
         isAuthorized={isLoggedIn}
-        component={PinsPage}
+        component={CidsPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
+      <ConditionalRoute
+        exact
+        path={ROUTE_LINKS.Buckets}
+        isAuthorized={isLoggedIn}
+        component={BucketsPage}
+        redirectPath={ROUTE_LINKS.Buckets}
+      />
       <ConditionalRoute
         path={ROUTE_LINKS.Landing}
         isAuthorized={!isLoggedIn}
         component={LoginPage}
-        redirectPath={ROUTE_LINKS.Pins}
+        redirectPath={ROUTE_LINKS.Cids}
         redirectToSource
       />
     </Switch>