InstallBridge page with data from trezor-connect

src/constants/bridge.js

@@ -1,8 +0,0 @@
-export default [
-    { id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
-    { id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'macOS' },
-    { 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)' },
-    { id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
-    { id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
-];

src/reducers/TrezorConnectReducer.js

@@ -9,12 +9,24 @@ export type SelectedDevice = {
     instance: ?number;
 }
 
+export type LatestBridge = {
+    version: Array<number>;
+    directory: string;
+    packages: Array<{ name: string; url: string; signature?: string; preferred: boolean; }>;
+    changelog: string;
+}
+
 export type State = {
     initialized: boolean;
     error: ?string;
-    transport: ?{
+    transport: {
         type: string;
         version: string;
+        outdated: boolean;
+        bridge: LatestBridge;
+    } | {
+        type: null,
+        bridge: LatestBridge;
     };
     // browserState: {
     //     name: string;
@@ -30,7 +42,15 @@ export type State = {
 const initialState: State = {
     initialized: false,
     error: null,
-    transport: null,
+    transport: {
+        type: null,
+        bridge: {
+            version: [],
+            directory: '',
+            packages: [],
+            changelog: '',
+        },
+    },
     browserState: {},
     acquiringDevice: false,
 };
@@ -63,9 +83,12 @@ export default function connect(state: State = initialState, action: Action): St
         case TRANSPORT.ERROR:
             return {
                 ...state,
-                // error: action.payload, // message is wrapped in "device" field. It's dispatched from TrezorConnect.on(DEVICE_EVENT...) in TrezorConnectService
+                // error: action.payload.error, // message is wrapped in "device" field. It's dispatched from TrezorConnect.on(DEVICE_EVENT...) in TrezorConnectService
                 error: 'Transport is missing',
-                transport: null,
+                transport: {
+                    type: null,
+                    bridge: action.payload.bridge,
+                },
             };
 
         case CONNECT.START_ACQUIRING:

src/views/Landing/components/InstallBridge/index.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import installers from 'constants/bridge';
 import { Select } from 'components/Select';
 import Link from 'components/Link';
 import Button from 'components/Button';
@@ -13,24 +12,28 @@ import P from 'components/Paragraph';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
 
+import type { State as TrezorConnectState } from 'reducers/TrezorConnectReducer';
+
 type InstallTarget = {
-    id: string;
     value: string;
     label: string;
+    signature: ?string;
+    preferred: boolean;
 }
 
+// { id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
 type State = {
-    version: string;
-    target: ?InstallTarget;
-    url: string;
+    currentVersion: string;
+    latestVersion: string;
+    installers: Array<InstallTarget>;
+    target: InstallTarget;
+    uri: string;
 }
 
 // import type { Props } from './index';
 
 type Props = {
-    browserState: {
-        osname: string,
-    };
+    transport: $ElementType<TrezorConnectState, 'transport'>;
 }
 
 const InstallBridgeWrapper = styled.div`
@@ -85,23 +88,23 @@ export default class InstallBridge extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
 
-        const currentTarget: ?InstallTarget = installers.find(i => i.id === props.browserState.osname);
+        const installers = props.transport.bridge.packages.map(p => ({
+            label: p.name,
+            value: p.url,
+            signature: p.signature,
+            preferred: p.preferred,
+        }));
+
+        const currentTarget: ?InstallTarget = installers.find(i => i.preferred === true);
         this.state = {
-            version: '2.0.12',
-            url: 'https://wallet.trezor.io/data/bridge/2.0.12/',
-            target: currentTarget,
+            currentVersion: props.transport.type ? `Your version ${props.transport.version}` : 'Not installed',
+            latestVersion: props.transport.bridge.version.join('.'),
+            installers,
+            target: currentTarget || installers[0],
+            uri: 'https://wallet.trezor.io/data/',
         };
     }
 
-    componentWillUpdate() {
-        if (this.props.browserState.osname && !this.state.target) {
-            const currentTarget: ?InstallTarget = installers.find(i => i.id === this.props.browserState.osname);
-            this.setState({
-                target: currentTarget,
-            });
-        }
-    }
-
     onChange(value: InstallTarget) {
         this.setState({
             target: value,
@@ -112,20 +115,18 @@ export default class InstallBridge extends Component<Props, State> {
         if (!this.state.target) {
             return <Loader text="Loading" size={100} />;
         }
-        const { label } = this.state.target;
-        const url = `${this.state.url}${this.state.target.value}`;
-
+        const url = `${this.state.uri}${this.state.target.value}`;
         return (
             <InstallBridgeWrapper>
-                <TitleHeader>TREZOR Bridge.<BridgeVersion>Version {this.state.version}</BridgeVersion></TitleHeader>
+                <TitleHeader>TREZOR Bridge.<BridgeVersion>{this.state.currentVersion}</BridgeVersion></TitleHeader>
                 <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
                 <DownloadBridgeWrapper>
                     <SelectWrapper
                         isSearchable={false}
                         isClearable={false}
                         value={this.state.target}
-                        onChange={val => this.onChange(val)}
-                        options={installers}
+                        onChange={v => this.onChange(v)}
+                        options={this.state.installers}
                     />
                     <Link href={url}>
                         <DownloadBridgeButton>
@@ -134,7 +135,7 @@ export default class InstallBridge extends Component<Props, State> {
                                 color={colors.WHITE}
                                 size={30}
                             />
-                            Download for {label}
+                            Download latest Bridge {this.state.latestVersion}
                         </DownloadBridgeButton>
                     </Link>
                 </DownloadBridgeWrapper>
@@ -148,6 +149,14 @@ export default class InstallBridge extends Component<Props, State> {
                     >Changelog
                     </Link>
                 </P>
+
+                <P>
+                    No, i dont want to upgrade Bridge now,
+                </P>
+                <P>
+                    Take me <Link href="#/">back to the wallet</Link>
+                </P>
+
             </InstallBridgeWrapper>
         );
     }

src/views/Landing/index.js

@@ -103,7 +103,7 @@ export default (props: Props) => {
                     <Log />
                     <LandingContent>
                         {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
-                        {shouldShowInstallBridge && <InstallBridge browserState={browserState} />}
+                        {shouldShowInstallBridge && <InstallBridge transport={transport} />}
 
                         {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
                             <div>