feat(TypeScript): example of type safe dispatch props

index.d.ts

@@ -1,20 +1,30 @@
 declare module 'blockchain-info-components' {
   import { DefaultTheme } from 'styled-components'
-  // type-coverage:ignore-next-line
-  export function Icon(...args: any): any
-  // type-coverage:ignore-next-line
-  export function Text(...args: any): any
+
   // type-coverage:ignore-next-line
   export function Button(...args: any): any
-  // type-coverage:ignore-next-line
-  export function Link(...args: any): any
-
   // type-coverage:ignore-next-line
   export function FontGlobalStyles(...args: any): any
   // type-coverage:ignore-next-line
+  export function Icon(...args: any): any
+  // type-coverage:ignore-next-line
   export function IconGlobalStyles(...args: any): any
-
+  // type-coverage:ignore-next-line
+  export function Link(...args: any): any
+  // type-coverage:ignore-next-line
   export function Palette(theme: string): DefaultTheme
+  // type-coverage:ignore-next-line
+  export function SkeletonRectangle(...args: any): any
+  // type-coverage:ignore-next-line
+  export function Table(...args): any
+  // type-coverage:ignore-next-line
+  export function TableCell(...args): any
+  // type-coverage:ignore-next-line
+  export function TableHeader(...args): any
+  // type-coverage:ignore-next-line
+  export function TableRow(...args): any
+  // type-coverage:ignore-next-line
+  export function Text(...args: any): any
 }
 declare module 'daggy' {
   import {

packages/blockchain-wallet-v4-frontend/src/data/components/actions.js → packages/blockchain-wallet-v4-frontend/src/data/components/actions.ts

@@ -5,7 +5,7 @@ import * as coinify from './coinify/actions'
 import * as ethTransactions from './ethTransactions/actions'
 import * as exchange from './exchange/actions'
 import * as exchangeHistory from './exchangeHistory/actions'
-import * as identityVerification from './identityVerification/actions.ts'
+import * as identityVerification from './identityVerification/actions'
 import * as importBtcAddress from './importBtcAddress/actions'
 import * as layoutWallet from './layoutWallet/actions'
 import * as lockbox from './lockbox/actions'

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

@@ -1,5 +1,6 @@
 import * as AT from './actionTypes'
 import {
+  CampaignsType,
   DocumentType,
   IdentityVerificationActionTypes,
   StepsType
@@ -108,7 +109,7 @@ export const registerUserCampaign = (newUser: boolean) => ({
 export const createRegisterUserCampaign = () => ({
   type: AT.CREATE_REGISTER_USER_CAMPAIGN
 })
-export const claimCampaignClicked = campaign => ({
+export const claimCampaignClicked = (campaign: CampaignsType) => ({
   type: AT.CLAIM_CAMPAIGN_CLICKED,
   payload: { campaign }
 })

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/model.js

@@ -6,7 +6,6 @@ export const KYC_MODAL = '@KYC.IdentityVerification'
 export const USER_EXISTS_MODAL = '@KYC.UserExists'
 export const AIRDROP_ERROR_MODAL = '@KYC.AirdropError'
 
-// Moved to types.ts
 export const STEPS = {
   coinify: 'coinify',
   personal: 'personal',
@@ -26,13 +25,11 @@ export const STEP_TIERS = {
 
 export const COINIFY_STEP = 'coinify'
 
-// Moved to types.ts
 export const SMS_STEPS = {
   edit: 'edit',
   verify: 'verify'
 }
 
-// Moved to types.ts
 export const EMAIL_STEPS = {
   edit: 'edit',
   verify: 'verify'

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/reducers.ts

@@ -1,6 +1,6 @@
 import * as AT from './actionTypes'
+import { EMAIL_STEPS } from './model'
 import {
-  EMAIL_STEPS,
   IdentityVerificationActionTypes,
   IdentityVerificationState
 } from './types'

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

@@ -1,29 +1,53 @@
 import * as AT from './actionTypes'
 import { RemoteData } from 'blockchain-wallet-v4/src/remote/types'
+import { STEPS } from './model'
 
-export const STEPS = {
-  coinify: 'coinify',
-  personal: 'personal',
-  moreInfo: 'moreInfo',
-  mobile: 'mobile',
-  verify: 'verify',
-  submitted: 'submitted'
-}
+export type UserCampaignState =
+  | 'FAILED'
+  | 'REWARD_RECEIVED'
+  | 'TASK_FINISHED'
+  | 'REWARD_SEND'
+  | 'REGISTERED'
+  | 'NONE'
 
-export type EmailSmsStepTypes = { edit: 'edit'; verify: 'verify' }
+export type CampaignState = 'NONE' | 'STARTED' | 'ENDED'
 
-export type StepsType = typeof STEPS
+export type TagsType = {
+  [key in CampaignsType]: {
+    'x-campaign-address': string
+  }
+}
 
-export const EMAIL_STEPS: EmailSmsStepTypes = {
-  edit: 'edit',
-  verify: 'verify'
+export type CampaignTransaction = {
+  fiatCurrency: string
+  fiatValue: number
+  withdrawalCurrency: string
+  withdrawalQuantity: number
 }
 
-export const SMS_STEPS = {
-  edit: 'edit',
-  verify: 'verify'
+export interface CampaignType {
+  attributes: {
+    'x-campaign-reject-reason': string
+  }
+  campaignName: CampaignsType
+  campaignState: CampaignState
+  updatedAt?: string
+  userCampaignState: UserCampaignState
+  userCampaignTransactionResponseList: Array<CampaignTransaction>
 }
 
+export type EmailSmsStepTypes = { edit: 'edit'; verify: 'verify' }
+
+export type StepsType = typeof STEPS
+
+export type KycStatesType =
+  | 'NONE'
+  | 'PENDING'
+  | 'UNDER_REVIEW'
+  | 'REJECTED'
+  | 'VERIFIED'
+  | 'EXPIRED'
+
 export type DocumentType =
   | 'PASSPORT'
   | 'DRIVING_LICENCE'
@@ -37,6 +61,8 @@ export type PreIdvDataType = {
 
 export type ScopesType = Array<'KYC' | 'Mercury'>
 
+export type CampaignsType = 'BLOCKSTACK' | 'POWER_PAX' | 'SUNRIVER'
+
 export type StateType = {
   name: string
   scopes: ScopesType

packages/blockchain-wallet-v4-frontend/src/data/components/requestBtc/sagas.spec.js

@@ -1,7 +1,6 @@
-import { expectSaga, testSaga } from 'redux-saga-test-plan'
-
-import * as actions from '../../actions.js'
 import * as C from 'services/AlertService'
+import { actions } from 'data'
+import { expectSaga, testSaga } from 'redux-saga-test-plan'
 import sagas from './sagas.js'
 
 const requestBtcSagas = sagas({ networks: 'btc' })

packages/blockchain-wallet-v4-frontend/src/data/components/signMessage/sagas.js

@@ -1,8 +1,7 @@
 import * as A from './actions.js'
-import * as actions from '../../actions.js'
 import * as C from 'services/AlertService'
-import * as selectors from '../../selectors.js'
 import * as signer from 'blockchain-wallet-v4/src/signer'
+import { actions, selectors } from 'data'
 import { call, put, select } from 'redux-saga/effects'
 import { promptForSecondPassword } from 'services/SagaService'
 import { Types } from 'blockchain-wallet-v4/src'

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

@@ -0,0 +1,7 @@
+import { IdentityVerificationActionTypes } from './identityVerification/types'
+
+// All relative ActionTypes should go here
+// export type ComponentsActionTypes = IdentityVerificationActionTypes | ActivityListActionTypes | BchTransactionsActionTypes
+export type ComponentsActionTypes = IdentityVerificationActionTypes
+
+export * from './identityVerification/types'

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

@@ -3,7 +3,7 @@ import * as actionTypes from './actionTypes'
 import * as model from './model'
 import * as sagas from './sagas'
 import * as selectors from './selectors'
-import rootReducer from './rootReducer.ts'
+import rootReducer from './rootReducer'
 import rootSaga from './rootSaga'
 
 export { actions, actionTypes, model, rootReducer, rootSaga, selectors, sagas }

packages/blockchain-wallet-v4-frontend/src/data/modules/transferEth/sagas.js

@@ -1,6 +1,6 @@
-import * as actions from '../../actions.js'
 import * as C from 'services/AlertService'
 import * as selectors from './selectors'
+import { actions } from 'data'
 import { call, put, select } from 'redux-saga/effects'
 import { promptForSecondPassword } from 'services/SagaService'
 

packages/blockchain-wallet-v4-frontend/src/data/preferences/sagas.js

@@ -1,5 +1,5 @@
-import * as actions from '../actions.js'
 import * as C from 'services/AlertService'
+import { actions } from 'data'
 import { addLanguageToUrl } from 'services/LocalesService'
 import { put } from 'redux-saga/effects'
 

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

@@ -0,0 +1,8 @@
+import { ComponentsActionTypes } from './components/types'
+
+// All ActionTypes should go here
+// export type AppActionTypes = ComponentsActionTypes | ModuleActionTypes | etc
+export type AppActionTypes = ComponentsActionTypes
+
+export * from './components/types'
+// Import via `import { AppActionTypes } from 'data/types'`

packages/blockchain-wallet-v4-frontend/src/data/wallet/sagas.js

@@ -1,9 +1,8 @@
-import * as actions from '../actions.js'
 import * as C from 'services/AlertService'
+import { actions, selectors } from 'data'
 import { askSecondPasswordEnhancer, promptForInput } from 'services/SagaService'
 import { call, put, select } from 'redux-saga/effects'
 import { requireUniqueWalletName } from 'services/FormHelper'
-import { selectors } from 'data'
 
 export default ({ coreSagas }) => {
   const logLocation = 'wallet/sagas'

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/PastAirdrops/template.success.js → packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/PastAirdrops/template.success.tsx

@@ -1,6 +1,7 @@
 import { Exchange } from 'blockchain-wallet-v4/src'
 import { FormattedMessage } from 'react-intl'
-import { Status, To, Type } from './model.tsx'
+import { Props } from '../StxAirdrop'
+import { Status, To, Type } from './model'
 import {
   Table,
   TableCell,
@@ -21,7 +22,7 @@ const getQuantity = (amt, currency) => {
   }
 }
 
-export default function Success ({ userCampaignsInfoResponseList = [] }) {
+export default function Success ({ userCampaignsInfoResponseList }: Props) {
   const completedCampaigns = userCampaignsInfoResponseList.filter(
     campaign => campaign.campaignState === 'ENDED'
   )
@@ -110,27 +111,27 @@ export default function Success ({ userCampaignsInfoResponseList = [] }) {
               }
             )
           ) : (
-            // No campaign transactions but show some info anyway
-            <TableRow>
-              <TableCell width='18%'>
-                <Type {...campaign} />
-              </TableCell>
-              <TableCell width='18%'>
-                <Status {...campaign} />
-              </TableCell>
-              <TableCell width='18%'>
-                <Text size='14px' weight={500}>
-                  -
+              // No campaign transactions but show some info anyway
+              <TableRow>
+                <TableCell width='18%'>
+                  <Type {...campaign} />
+                </TableCell>
+                <TableCell width='18%'>
+                  <Status {...campaign} />
+                </TableCell>
+                <TableCell width='18%'>
+                  <Text size='14px' weight={500}>
+                    -
                 </Text>
-              </TableCell>
-              <TableCell width='18%'>
-                <To {...campaign} />
-              </TableCell>
-              <TableCell width='28%'>
-                <Text>-</Text>
-              </TableCell>
-            </TableRow>
-          )
+                </TableCell>
+                <TableCell width='18%'>
+                  <To {...campaign} />
+                </TableCell>
+                <TableCell width='28%'>
+                  <Text>-</Text>
+                </TableCell>
+              </TableRow>
+            )
         })}
       </Table>
     </div>

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

@@ -1,7 +1,10 @@
 import { Box } from '../AirdropInfo'
+import { CampaignType, TagsType } from 'data/types'
 import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
 import { Icon, Link, Text } from 'blockchain-info-components'
-import { StxShare, StxStatus } from './model.tsx'
+import { KycStatesType } from 'data/components/identityVerification/types'
+import { LinkDispatchPropsType } from '..'
+import { StxShare, StxStatus } from './model'
 import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'
@@ -40,7 +43,13 @@ const OverflowFooterText = styled(Text)`
   `};
 `
 
-const StxAirdrop = props => {
+export type Props = {
+  userCampaignsInfoResponseList: Array<CampaignType>,
+  kycState: KycStatesType,
+  tags: TagsType
+}
+
+const StxAirdrop = (props: Props & LinkDispatchPropsType) => {
   return (
     <Box>
       <div>

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/model.tsx

@@ -6,9 +6,11 @@ import {
   SuccessCartridge
 } from '../AirdropInfo/model'
 import { Button, Link } from 'blockchain-info-components'
-import { CampaignType, KycStatesType, TagsType } from '../types'
+import { CampaignType } from 'data/types'
 import { FormattedMessage } from 'react-intl'
+import { LinkDispatchPropsType } from '..'
 import { model } from 'data'
+import { Props } from '.'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -43,7 +45,7 @@ export const StxStatus = ({
   userCampaignsInfoResponseList,
   kycState,
   identityVerificationActions
-}: { userCampaignsInfoResponseList: Array<CampaignType>, kycState: KycStatesType, identityVerificationActions: any }) => {
+}: Props & LinkDispatchPropsType) => {
   const blockstackCampaign = userCampaignsInfoResponseList.find(
     (campaign: CampaignType) => campaign.campaignName === 'BLOCKSTACK'
   )
@@ -152,7 +154,7 @@ export const StxStatus = ({
   }
 }
 
-export const StxShare = ({ tags, kycState }: { tags: TagsType, kycState: KycStatesType }) => {
+export const StxShare = ({ tags, kycState }: Props) => {
   switch (kycState) {
     case KYC_STATES.REJECTED:
     case KYC_STATES.EXPIRED: