From 10ff77a37eb031b3afea127225f19b8d2780c2ea Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 10 Apr 2019 17:50:07 +0200 Subject: [PATCH] fix all the flow --- .flowconfig | 1 + package.json | 2 +- src/components/Footer/index.js | 22 +- .../components/LanguagePicker/Container.js | 32 +- src/components/Log/index.js | 18 +- src/components/modals/Container.js | 23 +- src/components/modals/QrModal/index.js | 3 +- .../modals/device/WalletType/index.js | 3 +- .../App/components/UpdateFirmware/index.js | 13 +- src/components/notifications/App/index.js | 29 +- .../Context/components/Static/index.js | 2 +- src/components/notifications/Context/index.js | 31 +- src/flowtype/npm/react-intl_v2.x.x.js | 259 +++++++++++++ src/flowtype/npm/react-redux_v5.x.x.js | 342 +++++++++++++----- src/reducers/index.js | 5 +- src/store.js | 5 +- src/support/ConnectedIntlProvider.js | 25 +- .../components/BetaDisclaimer/index.js | 17 +- src/views/Landing/views/Import/Container.js | 27 +- .../Landing/views/InstallBridge/Container.js | 27 +- src/views/Landing/views/Root/Container.js | 24 +- .../components/LeftNavigation/Container.js | 13 +- .../components/DeviceMenu/index.js | 2 +- .../LeftNavigation/components/common.js | 10 +- src/views/Wallet/components/Title/index.js | 9 +- .../components/TopNavigationAccount/index.js | 18 +- src/views/Wallet/index.js | 37 +- .../Account/Receive/ethereum/Container.js | 42 +-- .../Wallet/views/Account/Receive/index.js | 8 +- .../views/Account/Receive/ripple/Container.js | 26 +- .../views/Account/Send/ethereum/Container.js | 36 +- .../ethereum/components/AdvancedForm/index.js | 7 +- src/views/Wallet/views/Account/Send/index.js | 8 +- .../views/Account/Send/ripple/Container.js | 28 +- .../ripple/components/AdvancedForm/index.js | 4 +- .../views/Account/SignVerify/Container.js | 28 +- .../Account/Summary/ethereum/Container.js | 28 +- .../Wallet/views/Account/Summary/index.js | 11 +- .../views/Account/Summary/ripple/Container.js | 23 +- src/views/Wallet/views/Acquire/index.js | 23 +- src/views/Wallet/views/Bootloader/index.js | 7 +- src/views/Wallet/views/Dashboard/Container.js | 20 +- .../Wallet/views/DeviceSettings/index.js | 6 +- .../Wallet/views/FirmwareUpdate/index.js | 18 +- src/views/Wallet/views/Initialize/index.js | 6 +- src/views/Wallet/views/Seedless/index.js | 6 +- .../Wallet/views/UnreadableDevice/index.js | 3 +- .../Wallet/views/WalletSettings/Container.js | 28 +- yarn.lock | 7 +- 49 files changed, 870 insertions(+), 502 deletions(-) create mode 100644 src/flowtype/npm/react-intl_v2.x.x.js diff --git a/.flowconfig b/.flowconfig index 3ff66441..9b970efd 100644 --- a/.flowconfig +++ b/.flowconfig @@ -17,6 +17,7 @@ ./src/flowtype/npm/react-redux_v5.x.x.js ./src/flowtype/npm/react-router_v4.x.x.js ./src/flowtype/npm/react-router-dom_v4.x.x.js +; ./src/flowtype/npm/react-intl_v2.x.x.js // TODO: uncomment to get proper flow support for intl (needs some flow fixing) ./src/flowtype/npm/connected-react-router.js ./src/flowtype/npm/bignumber.js ./src/flowtype/npm/ethereum-types.js diff --git a/package.json b/package.json index 987e9ca1..6803dbca 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", "file-loader": "3.0.1", - "flow-bin": "0.75.0", + "flow-bin": "0.90", "jest": "^24.1.0", "prettier": "^1.16.4", "prettier-eslint": "^8.8.2", diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 5ad08447..855de592 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -7,16 +7,24 @@ import { Link, colors } from 'trezor-ui-components'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; +import type { State, Dispatch } from 'flowtype'; import { FONT_SIZE, SCREEN_SIZE, FOOTER_HEIGHT } from 'config/variables'; import * as LogActions from 'actions/LogActions'; import l10nMessages from './index.messages'; -type Props = { - opened: boolean, +type OwnProps = {| isLanding: boolean, - toggle: () => any, -}; +|}; +type StateProps = {| + opened: boolean, +|}; + +type DispatchProps = {| + toggle: typeof LogActions.toggle, +|}; + +type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; const Wrapper = styled.div` width: 100%; @@ -134,15 +142,15 @@ Footer.propTypes = { toggle: PropTypes.func.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state: State): StateProps => ({ opened: state.log.opened, }); -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ toggle: bindActionCreators(LogActions.toggle, dispatch), }); -export default connect( +export default connect( mapStateToProps, mapDispatchToProps )(Footer); diff --git a/src/components/Header/components/LanguagePicker/Container.js b/src/components/Header/components/LanguagePicker/Container.js index d811287c..8c51ccd6 100644 --- a/src/components/Header/components/LanguagePicker/Container.js +++ b/src/components/Header/components/LanguagePicker/Container.js @@ -1,41 +1,33 @@ /* @flow */ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { withRouter } from 'react-router-dom'; import * as WalletActions from 'actions/WalletActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import LanguagePicker from './index'; -type StateProps = { +type StateProps = {| language: string, -}; +|}; -type DispatchProps = { +type DispatchProps = {| fetchLocale: typeof WalletActions.fetchLocale, -}; +|}; -type OwnProps = {}; +type OwnProps = {||}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...StateProps, ...DispatchProps, ...OwnProps |}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ language: state.wallet.language, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ fetchLocale: bindActionCreators(WalletActions.fetchLocale, dispatch), }); -export default withRouter( - connect( - mapStateToProps, - mapDispatchToProps - )(LanguagePicker) -); +export default connect( + mapStateToProps, + mapDispatchToProps +)(LanguagePicker); diff --git a/src/components/Log/index.js b/src/components/Log/index.js index 0bc434a3..c2ea9bb5 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -12,12 +12,18 @@ import * as LogActions from 'actions/LogActions'; import type { State, Dispatch } from 'flowtype'; import l10nMessages from './index.messages'; -type Props = { +type OwnProps = {||}; +type StateProps = {| log: $ElementType, +|}; + +type DispatchProps = {| toggle: typeof LogActions.toggle, copyToClipboard: typeof LogActions.copyToClipboard, resetCopyState: typeof LogActions.resetCopyState, -}; +|}; + +type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; const Wrapper = styled.div` position: relative; @@ -64,7 +70,7 @@ const ButtonCopy = styled(Button)` margin-top: 10px; `; -const Log = (props: Props): ?React$Element => { +const Log = (props: Props) => { if (!props.log.opened) return null; const copyBtn = ( @@ -103,11 +109,11 @@ const Log = (props: Props): ?React$Element => { ); }; -export default connect( - (state: State) => ({ +export default connect( + (state: State): StateProps => ({ log: state.log, }), - (dispatch: Dispatch) => ({ + (dispatch: Dispatch): DispatchProps => ({ toggle: bindActionCreators(LogActions.toggle, dispatch), copyToClipboard: bindActionCreators(LogActions.copyToClipboard, dispatch), resetCopyState: bindActionCreators(LogActions.resetCopyState, dispatch), diff --git a/src/components/modals/Container.js b/src/components/modals/Container.js index a18433c8..e2a372c6 100644 --- a/src/components/modals/Container.js +++ b/src/components/modals/Container.js @@ -6,14 +6,13 @@ import { withRouter } from 'react-router-dom'; import ModalActions from 'actions/ModalActions'; import ReceiveActions from 'actions/ReceiveActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import Modal from './index'; -type OwnProps = {}; +type OwnProps = {||}; -type StateProps = { +type StateProps = {| modal: $ElementType, accounts: $ElementType, devices: $ElementType, @@ -24,18 +23,16 @@ type StateProps = { receive: $ElementType, localStorage: $ElementType, wallet: $ElementType, -}; +|}; -type DispatchProps = { +type DispatchProps = {| modalActions: typeof ModalActions, receiveActions: typeof ReceiveActions, -}; +|}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ modal: state.modal, accounts: state.accounts, devices: state.devices, @@ -48,15 +45,13 @@ const mapStateToProps: MapStateToProps = ( wallet: state.wallet, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ modalActions: bindActionCreators(ModalActions, dispatch), receiveActions: bindActionCreators(ReceiveActions, dispatch), }); // export default connect(mapStateToProps, mapDispatchToProps)(Modal); -export default withRouter( +export default withRouter( connect( mapStateToProps, mapDispatchToProps diff --git a/src/components/modals/QrModal/index.js b/src/components/modals/QrModal/index.js index 6ac10641..d206f82a 100644 --- a/src/components/modals/QrModal/index.js +++ b/src/components/modals/QrModal/index.js @@ -6,6 +6,7 @@ import QrReader from 'react-qr-reader'; import styled from 'styled-components'; import { FormattedMessage, injectIntl } from 'react-intl'; import { Link, Icon, P, H5, icons, colors } from 'trezor-ui-components'; +import type { IntlShape } from 'react-intl'; import { parseUri } from 'utils/cryptoUriParser'; import type { parsedURI } from 'utils/cryptoUriParser'; @@ -55,7 +56,7 @@ type Props = { onScan: (data: parsedURI) => any, onError?: (error: any) => any, onCancel?: $ElementType<$ElementType, 'onCancel'>, - intl: any, + intl: IntlShape, }; type State = { diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index ca37ba72..3b35c07c 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -3,6 +3,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; +import type { IntlShape } from 'react-intl'; import { H5, P, Button, Tooltip, Link, Icon, icons, colors } from 'trezor-ui-components'; @@ -15,7 +16,7 @@ import l10nMessages from './index.messages'; import type { Props as BaseProps } from '../../Container'; type Props = { - intl: any, + intl: IntlShape, device: TrezorDevice, onWalletTypeRequest: $ElementType< $ElementType, diff --git a/src/components/notifications/App/components/UpdateFirmware/index.js b/src/components/notifications/App/components/UpdateFirmware/index.js index 8e2d6930..005c1d94 100644 --- a/src/components/notifications/App/components/UpdateFirmware/index.js +++ b/src/components/notifications/App/components/UpdateFirmware/index.js @@ -5,11 +5,16 @@ import l10nCommonMessages from 'views/common.messages'; import { withRouter } from 'react-router-dom'; import { matchPath } from 'react-router'; import { getPattern } from 'support/routes'; -import type { Props } from '../../index'; +import type { ContextRouter } from 'react-router'; +import type { Props as BaseProps } from '../../index'; import l10nMessages from './index.messages'; -export default withRouter((props: Props & { location: any }) => { +type OwnProps = {||}; + +export type Props = {| ...OwnProps, ...BaseProps |}; + +const UpdateFirmware = (props: {| ...Props, ...ContextRouter |}) => { const { selectedDevice } = props.wallet; const outdated = selectedDevice && selectedDevice.features && selectedDevice.firmware === 'outdated'; @@ -36,4 +41,6 @@ export default withRouter((props: Props & { location: any }) => { ]} /> ); -}); +}; + +export default withRouter<{| ...Props |}>(UpdateFirmware); diff --git a/src/components/notifications/App/index.js b/src/components/notifications/App/index.js index 1538caa7..a3ff6a5c 100644 --- a/src/components/notifications/App/index.js +++ b/src/components/notifications/App/index.js @@ -4,32 +4,33 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { injectIntl } from 'react-intl'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import * as NotificationActions from 'actions/NotificationActions'; import * as RouterActions from 'actions/RouterActions'; +import type { intlShape } from 'react-intl'; import OnlineStatus from './components/OnlineStatus'; import UpdateBridge from './components/UpdateBridge'; import UpdateFirmware from './components/UpdateFirmware'; import NoBackup from './components/NoBackup'; -export type StateProps = { +type OwnProps = {| + intl: intlShape, +|}; + +export type StateProps = {| connect: $ElementType, wallet: $ElementType, children?: React.Node, -}; +|}; -export type DispatchProps = { +export type DispatchProps = {| close: typeof NotificationActions.close, routerActions: typeof RouterActions, -}; -type OwnProps = { - intl: any, -}; +|}; -export type Props = OwnProps & StateProps & DispatchProps; +export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; const Notifications = (props: Props) => ( @@ -40,22 +41,18 @@ const Notifications = (props: Props) => ( ); -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ connect: state.connect, wallet: state.wallet, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ close: bindActionCreators(NotificationActions.close, dispatch), routerActions: bindActionCreators(RouterActions, dispatch), }); export default injectIntl( - connect( + connect( mapStateToProps, mapDispatchToProps )(Notifications) diff --git a/src/components/notifications/Context/components/Static/index.js b/src/components/notifications/Context/components/Static/index.js index 55c71577..cb7e5491 100644 --- a/src/components/notifications/Context/components/Static/index.js +++ b/src/components/notifications/Context/components/Static/index.js @@ -12,7 +12,7 @@ export default (props: Props) => { const { selectedAccount } = props; const { account } = selectedAccount; const { location } = props.router; - const notifications: Array = []; + const notifications = []; if (!location || !selectedAccount || !account) return null; diff --git a/src/components/notifications/Context/index.js b/src/components/notifications/Context/index.js index 81aea768..ff2de3a3 100644 --- a/src/components/notifications/Context/index.js +++ b/src/components/notifications/Context/index.js @@ -3,8 +3,8 @@ import * as React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { injectIntl } from 'react-intl'; +import type { IntlShape } from 'react-intl'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import { reconnect } from 'actions/DiscoveryActions'; @@ -14,24 +14,25 @@ import StaticNotifications from './components/Static'; import AccountNotifications from './components/Account'; import ActionNotifications from './components/Action'; -export type StateProps = { +type OwnProps = {| + intl: IntlShape, +|}; + +export type StateProps = {| router: $ElementType, notifications: $ElementType, selectedAccount: $ElementType, wallet: $ElementType, blockchain: $ElementType, children?: React.Node, -}; +|}; -export type DispatchProps = { +export type DispatchProps = {| close: typeof NotificationActions.close, blockchainReconnect: typeof reconnect, -}; -type OwnProps = { - intl: any, -}; +|}; -export type Props = OwnProps & StateProps & DispatchProps; +export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; const Notifications = (props: Props) => ( @@ -41,9 +42,7 @@ const Notifications = (props: Props) => ( ); -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ router: state.router, notifications: state.notifications, selectedAccount: state.selectedAccount, @@ -51,15 +50,13 @@ const mapStateToProps: MapStateToProps = ( blockchain: state.blockchain, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ close: bindActionCreators(NotificationActions.close, dispatch), blockchainReconnect: bindActionCreators(reconnect, dispatch), }); -export default injectIntl( - connect( +export default injectIntl( + connect( mapStateToProps, mapDispatchToProps )(Notifications) diff --git a/src/flowtype/npm/react-intl_v2.x.x.js b/src/flowtype/npm/react-intl_v2.x.x.js new file mode 100644 index 00000000..2942eef3 --- /dev/null +++ b/src/flowtype/npm/react-intl_v2.x.x.js @@ -0,0 +1,259 @@ +/** + * Original implementation of this file by @marudor at https://github.com/marudor/flowInterfaces + * Copied here based on intention to merge with flow-typed expressed here: + * https://github.com/marudor/flowInterfaces/issues/6 + */ +// Mostly from https://github.com/yahoo/react-intl/wiki/API#react-intl-api +declare module "react-intl" { + import type { Element, ChildrenArray } from "react"; + + declare type $npm$ReactIntl$LocaleData = { + locale: string, + [key: string]: any + }; + + declare type $npm$ReactIntl$MessageDescriptor = { + id: string, + description?: string, + defaultMessage?: string + }; + + declare type $npm$ReactIntl$IntlConfig = { + locale: string, + formats: Object, + messages: { [id: string]: string }, + + defaultLocale?: string, + defaultFormats?: Object + }; + + declare type $npm$ReactIntl$IntlProviderConfig = { + locale?: string, + formats?: Object, + messages?: { [id: string]: string }, + + defaultLocale?: string, + defaultFormats?: Object + }; + + declare type $npm$ReactIntl$IntlFormat = { + formatDate: (value: any, options?: Object) => string, + formatTime: (value: any, options?: Object) => string, + formatRelative: (value: any, options?: Object) => string, + formatNumber: (value: any, options?: Object) => string, + formatPlural: (value: any, options?: Object) => string, + formatMessage: ( + messageDescriptor: $npm$ReactIntl$MessageDescriptor, + values?: Object + ) => string, + formatHTMLMessage: ( + messageDescriptor: $npm$ReactIntl$MessageDescriptor, + values?: Object + ) => string + }; + + declare type $npm$ReactIntl$IntlShape = $npm$ReactIntl$IntlConfig & + $npm$ReactIntl$IntlFormat & { now: () => number }; + + declare type $npm$ReactIntl$DateTimeFormatOptions = { + localeMatcher?: "best fit" | "lookup", + formatMatcher?: "basic" | "best fit", + + timeZone?: string, + hour12?: boolean, + + weekday?: "narrow" | "short" | "long", + era?: "narrow" | "short" | "long", + year?: "numeric" | "2-digit", + month?: "numeric" | "2-digit" | "narrow" | "short" | "long", + day?: "numeric" | "2-digit", + hour?: "numeric" | "2-digit", + minute?: "numeric" | "2-digit", + second?: "numeric" | "2-digit", + timeZoneName?: "short" | "long" + }; + + declare type $npm$ReactIntl$RelativeFormatOptions = { + style?: "best fit" | "numeric", + units?: "second" | "minute" | "hour" | "day" | "month" | "year" + }; + + declare type $npm$ReactIntl$NumberFormatOptions = { + localeMatcher?: "best fit" | "lookup", + + style?: "decimal" | "currency" | "percent", + + currency?: string, + currencyDisplay?: "symbol" | "code" | "name", + + useGrouping?: boolean, + + minimumIntegerDigits?: number, + minimumFractionDigits?: number, + maximumFractionDigits?: number, + minimumSignificantDigits?: number, + maximumSignificantDigits?: number + }; + + declare type $npm$ReactIntl$PluralFormatOptions = { + style?: "cardinal" | "ordinal" + }; + + declare type $npm$ReactIntl$PluralCategoryString = + | "zero" + | "one" + | "two" + | "few" + | "many" + | "other"; + + declare type $npm$ReactIntl$DateParseable = number | string | Date; + // PropType checker + declare function intlShape( + props: Object, + propName: string, + componentName: string + ): void; + declare function addLocaleData( + data: $npm$ReactIntl$LocaleData | Array<$npm$ReactIntl$LocaleData> + ): void; + declare function defineMessages< + T: { [key: string]: $Exact<$npm$ReactIntl$MessageDescriptor> } + >( + messageDescriptors: T + ): T; + + declare type InjectIntlProvidedProps = { + intl: $npm$ReactIntl$IntlShape + } + + declare type InjectIntlVoidProps = { + intl: $npm$ReactIntl$IntlShape | void + } + + declare type ComponentWithDefaultProps = + | React$ComponentType + | React$StatelessFunctionalComponent + | ChildrenArray>; + + declare type InjectIntlOptions = { + intlPropName?: string, + withRef?: boolean + } + + declare class IntlInjectedComponent extends React$Component { + static WrappedComponent: Class>, + static defaultProps: TDefaultProps, + props: TOwnProps + } + + declare type IntlInjectedComponentClass = Class< + IntlInjectedComponent + >; + + declare function injectIntl>( + WrappedComponent: Component, + options?: InjectIntlOptions, + ): React$ComponentType< + $Diff, InjectIntlVoidProps> + >; + + declare function formatMessage( + messageDescriptor: $npm$ReactIntl$MessageDescriptor, + values?: Object + ): string; + declare function formatHTMLMessage( + messageDescriptor: $npm$ReactIntl$MessageDescriptor, + values?: Object + ): string; + declare function formatDate( + value: any, + options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string } + ): string; + declare function formatTime( + value: any, + options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string } + ): string; + declare function formatRelative( + value: any, + options?: $npm$ReactIntl$RelativeFormatOptions & { + format: string, + now: any + } + ): string; + declare function formatNumber( + value: any, + options?: $npm$ReactIntl$NumberFormatOptions & { format: string } + ): string; + declare function formatPlural( + value: any, + options?: $npm$ReactIntl$PluralFormatOptions + ): $npm$ReactIntl$PluralCategoryString; + + declare class FormattedMessage extends React$Component< + $npm$ReactIntl$MessageDescriptor & { + values?: Object, + tagName?: string, + children?: + | ((...formattedMessage: Array) => React$Node) + | (string => React$Node) + } + > {} + declare class FormattedHTMLMessage extends React$Component< + $npm$ReactIntl$DateTimeFormatOptions & { + values?: Object, + tagName?: string, + children?: (...formattedMessage: Array) => React$Node + } + > {} + declare class FormattedDate extends React$Component< + $npm$ReactIntl$DateTimeFormatOptions & { + value: $npm$ReactIntl$DateParseable, + format?: string, + children?: (formattedDate: string) => React$Node + } + > {} + declare class FormattedTime extends React$Component< + $npm$ReactIntl$DateTimeFormatOptions & { + value: $npm$ReactIntl$DateParseable, + format?: string, + children?: (formattedDate: string) => React$Node + } + > {} + declare class FormattedRelative extends React$Component< + $npm$ReactIntl$RelativeFormatOptions & { + value: $npm$ReactIntl$DateParseable, + format?: string, + updateInterval?: number, + initialNow?: $npm$ReactIntl$DateParseable, + children?: (formattedDate: string) => React$Node + } + > {} + declare class FormattedNumber extends React$Component< + $npm$ReactIntl$NumberFormatOptions & { + value: number | string, + format?: string, + children?: (formattedNumber: string) => React$Node + } + > {} + declare class FormattedPlural extends React$Component< + $npm$ReactIntl$PluralFormatOptions & { + value: number | string, + other: React$Node, + zero?: React$Node, + one?: React$Node, + two?: React$Node, + few?: React$Node, + many?: React$Node, + children?: (formattedPlural: React$Node) => React$Node + } + > {} + declare class IntlProvider extends React$Component< + $npm$ReactIntl$IntlProviderConfig & { + children?: React$Node, + initialNow?: $npm$ReactIntl$DateParseable + } + > {} + declare type IntlShape = $npm$ReactIntl$IntlShape; + declare type MessageDescriptor = $npm$ReactIntl$MessageDescriptor; + } \ No newline at end of file diff --git a/src/flowtype/npm/react-redux_v5.x.x.js b/src/flowtype/npm/react-redux_v5.x.x.js index 58471492..0df28a83 100644 --- a/src/flowtype/npm/react-redux_v5.x.x.js +++ b/src/flowtype/npm/react-redux_v5.x.x.js @@ -1,127 +1,275 @@ -// flow-typed signature: 59b0c4be0e1408f21e2446be96c79804 -// flow-typed version: 9092387fd2/react-redux_v5.x.x/flow_>=v0.54.x +/** +The order of type arguments for connect() is as follows: -import type { Dispatch, Store } from 'redux'; +connect(…) -declare module 'react-redux' { - /* +In Flow v0.89 only the first two are mandatory to specify. Other 4 can be repaced with the new awesome type placeholder: - S = State - A = Action - D = Dispatch - OP = OwnProps - SP = StateProps - DP = DispatchProps +connect(…) - */ +But beware, in case of weird type errors somewhere in random places +just type everything and get to a green field and only then try to +remove the definitions you see bogus. - declare type MapStateToProps = ( - state: S, - ownProps: OP - ) => ((state: S, ownProps: OP) => SP) | SP; +Decrypting the abbreviations: + WC = Component being wrapped + S = State + D = Dispatch + OP = OwnProps + SP = StateProps + DP = DispatchProps + MP = Merge props + RSP = Returned state props + RDP = Returned dispatch props + RMP = Returned merge props + CP = Props for returned component + Com = React Component + ST = Static properties of Com + EFO = Extra factory options (used only in connectAdvanced) +*/ + +declare module "react-redux" { + // ------------------------------------------------------------ + // Typings for connect() + // ------------------------------------------------------------ + + declare export type Options = {| + pure?: boolean, + withRef?: boolean, + areStatesEqual?: (next: S, prev: S) => boolean, + areOwnPropsEqual?: (next: OP, prev: OP) => boolean, + areStatePropsEqual?: (next: SP, prev: SP) => boolean, + areMergedPropsEqual?: (next: MP, prev: MP) => boolean, + storeKey?: string, + |}; - declare type MapDispatchToProps = + declare type MapStateToProps<-S, -OP, +SP> = + | ((state: S, ownProps: OP) => SP) + // If you want to use the factory function but get a strange error + // like "function is not an object" then just type the factory function + // like this: + // const factory: (State, OwnProps) => (State, OwnProps) => StateProps + // and provide the StateProps type to the SP type parameter. + | ((state: S, ownProps: OP) => (state: S, ownProps: OP) => SP); + + declare type Bind = ((...A) => R) => (...A) => $Call; + + declare type MapDispatchToPropsFn = | ((dispatch: D, ownProps: OP) => DP) - | DP; + // If you want to use the factory function but get a strange error + // like "function is not an object" then just type the factory function + // like this: + // const factory: (Dispatch, OwnProps) => (Dispatch, OwnProps) => DispatchProps + // and provide the DispatchProps type to the DP type parameter. + | ((dispatch: D, ownProps: OP) => (dispatch: D, ownProps: OP) => DP); + + declare class ConnectedComponent extends React$Component { + static +WrappedComponent: WC; + getWrappedInstance(): React$ElementRef; + } + declare type Connector = >( + WC, + ) => Class> & WC; + + // No `mergeProps` argument + + declare export function connect<-P, -OP, -SP, -DP, -S, -D>( + mapStateToProps?: null | void, + mapDispatchToProps?: null | void, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector; + + declare export function connect<-P, -OP, -SP, -DP, -S, -D>( + // If you get error here try adding return type to your mapStateToProps function + mapStateToProps: MapStateToProps, + mapDispatchToProps?: null | void, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector; + + // In this case DP is an object of functions which has been bound to dispatch + // by the given mapDispatchToProps function. + declare export function connect<-P, -OP, -SP, -DP, S, D>( + mapStateToProps: null | void, + mapDispatchToProps: MapDispatchToPropsFn, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector; + + // In this case DP is an object of action creators not yet bound to dispatch, + // this difference is not important in the vanila redux, + // but in case of usage with redux-thunk, the return type may differ. + declare export function connect<-P, -OP, -SP, -DP, S, D>( + mapStateToProps: null | void, + mapDispatchToProps: DP, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector> |}>; + + declare export function connect<-P, -OP, -SP, -DP, S, D>( + // If you get error here try adding return type to your mapStateToProps function + mapStateToProps: MapStateToProps, + mapDispatchToProps: MapDispatchToPropsFn, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector; + + declare export function connect<-P, -OP, -SP, -DP, S, D>( + // If you get error here try adding return type to your mapStateToProps function + mapStateToProps: MapStateToProps, + mapDispatchToProps: DP, + mergeProps?: null | void, + options?: ?Options, + // Got error like inexact OwnProps is incompatible with exact object type? + // Just make your OP parameter an exact object. + ): Connector> |}>; + + // With `mergeProps` argument - declare type MergeProps = ( + declare type MergeProps<+P, -OP, -SP, -DP> = ( stateProps: SP, dispatchProps: DP, - ownProps: OP + ownProps: OP, ) => P; - declare type Context = { store: Store<*, *> }; + declare export function connect<-P, -OP, -SP: {||}, -DP: {||}, S, D>( + mapStateToProps: null | void, + mapDispatchToProps: null | void, + // If you get error here try adding return type to you mapStateToProps function + mergeProps: MergeProps, + options?: ?Options, + ): Connector; - declare type ComponentWithDefaultProps = Class> & { defaultProps: DP }; + declare export function connect<-P, -OP, -SP, -DP: {||}, S, D>( + mapStateToProps: MapStateToProps, + mapDispatchToProps: null | void, + // If you get error here try adding return type to you mapStateToProps function + mergeProps: MergeProps, + options?: ?Options, + ): Connector; - declare class ConnectedComponentWithDefaultProps< - OP, - DP, - CP - > extends React$Component { - static defaultProps: DP, // <= workaround for https://github.com/facebook/flow/issues/4644 - static WrappedComponent: Class>, - getWrappedInstance(): React$Component, - props: OP, - state: void - } + // In this case DP is an object of functions which has been bound to dispatch + // by the given mapDispatchToProps function. + declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>( + mapStateToProps: null | void, + mapDispatchToProps: MapDispatchToPropsFn, + mergeProps: MergeProps, + options?: ?Options, + ): Connector; - declare class ConnectedComponent extends React$Component { - static WrappedComponent: Class>, - getWrappedInstance(): React$Component

