frontend: create dialog on remember wallet

Show dialog when enabling remember wallet to better inform users
about what the feature is. The dialog is an element itself called
EnableRememberWalletDialog.

This dialog is (also) controlled by a new config variable called
hideEnableRememberWalletDialog.

Also created DisableRememberWalletDialog component (just a
refactor).

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

@@ -1348,6 +1348,10 @@
         "title": "Language"
       },
       "remebmerWallet": {
+        "enable": {
+          "description": "You can now view the accounts associated with this wallet without inserting your BitBox device. However, the BitBox is still required for making transactions and displaying receive addresses.",
+          "title": "Wallet remembered"
+        },
         "name": "Remember wallet",
         "warning": "This will remove your remembered wallet. To see it again, you will need to plug in the BitBox02 for this wallet. Any coins on this wallet are not affected. Do you want to continue?",
         "warningTitle": "Disable remember wallet"

frontends/web/src/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+import { Dialog, DialogButtons } from '@/components/dialog/dialog';
+import { Button } from '@/components/forms';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+export const DisableRememberWalletDialog = ({ open, onClose, onConfirm }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog title={t('newSettings.appearance.remebmerWallet.warningTitle')} medium onClose={onClose} open={open}>
+      <p>{t('newSettings.appearance.remebmerWallet.warning')}</p>
+      <DialogButtons>
+        <Button primary onClick={onConfirm}>{t('dialog.confirm')}</Button>
+        <Button secondary onClick={onClose}>{t('dialog.cancel')}</Button>
+      </DialogButtons>
+    </Dialog>
+  );
+};

frontends/web/src/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog, DialogButtons } from '@/components/dialog/dialog';
+import { Button, Checkbox } from '@/components/forms';
+import { useLoad } from '@/hooks/api';
+import { getConfig, setConfig } from '@/utils/config';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+}
+export const EnableRememberWalletDialog = ({ open, onClose }: Props) => {
+  const { t } = useTranslation();
+  const config = useLoad(getConfig);
+  const [checked, setChecked] = useState(false);
+  const [shouldNotShowDialog, setShouldNotShowDialog] = useState(false);
+
+  useEffect(() => {
+    if (config && config.frontend) {
+      setShouldNotShowDialog(config.frontend.hideEnableRememberWalletDialog);
+    }
+  }, [config]);
+
+  if (shouldNotShowDialog) {
+    return null;
+  }
+
+  return (
+    <Dialog title={t('newSettings.appearance.remebmerWallet.enable.title')} medium open={open}>
+      <p>{t('newSettings.appearance.remebmerWallet.enable.description')}</p>
+      <Checkbox
+        id="dont_show_enable_remember_wallet"
+        label={t('buy.info.skip')}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+      <DialogButtons>
+        <Button primary onClick={() => {
+          onClose();
+          if (checked) {
+            setConfig({ frontend: { hideEnableRememberWalletDialog: true } });
+            setShouldNotShowDialog(true);
+          }
+        }}>{t('button.ok')}</Button>
+      </DialogButtons>
+    </Dialog>
+  );
+};

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

@@ -21,8 +21,9 @@ import * as backendAPI from '@/api/backend';
 import * as accountAPI from '@/api/account';
 import { useLoad } from '@/hooks/api';
 import { getConfig } from '@/utils/config';
-import { Dialog, DialogButtons } from '@/components/dialog/dialog';
-import { Button, Label } from '@/components/forms';
+import { Label } from '@/components/forms';
+import { EnableRememberWalletDialog } from '@/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog';
+import { DisableRememberWalletDialog } from '@/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog';
 import style from './watchonlySettings.module.css';
 
 type Props = {
@@ -34,6 +35,7 @@ export const WatchonlySetting = ({ keystore }: Props) => {
   const [disabled, setDisabled] = useState<boolean>(false);
   const [watchonly, setWatchonly] = useState<boolean>();
   const [warningDialogOpen, setWarningDialogOpen] = useState(false);
+  const [walletRememberedDialogOpen, setWalletRememberedDialogOpen] = useState(false);
   const config = useLoad(getConfig);
 
   useEffect(() => {
@@ -49,6 +51,7 @@ export const WatchonlySetting = ({ keystore }: Props) => {
 
       if (success) {
         setWatchonly(!watchonly);
+        setWalletRememberedDialogOpen(true);
       }
       setDisabled(false);
       return;
@@ -74,13 +77,15 @@ export const WatchonlySetting = ({ keystore }: Props) => {
 
   return (
     <>
-      <Dialog title={t('newSettings.appearance.remebmerWallet.warningTitle')} medium onClose={handleCloseDialog} open={warningDialogOpen}>
-        <p>{t('newSettings.appearance.remebmerWallet.warning')}</p>
-        <DialogButtons>
-          <Button primary onClick={handleConfirmDisableWatchonly}>{t('dialog.confirm')}</Button>
-          <Button secondary onClick={handleCloseDialog}>{t('dialog.cancel')}</Button>
-        </DialogButtons>
-      </Dialog>
+      <DisableRememberWalletDialog
+        open={warningDialogOpen}
+        onClose={handleCloseDialog}
+        onConfirm={handleConfirmDisableWatchonly}
+      />
+      <EnableRememberWalletDialog
+        open={walletRememberedDialogOpen}
+        onClose={() => setWalletRememberedDialogOpen(false)}
+      />
       { watchonly !== undefined ? (
         <Label className={style.label}>
           <span className={style.labelText}>