update json imports in app (#871)

* update json imports in app * update eslint configuration (#876) * update eslint configuration * remove eslint, set react version * remove issuetickets component * fix-small-eslint-issues (#963) * fix-small-eslint-issues * set config overrides file as node / common js for eslint
jbx-protocol · May 11, 2022 · 481c50e · 481c50e
1 parent 3331c3b
commit 481c50e
Show file tree

Hide file tree

Showing 25 changed files with 123 additions and 48 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,48 @@
 {
-  "plugins": ["import"],
-  "extends": ["react-app", "react-app/jest", "prettier"],
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "import", "react-hooks"],
+  "overrides": [
+    {
+      "files": ["config-overrides.js"],
+      "env": {
+        "node": true,
+        "commonjs": true
+      }
+    }
+  ],
   "rules": {
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/ban-types": "off",
+    "react/no-children-prop": "off",
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "react/prop-types": "off",
+    "prefer-const": "off",
+    "jsx-a11y/img-redundant-alt": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "error",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/no-redeclare": "error",

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "jest": "26.6.0",
     "**/@typescript-eslint/eslint-plugin": "^4.1.1",
     "**/@typescript-eslint/parser": "^4.1.1",
-    "eslint-plugin-react-hooks": "4.2.0"
+    "eslint-plugin-react-hooks": "4.2.1"
   },
   "scripts": {
     "compile-styles": "lessc ./node_modules/antd/dist/antd.less ./src/styles/antd.css --js",
@@ -93,11 +93,14 @@
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@types/react-router-dom": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "browserify-fs": "^1.0.0",
     "browserify-zlib": "^0.2.0",
     "crypto-browserify": "^3.12.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-react": "^7.29.4",
     "https-browserify": "^1.0.0",
     "husky": "^7.0.0",
     "less": "^4.1.1",

diff --git a/src/components/Landing/QAs.tsx b/src/components/Landing/QAs.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-key */
 import { t, Trans } from '@lingui/macro'
 import ExternalLink from 'components/shared/ExternalLink'
 import { PropsWithChildren } from 'react'

diff --git a/src/components/Navbar/ThemePicker.tsx b/src/components/Navbar/ThemePicker.tsx
@@ -6,7 +6,7 @@ import React, { CSSProperties, useContext } from 'react'
 
 import { ThemeOption } from 'constants/theme/theme-option'
 
-export default function ThemePicker({ mobile }: { mobile?: boolean }) {
+export default function ThemePicker() {
   const {
     themeOption,
     setThemeOption,

diff --git a/src/components/Projects/HoldingsProjects.tsx b/src/components/Projects/HoldingsProjects.tsx
@@ -22,8 +22,8 @@ export default function HoldingsProjects() {
       {projects && projects.length > 0 && (
         <React.Fragment>
           <Grid>
-            {projects.map(p => (
-              <ProjectCard project={p} />
+            {projects.map((p, i) => (
+              <ProjectCard key={i} project={p} />
             ))}
           </Grid>
         </React.Fragment>

diff --git a/src/components/shared/ManageTokensModal.tsx b/src/components/shared/ManageTokensModal.tsx
@@ -82,7 +82,7 @@ export default function ManageTokensModal({
     plural: true,
   })
 
-  const redeemDisabled = !Boolean(hasOverflow)
+  const redeemDisabled = !hasOverflow
   const hasIssuedTokens = tokenAddress && tokenAddress !== constants.AddressZero
 
   return (

diff --git a/src/components/shared/ProjectRiskNotice.tsx b/src/components/shared/ProjectRiskNotice.tsx
@@ -38,8 +38,8 @@ export default function ProjectRiskNotice({
         </Trans>
       </p>
       <ul>
-        {warnings.map(text => (
-          <li>{text}</li>
+        {warnings.map((text, i) => (
+          <li key={i}>{text}</li>
         ))}
       </ul>
     </div>

diff --git a/src/components/shared/TransactionModal.tsx b/src/components/shared/TransactionModal.tsx
@@ -59,9 +59,6 @@ export default function TransactionModal(props: TransactionModalProps) {
     },
   }
 
-  if (props.transactionPending) {
-  }
-
   return (
     <Modal {...modalProps}>
       {props.transactionPending ? (

diff --git a/src/components/shared/formItems/ProjectReserved.tsx b/src/components/shared/formItems/ProjectReserved.tsx
@@ -40,8 +40,6 @@ export default function ProjectReserved({
     theme: { colors },
   } = useContext(ThemeContext)
 
-  const shouldRenderToggle = Boolean(onToggled)
-
   const [showRiskWarning, setShowRiskWarning] = useState<boolean>(
     (value ?? 0) > RESERVED_RATE_WARNING_THRESHOLD_PERCENT,
   )
@@ -94,10 +92,10 @@ export default function ProjectReserved({
       label={
         hideLabel ? undefined : (
           <>
-            {shouldRenderToggle ? (
+            {onToggled ? (
               <SwitchHeading checked={Boolean(checked)} onChange={onToggled}>
                 <Trans>Reserved rate</Trans>
-                {!Boolean(checked) && (
+                {checked && (
                   <span
                     style={{
                       color: colors.text.tertiary,

diff --git a/src/components/shared/formItems/TokenRefs.tsx b/src/components/shared/formItems/TokenRefs.tsx
@@ -16,7 +16,7 @@ export default function TokenRefs({
   return (
     <div>
       {refs.map((r, i) => (
-        <div>
+        <div key={i}>
           <div style={{ display: 'flex', alignItems: 'baseline', height: 40 }}>
             <Button
               style={{ marginRight: 20, width: 100 }}

diff --git a/src/components/shared/inputs/BudgetTargetInput.tsx b/src/components/shared/inputs/BudgetTargetInput.tsx
@@ -25,7 +25,7 @@ export default function BudgetTargetInput({
   target: string | undefined
   targetSubFee: string | undefined
   onTargetChange: (target?: string) => void
-  onTargetSubFeeChange: (target?: string) => void
+  onTargetSubFeeChange?: (target?: string) => void
   onCurrencyChange?: (currency: CurrencyName) => void
   disabled?: boolean
   placeholder?: string
@@ -57,7 +57,7 @@ export default function BudgetTargetInput({
           onClick={() => {
             const newCurrency = _currency === 'USD' ? 'ETH' : 'USD'
             setCurrency(newCurrency)
-            onCurrencyChange(newCurrency)
+            onCurrencyChange?.(newCurrency)
           }}
           content={_currency}
           withArrow
@@ -85,7 +85,7 @@ export default function BudgetTargetInput({
               disabled={disabled}
               accessory={<CurrencySwitch />}
               onChange={newTargetSubFee =>
-                onTargetSubFeeChange(newTargetSubFee?.toString())
+                onTargetSubFeeChange?.(newTargetSubFee?.toString())
               }
             />
           </div>

diff --git a/src/components/shared/inputs/ImageUploader.tsx b/src/components/shared/inputs/ImageUploader.tsx
@@ -44,7 +44,6 @@ export default function ImageUploader({
       <Col xs={24} md={7}>
         <Space align="start">
           {url && (
-            // eslint-disable-next-line jsx-a11y/img-redundant-alt
             <img
               style={{
                 maxHeight: 80,
@@ -54,7 +53,7 @@ export default function ImageUploader({
                 borderRadius: theme.radii.md,
               }}
               src={url}
-              alt="Uploaded image"
+              alt="Uploaded user content"
             />
           )}
 

diff --git a/src/components/shared/modals/IssueTokenModal.tsx b/src/components/shared/modals/IssueTokenModal.tsx
@@ -59,7 +59,7 @@ export default function IssueTokenModal({
       transactionPending={transactionPending}
     >
       <p>
-        {!Boolean(isNewDeploy) ? (
+        {!isNewDeploy ? (
           <Trans>
             Issue an ERC-20 to be used as this project's token. Once issued,
             anyone can claim their existing token balance in the new token.

diff --git a/src/components/v2/V2Create/forms/FundingForm/index.tsx b/src/components/v2/V2Create/forms/FundingForm/index.tsx
@@ -450,7 +450,6 @@ export default function FundingForm({
               targetSubFee={undefined}
               currency={V2CurrencyName(targetCurrency) ?? 'ETH'}
               onTargetChange={setTarget}
-              onTargetSubFeeChange={() => {}}
               onCurrencyChange={currencyName =>
                 setTargetCurrency(getV2CurrencyOption(currencyName))
               }
@@ -515,8 +514,8 @@ export default function FundingForm({
                 },
               ]}
             >
-              {/* Added a hidden input here because Form.Item needs 
-              a child Input to work. Need the parent Form.Item to 
+              {/* Added a hidden input here because Form.Item needs
+              a child Input to work. Need the parent Form.Item to
               validate totalSplitsPercentage */}
               <Input hidden type="string" autoComplete="off" />
             </Form.Item>

diff --git a/src/components/v2/V2Project/V2FundingCycleSection/FundingCycleHistory.tsx b/src/components/v2/V2Project/V2FundingCycleSection/FundingCycleHistory.tsx
@@ -293,6 +293,7 @@ export default function FundingCycleHistory() {
       {pastFundingCycles.length ? (
         pastFundingCycles.map((fundingCycle: V2FundingCycle, i) => (
           <HistoricalFundingCycle
+            key={i}
             fundingCycle={fundingCycle}
             numFundingCycles={pastFundingCycles.length}
             index={i}

diff --git a/src/contexts/themeContext.ts b/src/contexts/themeContext.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { SemanticTheme } from 'models/semantic-theme/theme'
 
 import { createContext } from 'react'
@@ -18,6 +19,7 @@ export type ThemeContextType = {
 export const ThemeContext = createContext<ThemeContextType>({
   themeOption: defaultThemeOption,
   theme: juiceTheme(defaultThemeOption),
-  setThemeOption: (themeOption: ThemeOption) => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setThemeOption: function (themeOption: ThemeOption) {},
   isDarkMode: defaultThemeOption === ThemeOption.dark,
 })
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
@@ -1,2 +1,2 @@
-declare var Desmos
+declare let Desmos
 declare module 'ethereum-block-by-date'
diff --git a/src/hooks/ERC20SushiswapPrice.ts b/src/hooks/ERC20SushiswapPrice.ts
@@ -1,7 +1,7 @@
 import { Token, WETH9, Route, Pair, CurrencyAmount } from '@sushiswap/sdk'
 import { Contract } from '@ethersproject/contracts'
 
-import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
+import IUniswapV2PairABI from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 
 import { useQuery } from 'react-query'
 
@@ -22,7 +22,7 @@ async function fetchPairData(tokenA: Token, tokenB: Token): Promise<Pair> {
 
   const [reserves0, reserves1] = await new Contract(
     pairAddress,
-    IUniswapV2PairABI,
+    IUniswapV2PairABI.abi,
     readProvider,
   ).getReserves()
 

diff --git a/src/hooks/ERC20UniswapPrice.ts b/src/hooks/ERC20UniswapPrice.ts
@@ -3,8 +3,8 @@ import { Token } from '@uniswap/sdk-core'
 import { useQuery } from 'react-query'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Contract } from '@ethersproject/contracts'
-import { abi as IUniswapV3PoolABI } from '@uniswap/v3-core/artifacts/contracts/interfaces/IUniswapV3Pool.sol/IUniswapV3Pool.json'
-import { abi as IUniswapV3FactoryABI } from '@uniswap/v3-core/artifacts/contracts/interfaces/IUniswapV3Factory.sol/IUniswapV3Factory.json'
+import IUniswapV3PoolABI from '@uniswap/v3-core/artifacts/contracts/interfaces/IUniswapV3Pool.sol/IUniswapV3Pool.json'
+import IUniswapV3FactoryABI from '@uniswap/v3-core/artifacts/contracts/interfaces/IUniswapV3Factory.sol/IUniswapV3Factory.json'
 import { FACTORY_ADDRESS as UNISWAP_V3_FACTORY_ADDRESS } from '@uniswap/v3-sdk'
 import * as ethersConstants from '@ethersproject/constants'
 
@@ -52,7 +52,7 @@ const networkId = readNetwork.chainId
 export function useUniswapPriceQuery({ tokenSymbol, tokenAddress }: Props) {
   const factoryContract = new Contract(
     UNISWAP_V3_FACTORY_ADDRESS,
-    IUniswapV3FactoryABI,
+    IUniswapV3FactoryABI.abi,
     readProvider,
   )
 
@@ -133,7 +133,7 @@ export function useUniswapPriceQuery({ tokenSymbol, tokenAddress }: Props) {
 
         const poolContract = new Contract(
           poolAddress,
-          IUniswapV3PoolABI,
+          IUniswapV3PoolABI.abi,
           readProvider,
         )
 

diff --git a/src/hooks/Poller.ts b/src/hooks/Poller.ts
@@ -9,7 +9,7 @@ export function usePoller(
 
   // run at start too
   useEffect(
-    function() {
+    function () {
       fn()
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -18,21 +18,21 @@ export function usePoller(
 
   // Remember the latest fn.
   useEffect(
-    function() {
+    function () {
       savedCallback.current = fn
     },
     [fn],
   )
 
   // Set up the interval.
   useEffect(
-    function() {
+    function () {
       function tick() {
         if (savedCallback.current) savedCallback.current()
       }
 
-      var id_1 = setInterval(tick, delay)
-      return function() {
+      let id_1 = setInterval(tick, delay)
+      return function () {
         return clearInterval(id_1)
       }
     },

diff --git a/src/hooks/ProjectMetadata.ts b/src/hooks/ProjectMetadata.ts
@@ -10,7 +10,7 @@ export function useProjectMetadata(uri: string | undefined) {
       if (!uri) {
         throw new Error('Project URI not specified.')
       }
-      const url = ipfsCidUrl(uri!)
+      const url = ipfsCidUrl(uri)
       const response = await axios.get(url)
       return consolidateMetadata(response.data)
     },

diff --git a/src/hooks/v1/contractReader/ContractReader.ts b/src/hooks/v1/contractReader/ContractReader.ts
@@ -96,7 +96,7 @@ export default function useContractReader<V>({
 
     getValue()
 
-    const listener = (x: any) => getValue() // eslint-disable-line @typescript-eslint/no-explicit-any
+    const listener = () => getValue()
 
     let subscriptions: {
       contract: Contract

diff --git a/src/hooks/v2/contractReader/V2ContractReader.ts b/src/hooks/v2/contractReader/V2ContractReader.ts
@@ -102,7 +102,7 @@ export default function useV2ContractReader<V>({
 
     getValue()
 
-    const listener = (x: any) => getValue() // eslint-disable-line @typescript-eslint/no-explicit-any
+    const listener = () => getValue()
 
     let subscriptions: {
       contract: Contract

diff --git a/src/models/semantic-theme/colors.ts b/src/models/semantic-theme/colors.ts
@@ -1,5 +1,6 @@
 import { Property } from 'csstype'
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
 namespace SemanticColor {
   export type Primary = { primary: Property.Color }
   export type Secondary = { secondary: Property.Color }