, - props: OP, - state: void - } + // In this case DP is an object of action creators not yet bound to dispatch, + // this difference is not important in the vanila redux, + // but in case of usage with redux-thunk, the return type may differ. + declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>( + mapStateToProps: null | void, + mapDispatchToProps: DP, + mergeProps: MergeProps>>, + options?: ?Options, + ): Connector; - declare type ConnectedComponentWithDefaultPropsClass = Class>; + // In this case DP is an object of functions which has been bound to dispatch + // by the given mapDispatchToProps function. + declare export function connect<-P, -OP, -SP, -DP, S, D>( + mapStateToProps: MapStateToProps, + mapDispatchToProps: MapDispatchToPropsFn, + mergeProps: MergeProps, + options?: ?Options, + ): Connector; - declare type ConnectedComponentClass = Class>; + // In this case DP is an object of action creators not yet bound to dispatch, + // this difference is not important in the vanila redux, + // but in case of usage with redux-thunk, the return type may differ. + declare export function connect<-P, -OP, -SP, -DP, S, D>( + mapStateToProps: MapStateToProps, + mapDispatchToProps: DP, + mergeProps: MergeProps>>, + options?: ?Options, + ): Connector; - declare type Connector = (( - component: ComponentWithDefaultProps - ) => ConnectedComponentWithDefaultPropsClass) & - ((component: React$ComponentType

) => ConnectedComponentClass); + // ------------------------------------------------------------ + // Typings for Provider + // ------------------------------------------------------------ - declare class Provider extends React$Component<{ - store: Store, - children?: any + declare export class Provider extends React$Component<{ + store: Store, + children?: React$Node, }> {} - declare function createProvider( + declare export function createProvider( storeKey?: string, - subKey?: string - ): Provider<*, *>; + subKey?: string, + ): Class>; - declare type ConnectOptions = { - pure?: boolean, - withRef?: boolean - }; + // ------------------------------------------------------------ + // Typings for connectAdvanced() + // ------------------------------------------------------------ - declare type Null = null | void; + declare type ConnectAdvancedOptions = { + getDisplayName?: (name: string) => string, + methodName?: string, + renderCountProp?: string, + shouldHandleStateChanges?: boolean, + storeKey?: string, + withRef?: boolean, + }; - declare function connect( - ...rest: Array // <= workaround for https://github.com/facebook/flow/issues/2360 - ): Connector } & OP>>; + declare type SelectorFactoryOptions = { + getDisplayName: (name: string) => string, + methodName: string, + renderCountProp: ?string, + shouldHandleStateChanges: boolean, + storeKey: string, + withRef: boolean, + displayName: string, + wrappedComponentName: string, + WrappedComponent: Com, + }; - declare function connect( - mapStateToProps: Null, - mapDispatchToProps: Null, - mergeProps: Null, - options: ConnectOptions - ): Connector } & OP>>; + declare type MapStateToPropsEx = ( + state: S, + props: SP, + ) => RSP; - declare function connect( - mapStateToProps: MapStateToProps, - mapDispatchToProps: Null, - mergeProps: Null, - options?: ConnectOptions - ): Connector } & OP>>; - - declare function connect( - mapStateToProps: Null, - mapDispatchToProps: MapDispatchToProps, - mergeProps: Null, - options?: ConnectOptions - ): Connector>; - - declare function connect( - mapStateToProps: MapStateToProps, - mapDispatchToProps: MapDispatchToProps, - mergeProps: Null, - options?: ConnectOptions - ): Connector>; + declare type SelectorFactory< + Com: React$ComponentType<*>, + Dispatch, + S: Object, + OP: Object, + EFO: Object, + CP: Object, + > = ( + dispatch: Dispatch, + factoryOptions: SelectorFactoryOptions & EFO, + ) => MapStateToPropsEx; - declare function connect( - mapStateToProps: MapStateToProps, - mapDispatchToProps: Null, - mergeProps: MergeProps, - options?: ConnectOptions - ): Connector; + declare export function connectAdvanced< + Com: React$ComponentType<*>, + D, + S: Object, + OP: Object, + CP: Object, + EFO: Object, + ST: { [_: $Keys]: any }, + >( + selectorFactory: SelectorFactory, + connectAdvancedOptions: ?(ConnectAdvancedOptions & EFO), + ): (component: Com) => React$ComponentType & $Shape; - declare function connect( - mapStateToProps: MapStateToProps, - mapDispatchToProps: MapDispatchToProps, - mergeProps: MergeProps, - options?: ConnectOptions - ): Connector; + declare export default { + Provider: typeof Provider, + createProvider: typeof createProvider, + connect: typeof connect, + connectAdvanced: typeof connectAdvanced, + }; } \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index e51fb473..4738bfb5 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,6 +2,7 @@ import { combineReducers } from 'redux'; import { connectRouter } from 'connected-react-router'; import type { State } from 'connected-react-router'; +import type { Action } from 'flowtype'; import log from 'reducers/LogReducer'; import localStorage from 'reducers/LocalStorageReducer'; @@ -60,8 +61,8 @@ export type Reducers = typeof reducers; type $ExtractFunctionReturn = (v: (...args: any) => V) => V; export type ReducersState = $ObjMap; -export default (history: any) => - combineReducers({ +export default (history: Object) => + combineReducers({ ...reducers, router: connectRouter(history), }); diff --git a/src/store.js b/src/store.js index d260a0fc..e6895fa7 100644 --- a/src/store.js +++ b/src/store.js @@ -12,11 +12,10 @@ import Raven from 'raven-js'; import RavenMiddleware from 'redux-raven-middleware'; import * as buildUtils from 'utils/build'; -import type { Action, GetState } from 'flowtype'; +import type { State, Action, Dispatch, GetState } from 'flowtype'; export const history: History = createHistory({ queryKey: false }); -const initialState: any = {}; const enhancers = []; const middlewares = [thunk, routerMiddleware(history)]; @@ -61,4 +60,4 @@ if (buildUtils.isDev()) { ); } -export default createStore(createRootReducer(history), initialState, composedEnhancers); +export default createStore(createRootReducer(history), composedEnhancers); diff --git a/src/support/ConnectedIntlProvider.js b/src/support/ConnectedIntlProvider.js index 70c525cb..547ebaa0 100644 --- a/src/support/ConnectedIntlProvider.js +++ b/src/support/ConnectedIntlProvider.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import type { MapStateToProps } from 'react-redux'; import type { State } from 'flowtype'; import { IntlProvider, addLocaleData } from 'react-intl'; @@ -43,20 +42,21 @@ addLocaleData([ ...zh, ]); -type OwnProps = { +type OwnProps = {| children: React.Node, -}; +|}; -type StateProps = { +type StateProps = {| locale: string, messages: { [string]: string }, -}; +|}; -type Props = StateProps & OwnProps; +type Props = {| + ...OwnProps, + ...StateProps, +|}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ locale: state.wallet.language, messages: state.wallet.messages, }); @@ -71,7 +71,6 @@ const ReactIntlProvider = ({ children, locale, messages }: Props) => ( ); -export default connect( - mapStateToProps, - null -)(ReactIntlProvider); +export default connect(mapStateToProps)( + ReactIntlProvider +); diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js index 332c4d53..8ddb0207 100644 --- a/src/views/Landing/components/BetaDisclaimer/index.js +++ b/src/views/Landing/components/BetaDisclaimer/index.js @@ -9,8 +9,19 @@ import { Button, Icon, P, H5, colors, icons } from 'trezor-ui-components'; import { FONT_SIZE } from 'config/variables'; import * as WalletActions from 'actions/WalletActions'; +import type { State, Dispatch } from 'flowtype'; import l10nMessages from './index.messages'; +type OwnProps = {||}; + +type StateProps = {||}; + +type DispatchProps = {| + close: typeof WalletActions.hideBetaDisclaimer, +|}; + +type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; + const Wrapper = styled.div` width: 100%; min-height: 100vh; @@ -50,7 +61,7 @@ const StyledIcon = styled(Icon)` top: -1px; `; -const BetaDisclaimer = (props: { close: () => void }) => ( +const BetaDisclaimer = (props: Props) => (

