Fix misc prettier/eslint/ts errors, and enable ci linting

.eslintrc

@@ -41,11 +41,11 @@
     "react/no-string-refs": 2,
     "react/no-typos": 1,
     "react/no-unknown-property": 1,
-    "react/no-unused-prop-types": 1,
+    "react/no-unused-prop-types": 0,
     "react/no-unused-state": 1,
     "react/prefer-stateless-function": 1,
     "react/prop-types": 2,
-    "react/require-default-props": 1,
+    "react/require-default-props": 0,
     "react/require-render-return": 2,
     "react/self-closing-comp": 1,
     "react/sort-comp": 1,
@@ -63,7 +63,8 @@
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "jsx-a11y/alt-text": 1,
-    "jsx-a11y/no-static-element-interactions": 2
+    "jsx-a11y/no-static-element-interactions": 2,
+    "react-hooks/rules-of-hooks": 1
   },
   "overrides": [
     {
@@ -73,7 +74,10 @@
       "rules": {
         "no-undef": 0,
         "no-unused-vars": 0,
-        "@typescript-eslint/no-unused-vars": 2,
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          { "argsIgnorePattern": "^_" }
+        ],
         "no-unused-expressions": 0,
         "@typescript-eslint/no-unused-expressions": ["error"]
       }

Makefile

@@ -30,6 +30,16 @@ format:
 	$(info Task: format:check)
 	$(EXEC) sh -c 'npm run format:check:app || exit 255'
 
+.PHONY: types
+format:
+	$(info Task: types)
+	$(EXEC) sh -c 'npm run types || exit 255'
+
+.PHONY: lint
+format:
+	$(info Task: lint)
+	$(EXEC) sh -c 'npm run lint || exit 255'
+
 .PHONY: build
 build:
 	$(info Task: build production)

package.json

@@ -11,8 +11,8 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "start-docker": "docker run -e FLOW_DEBUG=true -e FLOW_SESSIONCOOKIESSECURE=false -p 8080:8080 gcr.io/dl-flow/playground-api:latest ?",
     "snyk-protect": "snyk protect",
-    "tsc": "tsc",
-    "ci:check": "npm run format:check:app && npm run lint && npm run tsc"
+    "types": "tsc",
+    "ci:check": "npm run format:check:app && npm run lint && npm run types"
   },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",

