Merge branch 'dev' into feat/remove-yourself-from-share-1303

packages/files-ui/cypress/tests/main-navigation-spec.ts

@@ -19,10 +19,10 @@ describe("Main Navigation", () => {
       cy.url().should("include", "/settings")
     })
 
-    it("can see data storage summary info", () => {
-      navigationMenu.spaceUsedLabel().should("contain.text", "of 20 GB used")
-      navigationMenu.spaceUsedProgressBar().should("be.visible")
-    })
+    // it("can see data storage summary info", () => {
+    //   navigationMenu.spaceUsedLabel().should("contain.text", "of 20 GB used")
+    //   navigationMenu.spaceUsedProgressBar().should("be.visible")
+    // })
 
     it.skip("can navigate to block survey via send feedback button", () => {
       // TODO: Andrew - find a way to check the button link, cypress doesn't support tabs #1084

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.17.5",
+    "@chainsafe/files-api-client": "1.17.7",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

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

@@ -19,7 +19,6 @@ import {
   DeleteSvg,
   UserShareSvg } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
-import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
 import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
@@ -216,7 +215,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
 
-  const { spaceUsed } = useFiles()
+  const { storageSummary } = useFiles()
 
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
@@ -350,19 +349,25 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               <div
                 data-cy="label-space-used"
               >
-                <Typography
-                  variant="body2"
-                  className={classes.spaceUsedMargin}
-                  component="p"
-                >{`${formatBytes(spaceUsed)} of ${formatBytes(
-                    FREE_PLAN_LIMIT
-                  )} used`}</Typography>
-                <ProgressBar
-                  data-cy="progress-bar-space-used"
-                  className={classes.spaceUsedMargin}
-                  progress={(spaceUsed / FREE_PLAN_LIMIT) * 100}
-                  size="small"
-                />
+                {
+                  storageSummary && (
+                    <>
+                      <Typography
+                        variant="body2"
+                        className={classes.spaceUsedMargin}
+                        component="p"
+                      >{`${formatBytes(storageSummary.used_storage)} of ${formatBytes(
+                          storageSummary.total_storage
+                        )} used`}</Typography>
+                      <ProgressBar
+                        data-cy="progress-bar-space-used"
+                        className={classes.spaceUsedMargin}
+                        progress={(storageSummary.used_storage / storageSummary.total_storage) * 100}
+                        size="small"
+                      />
+                    </>
+                  )
+                }
                 {/* <Button disabled variant="outline" size="small">
                   <Trans>UPGRADE</Trans>
                 </Button> */}

packages/files-ui/src/Components/Modules/Settings/Plan.tsx

@@ -9,7 +9,6 @@ import {
 } from "@chainsafe/common-components"
 import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
-import { FREE_PLAN_LIMIT } from "../../../Utils/Constants"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { Trans } from "@lingui/macro"
 import { ROUTE_LINKS } from "../../FilesRoutes"
@@ -74,7 +73,7 @@ const useStyles = makeStyles((theme: ITheme) =>
 
 const PlanView: React.FC = () => {
   const classes = useStyles()
-  const { spaceUsed } = useFiles()
+  const { storageSummary } = useFiles()
 
   return (
     <Grid container>
@@ -118,20 +117,22 @@ const PlanView: React.FC = () => {
                 <Trans>Essentials - Free</Trans>
               </Typography>
               <div className={classes.essentialContainer}>
+                {storageSummary &&
                 <div className={classes.spaceUsedBox}>
                   <Typography
                     variant="body2"
                     className={classes.spaceUsedMargin}
                     component="p"
-                  >{`${formatBytes(spaceUsed)} of ${formatBytes(
-                      FREE_PLAN_LIMIT
+                  >{`${formatBytes(storageSummary.used_storage)} of ${formatBytes(
+                      storageSummary.total_storage
                     )} used`}</Typography>
                   <ProgressBar
                     className={classes.spaceUsedMargin}
-                    progress={(spaceUsed / FREE_PLAN_LIMIT) * 100}
+                    progress={(storageSummary.used_storage / storageSummary.total_storage) * 100}
                     size="small"
                   />
                 </div>
+                }
                 <Link
                   className={classes.link}
                   to={ROUTE_LINKS.PurchasePlan}

packages/files-ui/src/Contexts/FilesContext.tsx

@@ -4,7 +4,8 @@ import {
   BucketType,
   Bucket as FilesBucket,
   SearchEntry,
-  BucketFileFullInfoResponse
+  BucketFileFullInfoResponse,
+  BucketSummaryResponse
 } from "@chainsafe/files-api-client"
 import React, { useCallback, useEffect, useReducer } from "react"
 import { useState } from "react"
@@ -74,7 +75,7 @@ type FilesContext = {
   buckets: BucketKeyPermission[]
   uploadsInProgress: UploadProgress[]
   downloadsInProgress: DownloadProgress[]
-  spaceUsed: number
+  storageSummary: BucketSummaryResponse | undefined
   uploadFiles: (bucketId: string, files: File[], path: string, encryptionKey?: string) => Promise<void>
   downloadFile: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void
   getFileContent: (bucketId: string, params: GetFileContentParams) => Promise<Blob | undefined>
@@ -117,9 +118,9 @@ const FilesProvider = ({ children }: FilesContextProps) => {
   } = useFilesApi()
   const { publicKey, encryptForPublicKey, decryptMessageWithThresholdKey } = useThresholdKey()
   const { addToastMessage } = useToaster()
-  const [spaceUsed, setSpaceUsed] = useState(0)
   const [personalEncryptionKey, setPersonalEncryptionKey] = useState<string | undefined>()
   const [buckets, setBuckets] = useState<BucketKeyPermission[]>([])
+  const [storageSummary, setStorageSummary] = useState<BucketSummaryResponse | undefined>()
   const { profile } = useUser()
   const { userId } = profile || {}
   const [isLoadingBuckets, setIsLoadingBuckets] = useState(false)
@@ -184,6 +185,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     )
     setBuckets(bucketsWithKeys)
     setIsLoadingBuckets(false)
+
     return Promise.resolve()
   }, [personalEncryptionKey, userId, filesApiClient, getKeyForBucket, getPermissionForBucket])
 
@@ -193,20 +195,16 @@ const FilesProvider = ({ children }: FilesContextProps) => {
 
   // Space used counter
   useEffect(() => {
-    const getSpaceUsage = async () => {
+    const getStorageSummary = async () => {
       try {
-        const totalSize = buckets.filter(b => b.type === "csf" ||
-          b.type === "trash" ||
-          (b.type === "share" && !!b.owners.find(u => u.uuid === profile?.userId)))
-          .reduce((totalSize, bucket) => totalSize += bucket.size, 0)
-
-        setSpaceUsed(totalSize)
+        const bucketSummaryData = await filesApiClient.bucketsSummary()
+        setStorageSummary(bucketSummaryData)
       } catch (error) {
         console.error(error)
       }
     }
     if (isLoggedIn) {
-      getSpaceUsage()
+      getStorageSummary()
     }
   }, [filesApiClient, isLoggedIn, buckets, profile])
 
@@ -578,7 +576,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
         downloadFile,
         getFileContent,
         uploadsInProgress,
-        spaceUsed,
+        storageSummary,
         downloadsInProgress,
         secureAccountWithMasterPassword,
         buckets,

packages/files-ui/src/Utils/Constants.ts

@@ -8,5 +8,3 @@ export enum CONTENT_TYPES {
   MP4 = "video/mp4",
   Audio = "audio/*"
 }
-
-export const FREE_PLAN_LIMIT = 20000000000

packages/storage-ui/.env.example

@@ -2,6 +2,7 @@ PORT=3000
 HTTPS=false
 
 REACT_APP_API_URL=https://stage.imploy.site/api/v1
+REACT_APP_IPFS_GATEWAY=https://ipfs.chainsafe.io/ipfs
 
 REACT_APP_STRIPE_PK=
 REACT_APP_SENTRY_DSN_URL=

packages/storage-ui/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "chainsafe-storage",
+  "name": "ChainSafe Storage",
   "icons": [
     {
       "src": "ChainSafe-logo.png",

packages/storage-ui/public/site.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "chainsafe-storage",
+  "short_name": "ChainSafe Storage",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",

packages/storage-ui/src/App.tsx

@@ -13,6 +13,7 @@ import { darkTheme } from "./Themes/DarkTheme"
 import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
 import { StorageApiProvider }  from "./Contexts/StorageApiContext"
 import { StorageProvider } from "./Contexts/StorageContext"
+import { UserProvider } from "./Contexts/UserContext"
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -111,13 +112,15 @@ const App = () => {
                 apiUrl={apiUrl}
                 withLocalStorage={true}
               >
-                <StorageProvider>
-                  <Router>
-                    <AppWrapper>
-                      <StorageRoutes />
-                    </AppWrapper>
-                  </Router>
-                </StorageProvider>
+                <UserProvider>
+                  <StorageProvider>
+                    <Router>
+                      <AppWrapper>
+                        <StorageRoutes />
+                      </AppWrapper>
+                    </Router>
+                  </StorageProvider>
+                </UserProvider>
               </StorageApiProvider>
             </Web3Provider>
           </ToasterProvider>

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

@@ -7,6 +7,7 @@ import { PinStatus } from "@chainsafe/files-api-client"
 import { CSSTheme } from "../../Themes/types"
 import { useStorage } from "../../Contexts/StorageContext"
 import { desktopGridSettings, mobileGridSettings } from "../Pages/CidsPage"
+import { trimChar } from "../../Utils/pathUtils"
 
 const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =>
   createStyles({
@@ -58,7 +59,7 @@ interface Props {
     pinStatus: PinStatus
 }
 
-const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/"
+const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || ""
 
 const CidRow = ({ pinStatus }: Props) => {
   const classes = useStyles()
@@ -84,7 +85,7 @@ const CidRow = ({ pinStatus }: Props) => {
       </TableCell>
       <TableCell>
         <a
-          href={`${IPFS_GATEWAY}${pinStatus.pin?.cid}`}
+          href={`${trimChar(IPFS_GATEWAY, "/")}/${pinStatus.pin?.cid}`}
           target="_blank"
           rel="noopener noreferrer"
         >

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

@@ -14,6 +14,7 @@ import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
 import { CSSTheme } from "../../Themes/types"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
+import { useUser } from "../../Contexts/UserContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSSTheme) => {
@@ -154,6 +155,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const classes = useStyles()
   const { isLoggedIn, logout } = useStorageApi()
   const { history } = useHistory()
+  const { getProfileTitle } = useUser()
 
   const signOut = useCallback(async () => {
     logout()
@@ -171,10 +173,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
         <>
           {desktop ? (
             <>
-
               <section className={classes.accountControls}>
                 <MenuDropdown
-                  title=''
+                  title={getProfileTitle()}
                   anchor="bottom-right"
                   classNames={{
                     icon: classes.icon,