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

packages/embark-ui/src/components/Transaction.js

@@ -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="Block" value={linkTemplate(`/explorer/blocks/${transaction.blockNumber}`, transaction.blockNumber)} />
-            <Description label="From" value={transaction.from} />
+            <Description label="From" value={getLink(contracts, accounts, transaction.from)} />
-            <Description label="To" value={transaction.to} />
+            <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
 };
 

packages/embark-ui/src/containers/TransactionContainer.js

@@ -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));