Merge branch 'styled-components-refactor' of 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 {
@@ -57,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};
@@ -69,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}
@@ -126,6 +148,7 @@ Input.propTypes = {
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
     errorText: PropTypes.string,
+    inputLabel: PropTypes.string,
 };
 
 export default Input;

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/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/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>

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