feat(ts): start fixing ConnectedProps type

.eslintrc

@@ -20,11 +20,16 @@
     {
       "files": ["*.{ts,tsx}"],
       "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
       "plugins": ["typescript-sort-keys"],
       "rules": {
         "typescript-sort-keys/interface": 2,
         "typescript-sort-keys/string-enum": 2,
-        "@typescript-eslint/no-unused-vars": 2
+        "@typescript-eslint/no-unused-vars": 2,
+        "@typescript-eslint/switch-exhaustiveness-check": 2,
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"]
       }
     }
   ],

package.json

@@ -126,8 +126,8 @@
     "@types/redux": "3.6.0",
     "@types/redux-form": "7.4.2",
     "@types/styled-components": "4.0.3",
-    "@typescript-eslint/eslint-plugin": "2.13.0",
-    "@typescript-eslint/parser": "2.13.0",
+    "@typescript-eslint/eslint-plugin": "2.28.0",
+    "@typescript-eslint/parser": "2.28.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "25.3.0",
     "babel-loader": "8.1.0",

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.ts

@@ -19,24 +19,26 @@ import {
 import { KYC_STATES, TIERS_STATES, USER_ACTIVATION_STATES } from './model'
 import { RootState } from 'data/rootReducer'
 import { selectors } from 'data'
+import { UserDataType } from './types'
 
 export const getUserData = (state: RootState) => state.profile.userData
+export const getUserCampaigns = (state: RootState) =>
+  state.profile.userCampaigns
+
 export const getUserId = compose(
-  lift(prop('id')),
+  lift((userData: UserDataType) => userData.id),
   getUserData
 )
-export const getUserCampaigns = (state: RootState) =>
-  state.profile.userCampaigns
 export const getWalletAddresses = compose(
-  lift(prop('walletAddresses')),
+  lift((userData: UserDataType) => userData.walletAddresses),
   getUserData
 )
 export const getUserActivationState = compose(
-  lift(prop('state')),
+  lift((userData: UserDataType) => userData.state),
   getUserData
 )
 export const getUserKYCState = compose(
-  lift(prop('kycState')),
+  lift((userData: UserDataType) => userData.kycState),
   getUserData
 )
 export const getTags = compose(

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CoinPerformance/CoinPrices/index.tsx

@@ -1,4 +1,4 @@
-import { connect } from 'react-redux'
+import { connect, ConnectedProps } from 'react-redux'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, RemoteDataType, SupportedCoinType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
@@ -28,23 +28,6 @@ const PriceText = styled(Text)`
   color: ${props => props.theme.grey800};
 `
 
-type OwnProps = {
-  coinModel: SupportedCoinType
-}
-
-type SuccessStateType = {
-  currency: FiatType
-  priceChangeFiat: number
-  priceChangePercentage: number
-  priceCurrent: number
-}
-
-type LinkStatePropsType = {
-  data: RemoteDataType<string | Error, SuccessStateType>
-}
-
-type Props = LinkStatePropsType & OwnProps
-
 class CoinPricesContainer extends React.PureComponent<Props> {
   render () {
     const { data } = this.props
@@ -85,8 +68,27 @@ class CoinPricesContainer extends React.PureComponent<Props> {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state): LinkStatePropsType => ({
   data: getData(state)
 })
 
-export default connect(mapStateToProps)(CoinPricesContainer)
+const connector = connect(mapStateToProps)
+
+type OwnProps = {
+  coinModel: SupportedCoinType
+}
+
+type SuccessStateType = {
+  currency: FiatType
+  priceChangeFiat: number
+  priceChangePercentage: number
+  priceCurrent: number
+}
+
+type LinkStatePropsType = {
+  data: RemoteDataType<string | Error, SuccessStateType>
+}
+
+type Props = OwnProps & ConnectedProps<typeof connector>
+
+export default connector(CoinPricesContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/index.tsx

@@ -1,25 +1,11 @@
 import { actions, selectors } from 'data'
 import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
+import { CoinType } from 'core/types'
+import { connect, ConnectedProps } from 'react-redux'
 import { RootState } from 'data/rootReducer'
 import Menu from './template'
 import React from 'react'
 
-// FIXME: TypeScript use CoinType
-type OwnProps = {
-  coin: 'BTC' | 'BCH' | 'ETH' | 'PAX' | 'XLM'
-}
-
-type LinkStatePropsType = {
-  legacyEthAddr: null | boolean
-}
-
-type LinkDispatchPropsType = {
-  modalActions: typeof actions.modals
-}
-
-type Props = OwnProps & LinkStatePropsType & LinkDispatchPropsType
-
 class TransactionFiltersContainer extends React.PureComponent<Props> {
   onShowPrivateKey = () => {
     const { coin, modalActions } = this.props
@@ -66,7 +52,19 @@ const mapDispatchToProps = dispatch => ({
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
-export default connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
-)(TransactionFiltersContainer)
+)
+
+type OwnProps = {
+  coin: CoinType
+}
+
+type LinkStatePropsType = {
+  legacyEthAddr: null | boolean
+}
+
+type Props = OwnProps & ConnectedProps<typeof connector>
+
+export default connector(TransactionFiltersContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.simplebuy.tsx

@@ -1,7 +1,7 @@
 import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
 import { Button, Text } from 'blockchain-info-components'
-import { connect } from 'react-redux'
+import { connect, ConnectedProps } from 'react-redux'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBOrderType } from 'core/types'
@@ -12,15 +12,6 @@ import media from 'services/ResponsiveService'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
-type OwnProps = {
-  order: SBOrderType
-}
-type LinkDispatchPropsType = {
-  modalActions: typeof actions.modals
-  simpleBuyActions: typeof actions.components.simpleBuy
-}
-type Props = OwnProps & LinkDispatchPropsType
-
 const TransactionRow = styled.div`
   width: 100%;
   display: flex;
@@ -114,12 +105,20 @@ class SimpleBuyListItem extends PureComponent<Props> {
   }
 }
 
-const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
   modalActions: bindActionCreators(actions.modals, dispatch),
   simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
 })
 
-export default connect(
+const connector = connect(
   undefined,
   mapDispatchToProps
-)(SimpleBuyListItem)
+)
+
+type OwnProps = {
+  order: SBOrderType
+}
+
+type Props = OwnProps & ConnectedProps<typeof connector>
+
+export default connector(SimpleBuyListItem)

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/index.tsx

@@ -1,7 +1,7 @@
 import { actions } from 'data'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { FiatType, RemoteDataType, SupportedCoinType } from 'core/types'
+import { bindActionCreators, Dispatch } from 'redux'
+import { CoinType, SupportedCoinType } from 'core/types'
+import { connect, ConnectedProps } from 'react-redux'
 import { Field } from 'redux-form'
 import { flatten } from 'ramda'
 import { FormattedMessage } from 'react-intl'
@@ -16,34 +16,6 @@ import React, { Component } from 'react'
 import SelectBox from 'components/Form/SelectBox'
 import styled from 'styled-components'
 
-// FIXME: TypeScript use CoinType and SupportedCoinType
-export type OwnProps = {
-  coin: 'BTC' | 'BCH' | 'ETH' | 'PAX' | 'XLM'
-  coinModel: SupportedCoinType
-  isCoinErc20: boolean
-}
-
-type LinkStatePropsType = {
-  // FIXME: TypeScript use AccountTypes
-  data: RemoteDataType<
-    string | Error,
-    {
-      addressData: { data: Array<any> }
-      balanceData: number
-      currency: FiatType
-      currencySymbol: string
-      priceChangeFiat: number
-      priceChangePercentage: number
-    }
-  >
-}
-
-type LinkDispatchPropsType = {
-  modalActions: typeof actions.modals
-}
-
-type Props = OwnProps & LinkStatePropsType & LinkDispatchPropsType
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -346,15 +318,25 @@ export class WalletBalanceDropdown extends Component<Props> {
   }
 }
 
-const mapStateToProps = (state, ownProps): LinkStatePropsType => ({
+const mapStateToProps = (state, ownProps) => ({
   data: getData(state, ownProps)
 })
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
-export default connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
-)(WalletBalanceDropdown)
+)
+
+export type OwnProps = {
+  coin: CoinType
+  coinModel: SupportedCoinType
+  isCoinErc20: boolean
+}
+
+type Props = OwnProps & ConnectedProps<typeof connector>
+
+export default connector(WalletBalanceDropdown)

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/selectors.ts

@@ -1,6 +1,7 @@
 import * as balanceSelectors from 'components/Balances/wallet/selectors'
 import { CurrenciesType } from 'core/exchange/currencies'
 import { Exchange, Remote } from 'blockchain-wallet-v4/src'
+import { FiatType, RemoteDataType } from 'core/types'
 import { getData as getBchAddressData } from 'components/Form/SelectBoxBchAddresses/selectors'
 import { getData as getBtcAddressData } from 'components/Form/SelectBoxBtcAddresses/selectors'
 import {
@@ -12,7 +13,20 @@ import { last, lift, nth, prop } from 'ramda'
 import { OwnProps } from '.'
 import { selectors } from 'data'
 
-export const getData = (state, ownProps: OwnProps) => {
+export const getData = (
+  state,
+  ownProps: OwnProps
+): RemoteDataType<
+  string | Error,
+  {
+    addressData: { data: Array<any> }
+    balanceData: number
+    currency: FiatType
+    currencySymbol: string
+    priceChangeFiat: number
+    priceChangePercentage: number
+  }
+> => {
   const { coin } = ownProps
   let addressDataR
   let balanceDataR