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