Merge branch 'frontend-warning-turning-off-watchonly' into staging-watchonly

Author: shonsirsha

frontends/web/src/locales/en/app.json

@@ -1103,7 +1103,9 @@
       },
       "watchonly": {
         "description": "Let's you see your accounts and portfolio without the BitBox02. The BitBox02 is still needed for signing.",
-        "title": "Watch-only"
+        "title": "Watch-only",
+        "warning": "This will remove all your watch-only accounts. To see them again, you will need to plug in your BitBox02. Do you want to continue?",
+        "warningTitle": "Disable watch-only"
       }
     }
   },

frontends/web/src/routes/settings/components/appearance/watchonlySetting.tsx

@@ -21,11 +21,14 @@ import { SettingsItem } from '../settingsItem/settingsItem';
 import * as backendAPI from '../../../../api/backend';
 import { useLoad } from '../../../../hooks/api';
 import { getConfig } from '../../../../utils/config';
+import { Dialog, DialogButtons } from '../../../../components/dialog/dialog';
+import { Button } from '../../../../components/forms';
 
 export const WatchonlySetting = () => {
   const { t } = useTranslation();
   const [disabled, setDisabled] = useState<boolean>(false);
   const [watchonly, setWatchonly] = useState<boolean>();
+  const [warningDialogOpen, setWarningDialogOpen] = useState(false);
   const config = useLoad(getConfig);
 
   useEffect(() => {
@@ -35,37 +38,63 @@ export const WatchonlySetting = () => {
   }, [config]);
 
   const toggleWatchonly = async () => {
-    // TODO: ask user if they really want to proceed if they disable watch-only.
-    // Disabling watch-only immediately removes all accounts from
-    // the sidebar and manage accounts and cannot be brought back without connecting the keystore.
+    if (!watchonly) {
+      setDisabled(true);
+      const { success } = await backendAPI.setWatchonly(!watchonly);
 
-    setDisabled(true);
-    const { success } = await backendAPI.setWatchonly(!watchonly);
-    if (success) {
-      setWatchonly(!watchonly);
+      if (success) {
+        setWatchonly(!watchonly);
+      }
+      setDisabled(false);
+      return;
     }
+
+    setWarningDialogOpen(true);
+    setDisabled(false);
+  };
+
+
+  const handleCloseDialog = () => {
+    setWarningDialogOpen(false);
+    setDisabled(false);
+  };
+
+  const handleConfirmDisableWatchonly = async () => {
+    setDisabled(true);
+    await backendAPI.setWatchonly(false);
+    setWatchonly(false);
     setDisabled(false);
+    setWarningDialogOpen(false);
   };
 
   return (
-    <SettingsItem
-      settingName={t('newSettings.appearance.watchonly.title')}
-      secondaryText={t('newSettings.appearance.watchonly.description')}
-      extraComponent={
-        <>
-          {
-            watchonly !== undefined ?
-              (
-                <Toggle
-                  checked={watchonly}
-                  disabled={disabled}
-                  onChange={toggleWatchonly}
-                />
-              ) :
-              null
-          }
-        </>
-      }
-    />
+    <>
+      <Dialog title={t('newSettings.appearance.watchonly.warningTitle')} medium onClose={handleCloseDialog} open={warningDialogOpen}>
+        <p>{t('newSettings.appearance.watchonly.warning')}</p>
+        <DialogButtons>
+          <Button primary onClick={handleConfirmDisableWatchonly}>{t('dialog.confirm')}</Button>
+          <Button secondary onClick={handleCloseDialog}>{t('dialog.cancel')}</Button>
+        </DialogButtons>
+      </Dialog>
+      <SettingsItem
+        settingName={t('newSettings.appearance.watchonly.title')}
+        secondaryText={t('newSettings.appearance.watchonly.description')}
+        extraComponent={
+          <>
+            {
+              watchonly !== undefined ?
+                (
+                  <Toggle
+                    checked={watchonly}
+                    disabled={disabled}
+                    onChange={toggleWatchonly}
+                  />
+                ) :
+                null
+            }
+          </>
+        }
+      />
+    </>
   );
 };

frontends/web/src/routes/settings/manage-accounts.tsx

@@ -171,10 +171,6 @@ class ManageAccounts extends Component<Props, State> {
   };
 
   private setWatch = async (accountCode: string, watch: boolean) => {
-    // TODO: ask user if they really want to proceed if they disable watch-only, if its keystore is
-    // not currently loaded. Disabling watch-only in this case immediately removes the account from
-    // the sidebar and manage accounts and cannot be brought back without connecting the keystore.
-
     const result = await backendAPI.accountSetWatch(accountCode, watch);
     if (result.success) {
       await this.fetchAccounts();