feat: Add reasonable linter configuration and lint everything

packages/react-app/.eslintrc.js

@@ -1,32 +1,12 @@
 module.exports = {
   env: {
     browser: true,
+    es6: true,
   },
-  parser: "babel-eslint",
-  extends: [/*"airbnb"*/ "plugin:prettier/recommended", "plugin:react/recommended", "plugin:@next/next/recommended"],
-  plugins: [
-    /*"babel"*/
-  ],
+  extends: ["eslint:recommended", "prettier", "next"],
   rules: {
-    "prettier/prettier": "warn",
-    "prettier/prettier": [
-      "warn",
-      {
-        endOfLine: "auto",
-      },
-    ],
-    "import/prefer-default-export": "off",
-    "prefer-destructuring": "off",
-    "prefer-template": "off",
-    "react/prop-types": "off",
-    "react/destructuring-assignment": "off",
-    "no-console": "off",
-    "jsx-a11y/accessible-emoji": ["off"],
-    "jsx-a11y/click-events-have-key-events": ["off"],
-    "jsx-a11y/no-static-element-interactions": ["off"],
-    "no-underscore-dangle": "off",
-    "no-nested-ternary": "off",
-    "no-restricted-syntax": "off",
-    "no-plusplus": "off",
+    "no-console": "warn",
+    "no-undef": "error",
+    "react-hooks/rules-of-hooks": "warn",
   },
 };

packages/react-app/components/Account.jsx

