Fix settings page (#1457)

* stricter and more correct types * fix wcResolver * fix error accumulation in reducer * Typescript 4.0 update (#1458) * update TS and related dependencies * more type correct isPromise util * change deprecated rules * don't use Function as type * don't use {} as type * use labeled tuples * fix import for declare module * (TypeScript/issues/28097) * type useParams * type LastTradeWidget gql params * lint fixes
gnosis · Oct 5, 2020 · a11c72f · a11c72f
1 parent 4264c42
commit a11c72f
Show file tree

Hide file tree

Showing 21 changed files with 1,005 additions and 774 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,7 +35,7 @@ module.exports = {
       },
     },
   ],
-  plugins: ['react-hooks'],
+  plugins: ['react-hooks', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use

diff --git a/package.json b/package.json
@@ -99,8 +99,8 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/styled-components": "^5.0.1",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
-    "@typescript-eslint/parser": "^2.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.7",
@@ -112,35 +112,35 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-jest": "^23.6.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "eslint-utils": ">=2.0.0",
+    "eslint": "^7.10.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.0.2",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.2",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-utils": ">=2.1.0",
     "favicons-webpack-plugin": "^3.0.1",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "frontmatter-markdown-loader": "^3.2.1",
     "html-webpack-plugin": "^4.0.0-beta.11",
     "husky": "^4.2.1",
     "image-webpack-loader": "^6.0.0",
-    "jest": "^25.1.0",
+    "jest": "^26.4.2",
     "jest-enzyme": "^7.1.2",
     "markdown-it-link-attributes": "^3.0.0",
     "preload-webpack-plugin": "^3.0.0-beta.4",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.2",
     "react-dev-utils": "^10.0.0",
     "react-inspector": "^5.1.0",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.1",
     "style-loader": "^1.1.3",
-    "ts-jest": "^25.1.0",
+    "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.3",
-    "typescript": "^3.9.5",
+    "typescript": "^4.0.3",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,90 +11,103 @@ import GlobalStyles from 'styles/global'
 import { SwapLayout, TradingLayout } from 'components/layout'
 
 // Pages
-const About = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Extra_routes_chunk"*/
-    'pages/About'
-  ),
+const About = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Extra_routes_chunk"*/
+      'pages/About'
+    ),
 )
 
-const Trade = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Trade_chunk"*/
-    'pages/Trade'
-  ),
+const Trade = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Trade_chunk"*/
+      'pages/Trade'
+    ),
 )
 
-const Trades = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Trade_chunk"*/
-    'pages/Trades'
-  ),
+const Trades = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Trade_chunk"*/
+      'pages/Trades'
+    ),
 )
 
-const Trading = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Trade_chunk"*/
-    'pages/Trading'
-  ),
+const Trading = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Trade_chunk"*/
+      'pages/Trading'
+    ),
 )
 
-const Strategies = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Strategies_chunk"*/
-    'pages/Strategies'
-  ),
+const Strategies = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Strategies_chunk"*/
+      'pages/Strategies'
+    ),
 )
 
-const Orders = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Orders_chunk"*/
-    'pages/Orders'
-  ),
+const Orders = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Orders_chunk"*/
+      'pages/Orders'
+    ),
 )
 
-const Wallet = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Wallet_chunk"*/
-    'pages/Wallet'
-  ),
+const Wallet = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Wallet_chunk"*/
+      'pages/Wallet'
+    ),
 )
 
-const NotFound = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Extra_routes_chunk"*/
-    'pages/NotFound'
-  ),
+const NotFound = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Extra_routes_chunk"*/
+      'pages/NotFound'
+    ),
 )
-const NotFound2 = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Extra_routes_chunk"*/
-    'pages/NotFound2'
-  ),
+const NotFound2 = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Extra_routes_chunk"*/
+      'pages/NotFound2'
+    ),
 )
-const ConnectWallet = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Extra_routes_chunk"*/
-    'pages/ConnectWallet'
-  ),
+const ConnectWallet = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Extra_routes_chunk"*/
+      'pages/ConnectWallet'
+    ),
 )
-const FAQ = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Extra_routes_chunk"*/
-    'pages/FAQ'
-  ),
+const FAQ = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Extra_routes_chunk"*/
+      'pages/FAQ'
+    ),
 )
-const OrderBook = React.lazy(() =>
-  import(
-    /* webpackChunkName: "OrderBook_chunk"*/
-    'pages/OrderBook'
-  ),
+const OrderBook = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "OrderBook_chunk"*/
+      'pages/OrderBook'
+    ),
 )
-const Settings = React.lazy(() =>
-  import(
-    /* webpackChunkName: "Settings_chunk"*/
-    'pages/Settings'
-  ),
+const Settings = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "Settings_chunk"*/
+      'pages/Settings'
+    ),
 )
 
 // Global State

