1  import React, { Component } from 'react';
 2  import { connect } from 'react-redux';
 3  import { isHexString } from 'ethereumjs-util';
 4  
 5  import { AppState } from 'features/reducers';
 6  import { transactionFieldsSelectors } from 'features/transaction';
 7  import { CallBackProps } from 'components/DataFieldFactory';
 8  import { Query } from 'components/renderCbs';
 9  
10  interface OwnProps {
11    withProps(props: CallBackProps): React.ReactElement<any> | null;
12    onChange(ev: React.FormEvent<HTMLInputElement>): void;
13  }
14  interface StateProps {
15    data: AppState['transaction']['fields']['data'];
16    validData: boolean;
17  }
18  
19  type Props = OwnProps & StateProps;
20  
21  class DataInputClass extends Component<Props> {
22    public render() {
23      const { data, onChange, validData } = this.props;
24      return (
25        <Query
26          params={['readOnly']}
27          withQuery={({ readOnly }) =>
28            this.props.withProps({ data, onChange, readOnly: !!readOnly, validData })
29          }
30        />
31      );
32    }
33  }
34  
35  export const DataInput = connect((state: AppState) => ({
36    data: transactionFieldsSelectors.getData(state),
37    validData:
38      transactionFieldsSelectors.getData(state).raw === '' ||
39      isHexString(transactionFieldsSelectors.getData(state).raw)
40  }))(DataInputClass);