revert to react-script 4

KyberNetwork · Aug 3, 2022 · 3ece36a · 3ece36a
1 parent 4565876
commit 3ece36a
Show file tree

Hide file tree

Showing 17 changed files with 3,682 additions and 4,597 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -41,10 +41,14 @@
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/camelcase": "off",
     "react/prop-types": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "no-duplicate-imports": "error",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-pascal-case": "off",
+    "@typescript-eslint/no-var-requires": "off"
+
   }
 }
diff --git a/config-overrides.js b/config-overrides.js
@@ -5,20 +5,6 @@ const CompressionPlugin = require('compression-webpack-plugin')
 module.exports = function override(config, env) {
   config = rewireStyledComponents(config, env)
 
-  let loaders = config.resolve
-  loaders.fallback = {
-    // "fs": false,
-    // "tls": false,
-    // "net": false,
-    // "http": require.resolve("stream-http"),
-    // "https": false,
-    // "zlib": require.resolve("browserify-zlib") ,
-    // "path": require.resolve("path-browserify"),
-    // "stream": require.resolve("stream-browserify"),
-    // "util": require.resolve("util/"),
-    crypto: require.resolve('crypto-browserify'),
-  }
-
   config.optimization = {
     ...config.optimization,
     moduleIds: 'named',

diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
     "@lingui/cli": "^3.14.0",
     "@lingui/loader": "^3.14.0",
     "@lingui/macro": "^3.14.0",
-    "@pangolindex/web3-react-injected-connector": "1.0.1",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
@@ -34,8 +33,8 @@
     "@types/rebass__forms": "^4.0.4",
     "@types/styled-components": "^5.1.25",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.32.0",
+    "@typescript-eslint/eslint-plugin": "^4",
+    "@typescript-eslint/parser": "^4",
     "@uniswap/token-lists": "^1.0.0-beta.21",
     "@walletconnect/web3-provider": "^1.5.0",
     "@web3-react/core": "^6.0.9",
@@ -50,7 +49,7 @@
     "cids": "^1.0.0",
     "compression-webpack-plugin": "^6.1.1",
     "copy-to-clipboard": "^3.2.0",
-    "eslint": "^8.21.0",
+    "eslint": "^7.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
@@ -72,7 +71,7 @@
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.0.0",
-    "react-scripts": "^5.0.1",
+    "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -98,11 +97,11 @@
     "start-local": "env-cmd -f .env.local react-app-rewired start",
     "start-dev": "env-cmd -f .env.dev react-app-rewired start",
     "start-stg": "env-cmd -f .env.stg react-app-rewired start",
-    "start-production": "env-cmd -f .env.production react-scripts start",
+    "start-production": "env-cmd -f .env.production react-app-rewired start",
     "build": "yarn i18n && react-app-rewired build",
     "build-dev": "yarn i18n && env-cmd -f .env.dev react-app-rewired build",
     "build-stg": "yarn i18n && env-cmd -f .env.stg react-app-rewired build",
-    "build-prod": "yarn i18n && env-cmd -f .env.production react-scripts build",
+    "build-prod": "yarn i18n && env-cmd -f .env.production react-app-rewired build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -141,8 +140,6 @@
     "@types/recharts": "^1.8.23",
     "@uniswap/default-token-list": "^2.0.0",
     "aos": "^2.3.4",
-    "assert": "npm:assert",
-    "crypto": "npm:crypto-browserify",
     "d3": "^7.3.0",
     "dayjs": "^1.10.7",
     "env-cmd": "^10.1.0",
@@ -163,7 +160,6 @@
     "react-player": "^2.9.0",
     "react-use": "^15.3.4",
     "recharts": "^2.1.13",
-    "stream": "npm:stream-browserify",
     "swiper": "^8.0.7",
     "swr": "^1.0.1",
     "uuidv4": "^6.2.12"

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -130,7 +130,7 @@ function Footer() {
                 src={
                   !isDarkMode
                     ? 'https://chainsecurity.com/wp-content/themes/chainsecurity-wp/resources/images/temp/logo.svg'
-                    : require('../../assets/svg/chainsecurity.svg')
+                    : require('../../assets/svg/chainsecurity.svg').default
                 }
                 alt=""
                 width="98px"

diff --git a/src/components/MenuFlyout/index.tsx b/src/components/MenuFlyout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import styled, { css } from 'styled-components'
 import { BrowserView, MobileView, isMobile } from 'react-device-detect'
 import Modal from 'components/Modal'
@@ -80,23 +80,19 @@ const MenuFlyout = (props: {
   hasArrow?: boolean
 }) => {
   useOnClickOutside(props.node, props.isOpen && !isMobile ? props.toggle : undefined)
-  const BrowserStyle = useMemo(
-    () => styled.span`
-      ${BrowserDefaultStyle}
-      ${props.hasArrow ? Arrow : ''}
+
+  const BrowserStyle = styled.span`
+    ${BrowserDefaultStyle}
+    ${props.hasArrow ? Arrow : ''}
       ${props.browserCustomStyle}
-    `,
-    [props.browserCustomStyle, props.hasArrow],
-  )
-  const MobileStyle = useMemo(
-    () => styled.span`
-      ${MobileDefaultStyle}
-      ${props.mobileCustomStyle}
-    `,
-    [props.mobileCustomStyle],
-  )
+  `
+
+  const MobileStyle = styled.span`
+    ${MobileDefaultStyle}
+    ${props.mobileCustomStyle}
+  `
 
-  if (!props.isOpen) return <></>
+  if (!props.isOpen) return null
   return (
     <>
       <BrowserView>

diff --git a/src/components/TradingViewChart/datafeed.tsx b/src/components/TradingViewChart/datafeed.tsx
@@ -184,7 +184,7 @@ export const checkPairHasDextoolsData = async (
   if (currencyA.isNative || currencyB.isNative) {
     const token = (currencyA.isToken ? currencyA : currencyB) as Token
     if (token?.address) {
-      const data1 = await searchTokenPair(token.address, chainId)
+      const data1: { id: string }[] = await searchTokenPair(token.address, chainId)
       if (data1.length > 0 && data1[0].id) {
         const ver = (await getHistoryCandleStatus(data1[0].id, chainId)) || 0
 

diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx
@@ -252,7 +252,7 @@ export default function WalletModal({
               link={option.href}
               header={option.name}
               subheader={null}
-              icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`)}
+              icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`).default}
             />
           )
         }
@@ -271,7 +271,7 @@ export default function WalletModal({
                 header={'Install Metamask'}
                 subheader={null}
                 link={'https://metamask.io/'}
-                icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`)}
+                icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`).default}
               />
             )
           } else {
@@ -297,7 +297,7 @@ export default function WalletModal({
               color={'#E8831D'}
               header={'Install Coin98'}
               link={'https://coin98.com/'}
-              icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`)}
+              icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`).default}
             />
           )
         }
@@ -321,7 +321,7 @@ export default function WalletModal({
             link={option.href}
             header={option.name}
             subheader={null} //use option.descriptio to bring back multi-line
-            icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`)}
+            icon={require(`../../assets/images/${isDarkMode ? '' : 'light-'}${option.iconName}`).default}
           />
         )
       )

diff --git a/src/components/swapv2/AdvancedSwapDetails.tsx b/src/components/swapv2/AdvancedSwapDetails.tsx
@@ -73,12 +73,14 @@ function TradeSummary({ trade, feeConfig, allowedSlippage }: TradeSummaryProps)
               <TYPE.black color={theme.text} fontSize={12}>
                 {isExactIn
                   ? !!slippageAdjustedAmounts[Field.OUTPUT]
-                    ? `${formattedNum(slippageAdjustedAmounts[Field.OUTPUT]!.toSignificant(10))} ${
+                    ? `${formattedNum(slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(10) || '0')} ${
                         nativeOutput?.symbol
                       }`
                     : '-'
                   : !!slippageAdjustedAmounts[Field.INPUT]
-                  ? `${formattedNum(slippageAdjustedAmounts[Field.INPUT]!.toSignificant(10))} ${nativeInput?.symbol}`
+                  ? `${formattedNum(slippageAdjustedAmounts[Field.INPUT]?.toSignificant(10) || '0')} ${
+                      nativeInput?.symbol
+                    }`
                   : '-'}
               </TYPE.black>
             </RowFixed>

diff --git a/src/connectors/NetworkConnector.ts b/src/connectors/NetworkConnector.ts
@@ -102,7 +102,12 @@ class MiniRpcProvider implements AsyncSendable {
   }
 
   public readonly sendAsync = (
-    request: { jsonrpc: '2.0'; id: number | string | null; method: string; params?: unknown[] | object },
+    request: {
+      jsonrpc: '2.0'
+      id: number | string | null
+      method: string
+      params?: unknown[] | Record<string, unknown>
+    },
     callback: (error: any, response: any) => void,
   ): void => {
     this.request(request.method, request.params)
@@ -112,7 +117,7 @@ class MiniRpcProvider implements AsyncSendable {
 
   public readonly request = async (
     method: string | { method: string; params: unknown[] },
-    params?: unknown[] | object,
+    params?: unknown[] | Record<string, unknown>,
   ): Promise<unknown> => {
     if (typeof method !== 'string') {
       return this.request(method.method, method.params)

diff --git a/src/connectors/index.ts b/src/connectors/index.ts
@@ -1,5 +1,5 @@
 import { Web3Provider } from '@ethersproject/providers'
-// import { InjectedConnector } from '@web3-react/injected-connector'
+import { InjectedConnector } from '@web3-react/injected-connector'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 import { PortisConnector } from '@web3-react/portis-connector'
@@ -9,7 +9,7 @@ import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
 import { ChainId } from '@kyberswap/ks-sdk-core'
 
-import { InjectedConnector } from '@pangolindex/web3-react-injected-connector'
+// import { InjectedConnector } from '@pangolindex/web3-react-injected-connector'
 import { NETWORKS_INFO, SUPPORTED_NETWORKS } from 'constants/networks'
 
 const NETWORK_URL = NETWORKS_INFO[ChainId.MAINNET].rpcUrl

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
 import 'inter-ui'
-import React, { StrictMode, useEffect } from 'react'
+import { StrictMode, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
@@ -20,7 +20,8 @@ import getLibrary from './utils/getLibrary'
 import SEO from './components/SEO'
 import TagManager from 'react-gtm-module'
 import * as Sentry from '@sentry/react'
-import 'swiper/css'
+import 'swiper/swiper-bundle.min.css'
+import 'swiper/swiper.min.css'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 

diff --git a/src/pages/About/AboutKNC.tsx b/src/pages/About/AboutKNC.tsx
@@ -377,7 +377,7 @@ function AboutKNC() {
               {LIST_WALLETS.map(wallet => (
                 <img
                   key={wallet.logo}
-                  src={require(`../../assets/wallets/${isDarkMode ? wallet.logo : wallet.lightLogo}.svg`)}
+                  src={require(`../../assets/wallets/${isDarkMode ? wallet.logo : wallet.lightLogo}.svg`).default}
                   alt={wallet.logo}
                   style={{ margin: 'auto' }}
                 />
@@ -398,7 +398,7 @@ function AboutKNC() {
                 <SwiperSlide key={wallet.logo}>
                   <ExchangeWrapper>
                     <img
-                      src={require(`../../assets/wallets/${isDarkMode ? wallet.logo : wallet.lightLogo}.svg`)}
+                      src={require(`../../assets/wallets/${isDarkMode ? wallet.logo : wallet.lightLogo}.svg`).default}
                       alt={wallet.logo}
                       width="160px"
                       style={{ margin: 'auto' }}

diff --git a/src/pages/About/AboutKyberSwap.tsx b/src/pages/About/AboutKyberSwap.tsx
@@ -92,7 +92,7 @@ const ForTraderInfoRow = styled.div`
   flex: 1 1 100%;
   display: flex;
   ${({ theme }) => theme.mediaWidth.upToLarge`
-    flex: 1;  
+    flex: 1;
     gap: 24px;
     width: 100%;
     height: 100%;
@@ -107,7 +107,7 @@ const ForTraderInfoCell = styled.div`
   align-items: center;
 
   ${({ theme }) => theme.mediaWidth.upToLarge`
-    flex: 1;  
+    flex: 1;
   `}
 `
 
@@ -895,7 +895,7 @@ function AboutKyberSwap() {
                       src={
                         !isDarkMode
                           ? 'https://chainsecurity.com/wp-content/themes/chainsecurity-wp/resources/images/temp/logo.svg'
-                          : require('../../assets/svg/chainsecurity.svg')
+                          : require('../../assets/svg/chainsecurity.svg').default
                       }
                       alt="security"
                       width={above992 ? '197px' : '140px'}
@@ -932,7 +932,7 @@ function AboutKyberSwap() {
                   <Trans>Bug Bounty</Trans>
                 </Text>
                 <img
-                  src={require('../../assets/svg/about_icon_bug_bounty.svg')}
+                  src={require('../../assets/svg/about_icon_bug_bounty.svg').default}
                   alt="bugbounty"
                   width={above992 ? '186px' : '140px'}
                 />
@@ -983,36 +983,40 @@ function AboutKyberSwap() {
               <img
                 src={
                   isDarkMode
-                    ? require('../../assets/svg/about_icon_kyber.svg')
-                    : require('../../assets/svg/about_icon_kyber_light.svg')
+                    ? require('../../assets/svg/about_icon_kyber.svg').default
+                    : require('../../assets/svg/about_icon_kyber_light.svg').default
                 }
                 alt="kyber_icon"
                 width="100%"
               />
               <img
                 src={
                   isDarkMode
-                    ? require('../../assets/svg/about_icon_ethereum.png')
-                    : require('../../assets/svg/about_icon_ethereum_light.png')
+                    ? require('../../assets/svg/about_icon_ethereum.png').default
+                    : require('../../assets/svg/about_icon_ethereum_light.png').default
                 }
                 alt="ethereum_icon"
                 width="100%"
               />
-              <img src={require('../../assets/svg/about_icon_bsc.svg')} alt="bsc_icon" width="100%" />
+              <img src={require('../../assets/svg/about_icon_bsc.svg').default} alt="bsc_icon" width="100%" />
               <PolygonLogoFull />
-              <img src={require('../../assets/svg/about_icon_avalanche.svg')} alt="avalanche_icon" width="100%" />
+              <img
+                src={require('../../assets/svg/about_icon_avalanche.svg').default}
+                alt="avalanche_icon"
+                width="100%"
+              />
               <FantomLogoFull color={isDarkMode ? '#fff' : '#1969FF'} width="100%" height="unset" />
               <CronosLogoFull color={isDarkMode ? undefined : '#142564'} />
               <img
-                src={require(`../../assets/images/Arbitrum_HorizontalLogo${isDarkMode ? '-dark' : ''}.svg`)}
+                src={require(`../../assets/images/Arbitrum_HorizontalLogo${isDarkMode ? '-dark' : ''}.svg`).default}
                 alt=""
                 width="100%"
               />
               <VelasLogoFull color={isDarkMode ? undefined : 'black'} />
               <AuroraFull />
               <OasisLogoFull />
               <img
-                src={require(`../../assets/images/btt-logo${isDarkMode ? '-dark' : ''}.svg`)}
+                src={require(`../../assets/images/btt-logo${isDarkMode ? '-dark' : ''}.svg`).default}
                 alt="btt"
                 width="100%"
               />

diff --git a/src/state/farms/promm/hooks.ts b/src/state/farms/promm/hooks.ts
@@ -466,7 +466,7 @@ export const useProMMFarmTVL = (fairlaunchAddress: string, pid: number) => {
 
   return useMemo(() => {
     let tvl = 0
-    data?.joinedPositions.map(({ position, pool }) => {
+    data?.joinedPositions.forEach(({ position, pool }) => {
       const token0 = new Token(chainId as ChainId, pool.token0.id, Number(pool.token0.decimals), pool.token0.symbol)
       const token1 = new Token(chainId as ChainId, pool.token1.id, Number(pool.token1.decimals), pool.token1.symbol)
       const poolObj = new Pool(

diff --git a/src/utils/aggregator.ts b/src/utils/aggregator.ts
@@ -25,7 +25,7 @@ export const getExchangeConfig = (exchange: string, chainId: ChainId): ExchangeC
     return {} as ExchangeConfig
   }
   const getKeyValue =
-    <T extends object, U extends keyof T>(obj: T) =>
+    <T extends Record<string, unknown>, U extends keyof T>(obj: T) =>
     (key: U) =>
       obj[key]
   const ids = (chainId && dexIds[chainId]) || {}