Merge branch 'frontend-style-remember-account'

Author: thisconnect

backend/handlers/handlers.go

@@ -97,7 +97,8 @@ type Backend interface {
 	SetAccountActive(accountCode accountsTypes.Code, active bool) error
 	SetTokenActive(accountCode accountsTypes.Code, tokenCode string, active bool) error
 	RenameAccount(accountCode accountsTypes.Code, name string) error
-	AccountSetWatch(filter func(*config.Account) bool, watch *bool) error
+	// disabling for now, we'll either bring this back (if user request it) or remove for good
+	// AccountSetWatch(filter func(*config.Account) bool, watch *bool) error
 	AOPP() backend.AOPP
 	AOPPCancel()
 	AOPPApprove()
@@ -213,7 +214,8 @@ func NewHandlers(
 	getAPIRouterNoError(apiRouter)("/set-account-active", handlers.postSetAccountActiveHandler).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/set-token-active", handlers.postSetTokenActiveHandler).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/rename-account", handlers.postRenameAccountHandler).Methods("POST")
-	getAPIRouterNoError(apiRouter)("/account-set-watch", handlers.postAccountSetWatchHandler).Methods("POST")
+	// disabling for now, we'll either bring this back (if user request it) or remove for good
+	// getAPIRouterNoError(apiRouter)("/account-set-watch", handlers.postAccountSetWatchHandler).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/accounts/reinitialize", handlers.postAccountsReinitializeHandler).Methods("POST")
 	getAPIRouter(apiRouter)("/account-summary", handlers.getAccountSummary).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/supported-coins", handlers.getSupportedCoinsHandler).Methods("GET")
@@ -800,6 +802,8 @@ func (handlers *Handlers) postRenameAccountHandler(r *http.Request) interface{}
 	return response{Success: true}
 }
 
+// disabling for now, we'll either bring this back (if user request it) or remove for good
+/*
 func (handlers *Handlers) postAccountSetWatchHandler(r *http.Request) interface{} {
 	var jsonBody struct {
 		AccountCode accountsTypes.Code `json:"accountCode"`
@@ -823,6 +827,7 @@ func (handlers *Handlers) postAccountSetWatchHandler(r *http.Request) interface{
 	}
 	return response{Success: true}
 }
+*/
 
 func (handlers *Handlers) postAccountsReinitializeHandler(_ *http.Request) interface{} {
 	handlers.backend.ReinitializeAccounts()

frontends/web/src/components/icon/assets/icons/edit-active.svg

@@ -36,6 +36,7 @@ import creditCardDarkSVG from './assets/icons/credit-card.svg';
 import creditCardLightSVG from './assets/icons/credit-card-light.svg';
 import editSVG from './assets/icons/edit.svg';
 import editLightSVG from './assets/icons/edit-light.svg';
+import editActiveSVG from './assets/icons/edit-active.svg';
 import ethColorSVG from './assets//eth-color.svg';
 import redDotSVG from './assets/icons/red-dot.svg';
 import copySVG from './assets/icons/copy.svg';
@@ -157,6 +158,7 @@ export const CloseXWhite = (props: ImgProps) => (<img src={closeXWhiteSVG} dragg
 export const CloseXDark = (props: ImgProps) => (<img src={closeXDarkSVG} draggable={false} {...props} />);
 export const Edit = (props: ImgProps) => (<img src={editSVG} draggable={false} {...props} />);
 export const EditLight = (props: ImgProps) => (<img src={editLightSVG} draggable={false} {...props} />);
+export const EditActive = (props: ImgProps) => (<img src={editActiveSVG} draggable={false} {...props} />);
 export const ETHLogo = (props: ImgProps) => (<img src={ethColorSVG} draggable={false} {...props} />);
 export const ExternalLink = (props: ImgProps) => (<img src={externalLink} draggable={false} {...props} />);
 export const EyeClosed = (props: ImgProps) => (<img src={eyeClosedSVG} draggable={false} {...props} />);

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

@@ -1111,6 +1111,10 @@
         "description": "Select your default currency",
         "title": "Default currency"
       },
+      "enableWallet": {
+        "description": "Disabling your account means it will not appear in the sidebar or the portfolio. You can always enable it again from here. Coins on this account will not be affected and will remain safe.",
+        "title": "Enable/disable wallet"
+      },
       "hideAmounts": {
         "description": "Displays a toggle to hide your balance and amounts to improve your privacy when using the app in public.",
         "hideAmounts": "Hide amounts",
@@ -1121,14 +1125,13 @@
         "description": "Which language you want the BitBoxApp to use.",
         "title": "Language"
       },
+      "remebmerWallet": {
+        "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"
+      },
       "toggleSats": {
         "description": "Enable or disable Satoshis."
-      },
-      "watchonly": {
-        "description": "Let's you see your accounts and portfolio without the BitBox02. The BitBox02 is still needed for signing.",
-        "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/locales/en/app.json

@@ -17,13 +17,13 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Toggle } from '../../../../components/toggle/toggle';
-import { SettingsItem } from '../settingsItem/settingsItem';
 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 } from '../../../../components/forms';
