update live-common and add screen for repair modal

package.json

@@ -41,7 +41,7 @@
     "@ledgerhq/hw-transport": "^4.32.0",
     "@ledgerhq/hw-transport-node-hid": "^4.32.0",
     "@ledgerhq/ledger-core": "2.0.0-rc.14",
-    "@ledgerhq/live-common": "4.8.0-beta.14",
+    "@ledgerhq/live-common": "4.8.0-beta.16",
     "animated": "^0.2.2",
     "async": "^2.6.1",
     "axios": "^0.18.0",

src/components/SettingsPage/RepairDeviceButton.js

@@ -22,6 +22,7 @@ type State = {
   isLoading: boolean,
   error: ?Error,
   progress: number,
+  confirmed: boolean,
 }
 
 class RepairDeviceButton extends PureComponent<Props, State> {
@@ -30,15 +31,18 @@ class RepairDeviceButton extends PureComponent<Props, State> {
     isLoading: false,
     error: null,
     progress: 0,
+    confirmed: false,
   }
 
-  open = () => this.setState({ opened: true })
+  open = () => this.setState({ opened: true, error: null })
+
+  setConfirm = () => this.setState({ confirmed: true })
 
   sub: *
 
   close = () => {
     if (this.sub) this.sub.unsubscribe()
-    this.setState({ opened: false, isLoading: false })
+    this.setState({ opened: false, isLoading: false, error: null, confirmed: false })
   }
 
   action = () => {
@@ -50,10 +54,10 @@ class RepairDeviceButton extends PureComponent<Props, State> {
         this.setState(patch)
       },
       error: error => {
-        this.setState({ error, isLoading: false })
+        this.setState({ error, isLoading: false, confirmed: false })
       },
       complete: () => {
-        this.setState({ opened: false, isLoading: false }, () => {
+        this.setState({ opened: false, isLoading: false, confirmed: false }, () => {
           push('/manager')
         })
       },
@@ -62,7 +66,7 @@ class RepairDeviceButton extends PureComponent<Props, State> {
 
   render() {
     const { t } = this.props
-    const { opened, isLoading, error, progress } = this.state
+    const { opened, isLoading, error, progress, confirmed } = this.state
 
     return (
       <Fragment>
@@ -83,6 +87,8 @@ class RepairDeviceButton extends PureComponent<Props, State> {
           confirmText={t('settings.repairDevice.button')}
           progress={progress}
           error={error}
+          setConfirm={this.setConfirm}
+          confirmed={confirmed}
         />
       </Fragment>
     )

src/components/base/Modal/RepairModal.js

@@ -13,9 +13,16 @@ import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 import ProgressCircle from 'components/ProgressCircle'
 import TranslatedError from 'components/TranslatedError'
+import ExclamationCircleThin from 'icons/ExclamationCircleThin'
 
 import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from './index'
 
+const Container = styled(Box).attrs({
+  alignItems: 'center',
+  fontSize: 4,
+  color: 'dark',
+})``
+
 const Bullet = styled.span`
   font-weight: 600;
   color: #142533;
@@ -29,13 +36,18 @@ const Separator = styled(Box).attrs({
   background-color: currentColor;
 `
 
-const ConnectStep = ({ t, desc }: { t: *, desc?: string }) => (
+const DisclaimerStep = ({ desc }: { desc?: string }) => (
   <ModalContent>
     {desc ? (
-      <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" mb={6}>
+      <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" mb={2}>
         {desc}
       </Box>
     ) : null}
+  </ModalContent>
+)
+
+const ConnectStep = ({ t }: { t: * }) => (
+  <ModalContent>
     <Box mx={7}>
       <Text ff="Open Sans|Regular" align="center" color="smoke">
         <Bullet>{'1.'}</Bullet>
@@ -67,12 +79,10 @@ 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 mx={7} mt={3} mb={2} ff="Museo Sans|Regular" color="dark" textAlign="center">
+      {t(`manager.modal.steps.flash`)}
     </Box>
-    <Box mx={7} mt={4} mb={7}>
+    <Box mx={7} mt={2} mb={2}>
       <Text ff="Open Sans|Regular" align="center" color="graphite" fontSize={4}>
         {t('manager.modal.mcuPin')}
       </Text>
@@ -82,9 +92,31 @@ const FlashStep = ({ progress, t }: { progress: number, t: * }) => (
 
 const ErrorStep = ({ error }: { error: Error }) => (
   <ModalContent>
-    <Box mx={7} mt={4} mb={6} align="center">
-      <TranslatedError error={error} />
-    </Box>
+    <Container>
+      <Box color="alertRed">
+        <ExclamationCircleThin size={44} />
+      </Box>
+      <Box
+        color="dark"
+        mt={4}
+        fontSize={6}
+        ff="Museo Sans|Regular"
+        textAlign="center"
+        style={{ maxWidth: 350 }}
+      >
+        <TranslatedError error={error} field="title" />
+      </Box>
+      <Box
+        color="graphite"
+        mt={4}
+        fontSize={6}
+        ff="Open Sans"
+        textAlign="center"
+        style={{ maxWidth: 350 }}
+      >
+        <TranslatedError error={error} field="description" />
+      </Box>
+    </Container>
   </ModalContent>
 )
 
@@ -105,9 +137,15 @@ type Props = {
   cancellable?: boolean,
   progress: number,
   error?: Error,
+  confirmed: boolean,
+  setConfirm: Function,
+}
+
+type State = {
+  confirmed: boolean,
 }
 
-class RepairModal extends PureComponent<Props> {
+class RepairModal extends PureComponent<Props, State> {
   render() {
     const {
       cancellable,
@@ -124,6 +162,8 @@ class RepairModal extends PureComponent<Props> {
       analyticsName,
       progress,
       error,
+      confirmed,
+      setConfirm,
       ...props
     } = this.props
 
@@ -138,26 +178,29 @@ class RepairModal extends PureComponent<Props> {
           <ModalBody onClose={!cancellable && isLoading ? undefined : onClose}>
             <TrackPage category="Modal" name={analyticsName} />
             <ModalTitle>{title}</ModalTitle>
-            {isLoading ? (
-              <FlashStep t={t} progress={progress} />
-            ) : error ? (
+            {error ? (
               <ErrorStep error={error} />
-            ) : (
+            ) : isLoading ? (
+              <FlashStep t={t} progress={progress} />
+            ) : confirmed ? (
               <ConnectStep t={t} desc={desc} />
+            ) : (
+              <DisclaimerStep 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}
+                  onClick={confirmed ? onConfirm : setConfirm}
                   primary={!isDanger}
                   danger={isDanger}
                   isLoading={isLoading}
                   disabled={isLoading}
                 >
-                  {realConfirmText}
+                  {confirmed ? realConfirmText : t('common.confirm')}
                 </Button>
               )}
             </ModalFooter>

yarn.lock

@@ -1725,10 +1725,10 @@
     bindings "^1.3.0"
     nan "^2.6.2"
 
-"@ledgerhq/live-common@4.8.0-beta.14":
-  version "4.8.0-beta.14"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.8.0-beta.14.tgz#958bf811b2e1846fd3c218c863b1cfc729c2df19"
-  integrity sha512-gA2fvLbEfbXJ8IFm73Z236J3MrH7XQdFE3m12y3qWNYk4Bd1M1DWpIg4kFNPfxYTVaQ/Os0vJ08BOv9tj5lW9A==
+"@ledgerhq/live-common@4.8.0-beta.16":
+  version "4.8.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.8.0-beta.16.tgz#cd9939be8b1cf446d71a990ad92e2de208683778"
+  integrity sha512-BS+M/qRB6cwSPhAQAuHg83TGv0nkp3UDoF7OF3r3GONHQvDqVVxQ44T03YuGMdFkZpk51u8t3DKHuDZe9klP5g==
   dependencies:
     "@aeternity/ledger-app-api" "0.0.4"
     "@ledgerhq/hw-app-btc" "^4.32.0"