Merge branch 'release/1.0.3-beta' of github.com:satoshilabs/trezor-wallet into release/1.0.3-beta

package.json

@@ -70,7 +70,7 @@
         "rimraf": "^2.6.2",
         "styled-components": "^4.1.2",
         "styled-normalize": "^8.0.4",
-        "trezor-connect": "6.0.3-beta.10",
+        "trezor-connect": "7.0.0-beta.1",
         "wallet-address-validator": "^0.2.4",
         "web3": "1.0.0-beta.35",
         "webpack": "^4.16.3",

src/components/images/CoinLogo/index.js

@@ -34,7 +34,7 @@ class CoinLogo extends PureComponent {
             <Logo
                 className={className}
                 hasLongIcon={this.hasLongIcon(network)}
-                src={require(`./images/${network}.png`)} // eslint-disable-line
+                src={require(`images/coins/${network}.png`)} // eslint-disable-line
             />
         );
 

src/components/modals/external/Cardano/index.js

@@ -58,7 +58,7 @@ const CardanoWallet = (props: Props) => (
         <P isSmaller>You will be redirected to external wallet</P>
 
         <Link href={coins.find(i => i.id === 'ada').url}>
-            <StyledButton>Go to external wallet</StyledButton>
+            <StyledButton onClick={props.onCancel}>Go to external wallet</StyledButton>
         </Link>
     </Wrapper>
 );

src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js

@@ -3,8 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 
-import { FONT_SIZE } from 'config/variables';
+import { H1 } from 'components/Heading';
-import { H2 } from 'components/Heading';
+import Paragraph from 'components/Paragraph';
 import Button from 'components/Button';
 import Link from 'components/Link';
 import CoinLogo from 'components/images/CoinLogo';
@@ -39,21 +39,17 @@ const StyledCoinLogo = styled(CoinLogo)`
     width: 32px;
 `;
 
-const StyledLink = styled(Link)`
-    padding-top: 24px;
-`;
-
 const Row = styled.div`
-    flex: 1;
     display: flex;
+    padding: 50px 0;
+    
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    text-align: center;
 `;
 
-const Message = styled.div`
+const Message = styled(Paragraph)`
-    font-size: ${FONT_SIZE.SMALL};
+    padding: 0 0 15px 0;
-    color: ${colors.TEXT_SECONDARY};
     text-align: center;
 `;
 
@@ -61,11 +57,11 @@ const FirmwareUnsupported = (props: Props) => (
     <Wrapper>
         <Row>
             {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
-            <H2>{props.title}</H2>
+            <H1>{props.title}</H1>
             <Message>{props.message}</Message>
-            <StyledLink href={getInfoUrl(props.networkShortcut)}>
+            <Link href={getInfoUrl(props.networkShortcut)}>
                 <Button>Find out more info</Button>
-            </StyledLink>
+            </Link>
         </Row>
     </Wrapper>
 );

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

@@ -4,7 +4,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Loader from 'components/Loader';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import { H1 } from 'components/Heading';
+import P from 'components/Paragraph';
 import colors from 'config/colors';
 
 import type { State } from 'flowtype';
@@ -34,15 +36,15 @@ const Loading = styled.div`
     flex-direction: column;
 `;
 
-const Text = styled.div`
+const Title = styled(H1)`
     font-size: ${FONT_SIZE.BIGGER};
-    color: ${colors.TEXT_SECONDARY};
+    font-weight: ${FONT_WEIGHT.NORMAL};
+    color: ${props => (props.type === 'progress' ? colors.TEXT_SECONDARY : '')};
     margin-left: 10px;
 `;
 
-const Message = styled.div`
+const Message = styled(P)`
-    font-size: ${FONT_SIZE.BASE};
+    text-align: center;
-    color: ${colors.TEXT_PRIMARY};
 `;
 
 const Row = styled.div`
