LandingPage + webusb buttons

package.json

@@ -12,7 +12,7 @@
     },
     "license": "LGPL-3.0+",
     "scripts": {
-        "dev": "babel-node ./webpack/server.js --library",
+        "dev": "babel-node ./webpack/server.js --connect",
         "dev:library": "babel-node ./webpack/server.js --library",
         "dev:connect": "babel-node ./webpack/server.js --connect",
         "build": "rm -rf build && webpack --config ./webpack/webpack.config.prod.babel.js",

src/js/components/landing/ConnectDevice.js

@@ -1,36 +1,57 @@
 /* @flow */
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
-import Header from '../common/Header';
+import TrezorConnect from 'trezor-connect';
-import Footer from '../common/Footer';
 
-export default (props: any): any => {
+export default class InstallBridge extends Component {
-    return (
+
-        <div className="app connect-device">
+    componentDidUpdate() {
-            <Header />
+        if (this.props.transport.indexOf('webusb') >= 0)
+            TrezorConnect.renderWebUSBButton();
+    }
+
+    render() {
+        let webusb = null;
+        let connectClaim = 'Connect TREZOR to continue';
+        let and = null;
+        let bridgeClaim = null;
+        if (this.props.transport.indexOf('webusb') >= 0) {
+            webusb = <button className="trezor-webusb-button">Check for devices</button>;
+            connectClaim = 'Connect TREZOR';
+            and = <p>and</p>;
+            bridgeClaim = <span>Device not recognized? <a href="#/bridge" className="green">Try installing the TREZOR Bridge.</a></span>;
+        }
+
+        return (
             <main>
-                <h2>The private bank in your hands.</h2>
+                <h2 className="claim">The private bank in your hands.</h2>
                 <p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
                 <p>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</p>
                 <div className="row">
                     <p className="connect">
-                        <svg width="20px" height="57px" viewBox="0 0 20 57">
+                        <span>
-                            <g stroke="none" strokeWidth="1" fill="none" transform="translate(1, 1)">
+                            <svg width="12px" height="35px" viewBox="0 0 20 57">
-                                <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5"></rect>
+                                <g stroke="none" strokeWidth="1" fill="none" transform="translate(1, 1)">
-                                <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11"></rect>
+                                    <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5"></rect>
-                                <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z"></path>
+                                    <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11"></rect>
-                                <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625"></rect>
+                                    <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z"></path>
-                            </g>
+                                    <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625"></rect>
-                        </svg>
+                                </g>
-                        <span>Connect TREZOR to continue</span>
+                            </svg>
+                            { connectClaim }
+                        </span>
+                    </p>
+                    { and }
+                    { webusb }
+                </div>
+                <div className="image">
+                    <p>
+                        { bridgeClaim }
+                        <span>Don't have TREZOR? <a href="https://trezor.io/" className="green" target="_blank" rel="noreferrer noopener">Get one</a></span>
                     </p>
-                    {/* <p>Don't have TREZOR? <a href="https://trezor.io/" target="_blank" rel="noreferrer noopener">Get one</a></p> */}
                 </div>
-                <div className="image"></div>
-                <p>Don't have TREZOR? <a href="https://trezor.io/" className="green" target="_blank" rel="noreferrer noopener">Get one</a></p>
             </main>
-            <Footer />
+        );
-        </div>
+    }
-    );
 }

src/js/components/landing/InstallBridge.js

@@ -0,0 +1,64 @@
+/* @flow */
+'use strict';
+
+import React, { Component } from 'react';
+import Select from 'react-select';
+
+type State = {
+    version: string;
+    target: string;
+    url: string;
+}
+
+const installers = [
+    { id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
+    { id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
+    { id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
+    { id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
+    { value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
+    { value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
+];
+
+export default class InstallBridge extends Component {
+
+    state: State;
+
+    constructor(props) {
+        super(props);
+
+        const currentTarget = installers.find(i => i.id === props.browserState.osname);
+        this.state = {
+            version: '2.0.11',
+            target: currentTarget,
+            url: 'https://wallet.trezor.io/data/bridge/2.0.11/'
+        };
+    }
+
+    onChange(value) {
+        this.setState({
+            target: value
+        });
+    }
+
+    render() {
+        const url = `${ this.state.url }${ this.state.target.value }`;
+        return (
+            <main>
+                <h3 className="claim">TREZOR Bridge. <span>Version 2.0.11</span></h3>
+                <p>New communication tool to facilitate the connection between your TREZOR and your internet browser.</p>
+                <div className="row">
+                    <Select
+                        name="installers"
+                        className="installers"
+                        searchable={ false }
+                        clearable= { false }
+                        value={ this.state.target }
+                        onChange={ this.onChange.bind(this) }
+                        options={ installers } />
+                    <a href={ url } className="button">Download for { this.state.target.label }</a>
+                </div>
+                <p>Learn more about latest version in <a href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md" className="green" target="_blank" rel="noreferrer noopener">Changelog</a></p>
+            </main>
+        );
+    }
+}

src/js/components/landing/LandingPage.js

@@ -4,69 +4,73 @@
 import React from 'react';
 import Preloader from './Preloader';
 import ConnectDevice from './ConnectDevice';
+import InstallBridge from './InstallBridge';
 import LocalStorageError from './LocalStorageError';
 import TrezorConnectError from './TrezorConnectError';
 import Header from '../common/Header';
 import Footer from '../common/Footer';
 import Log from '../common/Log';
-import { Notification } from '../common/Notification';
+// import { Notification } from '../common/Notification';
+import Notifications, { Notification } from '../common/Notification';
+
+
+const BrowserNotSupported = (props: any) => {
+    return (
+        <main>
+            <h2>Your browser is not supported</h2>
+            <p>Please choose one of the supported browsers</p>
+            <div className="row">
+                <div className="chrome">
+                    <p>Google Chrome</p>
+                    <a className="button" href="https://www.google.com/chrome/" target="_blank" rel="noreferrer noopener">Get Chrome</a>
+                </div>
+                <div className="firefox">
+                    <p>Mozilla Firefox</p>
+                    <a className="button" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noreferrer noopener">Get Firefox</a>
+                </div>
+            </div>
+        </main>
+    )
+}
 
 export default (props: any): any => {
 
     const web3 = props.web3;
-    const { devices } = props.connect;
+    const { devices, browserState, transport } = props.connect;
     const localStorageError = props.localStorage.error;
     const connectError = props.connect.error;
 
     let notification = null;
+    let body = null;
+    let css: string = 'app landing';
+    const bridgeRoute: boolean = props.router.location.params.hasOwnProperty('bridge');
 
     if (localStorageError) {
         notification = (<Notification 
-            title="Error"
+            title="Initialization error"
-            message="Some files are missing"
+            message="Config files are missing"
-            className="error"
-        />);
-    }
-
-    if (connectError) {
-        notification = (<Notification 
-            title="Error"
-            message={ connectError }
             className="error"
         />);
+        css += ' config-error';
+    } else if (!browserState.supported) {
+        css += ' browser-not-supported'
+        body = <BrowserNotSupported />;
+    } else if (connectError || bridgeRoute) {
+        css += ' install-bridge';
+        body = <InstallBridge browserState={ props.connect.browserState } />;
+    } else {
+        css += ' connect-device';
+        body = <ConnectDevice transport={ transport } />;
     }
 
     if (notification || (web3.length > 0 && devices.length < 1)) {
         return (
-            <div className="app connect-device">
+            <div className={ css }>
                 <Header />
                 { notification }
+                <Notifications />
                 <Log />
-                <main>
+                { body }
-                    <h2 className="claim">The private bank in your hands.</h2>
-                    <p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
-                    <p>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</p>
-                    <div className="row">
-                        <p className="connect">
-                            <span>
-                                <svg width="12px" height="35px" viewBox="0 0 20 57">
-                                    <g stroke="none" strokeWidth="1" fill="none" transform="translate(1, 1)">
-                                        <rect className="connect-usb-pin" fill="#01B757" x="6" y="39" width="6" height="5"></rect>
-                                        <rect className="connect-usb-cable" stroke="#01B757" strokeWidth="1" x="8.5" y="44.5" width="1" height="11"></rect>
-                                        <path stroke="#01B757" d="M8.90856859,33.9811778 L6.43814432,33.9811778 C5.45301486,34.0503113 4.69477081,33.6889084 4.1634122,32.8969691 C3.36637428,31.7090602 -0.000402169348,26.3761977 0.0748097911,23.2982514 C0.124878873,21.2492429 0.0999525141,14.5598149 3.07156595e-05,3.22996744 C-0.000274213164,3.1963928 0.00243636275,3.162859 0.00812115776,3.12976773 C0.28477346,1.51937083 1.22672004,0.617538852 2.8339609,0.424271782 C4.45813658,0.228968338 6.54411954,0.0875444105 9.09190977,0 L9.09190977,0.0169167084 C11.5566027,0.104886477 13.5814718,0.244169993 15.1665175,0.434768145 C16.7530267,0.625542287 17.6912941,1.50671985 17.9813196,3.07830083 C17.9943481,3.14889902 18.0005888,3.22058224 17.9999563,3.29236974 L17.9999901,3.29237004 C17.9004498,14.5907444 17.875676,21.2628703 17.9256686,23.3087478 C18.0008805,26.3866941 14.6341041,31.7195566 13.8370662,32.9074655 C13.3057075,33.6994047 12.5474635,34.0608076 11.562334,33.9916742 L8.90856859,33.9916742 L8.90856859,33.9811778 Z"></path>
-                                        <rect fill="#01B757" x="2" y="7" width="14" height="7" rx="0.5625"></rect>
-                                    </g>
-                                </svg>
-                                Connect TREZOR to continue
-                            </span>
-                        </p>
-                        {/* <button>Add new device</button> */}
-                        {/* <p>Don't have TREZOR? <a href="https://trezor.io/" target="_blank" rel="noreferrer noopener">Get one</a></p> */}
-                    </div>
-                    <div className="image">
-                        <p>Don't have TREZOR? <a href="https://trezor.io/" className="green" target="_blank" rel="noreferrer noopener">Get one</a></p>
-                    </div>
-                </main>
                 <Footer />
             </div>
         );

src/js/router/index.js

@@ -30,6 +30,7 @@ export default (
         <ConnectedRouter history={ history }>
             <Switch>
                 <Route exact path="/" component={ LandingPageContainer } />
+                <Route exact path="/bridge" component={ LandingPageContainer } />
                 <Route exact path="/import" component={ LandingPageContainer } />
                 <Route>
                     <WalletContainer>

src/js/services/RouterService.js

@@ -103,7 +103,7 @@ const RouterService = (store: any) => (next: any) => (action: any) => {
             console.warn("Modal still opened");
         } else if (landingPage) {
             // keep route on landing page
-            if (action.payload.pathname !== '/'){
+            if (action.payload.pathname !== '/' && action.payload.pathname !== '/bridge'){
                 redirectPath = '/';
             }
         } else {

src/js/services/TrezorConnectService.js

@@ -10,6 +10,7 @@ import { init as initWeb3 } from '../actions/Web3Actions';
 import * as WEB3 from '../actions/constants/Web3';
 import * as STORAGE from '../actions/constants/LocalStorage';
 import * as CONNECT from '../actions/constants/TrezorConnect';
+import * as NOTIFICATION from '../actions/constants/notification';
 import * as ACTIONS from '../actions';
 
 
@@ -25,6 +26,16 @@ const TrezorConnectService = (store: any) => (next: any) => (action: any) => {
 
     } else if (action.type === TRANSPORT.ERROR) {
         store.dispatch( push('/') );
+    } else if (action.type === TRANSPORT.UNREADABLE) {
+        store.dispatch({
+            type: NOTIFICATION.ADD,
+            payload: {
+                type: 'error',
+                title: 'Unreadable HID device',
+                message: 'What to do?',
+                cancelable: true,
+            }
+        })
 
     } else if (action.type === WEB3.READY) {
         store.dispatch( TrezorConnectActions.postInit() );

src/styles/fonts.less

@@ -166,3 +166,8 @@
     .icomoon-base();
     content: "\e91f";
 }
+
+.icomoon-download {
+    .icomoon-base();
+    content: "\e91f";
+}

src/styles/inputs.less

@@ -44,7 +44,7 @@ input {
     }
 }
 
-
+a.button,
 button {
     padding: 12px 24px;
     border-radius: 3px;
@@ -218,7 +218,7 @@ a.green:visited {
     &:hover,
     &:active {
         &:after {
-            border-color: @color_white;
+            border-color: transparent;
         }
     }
 }

src/styles/landingPage.less

@@ -1,15 +1,173 @@
 .app {
-    &.connect-device {
+
+    &.landing {
         //min-height: 100vh;
         // overflow: hidden;
         background: @color_landing;
 
+        .notification {
+            min-width: 100%;
+            padding: 24px 0px;
+            .notification-body {
+                max-width: 1170px;
+                margin: 0px auto;
+                padding: 0px 32px 0px 64px;
+                position: relative;
+            }
+            h2:before {
+                top: -7px;
+                left: 24px;
+            }
+        }
+
         main {
             flex-direction: column;
             text-align: center;
             padding-top: 65px;
             margin-top: 0px;
             background: @color_landing;
+        }
+
+        footer {
+            border: 0px;
+            justify-content: center;
+            width: 100%;
+            max-width: 1170px;
+            margin: 0px auto;
+        }
+
+    }
+
+    &.browser-not-supported {
+        main {
+            padding-top: 0px;
+            justify-content: center;
+            width: auto;
+            p {
+                padding: 24px 0px;
+                color: @color_text_secondary;
+            }
+        }
+
+        .row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            div {
+                &:before {
+                    content: '';
+                    width: 43px;
+                    height: 43px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p {
+                    font-size: 12px;
+                    padding: 12px 0px;
+                }
+                a {
+                    display: block;
+                }
+
+                &.chrome {
+                    &:before {
+                        background-image: url('../images/browser-chrome.png');
+                    }
+                }
+                &.firefox {
+                    &:before {
+                        background-image: url('../images/browser-firefox.png');
+                    }
+                }
+            }
+        }
+    }
+
+    &.install-bridge {
+
+        main {
+            padding-top: 0px;
+            justify-content: center;
+            max-width: 500px;
+
+            p {
+                color: @color_text_secondary;
+                font-size: 16px;
+                line-height: 1.6;
+            }
+        }
+
+        .Select {
+            flex: 1;
+            height: 34px;
+            margin-right: 4px;
+
+            .Select-control {
+                height: 34px;
+                border: 1px solid @color_divider;
+                border-radius: 0px 2px 2px 0px;
+                background: @color_white;
+            }
+    
+            .Select-option {
+                .hover();
+                &.is-focused {
+                    background: @color_gray_light;
+                }
+        
+                &.is-selected { 
+                    background: @color_divider;
+                }
+            }
+        }
+
+        .claim {
+            font-size: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 24px;
+            span {
+                color: @color_green_primary;
+                padding: 6px 10px;
+                border: 1px solid @color_green_primary;
+                border-radius: 3px;
+                font-size: 14px;
+                font-weight: 300;
+                margin-left: 24px;
+            }
+        }
+
+        .row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            padding: 24px 0px;
+
+            .button {
+                padding: 0px 24px;
+                height: 34px;
+                line-height: 34px;
+                text-align: left;
+                &:before {
+                    .icomoon-download;
+                    position: relative;
+                    top: 5px;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        .installers {
+            width: 120px;
+            text-align: left;
+        }
+    }
+
+    &.connect-device {
+
+        main {
 
             h2.claim {
                 font-size: 36px;
@@ -19,10 +177,10 @@
             .row {
                 display: flex;
                 flex-direction: row;
-                justify-content: space-around;
+                justify-content: space-between;
                 padding: 36px 0px;
                 margin: 0 auto;
-                width: 720px;
+                width: 420px;
 
                 p {
                     // flex: 1;
@@ -51,10 +209,8 @@
                     font-weight: 500;
 
                     span {
-                        vertical-align: top;
                         position: relative;
                         top: 1px;
-                        left: 12px;
                         animation: pulsate 1.3s ease-out infinite;
                         position: relative;
 
@@ -83,6 +239,10 @@
                     left: 0;
                     right: 0;
                     margin: 0px auto;
+
+                    span {
+                        display: block;
+                    }
                 }
             }
 
@@ -97,19 +257,55 @@
         .connect-usb-cable {
             animation: connect 1.3s ease-out infinite;
         }
-    
+        
-        footer {
+        // a copy of webusb.less from trezor-connect
-            border: 0px;
+        .trezor-webusb-button {
-            justify-content: center;
+            position: relative;
-            width: 100%;
+            padding: 12px 24px 12px 40px;
-            max-width: 1170px;
+            background: transparent;
-            margin: 0px auto;
+            color: @color_green_primary;
-        }
+            border: 1px solid @color_green_primary;
-    
+            .hover();
-        .notification {
+
-            width: 100%;
+            &:before,
-            max-width: 1170px;
+            &:after {
-            margin: 0px auto;
+                content: '';
+                position: absolute;
+                background: @color_green_primary;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                .hover();
+            }
+
+            &:before {
+                width: 12px;
+                height: 2px;
+                left: 18px;
+            }
+
+            &:after {
+                width: 2px;
+                height: 12px;
+                left: 23px;
+            }
+
+            &:hover {
+                background: @color_green_primary;
+                color: @color_white;
+        
+                &:before,
+                &:after {
+                    background: @color_white;
+                }
+            }
+
+            iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+            }
         }
     }
 }

src/styles/notification.less

@@ -25,6 +25,7 @@
         padding: 12px;
         color: inherit;
         transition: opacity 0.3s;
+        z-index: 1;
 
         &:after {
             .icomoon-close;

webpack/webpack.config.connect.js

@@ -1,4 +1,4 @@
-import { TREZOR_CONNECT, TREZOR_IFRAME, TREZOR_POPUP, TREZOR_CONNECT_FILES } from './constants';
+import { TREZOR_CONNECT, TREZOR_IFRAME, TREZOR_POPUP, TREZOR_CONNECT_FILES, TREZOR_CONNECT_HTML } from './constants';
 import path from 'path';
 import webpack from 'webpack';
 import webpackMerge from 'webpack-merge';
@@ -8,7 +8,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 module.exports = webpackMerge(baseConfig, {
     entry: {
         'trezor-connect2': `${TREZOR_CONNECT}.js`,
-        'iframe': `${TREZOR_IFRAME}`,
+        'iframe': ['babel-polyfill', `${TREZOR_IFRAME}`],
         'popup': `${TREZOR_POPUP}`,
     },
     resolve: {
@@ -20,13 +20,13 @@ module.exports = webpackMerge(baseConfig, {
         new HtmlWebpackPlugin({
             chunks: ['iframe'],
             filename: `iframe.html`,
-            template: `${TREZOR_CONNECT_FILES}iframe.html`,
+            template: `${TREZOR_CONNECT_HTML}iframe.html`,
             inject: true
         }),
         new HtmlWebpackPlugin({
             chunks: ['popup'],
             filename: 'popup.html',
-            template: `${TREZOR_CONNECT_FILES}popup.html`,
+            template: `${TREZOR_CONNECT_HTML}popup.html`,
             inject: true
         }),
         new webpack.DefinePlugin({

webpack/webpack.config.dev.js

@@ -88,6 +88,7 @@ module.exports = {
             inject: true
         }),
         new CopyWebpackPlugin([
+            { from: `${TREZOR_CONNECT_FILES}config.json`, to: './data/config.json' },
             { from: `${TREZOR_CONNECT_FILES}coins.json`, to: './data/coins.json' },
             { from: `${TREZOR_CONNECT_FILES}releases-1.json`, to: './data/releases-1.json' },
             { from: `${TREZOR_CONNECT_FILES}latest.txt`, to: './data/latest.txt' },