From 16469e1a6278f7d495036fcb6aff62408b56e46f Mon Sep 17 00:00:00 2001 From: anticlimactic <9568756+anticlimactic@users.noreply.github.com> Date: Mon, 12 Mar 2018 16:06:09 +1100 Subject: [PATCH] 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 --- common/components/SendButton.tsx | 8 +- .../SendButtonFactory/OnlineSend.tsx | 5 +- .../SendButtonFactory/SendButtonFactory.tsx | 91 +++++++++++++------ common/containers/Tabs/BroadcastTx/index.tsx | 2 +- 4 files changed, 70 insertions(+), 36 deletions(-) diff --git a/common/components/SendButton.tsx b/common/components/SendButton.tsx index 33501c91..392f2666 100644 --- a/common/components/SendButton.tsx +++ b/common/components/SendButton.tsx @@ -5,15 +5,17 @@ import { ConfirmationModal } from 'components/ConfirmationModal'; export const SendButton: React.SFC<{ onlyTransactionParameters?: boolean; + toggleDisabled?: boolean; customModal?: typeof ConfirmationModal; -}> = ({ onlyTransactionParameters, customModal }) => ( +}> = ({ onlyTransactionParameters, toggleDisabled, customModal }) => ( ( + withProps={({ disabled, onClick }) => (
-
diff --git a/common/components/SendButtonFactory/OnlineSend.tsx b/common/components/SendButtonFactory/OnlineSend.tsx index d41cb5de..490da007 100644 --- a/common/components/SendButtonFactory/OnlineSend.tsx +++ b/common/components/SendButtonFactory/OnlineSend.tsx @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import { getOffline } from 'selectors/config'; import { AppState } from 'reducers'; import { connect } from 'react-redux'; -import { CallbackProps } from '../SendButtonFactory'; import { getCurrentTransactionStatus, currentTransactionBroadcasted } from 'selectors/transaction'; import { showNotification, TShowNotification } from 'actions/notifications'; import { ITransactionStatus } from 'reducers/transaction/broadcast'; @@ -26,7 +25,7 @@ interface DispatchProps { interface OwnProps { Modal: typeof ConfirmationModal; - withProps(props: CallbackProps): React.ReactElement | null; + withOnClick(onClick: { onClick(): void }): React.ReactElement | null; } const INITIAL_STATE: State = { @@ -41,7 +40,7 @@ class OnlineSendClass extends Component { public render() { return !this.props.offline ? ( - {this.props.withProps({ onClick: this.openModal })} + {this.props.withOnClick({ onClick: this.openModal })} ) : null; diff --git a/common/components/SendButtonFactory/SendButtonFactory.tsx b/common/components/SendButtonFactory/SendButtonFactory.tsx index dfb815ec..1130a6d5 100644 --- a/common/components/SendButtonFactory/SendButtonFactory.tsx +++ b/common/components/SendButtonFactory/SendButtonFactory.tsx @@ -1,7 +1,6 @@ import translate from 'translations'; import { getTransactionFields, makeTransaction } from 'libs/transaction'; import { OfflineBroadcast } from './OfflineBroadcast'; -import { SerializedTransaction } from 'components/renderCbs'; import { OnlineSend } from './OnlineSend'; import { addHexPrefix } from 'ethereumjs-util'; import { getWalletType, IWalletType } from 'selectors/wallet'; @@ -10,60 +9,94 @@ import { connect } from 'react-redux'; import { AppState } from 'reducers'; import { ConfirmationModal } from 'components/ConfirmationModal'; import { TextArea } from 'components/ui'; +import { getSerializedTransaction } from 'selectors/transaction'; export interface CallbackProps { + disabled: boolean; onClick(): void; } interface StateProps { walletType: IWalletType; + serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction']; } interface OwnProps { onlyTransactionParameters?: boolean; + toggleDisabled?: boolean; Modal: typeof ConfirmationModal; withProps(props: CallbackProps): React.ReactElement | null; } -const getStringifiedTx = (serializedTransaction: string) => +const getStringifiedTx = (serializedTransaction: Buffer) => JSON.stringify(getTransactionFields(makeTransaction(serializedTransaction)), null, 2); type Props = StateProps & OwnProps; + class SendButtonFactoryClass extends Component { public render() { - const { onlyTransactionParameters } = this.props; + const { + onlyTransactionParameters, + serializedTransaction, + toggleDisabled, + walletType + } = this.props; const columnSize = onlyTransactionParameters ? 12 : 6; + + /* Left and right transaction comparision boxes, only displayed when a serialized transaction + exists in state */ + + // shows the json representation of the transaction + const leftTxCompare = serializedTransaction && ( +
+ +