[redesign] Trezor views (#3570)

- introduce TrezorPageSection. Use accordion in the getstarted section and simple title and container inside the app - update trezorPageAccordation's style - toggle pin protection - toggle passphrase and on device - rename ConfigButtons to SecuritySection
decred · Apr 6, 2023 · c62806f · c62806f
1 parent ef3317b
commit c62806f
Show file tree

Hide file tree

Showing 126 changed files with 2,083 additions and 809 deletions.
diff --git a/app/actions/TrezorActions.js b/app/actions/TrezorActions.js
@@ -107,6 +107,7 @@ export const connect = () => async (dispatch, getState) => {
     return;
   });
   dispatch({ type: TRZ_CONNECT_SUCCESS });
+  dispatch(getFeatures());
 };
 
 export const TRZ_TREZOR_DISABLED = "TRZ_TREZOR_DISABLED";
@@ -136,6 +137,7 @@ function onChange(dispatch, getState, features) {
   if (device == currentDevice) return;
   const deviceLabel = features.label;
   dispatch({ deviceLabel, device, type: TRZ_SELECTEDDEVICE_CHANGED });
+  dispatch(getFeatures());
 }
 
 function onConnect(dispatch, getState, features) {
@@ -146,6 +148,7 @@ function onConnect(dispatch, getState, features) {
     device = BOOTLOADER_MODE;
   }
   dispatch({ deviceLabel, device, type: TRZ_LOADDEVICE });
+  dispatch(getFeatures());
   return device;
 }
 
@@ -333,12 +336,18 @@ async function deviceRun(dispatch, getState, fn) {
   }
 }
 
