Update broadcast tx & add more transaction details in tx confirmation
This commit is contained in:
james-prado
parent
3dfc847c0f
commit
29662c603e
|
|
@ -8,5 +8,11 @@
|
|||
|
||||
.tx-modal-testnet-warn {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: $brand-warning;
|
||||
border-radius: 2px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
margin: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,12 +32,14 @@ class AddressesClass extends Component<StateProps> {
|
|||
<div className="tx-modal-address">
|
||||
<div className="tx-modal-address-from">
|
||||
{from && (
|
||||
<Identicon className="tx-modal-address-from-icon" size={size} address={from} />
|
||||
<React.Fragment>
|
||||
<Identicon className="tx-modal-address-from-icon" size={size} address={from} />
|
||||
<div className="tx-modal-address-from-content">
|
||||
<h5 className="tx-modal-address-from-title">From </h5>
|
||||
<h5 className="tx-modal-address-from-address small">{from}</h5>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<div className="tx-modal-address-from-content">
|
||||
<h5 className="tx-modal-address-from-title">From </h5>
|
||||
<h5 className="tx-modal-address-from-address small">{from}</h5>
|
||||
</div>
|
||||
</div>
|
||||
{isToken && (
|
||||
<div className="tx-modal-address-tkn-contract">
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@ import { SerializedTransaction } from 'components/renderCbs';
|
|||
import { AppState } from 'reducers';
|
||||
import { getNodeConfig } from 'selectors/config';
|
||||
import { connect } from 'react-redux';
|
||||
import { TokenValue } from 'libs/units';
|
||||
import { NodeConfig } from 'types/node';
|
||||
import translate from 'translations';
|
||||
import { Input } from 'components/ui';
|
||||
|
||||
interface StateProps {
|
||||
node: NodeConfig;
|
||||
|
|
@ -17,21 +18,25 @@ class DetailsClass extends Component<StateProps> {
|
|||
const { node: { network, service } } = this.props;
|
||||
return (
|
||||
<div className="tx-modal-details">
|
||||
<p className="tx-modal-details-network-info">
|
||||
Interacting with the {network} network provided by {service}
|
||||
</p>
|
||||
<label className="input-group">
|
||||
<div className="input-group-header">Network</div>
|
||||
<Input readOnly={true} value={`${network} network - provided by ${service}`} />
|
||||
</label>
|
||||
|
||||
<SerializedTransaction
|
||||
withSerializedTransaction={(_, fields) => {
|
||||
const { chainId, data, to, ...convertRestToBase10 } = fields;
|
||||
const base10Fields = Object.entries(convertRestToBase10).reduce(
|
||||
(convertedFields, [currName, currValue]) => ({
|
||||
...convertedFields,
|
||||
[currName]: TokenValue(currValue).toString()
|
||||
}),
|
||||
{} as typeof convertRestToBase10
|
||||
return (
|
||||
<React.Fragment>
|
||||
<label className="input-group">
|
||||
<div className="input-group-header">{translate('SEND_raw')}</div>
|
||||
<Code>{JSON.stringify({ ...fields }, null, 2)} </Code>
|
||||
</label>
|
||||
<label className="input-group">
|
||||
<div className="input-group-header">{translate('SEND_signed')}</div>
|
||||
<Code>{'0x' + _} </Code>
|
||||
</label>
|
||||
</React.Fragment>
|
||||
);
|
||||
return <Code>{JSON.stringify({ chainId, data, to, ...base10Fields }, null, 2)} </Code>;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ import './SendButton.scss';
|
|||
|
||||
export const SendButton: React.SFC<{
|
||||
className?: string;
|
||||
toggleDisabled?: boolean;
|
||||
signedTx?: boolean;
|
||||
customModal?: typeof ConfirmationModal;
|
||||
}> = ({ toggleDisabled, customModal, className }) => (
|
||||
}> = ({ signedTx, customModal, className }) => (
|
||||
<React.Fragment>
|
||||
<SendButtonFactory
|
||||
toggleDisabled={toggleDisabled}
|
||||
signedTx={signedTx}
|
||||
Modal={customModal ? customModal : ConfirmationModal}
|
||||
withProps={({ disabled, openModal, signTx }) => (
|
||||
<React.Fragment>
|
||||
|
|
@ -20,8 +20,7 @@ export const SendButton: React.SFC<{
|
|||
disabled={disabled}
|
||||
className={`SendButton btn btn-primary btn-block ${className}`}
|
||||
onClick={() => {
|
||||
signTx();
|
||||
openModal();
|
||||
signedTx ? openModal() : (signTx(), openModal());
|
||||
}}
|
||||
>
|
||||
{translate('SEND_trans')}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ interface StateProps {
|
|||
|
||||
interface OwnProps {
|
||||
onlyTransactionParameters?: boolean;
|
||||
toggleDisabled?: boolean;
|
||||
signedTx?: boolean;
|
||||
Modal: typeof ConfirmationModal;
|
||||
withProps(props: CallbackProps): React.ReactElement<any> | null;
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ type Props = StateProps & OwnProps;
|
|||
class SendButtonFactoryClass extends Component<Props> {
|
||||
public render() {
|
||||
const {
|
||||
toggleDisabled,
|
||||
signedTx,
|
||||
transaction,
|
||||
isFullTransaction,
|
||||
serializedTransaction,
|
||||
|
|
@ -54,8 +54,8 @@ class SendButtonFactoryClass extends Component<Props> {
|
|||
<OnlineSend
|
||||
withOnClick={({ openModal, signer }) =>
|
||||
this.props.withProps({
|
||||
disabled: toggleDisabled
|
||||
? !!(toggleDisabled && !serializedTransaction)
|
||||
disabled: signedTx
|
||||
? !!(signedTx && !serializedTransaction)
|
||||
: !isFullTransaction || networkRequestPending || !validGasPrice || !validGasLimit,
|
||||
signTx: () => signer(transaction),
|
||||
openModal
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ class BroadcastTx extends Component<Props> {
|
|||
</React.Fragment>
|
||||
)}
|
||||
|
||||
<SendButton className="form-group" toggleDisabled={true} />
|
||||
<SendButton className="form-group" signedTx={true} />
|
||||
|
||||
<div className="BroadcastTx-qr">
|
||||
{stateTransaction && <QRCode data={bufferToHex(stateTransaction)} />}
|
||||
|
|
|
|||
Loading…
Reference in New Issue