1  import React from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import translate from 'translations';
 5  import { AppState } from 'features/reducers';
 6  import { getOffline } from 'features/config';
 7  import { transactionNetworkActions, transactionNetworkSelectors } from 'features/transaction';
 8  import { Spinner, Input } from 'components/ui';
 9  import Help from 'components/ui/Help';
10  import { NonceFieldFactory } from 'components/NonceFieldFactory';
11  import './NonceField.scss';
12  
13  interface OwnProps {
14    alwaysDisplay: boolean;
15    showInvalidBeforeBlur?: boolean;
16  }
17  
18  interface StateProps {
19    isOffline: boolean;
20    noncePending: boolean;
21  }
22  
23  interface DispatchProps {
24    requestNonce: transactionNetworkActions.TGetNonceRequested;
25  }
26  
27  type Props = OwnProps & DispatchProps & StateProps;
28  
29  class NonceField extends React.Component<Props> {
30    public render() {
31      const {
32        alwaysDisplay,
33        showInvalidBeforeBlur,
34        requestNonce,
35        noncePending,
36        isOffline
37      } = this.props;
38      return (
39        <NonceFieldFactory
40          withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
41            return alwaysDisplay || shouldDisplay ? (
42              <div className="input-group-wrapper Nonce-label">
43                <label className="input-group">
44                  <div className="input-group-header">
45                    {translate('OFFLINE_STEP2_LABEL_5')}
46                    <Help
47                      size="x1"
48                      link="https://support.mycrypto.com/transactions/what-is-nonce.html"
49                    />
50                  </div>
51                  <Input
52                    isValid={!!value}
53                    className="Nonce-field-input"
54                    type="number"
55                    placeholder="7"
56                    value={raw}
57                    readOnly={readOnly}
58                    onChange={onChange}
59                    disabled={noncePending}
60                    showInvalidWithoutValue={true}
61                    showInvalidBeforeBlur={showInvalidBeforeBlur}
62                  />
63                  {noncePending ? (
64                    <div className="Nonce-spinner">
65                      <Spinner />
66                    </div>
67                  ) : (
68                    !isOffline && (
69                      <button className="Nonce-refresh" onClick={requestNonce}>
70                        <i className="fa fa-refresh" />
71                      </button>
72                    )
73                  )}
74                </label>
75              </div>
76            ) : null;
77          }}
78        />
79      );
80    }
81  }
82  
83  const mapStateToProps = (state: AppState): StateProps => {
84    return {
85      isOffline: getOffline(state),
86      noncePending: transactionNetworkSelectors.nonceRequestPending(state)
87    };
88  };
89  
90  export default connect(mapStateToProps, {
91    requestNonce: transactionNetworkActions.getNonceRequested
92  })(NonceField);