Merge branch 'frontend-showmnemonic-checkbox'

BitBoxSwiss · Aug 28, 2024 · be29710 · be29710
2 parents bdf270c + a76b799
commit be29710
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
@@ -146,7 +146,8 @@
       "understand": "I understand that an incorrect recovery password will create a different wallet"
     },
     "showMnemonic": {
-      "description": "You will be presented with your recovery words on your BitBox02, which form a backup of your wallet. Write them down on paper.\n\n<strong>Do not store them digitally or take pictures of it.</strong>\n\n<strong>Do not say the words out loud.</strong>\n\n<strong>This backup is not password-protected.</strong>\n\nAfterwards, you will be asked to confirm each word.",
+      "checkboxLabel": "I have read the information above",
+      "description": "The device will display the recovery words, which form a backup of your wallet. Write them down on paper.\n\n<strong>Do not store them digitally or take pictures of it.</strong>\n\n<strong>Do not say the words out loud.</strong>\n\n<strong>This backup is not password-protected.</strong>\n\nAfterwards, you will be asked to confirm each word.",
       "title": "Show recovery words",
       "warning": "<strong>Never share your recovery words with anyone.</strong> Your recovery words give full access to your wallet. If someone is asking you for your recovery words, it's a scammer, do not share them!"
     },

diff --git a/frontends/web/src/routes/settings/components/device-settings/show-recovery-words-setting.tsx b/frontends/web/src/routes/settings/components/device-settings/show-recovery-words-setting.tsx
@@ -23,7 +23,7 @@ import { MultilineMarkup, SimpleMarkup } from '@/utils/markup';
 import { showMnemonic } from '@/api/bitbox02';
 import { Message } from '@/components/message/message';
 import { Dialog, DialogButtons } from '@/components/dialog/dialog';
-import { Button } from '@/components/forms';
+import { Button, Checkbox } from '@/components/forms';
 
 type TProps = {
   deviceID: string;
@@ -37,14 +37,15 @@ const ShowRecoveryWordsSetting = ({ deviceID }: TProps) => {
   const { t } = useTranslation();
   const [inProgress, setInProgress] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
+  const [checked, setChecked] = useState(false);
 
   const confirmShowWords = async () => {
     setShowDialog(false);
     setInProgress(true);
     await showMnemonic(deviceID);
     setInProgress(false);
-
   };
+
   return (
     <>
       <SettingsItem
@@ -65,8 +66,14 @@ const ShowRecoveryWordsSetting = ({ deviceID }: TProps) => {
             tagName="span"
             withBreaks />
         </p>
+        <Checkbox
+          id="confirmationCheckbox"
+          onChange={() => setChecked(prev => !prev)}
+          checked={checked}
+          label={t('backup.showMnemonic.checkboxLabel')}
+        />
         <DialogButtons>
-          <Button primary onClick={confirmShowWords}>{t('dialog.confirm')}</Button>
+          <Button disabled={!checked} primary onClick={confirmShowWords}>{t('button.next')}</Button>
           <Button secondary onClick={() => setShowDialog(false)}>{t('dialog.cancel')}</Button>
         </DialogButtons>
       </Dialog>