85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import translate from 'translations';
|
|
import { AppState } from 'features/reducers';
|
|
import { getOffline } from 'features/config';
|
|
import { transactionNetworkActions, transactionNetworkSelectors } from 'features/transaction';
|
|
import { Spinner, Input } from 'components/ui';
|
|
import Help from 'components/ui/Help';
|
|
import { NonceFieldFactory } from 'components/NonceFieldFactory';
|
|
import './NonceField.scss';
|
|
|
|
interface OwnProps {
|
|
alwaysDisplay: boolean;
|
|
}
|
|
|
|
interface StateProps {
|
|
isOffline: boolean;
|
|
noncePending: boolean;
|
|
}
|
|
|
|
interface DispatchProps {
|
|
requestNonce: transactionNetworkActions.TGetNonceRequested;
|
|
}
|
|
|
|
type Props = OwnProps & DispatchProps & StateProps;
|
|
|
|
class NonceField extends React.Component<Props> {
|
|
public render() {
|
|
const { alwaysDisplay, requestNonce, noncePending, isOffline } = this.props;
|
|
return (
|
|
<NonceFieldFactory
|
|
withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
|
|
return alwaysDisplay || shouldDisplay ? (
|
|
<div className="input-group-wrapper Nonce-label">
|
|
<label className="input-group">
|
|
<div className="input-group-header">
|
|
{translate('OFFLINE_STEP2_LABEL_5')}
|
|
<Help
|
|
size="x1"
|
|
link="https://support.mycrypto.com/transactions/what-is-nonce.html"
|
|
/>
|
|
</div>
|
|
<Input
|
|
isValid={!!value}
|
|
className="Nonce-field-input"
|
|
type="number"
|
|
placeholder="7"
|
|
value={raw}
|
|
readOnly={readOnly}
|
|
onChange={onChange}
|
|
disabled={noncePending}
|
|
showInvalidWithoutValue={true}
|
|
/>
|
|
{noncePending ? (
|
|
<div className="Nonce-spinner">
|
|
<Spinner />
|
|
</div>
|
|
) : (
|
|
!isOffline && (
|
|
<button className="Nonce-refresh" onClick={requestNonce}>
|
|
<i className="fa fa-refresh" />
|
|
</button>
|
|
)
|
|
)}
|
|
</label>
|
|
</div>
|
|
) : null;
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState): StateProps => {
|
|
return {
|
|
isOffline: getOffline(state),
|
|
noncePending: transactionNetworkSelectors.nonceRequestPending(state)
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, {
|
|
requestNonce: transactionNetworkActions.getNonceRequested
|
|
})(NonceField);
|