-const getFeatures = async (dispatch, getState) => {
-  const features = await deviceRun(dispatch, getState, async () => {
-    const res = await session.getFeatures();
-    return res.payload;
-  });
-  return features;
+export const TRZ_GETFEATURES_SUCCESS = "TRZ_GETFEATURES_SUCCESS";
+export const getFeatures = () => async (dispatch, getState) => {
+  try {
+    const features = await deviceRun(dispatch, getState, async () => {
+      const res = await session.getFeatures();
+      return res.payload;
+    });
+    dispatch({ type: TRZ_GETFEATURES_SUCCESS, features });
+    return features;
+  } catch (error) {
+    return null;
+  }
 };
 
 export const TRZ_CANCELOPERATION_SUCCESS = "TRZ_CANCELOPERATION_SUCCESS";
@@ -549,12 +558,7 @@ export const TRZ_TOGGLEPINPROTECTION_SUCCESS =
 export const togglePinProtection = () => async (dispatch, getState) => {
   dispatch({ type: TRZ_TOGGLEPINPROTECTION_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
-    dispatch({ error, type: TRZ_TOGGLEPINPROTECTION_FAILED });
-    return;
-  });
-
-  const clearProtection = !!features.pin_protection;
+  const clearProtection = !!selectors.trezorPinProtection(getState());
 
   try {
     await deviceRun(dispatch, getState, async () => {
@@ -563,9 +567,9 @@ export const togglePinProtection = () => async (dispatch, getState) => {
       });
       return res.payload;
     });
+    await dispatch(getFeatures());
     dispatch({
       clearProtection,
-      deviceLabel: features.label,
       type: TRZ_TOGGLEPINPROTECTION_SUCCESS
     });
   } catch (error) {
@@ -585,12 +589,7 @@ export const TRZ_TOGGLEPASSPHRASEPROTECTION_CONFIRMED =
 export const togglePassPhraseProtection = () => async (dispatch, getState) => {
   dispatch({ type: TRZ_TOGGLEPASSPHRASEPROTECTION_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
-    dispatch({ error, type: TRZ_TOGGLEPASSPHRASEPROTECTION_FAILED });
-    return;
-  });
-
-  const enableProtection = !features.passphrase_protection;
+  const enableProtection = !selectors.trezorPassphraseProtection(getState());
 
   try {
     await deviceRun(dispatch, getState, async () => {
@@ -599,9 +598,9 @@ export const togglePassPhraseProtection = () => async (dispatch, getState) => {
       });
       return res.payload;
     });
+    await dispatch(getFeatures());
     dispatch({
       enablePassphraseProtection: enableProtection,
-      deviceLabel: features.label,
       type: TRZ_TOGGLEPASSPHRASEPROTECTION_SUCCESS
     });
   } catch (error) {
@@ -619,12 +618,9 @@ export const TRZ_TOGGLEPASSPHRASEONDEVICE_SUCCESS =
 export const togglePassphraseOnDevice = () => async (dispatch, getState) => {
   dispatch({ type: TRZ_TOGGLEPASSPHRASEONDEVICE_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
-    dispatch({ error, type: TRZ_TOGGLEPASSPHRASEONDEVICE_FAILED });
-    return;
-  });
-
-  const enableOnDevice = !features.passphrase_always_on_device;
+  const enableOnDevice = !selectors.trezorPassphraseOnDeviceProtection(
+    getState()
+  );
 
   try {
     await deviceRun(dispatch, getState, async () => {
@@ -633,9 +629,9 @@ export const togglePassphraseOnDevice = () => async (dispatch, getState) => {
       });
       return res.payload;
     });
+    await dispatch(getFeatures());
     dispatch({
       enablePassphraseOnDevice: enableOnDevice,
-      deviceLabel: features.label,
       type: TRZ_TOGGLEPASSPHRASEONDEVICE_SUCCESS
     });
   } catch (error) {
@@ -650,7 +646,7 @@ export const TRZ_CHANGEHOMESCREEN_SUCCESS = "TRZ_CHANGEHOMESCREEN_SUCCESS";
 export const changeToDecredHomeScreen = () => async (dispatch, getState) => {
   dispatch({ type: TRZ_CHANGEHOMESCREEN_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
+  const features = await dispatch(getFeatures()).catch((error) => {
     dispatch({ error, type: TRZ_CHANGEHOMESCREEN_FAILED });
     return;
   });
@@ -788,7 +784,7 @@ export const TRZ_BACKUPDEVICE_SUCCESS = "TRZ_BACKUPDEVICE_SUCCESS";
 export const backupDevice = () => async (dispatch, getState) => {
   dispatch({ type: TRZ_BACKUPDEVICE_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
+  const features = await dispatch(getFeatures()).catch((error) => {
     dispatch({ error, type: TRZ_BACKUPDEVICE_FAILED });
     return;
   });
@@ -868,7 +864,7 @@ export const updateFirmware = (path) => async (dispatch, getState) => {
 
   dispatch({ type: TRZ_UPDATEFIRMWARE_ATTEMPT });
 
-  const features = await getFeatures(dispatch, getState).catch((error) => {
+  const features = await dispatch(getFeatures()).catch((error) => {
     dispatch({ error, type: TRZ_UPDATEFIRMWARE_FAILED });
     return;
   });
@@ -911,7 +907,10 @@ export const getWalletCreationMasterPubKey = () => async (
 
   try {
     // Check that the firmware running in this trezor has the seed constant fix.
-    const features = await getFeatures(dispatch, getState);
+    const features = await dispatch(getFeatures()).catch((error) => {
+      dispatch({ error, type: TRZ_GETWALLETCREATIONMASTERPUBKEY_FAILED });
+      return;
+    });
     const versionLessThan = (wantMajor, wantMinor) =>
       features.major_version < wantMajor ||
       (features.major_version == wantMajor &&

diff --git a/app/components/SideBar/MenuLinks/Links.jsx b/app/components/SideBar/MenuLinks/Links.jsx
@@ -2,7 +2,6 @@ import { FormattedMessage as T } from "react-intl";
 
 export const LN_KEY = "ln";
 export const DEX_KEY = "dex";
-export const TREZOR_KEY = "trezor";
 
 export const linkList = [
   {
@@ -53,13 +52,6 @@ export const linkList = [
     icon: "accounts",
     ariaLabel: "Accounts"
   },
-  {
-    path: "/trezor",
-    link: <T id="sidebar.link.trezor" m="Trezor" />,
-    icon: TREZOR_KEY,
-    key: TREZOR_KEY,
-    ariaLabel: "Trezor"
-  },
   {
     path: "/dex",
     link: <T id="sidebar.link.dex" m="DEX" />,

diff --git a/app/components/SideBar/MenuLinks/hooks.js b/app/components/SideBar/MenuLinks/hooks.js
@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from "react";
 import { useSelector } from "react-redux";
 import * as sel from "selectors";
-import { linkList, TREZOR_KEY, LN_KEY, DEX_KEY } from "./Links";
+import { linkList, LN_KEY, DEX_KEY } from "./Links";
 import { useHistory } from "react-router-dom";
 import { cloneDeep } from "fp";
 
@@ -43,9 +43,6 @@ export function useMenuLinks() {
 
   const menuLinks = useMemo(() => {
     let links = cloneDeep(linkList);
-    if (!isTrezor) {
-      links = links.filter((l) => l.key !== TREZOR_KEY);
-    }
     if (!lnEnabled) {
       links = links.filter((l) => l.key !== LN_KEY);
     }

diff --git a/app/components/inputs/PasswordInput/PasswordInput.jsx b/app/components/inputs/PasswordInput/PasswordInput.jsx
@@ -3,23 +3,26 @@ import styles from "./PasswordInput.module.css";
 import { classNames, Button } from "pi-ui";
 import { usePasswordInput } from "./hooks";
 
-const PasswordInput = ({ ...props }) => {
+const PasswordInput = ({ hideToggleButton, children, ...props }) => {
   const { isPasswordVisible, togglePasswordVisibility } = usePasswordInput();
   return (
     <Input {...{ ...props, type: isPasswordVisible ? "text" : "password" }}>
-      <Button
-        aria-label="Toggle Passsword Visibility"
-        kind="secondary"
-        className={classNames(
-          styles.showPasswordButton,
-          !isPasswordVisible && styles.hide
-        )}
-        onClick={(e) => {
-          e.preventDefault();
-          togglePasswordVisibility();
-        }}>
-        <div />
-      </Button>
+      {!hideToggleButton && (
+        <Button
+          aria-label="Toggle Passsword Visibility"
+          kind="secondary"
+          className={classNames(
+            styles.showPasswordButton,
+            !isPasswordVisible && styles.hide
+          )}
+          onClick={(e) => {
+            e.preventDefault();
+            togglePasswordVisibility();
+          }}>
+          <div />
+        </Button>
+      )}
+      {children}
     </Input>
   );
 };

diff --git a/app/components/modals/TrezorModals/TrezorModals.module.css b/app/components/modals/TrezorModals/TrezorModals.module.css
@@ -1,13 +1,18 @@
 h1 {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 35px;
+  color: var(--grey-7);
 }
 
 .pinModal,
 .passphraseModal,
 .togglePassphraseConfirmModal,
 .wordModal {
-  width: 500px;
-  padding: 20px;
+  width: 413px;
+  padding: 30px 23px 20px 40px;
+  position: relative;
 }
 
 .pinModal.getStarted,
@@ -20,7 +25,10 @@ h1 {
 .pinModal > p,
 .togglePassphraseConfirmModal > p,
 .wordModal > p {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--grey-7);
 }
 
 .passphraseModal p:last-child {
@@ -31,19 +39,32 @@ h1 {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 0 55px 30px 37px;
+}
+
+.learnMoreLink {
+  color: var(--link-color) !important;
+  cursor: pointer;
+  text-decoration: underline !important;
 }
 
 .pinPad {
   display: grid;
-  grid-template-columns: 2em 2em 2em;
+  grid-template-columns: 80px 80px 80px;
+  grid-template-rows: 80px 80px 80px;
+  grid-gap: 9px;
   text-align: center;
   font-size: 150%;
 }
 
 .pinPadButton {
-  padding: 0.5em 0em 0.7em 0;
-  border: 1px solid transparent;
+  border: 1px solid var(--trezor-pin-bt-border);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--grey-7);
+  font-size: 28px;
 }
 
 .pinPadButton:hover {
@@ -56,6 +77,43 @@ h1 {
 
 .passwordField {
   margin-bottom: 20px;
+  padding: 0 55px 0 37px;
+}
+
+.passwordFieldInput {
+  font-size: 28px !important;
+  line-height: 35px !important;
+  letter-spacing: 0.5em;
+  color: var(--grey-7);
+}
+
+.clearPinButton {
+  height: 15px;
+  width: 15px;
+  background-image: var(--x-grey);
+  border: none !important;
+  padding: 0 !important;
+  transition: none !important;
+  background-size: 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--background-back-color) !important;
+}
+
+.clearPinButton:hover {
+  opacity: 0.85;
+}
+
+.closeButton {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  height: 10px;
+  width: 10px;
+  background-image: var(--x-grey);
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  cursor: pointer;
 }
 
 .wordSelect {
@@ -68,7 +126,11 @@ h1 {
 
 .buttons {
   display: flex;
-  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.buttons button {
+  height: 44px;
 }
 
 @media (--xs-viewport) {