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

README.md

@@ -1,5 +1,7 @@
-👛 A webwallet using TREZOR as a private key storage https://wallet.trezor.io/trezor-wallet
+# TREZOR Ethereum Wallet
 
 npm install / yarn
+
 npm run dev / yarn run dev
+
 npm run build / yarn run build

src/components/Loader/index.js

@@ -35,11 +35,15 @@ const CircleWrapper = styled.circle`
     `};
 `;
 
+const StyledParagraph = styled(Paragraph)`
+    color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
+`;
+
 const Loader = ({
-    className, text, size = 100,
+    className, text, isWhiteText = false, size = 100,
 }) => (
     <Wrapper className={className} size={size}>
-        <Paragraph>{text}</Paragraph>
+        <StyledParagraph isWhiteText={isWhiteText}>{text}</StyledParagraph>
         <SvgWrapper viewBox="25 25 50 50">
             <CircleWrapper
                 cx="50"
@@ -65,6 +69,7 @@ const Loader = ({
 );
 
 Loader.propTypes = {
+    isWhiteText: PropTypes.bool,
     className: PropTypes.string,
     text: PropTypes.string,
     size: PropTypes.number,

src/components/Notification/index.js

@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
-import NotificationButton from 'components/NotificationButton';
+import NotificationButton from 'components/buttons/NotificationButton';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';

src/components/buttons/Button/index.js

@@ -29,14 +29,13 @@ const Wrapper = styled.button`
         background: ${colors.GRAY_LIGHT};
     `}
 
-    ${props => props.color === 'white' && css`
+    ${props => props.isWhite && css`
         background: ${colors.WHITE};
         color: ${colors.TEXT_SECONDARY};
         border: 1px solid ${colors.DIVIDER};
 
         &:hover {
             color: ${colors.TEXT_PRIMARY};
-            border-color: ${colors.TEXT_PRIMARY};
             background: ${colors.DIVIDER};
         }
 
@@ -113,14 +112,13 @@ const IconWrapper = styled.span`
 `;
 
 const Button = ({
-    className, text, icon, onClick = () => { }, disabled, color = null, isWhite = false, isWebUsb = false, isTransparent = false,
+    children, className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
 }) => (
     <Wrapper
         className={className}
         icon={icon}
         onClick={onClick}
         disabled={disabled}
-        color={color}
         isWhite={isWhite}
         isWebUsb={isWebUsb}
         isTransparent={isTransparent}
@@ -136,15 +134,15 @@ const Button = ({
                 />
             </IconWrapper>
         )}
-        {text}
+        {children}
     </Wrapper>
 );
 
 Button.propTypes = {
+    children: PropTypes.element.isRequired,
     className: PropTypes.string,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
-    color: PropTypes.string,
     isWhite: PropTypes.bool,
     isWebUsb: PropTypes.bool,
     isTransparent: PropTypes.bool,

src/components/modal/ConfirmSignTx.js

@@ -1,37 +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;
-
-    const {
-        amount,
-        address,
-        currency,
-        total,
-        selectedFeeLevel,
-    } = props.sendForm;
-
-    return (
-        <div className="confirm-tx">
-            <div className="header">
-                <h3>Confirm transaction on { device.label } device</h3>
-                <p>Details are shown on display</p>
-            </div>
-            <div className="content">
-                <label>Send </label>
-                <p>{ `${amount} ${currency}` }</p>
-                <label>To</label>
-                <p>{ address }</p>
-                <label>Fee</label>
-                <p>{ selectedFeeLevel.label }</p>
-            </div>
-        </div>
-    );
-};
-
-export default Confirmation;

src/components/modal/ConfirmSignTx/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import colors from 'config/colors';
+import styled from 'styled-components';
+import P from 'components/Paragraph';
+import { H3 } from 'components/Heading';
+
+const Wrapper = styled.div`
+    width: 390px;
+`;
+
+const Header = styled.div`
+`;
+
+const Content = styled.div`
+    border-top: 1px solid ${colors.DIVIDER};
+    background: ${colors.MAIN};
+    padding: 24px 48px;
+`;
+
+const Label = styled.div`
+    font-size: 10px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const ConfirmSignTx = (props) => {
+    if (!props.modal.opened) return null;
+    const { device } = props.modal;
+
+    const {
+        amount,
+        address,
+        currency,
+        total,
+        selectedFeeLevel,
+    } = props.sendForm;
+
+    return (
+        <Wrapper>
+            <Header>
+                <H3>Confirm transaction on { device.label } device</H3>
+                <P>Details are shown on display</P>
+            </Header>
+            <Content>
+                <Label>Send </Label>
+                <P>{ `${amount} ${currency}` }</P>
+                <Label>To</Label>
+                <P>{ address }</P>
+                <Label>Fee</Label>
+                <P>{ selectedFeeLevel.label }</P>
+            </Content>
+        </Wrapper>
+    );
+};
+
+export default ConfirmSignTx;

src/components/modal/ForgetDevice/index.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
+import Button from 'components/buttons/Button';
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const StyledP = styled(P)`
+    padding: 14px 0px;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 0 0 10px 0;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0;
+`;
+
+class ForgetDevice extends Component {
+    componentDidMount() {
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        window.addEventListener('keydown', this.keyboardHandler, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', this.keyboardHandler, false);
+    }
+
+    keyboardHandler(event) {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            this.forget();
+        }
+    }
+
+    forget() {
+        if (this.props.modal.opened) {
+            this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
+        }
+    }
+
+    render() {
+        if (!this.props.modal.opened) return null;
+        const { device } = this.props.modal;
+        const { onCancel } = this.props.modalActions;
+        return (
+            <Wrapper>
+                <H3>Forget { device.instanceLabel }?</H3>
+                <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>
+                </Row>
+            </Wrapper>
+        );
+    }
+}
+
+export default ForgetDevice;

src/components/modal/RememberDevice/index.js

@@ -1,8 +1,10 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
 import Loader from 'components/Loader';
+import Button from 'components/buttons/Button';
 
 import type { Props } from './index';
 
@@ -11,6 +13,40 @@ type State = {
     ticker?: number;
 }
 
+const ButtonContent = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+`;
+
+const StyledP = styled(P)`
+    padding: 10px 0;
+`;
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const Text = styled.div`
+    padding-right: 10px;
+`;
+
+const Column = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 5px 0;
+`;
+
+const StyledLoader = styled(Loader)`
+    position: absolute;
+    left: 200px;
+`;
+
 export default class RememberDevice extends Component<Props, State> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -86,52 +122,27 @@ export default class RememberDevice extends Component<Props, State> {
             });
         }
         return (
-            <div className="remember">
-                <h3>Forget {label}?</h3>
-                <p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
-                <button onClick={event => this.forget()}><span>Forget <Loader size={28} text={this.state.countdown.toString()} /></span></button>
-                <button className="white" onClick={event => onRememberDevice(device)}>Remember</button>
-            </div>
+            <Wrapper>
+                <H3>Forget {label}?</H3>
+                <StyledP isSmaller>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
+                <Column>
+                    <StyledButton onClick={() => this.forget()}>
+                        <ButtonContent>
+                            <Text>Forget</Text>
+                            <StyledLoader
+                                isWhiteText
+                                size={28}
+                                text={this.state.countdown.toString()}
+                            />
+                        </ButtonContent>
+                    </StyledButton>
+                    <StyledButton
+                        isWhite
+                        onClick={event => onRememberDevice(device)}
+                    >Remember
+                    </StyledButton>
+                </Column>
+            </Wrapper>
         );
     }