@@ -115,9 +126,9 @@ const BetaDisclaimer = (props: { close: () => void }) => ( ); -export default connect( +export default connect( null, - (dispatch: Dispatch) => ({ + (dispatch: Dispatch): DispatchProps => ({ close: bindActionCreators(WalletActions.hideBetaDisclaimer, dispatch), }) )(BetaDisclaimer); diff --git a/src/views/Landing/views/Import/Container.js b/src/views/Landing/views/Import/Container.js index 5991a397..26ced7de 100644 --- a/src/views/Landing/views/Import/Container.js +++ b/src/views/Landing/views/Import/Container.js @@ -4,39 +4,34 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import * as RouterActions from 'actions/RouterActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import ImportView from './index'; -export type StateProps = { - transport: $ElementType<$ElementType, 'transport'>, +type OwnProps = {| children?: React.Node, -}; +|}; +export type StateProps = {| + transport: $ElementType<$ElementType, 'transport'>, +|}; -type DispatchProps = { +type DispatchProps = {| selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice, -}; - -type OwnProps = {}; +|}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ transport: state.connect.transport, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ selectFirstAvailableDevice: bindActionCreators( RouterActions.selectFirstAvailableDevice, dispatch ), }); -export default connect( +export default connect( mapStateToProps, mapDispatchToProps )(ImportView); diff --git a/src/views/Landing/views/InstallBridge/Container.js b/src/views/Landing/views/InstallBridge/Container.js index 8bfaf5de..d61a7dc8 100644 --- a/src/views/Landing/views/InstallBridge/Container.js +++ b/src/views/Landing/views/InstallBridge/Container.js @@ -4,39 +4,34 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import * as RouterActions from 'actions/RouterActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import InstallBridge from './index'; -export type StateProps = { - transport: $ElementType<$ElementType, 'transport'>, +type OwnProps = {| children?: React.Node, -}; +|}; +export type StateProps = {| + transport: $ElementType<$ElementType, 'transport'>, +|}; -type DispatchProps = { +type DispatchProps = {| selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice, -}; - -type OwnProps = {}; +|}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...StateProps, ...DispatchProps, ...OwnProps |}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ transport: state.connect.transport, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ selectFirstAvailableDevice: bindActionCreators( RouterActions.selectFirstAvailableDevice, dispatch ), }); -export default connect( +export default connect( mapStateToProps, mapDispatchToProps )(InstallBridge); diff --git a/src/views/Landing/views/Root/Container.js b/src/views/Landing/views/Root/Container.js index 9c893749..0f6d2208 100644 --- a/src/views/Landing/views/Root/Container.js +++ b/src/views/Landing/views/Root/Container.js @@ -2,11 +2,13 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import type { MapStateToProps } from 'react-redux'; import type { State } from 'flowtype'; import RootView from './index'; -export type StateProps = { +type OwnProps = {| + children?: React.Node, +|}; +export type StateProps = {| localStorage: $ElementType, modal: $ElementType, wallet: $ElementType, @@ -15,16 +17,13 @@ export type StateProps = { wallet: $ElementType, devices: $ElementType, children?: React.Node, -}; +|}; -type DispatchProps = {}; -type OwnProps = {}; +type DispatchProps = {||}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ localStorage: state.localStorage, modal: state.modal, wallet: state.wallet, @@ -33,7 +32,6 @@ const mapStateToProps: MapStateToProps = ( devices: state.devices, }); -export default connect( - mapStateToProps, - null -)(RootView); +export default connect(mapStateToProps)( + RootView +); diff --git a/src/views/Wallet/components/LeftNavigation/Container.js b/src/views/Wallet/components/LeftNavigation/Container.js index d5d21d47..17a84e37 100644 --- a/src/views/Wallet/components/LeftNavigation/Container.js +++ b/src/views/Wallet/components/LeftNavigation/Container.js @@ -8,18 +8,15 @@ import * as TrezorConnectActions from 'actions/TrezorConnectActions'; import * as DiscoveryActions from 'actions/DiscoveryActions'; import * as RouterActions from 'actions/RouterActions'; import * as ModalActions from 'actions/ModalActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; import type { StateProps, DispatchProps } from './components/common'; import LeftNavigation from './index'; -type OwnProps = {}; +type OwnProps = {||}; -const mapStateToProps: MapStateToProps = ( - state: State -): StateProps => ({ +const mapStateToProps = (state: State): StateProps => ({ connect: state.connect, accounts: state.accounts, router: state.router, @@ -31,9 +28,7 @@ const mapStateToProps: MapStateToProps = ( pending: state.pending, }); -const mapDispatchToProps: MapDispatchToProps = ( - dispatch: Dispatch -): DispatchProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ toggleDeviceDropdown: bindActionCreators(toggleDeviceDropdown, dispatch), addAccount: bindActionCreators(DiscoveryActions.addAccount, dispatch), acquireDevice: bindActionCreators(TrezorConnectActions.acquire, dispatch), @@ -46,7 +41,7 @@ const mapDispatchToProps: MapDispatchToProps setHideBalance: bindActionCreators(setHideBalance, dispatch), }); -export default withRouter( +export default withRouter( connect( mapStateToProps, mapDispatchToProps diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 0d235654..3c8683ff 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -109,7 +109,7 @@ class DeviceMenu extends PureComponent { mouseDownHandler: (event: MouseEvent) => void; - blurHandler: (event: FocusEvent) => void; + blurHandler: () => void; showDivider() { return this.props.devices.length > 1; diff --git a/src/views/Wallet/components/LeftNavigation/components/common.js b/src/views/Wallet/components/LeftNavigation/components/common.js index f492cc62..5c1a71b0 100644 --- a/src/views/Wallet/components/LeftNavigation/components/common.js +++ b/src/views/Wallet/components/LeftNavigation/components/common.js @@ -6,7 +6,7 @@ import * as ModalActions from 'actions/ModalActions'; import * as WalletActions from 'actions/WalletActions'; import type { State } from 'flowtype'; -export type StateProps = { +export type StateProps = {| connect: $ElementType, accounts: $ElementType, router: $ElementType, @@ -16,9 +16,9 @@ export type StateProps = { wallet: $ElementType, devices: $ElementType, pending: $ElementType, -}; +|}; -export type DispatchProps = { +export type DispatchProps = {| toggleDeviceDropdown: typeof WalletActions.toggleDeviceDropdown, toggleSidebar: typeof WalletActions.toggleSidebar, setHideBalance: typeof WalletActions.setHideBalance, @@ -29,6 +29,6 @@ export type DispatchProps = { gotoDeviceSettings: typeof RouterActions.gotoDeviceSettings, onSelectDevice: typeof RouterActions.selectDevice, gotoExternalWallet: typeof ModalActions.gotoExternalWallet, -}; +|}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...StateProps, ...DispatchProps |}; diff --git a/src/views/Wallet/components/Title/index.js b/src/views/Wallet/components/Title/index.js index 3eefdea7..1a15b325 100644 --- a/src/views/Wallet/components/Title/index.js +++ b/src/views/Wallet/components/Title/index.js @@ -1,9 +1,14 @@ -import React from 'react'; +/* @flow */ +import * as React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { colors } from 'trezor-ui-components'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +type OwnProps = {| + children?: React.Node, +|}; + const Wrapper = styled.div` font-size: ${FONT_SIZE.WALLET_TITLE}; font-weight: ${FONT_WEIGHT.MEDIUM}; @@ -11,7 +16,7 @@ const Wrapper = styled.div` padding-bottom: 35px; `; -const Title = ({ children }) => {children}; +const Title = ({ children }: OwnProps) => {children}; Title.propTypes = { children: PropTypes.node, diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index b4847f4f..748a610a 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -12,10 +12,15 @@ import { FormattedMessage } from 'react-intl'; import l10nMessages from './index.messages'; import Indicator from './components/Indicator'; -type Props = { +type OwnProps = {||}; + +type StateProps = {| router: $ElementType, selectedAccount: $ElementType, -}; +|}; + +type Props = {| ...OwnProps, ...StateProps |}; + type LocalState = { wrapper: ?HTMLElement, }; @@ -72,7 +77,7 @@ const StyledNavLink = styled(NavLink)` `; class TopNavigationAccount extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { wrapper: null, @@ -119,10 +124,9 @@ class TopNavigationAccount extends React.PureComponent { } } -export default connect( - (state: State): Props => ({ +export default connect( + (state: State): StateProps => ({ router: state.router, selectedAccount: state.selectedAccount, - }), - null + }) )(TopNavigationAccount); diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 380b3d88..a93a9a90 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -7,11 +7,9 @@ import { connect } from 'react-redux'; import { Route, withRouter } from 'react-router-dom'; import { getPattern } from 'support/routes'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; -import type { State } from 'flowtype'; +import type { State, Dispatch } from 'flowtype'; -import type { WalletAction } from 'actions/WalletActions'; -import { toggleSidebar } from 'actions/WalletActions'; +import * as WalletActions from 'actions/WalletActions'; import { bindActionCreators } from 'redux'; import Header from 'components/Header'; @@ -29,18 +27,19 @@ import TopNavigationAccount from './components/TopNavigationAccount'; import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings'; import TopNavigationWalletSettings from './components/TopNavigationWalletSettings'; -type StateProps = { +type StateProps = {| wallet: $ElementType, - children?: React.Node, -}; +|}; -type DispatchProps = { - toggleSidebar: WalletAction, -}; +type DispatchProps = {| + toggleSidebar: typeof WalletActions.toggleSidebar, +|}; -type OwnProps = {}; +type OwnProps = {| + children?: React.Node, +|}; -export type Props = StateProps & DispatchProps; +export type Props = {| ...StateProps, ...DispatchProps, ...OwnProps |}; const AppWrapper = styled.div` position: relative; @@ -137,26 +136,22 @@ const Wallet = (props: Props) => ( {props.children} -