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

.stylelintrc

@@ -8,6 +8,24 @@
     ],
     "rules": {
         "indentation": 4,
-        "block-no-empty": null
+        "declaration-empty-line-before": null,
+        "custom-property-empty-line-before": null,
+        "max-empty-lines": 1,
+        "block-no-empty": null,
+        "property-no-unknown": [
+            true, {
+                "ignoreProperties": ["composes", "font-smoothing", "font-smooth"]
+            }
+        ],
+        "at-rule-empty-line-before": [
+            "always", {
+                "ignoreAtRules": [
+                    "import"
+                ]
+            }
+        ],
+        "at-rule-no-unknown": [ true, {
+            ignoreAtRules: ["each"]
+        }]
     }
 }

jest.config.js

@@ -2,7 +2,6 @@ module.exports = {
     rootDir: './src',
     collectCoverage: true,
     testURL: 'http://localhost',
-
     modulePathIgnorePatterns: [
         'node_modules',
     ],

package.json

@@ -1,12 +1,8 @@
 {
-    "name": "trezor-connect-react-boilerplate",
+    "name": "trezor-wallet",
     "version": "1.0.0",
     "author": "TREZOR <info@trezor.io>",
     "description": "",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/szymonlesisz/trezor-connect-react-boilerplate.git"
-    },
     "bugs": {
         "url": "https://github.com/szymonlesisz/trezor-connect-react-boilerplate/issues"
     },

src/components/DeviceHeader/index.js

@@ -10,7 +10,7 @@ import {
     getStatus,
     getVersion,
 } from 'utils/device';
-import TrezorImage from 'components/TrezorImage';
+import TrezorImage from 'components/images/TrezorImage';
 import colors from 'config/colors';
 
 const Wrapper = styled.div`

src/components/Input/index.js

@@ -29,12 +29,14 @@ const StyledInput = styled.input`
             box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
         }
     `}
+
     ${props => props.isWarning && css`
         border-color: ${colors.WARNING_PRIMARY};
         &:focus {
             box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25);
         }
     `}
+
     ${props => props.isError && css`
         border-color: ${colors.ERROR_PRIMARY};
         &:focus {
@@ -76,6 +78,7 @@ const StyledIcon = styled(Icon)`
 const Input = ({
     type,
     autoComplete,
+    placeholder
     autoCorrect,
     autoCapitalize,
     spellCheck,
@@ -94,6 +97,7 @@ const Input = ({
         <InputWrapper>
             <StyledInput
                 type={type}
+                placeholder={placeholder}
                 autoComplete={autoComplete}
                 autoCorrect={autoCorrect}
                 autoCapitalize={autoCapitalize}
@@ -132,6 +136,7 @@ const Input = ({
 );
 
 Input.propTypes = {
+    placeholder: PropTypes.string,
     type: PropTypes.string,
     autoComplete: PropTypes.string,
     autoCorrect: PropTypes.string,

src/components/Textarea/index.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import colors from 'config/colors';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+
+const Wrapper = styled.div`
+    width: 100%;
+`;
+
+const disabledColor = colors.TEXT_PRIMARY;
+
+const TextArea = styled.textarea`
+    width: 100%;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    min-height: 25px;
+    border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.TEXT_PRIMARY}`)};
+    resize: none;
+    outline: none;
+    background: transparent;
+    font-weight: ${FONT_WEIGHT.BASE};
+    font-size: ${FONT_SIZE.BASE};
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+
+    /* placeholder styles do not work correctly when groupped into one block */
+
+    &::-webkit-input-placeholder {
+        color: ${colors.LIGHT_GRAY_1};
+        opacity: 1;
+    }
+
+    &::-moz-placeholder {
+        color: ${colors.LIGHT_GRAY_1};
+        opacity: 1;
+    }
+
+    &:-moz-placeholder {
+        color: ${colors.LIGHT_GRAY_1};
+        opacity: 1;
+    }
+
+    &:-ms-input-placeholder {
+        color: ${colors.LIGHT_GRAY_1};
+        opacity: 1;
+    }
+
+    &:disabled {
+        border: 1px solid ${disabledColor};
+        cursor: not-allowed;
+
+        &::-webkit-input-placeholder {
+            color: ${disabledColor};
+            opacity: 1;
+        }
+
+        &::-moz-placeholder {
+            color: ${disabledColor};
+            opacity: 1;
+        }
+
+        &:-moz-placeholder {
+            color: ${disabledColor};
+            opacity: 1;
+        }
+
+        &:-ms-input-placeholder {
+            color: ${disabledColor};
+            opacity: 1;
+        }
+    }
+
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+        border: 1px solid ${colors.TEXT_SECONDARY};
+    }
+`;
+
+const Textarea = ({
+    className,
+    placeholder = '',
+    value = '',
+    customStyle = {},
+    onFocus,
+    onBlur,
+    disabled,
+    onChange,
+    isError,
+}) => (
+    <Wrapper>
+        <TextArea
+            className={className}
+            disabled={disabled}
+            style={customStyle}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            value={value}
+            placeholder={placeholder}
+            onChange={e => onChange(e.target.value)}
+            isError={isError}
+        />
+    </Wrapper>
+);
+
+Textarea.propTypes = {
+    className: PropTypes.string,
+    isError: PropTypes.bool,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    customStyle: PropTypes.string,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    disabled: PropTypes.bool,
+};
+
+export default Textarea;

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

