MyCrypto/common/containers/Tabs/SignAndVerifyMessage/components/VerifyMessage/index.tsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import translate from 'translations';
import { showNotification, TShowNotification } from 'actions/notifications';
import { verifySignedMessage, ISignedMessage } from 'libs/signing';
import './index.scss';
import { TextArea } from 'components/ui';

interface Props {
  showNotification: TShowNotification;
}

interface State {
  signature: string;
  verifiedAddress?: string;
  verifiedMessage?: string;
}

const initialState: State = {
  signature: ''
};

const signatureExample: ISignedMessage = {
  address: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8',
  msg: 'asdfasdfasdf',
  sig: '0x4771d78f13ba...',
  version: '2'
};
const signaturePlaceholder = JSON.stringify(signatureExample, null, 2);

export class VerifyMessage extends Component<Props, State> {
  public state: State = initialState;

  public render() {
    const { verifiedAddress, verifiedMessage, signature } = this.state;

    return (
      <div>
        <div className="Tab-content-pane">
          <div className="input-group-wrapper ">
            <label className="input-group">
              <div className="input-group-header">{translate('MSG_SIGNATURE')}</div>
              <TextArea
                className={`VerifyMessage-inputBox ${signature ? 'is-valid' : 'is-invalid'}`}
                placeholder={signaturePlaceholder}
                value={signature}
                onChange={this.handleSignatureChange}
                onPaste={this.handleSignaturePaste}
              />
            </label>
          </div>

          <button
            className="VerifyMessage-sign btn btn-primary btn-lg"
            onClick={this.handleVerifySignedMessage}
            disabled={false}
          >
            {translate('MSG_VERIFY')}
          </button>

          {!!verifiedAddress &&
            !!verifiedMessage && (
              <div className="VerifyMessage-success alert alert-success">
                <strong>{verifiedAddress}</strong> {translate('SIGNED')}
                <strong>{verifiedMessage}</strong>.
              </div>
            )}
        </div>
      </div>
    );
  }

  private clearVerifiedData = () =>
    this.setState({
      verifiedAddress: '',
      verifiedMessage: ''
    });

  private handleVerifySignedMessage = () => {
    try {
      const parsedSignature: ISignedMessage = JSON.parse(this.state.signature);

      if (!verifySignedMessage(parsedSignature)) {
        throw Error();
      }

      const { address, msg } = parsedSignature;
      this.setState({
        verifiedAddress: address,
        verifiedMessage: msg
      });
      this.props.showNotification('success', translate('SUCCESS_7'));
    } catch (err) {
      this.clearVerifiedData();
      this.props.showNotification('danger', translate('ERROR_12'));
    }
  };

  private handleSignatureChange = (e: React.FormEvent<HTMLTextAreaElement>) => {
    const signature = e.currentTarget.value;
    this.setState({ signature });
  };

  private handleSignaturePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
    const text = e.clipboardData.getData('Text');
    if (text) {
      try {
        const signature = JSON.stringify(JSON.parse(text), null, 2);
        this.setState({ signature });
        e.preventDefault();
      } catch (err) {
        // Do nothing, it wasn't json they pasted
      }
    }
  };
}

export default connect(null, {
  showNotification
})(VerifyMessage);