-}
-
-export class ForgetDevice extends Component<Props> {
-    keyboardHandler: (event: KeyboardEvent) => void;
-
-    keyboardHandler(event: KeyboardEvent): void {
-        if (event.keyCode === 13) {
-            event.preventDefault();
-            this.forget();
-        }
-    }
-
-    componentDidMount(): void {
-        this.keyboardHandler = this.keyboardHandler.bind(this);
-        window.addEventListener('keydown', this.keyboardHandler, false);
-    }
-
-    componentWillUnmount(): void {
-        window.removeEventListener('keydown', this.keyboardHandler, false);
-    }
-
-    forget() {
-        if (this.props.modal.opened) {
-            this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
-        }
-    }
-
-    render() {
-        if (!this.props.modal.opened) return null;
-        const { device } = this.props.modal;
-        const { onCancel } = this.props.modalActions;
-        return (
-            <div className="remember">
-                <h3>Forget { device.instanceLabel } ?</h3>
-                <p>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.</p>
-                <button onClick={event => this.forget()}>Forget</button>
-                <button className="white" onClick={onCancel}>Don't forget</button>
-            </div>
-        );
-    }
-}
+}

src/components/modal/index.js

@@ -1,10 +1,10 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+import colors from 'config/colors';
 
 import { CSSTransition, Transition } from 'react-transition-group';
 
