From 0cb723b9db7c20ab84b1bdf72cc92e50ebd3f765 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Tue, 9 Oct 2018 17:32:56 +0200 Subject: [PATCH] flowtype fixes for all modals --- .../modals/confirm/Address/index.js | 8 +++++-- src/components/modals/confirm/SignTx/index.js | 10 ++++++--- .../modals/confirm/UnverifiedAddress/index.js | 5 ++--- .../modals/device/Duplicate/index.js | 10 ++++----- src/components/modals/device/Forget/index.js | 12 ++++++++--- .../modals/device/Remember/index.js | 20 ++++++++---------- src/components/modals/pin/Invalid/index.js | 2 ++ .../modals/pin/Pin/components/Button/index.js | 21 ++++++++++--------- .../modals/pin/Pin/components/Input/index.js | 17 ++++++++------- 9 files changed, 59 insertions(+), 46 deletions(-) diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index 0c562333..b3b4958f 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -1,9 +1,13 @@ +/* @flow */ + +import React from 'react'; import styled from 'styled-components'; import H3 from 'components/Heading'; import colors from 'config/colors'; import P from 'components/Paragraph'; import { FONT_SIZE } from 'config/variables'; -import React from 'react'; + +import type { Props } from '../../index'; const Wrapper = styled.div` width: 390px; @@ -24,7 +28,7 @@ const Label = styled.div` color: ${colors.TEXT_SECONDARY}; `; -const ConfirmAddress = (props) => { +const ConfirmAddress = (props: Props) => { const { account, network, diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 7b3110de..3b71afa3 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -1,12 +1,16 @@ +/* @flow */ + import React from 'react'; -import colors from 'config/colors'; import styled from 'styled-components'; +import colors from 'config/colors'; import P from 'components/Paragraph'; import Icon from 'components/Icon'; import icons from 'config/icons'; import { H3 } from 'components/Heading'; import { LINE_HEIGHT } from 'config/variables'; +import type { Props } from '../../index'; + const Wrapper = styled.div` width: 390px; padding: 12px 10px; @@ -25,7 +29,7 @@ const Content = styled.div` const StyledP = styled(P)` word-wrap: break-word; padding: 5px 0; - line-height: ${LINE_HEIGHT.SMALL} + line-height: ${LINE_HEIGHT.SMALL}; `; const Label = styled.div` @@ -34,7 +38,7 @@ const Label = styled.div` color: ${colors.TEXT_SECONDARY}; `; -const ConfirmSignTx = (props) => { +const ConfirmSignTx = (props: Props) => { if (!props.modal.opened) return null; const { device } = props.modal; diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 0355ccb0..165cc166 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -57,9 +57,8 @@ class ConfirmUnverifiedAddress extends Component { verifyAddress() { if (!this.props.modal.opened) return; - const { - account, - } = this.props.selectedAccount; + const { account } = this.props.selectedAccount; + if (!account) return; this.props.modalActions.onCancel(); this.props.receiveActions.showAddress(account.addressPath); } diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 89b2e0e2..c259a1aa 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -79,12 +79,6 @@ export default class DuplicateDevice extends Component { }; } - state: State; - - input: ?HTMLInputElement; - - keyboardHandler: (event: KeyboardEvent) => void; - componentDidMount(): void { // one time autofocus if (this.input) this.input.focus(); @@ -108,6 +102,8 @@ export default class DuplicateDevice extends Component { }); } + input: ?HTMLInputElement; + keyboardHandler(event: KeyboardEvent): void { if (event.keyCode === 13 && !this.state.isUsed) { event.preventDefault(); @@ -115,6 +111,8 @@ export default class DuplicateDevice extends Component { } } + keyboardHandler: (event: KeyboardEvent) => void; + submit() { if (!this.props.modal.opened) return; const extended: Object = { instanceName: this.state.instanceName, instance: this.state.instance }; diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index 1b17f037..951c3f75 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -1,9 +1,13 @@ +/* @flow */ + import React, { Component } from 'react'; import styled from 'styled-components'; import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/Button'; +import type { Props } from '../../index'; + const Wrapper = styled.div` width: 360px; padding: 24px 48px; @@ -23,7 +27,7 @@ const Row = styled.div` padding: 10px 0; `; -class ForgetDevice extends Component { +class ForgetDevice extends Component { componentDidMount() { this.keyboardHandler = this.keyboardHandler.bind(this); window.addEventListener('keydown', this.keyboardHandler, false); @@ -33,13 +37,15 @@ class ForgetDevice extends Component { window.removeEventListener('keydown', this.keyboardHandler, false); } - keyboardHandler(event) { + keyboardHandler(event: KeyboardEvent) { if (event.keyCode === 13) { event.preventDefault(); this.forget(); } } + keyboardHandler: (event: KeyboardEvent) => void; + forget() { if (this.props.modal.opened) { this.props.modalActions.onForgetSingleDevice(this.props.modal.device); @@ -56,7 +62,7 @@ class ForgetDevice extends Component { Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again. this.forget()}>Forget - Don't forget + Don't forget ); diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js index e5803a38..628c01eb 100644 --- a/src/components/modals/device/Remember/index.js +++ b/src/components/modals/device/Remember/index.js @@ -48,10 +48,6 @@ const StyledLoader = styled(Loader)` `; export default class RememberDevice extends Component { - keyboardHandler: (event: KeyboardEvent) => void; - - state: State; - constructor(props: Props) { super(props); @@ -60,13 +56,6 @@ export default class RememberDevice extends Component { }; } - keyboardHandler(event: KeyboardEvent): void { - if (event.keyCode === 13) { - event.preventDefault(); - this.forget(); - } - } - componentDidMount(): void { const ticker = () => { if (this.state.countdown - 1 <= 0) { @@ -99,6 +88,15 @@ export default class RememberDevice extends Component { } } + keyboardHandler(event: KeyboardEvent): void { + if (event.keyCode === 13) { + event.preventDefault(); + this.forget(); + } + } + + keyboardHandler: (event: KeyboardEvent) => void; + forget() { if (this.props.modal.opened) { this.props.modalActions.onForgetDevice(this.props.modal.device); diff --git a/src/components/modals/pin/Invalid/index.js b/src/components/modals/pin/Invalid/index.js index 62d86706..239b21ce 100644 --- a/src/components/modals/pin/Invalid/index.js +++ b/src/components/modals/pin/Invalid/index.js @@ -1,3 +1,5 @@ +/* @flow */ + import React from 'react'; import styled from 'styled-components'; import { H3 } from 'components/Heading'; diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js index 169fee14..1a9529a8 100644 --- a/src/components/modals/pin/Pin/components/Button/index.js +++ b/src/components/modals/pin/Pin/components/Button/index.js @@ -1,8 +1,15 @@ -import React from 'react'; +/* @flow */ + +import * as React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import colors from 'config/colors'; +type Props = { + onClick: () => void; + children: React.Node; +}; + const Wrapper = styled.button` width: 80px; height: 80px; @@ -32,19 +39,13 @@ const Wrapper = styled.button` } `; -const PinButton = ({ - children, className, onClick, -}) => ( - - {children} +const PinButton = ({ children, onClick }: Props) => ( + + { children } ); PinButton.propTypes = { - className: PropTypes.string, children: PropTypes.string.isRequired, onClick: PropTypes.func, }; diff --git a/src/components/modals/pin/Pin/components/Input/index.js b/src/components/modals/pin/Pin/components/Input/index.js index db078871..029be6f7 100644 --- a/src/components/modals/pin/Pin/components/Input/index.js +++ b/src/components/modals/pin/Pin/components/Input/index.js @@ -1,3 +1,5 @@ +/* @flow */ + import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -6,6 +8,11 @@ import Icon from 'components/Icon'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import icons from 'config/icons'; +type Props = { + value: string; + onDeleteClick: () => void; +}; + const Wrapper = styled.div` position: relative; `; @@ -28,11 +35,7 @@ const StyledIcon = styled(Icon)` cursor: pointer; `; -const Input = ({ - onChange, - onDeleteClick, - value, -}) => ( +const Input = ({ value, onDeleteClick }: Props) => ( - onDeleteClick()} color={colors.TEXT_PRIMARY} icon={icons.BACK} /> + ); Input.propTypes = { onDeleteClick: PropTypes.func.isRequired, value: PropTypes.string.isRequired, - onChange: PropTypes.func, }; export default Input;