@@ -74,7 +76,7 @@ const Content = ({
             <Loading>
                 <Row>
                     {loader.type === 'progress' && <Loader size={30} />}
-                    <Text>{loader.title || 'Initializing accounts'}</Text>
+                    <Title type={loader.type}>{loader.title || 'Initializing accounts'}</Title>
                 </Row>
                 {loader.message && <Message>{loader.message}</Message>}
             </Loading>

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

@@ -1,30 +1,32 @@
 import React from 'react';
 import styled from 'styled-components';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
+import P from 'components/Paragraph';
 import { connect } from 'react-redux';
 
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
+    padding: 40px 35px 40px 35px;
 `;
 
 const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
-const P = styled.p`
+const StyledP = styled(P)`
-    padding: 10px 0px;
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
 const Bootloader = () => (
     <Wrapper>
         <Row>
-            <H2>Your device is in firmware update mode</H2>
+            <H1>Your device is in firmware update mode</H1>
-            <P>Please re-connect it</P>
+            <StyledP>Please re-connect it</StyledP>
         </Row>
     </Wrapper>
 );

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

@@ -3,8 +3,11 @@ import styled from 'styled-components';
 import { connect } from 'react-redux';
 import Content from 'views/Wallet/components/Content';
 
-import { H2 } from 'components/Heading';
+import EthIcon from 'images/coins/eth.png';
-import DashboardImg from 'images/dashboard.png';
+import RippleIcon from 'images/coins/xrp.png';
+
+import { H1 } from 'components/Heading';
+import Paragraph from 'components/Paragraph';
 
 const Wrapper = styled.div`
     display: flex;
@@ -14,25 +17,45 @@ const Wrapper = styled.div`
 const Row = styled.div`
     flex: 1;
     display: flex;
-    padding: 100px 48px;
+    padding: 50px 0;
     
     flex-direction: column;
     align-items: center;
 `;
 
-const P = styled.p`
+const StyledP = styled(Paragraph)`
-    padding: 24px 0px;
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
+const Overlay = styled.div`
+    display: flex;
+    width: 100%;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.2;
+    background: white;
+`;
+
+const Image = styled.img`
+    margin-right: 10px;
+
+    &:last-child {
+        margin-right: 0px;
+    }
+`;
+
 const Dashboard = () => (
     <Content>
         <Wrapper>
-            <H2>Dashboard</H2>
             <Row>
-                <H2>Please select your coin</H2>
+                <H1>Please select your coin</H1>
-                <P>You will gain access to receiving &amp; sending selected coin</P>
+                <StyledP>You will gain access to receiving &amp; sending selected coin</StyledP>
-                <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
+                <Overlay>
+                    <Image src={EthIcon} width={20} />
+                    <Image src={RippleIcon} width={25} />
+                </Overlay>
             </Row>
         </Wrapper>
     </Content>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import Button from 'components/Button';
@@ -20,11 +20,11 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const StyledP = styled(P)`
-    padding: 10px 0 15px 0;
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
@@ -37,8 +37,8 @@ const DeviceSettings = () => (
                     color={colors.WARNING_PRIMARY}
                     icon={ICONS.WARNING}
                 />
-                <H2>Device settings is under construction</H2>
+                <H1>Device settings is under construction</H1>
-                <StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
+                <StyledP>Please use Bitcoin wallet interface to change your device settings</StyledP>
                 <Link href="https://beta-wallet.trezor.io/">
                     <Button>Take me to the Bitcoin wallet</Button>
                 </Link>

src/views/Wallet/views/FirmwareUpdate/index.js

@@ -31,7 +31,7 @@ const Wrapper = styled.section`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 100px 48px;
+    padding: 90px 35px 40px 35px;
 `;
 
 const StyledNavLink = styled(Link)`
@@ -46,6 +46,7 @@ const Image = styled.div`
 
 const StyledP = styled(P)`
     padding: 0 0 15px 0;
+    text-align: center;
 `;
 
 const FirmwareUpdate = (props: Props) => (

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
 import Button from 'components/Button';
 import Paragraph from 'components/Paragraph';
 import React from 'react';
@@ -8,27 +8,27 @@ import { connect } from 'react-redux';
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
+    padding: 40px 35px 40px 35px;
 `;
 
 const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const A = styled.a``;
 
 const StyledParagraph = styled(Paragraph)`
-    margin: 10px 50px;
+    padding: 0 0 15px 0;
-    display: block;
     text-align: center;
 `;
 
 const Initialize = () => (
     <Wrapper>
         <Row>
-            <H2>Your device is in not initialized</H2>
+            <H1>Your device is not initialized</H1>
             <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
             <A href="https://beta-wallet.trezor.io/">
                 <Button>Take me to the Bitcoin wallet</Button>

src/views/Wallet/views/Seedless/index.js

@@ -1,31 +1,32 @@
 import styled from 'styled-components';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
 import Paragraph from 'components/Paragraph';
 import React from 'react';
 import { connect } from 'react-redux';
 
+
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
+    padding: 40px 35px 40px 35px;
 `;
 
 const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const StyledParagraph = styled(Paragraph)`
-    margin: 10px 50px;
+    padding: 0 0 15px 0;
-    display: block;
     text-align: center;
 `;
 
 const Seedless = () => (
     <Wrapper>
         <Row>
-            <H2>Device is in seedless mode</H2>
+            <H1>Device is in seedless mode</H1>
             <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
         </Row>
     </Wrapper>

src/views/Wallet/views/WalletSettings/index.js

@@ -6,7 +6,7 @@ import colors from 'config/colors';
 import icons from 'config/icons';
 
 import Content from 'views/Wallet/components/Content';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
 import Icon from 'components/Icon';
 import Link from 'components/Link';
 import Button from 'components/Button';
@@ -20,7 +20,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const WalletSettings = () => (
@@ -32,7 +32,7 @@ const WalletSettings = () => (
                     color={colors.WARNING_PRIMARY}
                     icon={icons.WARNING}
                 />
-                <H2>Wallet settings is under construction</H2>
+                <H1>Wallet settings is under construction</H1>
                 <Link to="/">
                     <Button>Take me back</Button>
                 </Link>

yarn.lock

@@ -208,7 +208,6 @@
 "@emotion/cache@10.0.0":
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.0.tgz#e22eadcb770de4131ec707c84207e9e1ce210413"
-  integrity sha512-1/sT6GNyvWmxCtJek8ZDV+b+a+NMDx8/61UTnnF3rqrTY7bLTjw+fmXO7WgUIH0owuWKxza/J/FfAWC/RU4G7A==
   dependencies:
     "@emotion/sheet" "0.9.2"
     "@emotion/stylis" "0.8.3"
@@ -218,7 +217,6 @@
 "@emotion/hash@0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
-  integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
 
 "@emotion/is-prop-valid@^0.6.8":
   version "0.6.8"
@@ -229,7 +227,6 @@
 "@emotion/memoize@0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
-  integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
 "@emotion/memoize@^0.6.6":
   version "0.6.6"
@@ -238,7 +235,6 @@
 "@emotion/serialize@^0.11.3":
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.3.tgz#c4af2d96e3ddb9a749b7b567daa7556bcae45af2"
-  integrity sha512-6Q+XH/7kMdHwtylwZvdkOVMydaGZ989axQ56NF7urTR7eiDMLGun//pFUy31ha6QR4C6JB+KJVhZ3AEAJm9Z1g==
   dependencies:
     "@emotion/hash" "0.7.1"
     "@emotion/memoize" "0.7.1"
@@ -249,12 +245,10 @@
 "@emotion/sheet@0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
-  integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
 
 "@emotion/stylis@0.8.3":
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
-  integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
 
 "@emotion/unitless@0.7.3", "@emotion/unitless@^0.7.0":
   version "0.7.3"
@@ -263,12 +257,10 @@
 "@emotion/utils@0.11.1":
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628"
-  integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==
 
 "@emotion/weak-memoize@0.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
-  integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -2708,7 +2700,6 @@ create-ecdh@^4.0.0:
 create-emotion@^10.0.4:
   version "10.0.5"
   resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.5.tgz#22487f19b59a7ed10144f808289eadffebcfab06"
-  integrity sha512-MIOSeFiMtPrAULEtd2GFYGZEzeN2xnCFoiHrjvUYjxruYCJfGqUOBmh4YEN1yU+Ww5yXr+DIZibFl7FEOP57iA==
   dependencies:
     "@emotion/cache" "10.0.0"
     "@emotion/serialize" "^0.11.3"
@@ -2845,7 +2836,6 @@ cssstyle@^1.0.0:
 csstype@^2.5.7:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.0.tgz#6cf7b2fa7fc32aab3d746802c244d4eda71371a2"
-  integrity sha512-by8hi8BlLbowQq0qtkx54d9aN73R9oUW20HISpka5kmgsR9F7nnxgfsemuR2sdCKZh+CDNf5egW9UZMm4mgJRg==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
@@ -8045,7 +8035,6 @@ react-scale-text@^1.2.2:
 react-select@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.2.0.tgz#67c8b5c2dcb8df0384f2a103efe952570f5d6b93"
-  integrity sha512-FOnsm/zrJ2pZvYsEfs58Xvru0SHL1jXAZTCFTWcOxmQSnRKgYuXUDFdpDiET90GLtJEF+t6BaZeD43bUH6/NZQ==
   dependencies:
     classnames "^2.2.5"
     create-emotion "^10.0.4"
@@ -9801,9 +9790,9 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-trezor-connect@6.0.3-beta.10:
+trezor-connect@7.0.0-beta.1:
-  version "6.0.3-beta.10"
+  version "7.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/trezor-connect/-/trezor-connect-6.0.3-beta.10.tgz#a703b06946bb98912cbe719f2bb3393ee41f03b1"
+  resolved "https://registry.yarnpkg.com/trezor-connect/-/trezor-connect-7.0.0-beta.1.tgz#de87d8f1d9878101380f7b3198bf2531d7560a5c"
   dependencies:
     babel-runtime "^6.26.0"
     events "^1.1.1"