1  import React from 'react';
  2  import {
  3    Card,
  4    CardHeader,
  5    CardBody,
  6    Row,
  7    Col,
  8    FormGroup,
  9    Input,
 10    Label,
 11    Button,
 12    Alert
 13  } from 'reactstrap';
 14  
 15  class SignAndVerify extends React.Component {
 16  
 17    constructor(props) {
 18      super(props);
 19      this.state = {
 20        selectedAccount: this.props.accounts[0].address,
 21        messageToSign: '',
 22        messageToVerify: ''
 23      };
 24    }
 25  
 26    handleAccountChange(event) {
 27      const selectedAccount = event.target.value;
 28      this.setState({...this.state, selectedAccount});
 29    }
 30  
 31    handleMessageChange(event) {
 32      const messageToSign = event.target.value;
 33      this.setState({...this.state, messageToSign});
 34    }
 35  
 36    handleSignatureChange(event) {
 37      const messageToVerify = event.target.value;
 38      this.setState({...this.state, messageToVerify});
 39    }
 40  
 41    render() {
 42      return (
 43        <Row className="justify-content-md-center">
 44          <Col xs="12" sm="9" lg="6">
 45            <Card>
 46              <CardHeader>
 47                <strong>Sign Message</strong>
 48              </CardHeader>
 49              <CardBody>
 50                <FormGroup>
 51                  <Label for="account">Select account</Label>
 52                  <Input type="select" name="select" id="account" defaultValue={this.state.selectedAccount} onChange={e => this.handleAccountChange(e)}>
 53                    {this.props.accounts.map(account => <option key={account.address}>{account.address}</option>)}
 54                  </Input>
 55                </FormGroup>
 56  
 57                <FormGroup>
 58                  <Label for="messageToSign">Message</Label>
 59                  <Input type="textarea" name="messageToSign" placeholder="Enter message" id="messageToSign" value={this.state.messageToSign} onChange={e => this.handleMessageChange(e)}/>
 60                </FormGroup>
 61                <Button type="button"
 62                        color="primary"
 63                        onClick={e => this.props.signMessage(this.state.messageToSign, this.state.selectedAccount)}
 64                        disabled={this.props.signaturePending}>Sign Message</Button> {this.props.signaturePending && <i className="fa fa-spinner fa-spin fa-fw"/>}
 65  
 66                {this.props.signedMessage &&
 67                  <Alert className="mt-3" color="info">
 68                    <p>Message signed! Your signature:</p>
 69                    <pre>{this.props.signedMessage}</pre>
 70                  </Alert>}
 71  
 72                {this.props.signatureError && <Alert className="mt-3" color="danger">Whoops! Something went wrong: {this.props.signatureError}</Alert>}
 73              </CardBody>
 74            </Card>
 75  
 76            <Card>
 77              <CardHeader>
 78                <strong>Verify Message</strong>
 79              </CardHeader>
 80              <CardBody>
 81                <FormGroup>
 82                  <Label for="messageToVerify">Message</Label>
 83                  <Input type="textarea" name="messageToVerify" placeholder="Enter signature" id="messageToVerify" value={this.state.messageToVerify} onChange={e => this.handleSignatureChange(e)}/>
 84                </FormGroup>
 85                <Button type="button"
 86                        color="primary"
 87                        onClick={e => this.props.verifyMessage(this.state.messageToVerify)}
 88                        disabled={this.props.verificationPending}>Verify Message</Button> {this.props.verificationPending && <i className="fa fa-spinner fa-spin fa-fw"/>}
 89  
 90                {this.props.verifiedAddress && <Alert className="mt-3" color="success"><p>Verified! Message was signed by:</p> {this.props.verifiedAddress}</Alert>}
 91                {this.props.verificationError && <Alert className="mt-3" color="danger">Whoops! Something went wrong: {this.props.verificationError}</Alert>}
 92              </CardBody>
 93            </Card>
 94          </Col>
 95        </Row>
 96      )
 97    }
 98  }
 99  
100  export default SignAndVerify;