More generic UI to handle more cases

src/components/base/Modal/RepairModal.js

@@ -11,6 +11,7 @@ import TrackPage from 'analytics/TrackPage'
 import Button from 'components/base/Button'
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import Select from 'components/base/Select'
 import ProgressCircle from 'components/ProgressCircle'
 import TranslatedError from 'components/TranslatedError'
 import ExclamationCircleThin from 'icons/ExclamationCircleThin'
@@ -129,7 +130,7 @@ type Props = {
   confirmText?: string,
   cancelText?: string,
   onReject: Function,
-  repair: ?string=>*,
+  repair: (?string) => *,
   t: T,
   isLoading?: boolean,
   analyticsName: string,
@@ -138,7 +139,22 @@ type Props = {
   error?: Error,
 }
 
-class RepairModal extends PureComponent<Props> {
+const options = [{ value: 'generic' }, { value: '0_8' }, { value: '0_9' }]
+
+class RepairModal extends PureComponent<Props, *> {
+  state = {
+    selectedOption: options[0],
+  }
+
+  onChange = selectedOption => {
+    this.setState({ selectedOption })
+  }
+
+  renderOption = option => (option && this.props.t(`settings.repairDevice.${option.value}`)) || null
+
+  renderValue = option =>
+    (option && this.props.t(`settings.repairDevice.${option.data.value}`)) || null
+
   render() {
     const {
       cancellable,
@@ -157,6 +173,7 @@ class RepairModal extends PureComponent<Props> {
       error,
       ...props
     } = this.props
+    const { selectedOption } = this.state
 
     return (
       <Modal
@@ -175,37 +192,36 @@ class RepairModal extends PureComponent<Props> {
               <DisclaimerStep desc={desc} />
             )}
 
+            {!isLoading && !error ? (
+              <Box py={2} px={4}>
+                <Select
+                  value={selectedOption}
+                  onChange={this.onChange}
+                  autoFocus
+                  options={options}
+                  renderOption={this.renderOption}
+                  renderValue={this.renderValue}
+                />
+              </Box>
+            ) : null}
+
             {!isLoading ? (
-              <ModalFooter horizontal align="center" justify="space-between" flow={2}>
+              <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
                 {error ? <Button onClick={onReject}>{t(`common.close`)}</Button> : null}
                 {error ? null : (
                   <>
                     <Button
-                      onClick={() => repair()}
-                      primary={!isDanger}
-                      danger={isDanger}
-                      isLoading={isLoading}
-                      disabled={isLoading}
-                    >
-                      {t('settings.repairDevice.generic')}
-                    </Button>
-                    <Button
-                      onClick={() => repair("0.8")}
-                      primary={!isDanger}
-                      danger={isDanger}
-                      isLoading={isLoading}
-                      disabled={isLoading}
-                    >
-                      {t('settings.repairDevice.0_8')}
-                    </Button>
-                    <Button
-                      onClick={() => repair("0.9")}
+                      onClick={() =>
+                        repair(
+                          selectedOption.value === 'generic' ? undefined : selectedOption.value,
+                        )
+                      }
                       primary={!isDanger}
                       danger={isDanger}
                       isLoading={isLoading}
                       disabled={isLoading}
                     >
-                      {t('settings.repairDevice.0_9')}
+                      {t('settings.repairDevice.button')}
                     </Button>
                   </>
                 )}

static/i18n/en/app.json

@@ -453,9 +453,9 @@
       "title": "Repair your Ledger device",
       "desc": "If you encountered some issue while updating your Ledger Nano S and cannot resume the update process, you can try this option to repair your device.",
       "button": "Repair",
-      "generic": "'Bootloader'",
-      "0_8": "'MCU not genuine'",
-      "0_9": "'follow repair instruction'"
+      "generic": "Stuck in 'Bootloader'",
+      "0_8": "Stuck in 'MCU not genuine'",
+      "0_9": "Stuck in 'follow repair instruction'"
     },
     "exportLogs": {
       "title": "Export logs",

yarn.lock

@@ -1725,10 +1725,10 @@
     bindings "^1.3.0"
     nan "^2.6.2"
 
-"@ledgerhq/live-common@4.10.0":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.10.0.tgz#4f34679cebf51cf98123c5b072a948e72ff4f566"
-  integrity sha512-ui/v3IWsNvih6BSnpL+65K+R92QVGR/myza9QGuyvCWChy79b2vWXYYQpydgyogUkUY+oyENvpvAiM+AnPV8fw==
+"@ledgerhq/live-common@4.10.1":
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.10.1.tgz#34aa77b692a0aff268b6ef741c2e9ecc1bfcc9c0"
+  integrity sha512-G5oKHfb0aV+xPOC2+X6xYquvViR+u9iSRTRnC2h82koHnQujbqkI+Lt1hpeEvEwpsaunxqlT/0JV6q/ORNVbtw==
   dependencies:
     "@aeternity/ledger-app-api" "0.0.4"
     "@ledgerhq/hw-app-btc" "^4.32.0"