Import CID

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": "2.0.0",
+    "@chainsafe/files-api-client": "^2.1.0-rc3",
     "@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": "^2.1.0-rc-1",
+    "@chainsafe/files-api-client": "^2.1.0-rc3",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -20,6 +20,7 @@
     "babel-plugin-macros": "^2.8.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
+    "cids": "^1.1.6",
     "bnc-onboard": "1.27.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.9.7",

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

@@ -3,12 +3,12 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { DeleteSvg, formatBytes, MenuDropdown, MoreIcon, TableCell, TableRow  } from "@chainsafe/common-components"
 import { Trans } from "@lingui/macro"
 import dayjs from "dayjs"
-import { PinObject } from "@chainsafe/files-api-client"
-import { CSFTheme } from "../../Themes/types"
+import { PinStatus } from "@chainsafe/files-api-client"
+import { CSSTheme } from "../../Themes/types"
 import { useStorage } from "../../Contexts/StorageContext"
 import { desktopGridSettings, mobileGridSettings } from "../Pages/CidsPage"
 
-const useStyles = makeStyles(({ animation, constants, breakpoints }: CSFTheme) =>
+const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =>
   createStyles({
     dropdownIcon: {
       "& svg": {
@@ -55,34 +55,35 @@ const useStyles = makeStyles(({ animation, constants, breakpoints }: CSFTheme) =
   })
 )
 interface Props {
-    pinObject: PinObject
+    pinStatus: PinStatus
 }
 
 const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/"
 
-const CidRow = ({ pinObject }: Props) => {
+const CidRow = ({ pinStatus }: Props) => {
   const classes = useStyles()
   const { unpin } = useStorage()
 
-  console.log("pinObject", pinObject)
   return (
     <TableRow
       type="grid"
       className={classes.tableRow}
     >
       <TableCell className={classes.cid}>
-        {pinObject.pin?.cid}
+        {pinStatus.pin?.cid}
       </TableCell>
       <TableCell>
-        {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")}
+        {dayjs(pinStatus.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)}
+        {pinStatus.info?.size ? formatBytes(pinStatus.info?.size) : "-"}
+      </TableCell>
+      <TableCell>
+        {pinStatus.status}
       </TableCell>
       <TableCell>
         <a
-          href={`${IPFS_GATEWAY}${pinObject.pin?.cid}`}
+          href={`${IPFS_GATEWAY}${pinStatus.pin?.cid}`}
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -103,8 +104,7 @@ const CidRow = ({ pinObject }: Props) => {
                 </span>
               </>
             ),
-            // todo remove when specs are updated
-            onClick: () => unpin((pinObject as any).requestid)
+            onClick: () => unpin(pinStatus.requestid)
           }]}
           classNames={{
             icon: classes.dropdownIcon,

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

@@ -2,9 +2,9 @@ import { IModalProps, Modal } from "@chainsafe/common-components"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import React, { ReactNode } from "react"
 import clsx from "clsx"
-import { CSFTheme } from "../../Themes/types"
+import { CSSTheme } from "../../Themes/types"
 
-const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
+const useStyles = makeStyles(({ constants, breakpoints }: CSSTheme) =>
   createStyles({
     root: {
       "&:before": {

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

@@ -3,7 +3,7 @@ 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"
+import { PinStatus } from "@chainsafe/files-api-client"
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -12,12 +12,12 @@ const useStyles = makeStyles(() =>
   })
 )
 interface Props {
-    pinObject: PinObject
+    pinStatus: PinStatus
 }
 
 const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/"
 
-const PinRow = ({ pinObject }: Props) => {
+const PinRow = ({ pinStatus }: Props) => {
   const classes = useStyles()
 
   return (
@@ -26,18 +26,17 @@ const PinRow = ({ pinObject }: Props) => {
       className={classes.root}
     >
       <TableCell>
-        {pinObject.pin?.cid}
+        {pinStatus.pin?.cid}
       </TableCell>
       <TableCell>
-        {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")}
+        {dayjs(pinStatus.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)}
+        {formatBytes(pinStatus.info?.size)}
       </TableCell>
       <TableCell>
         <a
-          href={`${IPFS_GATEWAY}${pinObject.pin?.cid}`}
+          href={`${IPFS_GATEWAY}${pinStatus.pin?.cid}`}
           target="_blank"
           rel="noopener noreferrer"
         >

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

@@ -12,11 +12,11 @@ import {
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
-import { CSFTheme } from "../../Themes/types"
+import { CSSTheme } from "../../Themes/types"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
 
 const useStyles = makeStyles(
-  ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
+  ({ palette, animation, breakpoints, constants, zIndex }: CSSTheme) => {
     return createStyles({
       root: {
         position: "fixed",

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

@@ -18,12 +18,12 @@ import {
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
 import { Trans } from "@lingui/macro"
-import { CSFTheme } from "../../Themes/types"
+import { CSSTheme } from "../../Themes/types"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
 import { useStorage } from "../../Contexts/StorageContext"
 
 const useStyles = makeStyles(
-  ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
+  ({ palette, animation, breakpoints, constants, zIndex }: CSSTheme) => {
     return createStyles({
       root: {
         width: 0,

packages/storage-ui/src/Components/Modules/LoginModule/InitialScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { Button, FacebookLogoIcon, GithubLogoIcon, GoogleLogoIcon, Typography } from "@chainsafe/common-components"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
-import { CSFTheme } from "../../../Themes/types"
+import { CSSTheme } from "../../../Themes/types"
 import { t, Trans } from "@lingui/macro"
 import { useStorageApi } from "../../../Contexts/StorageApiContext"
 import { useWeb3 } from "@chainsafe/web3-context"
@@ -10,7 +10,7 @@ import clsx from "clsx"
 import { IdentityProvider } from "@chainsafe/files-api-client"
 
 const useStyles = makeStyles(
-  ({ constants, palette, breakpoints, typography }: CSFTheme) =>
+  ({ constants, palette, breakpoints, typography }: CSSTheme) =>
     createStyles({
       root: {
         backgroundColor: constants.loginModule.background,

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

@@ -0,0 +1,177 @@
+import React, { useCallback, useMemo, useRef, useState } from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { Button, FormikTextInput, Grid } from "@chainsafe/common-components"
+import CustomModal from "../Elements/CustomModal"
+import { CSSTheme } from "../../Themes/types"
+import CustomButton from "../Elements/CustomButton"
+import { t, Trans } from "@lingui/macro"
+import * as yup from "yup"
+import { Formik, Form } from "formik"
+import CID, { isCID  } from "cids"
+import { useStorage } from "../../Contexts/StorageContext"
+
+const useStyles = makeStyles(({ constants, breakpoints, zIndex }: CSSTheme) =>
+  createStyles({
+    root: {
+      padding: constants.generalUnit * 4,
+      flexDirection: "column"
+    },
+    modalRoot: {
+      zIndex: zIndex?.blocker,
+      [breakpoints.down("md")]: {}
+    },
+    modalInner: {
+      backgroundColor: constants.createFolder.backgroundColor,
+      color: constants.createFolder.color,
+      [breakpoints.down("md")]: {
+        bottom:
+        Number(constants?.mobileButtonHeight) + constants.generalUnit,
+        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
+        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
+        maxWidth: `${breakpoints.width("md")}px !important`
+      }
+    },
+    input: {
+      marginBottom: constants.generalUnit * 2
+    },
+    okButton: {
+      marginLeft: constants.generalUnit
+    },
+    cancelButton: {
+      [breakpoints.down("md")]: {
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: constants?.mobileButtonHeight
+      }
+    },
+    label: {
+      fontSize: 14,
+      lineHeight: "22px"
+    },
+    heading: {
+      color: constants.createFolder.color,
+      marginBottom: constants.generalUnit
+    }
+  })
+)
+
+interface IAddCIDModuleProps {
+  modalOpen: boolean
+  close: () => void
+}
+
+const AddCIDModule = ({ modalOpen = false, close }: IAddCIDModuleProps) => {
+  const classes = useStyles()
+  const { addPin, refreshPins } = useStorage()
+
+  const cidValidator = useMemo(() =>  yup.object().shape({
+    cid: yup
+      .string()
+      .required(t`CID is required`)
+      .test(
+        "IsValidCID",
+        t`CID invalid`,
+        value => {
+          try {
+            return isCID(new CID(`${value}`))
+          }
+          catch (error) {
+            console.error(error)
+            return false
+          }
+        }
+      )
+  })
+  , [])
+
+  const inputRef = useRef<any>(null)
+  const [accessingCID, setAccessingCID] = useState(false)
+
+  const onSubmit = useCallback((values, helpers) => {
+    helpers.setSubmitting(true)
+    setAccessingCID(true)
+    addPin(values.cid)
+      .then(() => {
+        helpers.resetForm()
+        close()
+      })
+      .catch((e) => {
+        helpers.setFieldError("cid", e.message)
+        console.error(e)
+      })
+      .finally(() => {
+        refreshPins()
+        setAccessingCID(false)
+        helpers.setSubmitting(false)
+      })
+  }, [addPin, close, refreshPins])
+
+  return (
+    <CustomModal
+      className={classes.modalRoot}
+      injectedClass={{
+        inner: classes.modalInner
+      }}
+      active={modalOpen}
+      closePosition="none"
+      maxWidth="sm"
+    >
+      <Formik
+        initialValues={{
+          cid: ""
+        }}
+        validationSchema={cidValidator}
+        validateOnChange={false}
+        onSubmit={onSubmit}
+      >
+        <Form>
+          <div className={classes.root}>
+            <Grid
+              item
+              xs={12}
+              sm={12}
+              className={classes.input}
+            >
+              <FormikTextInput
+                name="cid"
+                size="large"
+                placeholder="QmNbbf...dps2Xw"
+                labelClassName={classes.label}
+                label={t`Paste the CID to pin it with ChainSafe Storage`}
+                ref={inputRef}
+              />
+            </Grid>
+            <Grid
+              item
+              flexDirection="row"
+              justifyContent="flex-end"
+            >
+              <CustomButton
+                onClick={() => close()}
+                size="medium"
+                className={classes.cancelButton}
+                variant={"outline"}
+                type="button"
+              >
+                <Trans>Cancel</Trans>
+              </CustomButton>
+              <Button
+                size={"medium"}
+                variant="primary"
+                type="submit"
+                className={classes.okButton}
+                loading={accessingCID}
+              >
+                <Trans>Pin</Trans>
+              </Button>
+            </Grid>
+          </div>
+        </Form>
+      </Formik>
+    </CustomModal>
+  )
+}
+
+export default AddCIDModule