diff --git a/src/api/exchange/ExchangeApi.ts b/src/api/exchange/ExchangeApi.ts
@@ -230,7 +230,7 @@ export class ExchangeApiImpl extends DepositApiImpl implements ExchangeApi {
     // TODO: Anyway, this is required because `blockNumber` option isn't typed.
     // TODO: Dima might have an idea on how to manually fix that on `dex-js` side.
     // TODO: In the mean time, the double layer ignore is required.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     const rawOrder = await contract.methods.orders(userAddress, orderId).call({}, blockNumber)
 

diff --git a/src/api/wallet/WalletApi.ts b/src/api/wallet/WalletApi.ts
@@ -246,9 +246,12 @@ const closeOpenWebSocketConnection = (web3: Web3): void => {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isPromise = <T>(maybePromise: any): maybePromise is Promise<T> =>
-  maybePromise instanceof Promise || ('then' in maybePromise && typeof maybePromise.then === 'function')
+export const isPromise = <T, S>(maybePromise: PromiseLike<T> | S): maybePromise is PromiseLike<T> =>
+  maybePromise instanceof Promise ||
+  (!!maybePromise &&
+    (typeof maybePromise === 'object' || typeof maybePromise === 'function') &&
+    'then' in maybePromise &&
+    typeof maybePromise.then === 'function')
 
 /**
  * Basic implementation of Wallet API
@@ -331,19 +334,19 @@ export class WalletApiImpl implements WalletApi {
     if (isMetamaskProvider(provider)) provider.autoRefreshOnNetworkChange = false
     else if (isWalletConnectProvider(provider)) {
       // hackaround
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       provider.handleReadRequests = async function (payload: unknown): Promise<unknown> {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (!this.http) {
           const error = new Error('HTTP Connection not available')
-          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           this.emit('error', error)
           throw error
         }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         return this.http.send(payload)
 

diff --git a/src/components/LinkWithPastLocation.tsx b/src/components/LinkWithPastLocation.tsx
@@ -2,12 +2,16 @@ import React, { useMemo } from 'react'
 import { useLocation } from 'react-router'
 import { LinkProps, NavLink } from 'react-router-dom'
 import { Location, LocationDescriptorObject } from 'history'
+import { AnyFunction } from 'types'
 
 // LinkProps.to can be a string, a Location object or a function returning the first two
 type LocationTo = LinkProps['to']
 
 // handle string or Location object
-const constructLocationObject = (to: Exclude<LocationTo, Function>, location: Location): LocationDescriptorObject => {
+const constructLocationObject = (
+  to: Exclude<LocationTo, AnyFunction>,
+  location: Location,
+): LocationDescriptorObject => {
   if (typeof to === 'string')
     return {
       pathname: to,

diff --git a/src/components/OrdersWidget/index.tsx b/src/components/OrdersWidget/index.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback, useEffect, useRef } from 'react'
-// eslint-disable-next-line @typescript-eslint/camelcase
 import { unstable_batchedUpdates } from 'react-dom'
 
 // Assets

diff --git a/src/components/PoolingWidget/index.tsx b/src/components/PoolingWidget/index.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useMemo, useEffect } from 'react'
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'
 import { Link } from 'react-router-dom'

diff --git a/src/components/Settings/WalletConnect.tsx b/src/components/Settings/WalletConnect.tsx
@@ -42,16 +42,17 @@ const WCSettingsSchema = Joi.object({
 } */
 
 // validates only walletconnect slice of form data
-export const wcResolver = (data: WCOptions): CustomResolverResult<SettingsFormData> => {
+export const wcResolver = (data: WCOptions): CustomResolverResult<SettingsFormData, 'walletconnect'> => {
   const result = WCSettingsSchema.validate(data, {
     abortEarly: false,
   })
 
-  const { value: values, error } = result
+  const { value, error } = result
+  const values: WCOptions = value
 
   return {
     name: 'walletconnect',
-    values: error ? null : values,
+    values: error ? {} : values,
     errors: error
       ? error.details.reduce((previous, currentError) => {
           // when exlusive fields are both present

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -139,7 +139,7 @@ const Wrapper = <C extends keyof JSX.IntrinsicElements | React.ComponentType = '
       | typeof targetProps
       | Omit<typeof targetProps, 'onMouseEnter' | 'onMouseLeave'>
       | Omit<typeof targetProps, 'onFocus' | 'onBlur'>
-      | {} = {}
+      | Record<string, unknown> = {}
     if (focus && hover) {
       // pass all targetProps by default
       finalTargetProps = targetProps

diff --git a/src/components/TradeWidget/index.tsx b/src/components/TradeWidget/index.tsx
@@ -148,7 +148,7 @@ const TradeWidgetContainer: React.FC = () => {
       : tokenListApi.getTokens(networkIdOrDefault)
 
   // Listen on manual changes to URL search query
-  const { sell: encodedSellTokenSymbol, buy: decodeReceiveTokenSymbol } = useParams()
+  const { sell: encodedSellTokenSymbol, buy: decodeReceiveTokenSymbol } = useParams<{ sell?: string; buy?: string }>()
   const sellTokenSymbol = decodeSymbol(encodedSellTokenSymbol || '')
   const receiveTokenSymbol = decodeSymbol(decodeReceiveTokenSymbol || '')
 

diff --git a/src/components/trade/LastTrades/LastTradesWidget.tsx b/src/components/trade/LastTrades/LastTradesWidget.tsx
@@ -23,11 +23,24 @@ const GET_TRADES = gql`
   }
 `
 
+interface TradeFromGraph {
+  id: string
+  sellVolume: string
+  buyVolume: string
+  tradeEpoch: string
+  buyToken: { decimals: string }
+  sellToken: { decimals: string }
+}
+
+interface GET_TRADES_RESULT {
+  trades: TradeFromGraph[]
+}
+
 export interface Props {
   quoteToken: TokenDetails
 }
 
-function toLastTradeItem(trade: any): LastTradesItem {
+function toLastTradeItem(trade: TradeFromGraph): LastTradesItem {
   const { id, sellVolume, buyVolume, tradeEpoch, sellToken, buyToken } = trade
   const sellTokenDecimals = +sellToken.decimals
   return {
@@ -42,7 +55,7 @@ function toLastTradeItem(trade: any): LastTradesItem {
 }
 
 export const LastTradesWidget: React.FC<Props> = (props) => {
-  const { loading, error, data } = useQuery(GET_TRADES)
+  const { loading, error, data } = useQuery<GET_TRADES_RESULT>(GET_TRADES)
 
   const { quoteToken } = props
   const lastTrades: LastTradesItem[] = data ? data.trades.map(toLastTradeItem) : []