@@ -18,14 +18,17 @@ import * as MODAL from 'actions/constants/modal';
 import * as CONNECT from 'actions/constants/TrezorConnect';
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from 'flowtype';
-import Pin from './Pin';
-import InvalidPin from './InvalidPin';
-import Passphrase from './Passphrase';
-import PassphraseType from './PassphraseType';
-import ConfirmSignTx from './ConfirmSignTx';
-import ConfirmAddress, { ConfirmUnverifiedAddress } from './ConfirmAddress';
-import RememberDevice, { ForgetDevice } from './RememberDevice';
-import DuplicateDevice from './DuplicateDevice';
+
+import ForgetDevice from 'components/modal/ForgetDevice';
+
+import Pin from 'components/modal/Pin';
+import InvalidPin from 'components/modal/InvalidPin';
+import Passphrase from 'components/modal/Passphrase';
+import PassphraseType from 'components/modal/PassphraseType';
+import ConfirmSignTx from 'components/modal/ConfirmSignTx';
+import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modal/ConfirmAddress';
+import RememberDevice from 'components/modal/RememberDevice';
+import DuplicateDevice from 'components/modal/DuplicateDevice';
 
 
 type OwnProps = { }
@@ -62,6 +65,29 @@ const Fade = ({ children, ...props }) => (
     </CSSTransition>
 );
 
+const ModalContainer = styled.div`
+    position: fixed;
+    z-index: 10000;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: auto;
+    padding: 20px; 
+`;
+
+const ModalWindow = styled.div`
+    margin: auto;
+    position: relative;
+    border-radius: 4px;
+    background-color: ${colors.WHITE};
+    text-align: center;
+`;
+
 class Modal extends Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
