Merge pull request #502 from valpinkman/manager-firmware-ui

ui for firmware update

src/components/ManagerPage/AppSearchBar.js

@@ -1,6 +1,10 @@
 // @flow
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
+import { color, fontSize, space } from 'styled-system'
+import fontFamily from 'styles/styled/fontFamily'
+
+import { ff } from 'styles/helpers'
 
 import Box from 'components/base/Box'
 import Search from 'components/base/Search'
@@ -40,16 +44,26 @@ const SearchBarWrapper = styled(Box).attrs({
   padding: 0 13px;
 `
 
-const Input = styled.input`
-  width: 100%;
+const Input = styled.input.attrs({
+  ff: 'Open Sans|SemiBold',
+  color: 'dark',
+  mx: 3,
+  fontSize: 4,
+})`
+  ${space};
+  ${fontFamily};
+  ${fontSize};
+  ${color};
+
   border: 0;
-  margin: 0 13px;
   flex: 1;
   outline: none;
   background: transparent;
-  color: black;
-  font-family: 'Open Sans';
-  font-weight: 600;
+
+  &::placeholder {
+    color: ${p => p.theme.colors.fog};
+    ${() => ff('Open Sans|Regular')};
+  }
 `
 
 class AppSearchBar extends PureComponent<Props, State> {
@@ -86,6 +100,7 @@ class AppSearchBar extends PureComponent<Props, State> {
             onChange={this.handleChange}
             onFocus={this.handleFocus(true)}
             onBlur={this.handleFocus(false)}
+            placeholder={'Search app'}
           />
           {!!query && <CrossIcon size={16} cursor="pointer" onClick={this.reset} />}
         </SearchBarWrapper>

src/components/ManagerPage/FirmwareUpdate.js

@@ -1,7 +1,7 @@
 // @flow
 
 import logger from 'logger'
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import isEqual from 'lodash/isEqual'
 import isEmpty from 'lodash/isEmpty'
 
@@ -14,6 +14,9 @@ import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Text from 'components/base/Text'
 
+import NanoS from 'icons/device/NanoS'
+import CheckFull from 'icons/CheckFull'
+
 let CACHED_LATEST_FIRMWARE = null
 
 type FirmwareInfos = {
@@ -36,6 +39,26 @@ type State = {
   latestFirmware: ?FirmwareInfos,
 }
 
+const UpdateButton = ({
+  t,
+  firmware,
+  installFirmware,
+}: {
+  t: T,
+  firmware: ?FirmwareInfos,
+  installFirmware: (firmware: FirmwareInfos) => *,
+}) =>
+  firmware ? (
+    <Fragment>
+      <Text ff="Open Sans|Regular" fontSize={4} style={{ marginLeft: 'auto', marginRight: 15 }}>
+        {t('manager:latestFirmware', { version: firmware.name })}
+      </Text>
+      <Button primary onClick={installFirmware(firmware)}>
+        {t('manager:installFirmware')}
+      </Button>
+    </Fragment>
+  ) : null
+
 class FirmwareUpdate extends PureComponent<Props, State> {
   state = {
     latestFirmware: null,
@@ -89,31 +112,31 @@ class FirmwareUpdate extends PureComponent<Props, State> {
   }
 
   render() {
-    const { t, ...props } = this.props
+    const { t, infos } = this.props
     const { latestFirmware } = this.state
 
-    if (!latestFirmware) {
-      return null
-    }
-
     return (
-      <Box flow={4} {...props}>
-        <Card flow={2} {...props}>
+      <Card px={4} py={25}>
         <Box horizontal align="center" flow={2}>
-            <Text ff="Open Sans|Regular" fontSize={4}>{`${t('manager:latestFirmware')}: ${
-              latestFirmware.name
-            }`}</Text>
-            <Button outline onClick={this.installFirmware(latestFirmware)}>
-              {t('manager:install')}
-            </Button>
+          <Box color="dark">
+            <NanoS size={30} />
+          </Box>
+          <Box>
+            <Box horizontal align="center">
+              <Text ff="Open Sans|SemiBold" fontSize={4} color="dark">
+                Ledger Nano S
+              </Text>
+              <Box color="wallet" style={{ marginLeft: 10 }}>
+                <CheckFull size={13} color="wallet" />
               </Box>
-          <Box
-            fontSize={3}
-            style={{ whiteSpace: 'pre' }}
-            dangerouslySetInnerHTML={{ __html: latestFirmware.notes }}
-          />
-        </Card>
             </Box>
+            <Text ff="Open Sans|SemiBold" fontSize={2}>
+              Firmware {infos.version}
+            </Text>
+          </Box>
+          <UpdateButton t={t} firmware={latestFirmware} installFirmware={this.installFirmware} />
+        </Box>
+      </Card>
     )
   }
 }

src/components/ManagerPage/ManagerApp.js

@@ -65,7 +65,7 @@ function ManagerApp(props: Props) {
         </Text>
       </Box>
       <Button outline onClick={onInstall}>
-        {t('manager:install')}
+        {t('manager:installApps')}
       </Button>
       <Button outline onClick={onUninstall} outlineColor="grey">
         <Trash size={16} fill="grey" />

src/components/ManagerPage/Workflow.js

@@ -148,7 +148,7 @@ class Workflow extends PureComponent<Props, State> {
                         <img
                           src={i('logos/connectDevice.png')}
                           alt="connect your device"
-                          style={{ marginBottom: 30, maxWidth: 360, width: '100%' }}
+                          style={{ marginBottom: 30, maxWidth: 362, width: '100%' }}
                         />
                         <Text
                           ff="Museo Sans|Regular"

src/components/ManagerPage/index.js

@@ -34,22 +34,9 @@ type State = {
 }
 
 class ManagerPage extends PureComponent<Props, State> {
-  render(): Node {
+  renderDashboard = (device: Device, deviceInfo: DeviceInfo) => {
     const { t } = this.props
     return (
-      <Workflow
-        renderError={(dashboardError: ?Error, genuineError: ?Error) => {
-          if (dashboardError) return <span>Dashboard Error: {dashboardError.message}</span>
-          if (genuineError) return <span>Genuine Error: {genuineError.message}</span>
-          return <span>Error</span>
-        }}
-        renderFinalUpdate={(deviceInfo: DeviceInfo) => (
-          <p>UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.final}</p>
-        )}
-        renderMcuUpdate={(deviceInfo: DeviceInfo) => (
-          <p>FLASH MCU (TEMPLATE + ACTION WIP) {deviceInfo.mcu}</p>
-        )}
-        renderDashboard={(device: Device, deviceInfo: DeviceInfo) => (
       <Box flow={4}>
         <Box>
           <Text ff="Museo Sans|Regular" fontSize={7} color="black">
@@ -73,7 +60,24 @@ class ManagerPage extends PureComponent<Props, State> {
           <AppsList device={device} targetId={deviceInfo.targetId} />
         </Box>
       </Box>
+    )
+  }
+
+  render(): Node {
+    return (
+      <Workflow
+        renderError={(dashboardError: ?Error, genuineError: ?Error) => {
+          if (dashboardError) return <span>Dashboard Error: {dashboardError.message}</span>
+          if (genuineError) return <span>Genuine Error: {genuineError.message}</span>
+          return <span>Error</span>
+        }}
+        renderFinalUpdate={(deviceInfo: DeviceInfo) => (
+          <p>UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.final}</p>
+        )}
+        renderMcuUpdate={(deviceInfo: DeviceInfo) => (
+          <p>FLASH MCU (TEMPLATE + ACTION WIP) {deviceInfo.mcu}</p>
         )}
+        renderDashboard={this.renderDashboard}
       />
     )
   }

src/helpers/constants.js

@@ -1,6 +1,7 @@
 // Socket endpoint
 
 export const BASE_SOCKET_URL = 'ws://api.ledgerwallet.com'
+export const BASE_SOCKET_URL_TEMP = 'ws://manager.ledger.fr:3500'
 // If you want to test locally with https://github.com/LedgerHQ/ledger-update-python-api
 // export const BASE_SOCKET_URL = 'ws://localhost:3001/update'
 

src/icons/CheckFull.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M6.5 13a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zm2.146-8.702L5.484 7.46l-1.05-1.05a.402.402 0 0 0-.57 0l-.359.36a.402.402 0 0 0 0 .568L5.2 9.032a.402.402 0 0 0 .57 0l3.806-3.806a.402.402 0 0 0 0-.57l-.36-.358a.402.402 0 0 0-.569 0z"
+  />
+)
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 13 13" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

static/i18n/en/manager.yml

@@ -1,14 +1,15 @@
 tabs:
   apps: Apps
   device: My device
-install: Install
+installApps: Install
+installFirmware: Update firmware
 allApps: Apps
 apps:
   help: To update an app, you have to uninstall the app and re install it.
 title: Manager
 subtitle: Get all your apps here
 firmwareUpdate: Firmware update
-latestFirmware: Firmware
+latestFirmware: A new firmware {{version}} is available
 plugYourDevice:
   title: Plug your device
   desc: Please connect your Ledger device and follow the steps below to access the manager