Add French translation and set the language selection

packages/files-ui/.linguirc

@@ -9,6 +9,6 @@
    "formatOptions": { 
       "origins": false
    },
-   "locales": ["en"],
+   "locales": ["en", "fr"],
    "sourceLocale": "en"
 } 

packages/files-ui/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import { init as initSentry, ErrorBoundary, showReportDialog } from "@sentry/react"
 import { Web3Provider } from "@chainsafe/web3-context"
 import { ImployApiProvider, UserProvider, BillingProvider } from "@chainsafe/common-contexts"
@@ -25,13 +25,42 @@ if (
     environment: process.env.REACT_APP_SENTRY_ENV
   })
 }
+
+const availableLanguages = [
+  { id: "en", label: "English" },
+  { id: "fr", label: "Français" }
+]
+
+const onboardConfig = {
+  dappId: process.env.REACT_APP_BLOCKNATIVE_ID || "",
+  walletSelect: {
+    wallets: [
+      { walletName: "coinbase" },
+      {
+        walletName: "trust",
+        rpcUrl:
+          "https://mainnet.infura.io/v3/a7e16429d2254d488d396710084e2cd3"
+      },
+      { walletName: "metamask", preferred: true },
+      { walletName: "authereum" },
+      { walletName: "opera" },
+      { walletName: "operaTouch" },
+      { walletName: "torus" },
+      { walletName: "status" },
+      {
+        walletName: "walletConnect",
+        infuraKey: "a7e16429d2254d488d396710084e2cd3",
+        preferred: true
+      }
+    ]
+  }
+}
+
 const App: React.FC<{}> = () => {
   const { initHotjar } = useHotjar()
   const { canUseLocalStorage } = useLocalStorage()
   const hotjarId = process.env.REACT_APP_HOTJAR_ID
-  const apiUrl =
-    process.env.REACT_APP_API_URL || "https://stage.imploy.site/api/v1"
-
+  const apiUrl = process.env.REACT_APP_API_URL || "https://stage.imploy.site/api/v1"
   // This will default to testnet unless mainnet is specifically set in the ENV
   const directAuthNetwork = (process.env.REACT_APP_DIRECT_AUTH_NETWORK === "mainnet") ? "mainnet" : "testnet"
 
@@ -41,64 +70,43 @@ const App: React.FC<{}> = () => {
     }
   }, [hotjarId, initHotjar])
 
+  const fallBack = useCallback(({ error, componentStack, eventId, resetError }) => (
+    <Modal
+      active
+      closePosition="none"
+      setActive={resetError}
+    >
+      <Typography>
+        An error occurred and has been logged. If you would like to
+        provide additional info to help us debug and resolve the issue,
+        click the `&quot;`Provide Additional Details`&quot;` button
+      </Typography>
+      <Typography>{error?.message.toString()}</Typography>
+      <Typography>{componentStack}</Typography>
+      <Typography>{eventId}</Typography>
+      <Button
+        onClick={() => showReportDialog({ eventId: eventId || "" })}
+      >
+      Provide Additional Details
+      </Button>
+      <Button onClick={resetError}>Reset error</Button>
+    </Modal>
+  ), [])
+
   return (
     <ThemeSwitcher
       storageKey="csf.themeKey"
       themes={{ light: lightTheme, dark: darkTheme }}
     >
       <ErrorBoundary
-        fallback={({ error, componentStack, eventId, resetError }) => (
-          <Modal
-            active
-            closePosition="none"
-            setActive={resetError}
-          >
-            <Typography>
-              An error occurred and has been logged. If you would like to
-              provide additional info to help us debug and resolve the issue,
-              click the `&quot;`Provide Additional Details`&quot;` button
-            </Typography>
-            <Typography>{error?.message.toString()}</Typography>
-            <Typography>{componentStack}</Typography>
-            <Typography>{eventId}</Typography>
-            <Button
-              onClick={() => showReportDialog({ eventId: eventId || "" })}
-            >
-              Provide Additional Details
-            </Button>
-            <Button onClick={resetError}>Reset error</Button>
-          </Modal>
-        )}
+        fallback={fallBack}
         onReset={() => window.location.reload()}
       >
-        <LanguageProvider availableLanguages={[{ id: "en", label: "English" }]}>
-          <CssBaseline />
+        <CssBaseline />
+        <LanguageProvider availableLanguages={availableLanguages}>
           <ToasterProvider autoDismiss>
             <Web3Provider
-              onboardConfig={{
-                dappId: process.env.REACT_APP_BLOCKNATIVE_ID || "",
-                walletSelect: {
-                  wallets: [
-                    { walletName: "coinbase" },
-                    {
-                      walletName: "trust",
-                      rpcUrl:
-                        "https://mainnet.infura.io/v3/a7e16429d2254d488d396710084e2cd3"
-                    },
-                    { walletName: "metamask", preferred: true },
-                    { walletName: "authereum" },
-                    { walletName: "opera" },
-                    { walletName: "operaTouch" },
-                    { walletName: "torus" },
-                    { walletName: "status" },
-                    {
-                      walletName: "walletConnect",
-                      infuraKey: "a7e16429d2254d488d396710084e2cd3",
-                      preferred: true
-                    }
-                  ]
-                }
-              }}
+              onboardConfig={onboardConfig}
               checkNetwork={false}
               cacheWalletSelection={canUseLocalStorage}
             >

packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx

@@ -206,7 +206,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                 >
                   <Trans>General</Trans>
                 </Typography>
-                {fullFileInfo.persistent?.uploaded ? (
+                {fullFileInfo.persistent?.uploaded && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -222,8 +222,8 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.uploaded}
                     </Typography>
                   </div>
-                ) : null}
-                {fullFileInfo.content?.size !== undefined ? (
+                )}
+                {fullFileInfo.content?.size !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -239,7 +239,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {formatBytes(fullFileInfo.content?.size)}
                     </Typography>
                   </div>
-                ) : null}
+                )}
               </div>
               <div className={classes.technicalContainer}>
                 <Typography
