Show Disabled Send Button on /pushtx (#1302)
* Fixes #1291. Implemented a new boolean that allows you to toggle whether you are using a disabled send tx button that persists or a send tx button that remains invisible until a valid transaction is present. * Fixed object shorthand precommit error. * Cleanup boolean logic, remove redundant code, make comparision elements more obvious
This commit is contained in:
parent
3d8f678887
commit
16469e1a62
|
@ -5,15 +5,17 @@ import { ConfirmationModal } from 'components/ConfirmationModal';
|
||||||
|
|
||||||
export const SendButton: React.SFC<{
|
export const SendButton: React.SFC<{
|
||||||
onlyTransactionParameters?: boolean;
|
onlyTransactionParameters?: boolean;
|
||||||
|
toggleDisabled?: boolean;
|
||||||
customModal?: typeof ConfirmationModal;
|
customModal?: typeof ConfirmationModal;
|
||||||
}> = ({ onlyTransactionParameters, customModal }) => (
|
}> = ({ onlyTransactionParameters, toggleDisabled, customModal }) => (
|
||||||
<SendButtonFactory
|
<SendButtonFactory
|
||||||
onlyTransactionParameters={!!onlyTransactionParameters}
|
onlyTransactionParameters={!!onlyTransactionParameters}
|
||||||
|
toggleDisabled={toggleDisabled}
|
||||||
Modal={customModal ? customModal : ConfirmationModal}
|
Modal={customModal ? customModal : ConfirmationModal}
|
||||||
withProps={({ onClick }) => (
|
withProps={({ disabled, onClick }) => (
|
||||||
<div className="row form-group">
|
<div className="row form-group">
|
||||||
<div className="col-xs-12">
|
<div className="col-xs-12">
|
||||||
<button className="btn btn-primary btn-block" onClick={onClick}>
|
<button disabled={disabled} className="btn btn-primary btn-block" onClick={onClick}>
|
||||||
{translate('SEND_trans')}
|
{translate('SEND_trans')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React, { Component } from 'react';
|
||||||
import { getOffline } from 'selectors/config';
|
import { getOffline } from 'selectors/config';
|
||||||
import { AppState } from 'reducers';
|
import { AppState } from 'reducers';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { CallbackProps } from '../SendButtonFactory';
|
|
||||||
import { getCurrentTransactionStatus, currentTransactionBroadcasted } from 'selectors/transaction';
|
import { getCurrentTransactionStatus, currentTransactionBroadcasted } from 'selectors/transaction';
|
||||||
import { showNotification, TShowNotification } from 'actions/notifications';
|
import { showNotification, TShowNotification } from 'actions/notifications';
|
||||||
import { ITransactionStatus } from 'reducers/transaction/broadcast';
|
import { ITransactionStatus } from 'reducers/transaction/broadcast';
|
||||||
|
@ -26,7 +25,7 @@ interface DispatchProps {
|
||||||
|
|
||||||
interface OwnProps {
|
interface OwnProps {
|
||||||
Modal: typeof ConfirmationModal;
|
Modal: typeof ConfirmationModal;
|
||||||
withProps(props: CallbackProps): React.ReactElement<any> | null;
|
withOnClick(onClick: { onClick(): void }): React.ReactElement<any> | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const INITIAL_STATE: State = {
|
const INITIAL_STATE: State = {
|
||||||
|
@ -41,7 +40,7 @@ class OnlineSendClass extends Component<Props, State> {
|
||||||
public render() {
|
public render() {
|
||||||
return !this.props.offline ? (
|
return !this.props.offline ? (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{this.props.withProps({ onClick: this.openModal })}
|
{this.props.withOnClick({ onClick: this.openModal })}
|
||||||
<this.props.Modal isOpen={this.state.showModal} onClose={this.closeModal} />
|
<this.props.Modal isOpen={this.state.showModal} onClose={this.closeModal} />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import translate from 'translations';
|
import translate from 'translations';
|
||||||
import { getTransactionFields, makeTransaction } from 'libs/transaction';
|
import { getTransactionFields, makeTransaction } from 'libs/transaction';
|
||||||
import { OfflineBroadcast } from './OfflineBroadcast';
|
import { OfflineBroadcast } from './OfflineBroadcast';
|
||||||
import { SerializedTransaction } from 'components/renderCbs';
|
|
||||||
import { OnlineSend } from './OnlineSend';
|
import { OnlineSend } from './OnlineSend';
|
||||||
import { addHexPrefix } from 'ethereumjs-util';
|
import { addHexPrefix } from 'ethereumjs-util';
|
||||||
import { getWalletType, IWalletType } from 'selectors/wallet';
|
import { getWalletType, IWalletType } from 'selectors/wallet';
|
||||||
|
@ -10,60 +9,94 @@ import { connect } from 'react-redux';
|
||||||
import { AppState } from 'reducers';
|
import { AppState } from 'reducers';
|
||||||
import { ConfirmationModal } from 'components/ConfirmationModal';
|
import { ConfirmationModal } from 'components/ConfirmationModal';
|
||||||
import { TextArea } from 'components/ui';
|
import { TextArea } from 'components/ui';
|
||||||
|
import { getSerializedTransaction } from 'selectors/transaction';
|
||||||
|
|
||||||
export interface CallbackProps {
|
export interface CallbackProps {
|
||||||
|
disabled: boolean;
|
||||||
onClick(): void;
|
onClick(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StateProps {
|
interface StateProps {
|
||||||
walletType: IWalletType;
|
walletType: IWalletType;
|
||||||
|
serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OwnProps {
|
interface OwnProps {
|
||||||
onlyTransactionParameters?: boolean;
|
onlyTransactionParameters?: boolean;
|
||||||
|
toggleDisabled?: boolean;
|
||||||
Modal: typeof ConfirmationModal;
|
Modal: typeof ConfirmationModal;
|
||||||
withProps(props: CallbackProps): React.ReactElement<any> | null;
|
withProps(props: CallbackProps): React.ReactElement<any> | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const getStringifiedTx = (serializedTransaction: string) =>
|
const getStringifiedTx = (serializedTransaction: Buffer) =>
|
||||||
JSON.stringify(getTransactionFields(makeTransaction(serializedTransaction)), null, 2);
|
JSON.stringify(getTransactionFields(makeTransaction(serializedTransaction)), null, 2);
|
||||||
|
|
||||||
type Props = StateProps & OwnProps;
|
type Props = StateProps & OwnProps;
|
||||||
|
|
||||||
class SendButtonFactoryClass extends Component<Props> {
|
class SendButtonFactoryClass extends Component<Props> {
|
||||||
public render() {
|
public render() {
|
||||||
const { onlyTransactionParameters } = this.props;
|
const {
|
||||||
|
onlyTransactionParameters,
|
||||||
|
serializedTransaction,
|
||||||
|
toggleDisabled,
|
||||||
|
walletType
|
||||||
|
} = this.props;
|
||||||
const columnSize = onlyTransactionParameters ? 12 : 6;
|
const columnSize = onlyTransactionParameters ? 12 : 6;
|
||||||
return (
|
|
||||||
<SerializedTransaction
|
/* Left and right transaction comparision boxes, only displayed when a serialized transaction
|
||||||
withSerializedTransaction={serializedTransaction => (
|
exists in state */
|
||||||
<React.Fragment>
|
|
||||||
|
// shows the json representation of the transaction
|
||||||
|
const leftTxCompare = serializedTransaction && (
|
||||||
<div className={`col-sm-${columnSize}`}>
|
<div className={`col-sm-${columnSize}`}>
|
||||||
<label>
|
<label>{walletType.isWeb3Wallet ? 'Transaction Parameters' : translate('SEND_raw')}</label>
|
||||||
{this.props.walletType.isWeb3Wallet
|
|
||||||
? 'Transaction Parameters'
|
|
||||||
: translate('SEND_raw')}
|
|
||||||
</label>
|
|
||||||
<TextArea value={getStringifiedTx(serializedTransaction)} rows={4} readOnly={true} />
|
<TextArea value={getStringifiedTx(serializedTransaction)} rows={4} readOnly={true} />
|
||||||
</div>
|
</div>
|
||||||
{!onlyTransactionParameters && (
|
);
|
||||||
|
|
||||||
|
// shows the serialized representation of the transaction
|
||||||
|
// "onlyTransactionParameters" used in broadcast tx so the same serialized tx isnt redundantly
|
||||||
|
// displayed
|
||||||
|
const rightTxCompare = serializedTransaction &&
|
||||||
|
!onlyTransactionParameters && (
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<label>
|
<label>
|
||||||
{this.props.walletType.isWeb3Wallet
|
{walletType.isWeb3Wallet
|
||||||
? 'Serialized Transaction Parameters'
|
? 'Serialized Transaction Parameters'
|
||||||
: translate('SEND_signed')}
|
: translate('SEND_signed')}
|
||||||
</label>
|
</label>
|
||||||
<TextArea value={addHexPrefix(serializedTransaction)} rows={4} readOnly={true} />
|
<TextArea
|
||||||
</div>
|
value={addHexPrefix(serializedTransaction.toString('hex'))}
|
||||||
)}
|
rows={4}
|
||||||
<OfflineBroadcast />
|
readOnly={true}
|
||||||
<OnlineSend withProps={this.props.withProps} Modal={this.props.Modal} />
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const shouldDisplayOnlineSend = toggleDisabled || serializedTransaction;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{leftTxCompare}
|
||||||
|
{rightTxCompare}
|
||||||
|
<OfflineBroadcast />
|
||||||
|
{shouldDisplayOnlineSend && (
|
||||||
|
<OnlineSend
|
||||||
|
withOnClick={({ onClick }) =>
|
||||||
|
this.props.withProps({
|
||||||
|
disabled: !!(toggleDisabled && !serializedTransaction),
|
||||||
|
onClick
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Modal={this.props.Modal}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SendButtonFactory = connect((state: AppState) => ({
|
export const SendButtonFactory = connect((state: AppState) => ({
|
||||||
walletType: getWalletType(state)
|
walletType: getWalletType(state),
|
||||||
|
serializedTransaction: getSerializedTransaction(state)
|
||||||
}))(SendButtonFactoryClass);
|
}))(SendButtonFactoryClass);
|
||||||
|
|
|
@ -66,7 +66,7 @@ class BroadcastTx extends Component<Props> {
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SendButton onlyTransactionParameters={true} />
|
<SendButton toggleDisabled={true} onlyTransactionParameters={true} />
|
||||||
|
|
||||||
<div className="BroadcastTx-qr">
|
<div className="BroadcastTx-qr">
|
||||||
{stateTransaction && <QRCode data={bufferToHex(stateTransaction)} />}
|
{stateTransaction && <QRCode data={bufferToHex(stateTransaction)} />}
|
||||||
|
|
Loading…
Reference in New Issue