From 74847ee32398aed7bf4e1d917c63f603d1585777 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 11 Mar 2019 09:49:16 -0400
Subject: [PATCH] feat(cockpit/transaction): display a link for contracts and
 accounts

---
 .../embark-ui/src/components/Transaction.js   | 23 +++++++++++++++----
 .../src/containers/TransactionContainer.js    | 12 ++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/embark-ui/src/components/Transaction.js b/packages/embark-ui/src/components/Transaction.js
index f36a364d4..1c3f7496a 100644
--- a/packages/embark-ui/src/components/Transaction.js
+++ b/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="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
 };
 
diff --git a/packages/embark-ui/src/containers/TransactionContainer.js b/packages/embark-ui/src/containers/TransactionContainer.js
index 535f2c1fb..5951a83c8 100644
--- a/packages/embark-ui/src/containers/TransactionContainer.js
+++ b/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));