Cleanup boolean logic, remove redundant code, make comparision elements more obvious
This commit is contained in:
parent
46ccc15665
commit
4ba0b77572
|
@ -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';
|
||||
|
@ -19,7 +18,7 @@ export interface CallbackProps {
|
|||
|
||||
interface StateProps {
|
||||
walletType: IWalletType;
|
||||
stateTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
|
||||
serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
|
||||
}
|
||||
|
||||
interface OwnProps {
|
||||
|
@ -29,73 +28,75 @@ interface OwnProps {
|
|||
withProps(props: CallbackProps): React.ReactElement<any> | null;
|
||||
}
|
||||
|
||||
const getStringifiedTx = (serializedTransaction: string) =>
|
||||
const getStringifiedTx = (serializedTransaction: Buffer) =>
|
||||
JSON.stringify(getTransactionFields(makeTransaction(serializedTransaction)), null, 2);
|
||||
|
||||
type Props = StateProps & OwnProps;
|
||||
|
||||
class SendButtonFactoryClass extends Component<Props> {
|
||||
public render() {
|
||||
const { onlyTransactionParameters, stateTransaction, toggleDisabled } = 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 && (
|
||||
<div className={`col-sm-${columnSize}`}>
|
||||
<label>{walletType.isWeb3Wallet ? 'Transaction Parameters' : translate('SEND_raw')}</label>
|
||||
<TextArea value={getStringifiedTx(serializedTransaction)} rows={4} readOnly={true} />
|
||||
</div>
|
||||
);
|
||||
|
||||
// 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">
|
||||
<label>
|
||||
{walletType.isWeb3Wallet
|
||||
? 'Serialized Transaction Parameters'
|
||||
: translate('SEND_signed')}
|
||||
</label>
|
||||
<TextArea
|
||||
value={addHexPrefix(serializedTransaction.toString('hex'))}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const shouldDisplayOnlineSend = toggleDisabled || serializedTransaction;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SerializedTransaction
|
||||
withSerializedTransaction={serializedTransaction => (
|
||||
<React.Fragment>
|
||||
<div className={`col-sm-${columnSize}`}>
|
||||
<label>
|
||||
{this.props.walletType.isWeb3Wallet
|
||||
? 'Transaction Parameters'
|
||||
: translate('SEND_raw')}
|
||||
</label>
|
||||
<TextArea
|
||||
value={getStringifiedTx(serializedTransaction)}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
{!onlyTransactionParameters && (
|
||||
<div className="col-sm-6">
|
||||
<label>
|
||||
{this.props.walletType.isWeb3Wallet
|
||||
? 'Serialized Transaction Parameters'
|
||||
: translate('SEND_signed')}
|
||||
</label>
|
||||
<TextArea value={addHexPrefix(serializedTransaction)} rows={4} readOnly={true} />
|
||||
</div>
|
||||
)}
|
||||
<OfflineBroadcast />
|
||||
{!toggleDisabled ? (
|
||||
<OnlineSend
|
||||
withOnClick={({ onClick }) =>
|
||||
this.props.withProps({
|
||||
disabled: toggleDisabled ? (stateTransaction !== null ? false : true) : false,
|
||||
onClick
|
||||
})
|
||||
}
|
||||
Modal={this.props.Modal}
|
||||
/>
|
||||
) : null}
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
{toggleDisabled ? (
|
||||
<>
|
||||
{leftTxCompare}
|
||||
{rightTxCompare}
|
||||
<OfflineBroadcast />
|
||||
{shouldDisplayOnlineSend && (
|
||||
<OnlineSend
|
||||
withOnClick={({ onClick }) =>
|
||||
this.props.withProps({
|
||||
disabled: toggleDisabled ? (stateTransaction !== null ? false : true) : false,
|
||||
disabled: !!(toggleDisabled && !serializedTransaction),
|
||||
onClick
|
||||
})
|
||||
}
|
||||
Modal={this.props.Modal}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const SendButtonFactory = connect((state: AppState) => ({
|
||||
walletType: getWalletType(state),
|
||||
stateTransaction: getSerializedTransaction(state)
|
||||
serializedTransaction: getSerializedTransaction(state)
|
||||
}))(SendButtonFactoryClass);
|
||||
|
|
Loading…
Reference in New Issue