+import { Button, Label } from '../../../../components/forms';
+import style from './watchonlySettings.module.css';
 
 type Props = {
   keystore: accountAPI.TKeystore;
@@ -74,32 +74,25 @@ export const WatchonlySetting = ({ keystore }: Props) => {
 
   return (
     <>
-      <Dialog title={t('newSettings.appearance.watchonly.warningTitle')} medium onClose={handleCloseDialog} open={warningDialogOpen}>
-        <p>{t('newSettings.appearance.watchonly.warning')}</p>
+      <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>
-      <SettingsItem
-        settingName={t('newSettings.appearance.watchonly.title')}
-        secondaryText={t('newSettings.appearance.watchonly.description')}
-        extraComponent={
-          <>
-            {
-              watchonly !== undefined ?
-                (
-                  <Toggle
-                    checked={watchonly}
-                    disabled={disabled}
-                    onChange={toggleWatchonly}
-                  />
-                ) :
-                null
-            }
-          </>
-        }
-      />
+      { watchonly !== undefined ? (
+        <Label>
+          <span className={style.labelText}>
+            {t('newSettings.appearance.remebmerWallet.name')}
+          </span>
+          <Toggle
+            checked={watchonly}
+            disabled={disabled}
+            onChange={toggleWatchonly}
+          />
+        </Label>
+      ) : null}
     </>
   );
 };

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

@@ -0,0 +1,6 @@
+.labelText {
+  font-size: 14px;
+  line-height: 1;
+  margin-right: 8px;
+  vertical-align: sub;
+}

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

@@ -3,14 +3,31 @@
     margin-bottom: var(--spacing-default);
 }
 
+.walletHeader {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-bottom: var(--space-eight);
+}
+
+.walletTitle {
+    font-size: 20px;
+    font-weight: 400;
+    margin: 0;
+}
+
 .setting {
     align-items: center;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: flex-end;
+    justify-content: space-between;
     min-height: var(--item-height);
-    padding: 10px var(--space-half);
+    padding: var(--space-quarter) 0;
+}
+
+.setting:not(:last-child) {
+    border-bottom: solid 1px var(--background);
 }
 
 .coinLogo {
@@ -21,20 +38,38 @@
 .acccountLink {
     align-items: center;
     display: flex;
-    flex-basis: calc(100% - 180px);
-    flex-grow: 0;
+    flex-basis: calc(100% - 100px);
+    flex-grow: 1;
     flex-shrink: 1;
 }
 
 .editBtn {
-    background: transparent;
-    border: none;
-    color: var(--color-primary);
-    flex-basis: content;
-    flex-grow: 1;
-    flex-shrink: 1;
-    line-height: 2;
-    text-align: right;
+    min-width: 0;
+    padding: 0 0 0 var(--space-quarter);
+}
+
+.editBtn img {
+    margin-right: var(--space-quarter);
+    max-width: 18px;
+    height: auto;
+    vertical-align: text-bottom;
+}
+
+.toggleLabel {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.toggleLabelText {
+    color: var(--color-secondary);
+}
+
+.toggleLabelText img {
+    color: var(--color-secondary);
+    margin-right: var(--space-quarter);
+    max-width: 18px;
+    vertical-align: bottom;
 }
 
 .toggle {
@@ -149,12 +184,6 @@
     margin-top: var(--space-half);
 }
 
-.watchOnlyTitle {
-    color: var(--color-secondary);   
-    margin: 0;
-    margin-left: var(--space-quarter);
-}
-
 .watchOnlyNote {
     margin: 0;
     margin-top: var(--space-half);