Merge branch 'master' into feature/ripple

package.json

@@ -49,8 +49,8 @@
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
         "rc-tooltip": "^3.7.0",
-        "react": "^16.4.2",
+        "react": "^16.6.3",
-        "react-dom": "^16.2.0",
+        "react-dom": "^16.6.3",
         "react-hot-loader": "^4.3.4",
         "react-json-view": "^1.19.1",
         "react-qr-svg": "^2.1.0",
@@ -67,9 +67,9 @@
         "redux-raven-middleware": "^1.2.0",
         "redux-thunk": "^2.2.0",
         "rimraf": "^2.6.2",
-        "styled-components": "^3.4.9",
+        "styled-components": "^4.1.2",
         "styled-media-query": "^2.0.2",
-        "styled-normalize": "^8.0.0",
+        "styled-normalize": "^8.0.4",
         "trezor-connect": "6.0.3-beta.4",
         "web3": "1.0.0-beta.35",
         "webpack": "^4.16.3",

src/components/Textarea/index.js

@@ -57,6 +57,11 @@ const StyledTextarea = styled(Textarea)`
         opacity: 1;
     }
 
+    &:read-only {
+        background: ${colors.GRAY_LIGHT};
+        color: ${colors.TEXT_SECONDARY};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};
@@ -94,7 +99,7 @@ const StyledTextarea = styled(Textarea)`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -150,11 +155,13 @@ const TextArea = ({
     onFocus,
     onBlur,
     isDisabled,
+    readOnly,
     name,
     onChange,
     topLabel,
     rows,
     maxRows,
+    maxLength,
     autoSelect,
     state = '',
     bottomText = '',
@@ -169,6 +176,7 @@ const TextArea = ({
             autoCorrect="off"
             autoCapitalize="off"
             maxRows={maxRows}
+            maxLength={maxLength}
             rows={rows}
             className={className}
             disabled={isDisabled}
@@ -177,6 +185,7 @@ const TextArea = ({
             onFocus={onFocus}
             onBlur={onBlur}
             value={value}
+            readOnly={readOnly}
             onClick={autoSelect ? event => event.target.select() : null}
             placeholder={placeholder}
             onChange={onChange}
@@ -202,7 +211,9 @@ TextArea.propTypes = {
     customStyle: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.string,
+    readOnly: PropTypes.bool,
     maxRows: PropTypes.number,
+    maxLength: PropTypes.number,
     rows: PropTypes.number,
     name: PropTypes.string,
     isDisabled: PropTypes.bool,

src/components/inputs/Input/index.js

@@ -29,7 +29,7 @@ const InputIconWrapper = styled.div`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -62,6 +62,11 @@ const StyledInput = styled.input`
         color: ${colors.TEXT_SECONDARY};
     }
 
+    &:read-only  {
+        background: ${colors.GRAY_LIGHT};
+        color: ${colors.TEXT_SECONDARY};
+    }
+
     ${props => props.trezorAction && css`
         z-index: 10001;
         position: relative; /* bigger than modal container */
@@ -95,7 +100,7 @@ const Overlay = styled.div`
         height: 100%;
         background-image: linear-gradient(to right, 
             rgba(0,0,0, 0) 0%,
-            rgba(255,255,255, 1) 220px
+            rgba(249,249,249, 1) 220px
         );
     `}
 `;
@@ -176,7 +181,7 @@ class Input extends PureComponent {
                             height={this.props.height}
                             trezorAction={this.props.trezorAction}
                             hasIcon={this.getIcon(this.props.state).length > 0}
-                            innerRef={this.props.innerRef}
+                            ref={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
                             type={this.props.type}
                             color={this.getColor(this.props.state)}

src/index.js

@@ -1,13 +1,20 @@
 /* @flow */
 import React from 'react';
 import { render } from 'react-dom';
-import baseStyles from 'support/styles';
+import { Normalize } from 'styled-normalize';
+import BaseStyles from 'support/styles';
 import App from 'views/index';
 
 const root: ?HTMLElement = document.getElementById('trezor-wallet-root');
 if (root) {
-    baseStyles();
+    render(
-    render(<App />, root);
+        <React.Fragment>
+            <Normalize />
+            <BaseStyles />
+            <App />
+        </React.Fragment>,
+        root,
+    );
 }
 
 window.onbeforeunload = () => {

src/support/styles/index.js

@@ -1,13 +1,10 @@
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import colors from 'config/colors';
-import normalize from 'styled-normalize';
 
 import tooltipStyles from './Tooltip';
 import animationStyles from './Animations';
 
-const baseStyles = () => injectGlobal`
+const baseStyles = createGlobalStyle`
-    ${normalize};
-
     html, body {
         width: 100%;
         height: 100%;

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

@@ -19,11 +19,8 @@ type State = {
     footerFixed: boolean,
 }
 
-const AsideWrapper = styled.aside.attrs({
+const AsideWrapper = styled.aside`
-    style: ({ minHeight }) => ({
+    min-height: ${props => props.minHeight}px;
-        minHeight,
-    }),
-})`
     position: relative;
     top: 0px;
     width: 320px;
@@ -33,13 +30,10 @@ const AsideWrapper = styled.aside.attrs({
     border-right: 1px solid ${colors.DIVIDER};
 `;
 
-const StickyContainerWrapper = styled.div.attrs({
+const StickyContainerWrapper = styled.div`
-    style: ({ top, left, paddingBottom }) => ({
+    top: ${props => props.top}px;
-        top,
+    left: ${props => props.left}px;
-        left,
+    padding-bottom: ${props => props.paddingBottom}px;
-        paddingBottom,
-    }),
-})`
     position: fixed;
     border-right: 1px solid ${colors.DIVIDER};
     width: 320px;
@@ -160,7 +154,7 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
             <AsideWrapper
                 footerFixed={this.state.footerFixed}
                 minHeight={this.state.asideMinHeight}
-                innerRef={this.asideRefCallback}
+                ref={this.asideRefCallback}
                 onScroll={this.handleScroll}
                 onTouchStart={this.handleScroll}
                 onTouchMove={this.handleScroll}
@@ -170,11 +164,11 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
                     paddingBottom={this.state.wrapperBottomPadding}
                     top={this.state.wrapperTopOffset}
                     left={this.state.wrapperLeftOffset}
-                    innerRef={this.wrapperRefCallback}
+                    ref={this.wrapperRefCallback}
                 >
                     {React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style
                         return child.key === 'sticky-footer' ? React.cloneElement(child, {
-                            innerRef: this.footerRefCallback,
+                            ref: this.footerRefCallback,
                             position: this.state.footerFixed ? 'fixed' : 'relative',
                         }) : child;
                     })}

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

@@ -44,11 +44,8 @@ const TransitionContentWrapper = styled.div`
     vertical-align: top;
 `;
 
-const Footer = styled.div.attrs({
+const Footer = styled.div`
-    style: ({ position }) => ({
+    position: ${props => props.position};
-        position,
-    }),
-})`
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -61,7 +61,7 @@ class TopNavigationAccount extends React.PureComponent<Props> {
 
         const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
         return (
-            <Wrapper className="account-tabs" innerRef={this.wrapperRefCallback}>
+            <Wrapper className="account-tabs" ref={this.wrapperRefCallback}>
                 <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
                 <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
                 <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>

src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js

@@ -22,10 +22,6 @@ type Props = BaseProps & {
 // same variable also in "AccountSend/index.js"
 const SmallScreenWidth = '850px';
 
-const InputRow = styled.div`
-    margin-bottom: 20px;
-`;
-
 const InputLabelWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
-const GasInputRow = styled(InputRow)`
+const GasInputRow = styled.div`
     width: 100%;
     display: flex;
 
@@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
 `;
 
 const GasInput = styled(Input)`
-    min-height: 85px;
+    /* min-height: 85px; */
+    padding-bottom: 28px;
     &:first-child {
         padding-right: 20px;
     }
@@ -63,13 +60,12 @@ const GasInput = styled(Input)`
     @media screen and (max-width: ${SmallScreenWidth}) {
         &:first-child {
             padding-right: 0;
-            margin-bottom: 2px;
         }
     }
 `;
 
 const StyledTextarea = styled(Textarea)`
-    margin-bottom: 20px;
+    padding-bottom: 28px;
     min-height: 80px;
 `;
 
@@ -214,25 +210,27 @@ const AdvancedForm = (props: Props) => {
                     spellCheck="false"
                     topLabel={(
                         <InputLabelWrapper>
-                            Gas price
+                            <Left>
-                            <Tooltip
+                                Gas price
-                                content={(
+                                <Tooltip
-                                    <React.Fragment>
+                                    content={(
-                                        Gas price refers to the amount of ether you are willing to pay for every
+                                        <React.Fragment>
-                                        unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
+                                            Gas price refers to the amount of ether you are willing to pay for every
-                                        makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
+                                            unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
-                                    </React.Fragment>
+                                            makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
-                                )}
+                                        </React.Fragment>
-                                maxWidth={400}
+                                    )}
-                                readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
+                                    maxWidth={400}
-                                placement="top"
+                                    readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
-                            >
+                                    placement="top"
-                                <Icon
+                                >
-                                    icon={ICONS.HELP}
+                                    <Icon
-                                    color={colors.TEXT_SECONDARY}
+                                        icon={ICONS.HELP}
-                                    size={24}
+                                        color={colors.TEXT_SECONDARY}
-                                />
+                                        size={24}
-                            </Tooltip>
+                                    />
+                                </Tooltip>
+                            </Left>
                         </InputLabelWrapper>
                     )}
                     bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@@ -244,21 +242,23 @@ const AdvancedForm = (props: Props) => {
             <StyledTextarea
                 topLabel={(
                     <InputLabelWrapper>
-                        Data
+                        <Left>
-                        <Tooltip
+                            Data
-                            content={(
+                            <Tooltip
-                                <React.Fragment>
+                                content={(
-                                    Data is usually used when you send transactions to contracts.
+                                    <React.Fragment>
-                                </React.Fragment>
+                                        Data is usually used when you send transactions to contracts.
-                            )}
+                                    </React.Fragment>
-                            placement="top"
+                                )}
-                        >
+                                placement="top"
-                            <Icon
+                            >
-                                icon={ICONS.HELP}
+                                <Icon
-                                color={colors.TEXT_SECONDARY}
+                                    icon={ICONS.HELP}
-                                size={24}
+                                    color={colors.TEXT_SECONDARY}
-                            />
+                                    size={24}
-                        </Tooltip>
+                                />
+                            </Tooltip>
+                        </Left>
                     </InputLabelWrapper>
                 )}
                 state={getDataTextareaState(errors.data, warnings.data)}

src/views/Wallet/views/Account/Send/index.js

@@ -25,4 +25,4 @@ export default connect((state: State): BaseProps => ({
         default:
             return null;
     }
-});
+});

src/views/Wallet/views/Account/SignVerify/index.js

@@ -13,13 +13,12 @@ import type { Props } from './Container';
 const Wrapper = styled.div`
     display: flex;
     flex: 1;
-    margin-top: -5px;
     flex-direction: row;
     background: ${colors.WHITE};
 `;
 
 const Row = styled.div`
-    padding: 0 0 25px 0;
+    padding-bottom: 28px;
 `;
 
 const RowButtons = styled(Row)`
@@ -87,7 +86,7 @@ class SignVerify extends Component <Props> {
                                 type="text"
                                 isSmallText
                                 autoSelect
-                                isDisabled
+                                readOnly
                             />
                         </Row>
                         <Row>
@@ -98,7 +97,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <Row>
@@ -109,8 +108,8 @@ class SignVerify extends Component <Props> {
                                 rows={4}
                                 autoSelect
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
-                                isDisabled
+                                readOnly
                             />
                         </Row>
                         <RowButtons>
@@ -147,7 +146,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <Row>
@@ -159,7 +158,7 @@ class SignVerify extends Component <Props> {
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
-                                maxLength="255"
+                                maxLength={255}
                             />
                         </Row>
                         <RowButtons>

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -21,7 +21,7 @@ type State = {
 };
 
 const Wrapper = styled.div`
-    padding: 10px 0 25px 0;
+    padding-bottom: 28px;
     position: relative;
     display: flex;
 

src/views/Wallet/views/Dashboard/index.js

@@ -33,7 +33,7 @@ const Dashboard = () => (
             <H2>Dashboard</H2>
             <Row>
                 <H2>Please select your coin</H2>
-                <P>You will gain access to recieving &amp; sending selected coin</P>
+                <P>You will gain access to receiving &amp; sending selected coin</P>
                 <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
             </Row>
         </Wrapper>