@@ -83,8 +109,6 @@ class Modal extends Component<Props> {
                 component = (<ConfirmSignTx {...this.props} />);
                 break;
             // case "ButtonRequest_Address" :
-            //     component = (<ConfirmAddress { ...this.props } />)
-            // break;
             case 'ButtonRequest_PassphraseType':
                 component = (<PassphraseType {...this.props} />);
                 break;
@@ -111,11 +135,11 @@ class Modal extends Component<Props> {
         if (opened) {
             ch = (
                 <Fade key="1">
-                    <div className="modal-container">
-                        <div className="modal-window">
+                    <ModalContainer className="modal-container">
+                        <ModalWindow>
                             { component }
-                        </div>
-                    </div>
+                        </ModalWindow>
+                    </ModalContainer>
                 </Fade>
             );
         }

src/styles/modal.less

@@ -1,27 +1,4 @@
 .modal-container {
-    position: fixed;
-    z-index: 10000;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0.35);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: auto;
-    padding: 20px; 
-
-    .modal-window {
-        margin: auto;
-        // padding: 24px 48px;
-        position: relative;
-        border-radius: 4px;
-        background-color: @color_white;
-        text-align: center;
-        // overflow: hidden;
-    }
-
     h3 {
         color: @color_text_primary;
         font-size: 16px;

src/views/Landing/components/BrowserNotSupported/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import Link from 'components/Link';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
 
@@ -44,9 +44,7 @@ const BrowserNotSupported = () => (
                     target="_blank"
                     rel="noreferrer noopener"
                 >
-                    <Button
-                        text="Get Chrome"
-                    />
+                    <Button>Get Chrome</Button>
                 </Link>
             </Browser>
             <Browser>
@@ -57,9 +55,7 @@ const BrowserNotSupported = () => (
                     target="_blank"
                     rel="noreferrer noopener"
                 >
-                    <Button
-                        text="Get Firefox"
-                    />
+                    <Button>Get Firefox</Button>
                 </Link>
 
             </Browser>

src/views/Landing/components/ConnectDevice/index.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import P from 'components/Paragraph';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import { PULSATE } from 'config/animations';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -91,9 +91,9 @@ class ConnectDevice extends Component<Props> {
                         <P>and</P>
                         <Button
                             className="trezor-webusb-button"
-                            text="Check for devices"
                             isWebUsb
-                        />
+                        >Check for devices
+                        </Button>
                     </React.Fragment>
                 )}
             </Wrapper>

src/views/Landing/components/InstallBridge/index.js

@@ -7,7 +7,7 @@ import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import installers from 'constants/bridge';
 import { Select } from 'components/Select';
 import Link from 'components/Link';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import Loader from 'components/Loader';
 import P from 'components/Paragraph';
 import ICONS from 'config/icons';
@@ -127,8 +127,8 @@ export default class InstallBridge extends Component<Props, State> {
                                 color: colors.WHITE,
                                 size: 30,
                             }}
-                            text={`Download for ${label}`}
-                        />
+                        >Download for {label}
+                        </Button>
                     </Link>
                 </DownloadBridgeWrapper>
                 <P>

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import type { TrezorDevice } from 'flowtype';
 import DeviceHeader from 'components/DeviceHeader';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import { isWebUSB } from 'utils/device';
 import MenuItems from './components/MenuItems';
 import DeviceList from './components/DeviceList';
@@ -116,9 +116,9 @@ class DeviceMenu extends Component<Props> {
                     {isWebUSB(transport) && (
                         <StyledButton
                             className="trezor-webusb-button"
-                            text="Check for devices"
                             isWebUsb
-                        />
+                        >Check for devices
+                        </Button>
                     )}
                 </ButtonWrapper>
             </Wrapper>

src/views/Wallet/views/Bootloader/index.js

@@ -1,17 +1,36 @@
-/* @flow */
-
 import React from 'react';
+import styled from 'styled-components';
 import { H2 } from 'components/Heading';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+`;
+
+const Row = styled.div`
+    flex: 1;
+    display: flex;
+    padding: 0px 48px;
+    
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const P = styled.p`
+    padding: 10px 0px;
+    text-align: center;
+`;
+
 const Bootloader = () => (
-    <section className="device-settings">
-        <div className="row">
+    <Wrapper>
+        <Row>
             <H2>Your device is in firmware update mode</H2>
-            <p>Please re-connect it</p>
-        </div>
-    </section>
+            <P>Please re-connect it</P>
+        </Row>
+    </Wrapper>
 );
 
 export default connect(null, null)(Bootloader);

src/views/Wallet/views/DeviceSettings/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { H2 } from 'components/Heading';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import ICONS from 'config/icons';
 import { connect } from 'react-redux';
 
@@ -40,7 +40,7 @@ const DeviceSettings = () => (
             <StyledH2>Device settings is under construction</StyledH2>
             <P>Please use Bitcoin wallet interface to change your device settings</P>
             <a href="https://wallet.trezor.io/">
-                <Button text="Take me to the Bitcoin wallet" />
+                <Button>Take me to the Bitcoin wallet</Button>
             </a>
         </Row>
     </Section>

src/views/Wallet/views/Initialize/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { H2 } from 'components/Heading';
-import Button from 'components/Button';
+import Button from 'components/buttons/Button';
 import Paragraph from 'components/Paragraph';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -33,7 +33,7 @@ const Initialize = () => (
             <H2>Your device is in not initialized</H2>
             <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
             <A href="https://wallet.trezor.io/">
-                <Button text="Take me to the Bitcoin wallet" />
+                <Button>Take me to the Bitcoin wallet</Button>
             </A>
         </Row>
     </Wrapper>