embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(cockpit/transaction): display a link for contracts and accounts

This commit is contained in:
Jonathan Rainville 2019-03-11 09:49:16 -04:00 committed by Iuri Matias
parent 236f6e63e2
commit 74847ee323
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/embark-ui/src/components/Transaction.js
View File

@ -8,8 +8,22 @@ import Description from './Description';
import CardTitleIdenticon from './CardTitleIdenticon';
import {utils} from 'web3';
function linkTemplate(to, text) {
return <Link to={to}>{text}</Link>
}
const Transaction = ({transaction, contracts}) => (
function getLink(contracts, accounts, address) {
if (accounts.find(account => account.address === address)) {
return linkTemplate(`/explorer/accounts/${address}`, address);
}
const contract = contracts.find(contract => contract.deployedAddress === address);
if (contract) {
return linkTemplate(`/explorer/contracts/${contract.className}`, address);
}
return address
}
const Transaction = ({transaction, contracts, accounts}) => (
<Row>
<Col>
<Card>
@ -23,9 +37,9 @@ const Transaction = ({transaction, contracts}) => (
</CardHeader>
<CardBody>
<dl className="row">
<Description label="Block" value={<Link to={`/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
<Description label="From" value={transaction.from} />
<Description label="To" value={transaction.to} />
<Description label="Block" value={linkTemplate(`/explorer/blocks/${transaction.blockNumber}`, transaction.blockNumber)} />
<Description label="From" value={getLink(contracts, accounts, transaction.from)} />
<Description label="To" value={getLink(contracts, accounts, transaction.to)} />
<Description label="Value" value={`${utils.fromWei(transaction.value)} Ether`}/>
<Description label="Input" value={transaction.input} />
<Description label="Gas" value={transaction.gas} />
@ -40,6 +54,7 @@ const Transaction = ({transaction, contracts}) => (
Transaction.propTypes = {
contracts: PropTypes.arrayOf(PropTypes.object),
accounts: PropTypes.arrayOf(PropTypes.object),
transaction: PropTypes.object
};

12
packages/embark-ui/src/containers/TransactionContainer.js
View File

@ -3,15 +3,16 @@ import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';
import {transaction as transactionAction, contracts as contractsAction} from '../actions';
import {transaction as transactionAction, contracts as contractsAction, accounts as accountsAction} from '../actions';
import Transaction from '../components/Transaction';
import DataWrapper from "../components/DataWrapper";
import PageHead from "../components/PageHead";
import {getTransaction, getContracts} from "../reducers/selectors";
import {getTransaction, getContracts, getAccounts} from "../reducers/selectors";
class TransactionContainer extends Component {
componentDidMount() {
this.props.fetchContracts();
this.props.fetchAccounts();
this.props.fetchTransaction(this.props.match.params.hash);
}
@ -20,7 +21,7 @@ class TransactionContainer extends Component {
<React.Fragment>
<PageHead title={`Transaction ${this.props.match.params.hash}`} description={`View details of transaction ${this.props.match.params.hash}`} />
<DataWrapper shouldRender={this.props.transaction !== undefined } {...this.props} render={({transaction}) => (
<Transaction contracts={this.props.contracts} transaction={transaction} />
<Transaction contracts={this.props.contracts} transaction={transaction} accounts={this.props.accounts} />
)} />
</React.Fragment>
);
@ -31,6 +32,7 @@ function mapStateToProps(state, props) {
return {
transaction: getTransaction(state, props.match.params.hash),
contracts: getContracts(state),
accounts: getAccounts(state),
error: state.errorMessage,
loading: state.loading
};
@ -40,6 +42,7 @@ TransactionContainer.propTypes = {
match: PropTypes.object,
transaction: PropTypes.object,
contracts: PropTypes.arrayOf(PropTypes.object),
accounts: PropTypes.arrayOf(PropTypes.object),
fetchContracts: PropTypes.func,
fetchTransaction: PropTypes.func,
error: PropTypes.string
@ -49,6 +52,7 @@ export default withRouter(connect(
mapStateToProps,
{
fetchContracts: contractsAction.request,
fetchTransaction: transactionAction.request
fetchTransaction: transactionAction.request,
fetchAccounts: accountsAction.request
}
)(TransactionContainer));