@@ -0,0 +1,46 @@
+/* @flow */
+import React, { Component } from 'react';
+
+import { findAccount } from 'reducers/AccountsReducer';
+
+const Wrapper = styled.div`
+    width: 370px;
+    padding: 24px 48px;
+`;
+
+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 ConfirmAddress = (props: Props) => {
+    const {
+        account,
+        network,
+    } = props.selectedAccount;
+    if (!account || !network) return null;
+
+    return (
+        <div className="confirm-address">
+            <div className="header">
+                <h3>Confirm address on TREZOR</h3>
+                <p>Please compare your address on device with address shown bellow.</p>
+            </div>
+            <div className="content">
+                <p>{ account.address }</p>
+                <label>{ network.symbol } account #{ (account.index + 1) }</label>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmAddress;

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

@@ -2,13 +2,17 @@ import React from 'react';
 import colors from 'config/colors';
 import styled from 'styled-components';
 import P from 'components/Paragraph';
+import Icon from 'components/Icon';
+import icons from 'config/icons';
 import { H3 } from 'components/Heading';
 
 const Wrapper = styled.div`
     width: 390px;
+    padding: 12px 10px;
 `;
 
 const Header = styled.div`
+    padding: 24px 48px;
 `;
 
 const Content = styled.div`
@@ -18,6 +22,7 @@ const Content = styled.div`
 `;
 
 const Label = styled.div`
+    padding-top: 5px;
     font-size: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
@@ -30,19 +35,19 @@ const ConfirmSignTx = (props) => {
         amount,
         address,
         currency,
-        total,
         selectedFeeLevel,
     } = props.sendForm;
 
     return (
         <Wrapper>
             <Header>
+                <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
                 <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>Send</Label>
+                <P>{`${amount} ${currency}` }</P>
                 <Label>To</Label>
                 <P>{ address }</P>
                 <Label>Fee</Label>

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

@@ -1,34 +1,43 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
+import { H3 } from 'components/Heading';
+import P from 'components/Paragraph';
+import styled from 'styled-components';
+import Icon from 'components/Icon';
+import colors from 'config/colors';
+import icons from 'config/icons';
+import Button from 'components/buttons/Button';
+import Link from 'components/Link';
 import { findAccount } from 'reducers/AccountsReducer';
 
 import type { Props } from './index';
 
-const ConfirmAddress = (props: Props) => {
-    const {
-        account,
-        network,
-    } = props.selectedAccount;
-    if (!account || !network) return null;
+const StyledLink = styled(Link)`
+    position: absolute;
+    right: 15px;
+    top: 15px;
+`;
 
-    return (
-        <div className="confirm-address">
-            <div className="header">
-                <h3>Confirm address on TREZOR</h3>
-                <p>Please compare your address on device with address shown bellow.</p>
-            </div>
-            <div className="content">
-                <p>{ account.address }</p>
-                <label>{ network.symbol } account #{ (account.index + 1) }</label>
-            </div>
-        </div>
-    );
-};
-export default ConfirmAddress;
+const Wrapper = styled.div`
+    width: 370px;
+    padding: 24px 48px;
+`;
 
-export class ConfirmUnverifiedAddress extends Component<Props> {
+const StyledP = styled(P)`
+    padding: 10px 0px;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 0 0 10px 0;
+`;
+
+class ConfirmUnverifiedAddress extends Component<Props> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
     keyboardHandler(event: KeyboardEvent): void {
@@ -89,13 +98,19 @@ export class ConfirmUnverifiedAddress extends Component<Props> {
         }
 
         return (
-            <div className="confirm-address-unverified">
-                <button className="close-modal transparent" onClick={onCancel} />
-                <h3>{ deviceStatus }</h3>
-                <p>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</p>
-                <button onClick={event => this.verifyAddress()}>Try again</button>
-                <button className="white" onClick={event => this.showUnverifiedAddress()}>Show unverified address</button>
-            </div>
+            <Wrapper>
+                <StyledLink onClick={onCancel}>
+                    <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                </StyledLink>
+                <H3>{ deviceStatus }</H3>
+                <P>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</P>
+                <Row>
+                    <StyledButton onClick={() => this.verifyAddress()}>Try again</StyledButton>
+                    <StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton>
+                </Row>
+            </Wrapper>
         );
     }
 }
+
+export default ConfirmUnverifiedAddress;

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

@@ -1,9 +1,18 @@
 /* @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/buttons/Button';
+import Input from 'components/Input';
 import { getDuplicateInstanceNumber } from 'reducers/utils';
-import type { Props } from './index';
+import { FONT_SIZE } from 'config/variables';
+import Icon from 'components/Icon';
+import icons from 'config/icons';
+import colors from 'config/colors';
+import Link from 'components/Link';
+
+import { Props } from './index';
 
 type State = {
     defaultName: string;
@@ -12,6 +21,47 @@ type State = {
     isUsed: boolean;
 }
 
+const StyledLink = styled(Link)`
+    position: absolute;
+    right: 15px;
+    top: 15px;
+`;
+
+const Wrapper = styled.div`
+    width: 360px;
+    padding: 24px 48px;
+`;
+
+const Column = styled.div`
+    display: flex;
+    padding: 10px 0;
+    flex-direction: column;
+`;
+
+const StyledP = styled(P)`
+    padding: 10px 0px;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 0 0 10px 0;
+`;
+
+const Label = styled.div`
+    display: flex;
+    text-align: left;
+    font-size: ${FONT_SIZE.SMALLER};
+    flex-direction: column;
+    padding-bottom: 5px;
+`;
+
+const ErrorMessage = styled.div`
+    color: ${colors.ERROR_PRIMARY};
+    font-size: ${FONT_SIZE.SMALLER};
+    padding-top: 5px;
+    text-align: center;
+    width: 100%;
+`;
+
 export default class DuplicateDevice extends Component<Props, State> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -83,29 +133,40 @@ export default class DuplicateDevice extends Component<Props, State> {
         } = this.state;
 
         return (
-            <div className="duplicate">
-                <button className="close-modal transparent" onClick={onCancel} />
-                <h3>Clone { device.label }?</h3>
-                <p>This will create new instance of device which can be used with different passphrase</p>
-                <div className="row">
-                    <label>Instance name</label>
-                    <input
+            <Wrapper>
+                <StyledLink onClick={onCancel}>
+                    <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                </StyledLink>
+                <H3>Clone { device.label }?</H3>
+                <StyledP isSmaller>This will create new instance of device which can be used with different passphrase</StyledP>
+                <Column>
+                    <Label>Instance name</Label>
+                    <Input
                         type="text"
                         autoComplete="off"
                         autoCorrect="off"
                         autoCapitalize="off"
                         spellCheck="false"
-                        className={isUsed ? 'not-valid' : null}
                         placeholder={defaultName}
-                        ref={(element) => { this.input = element; }}
+                        innerRef={(element) => { this.input = element; }}
                         onChange={event => this.onNameChange(event.currentTarget.value)}
-                        defaultValue={instanceName}
+                        value={instanceName}
                     />
-                    { isUsed ? <span className="error">Instance name is already in use</span> : null }
-                </div>
-                <button disabled={isUsed} onClick={event => this.submit()}>Create new instance</button>
-                <button className="white" onClick={onCancel}>Cancel</button>
-            </div>
+                    { isUsed && <ErrorMessage>Instance name is already in use</ErrorMessage> }
+                </Column>
+                <Column>
+                    <StyledButton
+                        disabled={isUsed}
+                        onClick={() => this.submit()}
+                    >Create new instance
+                    </StyledButton>
+                    <StyledButton
+                        isWhite
+                        onClick={onCancel}
+                    >Cancel
+                    </StyledButton>
+                </Column>
+            </Wrapper>
         );
     }
 }

src/components/modals/index.js

@@ -5,8 +5,7 @@ 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';
+import { CSSTransition } from 'react-transition-group';
 
 import { UI } from 'trezor-connect';
 
@@ -14,22 +13,21 @@ import { default as ModalActions } from 'actions/ModalActions';
 import { default as ReceiveActions } from 'actions/ReceiveActions';
 
 import * as RECEIVE from 'actions/constants/receive';
-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 ForgetDevice from 'components/modals/ForgetDevice';
-
 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 ConfirmSignTx from 'components/modals/ConfirmSignTx';
-import ConfirmAddress, { ConfirmUnverifiedAddress } from 'components/modals/ConfirmAddress';
-import RememberDevice from 'components/modals/RememberDevice';
-import DuplicateDevice from 'components/modals/DuplicateDevice';
 
+import ConfirmSignTx from 'components/modals/confirm/SignTx';
+import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress';
+
+import ForgetDevice from 'components/modals/device/Forget';
+import RememberDevice from 'components/modals/device/Remember';
+import DuplicateDevice from 'components/modals/device/Duplicate';
 
 type OwnProps = { }
 
@@ -108,7 +106,6 @@ class Modal extends Component<Props> {
             case 'ButtonRequest_SignTx':
                 component = (<ConfirmSignTx {...this.props} />);
                 break;
-            // case "ButtonRequest_Address" :
             case 'ButtonRequest_PassphraseType':
                 component = (<PassphraseType {...this.props} />);
                 break;

src/styles/modal.less

@@ -12,38 +12,6 @@
         font-size: 12px;
     }
 
-    .confirm-tx {
-        width: 390px; // address overflow
-
-        .header {
-            padding: 24px 48px;
-            &:before {
-                .icomoon-T1;
-                font-size: 52px;
-                color: @color_text_secondary;
-            }
-            h3 {
-                margin: 0;
-            }
-        }
-        .content {
-            border-top: 1px solid @color_divider;
-            background: @color_main;
-            padding: 24px 48px;
-
-            label {
-                font-size: 10px;
-                color: @color_text_secondary;
-            }
-
-            p {
-                font-size: 12px;
-                font-weight: 400;
-                color: @color_text_primary;
-            }
-        }
-    }
-
     .confirm-address {
         width: 390px; // address overflow
         
@@ -76,76 +44,6 @@
         }
     }
 
-    .confirm-address-unverified {
-        width: 370px;
-        padding: 24px 48px;
-
-        h3 {
-            word-break: break-all;
-        }
-
-        button:not(.close-modal) {
-            width: 100%;
-            margin-top: 12px;
-        }
-    }
-
-    .duplicate,
-    .remember {
-        width: 360px;
-        padding: 24px 48px;
-
-        h3 {
-            word-break: break-all;
-        }
-
-        p {
-            padding: 14px 0px;
-        }
-
-        .row {
-            position: relative;
-            text-align: left;
-            padding-bottom: 20px;
-
-            label {
-                display: block;
-                padding-bottom: 6px;
-                text-align: left;
-                color: @color_text_secondary;
-            }
-
-            .error {
-                position: absolute;
-                left: 0px;
-                bottom: 0px;
-                font-size: 12px;
-                color: @color_error_primary;
-            }
-        }
-
-        button:not(.close-modal) {
-            width: 100%;
-            margin-top: 12px;
-            span {
-                position: relative;
-            }
-        }
-
-        .loader-circle {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -36px;
-            margin: auto;
-            p {
-                margin: 0;
-                padding: 0;
-                color: @color_white;
-            }
-        }
-    }
-
     .close-modal {
         position: absolute;
         top: 0;
@@ -267,22 +165,4 @@
         margin-top: 24px;
         margin-bottom: 14px;
     }
-}
-
-.fade-enter {
-    opacity: 0.01;
-}
-
-.fade-enter.fade-enter-active {
-    opacity: 1;
-    transition: opacity 1000ms ease-in;
-}
-
-.fade-exit {
-    opacity: 1;
-}
-
-.fade-exit.fade-exit-active {
-    opacity: 0.01;
-    transition: opacity 800ms ease-in;
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
-import CoinLogo from 'components/CoinLogo';
+import CoinLogo from 'components/images/CoinLogo';
 import { FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables';
 import colors from 'config/colors';
 import Row from '../Row';

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

@@ -10,7 +10,7 @@ import ICONS from 'config/icons';
 import colors from 'config/colors';
 import Tooltip from 'rc-tooltip';
 
-import CoinLogo from 'components/CoinLogo';
+import CoinLogo from 'components/images/CoinLogo';
 import * as stateUtils from 'reducers/utils';
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import Link from 'components/Link';