src/components/AccountAvatars.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { useThemeUI, Flex, Box, Badge } from 'theme-ui';
+import Avatar from 'components/Avatar';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { Account, Project } from 'src/api/apollo/generated/graphql';
-import Avatar from 'components/Avatar';
+import { Badge, Box, Flex, useThemeUI } from 'theme-ui';
 
 export const AccountAvatar: React.FC<{
   onClick: (e: any, i: number) => void;
@@ -11,7 +11,7 @@ export const AccountAvatar: React.FC<{
   return (
     <motion.div>
       <Box
-        //@ts-ignore
+        // @ts-expect-error #TODO: switch to button
         onClick={onClick}
         mx="0.5rem"
         sx={{
@@ -105,7 +105,7 @@ const AccountAvatars: React.FC<{
                   }}
                 />
                 <Badge
-                  px={'5px'}
+                  px="5px"
                   sx={{
                     fontSize: 3,
                     backgroundColor: isSelected
@@ -128,5 +128,3 @@ const AccountAvatars: React.FC<{
 };
 
 export default AccountAvatars;
-
-// @ts-ignore-end

src/components/AccountPicker.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
-import { Flex, useThemeUI } from 'theme-ui';
 import { Account, Project } from 'api/apollo/generated/graphql';
 import AccountAvatars from 'components/AccountAvatars';
 import AccountSigners from 'components/AccountSigners';
+import React, { useEffect } from 'react';
+import { Flex, useThemeUI } from 'theme-ui';
 
 type AccountPickerProps = {
   project: Project;
@@ -81,7 +81,7 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
           maxSelection={maxSelection}
         />
         <Flex
-          px={'0.5rem'}
+          px="0.5rem"
           sx={{
             alignItems: 'center',
           }}

src/components/AccountSigners.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import { useThemeUI, Flex, Badge, Text } from 'theme-ui';
+import { AccountAvatar, AvatarList } from 'components/AccountAvatars';
+import Avatar from 'components/Avatar';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { Account, Project } from 'src/api/apollo/generated/graphql';
-import Avatar from 'components/Avatar';
-import { AccountAvatar, AvatarList } from 'components/AccountAvatars';
+import { Badge, Flex, Text, useThemeUI } from 'theme-ui';
 
 export const Outline: React.FC = ({ children }) => {
   const { theme } = useThemeUI();
 
   return (
     <motion.div>
       <Flex
-        mx={'0.5rem'}
+        mx="0.5rem"
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
@@ -35,8 +35,14 @@ const AccountSigners: React.FC<{
   accounts: Account[];
   maxSelection?: number;
 }> = (props) => {
-  const { multi, selectedAccounts, accounts, project, onChange, maxSelection } =
-    props;
+  const {
+    multi,
+    selectedAccounts,
+    accounts,
+    project,
+    onChange,
+    maxSelection,
+  } = props;
   if (!multi) {
     throw new Error('Must include multi prop.');
   }
@@ -94,7 +100,7 @@ const AccountSigners: React.FC<{
                   }}
                 />
                 <Badge
-                  px={'5px'}
+                  px="5px"
                   sx={{
                     fontSize: 3,
                     backgroundColor: theme.colors.primary,

src/components/ActionButton.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { CSSProperties } from 'styled-components';
 import Button from './Button';
 
 interface ActionButtonProps {
-  children?: any;
+  children?: React.ReactNode;
   onClick?: any;
   className?: string;
   style?: CSSProperties;

src/components/Arguments/index.tsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
-import { AiFillCloseCircle } from 'react-icons/ai';
-import { motion, AnimatePresence } from 'framer-motion';
-import { EntityType } from 'providers/Project';
-import { useProject } from 'providers/Project/projectHooks';
-import { RemoveToastButton } from 'layout/RemoveToastButton';
-import { useThemeUI, Box, Text, Flex } from 'theme-ui';
 import {
   Account,
   ResultType,
   useSetExecutionResultsMutation,
 } from 'api/apollo/generated/graphql';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RemoveToastButton } from 'layout/RemoveToastButton';
+import { EntityType } from 'providers/Project';
+import { useProject } from 'providers/Project/projectHooks';
+import React, { useEffect, useRef, useState } from 'react';
+import { AiFillCloseCircle } from 'react-icons/ai';
+import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
+import { Box, Flex, Text, useThemeUI } from 'theme-ui';
 
 import { ArgumentsProps } from 'components/Arguments/types';
 import { ExecuteCommandRequest } from 'monaco-languageclient';
 
 import {
   ControlContainer,
-  ToastContainer,
   HoverPanel,
   StatusMessage,
+  ToastContainer,
 } from './styles';
 
 import {
@@ -213,8 +213,11 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
   const [processingStatus, setProcessingStatus] = useState(false);
 
   const [setResult] = useSetExecutionResultsMutation();
-  const { scriptFactory, transactionFactory, contractDeployment } =
-    useTemplateType();
+  const {
+    scriptFactory,
+    transactionFactory,
+    contractDeployment,
+  } = useTemplateType();
   const {
     project,
     active,
@@ -226,9 +229,9 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
   const [notifications, setNotifications] = useState<{
     [identifier: string]: string[];
   }>({});
-  /* eslint-disable */
   // compare 'state' field for each account, set 'notifications' state for new data
-  // @ts-ignore: <- this state is only used to compare and render notifications
+  // <- this state is only used to compare and render notifications
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setProjectAccts] = useState(project.accounts);
   const [counter, setCounter] = useState(0);
   useEffect(() => {

src/components/Avatar.tsx

@@ -16,7 +16,12 @@ const Avatar: React.FC<AvatarProps> = ({ seed, index, style }) => {
   }
 
   return (
-    <img className="avatar" src={avataaar(rng().toString())} style={style} />
+    <img
+      className="avatar"
+      src={avataaar(rng().toString())}
+      style={style}
+      alt="Avatar"
+    />
   );
 };
 

src/components/Button.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Button as ThemedButton } from 'theme-ui';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { FaSpinner } from 'react-icons/fa';
 import { CSSProperties } from 'styled-components';
+import { Button as ThemedButton } from 'theme-ui';
 
 interface StyledButtonProps {
   style?: CSSProperties;
@@ -58,7 +58,7 @@ const StyledButton: React.FC<StyledButtonProps> = styled(ThemedButton)`
 `;
 
 interface ButtonProps {
-  children?: any;
+  children?: React.ReactNode;
   onClick?: any;
   className?: string;
   style?: CSSProperties;

src/components/CadenceEditor/ControlPanel/index.tsx

@@ -1,21 +1,22 @@
 // External Modules
+import {
+  editor as monacoEditor,
+  IPosition,
+} from 'monaco-editor/esm/vs/editor/editor.api';
+import { ExecuteCommandRequest } from 'monaco-languageclient';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   FaExclamationTriangle,
   FaRegCheckCircle,
   FaRegTimesCircle,
   FaSpinner,
 } from 'react-icons/fa';
-import { ExecuteCommandRequest } from 'monaco-languageclient';
-import {
-  IPosition,
-  editor as monacoEditor,
-} from 'monaco-editor/esm/vs/editor/editor.api';
 
 // Project Modules
 import { CadenceCheckerContext } from 'providers/CadenceChecker';
 import { EntityType } from 'providers/Project';
 import { useProject } from 'providers/Project/projectHooks';
+import { CadenceCheckCompleted } from 'util/language-server';
 import {
   CadenceProblem,
   formatMarker,
@@ -26,7 +27,6 @@ import {
   ProblemsList,
 } from 'util/language-syntax-errors';
 import { extractSigners } from 'util/parser';
-import { CadenceCheckCompleted } from 'util/language-server';
 
 // Local Generated Modules
 import {
@@ -35,15 +35,15 @@ import {
 } from 'api/apollo/generated/graphql';
 
 // Component Scoped Files
-import { getLabel, validateByType, useTemplateType } from './utils';
-import { ControlPanelProps, IValue } from './types';
 import {
-  MotionBox,
-  Confirm,
   Cancel,
+  Confirm,
+  MotionBox,
   PromptActionsContainer,
   StatusIcon,
 } from './components';
+import { ControlPanelProps, IValue } from './types';
+import { getLabel, useTemplateType, validateByType } from './utils';
 
 // Other
 import {
@@ -56,13 +56,12 @@ import {
 } from '../../Arguments/components';
 import {
   ControlContainer,
-  HoverPanel,
   Hidable,
+  HoverPanel,
   StatusMessage,
 } from '../../Arguments/styles';
 
 const ControlPanel: React.FC<ControlPanelProps> = (props) => {
-  /* eslint-disable */
   // We should not render this component if editor is non-existent
   if (!props.editor) {
     return null;
@@ -77,8 +76,11 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
   const [executionArguments, setExecutionArguments] = useState({});
   const [processingStatus, setProcessingStatus] = useState(false);
   const [setResult] = useSetExecutionResultsMutation();
-  const { scriptFactory, transactionFactory, contractDeployment } =
-    useTemplateType();
+  const {
+    scriptFactory,
+    transactionFactory,
+    contractDeployment,
+  } = useTemplateType();
   const [selected, updateSelectedAccounts] = useState([]);
   const [expanded, setExpanded] = useState(true);
 
@@ -255,7 +257,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
 
       // Language server throws "input is not literal" without quotes
       if (type === `String`) {
-        value = `\"${value.replace(/"/g, '\\"')}\"`;
+        value = `"${value.replace(/"/g, '\\"')}"`;
       }
 
       return value;