diff --git a/common/Root.tsx b/common/Root.tsx index 90a0212d..c0c139c8 100644 --- a/common/Root.tsx +++ b/common/Root.tsx @@ -9,6 +9,7 @@ import Help from 'containers/Tabs/Help'; import SendTransaction from 'containers/Tabs/SendTransaction'; import Swap from 'containers/Tabs/Swap'; import ViewWallet from 'containers/Tabs/ViewWallet'; +import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage'; import BroadcastTx from 'containers/Tabs/BroadcastTx'; // TODO: fix this @@ -32,6 +33,10 @@ export default class Root extends Component { + diff --git a/common/components/Header/components/Navigation.tsx b/common/components/Header/components/Navigation.tsx index d20a3053..7b5d6775 100644 --- a/common/components/Header/components/Navigation.tsx +++ b/common/components/Header/components/Navigation.tsx @@ -28,6 +28,10 @@ const tabs = [ name: 'NAV_ENS', to: 'ens' }, + { + name: 'Sign & Verify Message', + to: 'sign-and-verify-message' + }, { name: 'Broadcast Transaction', to: 'pushTx' diff --git a/common/components/WalletDecrypt/Trezor.tsx b/common/components/WalletDecrypt/Trezor.tsx index 85a1766a..89907eb6 100644 --- a/common/components/WalletDecrypt/Trezor.tsx +++ b/common/components/WalletDecrypt/Trezor.tsx @@ -125,7 +125,5 @@ export default class TrezorDecrypt extends Component { this.props.onUnlock(new TrezorWallet(address, this.state.dPath, index)); }; - private handleNullConnect = (): void => { - return this.handleConnect(); - } + private handleNullConnect = (): void => this.handleConnect(); } diff --git a/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.scss b/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.scss new file mode 100644 index 00000000..9ec3dde7 --- /dev/null +++ b/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.scss @@ -0,0 +1,31 @@ +.SignMessage { + text-align: center; + padding-top: 30px; + + &-sign { + width: 100%; + } + + &-help { + margin-top: 10px; + font-size: 13px; + font-style: italic; + } + + &-inputBox { + min-height: 180px; + } + + &-error { + opacity: 0; + transition: none; + + &.is-showing { + opacity: 1; + } + } + + &-buy { + margin-top: 10px; + } +} \ No newline at end of file diff --git a/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.tsx b/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.tsx new file mode 100644 index 00000000..9e7f803d --- /dev/null +++ b/common/containers/Tabs/SignAndVerifyMessage/components/SignMessage/index.tsx @@ -0,0 +1,131 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import classnames from 'classnames'; +import { IWallet } from 'libs/wallet/IWallet'; +import WalletDecrypt from 'components/WalletDecrypt'; +import translate from 'translations'; +import { showNotification, TShowNotification } from 'actions/notifications'; +import { ISignedMessage } from 'libs/signing'; +import { AppState } from 'reducers'; +import './index.scss'; + +interface Props { + wallet: IWallet; + showNotification: TShowNotification; +} + +interface State { + message: string; + signMessageError: string; + signedMessage: ISignedMessage | null; +} + +const initialState: State = { + message: '', + signMessageError: '', + signedMessage: null +}; + +const messagePlaceholder = + 'This is a sweet message that you are signing to prove that you own the address you say you own.'; + +export class SignMessage extends Component { + public state: State = initialState; + + public render() { + const { wallet } = this.props; + const { message, signedMessage } = this.state; + + const messageBoxClass = classnames([ + 'SignMessage-inputBox', + 'form-control', + message ? 'is-valid' : 'is-invalid' + ]); + + return ( +
+
+

{translate('MSG_message')}

+
+