yarn add react scripts 5

Add rewired to project (#868) * add rewire to project * add rewire commands * add missing polyfills and modules (#869) * add missing polyfills and modules * remove unused code * update uniswap v3 sdk (#870) * update uniswap v3 sdk * 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 fix linting issues from main bump eslint dep fix up remaining tyscript issues fix CI build bump jest, configure jest, configure eslint fix package lock
jbx-protocol · May 21, 2022 · 24ca3b5 · 24ca3b5
1 parent fb97d73
commit 24ca3b5
Show file tree

Hide file tree

Showing 32 changed files with 5,482 additions and 4,581 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", "jest.config.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/config-overrides.js b/config-overrides.js
@@ -0,0 +1,28 @@
+const webpack = require('webpack')
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {}
+  require('react-app-rewire-postcss')(config /*, options */)
+
+  Object.assign(fallback, {
+    crypto: require.resolve('crypto-browserify'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    os: require.resolve('os-browserify'),
+    stream: require.resolve('stream-browserify'),
+    zlib: require.resolve('browserify-zlib'),
+    path: require.resolve('path-browserify'),
+    tty: require.resolve('tty-browserify'),
+    fs: require.resolve('browserify-fs'),
+  })
+  config.resolve.fallback = fallback
+
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ])
+  config.ignoreWarnings = [/Failed to parse source map/]
+  return config
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  extensionsToTreatAsEsm: ['.ts'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+    },
+  },
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+}
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@types/react-redux": "^7.1.16",
     "@uniswap/sdk": "3.0.3",
     "@uniswap/sdk-core": "3.0.1",
-    "@uniswap/v3-sdk": "3.6.3",
+    "@uniswap/v3-sdk": "3.8.2",
     "@walletconnect/web3-provider": "^1.5.4",
     "antd": "4.18.0",
     "autolinker": "^3.14.3",
@@ -38,26 +38,20 @@
     "react-query": "^3.33.2",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "recharts": "^2.1.2",
     "sass": "^1.38.1",
     "typescript": "^4.0.3",
     "use-deep-compare-effect": "^1.6.1",
     "web-vitals": "^0.2.4"
   },
-  "resolutions": {
-    "jest": "26.6.0",
-    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
-    "**/@typescript-eslint/parser": "^4.1.1",
-    "eslint-plugin-react-hooks": "4.2.0"
-  },
   "scripts": {
     "compile-styles": "lessc ./node_modules/antd/dist/antd.less ./src/styles/antd.css --js",
-    "start": "yarn compile-styles && ESLINT_NO_DEV_ERRORS=true react-scripts start",
-    "build": "react-scripts build",
+    "start": "yarn compile-styles && ESLINT_NO_DEV_ERRORS=true react-app-rewired start",
+    "build": "react-app-rewired build",
     "prebuild": "yarn compile-styles && yarn i18n:compile",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./",
     "lint:fix": "yarn lint --fix",
     "lint-staged": "lint-staged",
@@ -88,20 +82,38 @@
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.0",
+    "@types/ethereum-block-by-date": "^1.4.1",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.180",
     "@types/node": "^12.0.0",
     "@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",
+    "jest": "^28.1.0",
+    "jest-watch-typeahead": "0.6.5",
     "less": "^4.1.1",
     "lint-staged": "^12.1.1",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "postcss-normalize": "^10.0.1",
     "prettier": "2.4.1",
     "react-test-renderer": "^17",
     "source-map-explorer": "^2.5.2",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "react-app-rewire-postcss": "^3.0.2",
+    "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "tty-browserify": "^0.0.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
@@ -34,8 +34,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/Projects/MyProjects.tsx b/src/components/Projects/MyProjects.tsx
@@ -44,8 +44,8 @@ export default function MyProjects() {
     <>
       {projects && projects.length > 0 && (
         <Grid>
-          {projects.map(p => (
-            <ProjectCard project={p} />
+          {projects.map((p, i) => (
+            <ProjectCard key={i} project={p} />
           ))}
         </Grid>
       )}

diff --git a/src/components/Projects/index.tsx b/src/components/Projects/index.tsx
@@ -9,7 +9,7 @@ import { ProjectCategory } from 'models/project-visibility'
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 
 import Grid from 'components/shared/Grid'
-import ProjectCard from 'components/shared/ProjectCard'
+import ProjectCard, { ProjectCardProject } from 'components/shared/ProjectCard'
 
 import { Link, useHistory, useLocation } from 'react-router-dom'
 
@@ -229,7 +229,7 @@ export default function Projects() {
           {concatenatedPages && (
             <Grid
               children={concatenatedPages.map((p, i) => (
-                <ProjectCard key={i} project={p} />
+                <ProjectCard key={i} project={p as ProjectCardProject} />
               ))}
             />
           )}

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/ProjectCard.tsx b/src/components/shared/ProjectCard.tsx
@@ -21,7 +21,7 @@ import { V1ArchivedProjectIds } from '../../constants/v1/archivedProjects'
 import Loading from './Loading'
 import { V2ArchivedProjectIds } from 'constants/v2/archivedProjects'
 
-type ProjectCardProject = Pick<
+export type ProjectCardProject = Pick<
   Project,
   | 'id'
   | 'handle'

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/VolumeChart/loadBlockRefs.ts b/src/components/shared/VolumeChart/loadBlockRefs.ts
@@ -23,6 +23,7 @@ export const loadBlockRefs = async ({
       duration,
       false,
     )
+    // @ts-expect-error
     .then((res: (BlockRef & { block: number })[]) => {
       const newBlockRefs: BlockRef[] = []
       const blocksCount = 40

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
@@ -49,7 +49,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,
@@ -59,7 +58,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
@@ -66,7 +66,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/v1/V1Project/V1PayButton.tsx b/src/components/v1/V1Project/V1PayButton.tsx
@@ -87,7 +87,7 @@ export default function V1PayButton({
       <Tooltip
         title={disabledMessage}
         className="block"
-        visible={Boolean(disabledMessage) ? undefined : false}
+        visible={disabledMessage ? undefined : false}
       >
         <Button
           style={{ width: '100%' }}

diff --git a/src/components/v2/V2Create/forms/FundingForm/index.tsx b/src/components/v2/V2Create/forms/FundingForm/index.tsx
@@ -477,7 +477,6 @@ export default function FundingForm({
               targetSubFee={undefined}
               currency={V2CurrencyName(targetCurrency) ?? 'ETH'}
               onTargetChange={setTarget}
-              onTargetSubFeeChange={() => {}}
               onCurrencyChange={currencyName =>
                 setTargetCurrency(getV2CurrencyOption(currencyName))
               }
@@ -542,8 +541,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}