Merge pull request #154 from trezor/flowtype/modals

flowtype fixes

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,

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;
 

src/components/modals/confirm/UnverifiedAddress/index.js

@@ -57,9 +57,8 @@ class ConfirmUnverifiedAddress extends Component<Props> {
 
     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);
     }

src/components/modals/device/Duplicate/index.js

@@ -79,12 +79,6 @@ export default class DuplicateDevice extends Component<Props, State> {
         };
     }
 
-    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<Props, State> {
         });
     }
 
+    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<Props, State> {
         }
     }
 
+    keyboardHandler: (event: KeyboardEvent) => void;
+
     submit() {
         if (!this.props.modal.opened) return;
         const extended: Object = { instanceName: this.state.instanceName, instance: this.state.instance };

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<Props> {
     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 {
                 <StyledP isSmaller>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.</StyledP>
                 <Row>
                     <StyledButton onClick={() => this.forget()}>Forget</StyledButton>
-                    <StyledButton isWhite onClick={onCancel}>Don't forget</StyledButton>
+                    <StyledButton isWhite onClick={onCancel}>Don&apos;t forget</StyledButton>
                 </Row>
             </Wrapper>
         );

src/components/modals/device/Remember/index.js

@@ -48,10 +48,6 @@ const StyledLoader = styled(Loader)`
 `;
 
 export default class RememberDevice extends Component<Props, State> {
-    keyboardHandler: (event: KeyboardEvent) => void;
-
-    state: State;
-
     constructor(props: Props) {
         super(props);
 
@@ -60,13 +56,6 @@ export default class RememberDevice extends Component<Props, State> {
         };
     }
 
-    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<Props, State> {
         }
     }
 
+    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);

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';

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,
-}) => (
-    <Wrapper
-        className={className}
-        onClick={onClick}
-    >
-        {children}
+const PinButton = ({ children, onClick }: Props) => (
+    <Wrapper onClick={onClick}>
+        { children }
     </Wrapper>
 );
 
 PinButton.propTypes = {
-    className: PropTypes.string,
     children: PropTypes.string.isRequired,
     onClick: PropTypes.func,
 };

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) => (
     <Wrapper>
         <StyledInput
             disabled
@@ -40,16 +43,14 @@ const Input = ({
             maxLength="9"
             autoComplete="off"
             value={value}
-            onChange={onChange}
         />
-        <StyledIcon onClick={() => onDeleteClick()} color={colors.TEXT_PRIMARY} icon={icons.BACK} />
+        <StyledIcon onClick={onDeleteClick} color={colors.TEXT_PRIMARY} icon={icons.BACK} />
     </Wrapper>
 );
 
 Input.propTypes = {
     onDeleteClick: PropTypes.func.isRequired,
     value: PropTypes.string.isRequired,
-    onChange: PropTypes.func,
 };
 
 export default Input;