@@ -249,7 +249,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                 >
                   <Trans>Technical</Trans>
                 </Typography>
-                {fullFileInfo.persistent?.stored_cid !== undefined ? (
+                {fullFileInfo.persistent?.stored_cid !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -265,8 +265,8 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.stored_cid}
                     </Typography>
                   </div>
-                ) : null}
-                {fullFileInfo.persistent?.stored_cid !== undefined ? (
+                )}
+                {fullFileInfo.persistent?.stored_cid !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -282,7 +282,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.stored_cid}
                     </Typography>
                   </div>
-                ) : null}
+                )}
                 <div className={classes.subInfoBox}>
                   <Grid
                     item
@@ -294,7 +294,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                     >
                       <Trans>CID (Content Identifier)</Trans>
                     </Typography>
-                    {copied ? (
+                    {copied && (
                       <Typography
                         variant="body2"
                         component="p"
@@ -305,7 +305,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       >
                         <Trans>copied !</Trans>
                       </Typography>
-                    ) : null}
+                    )}
                   </Grid>
                   <Typography
                     className={classes.subSubtitle}

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx

@@ -770,7 +770,7 @@ const FilesTableView = ({
                     </TableCell>
                     <TableCell align="left">
                       {uploadInProgress.noOfFiles > 1
-                        ? `Uploading ${uploadInProgress.noOfFiles} files`
+                        ? t`Uploading ${uploadInProgress.noOfFiles} files`
                         : uploadInProgress.fileName}
                     </TableCell>
                     <TableCell />

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

@@ -303,37 +303,37 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, path }:
           menuItems={[
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <ExportIcon className={classes.menuIcon} />
             //       <span>Move</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <ShareAltIcon className={classes.menuIcon} />
             //       <span>Share</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <EditIcon className={classes.menuIcon} />
             //       <span>Rename</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <DeleteIcon className={classes.menuIcon} />
             //       <span>Delete</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },

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

@@ -158,7 +158,7 @@ const ConciseExplainer: React.FC<IConciseExplainerProps> = ({ className, onConti
               alt="password and keys"
             />
             <Typography component="p">
-              <Trans>Enter a password</Trans>
+              <Trans>Enter password</Trans>
             </Typography>
           </div>
           <div className={classes.imageBox}>

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

@@ -190,7 +190,7 @@ const MissingShares = ({ className }: IMissingShares) => {
                   size="large"
                   onClick={() => setWithPassword(true)}
                 >
-                  <Trans>Enter a password</Trans>
+                  <Trans>Enter password</Trans>
                 </Button>
               )}
               <Button

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

@@ -0,0 +1,67 @@
+import React, { useMemo } from "react"
+import { useLanguageContext } from "../../../Contexts/LanguageContext"
+import { MenuDropdown } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../../Themes/types"
+
+const useStyles = makeStyles(
+  ({ constants, palette }: CSFTheme) => {
+    return createStyles({
+      root: {
+        border: `1px solid ${palette.additional["gray"][6]}`,
+        minWidth: 145,
+        backgroundColor: palette.additional["gray"][1]
+      },
+      options: {
+        backgroundColor: constants.header.optionsBackground,
+        color: constants.header.optionsTextColor,
+        border: `1px solid ${constants.header.optionsBorder}`
+      },
+      icon: {
+        position: "absolute",
+        right: constants.generalUnit * 2,
+        "& svg": {
+          fill: constants.header.iconColor
+        }
+      },
+      title: {
+        width: "100%"
+      }
+    })
+  }
+)
+
+const LanguageSelection = () => {
+  const classes = useStyles()
+  const { availableLanguages, selectedLanguage, setActiveLanguage } = useLanguageContext()
+  const currentLanguage = useMemo(
+    () => availableLanguages.find((land) => land.id === selectedLanguage)?.label
+    , [availableLanguages, selectedLanguage]
+  )
+
+  return (
+    <MenuDropdown
+      animation="none"
+      anchor="top-right"
+      className={classes.root}
+      classNames={{
+        icon: classes.icon,
+        options: classes.options,
+        title: classes.title
+      }}
+      menuItems={availableLanguages.map((lang) => (
+        {
+          contents: (
+            <span>
+              {lang.label}
+            </span>
+          ),
+          onClick: () => setActiveLanguage(lang.id)
+        }
+      ))}
+      title={currentLanguage}
+    />
+  )
+}
+
+export default LanguageSelection

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

@@ -102,7 +102,7 @@ const PlanView: React.FC = () => {
                 component="p"
                 className={clsx(classes.margins, classes.subtitle)}
               >
-                <Trans id="storage-plan-desc">
+                <Trans>
                   Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat.
                   Nunc elementum sed libero sit amet convallis. Quisque non arcu
                   vitae ex fringilla molestie.