@@ -55,7 +55,7 @@ export default function Account({
 }) {
   const handleLogout = async () => {
     try {
-      const result = await axios(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
+      await axios(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
         method: "post",
         withCredentials: true
     });

packages/react-app/components/DevUI.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-import { Row, Col, Button } from "antd";
-import { Account, Ramp, GasGauge, Faucet, ThemeSwitch } from ".";
-import { NETWORKS } from "../constants";
+import { Account, ThemeSwitch } from ".";
 import { Web3Consumer } from "../helpers/Web3Context";
 
 function DevUI({ web3 }) {

packages/react-app/components/L2Bridge.jsx

@@ -25,7 +25,7 @@ export default function L2ArbitrumBridge({ address, userSigner }) {
   const [L1Provider, setL1Provider] = useState("");
   const [L2Provider, setL2Provider] = useState("");
   const [rollup, setRollup] = useState("arbitrum");
-  const [environment, setEnvironment] = useState("test");
+  const [environment] = useState("test");
 
   const rollupConfig = {
     arbitrum: {
@@ -156,10 +156,6 @@ export default function L2ArbitrumBridge({ address, userSigner }) {
     }
   }
 
-  const onReset = () => {
-    form.resetFields();
-  };
-
   const wrongNetwork = selectedChainId !== activeConfig.L1.chainId;
 
   return (

packages/react-app/components/Swap.jsx

@@ -45,7 +45,6 @@ const makeCall = async (callName, contract, args, metadata = {}) => {
     return result;
   }
   return undefined;
-  console.log("no call of that name!");
 };
 
 const defaultToken = "ETH";

packages/react-app/components/ThemeSwitch.jsx

@@ -5,7 +5,7 @@ import { useThemeSwitcher } from "react-css-theme-switcher";
 export default function ThemeSwitcher() {
   const theme = window.localStorage.getItem("theme");
   const [isDarkMode, setIsDarkMode] = useState(!(!theme || theme === "light"));
-  const { switcher, currentTheme, status, themes } = useThemeSwitcher();
+  const { switcher, currentTheme, themes } = useThemeSwitcher();
 
   useEffect(() => {
     window.localStorage.setItem("theme", currentTheme);

packages/react-app/components/cards/MediaCard.jsx

@@ -1,20 +1,13 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useColorModeValue } from "@chakra-ui/color-mode";
-import { Box, Flex, Stack, Heading, Code, HStack, VStack } from "@chakra-ui/layout";
+import { Box, Flex, Stack, Heading, HStack, VStack } from "@chakra-ui/layout";
 import {
   Avatar,
-  Popover,
-  PopoverTrigger,
   Image,
   Button,
   Text,
-  PopoverContent,
-  PopoverArrow,
-  PopoverCloseButton,
-  PopoverHeader,
   Tag,
   TagLabel,
-  SimpleGrid,
   useToast,
   useDisclosure,
   Modal,
@@ -28,7 +21,7 @@ import {
   Input,
   Checkbox,
 } from "@chakra-ui/react";
-import { Icon, EmailIcon, InfoIcon, PhoneIcon, LinkIcon } from "@chakra-ui/icons";
+import { Icon, EmailIcon, PhoneIcon, LinkIcon } from "@chakra-ui/icons";
 import { BsFillPersonLinesFill } from "react-icons/bs";
 import { GrLocation } from "react-icons/gr";
 import { ethers } from "ethers";
@@ -51,10 +44,7 @@ function MediaCard({
   twitter,
   hasWebAccount,
   github,
-  primaryActionOnClick,
   primaryAction,
-  secondaryActionOnClick,
-  secondaryAction,
   privateProfile,
   dRecruitContract,
   tokenContract,
@@ -74,7 +64,6 @@ function MediaCard({
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
-    let isValidRecipient = false;
     (async () => {
       try {
         const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/unlock/${privateProfile.tokenId}`, {
@@ -145,7 +134,7 @@ function MediaCard({
         ),
         status: "success",
       });
-      const receipt = await tx.wait();
+      await tx.wait();
       toast({
         title: "Request transaction confirmed",
         description: (
@@ -222,7 +211,8 @@ function MediaCard({
 
               {currAllowance && currAllowance.lt(ethers.constants.MaxUint256) && (
                 <HStack>
-                  <Checkbox defaultIsChecked
+                  <Checkbox
+                    defaultIsChecked
                     value={unlimitedAllowanceWanted}
                     onChange={e => setUnlimitedAllowanceWanted(e.target.checked)}
                   >

packages/react-app/components/inputs/PhoneNumberInput.jsx

@@ -4,7 +4,7 @@ import Flag from "react-world-flags";
 import { AsYouType } from "libphonenumber-js";
 import { getCountryTelCode } from "../../helpers/countries";
 
-export default function PhoneNumberInput({ size, value, country, options, onChange, setValue, placeholder, ...rest }) {
+export default function PhoneNumberInput({ size, value, country, options, onChange, placeholder, ...rest }) {
   let [number, setNumber] = useState(value || "");
   let [selectedCountry, setSelectedCountry] = useState(country || "");
   let [countryCode, setCountryCode] = useState(getCountryTelCode(country) || "");

packages/react-app/components/layout/HomeActions.jsx

@@ -1,21 +1,10 @@
 import { Button, HStack } from "@chakra-ui/react";
-import { Box, Flex, Heading } from "@chakra-ui/layout";
-import { ethers } from "ethers";
+import { Flex, Heading } from "@chakra-ui/layout";
 import { useRouter } from "next/dist/client/router";
 import React from "react";
 
-export const HomeActions = ({ contract, mySelf }) => {
+export const HomeActions = () => {
   const router = useRouter();
-  const handleJoinAsRecruiter = async () => {
-    const tx = await contract.joinDrecruiterAsRecruiter(mySelf.id, {
-      value: ethers.utils.parseEther("0.1"),
-    });
-    const receipt = await tx.wait();
-    console.log({ receipt });
-  };
-  const handleRouteChange = () => {
-    return router.push();
-  };
   return (
     <Flex flexDirection="column" justifyContent="center" alignItems="center" w="full">
       <Heading>Welcome to recruiter.party!</Heading>

packages/react-app/helpers/Web3Context.js

@@ -5,14 +5,14 @@ import { Alert, Button } from "antd";
 import axios from "axios";
 import "antd/dist/antd.css";
 import Authereum from "authereum";
-import { useBalance, useContractLoader, useGasPrice, useOnBlock, useUserProviderAndSigner } from "eth-hooks";
+import { useBalance, useContractLoader, useGasPrice, useUserProviderAndSigner } from "eth-hooks";
 import { useExchangeEthPrice } from "eth-hooks/dapps/dex";
 import Fortmatic from "fortmatic";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 //import Torus from "@toruslabs/torus-embed"
 // import WalletLink from "walletlink";
 import Web3Modal from "web3modal";
-import { INFURA_ID, NETWORK, NETWORKS } from "../constants";
+import { INFURA_ID, NETWORKS } from "../constants";
 import { Transactor } from "../helpers";
 import { useContractConfig } from "../hooks";
 import { CERAMIC_TESTNET } from "../ceramic";
@@ -24,7 +24,7 @@ const { ethers } = require("ethers");
 export const Web3Context = React.createContext({});
 
 // provider Component that wraps the entire app and provides context variables
-export function Web3Provider({ children, network = "localhost", DEBUG = false, NETWORKCHECK = true, ...props }) {
+export function Web3Provider({ children, network = "localhost", DEBUG = false, NETWORKCHECK = true }) {
   // for Nextjs Builds, return null until "window" is available
   if (!global.window) {
     return null;
@@ -264,8 +264,6 @@ export function Web3Provider({ children, network = "localhost", DEBUG = false, N
 
   let networkDisplay = "";
   if (NETWORKCHECK && localChainId && selectedChainId && localChainId !== selectedChainId) {
-    const networkSelected = NETWORK(selectedChainId);
-    const networkLocal = NETWORK(localChainId);
     if (selectedChainId === 1337 && localChainId === 31337) {
       networkDisplay = (
         <div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
@@ -345,7 +343,7 @@ export function Web3Provider({ children, network = "localhost", DEBUG = false, N
     });
 
     // Subscribe to session disconnection
-    connection.on("disconnect", (code, reason) => {
+    connection.on("disconnect", () => {
       logoutOfWeb3Modal();
     });
   }, [setInjectedProvider]);

packages/react-app/helpers/index.js

@@ -19,7 +19,7 @@ export const loadTokenContract = async (address, signer) => {
 };
 
 export const getDidFromTokenURI = tokenURI => {
-  const [ipfsWithColon, _, cid, didFilename] = tokenURI.split("/");
+  const [, , cid, didFilename] = tokenURI.split("/");
   const [did] = didFilename.split(".json");
   return {
     did,