Merge branch 'frontend-watchonly-individual-watchonly-toggle' into staging-watchonly

Author: shonsirsha

backend/accounts.go

@@ -493,6 +493,7 @@ func copyBool(b *bool) *bool {
 // AccountSetWatch sets the account's persisted watch flag to `watch`. Set to `true` if the account
 // should be loaded even if its keystore is not connected.
 // If `watch` is set to `false`, the account is unloaded and the frontend notified.
+// If `watch` is set to `true`, the account is loaded (if the global watchonly flag is enabled) and the frontend notified.
 func (backend *Backend) AccountSetWatch(filter func(*config.Account) bool, watch *bool) error {
 	err := backend.config.ModifyAccountsConfig(func(accountsConfig *config.AccountsConfig) error {
 		for _, acct := range accountsConfig.Accounts {
@@ -524,10 +525,8 @@ func (backend *Backend) AccountSetWatch(filter func(*config.Account) bool, watch
 		}
 	}
 
-	if watch == nil || !*watch {
-		backend.initAccounts(false)
-		backend.emitAccountsStatusChanged()
-	}
+	backend.initAccounts(false)
+	backend.emitAccountsStatusChanged()
 	return nil
 }
 

frontends/web/src/components/icon/assets/icons/eye-opened-dark.svg

@@ -44,6 +44,7 @@ import closeXDarkSVG from './assets/icons/close-x-dark.svg';
 import externalLink from './assets/icons/external-link.svg';
 import eyeClosedSVG from './assets/icons/eye-closed.svg';
 import eyeOpenedSVG from './assets/icons/eye-opened.svg';
+import eyeOpenedDarkSVG from './assets/icons/eye-opened-dark.svg';
 import globeDarkSVG from './assets/icons/globe-dark.svg';
 import globeLightSVG from './assets/icons/globe-light.svg';
 import guideSVG from './assets/icons/guide.svg';
@@ -154,6 +155,7 @@ export const EditLight = (props: ImgProps) => (<img src={editLightSVG} draggable
 export const ExternalLink = (props: ImgProps) => (<img src={externalLink} draggable={false} {...props} />);
 export const EyeClosed = (props: ImgProps) => (<img src={eyeClosedSVG} draggable={false} {...props} />);
 export const EyeOpened = (props: ImgProps) => (<img src={eyeOpenedSVG} draggable={false} {...props} />);
+export const EyeOpenedDark = (props: ImgProps) => (<img src={eyeOpenedDarkSVG} draggable={false} {...props} />);
 export const GlobeDark = (props: ImgProps) => (<img src={globeDarkSVG} draggable={false} {...props} />);
 export const GlobeLight = (props: ImgProps) => (<img src={globeLightSVG} draggable={false} {...props} />);
 export const GuideActive = (props: ImgProps) => (<img src={guideSVG} draggable={false} {...props} />);

frontends/web/src/components/icon/icon.tsx

@@ -1039,8 +1039,11 @@
   },
   "loading": "loading…",
   "manageAccounts": {
+    "accountHidden": "This account has been hidden from your watch-only accounts. To see it again, please plug in your BitBox02.",
     "editAccount": "Edit",
     "editAccountNameTitle": "Edit account name",
+    "hideAccount": "Hide account",
+    "hideAccountDescription": "Hide your account so next time you open the BitBoxApp, it won't show up in your list of accounts. You can always add it again later.",
     "noAccounts": "no accounts found",
     "settings": {
       "hideTokens": "Hide tokens",

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

@@ -140,3 +140,34 @@
     margin-left: 10px;
     outline: none;
 }
+
+
+.watchOnlyContainer {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--space-half);
+}
+
+.watchOnlyTitle {
+    color: var(--color-secondary);   
+    margin: 0;
+    margin-left: var(--space-quarter);
+}
+
+.watchOnlyNote {
+    font-size: var(--size-small);
+    margin: 0;
+    margin-top: var(--space-half);
+}
+
+.watchOnlyAccountHidden {
+    background-color: var(--color-success);
+    margin-top: var(--space-half);
+    padding: var(--space-half);
+}
+
+.watchOnlyAccountHidden p {
+    color: var(--color-alt);
+    margin: 0;
+}

frontends/web/src/routes/settings/manage-accounts.module.css

@@ -22,6 +22,7 @@ import * as backendAPI from '../../api/backend';
 import { alertUser } from '../../components/alert/Alert';
 import { Button, Input } from '../../components/forms';
 import Logo from '../../components/icon/logo';
+import { EyeOpenedDark } from '../../components/icon';
 import { GuideWrapper, GuidedContent, Header, Main } from '../../components/layout';
 import { Toggle } from '../../components/toggle/toggle';
 import { Dialog, DialogButtons } from '../../components/dialog/dialog';
@@ -34,7 +35,6 @@ import { MobileHeader } from '../settings/components/mobile-header';
 import Guide from './manage-account-guide';
 import style from './manage-accounts.module.css';
 
-
 interface ManageAccountsProps {
   deviceIDs: string[];
   hasAccounts: boolean;
@@ -47,21 +47,20 @@ type TShowTokens = {
 }
 
 interface State {
-  editAccountCode?: string;
-  editAccountNewName: string;
   editErrorMessage?: string;
   accounts: accountAPI.IAccount[];
   showTokens: TShowTokens;
   watchonly?: boolean;
+  currentlyEditedAccount?: accountAPI.IAccount
 }
 
 class ManageAccounts extends Component<Props, State> {
   public readonly state: State = {
-    editAccountNewName: '',
     editErrorMessage: undefined,
     accounts: [],
     showTokens: {},
     watchonly: undefined,
+    currentlyEditedAccount: undefined
   };
 
   private fetchAccounts = () => {
@@ -74,7 +73,7 @@ class ManageAccounts extends Component<Props, State> {
   }
 
   private renderAccounts = (accounts: accountAPI.IAccount[]) => {
-    const { watchonly, showTokens } = this.state;
+    const { showTokens } = this.state;
     const { t } = this.props;
     return accounts.filter(account => !account.isToken).map(account => {
       const active = account.active;
@@ -93,7 +92,8 @@ class ManageAccounts extends Component<Props, State> {
           </div>
           <button
             className={style.editBtn}
-            onClick={() => this.setState({ editAccountCode: account.code, editAccountNewName: account.name })}>
+            onClick={() => this.setState({ currentlyEditedAccount: account })}
+          >
             {t('manageAccounts.editAccount')}
           </button>
           <Toggle
@@ -105,19 +105,6 @@ class ManageAccounts extends Component<Props, State> {
               this.toggleAccount(account.code, !active)
                 .then(() => event.target.disabled = false);
             }} />
-          { watchonly ? (<>
-            Hide account (TODO: move this to the edit dialog):
-            <Toggle
-              checked={!account.watch}
-              className={style.toggle}
-              id={account.code}
-              onChange={async (event) => {
-                event.target.disabled = true;
-                await this.setWatch(account.code, !account.watch);
-                event.target.disabled = false;
-              }} />
-          </>
-          ) : null }
           {active && account.coinCode === 'eth' ? (
             <div className={style.tokenSection}>
               <div className={`${style.tokenContainer} ${tokensVisible ? style.tokenContainerOpen : ''}`}>
@@ -138,6 +125,41 @@ class ManageAccounts extends Component<Props, State> {
     });
   };
 
+  private renderWatchOnlyToggle = () => {
+    const { t } = this.props;
+    const { currentlyEditedAccount } = this.state;
+    if (!currentlyEditedAccount) {
+      return;
+    }
+
+    return (
+      <div className="flex flex-column">
+        <div className={style.watchOnlyContainer}>
+          <div className="flex">
+            <EyeOpenedDark width={18} height={18} />
+            <p className={style.watchOnlyTitle}>{t('manageAccounts.hideAccount')}</p>
+          </div>
+          <Toggle
+            checked={!currentlyEditedAccount.watch}
+            className={style.toggle}
+            id={currentlyEditedAccount.code}
+            onChange={async (event) => {
+              event.target.disabled = true;
+              await this.setWatch(currentlyEditedAccount.code, !currentlyEditedAccount.watch);
+              this.setState({ currentlyEditedAccount: { ...currentlyEditedAccount, watch: !currentlyEditedAccount.watch } });
+              event.target.disabled = false;
+            }}
+          />
+        </div>
+        <p className={style.watchOnlyNote}>{t('manageAccounts.hideAccountDescription')}</p>
+        {
+          !currentlyEditedAccount.watch && <div className={style.watchOnlyAccountHidden}>
+            <p>{t('manageAccounts.accountHidden')}</p>
+          </div>
+        }
+      </div>);
+  };
+
   private toggleAccount = (accountCode: string, active: boolean) => {
     return backendAPI.setAccountActive(accountCode, active).then(({ success, errorMessage }) => {
       if (success) {
@@ -224,9 +246,13 @@ class ManageAccounts extends Component<Props, State> {
 
   private updateAccountName = (event: React.SyntheticEvent) => {
     event.preventDefault();
-    const { editAccountCode, editAccountNewName } = this.state;
+    const { currentlyEditedAccount } = this.state;
 
-    backendAPI.renameAccount(editAccountCode!, editAccountNewName!)
+    if (!currentlyEditedAccount) {
+      return;
+    }
+
+    backendAPI.renameAccount(currentlyEditedAccount.code, currentlyEditedAccount.name)
       .then(result => {
         if (!result.success) {
           if (result.errorCode) {
@@ -238,16 +264,15 @@ class ManageAccounts extends Component<Props, State> {
         }
         this.fetchAccounts();
         this.setState({
-          editAccountCode: undefined,
-          editAccountNewName: '',
           editErrorMessage: undefined,
+          currentlyEditedAccount: undefined,
         });
       });
   };
 
   public render() {
     const { t, deviceIDs, hasAccounts } = this.props;
-    const { accounts, editAccountCode, editAccountNewName, editErrorMessage } = this.state;
+    const { accounts, editErrorMessage, currentlyEditedAccount, watchonly } = this.state;
     const accountsByKeystore = getAccountsByKeystore(accounts);
     return (
       <GuideWrapper>
@@ -264,46 +289,47 @@ class ManageAccounts extends Component<Props, State> {
             <View fullscreen={false}>
               <ViewContent>
                 <WithSettingsTabs deviceIDs={deviceIDs} hideMobileMenu hasAccounts={hasAccounts}>
-                  <>
-                    <Button
-                      className={style.addAccountBtn}
-                      primary
-                      onClick={() => route('/add-account', true)}>
-                      {t('addAccount.title')}
-                    </Button>
-
-                    {
-                      accountsByKeystore.map(keystore => (<React.Fragment key={keystore.keystore.rootFingerprint}>
+                  <Button
+                    className={style.addAccountBtn}
+                    primary
+                    onClick={() => route('/add-account', true)}>
+                    {t('addAccount.title')}
+                  </Button>
+                  {
+                    accountsByKeystore.map(keystore => (
+                      <React.Fragment key={keystore.keystore.rootFingerprint}>
                         <p>{keystore.keystore.name}</p>
                         <div className="box slim divide m-bottom-large">
-                          { this.renderAccounts(keystore.accounts) }
+                          {this.renderAccounts(keystore.accounts)}
                         </div>
-                      </React.Fragment>))
-                    }
-                    { accounts.length === 0 ? t('manageAccounts.noAccounts') : null }
-
+                      </React.Fragment>
+                    ))
+                  }
+                  {currentlyEditedAccount && (
                     <Dialog
-                      open={!!(editAccountCode)}
-                      onClose={() => this.setState({ editAccountCode: undefined, editAccountNewName: '', editErrorMessage: undefined })}
+                      open={!!(currentlyEditedAccount)}
+                      onClose={() => this.setState({ currentlyEditedAccount: undefined })}
                       title={t('manageAccounts.editAccountNameTitle')}>
                       <form onSubmit={this.updateAccountName}>
                         <Message type="error" hidden={!editErrorMessage}>
                           {editErrorMessage}
                         </Message>
                         <Input
-                          onInput={e => this.setState({ editAccountNewName: e.target.value })}
-                          value={editAccountNewName} />
+                          onInput={e => this.setState({ currentlyEditedAccount: { ...currentlyEditedAccount, name: e.target.value } })}
+                          value={currentlyEditedAccount.name}
+                        />
+                        {watchonly && this.renderWatchOnlyToggle()}
                         <DialogButtons>
                           <Button
-                            disabled={!editAccountNewName}
+                            disabled={!currentlyEditedAccount.name}
                             primary
                             type="submit">
                             {t('button.update')}
                           </Button>
                         </DialogButtons>
                       </form>
                     </Dialog>
-                  </>
+                  )}
                 </WithSettingsTabs>
               </ViewContent>
             </View>