From b89a82507775f21a59767e1131f2ffdbbbfd36ba Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 17 Oct 2018 17:57:21 +0200 Subject: [PATCH] Added sign response, style --- src/actions/SignVerifyActions.js | 45 ++++++++++++++----- src/actions/constants/signVerify.js | 4 +- src/components/inputs/Input/index.js | 7 ++- src/reducers/ReceiveReducer.js | 1 - src/reducers/SignVerifyReducer.js | 13 +++--- src/reducers/index.js | 2 + .../views/Account/SignVerify/Container.js | 2 +- .../Wallet/views/Account/SignVerify/index.js | 18 ++++++-- 8 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/actions/SignVerifyActions.js b/src/actions/SignVerifyActions.js index 29207cce..51cc1ed8 100644 --- a/src/actions/SignVerifyActions.js +++ b/src/actions/SignVerifyActions.js @@ -1,25 +1,48 @@ /* @flow */ import TrezorConnect from 'trezor-connect'; - -import type { - GetState, - Dispatch, -} from 'flowtype'; +import type { GetState, Dispatch } from 'flowtype'; +import * as NOTIFICATION from 'actions/constants/notification'; +import * as SIGN_VERIFY from './constants/signVerify'; export const sign = (path: Array, message: string, hex: boolean = false): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise => { const selected = getState().wallet.selectedDevice; const devicePath = selected.path; - const device = { path: devicePath, instance: selected.instance, state: selected.state, }; - const response = await TrezorConnect - .ethereumSignMessage({ - device, path, hex, message, useEmptyPassphrase: selected.useEmptyPassphrase, - }); + const response = await TrezorConnect.ethereumSignMessage({ + device, + path, + hex, + message, + useEmptyPassphrase: selected.useEmptyPassphrase, + }); - console.log(response); + if (response && response.success) { + dispatch({ + type: SIGN_VERIFY.SIGN_SUCCESS, + signature: response.payload.signature, + }); + } else { + dispatch({ + type: NOTIFICATION.ADD, + payload: { + type: 'error', + title: 'Signing error', + message: response.payload.error, + cancelable: true, + actions: [ + { + label: 'Try again', + callback: () => { + dispatch(() => {}); + }, + }, + ], + }, + }); + } }; \ No newline at end of file diff --git a/src/actions/constants/signVerify.js b/src/actions/constants/signVerify.js index fc9e933b..3e1d8838 100644 --- a/src/actions/constants/signVerify.js +++ b/src/actions/constants/signVerify.js @@ -1,4 +1,4 @@ /* @flow */ -export const SIGN: 'send__init' = 'send__init'; -export const VERYFI: 'send__change' = 'send__change'; +export const SIGN_SUCCESS: 'sign__verify__sign__success' = 'sign__verify__sign__success'; +export const VERIFY_SUCCESS: 'sign__verify__verify__success' = 'sign__verify__verify__success'; \ No newline at end of file diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index a5e11ee8..316f483a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -38,9 +38,9 @@ const StyledInput = styled.input` padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; line-height: 1.42857143; - font-size: ${FONT_SIZE.SMALL}; + font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALLER}` : `${FONT_SIZE.SMALL}`)}; font-weight: ${FONT_WEIGHT.BASE}; - color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; + color: ${props => (props.color ? props.color : colors.TEXT)}; border-radius: 2px; ${props => props.hasAddon && css` @@ -52,6 +52,7 @@ const StyledInput = styled.input` background-color: ${colors.WHITE}; transition: ${TRANSITION.HOVER}; + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; @@ -114,6 +115,7 @@ class Input extends PureComponent { /> )} 0} innerRef={this.props.innerRef} hasAddon={!!this.props.sideAddons} @@ -163,6 +165,7 @@ Input.propTypes = { sideAddons: PropTypes.arrayOf(PropTypes.node), isDisabled: PropTypes.bool, name: PropTypes.string, + isSmallText: PropTypes.string, }; Input.defaultProps = { diff --git a/src/reducers/ReceiveReducer.js b/src/reducers/ReceiveReducer.js index 45ba0ff6..2c74ad9a 100644 --- a/src/reducers/ReceiveReducer.js +++ b/src/reducers/ReceiveReducer.js @@ -6,7 +6,6 @@ import * as RECEIVE from 'actions/constants/receive'; import * as ACCOUNT from 'actions/constants/account'; import type { Action } from 'flowtype'; - export type State = { addressVerified: boolean; addressUnverified: boolean; diff --git a/src/reducers/SignVerifyReducer.js b/src/reducers/SignVerifyReducer.js index 7c8eb539..d6e289f9 100644 --- a/src/reducers/SignVerifyReducer.js +++ b/src/reducers/SignVerifyReducer.js @@ -3,21 +3,24 @@ import type { Action } from 'flowtype'; import type { NetworkToken } from './LocalStorageReducer'; +import { SIGN_SUCCESS } from '../actions/constants/signVerify'; + export type State = { details: boolean; selectedToken: ?NetworkToken; } -const SIGN = 'sign'; - export const initialState: State = { - + signature: null, }; export default (state: State = initialState, action: Action): State => { switch (action.type) { - case SIGN.SUCCESS: - return initialState; + case SIGN_SUCCESS: + return { + ...state, + signature: state.signature, + }; default: return state; diff --git a/src/reducers/index.js b/src/reducers/index.js index a4955da5..51a8f5d8 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -20,6 +20,7 @@ import fiat from 'reducers/FiatRateReducer'; import wallet from 'reducers/WalletReducer'; import devices from 'reducers/DevicesReducer'; import blockchain from 'reducers/BlockchainReducer'; +import signVerifyReducer from 'reducers/SignVerifyReducer'; const reducers = { router: routerReducer, @@ -41,6 +42,7 @@ const reducers = { wallet, devices, blockchain, + signVerifyReducer, }; export type Reducers = typeof reducers; diff --git a/src/views/Wallet/views/Account/SignVerify/Container.js b/src/views/Wallet/views/Account/SignVerify/Container.js index 3a25ec83..af7c1871 100644 --- a/src/views/Wallet/views/Account/SignVerify/Container.js +++ b/src/views/Wallet/views/Account/SignVerify/Container.js @@ -22,7 +22,7 @@ export type Props = StateProps & DispatchProps; const mapStateToProps: MapStateToProps = (state: State): StateProps => ({ selectedAccount: state.selectedAccount, - sendForm: state.sendForm, + signature: state.signature, wallet: state.wallet, fiat: state.fiat, localStorage: state.localStorage, diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 87c482fa..1d5ef18d 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -69,13 +69,21 @@ class SignVerify extends Component { return this.props.selectedAccount.account.addressPath; } + getAddress() { + let result = null; + const { selectedAccount } = this.props; + if (selectedAccount.account && selectedAccount.account.address) { + result = selectedAccount.account.address; + } + return result || 'loading...'; + } + handleSignInput = (e) => { this.setState({ sign: { [e.target.name]: e.target.value } }); } handleVerifyInput = (e) => { this.setState({ verify: { [e.target.name]: e.target.value } }); - console.log(this.state); } clearSign = () => { @@ -109,11 +117,12 @@ class SignVerify extends Component { @@ -134,7 +143,7 @@ class SignVerify extends Component { onChange={this.handleSign} rows="2" maxLength="255" - disabled + isDisabled /> @@ -157,6 +166,7 @@ class SignVerify extends Component { value={this.state.verify.address} onChange={this.handleVerifyInput} type="text" + isSmallText />