feat(ts): convert some useful code to ts

packages/blockchain-info-components/index.d.ts

@@ -176,6 +176,7 @@ export const ModalHeader: FunctionComponent<{
   icon?: keyof IcoMoonType
 }>
 export function Palette(theme: string): DefaultTheme
+export const Separator: FunctionComponent<{}>
 export const SkeletonCircle: FunctionComponent<{
   width?: string
   height?: string

packages/blockchain-wallet-v4-frontend/src/data/alerts/actions.ts

@@ -0,0 +1,44 @@
+import { AlertNatureType } from './types'
+import { ALERTS_CLEAR, ALERTS_DISMISS, ALERTS_SHOW } from './actionTypes'
+import { CoinType } from 'core/types'
+
+const generateId = () =>
+  Math.random()
+    .toString(36)
+    .substr(2, 10)
+
+const display = (
+  nature: AlertNatureType,
+  message: string,
+  data: any,
+  persist?: boolean,
+  coin?: CoinType
+) => ({
+  type: ALERTS_SHOW,
+  payload: { id: generateId(), nature, message, data, persist, coin }
+})
+export const displayWarning = (
+  message: string,
+  data?: any,
+  persist?: boolean
+) => display('warn', message, data, persist)
+
+export const displayInfo = (message: string, data?: any, persist?: boolean) =>
+  display('info', message, data, persist)
+
+export const displaySuccess = (
+  message: string,
+  data?: any,
+  persist?: boolean
+) => display('success', message, data, persist)
+
+export const displayError = (
+  message: string,
+  data?: any,
+  persist?: boolean,
+  coin?: CoinType
+) => display('error', message, data, persist, coin)
+
+export const clearAlerts = () => ({ type: ALERTS_CLEAR })
+
+export const dismissAlert = id => ({ type: ALERTS_DISMISS, payload: { id } })

packages/blockchain-wallet-v4-frontend/src/data/alerts/reducers.js → packages/blockchain-wallet-v4-frontend/src/data/alerts/reducers.ts

@@ -1,9 +1,10 @@
 import { ALERTS_CLEAR, ALERTS_DISMISS, ALERTS_SHOW } from './actionTypes'
-import { filter, prepend } from 'ramda'
+import { AlertsState } from './types'
+import { prepend } from 'ramda'
 
-const INITIAL_STATE = []
+const INITIAL_STATE: AlertsState = []
 
-export default (state = INITIAL_STATE, action) => {
+export function alertsReducer (state = INITIAL_STATE, action) {
   const { type, payload } = action
 
   switch (type) {
@@ -12,7 +13,7 @@ export default (state = INITIAL_STATE, action) => {
     }
     case ALERTS_DISMISS: {
       const { id } = payload
-      return filter(a => a.id !== id, state)
+      return state.filter(alert => alert.id !== id)
     }
     case ALERTS_SHOW: {
       return prepend({ ...action.payload }, state)
@@ -22,3 +23,5 @@ export default (state = INITIAL_STATE, action) => {
     }
   }
 }
+
+export default alertsReducer

packages/blockchain-wallet-v4-frontend/src/data/alerts/types.ts

@@ -0,0 +1,16 @@
+import { CoinType } from 'core/types'
+
+// types
+export type AlertNatureType = 'info' | 'warn' | 'success' | 'error'
+
+export type AlertType = {
+  coin?: CoinType
+  data?: any
+  id: string
+  message: string
+  nature: AlertNatureType
+  persist?: boolean
+}
+
+// state
+export type AlertsState = Array<AlertType>

packages/blockchain-wallet-v4-frontend/src/data/components/exchange/exchange.sagas.ts

@@ -826,12 +826,8 @@ export default ({ api, coreSagas, networks }) => {
             })
           )
         } else {
-          const supportedCoins = (yield select(
-            selectors.core.walletOptions.getSupportedCoins
-          )).getOrElse({})
-          const coin = supportedCoins['ETH']
           yield put(
-            actions.alerts.displayCoin(C.FIRST_PAX_TRADE_INFO, coin, true)
+            actions.alerts.displaySuccess(C.FIRST_PAX_TRADE_INFO, null, true)
           )
           yield put(
             actions.modals.showModal(RESULTS_MODAL, formatExchangeTrade(trade))

packages/blockchain-wallet-v4-frontend/src/data/rootReducer.ts

@@ -1,3 +1,4 @@
+import { alertsReducer } from './alerts/reducers'
 import { analyticsReducer } from './analytics/reducers'
 import { combineReducers } from 'redux'
 import { coreReducers, paths } from 'blockchain-wallet-v4/src'
@@ -6,7 +7,6 @@ import { goalsReducer } from './goals/reducers'
 import { modalsReducer } from './modals/reducers'
 import { preferencesReducer } from './preferences/reducers'
 import { transferEthReducer } from './modules/transferEth/reducers'
-import alertsReducer from './alerts/reducers'
 import authReducer from './auth/reducers'
 import cacheReducer from './cache/reducers'
 import componentsReducer from './components/reducers'

packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.js → packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.tsx

@@ -47,7 +47,7 @@ const Footer = styled.div`
   }
 `
 
-const Help = props => {
+const Help = () => {
   return (
     <Wrapper>
       <Header>
@@ -75,7 +75,7 @@ const Help = props => {
         </Left>
         <Right>
           <LinkContainer to='/reminder'>
-            <Button nature='light'>
+            <Button data-e2e='linkToReminder' nature='light'>
               <FormattedMessage
                 id='scenes.help.remind'
                 defaultMessage='Remind Me'
@@ -101,7 +101,7 @@ const Help = props => {
         </Left>
         <Right>
           <LinkContainer to='/recover'>
-            <Button nature='light'>
+            <Button data-e2e='linkToRecover' nature='light'>
               <FormattedMessage
                 id='scenes.help.recover'
                 defaultMessage='Recover Funds'
@@ -127,7 +127,7 @@ const Help = props => {
         </Left>
         <Right>
           <LinkContainer to='/reset-2fa'>
-            <Button nature='light'>
+            <Button data-e2e='linkToReset2fa' nature='light'>
               <FormattedMessage
                 id='scenes.help.reset'
                 defaultMessage='Reset 2FA'
@@ -138,7 +138,12 @@ const Help = props => {
       </Row>
       <Footer>
         <LinkContainer to='/login'>
-          <Button nature='primary' height='56px' fullWidth>
+          <Button
+            data-e2e='linkToLogin'
+            nature='primary'
+            height='56px'
+            fullwidth
+          >
             <Text size='16px' color='white' weight={500}>
               <FormattedMessage id='buttons.go_back' defaultMessage='Go Back' />
             </Text>

packages/blockchain-wallet-v4-frontend/src/scenes/Logout/index.js → packages/blockchain-wallet-v4-frontend/src/scenes/Logout/index.tsx

@@ -1,10 +1,11 @@
-import { actions } from 'data'
 import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import Logout from './template.js'
+import { connect, ConnectedProps } from 'react-redux'
 import React from 'react'
 
-class LogoutContainer extends React.PureComponent {
+import { actions } from 'data'
+import Logout from './template'
+
+class LogoutContainer extends React.PureComponent<Props, State> {
   constructor (props) {
     super(props)
     this.state = { secondsRemaining: 10 }
@@ -14,10 +15,12 @@ class LogoutContainer extends React.PureComponent {
   }
 
   componentDidMount () {
+    // @ts-ignore
     this.interval = setInterval(this.tick, 1000)
   }
 
   componentWillUnmount () {
+    // @ts-ignore
     clearInterval(this.interval)
   }
 
@@ -54,4 +57,12 @@ const mapDispatchToProps = dispatch => ({
   routerActions: bindActionCreators(actions.router, dispatch)
 })
 
-export default connect(null, mapDispatchToProps)(LogoutContainer)
+const connector = connect(null, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+type State = {
+  secondsRemaining: number
+}
+
+export default connector(LogoutContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Logout/template.js → packages/blockchain-wallet-v4-frontend/src/scenes/Logout/template.tsx

@@ -46,7 +46,12 @@ const Logout = props => {
         />
       </Text>
       <Footer>
-        <Button type='submit' nature='primary' onClick={onDeauthorizeBrowser}>
+        <Button
+          data-e2e='deauthBrowser'
+          type='submit'
+          nature='primary'
+          onClick={onDeauthorizeBrowser}
+        >
           <FormattedMessage
             id='scenes.logout.deauth'
             defaultMessage='De-Authorize Browser'

packages/blockchain-wallet-v4-frontend/src/scenes/MobileLogin/index.js → packages/blockchain-wallet-v4-frontend/src/scenes/MobileLogin/index.tsx

@@ -1,12 +1,12 @@
 import * as C from 'services/AlertService'
 import { actions } from 'data'
-import { bindActionCreators, compose } from 'redux'
-import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { connect, ConnectedProps } from 'react-redux'
 import { isEmpty, isNil } from 'ramda'
 import MobileLogin from './template'
 import React from 'react'
 
-class MobileLoginContainer extends React.PureComponent {
+class MobileLoginContainer extends React.PureComponent<Props> {
   handleScan = result => {
     if (!isNil(result) && !isEmpty(result)) {
       this.props.authActions.mobileLogin(result)
@@ -36,6 +36,8 @@ const mapDispatchToProps = dispatch => ({
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
-const enhance = compose(connect(undefined, mapDispatchToProps))
+const connector = connect(undefined, mapDispatchToProps)
 
-export default enhance(MobileLoginContainer)
+type Props = ConnectedProps<typeof connector>
+
+export default connector(MobileLoginContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/MobileLogin/template.js → packages/blockchain-wallet-v4-frontend/src/scenes/MobileLogin/template.tsx

@@ -1,12 +1,12 @@
 import { Button, Text } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
-import { Wrapper } from 'components/Public'
-import PropTypes from 'prop-types'
-import QRReader from 'components/QRReader'
 import React from 'react'
 import styled from 'styled-components'
 
+import { Wrapper } from 'components/Public'
+import QRReader from 'components/QRReader'
+
 const Header = styled.div`
   display: flex;
   justify-content: center;
@@ -38,7 +38,7 @@ const Instruction = styled(Text)`
 `
 
 const MobileLogin = props => {
-  const { position, total, close, closeAll, ...rest } = props
+  const { close, ...rest } = props
   const { handleScan, handleError } = rest
 
   return (
@@ -83,7 +83,13 @@ const MobileLogin = props => {
         </InstructionsContainer>
       </Container>
       <LinkContainer to='/login'>
-        <Button type='submit' nature='primary' fullwidth height='56px'>
+        <Button
+          data-e2e='backToLogin'
+          type='submit'
+          nature='primary'
+          fullwidth
+          height='56px'
+        >
           <Text color='white' size='16px' weight={600} onClick={close}>
             <FormattedMessage id='buttons.back' defaultMessage='Back' />
           </Text>
@@ -93,9 +99,4 @@ const MobileLogin = props => {
   )
 }
 
-MobileLogin.propTypes = {
-  handleScan: PropTypes.func.isRequired,
-  handleError: PropTypes.func.isRequired
-}
-
 export default MobileLogin