multi: Replace trezor.js with connect. (#2705)

trezor.js is being deprecated. Switch to using trezor/connect to
communicate with a trezor device.

connect has no way of listing connected devices or choosing a device.
So, remove the device list. Also do not create separate sessions. There
is not only the one session or transport layer that we communicate
over.

Changes by file:

TrezorActions.js
 - Use a singular session for communication. Adjust all methods
   appropriately.
 - Pull constants from trezor/connect.
 - Drop all references to a device list.
 - Store only the device ID and label.
 - Add a connect method.
 - Add initial init method settings.
 - Replace device listeners.
 - Add a listener for not backed up devices.
 - Adjust deviceRun to use a single session, error on no device, and
   also to catch errors in the returned payload.
 - Add getFeatures convenience method. No longer use stored features
   but request features from the device whenever they are needed.
 - Add noDevice convenience method.
 - Remove clearing device sessions. While this is a wanted feature, it
   is not yet clear how to achieve with connect. Leave a TODO to this
   affect.
 - Use boolean for canceled param in pin/password/word callbacks.
 - Move all attempt notifications to the beginning of methods, before
   the first possible failure.
 - Use named objects in session methods.
 - Add hex argument to signMessage and remove hex2b64 conversion.
 - Toggle methods and homescreen are now all part of applySettings.
   Other method names have also changed.
 - Add backup method.
 - Temporary stop firmware updates. This method will be implemented in a
   future commit. Updates can be done using the official site for now.

Modals.js
 - Use local PassPhraseModal.
 - Replace reloadDeviceList with connect.

ConfigButtons.js
 - Use red button for passphrase toggle.
 - Remove clear device session button. While this feature would be good
   to have, it is not yet clear how to clear the session and/or logout.

RecoveryButtons.js
 - Use blue button for new backup option.

TrezorPage/index.js
 - Replace reloadDeviceList with connect.

connectors/trezor.js
 - Replace loadDeviceList and reloadDeviceList with connect.
 - Add backup device.

constants/trezor.js
 - Add Model T homescreen.
 - Removed now unused trezor-link constants.

helpers/trezor.js
 - If an output has an address_n it cannot have even a null address and
   vice-versa.
 - Amounts are now type checked to be strings.
 - script_sig must be in the bin outputs, and not in the outputs.

externalRequests.js
 - Now only communicating with trezor connect.

reducers/trezor.js
 - Remove device list constants.
 - Add connect, backup, and transport start/stop constants.
 - Do not store a device list. Store device ID and label.

app/actions/WalletLoaderActions.js

@@ -26,7 +26,6 @@ import {
 } from "../middleware/walletrpc/api_pb";
 import { push as pushHistory } from "connected-react-router";
 import { stopNotifcations } from "./NotificationActions";
-import { clearDeviceSession as trezorClearDeviceSession } from "./TrezorActions";
 import { stopDcrlnd } from "./LNActions";
 import { TESTNET } from "constants";
 import { ipcRenderer } from "electron";
@@ -240,7 +239,6 @@ export const closeWalletRequest = () => async (dispatch, getState) => {
     await dispatch(stopNotifcations());
     await dispatch(syncCancel());
     await dispatch(rescanCancel());
-    await dispatch(trezorClearDeviceSession());
     await dispatch(stopDcrlnd());
     await dispatch(ticketBuyerCancel());
     await dispatch(setSelectedWallet(null));

app/components/modals/trezor/Modals.js

@@ -1,6 +1,6 @@
 import { trezor } from "connectors";
 import PinModal from "./PinModal";
-import { PassPhraseModal } from "modals";
+import PassPhraseModal from "./PassPhraseModal";
 import WalletCreationPassPhraseModal from "./WalletCreationPassPhraseModal";
 import WordModal from "./WordModal";
 import "style/Trezor.less";

app/components/modals/trezor/PassPhraseModal.js

@@ -16,7 +16,7 @@ class TrezorPassphraseModal extends React.Component {
     const { onSubmit } = this;
 
     const trezorLabel = this.props.device
-      ? this.props.device.features.label
+      ? this.props.deviceLabel
       : "";
 
     const className = [

app/components/modals/trezor/PinModal.js

@@ -69,7 +69,7 @@ class PinModal extends React.Component {
     );
 
     const trezorLabel = this.props.device
-      ? this.props.device.features.label
+      ? this.props.deviceLabel
       : "";
     const className = [
       "passphrase-modal",

app/components/modals/trezor/WalletCreationPassPhraseModal.js

@@ -61,7 +61,7 @@ class TrezorWalletCreationPassphraseModal extends React.Component {
     } = this.state;
 
     const trezorLabel = this.props.device
-      ? this.props.device.features.label
+      ? this.props.deviceLabel
       : "";
 
     const className = [

app/components/views/GetStartedPage/TrezorConfig/TrezorConfig.jsx

@@ -9,7 +9,7 @@ const TrezorConfig = ({
   enableTrezor,
   device,
   performingOperation,
-  reloadDeviceList,
+  connect,
   ...props
 }) => {
   useEffect(() => {
@@ -25,10 +25,10 @@ const TrezorConfig = ({
         />
       </div>
       <div>
-        <InvisibleButton onClick={reloadDeviceList}>
+        <InvisibleButton onClick={connect}>
           <T
-            id="trezor.getStartedConfig.btnReloadDeviceList"
-            m="Reload Device List"
+            id="trezor.getStartedConfig.btnConnect"
+            m="Connect to Trezor"
           />
         </InvisibleButton>
       </div>

app/components/views/TrezorPage/ConfigButtons.js

@@ -1,6 +1,6 @@
 import { VerticalAccordion } from "shared";
 import { FormattedMessage as T } from "react-intl";
-import { KeyBlueButton } from "buttons";
+import { KeyBlueButton, DangerButton } from "buttons";
 
 @autobind
 class ConfigButtons extends React.Component {
@@ -24,8 +24,7 @@ class ConfigButtons extends React.Component {
       loading,
       onTogglePinProtection,
       onTogglePassPhraseProtection,
-      onChangeHomeScreen,
-      onClearDeviceSession
+      onChangeHomeScreen
     } = this.props;
 
     return (
@@ -41,15 +40,15 @@ class ConfigButtons extends React.Component {
           <T id="trezorPage.togglePinProtectionBtn" m="Toggle Pin Protection" />
         </KeyBlueButton>
 
-        <KeyBlueButton
+        <DangerButton
           onClick={onTogglePassPhraseProtection}
           loading={loading}
           disabled={loading}>
           <T
             id="trezorPage.togglePassPhraseProtectionBtn"
             m="Toggle Passphrase Protection"
           />
-        </KeyBlueButton>
+        </DangerButton>
 
         <KeyBlueButton
           onClick={onChangeHomeScreen}
@@ -58,12 +57,6 @@ class ConfigButtons extends React.Component {
           <T id="trezorPage.changeHomeScreen" m="Change Home Screen" />
         </KeyBlueButton>
 
-        <KeyBlueButton
-          onClick={onClearDeviceSession}
-          loading={loading}
-          disabled={loading}>
-          <T id="trezorPage.clearSession" m="Clear Session" />
-        </KeyBlueButton>
       </VerticalAccordion>
     );
   }

app/components/views/TrezorPage/ConfigSections.js

@@ -42,12 +42,8 @@ class TrezorConfigSections extends React.Component {
     this.props.initDevice();
   }
 
-  onReloadDeviceList() {
-    this.props.reloadDeviceList();
-  }
-
-  onClearDeviceSession() {
-    this.props.clearDeviceSession();
+  onBackupDevice() {
+    this.props.backupDevice();
   }
 
   render() {
@@ -59,8 +55,8 @@ class TrezorConfigSections extends React.Component {
       onWipeDevice,
       onRecoverDevice,
       onInitDevice,
+      onBackupDevice,
       onUpdateFirmware,
-      onClearDeviceSession,
       loading
     } = this;
 
@@ -71,15 +67,14 @@ class TrezorConfigSections extends React.Component {
             onTogglePinProtection,
             onTogglePassPhraseProtection,
             onChangeHomeScreen,
-            onClearDeviceSession,
             loading
           }}
         />
 
         <ChangeLabel {...{ onChangeLabel, loading }} />
 
         <RecoveryButtons
-          {...{ onWipeDevice, onRecoverDevice, onInitDevice, loading }}
+          {...{ onWipeDevice, onRecoverDevice, onInitDevice, onBackupDevice, loading }}
         />
 
         <FirmwareUpdate {...{ onUpdateFirmware, loading }} />

app/components/views/TrezorPage/NoDevicePage.js

@@ -3,7 +3,7 @@ import Header from "./Header";
 import { StandalonePage } from "layout";
 import { InvisibleButton } from "buttons";
 
-export default ({ onReloadDeviceList }) => (
+export default ({ onConnect }) => (
   <StandalonePage header={<Header />}>
     <div>
       <T
@@ -12,8 +12,8 @@ export default ({ onReloadDeviceList }) => (
       />
     </div>
     <div>
-      <InvisibleButton onClick={onReloadDeviceList}>
-        <T id="trezor.noDevice.btnReloadDeviceList" m="Reload Device List" />
+      <InvisibleButton onClick={onConnect}>
+        <T id="trezor.noDevice.btnConnect" m="Connect to Trezor" />
       </InvisibleButton>
     </div>
   </StandalonePage>

app/components/views/TrezorPage/RecoveryButtons.js

@@ -1,6 +1,7 @@
 import { VerticalAccordion } from "shared";
 import { FormattedMessage as T } from "react-intl";
-import { DangerButton } from "buttons";
+import { DangerButton, KeyBlueButton } from "buttons";
+
 import { Documentation } from "shared";
 
 @autobind
@@ -21,7 +22,7 @@ class RecoveryButtons extends React.Component {
       </>
     );
 
-    const { loading, onWipeDevice, onRecoverDevice, onInitDevice } = this.props;
+    const { loading, onWipeDevice, onRecoverDevice, onInitDevice, onBackupDevice } = this.props;
 
     return (
       <VerticalAccordion
@@ -52,6 +53,13 @@ class RecoveryButtons extends React.Component {
           disabled={loading}>
           <T id="trezorPage.initDeviceBtn" m="Init Device" />
         </DangerButton>
+
+        <KeyBlueButton
+          onClick={onBackupDevice}
+          loading={loading}
+          disabled={loading}>
+          <T id="trezorPage.backupDeviceBtn" m="Backup Device" />
+        </KeyBlueButton>
       </VerticalAccordion>
     );
   }

app/components/views/TrezorPage/index.js

@@ -3,9 +3,9 @@ import Page from "./Page";
 import NoDevicePage from "./NoDevicePage";
 import "style/Trezor.less";
 
-const TrezorPage = ({ device, reloadDeviceList, ...props }) =>
+const TrezorPage = ({ device, connect, ...props }) =>
   !device ? (
-    <NoDevicePage onReloadDeviceList={reloadDeviceList} />
+    <NoDevicePage onConnect={connect} />
   ) : (
     <Page device={device} {...props} />
   );

app/connectors/trezor.js

@@ -9,17 +9,16 @@ const mapStateToProps = selectorMap({
   waitingForPin: sel.trezorWaitingForPin,
   waitingForPassPhrase: sel.trezorWaitingForPassPhrase,
   waitingForWord: sel.trezorWaitingForWord,
-  device: sel.trezorDevice,
   performingOperation: sel.trezorPerformingOperation,
   isGetStarted: sel.isGetStarted,
-  deviceList: sel.trezorDeviceList,
+  device: sel.trezorDevice,
   walletCreationMasterPubkeyAttempt: sel.trezorWalletCreationMasterPubkeyAttempt
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
-      loadDeviceList: trza.loadDeviceList,
+      connect: trza.connect,
       cancelCurrentOperation: trza.cancelCurrentOperation,
       submitPin: trza.submitPin,
       submitPassPhrase: trza.submitPassPhrase,
@@ -31,10 +30,9 @@ const mapDispatchToProps = (dispatch) =>
       wipeDevice: trza.wipeDevice,
       recoverDevice: trza.recoverDevice,
       initDevice: trza.initDevice,
+      backupDevice: trza.backupDevice,
       updateFirmware: trza.updateFirmware,
-      enableTrezor: trza.enableTrezor,
-      reloadDeviceList: trza.reloadTrezorDeviceList,
-      clearDeviceSession: trza.clearDeviceSession
+      enableTrezor: trza.enableTrezor
     },
     dispatch
   );