add eslint rules for spaces (#833)

.eslintrc.json

@@ -34,6 +34,9 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": 0,
+    "arrow-spacing": "error",
+    "space-infix-ops": "error",
+    "no-trailing-spaces": ["error", { "ignoreComments": true }],
     "comma-dangle": ["error", "never"],
     "object-curly-spacing": ["error", "always"],
     "space-in-parens": ["error", "never"],

packages/common-components/src/Helpers/Dates.ts

@@ -9,7 +9,7 @@ export const formatAMPM = (date: Date) => {
   const ampm = hours >= 12 ? "pm" : "am"
   hours = hours % 12
   hours = hours ? hours : 12 // the hour '0' should be '12'
-  return `${hours}:${minutes < 10 ? "0"+ minutes : minutes} ${ampm}`
+  return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${ampm}`
 }
 
 export const standardlongDateFormat = (input: Date, time?: boolean): string => {
@@ -29,5 +29,5 @@ export const standardlongDateFormat = (input: Date, time?: boolean): string => {
   ]
   return `${`${input.getDay()}`.padStart(2, "0")} ${`${
     months[input.getMonth()].substr(0, 4)
-  }`} ${`${input.getFullYear()}`.substr(0, 4)}${time ? ` ${formatAMPM(input)}`: ""}`
+  }`} ${`${input.getFullYear()}`.substr(0, 4)}${time ? ` ${formatAMPM(input)}` : ""}`
 }

packages/common-components/src/Scroll/ScrollToTop.hook.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react"
 import { animateScroll as scroll } from "react-scroll"
 
 export function useScrollToTop(onMount = false) {
-  
+
   const scrollToTop = useCallback(() => {
     scroll.scrollToTop()
   }, [])

packages/common-components/src/stories/Typography.stories.tsx

@@ -14,17 +14,17 @@ export const actionsData = {
   onClick: action("onClickTypography")
 }
 
-type VariantOption = "h1" 
-  |"h2" 
-  |"h3" 
-  |"h4" 
-  |"h5" 
-  |"h6" 
-  |"subtitle1" 
-  |"subtitle2" 
-  |"body1" 
-  |"body2" 
-  |"caption" 
+type VariantOption = "h1"
+  |"h2"
+  |"h3"
+  |"h4"
+  |"h5"
+  |"h6"
+  |"subtitle1"
+  |"subtitle2"
+  |"body1"
+  |"body2"
+  |"caption"
   |"button"
 
 const variantOptions: VariantOption[] = [

packages/common-contexts/src/UserContext/UserContext.tsx

@@ -49,7 +49,7 @@ const UserProvider = ({ children }: UserContextProps) => {
       return Promise.reject("There was an error getting profile.")
     }
   }, [imployApiClient])
-  
+
   useEffect(() => {
     if (isLoggedIn) {
       const retrieveProfile = async () => {

packages/common-themes/src/Hooks/useDoubleClick.ts

@@ -9,10 +9,10 @@ export function useDoubleClick(actionSingleClick: () => void, actionDoubleClick:
       if (clickCount === 1) {
         actionSingleClick && actionSingleClick()
       }
-            
+
       setClickCount(0)
     }, delay)
-        
+
     // the duration between this click and the previous one
     // is less than the value of delay = double-click
     if (clickCount === 2) {

packages/common-themes/src/Provider/ThemeSwitcherContext.tsx

@@ -55,7 +55,7 @@ const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
     if (canUseLocalStorage && current != "") {
       localStorage.setItem(storageKey, current)
     }
-    
+
     // Update CSS vars 
     if (current != "" && themes[current].globalStyling["@global"][":root"]) {
       Object.keys(themes[current].globalStyling["@global"][":root"]).map(

packages/common-themes/src/utils/colorManipulator.ts

@@ -97,7 +97,7 @@ export function decomposeColor(color: string): IColorObject {
 
   if (type === "var") {
     colorToParse = getComputedStyle(document.documentElement).getPropertyValue(color.substr(marker + 1, color.length - 1))
-  } 
+  }
 
   const valuesStrings = colorToParse
     .substring(marker + 1, colorToParse.length - 1)

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

@@ -9,9 +9,6 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
     root: {
       "&:before": {
         backgroundColor: fade(constants.modalDefault.fadeBackground, 0.9)
-      },
-      [breakpoints.down("md")]: {
-
       }
     },
     inner: {

packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx

@@ -52,7 +52,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
   const classes = useStyles()
   const [isLoadingApprove, setIsLoadingApprove] = useState(false)
   const [isLoadingReject, setIsLoadingReject] = useState(false)
-  const { browserDetail, encPubKeyX, timestamp } = useMemo(() => requests[requests.length -1], [requests])
+  const { browserDetail, encPubKeyX, timestamp } = useMemo(() => requests[requests.length - 1], [requests])
 
   useEffect(() => {
     // reset the buttons state for each new request displayed
@@ -90,7 +90,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
           <Trans>on</Trans> {dayjs(timestamp).format("ddd D MMMM h:mm a")}<br/>
         </Typography>
         <div className={classes.buttonWrapper}>
-          <Button                   
+          <Button
             className={classes.button}
             variant={desktop ? "primary" : "outline"}
             size="large"
@@ -99,7 +99,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
             onClick={onApproveRequest}>
             <Trans>Approve</Trans>
           </Button>
-          <Button 
+          <Button
             className={classes.button}
             variant={desktop ? "primary" : "outline"}
             size="large"

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -26,7 +26,7 @@ const FilesRoutes = () => {
   const { isNewDevice, publicKey, shouldInitializeAccount } = useThresholdKey()
 
   const isAuthorized = isLoggedIn && secured && !!publicKey && !isNewDevice && !shouldInitializeAccount
-  
+
   return (
     <Switch>
       <ConditionalRoute

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

@@ -87,7 +87,6 @@ const useStyles = makeStyles(
           [breakpoints.down("md")]: {
             opacity: 1
           }
-
         }
       },
       logo: {
@@ -348,7 +347,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
             )}
             {!desktop && (
               <Fragment>
-                <div 
+                <div
                   onClick={() => setTheme(themeKey === "dark" ? "light" : "dark")}
                   className={classes.navItem}
                 >

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

@@ -46,7 +46,7 @@ const useStyles = makeStyles(
         width: 240,
         marginBottom: constants.generalUnit * 2,
         "&:last-child": {
-          marginBottom: 0 
+          marginBottom: 0
         }
       },
       error: {
@@ -85,7 +85,7 @@ const useStyles = makeStyles(
         width: "100%",
         textAlign: "center",
         "& > *": {
-          fontWeight: 400          
+          fontWeight: 400
         },
         [breakpoints.down("md")]: {
           // TODO: confirm how to move this around
@@ -105,7 +105,7 @@ const InitialScreen: React.FC = () => {
 
   const [error, setError] = useState<string | undefined>()
   const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true"
-  
+
   const [isConnecting, setIsConnecting] = useState(false)
 
   const handleSelectWalletAndConnect = async () => {
@@ -178,8 +178,8 @@ const InitialScreen: React.FC = () => {
         )
       }
       {
-        !error ? 
-          loginMode !== "web3" ? (      
+        !error ?
+          loginMode !== "web3" ? (
             <>
               <section className={classes.buttonSection}>
                 <Button
@@ -295,18 +295,18 @@ const InitialScreen: React.FC = () => {
               ) : (
                 <>
                   <section className={classes.connectingWallet}>
-                    <Typography variant='h2'><Trans>Connect Wallet to Files</Trans></Typography>  
+                    <Typography variant='h2'><Trans>Connect Wallet to Files</Trans></Typography>
                     <Typography variant='h5'>
                       <Trans>You will need to sign a message in your wallet to complete sign in.</Trans>
                     </Typography>
                   </section>
                 </>
               )
               : null
-          ) : (                
+          ) : (
             <>
               <section className={classes.connectingWallet}>
-                <Typography variant='h2'><Trans>Connection failed</Trans></Typography>  
+                <Typography variant='h2'><Trans>Connection failed</Trans></Typography>
                 <Typography variant='h5'>
                   {error}
                 </Typography>

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

@@ -31,8 +31,7 @@ const InitializeAccount: React.FC = () => {
   // mnemonic has not been set up for the account. If totalShares - shares.length === 2
   // this indicates that a mnemonic has already been set up. "2" corresponds here to one
   // service provider (default), and one mnemonic.
-  const hasMnemonicShare =
-    keyDetails && (keyDetails.totalShares - shares.length > 1) 
+  const hasMnemonicShare = keyDetails && (keyDetails.totalShares - shares.length > 1)
 
   const handleSetPassword = async () => {
     if (!password) return

packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx

@@ -67,11 +67,11 @@ const TextPreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
 
   const onZoomIn = useCallback(() => {
     setFontSize(fontSize + 2)
-  }, [fontSize]) 
+  }, [fontSize])
 
   const onZoomOut = useCallback(() => {
     setFontSize(fontSize - 2)
-  }, [fontSize]) 
+  }, [fontSize])
 
   return (
     <div className={classes.root}>

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

@@ -56,7 +56,6 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
       "& svg": {
         fill: constants.uploadModal.icon
       },
-
       "&:hover svg": {
         fill: constants.uploadModal.iconHover
       }

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

@@ -171,7 +171,7 @@ const LoginPage = () => {
       <>
       </>
       {
-        themeKey === "dark" ? 
+        themeKey === "dark" ?
           <>
             <BottomDarkSVG className={classes.bgBottom} />
             <TopDarkSVG className={classes.bgTop} />
@@ -181,7 +181,7 @@ const LoginPage = () => {
             <BottomLightSVG className={classes.bgBottom} />
             <TopLightSVG className={classes.bgTop} />
           </>
-          
+
       }
       <ForegroundSVG className={classes.bgForeground} />
       <a

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

@@ -468,7 +468,7 @@ const DriveProvider = ({ children }: DriveContextProps) => {
           appearance: "success"
         })
       }
-     
+
       return Promise.resolve()
     } catch (error) {
       addToastMessage({

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

@@ -176,7 +176,7 @@ const ThresholdKeyProvider = ({ children, network = "mainnet", enableLogging = f
       await shareTransferModule.cancelRequestStatusCheck()
       if (shareTransferModule.currentEncKey) {
         const pubKeyEC = getPubKeyEC(shareTransferModule.currentEncKey)
-        const encPubKeyX = pubKeyEC.getX().toString("hex")        
+        const encPubKeyX = pubKeyEC.getX().toString("hex")
         await shareTransferModule.deleteShareTransferStore(encPubKeyX)
       }
     }
@@ -196,11 +196,11 @@ const ThresholdKeyProvider = ({ children, network = "mainnet", enableLogging = f
         const wallet = new Wallet(privateKey)
         const signature = await wallet.signMessage(token)
         await thresholdKeyLogin(
-          signature, 
-          token, 
-          (userInfo.userInfo.typeOfLogin === "jwt") ? 
-            "web3" : 
-            userInfo.userInfo.typeOfLogin as TKeyRequestIdentity_provider, 
+          signature,
+          token,
+          (userInfo.userInfo.typeOfLogin === "jwt") ?
+            "web3" :
+            userInfo.userInfo.typeOfLogin as TKeyRequestIdentity_provider,
           userInfo.userInfo.idToken || userInfo.userInfo.accessToken,
           `0x${EthCrypto.publicKey.compress(pubKey)}`
         )
@@ -535,8 +535,8 @@ const ThresholdKeyProvider = ({ children, network = "mainnet", enableLogging = f
       const messageCipher = EthCrypto.cipher.parse(message)
       return EthCrypto.decryptWithPrivateKey(privateKey, messageCipher)
     } catch (error) {
-      console.error("Error decrypting: ", message, privateKey)   
-      return Promise.reject("Error decrypting")   
+      console.error("Error decrypting: ", message, privateKey)
+      return Promise.reject("Error decrypting")
     }
   }
 

packages/files-ui/src/Themes/DarkTheme.ts

@@ -166,7 +166,7 @@ export const darkTheme = createTheme<CsfColors>({
         black: {
           main: "var(--gray1)"
         }
-      },  
+      },
       additional: {
         blue: {
           1: "var(--blue1)",
@@ -505,7 +505,7 @@ export const darkTheme = createTheme<CsfColors>({
               "& svg": {
                 fill: "var(--gray9)"
               }
-            },  
+            },
             active: {
               backgroundColor: "var(--gray7)",
               color: "var(--gray9)",