Merge branch 'styled-components-refactor' of github.com:satoshilabs/trezor-wallet into styled-components-refactor

src/components/Footer/index.js

@@ -18,7 +18,7 @@ const Wrapper = styled.div`
     display: flex;
 `;
 
-const LinkWrapper = styled(Link)`
+const StyledLink = styled(Link)`
     margin: 0 6px;
     margin-right: 20px;
 `;
@@ -30,9 +30,9 @@ const Copy = styled.div`
 const Footer = ({ toggle }) => (
     <Wrapper>
         <Copy>&copy; {getYear(new Date())}</Copy>
-        <LinkWrapper href="http://satoshilabs.com" target="_blank" rel="noreferrer noopener" className="satoshi" isGreen>SatoshiLabs</LinkWrapper>
-        <LinkWrapper href="tos.pdf" target="_blank" rel="noreferrer noopener" isGreen>Terms</LinkWrapper>
-        <LinkWrapper onClick={toggle} isGreen>Show Log</LinkWrapper>
+        <StyledLink href="http://satoshilabs.com" target="_blank" rel="noreferrer noopener" className="satoshi" isGreen>SatoshiLabs</StyledLink>
+        <StyledLink href="tos.pdf" target="_blank" rel="noreferrer noopener" isGreen>Terms</StyledLink>
+        <StyledLink onClick={toggle} isGreen>Show Log</StyledLink>
     </Wrapper>
 );
 

src/components/Header/index.js

@@ -1,5 +1,6 @@
 /* @flow */
 import React from 'react';
+import Link from 'components/Link';
 import styled from 'styled-components';
 
 import colors from 'config/colors';
@@ -32,7 +33,7 @@ const LayoutWrapper = styled.div`
     }
 `;
 
-const A = styled.a`
+const A = styled(Link)`
     color: ${colors.WHITE};
     margin-left: 24px;
 

src/components/Input/index.js

@@ -36,7 +36,7 @@ const StyledInput = styled.input`
             box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25);
         }
     `}
