From 45aa21855c230726d28a3bf2efb727bd56dc053a Mon Sep 17 00:00:00 2001 From: Matheus Degiovani Date: Tue, 30 Oct 2018 14:22:31 -0300 Subject: [PATCH] Startup improvements --- app/actions/TrezorActions.js | 9 +- app/components/modals/trezor/PinModal.js | 22 +++-- .../views/GetStartedPage/TrezorConfig/Form.js | 27 ------ .../GetStartedPage/TrezorConfig/index.js | 74 +++-------------- .../views/TrezorPage/ConfigButtons.js | 6 +- .../views/TrezorPage/ConfigSections.js | 83 +++++++++++++++++++ .../views/TrezorPage/NoDevicePage.js | 8 +- app/components/views/TrezorPage/Page.js | 20 +---- app/components/views/TrezorPage/index.js | 80 ++---------------- app/connectors/trezor.js | 2 + app/reducers/trezor.js | 8 ++ 11 files changed, 151 insertions(+), 188 deletions(-) delete mode 100644 app/components/views/GetStartedPage/TrezorConfig/Form.js create mode 100644 app/components/views/TrezorPage/ConfigSections.js diff --git a/app/actions/TrezorActions.js b/app/actions/TrezorActions.js index 06dc08166d..8498aa9081 100644 --- a/app/actions/TrezorActions.js +++ b/app/actions/TrezorActions.js @@ -59,6 +59,13 @@ export const enableTrezor = () => (dispatch, getState) => { } }; +export const TRZ_CLEAR_DEVICELIST = "TRZ_CLEAR_DEVICELIST"; + +export const reloadTrezorDeviceList = () => (dispatch) => { + dispatch({ type: TRZ_CLEAR_DEVICELIST }); + dispatch(loadDeviceList()); +}; + export const TRZ_LOADDEVICELIST_ATTEMPT = "TRZ_LOADDEVICELIST_ATTEMPT"; export const TRZ_LOADDEVICELIST_FAILED = "TRZ_LOADDEVICELIST_FAILED"; export const TRZ_LOADDEVICELIST_SUCCESS = "TRZ_LOADDEVICELIST_SUCCESS"; @@ -189,7 +196,7 @@ async function deviceRun(dispatch, getState, device, fn) { const handleError = error => { const { trezor: { waitingForPin, waitingForPassphrase } } = getState(); - console.log("Handle error no deviceRun"); + console.log("Handle error no deviceRun", error); if (waitingForPin) dispatch({ error, type: TRZ_PIN_CANCELED }); if (waitingForPassphrase) dispatch({ error, type: TRZ_PASSPHRASE_CANCELED }); if (error instanceof Error) { diff --git a/app/components/modals/trezor/PinModal.js b/app/components/modals/trezor/PinModal.js index 562496cb7a..cc239ebea3 100644 --- a/app/components/modals/trezor/PinModal.js +++ b/app/components/modals/trezor/PinModal.js @@ -4,6 +4,8 @@ import { PasswordInput } from "inputs"; import { ButtonsToolbar } from "../PassphraseModal"; import { InvisibleButton } from "buttons"; +const PIN_LABELS = "ABCDEFGHI"; + const PinButton = ({ index, label, onClick }) =>
onClick(index)}>{label}
; @@ -31,14 +33,24 @@ class PinModal extends React.Component { this.setState({ currentPin: "" }); } + onChangeCurrentPin(e) { + const txt = (e.target.value || "").toUpperCase().trim(); + let pin = ""; + for (let i = 0; i < txt.length; i++) { + const idx = PIN_LABELS.indexOf(txt[i]); + if (idx > -1) pin = pin + "" + (idx+1); + } + this.setState({ currentPin: pin }); + } + render() { - const { onCancelModal, onSubmit, onPinButtonClick, onClearPin } = this; + const { onCancelModal, onSubmit, onPinButtonClick, onClearPin, + onChangeCurrentPin } = this; - const labels = "ABCDEFGHI"; - const currentPin = this.state.currentPin.split("").map(v => labels[parseInt(v)-1]).join(""); + const currentPin = this.state.currentPin.split("").map(v => PIN_LABELS[parseInt(v)-1]).join(""); const Button = ({ index }) => - ; + ; const trezorLabel = this.props.device ? this.props.device.features.label : ""; const className = [ @@ -69,7 +81,7 @@ class PinModal extends React.Component {
- +
diff --git a/app/components/views/GetStartedPage/TrezorConfig/Form.js b/app/components/views/GetStartedPage/TrezorConfig/Form.js deleted file mode 100644 index 638c9a95c3..0000000000 --- a/app/components/views/GetStartedPage/TrezorConfig/Form.js +++ /dev/null @@ -1,27 +0,0 @@ -import ChangeLabel from "views/TrezorPage/ChangeLabel"; -import ConfigButtons from "views/TrezorPage/ConfigButtons"; -import RecoveryButtons from "views/TrezorPage/RecoveryButtons"; -import FirmwareUpdate from "views/TrezorPage/FirmwareUpdate"; - -export default ({ - onTogglePinProtection, - onTogglePassPhraseProtection, - onChangeHomeScreen, - onChangeLabel, - onWipeDevice, - onRecoverDevice, - onInitDevice, - onUpdateFirmware, - loading, -}) => ( - - - - - - - - - -); diff --git a/app/components/views/GetStartedPage/TrezorConfig/index.js b/app/components/views/GetStartedPage/TrezorConfig/index.js index c9af646956..19f5801826 100644 --- a/app/components/views/GetStartedPage/TrezorConfig/index.js +++ b/app/components/views/GetStartedPage/TrezorConfig/index.js @@ -1,7 +1,8 @@ import { trezor } from "connectors"; import { FormattedMessage as T } from "react-intl"; -import Form from "./Form"; +import ConfigSections from "views/TrezorPage/ConfigSections"; import Page from "./Page"; +import { InvisibleButton } from "buttons"; import "style/Trezor.less"; @autobind @@ -12,36 +13,15 @@ class TrezorConfig extends React.Component { props.enableTrezor(); } - onTogglePinProtection() { - this.props.togglePinProtection(); - } - - onTogglePassPhraseProtection() { - this.props.togglePassPhraseProtection(); - } - - onChangeHomeScreen() { - this.props.changeToDecredHomeScreen(); - } - - onChangeLabel(newLabel) { - this.props.changeLabel(newLabel); - } - - onWipeDevice() { - this.props.wipeDevice(); - } - - onRecoverDevice() { - this.props.recoverDevice(); - } - - onInitDevice() { - this.props.initDevice(); - } - - onUpdateFirmware(path) { - this.props.updateFirmware(path); + renderNoDevice() { + return <> +
+
+ + + +
+ ; } render() { @@ -49,38 +29,10 @@ class TrezorConfig extends React.Component { let children; if (!device) { - children = (
); + children = this.renderNoDevice(); } else { const loading = this.props.performingOperation; - - const { - onTogglePinProtection, - onTogglePassPhraseProtection, - onChangeHomeScreen, - onChangeLabel, - onWipeDevice, - onRecoverDevice, - onInitDevice, - onUpdateFirmware, - } = this; - - children = ( -
- ); + children = ; } return ( diff --git a/app/components/views/TrezorPage/ConfigButtons.js b/app/components/views/TrezorPage/ConfigButtons.js index 293979fb25..6661c1d81d 100644 --- a/app/components/views/TrezorPage/ConfigButtons.js +++ b/app/components/views/TrezorPage/ConfigButtons.js @@ -17,7 +17,7 @@ class ConfigButtons extends React.Component { ); const { loading, onTogglePinProtection, onTogglePassPhraseProtection, - onChangeHomeScreen } = this.props; + onChangeHomeScreen, onClearDeviceSession } = this.props; return ( + + + + ); diff --git a/app/components/views/TrezorPage/ConfigSections.js b/app/components/views/TrezorPage/ConfigSections.js new file mode 100644 index 0000000000..f456e9362f --- /dev/null +++ b/app/components/views/TrezorPage/ConfigSections.js @@ -0,0 +1,83 @@ +import ChangeLabel from "./ChangeLabel"; +import ConfigButtons from "./ConfigButtons"; +import RecoveryButtons from "./RecoveryButtons"; +import FirmwareUpdate from "./FirmwareUpdate"; + +@autobind +class TrezorConfigSections extends React.Component { + + constructor(props) { + super(props); + } + + onTogglePinProtection() { + this.props.togglePinProtection(); + } + + onTogglePassPhraseProtection() { + this.props.togglePassPhraseProtection(); + } + + onChangeHomeScreen() { + this.props.changeToDecredHomeScreen(); + } + + onChangeLabel(newLabel) { + this.props.changeLabel(newLabel); + } + + onWipeDevice() { + this.props.wipeDevice(); + } + + onRecoverDevice() { + this.props.recoverDevice(); + } + + onUpdateFirmware(path) { + this.props.updateFirmware(path); + } + + onInitDevice() { + this.props.initDevice(); + } + + onReloadDeviceList() { + this.props.reloadDeviceList(); + } + + onClearDeviceSession() { + this.props.clearDeviceSession(); + } + + render() { + const { + onTogglePinProtection, + onTogglePassPhraseProtection, + onChangeHomeScreen, + onChangeLabel, + onWipeDevice, + onRecoverDevice, + onInitDevice, + onUpdateFirmware, + onClearDeviceSession, + loading, + } = this; + + return ( + <> + + + + + + + + + ); + } + +} + +export default TrezorConfigSections; diff --git a/app/components/views/TrezorPage/NoDevicePage.js b/app/components/views/TrezorPage/NoDevicePage.js index 10ff56cb58..ca4e20bf28 100644 --- a/app/components/views/TrezorPage/NoDevicePage.js +++ b/app/components/views/TrezorPage/NoDevicePage.js @@ -1,11 +1,17 @@ import { FormattedMessage as T } from "react-intl"; import Header from "./Header"; import { StandalonePage } from "layout"; +import { InvisibleButton } from "buttons"; -export default () => ( +export default ({ onReloadDeviceList }) => ( }>
+
+ + + +
); diff --git a/app/components/views/TrezorPage/Page.js b/app/components/views/TrezorPage/Page.js index 7669fe68ef..85362fdf0b 100644 --- a/app/components/views/TrezorPage/Page.js +++ b/app/components/views/TrezorPage/Page.js @@ -1,23 +1,9 @@ import { StandalonePage } from "layout"; +import ConfigSections from "./ConfigSections"; import Header from "./Header"; -import ChangeLabel from "./ChangeLabel"; -import ConfigButtons from "./ConfigButtons"; -import RecoveryButtons from "./RecoveryButtons"; -import FirmwareUpdate from "./FirmwareUpdate"; -export default ({ - onTogglePinProtection, onTogglePassPhraseProtection, onChangeHomeScreen, - onChangeLabel, onWipeDevice, onRecoverDevice, onInitDevice, onUpdateFirmware, - loading, -}) => ( +export default props => ( }> - - - - - - - + ); diff --git a/app/components/views/TrezorPage/index.js b/app/components/views/TrezorPage/index.js index 3c27174e4f..02fca7729a 100644 --- a/app/components/views/TrezorPage/index.js +++ b/app/components/views/TrezorPage/index.js @@ -3,80 +3,10 @@ import Page from "./Page"; import NoDevicePage from "./NoDevicePage"; import "style/Trezor.less"; -@autobind -class TrezorPage extends React.Component { - - constructor(props) { - super(props); - } - - onTogglePinProtection() { - this.props.togglePinProtection(); - } - - onTogglePassPhraseProtection() { - this.props.togglePassPhraseProtection(); - } - - onChangeHomeScreen() { - this.props.changeToDecredHomeScreen(); - } - - onChangeLabel(newLabel) { - this.props.changeLabel(newLabel); - } - - onWipeDevice() { - this.props.wipeDevice(); - } - - onRecoverDevice() { - this.props.recoverDevice(); - } - - onUpdateFirmware(path) { - this.props.updateFirmware(path); - } - - onInitDevice() { - this.props.initDevice(); - } - - render() { - const { device } = this.props; - if (!device) return ; - - const loading = this.props.performingOperation; - - const { - onTogglePinProtection, - onTogglePassPhraseProtection, - onChangeHomeScreen, - onChangeLabel, - onWipeDevice, - onRecoverDevice, - onInitDevice, - onUpdateFirmware, - } = this; - - return ( - - ); - } -} +const TrezorPage = ({ device, reloadDeviceList, ...props }) => ( + !device + ? + : +); export default trezor(TrezorPage); diff --git a/app/connectors/trezor.js b/app/connectors/trezor.js index d7b6e0adba..98ab0b86f1 100644 --- a/app/connectors/trezor.js +++ b/app/connectors/trezor.js @@ -31,6 +31,8 @@ const mapDispatchToProps = dispatch => bindActionCreators({ initDevice: trza.initDevice, updateFirmware: trza.updateFirmware, enableTrezor: trza.enableTrezor, + reloadDeviceList: trza.reloadTrezorDeviceList, + clearDeviceSession: trza.clearDeviceSession, }, dispatch); export default connect(mapStateToProps, mapDispatchToProps); diff --git a/app/reducers/trezor.js b/app/reducers/trezor.js index bed30cb0b0..07dd3b566f 100644 --- a/app/reducers/trezor.js +++ b/app/reducers/trezor.js @@ -16,6 +16,7 @@ import { TRZ_INITDEVICE_ATTEMPT, TRZ_INITDEVICE_FAILED, TRZ_INITDEVICE_SUCCESS, TRZ_UPDATEFIRMWARE_ATTEMPT, TRZ_UPDATEFIRMWARE_FAILED, TRZ_UPDATEFIRMWARE_SUCCESS, TRZ_GETWALLETCREATIONMASTERPUBKEY_ATTEMPT, TRZ_GETWALLETCREATIONMASTERPUBKEY_FAILED, TRZ_GETWALLETCREATIONMASTERPUBKEY_SUCCESS, + TRZ_CLEAR_DEVICELIST } from "actions/TrezorActions"; import { SIGNTX_ATTEMPT, SIGNTX_FAILED, SIGNTX_SUCCESS @@ -27,6 +28,13 @@ export default function trezor(state = {}, action) { return { ...state, enabled: true, }; + case TRZ_CLEAR_DEVICELIST: + return { ...state, + deviceList: null, + transportError: false, + device: null, + getDeviceListAttempt: true, + }; case TRZ_LOADDEVICELIST_ATTEMPT: return { ...state, deviceList: null,