[Files] Verfy a sharing link asap and give nice error

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.18.15",
+    "@chainsafe/files-api-client": "^1.18.19",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -31,9 +31,9 @@
     "ethers": "^5.4.3",
     "fflate": "^0.7.1",
     "formik": "^2.2.5",
+    "heic-convert": "^1.2.4",
     "jsrsasign": "^10.4.1",
     "key-encoder": "^2.0.3",
-    "heic-convert": "^1.2.4",
     "mime-matcher": "^1.0.5",
     "posthog-js": "^1.13.10",
     "react": "^16.14.0",

packages/files-ui/src/Components/Modules/LinkSharingModule.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { Button, CheckCircleIcon, Loading, Typography, useHistory, useLocation } from "@chainsafe/common-components"
+import { Button, CheckCircleIcon, ExclamationCircleIcon, Loading, Typography, useHistory, useLocation } from "@chainsafe/common-components"
 import { getBucketDecryptionFromHash, getJWT } from "../../Utils/pathUtils"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
@@ -56,10 +56,12 @@ const useStyles = makeStyles(
     })
 )
 
-interface DecodedJwt {
+export interface DecodedNounceJwt {
   bucket_id?: string
   permission?: NonceResponsePermission
+  nonce_id?: string
 }
+
 const LinkSharingModule = () => {
   const { pathname, hash } = useLocation()
   const { redirect } = useHistory()
@@ -71,15 +73,26 @@ const LinkSharingModule = () => {
   const [encryptedEncryptionKey, setEncryptedEncryptionKey] = useState("")
   const [error, setError] = useState("")
   const classes = useStyles()
-  const { bucket_id: bucketId, permission } = useMemo(() => {
+  const { bucket_id: bucketId, permission, nonce_id } = useMemo(() => {
     try {
-      return (jwt && jwtDecode<DecodedJwt>(jwt)) || {}
+      return (jwt && jwtDecode<DecodedNounceJwt>(jwt)) || {}
     }catch (e) {
       console.error(e)
       return {}
     }
   }, [jwt])
   const newBucket = useMemo(() => buckets.find((b) => b.id === bucketId), [bucketId, buckets])
+  const [isValidNonce, setIsValidNonce] = useState<boolean | undefined>()
+
+  useEffect(() => {
+    if(!nonce_id) return
+
+    filesApiClient.isNonceValid(nonce_id)
+      .then((res) => {
+        setIsValidNonce(res.is_valid)
+      })
+      .catch(console.error)
+  }, [filesApiClient, nonce_id])
 
   useEffect(() => {
     if(!publicKey || !bucketDecryptionKey) return
@@ -91,7 +104,7 @@ const LinkSharingModule = () => {
   }, [bucketDecryptionKey, encryptForPublicKey, publicKey])
 
   useEffect(() => {
-    if(!jwt || !encryptedEncryptionKey || !!newBucket) return
+    if(!jwt || !encryptedEncryptionKey || !!newBucket || !isValidNonce) return
 
     filesApiClient.verifyNonce({ jwt, encryption_key: encryptedEncryptionKey })
       .catch((e:any) => {
@@ -101,7 +114,7 @@ const LinkSharingModule = () => {
       .finally(() => {
         refreshBuckets()
       })
-  }, [encryptedEncryptionKey, error, filesApiClient, jwt, newBucket, refreshBuckets])
+  }, [encryptedEncryptionKey, error, filesApiClient, isValidNonce, jwt, newBucket, refreshBuckets])
 
   const onBrowseBucket = useCallback(() => {
     newBucket && redirect(ROUTE_LINKS.SharedFolderExplorer(newBucket.id, "/"))
@@ -111,6 +124,17 @@ const LinkSharingModule = () => {
     <div className={classes.root}>
       <div className={classes.box}>
         <div className={classes.messageWrapper}>
+          {!error && isValidNonce === false && (
+            <>
+              <ExclamationCircleIcon
+                size={48}
+                className={classes.icon}
+              />
+              <Typography variant={"h4"} >
+                <Trans>This link is not valid any more.</Trans>
+              </Typography>
+            </>
+          )}
           {!error && !newBucket && (
             <>
               <Loading
@@ -119,7 +143,11 @@ const LinkSharingModule = () => {
                 className={classes.icon}
               />
               <Typography variant={"h4"} >
-                <Trans>Adding you to the shared folder...</Trans>
+                {isValidNonce === undefined
+                  ? <Trans>Verifying the link...</Trans>
+                  : <Trans>Adding you to the shared folder...</Trans>
+                }
+
               </Typography>
             </>
           )}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import {
   Button,
   GithubLogoIcon,
@@ -8,7 +8,8 @@ import {
   Typography,
   FormikTextInput,
   EthereumLogoIcon,
-  useLocation
+  useLocation,
+  ExclamationCircleIcon
 } from "@chainsafe/common-components"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
@@ -23,6 +24,9 @@ import { IdentityProvider } from "@chainsafe/files-api-client"
 import PasswordlessEmail from "./PasswordlessEmail"
 import { Form, FormikProvider, useFormik } from "formik"
 import { emailValidation } from "../../../Utils/validationSchema"
+import { getJWT } from "../../../Utils/pathUtils"
+import jwtDecode from "jwt-decode"
+import { DecodedNounceJwt } from "../LinkSharingModule"
 import dayjs from "dayjs"
 
 const useStyles = makeStyles(
@@ -155,6 +159,9 @@ const useStyles = makeStyles(
       secondaryLoginText: {
         paddingTop: constants.generalUnit * 2
       },
+      exclamationIcon: {
+        fontSize: 48
+      },
       maintenanceMessage: {
         display: "block",
         textAlign: "justify",
@@ -186,6 +193,28 @@ const InitialScreen = ({ className }: IInitialScreen) => {
   const [email, setEmail] = useState("")
   const { state } = useLocation<{from?: string}>()
   const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state])
+  const [isValidNonce, setIsValidNonce] = useState(true)
+
+  useEffect(() => {
+    if (!isSharing) return
+
+    const jwt = getJWT(state?.from)
+    let nonce = ""
+
+    try {
+      nonce = (jwt && jwtDecode<DecodedNounceJwt>(jwt).nonce_id) || ""
+    }catch (e) {
+      console.error(e)
+    }
+
+    if (!nonce) return
+
+    filesApiClient.isNonceValid(nonce)
+      .then((res) => {
+        setIsValidNonce(res.is_valid)
+      })
+      .catch(console.error)
+  }, [filesApiClient, isSharing, state])
 
   const handleSelectWalletAndConnect = async () => {
     setError(undefined)
@@ -382,19 +411,19 @@ const InitialScreen = ({ className }: IInitialScreen) => {
 
   return (
     <div className={clsx(classes.root, className)}>
-      {loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && (
+      {isValidNonce && loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && (
         <Typography
           variant="h6"
           component="h1"
           className={classes.headerText}
         >
-          {isSharing
+          {isSharing && status !== "logging in"
             ? <Trans>Sign in/up to access the shared folder</Trans>
             : <Trans>Get Started</Trans>
           }
         </Typography>
       )}
-      {!error && (
+      {!error && isValidNonce && (
         loginMode !== "web3" && loginMode !== "email"
           ? <>
             <section className={classes.buttonSection}>
@@ -536,6 +565,17 @@ const InitialScreen = ({ className }: IInitialScreen) => {
           </section>
         </>
       )}
+      {!isValidNonce && status !== "logging in" && (
+        <section className={classes.connectingWallet}>
+          <ExclamationCircleIcon
+            className={classes.exclamationIcon}
+            size={48}
+          />
+          <Typography variant='h2'>
+            <Trans>This link is not valid any more.</Trans>
+          </Typography>
+        </section>
+      )}
     </div>
   )
 }

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

@@ -104,7 +104,10 @@ export const isSubFolder = (fold1: string, fold2: string) => {
 }
 
 // get the jwt from /link-sharing/permision/jwt 
-export const getJWT = (pathname: string) => {
+export const getJWT = (pathname?: string) => {
+
+  if(!pathname) return
+
   const arrayOfPaths =  getArrayOfPaths(pathname)
 
   if(arrayOfPaths.length !== 3){

packages/files-ui/src/locales/de/messages.po

@@ -754,6 +754,9 @@ msgstr ""
 msgid "There was an error when setting username."
 msgstr ""
 
+msgid "This link is not valid any more."
+msgstr ""
+
 msgid "This username is already taken"
 msgstr ""
 
@@ -817,6 +820,9 @@ msgstr "Verifizierungscode nicht korrekt!"
 msgid "Verification code sent!"
 msgstr "Verifizierungscode gesendet!"
 
+msgid "Verifying the link..."
+msgstr ""
+
 msgid "View folder"
 msgstr "Ordner anzeigen"
 

packages/files-ui/src/locales/en/messages.po

@@ -757,6 +757,9 @@ msgstr "There was an error restoring your data"
 msgid "There was an error when setting username."
 msgstr "There was an error when setting username."
 
+msgid "This link is not valid any more."
+msgstr "This link is not valid any more."
+
 msgid "This username is already taken"
 msgstr "This username is already taken"
 
@@ -820,6 +823,9 @@ msgstr "Verification code not correct!"
 msgid "Verification code sent!"
 msgstr "Verification code sent!"
 
+msgid "Verifying the link..."
+msgstr "Verifying the link..."
+
 msgid "View folder"
 msgstr "View folder"
 

packages/files-ui/src/locales/es/messages.po

@@ -758,6 +758,9 @@ msgstr ""
 msgid "There was an error when setting username."
 msgstr ""
 
+msgid "This link is not valid any more."
+msgstr ""
+
 msgid "This username is already taken"
 msgstr ""
 
@@ -821,6 +824,9 @@ msgstr ""
 msgid "Verification code sent!"
 msgstr ""
 
+msgid "Verifying the link..."
+msgstr ""
+
 msgid "View folder"
 msgstr "Utilice un navegador guardado"
 

packages/files-ui/src/locales/fr/messages.po

@@ -758,6 +758,9 @@ msgstr "Une erreur s'est produite lors de la restauration de vos données"
 msgid "There was an error when setting username."
 msgstr "Une erreur s'est produite lors de la définition du nom d'utilisateur."
 
+msgid "This link is not valid any more."
+msgstr ""
+
 msgid "This username is already taken"
 msgstr "Ce nom d’utilisateur est déjà pris"
 
@@ -821,6 +824,9 @@ msgstr "Code de vérification incorrect !"
 msgid "Verification code sent!"
 msgstr "Code de vérification envoyé !"
 
+msgid "Verifying the link..."
+msgstr ""
+
 msgid "View folder"
 msgstr "Voir le dossier"
 

packages/files-ui/src/locales/no/messages.po

@@ -754,6 +754,9 @@ msgstr ""
 msgid "There was an error when setting username."
 msgstr ""
 
+msgid "This link is not valid any more."
+msgstr ""
+
 msgid "This username is already taken"
 msgstr ""
 
@@ -817,6 +820,9 @@ msgstr ""
 msgid "Verification code sent!"
 msgstr ""
 
+msgid "Verifying the link..."
+msgstr ""
+
 msgid "View folder"
 msgstr "Vis mappe"
 

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

yarn.lock

@@ -1925,10 +1925,10 @@
   resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7"
   integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q==
 
-"@chainsafe/files-api-client@1.18.15":
-  version "1.18.15"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.15.tgz#452572eb0ecb8178617d9faa37b7866bcfeeb4ec"
-  integrity sha512-W7MkZnK44dV1JixPavKKppi8KVhBk60uHoaDv/zRH0WVXT5QsWjQuCLpeWv9NcytHezsOv+5AAbovnjaZFwjpA==
+"@chainsafe/files-api-client@^1.18.19":
+  version "1.18.19"
+  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.19.tgz#2093d508d55b71abb3ec9cfb9c219fa62a4494c4"
+  integrity sha512-fFIGJg3XcS3hrNq4+UxjOEYYYiOtrYLTKxn0c/jXrlDFxA+Zjsn6G6d5O+KHJVfqoinRIyrRrMPXBHpBlFHpZg==
   dependencies:
     "@redocly/openapi-cli" "^1.0.0-beta.58"
     "@redocly/openapi-core" "^1.0.0-beta.58"