-    
+
     ${props => props.isError && css`
         border-color: ${colors.ERROR_PRIMARY};
         &:focus {
@@ -59,6 +59,11 @@ const Wrapper = styled.div`
 
 const InputWrapper = styled.div``;
 
+const InputLabel = styled.span`
+    padding-bottom: 4px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
 const ErrorLabel = styled.span`
     margin-top: 10px;
     font-size: ${FONT_SIZE.SMALLER};
@@ -71,9 +76,24 @@ const StyledIcon = styled(Icon)`
 `;
 
 const Input = ({
-    type, autoComplete, placeholder, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
+    type,
+    autoComplete,
+    placeholder,
+    autoCorrect,
+    autoCapitalize,
+    spellCheck,
+    value,
+    onChange,
+    isSuccess,
+    isWarning,
+    isError,
+    errorText,
+    inputLabel,
 }) => (
     <Wrapper>
+        {inputLabel && (
+            <InputLabel>{inputLabel}</InputLabel>
+        )}
         <InputWrapper>
             <StyledInput
                 type={type}
@@ -128,6 +148,7 @@ Input.propTypes = {
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
     errorText: PropTypes.string,
+    inputLabel: PropTypes.string,
 };
 
 export default Input;

src/components/modals/InvalidPin.js

@@ -1,19 +0,0 @@
-/* @flow */
-
-
-import React from 'react';
-import type { Props } from './index';
-
-const InvalidPin = (props: Props) => {
-    if (!props.modal.opened) return null;
-
-    const { device } = props.modal;
-    return (
-        <div className="pin">
-            <h3>Entered PIN for { device.label } is not correct</h3>
-            <p>Retrying...</p>
-        </div>
-    );
-};
-
-export default InvalidPin;

src/components/modals/PassphraseType.js

@@ -1,20 +0,0 @@
-/* @flow */
-
-
-import React from 'react';
-import type { Props } from './index';
-
-const Confirmation = (props: Props) => {
-    if (!props.modal.opened) return null;
-    const { device } = props.modal;
-
-    return (
-        <div className="confirm-tx">
-            <div className="header">
-                <h3>Complete the action on { device.label } device</h3>
-            </div>
-        </div>
-    );
-};
-
-export default Confirmation;

src/components/modals/index.js

@@ -17,10 +17,11 @@ import * as CONNECT from 'actions/constants/TrezorConnect';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
 
-import Pin from 'components/modals/Pin';
-import InvalidPin from 'components/modals/InvalidPin';
-import Passphrase from 'components/modals/Passphrase';
-import PassphraseType from 'components/modals/PassphraseType';
+import Pin from 'components/modals/pin/Pin';
+import InvalidPin from 'components/modals/pin/Invalid';
+
+import Passphrase from 'components/modals/passphrase/Passphrase';
+import PassphraseType from 'components/modals/passphrase/Type';
 
 import ConfirmSignTx from 'components/modals/confirm/SignTx';
 import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
@@ -52,7 +53,6 @@ export type Props = StateProps & DispatchProps;
 
 const duration = 300;
 
-
 const Fade = ({ children, ...props }) => (
     <CSSTransition
         {...props}

src/components/modals/passphrase/Passphrase/index.js

@@ -1,6 +1,4 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
 import raf from 'raf';
 

src/components/modals/passphrase/Type/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import colors from 'config/colors';
+import icons from 'config/icons';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const Header = styled.div``;
+
+const Confirmation = (props) => {
+    if (!props.modal.opened) return null;
+    const { device } = props.modal;
+
+    return (
+        <Wrapper>
+            <Header>
+                <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
+                <H3>Complete the action on { device.label } device</H3>
+            </Header>
+        </Wrapper>
+    );
+};
+
+export default Confirmation;

src/components/modals/pin/Invalid/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
+
+import type { Props } from './index';
+
+const Wrapper = styled.div`
+    padding: 24px 48px;
+`;
+
+const InvalidPin = (props: Props) => {
+    if (!props.modal.opened) return null;
+
+    const { device } = props.modal;
+    return (
+        <Wrapper>
+            <H3>Entered PIN for { device.label } is not correct</H3>
+            <P isSmaller>Retrying...</P>
+        </Wrapper>
+    );
+};
+
+export default InvalidPin;

src/components/modals/pin/Pin/index.js

@@ -2,13 +2,17 @@
 
 
 import React, { Component } from 'react';
-
+import styled from 'styled-components';
+import colors from 'config/colors';
 import type { Props } from './index';
 
 type State = {
     pin: string;
 }
 
+const Wrapper = styled.div``;
+const InputRow = styled.div``;
+
 export default class Pin extends Component<Props, State> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -111,7 +115,7 @@ export default class Pin extends Component<Props, State> {
         const { pin } = this.state;
 
         return (
-            <div className="pin">
+            <Wrapper className="pin">
                 {/* <button className="close-modal transparent"></button> */}
                 <h3>Enter { device.label } PIN</h3>
                 <p>The PIN layout is displayed on your TREZOR.</p>
@@ -139,7 +143,7 @@ export default class Pin extends Component<Props, State> {
 
                 <div><button className="submit" type="button" onClick={event => onPinSubmit(pin)}>Enter PIN</button></div>
                 <p>Not sure how PIN works? <a className="green" href="http://doc.satoshilabs.com/trezor-user/enteringyourpin.html" target="_blank" rel="noreferrer noopener">Learn more</a></p>
-            </div>
+            </Wrapper>
         );
     }
 }

src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js

@@ -87,9 +87,15 @@ class AccountBalance extends Component<Props, State> {
         const selectedCoin = this.props.coin;
         const fiatRate: any = this.props.fiat.find(f => f.network === selectedCoin.network);
 
-        const accountBalance = new BigNumber(this.props.balance);
-        const fiatRateValue = new BigNumber(fiatRate.value);
-        const fiat = accountBalance.times(fiatRateValue).toFixed(2);
+        let accountBalance = '';
+        let fiatRateValue = '';
+        let fiat = '';
+        if (fiatRate) {
+            accountBalance = new BigNumber(this.props.balance);
+            fiatRateValue = new BigNumber(fiatRate.value);
+            fiat = accountBalance.times(fiatRateValue).toFixed(2);
+        }
+
 
         return (
             <Wrapper>