repair modal UI + error case

src/components/SettingsPage/RepairDeviceButton.js

@@ -5,7 +5,7 @@ import { translate } from 'react-i18next'
 import type { T } from 'types/common'
 import firmwareRepair from 'commands/firmwareRepair'
 import Button from 'components/base/Button'
-import { ConfirmModal } from 'components/base/Modal'
+import { RepairModal } from 'components/base/Modal'
 
 type Props = {
   t: T,
@@ -32,7 +32,7 @@ class RepairDeviceButton extends PureComponent<Props, State> {
 
   close = () => {
     if (this.sub) this.sub.unsubscribe()
-    this.setState({ opened: false })
+    this.setState({ opened: false, isLoading: false })
   }
 
   action = () => {
@@ -43,7 +43,7 @@ class RepairDeviceButton extends PureComponent<Props, State> {
         this.setState(patch)
       },
       error: error => {
-        this.setState({ error, opened: false, isLoading: false })
+        this.setState({ error, isLoading: false })
       },
       complete: () => {
         this.setState({ opened: false, isLoading: false })
@@ -54,17 +54,14 @@ class RepairDeviceButton extends PureComponent<Props, State> {
   render() {
     const { t } = this.props
     const { opened, isLoading, error, progress } = this.state
-    // @val basically I think we want to diverge from the traditional ConfirmModal to make our own version
-    // with the progress and the error cases handled.
-    console.log({ error, progress }) // eslint-disable-line no-console
-    // ^ TODO use error to pass in that custom thing
+
     return (
       <Fragment>
         <Button small primary onClick={this.open} event="RepairDeviceButton">
           {t('settings.repairDevice.button')}
         </Button>
 
-        <ConfirmModal
+        <RepairModal
           cancellable
           analyticsName="RepairDevice"
           isOpened={opened}
@@ -73,8 +70,10 @@ class RepairDeviceButton extends PureComponent<Props, State> {
           onConfirm={this.action}
           isLoading={isLoading}
           title={t('settings.repairDevice.title')}
-          subTitle={t('common.areYouSure')}
           desc={t('settings.repairDevice.desc')}
+          confirmText={t('settings.repairDevice.button')}
+          progress={progress}
+          error={error}
         />
       </Fragment>
     )

src/components/base/Modal/RepairModal.js

@@ -0,0 +1,169 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import styled from 'styled-components'
+
+import type { T } from 'types/common'
+
+import { i } from 'helpers/staticPath'
+import TrackPage from 'analytics/TrackPage'
+import Button from 'components/base/Button'
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import ProgressCircle from 'components/ProgressCircle'
+import TranslatedError from 'components/TranslatedError'
+
+import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from './index'
+
+const Bullet = styled.span`
+  font-weight: 600;
+  color: #142533;
+`
+
+const Separator = styled(Box).attrs({
+  color: 'fog',
+})`
+  height: 1px;
+  width: 100%;
+  background-color: currentColor;
+`
+
+const ConnectStep = ({ t, desc }: { t: *, desc?: string }) => (
+  <ModalContent>
+    {desc ? (
+      <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" mb={6}>
+        {desc}
+      </Box>
+    ) : null}
+    <Box mx={7}>
+      <Text ff="Open Sans|Regular" align="center" color="smoke">
+        <Bullet>{'1.'}</Bullet>
+        {t('manager.modal.mcuFirst')}
+      </Text>
+      <img
+        src={i('logos/unplugDevice.png')}
+        style={{ width: '100%', maxWidth: 368, marginTop: 30 }}
+        alt={t('manager.modal.mcuFirst')}
+      />
+    </Box>
+    <Separator my={6} />
+    <Box mx={7}>
+      <Text ff="Open Sans|Regular" align="center" color="smoke">
+        <Bullet>{'2.'}</Bullet>
+        {t('manager.modal.mcuSecond')}
+      </Text>
+      <img
+        src={i('logos/bootloaderMode.png')}
+        style={{ width: '100%', maxWidth: 368, marginTop: 30 }}
+        alt={t('manager.modal.mcuFirst')}
+      />
+    </Box>
+  </ModalContent>
+)
+
+const FlashStep = ({ progress, t }: { progress: number, t: * }) => (
+  <>
+    <Box mx={7} align="center">
+      <ProgressCircle size={64} progress={progress} />
+    </Box>
+    <Box mx={7} mt={4} mb={2}>
+      <Text ff="Museo Sans|Regular" align="center" color="dark" fontSize={6}>
+        {t(`manager.modal.steps.flash`)}
+      </Text>
+    </Box>
+    <Box mx={7} mt={4} mb={7}>
+      <Text ff="Open Sans|Regular" align="center" color="graphite" fontSize={4}>
+        {t('manager.modal.mcuPin')}
+      </Text>
+    </Box>
+  </>
+)
+
+const ErrorStep = ({ error }: { error: Error }) => (
+  <Box mx={7} mt={4} mb={6} align="center">
+    <TranslatedError error={error} />
+  </Box>
+)
+
+type Props = {
+  isOpened: boolean,
+  isDanger: boolean,
+  title: string,
+  subTitle?: string,
+  desc: string,
+  renderIcon?: Function,
+  confirmText?: string,
+  cancelText?: string,
+  onReject: Function,
+  onConfirm: Function,
+  t: T,
+  isLoading?: boolean,
+  analyticsName: string,
+  cancellable?: boolean,
+  progress: number,
+  error?: Error,
+}
+
+class RepairModal extends PureComponent<Props> {
+  render() {
+    const {
+      cancellable,
+      isOpened,
+      title,
+      desc,
+      confirmText,
+      isDanger,
+      onReject,
+      onConfirm,
+      isLoading,
+      renderIcon,
+      t,
+      analyticsName,
+      progress,
+      error,
+      ...props
+    } = this.props
+
+    const realConfirmText = confirmText || t('common.confirm')
+
+    return (
+      <Modal
+        isOpened={isOpened}
+        preventBackdropClick={isLoading}
+        {...props}
+        render={({ onClose }) => (
+          <ModalBody onClose={!cancellable && isLoading ? undefined : onClose}>
+            <TrackPage category="Modal" name={analyticsName} />
+            <ModalTitle>{title}</ModalTitle>
+            {isLoading && progress > 0 ? (
+              <FlashStep t={t} progress={progress} />
+            ) : error ? (
+              <ErrorStep error={error} />
+            ) : (
+              <ConnectStep t={t} desc={desc} />
+            )}
+            <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+              {!isLoading && (
+                <Button onClick={onReject}>{t(`common.${error ? 'close' : 'cancel'}`)}</Button>
+              )}
+              {error ? null : (
+                <Button
+                  onClick={onConfirm}
+                  primary={!isDanger}
+                  danger={isDanger}
+                  isLoading={isLoading}
+                  disabled={isLoading}
+                >
+                  {realConfirmText}
+                </Button>
+              )}
+            </ModalFooter>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default translate()(RepairModal)

src/components/base/Modal/index.js

@@ -22,6 +22,7 @@ import GrowScroll from 'components/base/GrowScroll'
 
 export { default as ModalBody } from './ModalBody'
 export { default as ConfirmModal } from './ConfirmModal'
+export { default as RepairModal } from './RepairModal'
 export { default as ModalTitle } from './ModalTitle'
 
 const springConfig = {

static/i18n/en/app.json

@@ -262,7 +262,8 @@
         "osu": "Installing OSU...",
         "flash-mcu": "MCU updating...",
         "flash-bootloader": "Bootloader updating...",
-        "firmware": "Firmware updating..."
+        "firmware": "Firmware updating...",
+        "flash": "Flashing your device..."
       },
       "confirmIdentifier": "Verify the identifier",
       "confirmIdentifierText": "Verify that the identifier on your device is the same as the identifier below. Press the right button and enter your PIN code to confirm",
@@ -296,8 +297,7 @@
       "confirmAddress": {
         "title": "Verification",
         "action": "Verify address on device",
-        "text": "Please verify that the {{currencyName}} address shown on your device matches the one on your computer"
-        ,
+        "text": "Please verify that the {{currencyName}} address shown on your device matches the one on your computer",
         "support": "Contact us"
       },
       "receiveFunds": {
@@ -359,7 +359,7 @@
     "export": {
       "desc": "Import accounts on your Ledger Live Mobile app",
       "button": "Export",
-      "modal":{
+      "modal": {
         "button": "Done",
         "title": "Scan to export to mobile",
         "listTitle": "To import accounts on your Ledger Live Mobile app:",
@@ -643,7 +643,7 @@
       "step2": {
         "title": "Did you save your recovery phrase by yourself?"
       },
-      "step3":{
+      "step3": {
         "title": "Is your Ledger device genuine?"
       },
       "isGenuinePassed": "Your device is genuine",
@@ -666,7 +666,7 @@
     },
     "setPassword": {
       "title": "Password lock (optional)",
-        "desc": "Set a password to prevent unauthorized access to Ledger Live data on your computer, including account names, transactions and public addresses",
+      "desc": "Set a password to prevent unauthorized access to Ledger Live data on your computer, including account names, transactions and public addresses",
       "disclaimer": {
         "note1": "Make sure to remember your password. Do not share it.",
         "note2": "Losing your password requires resetting Ledger Live and re-adding accounts.",
@@ -903,4 +903,4 @@
       "title": "Couldn’t load fee rates, please set manual fees"
     }
   }
-}
+}