conflict in transactions

embark-ui/src/components/CardTitleIdenticon.js

@@ -1,9 +1,17 @@
+import PropTypes from "prop-types";
 import React from 'react';
 import {CardTitle} from 'reactstrap';
 import Blockies from 'react-blockies';
 
 const CardTitleIdenticon = ({id, children}) => (
-  <CardTitle><Blockies seed={id} className="rounded"/><span className="ml-2 align-top">{children}</span></CardTitle>
-)
+  <CardTitle>
+    <Blockies seed={id} className="rounded"/><span className="ml-2 align-top text-truncate">{children}</span>
+  </CardTitle>
+);
 
-export default CardTitleIdenticon
+CardTitleIdenticon.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.object
+};
+
+export default CardTitleIdenticon;

embark-ui/src/components/Explorer.css

@@ -7,3 +7,8 @@
 .dark-theme .explorer-row {
   border-bottom-color: #23282c;
 }
+
+.explorer-row .text-truncate {
+  width: 90%;
+  display: inline-block;
+}

embark-ui/src/components/Transactions.js

@@ -4,48 +4,54 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
+import LoadMore from "./LoadMore";
 
-const Transactions = ({transactions}) => (
+const Transactions = ({transactions, showLoadMore, loadMore}) => (
   <Row>
     <Col>
-      <h1>Transactions</h1>
-      {transactions.map(transaction => (
-        <Card key={transaction.hash}>
-          <CardHeader>
-            <CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
-              <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
-                {transaction.hash}
-              </Link>
-            </CardTitleIdenticon>
-          </CardHeader>
-          <CardBody>
-            <Row>
-              <Col>
-                <strong>Block number</strong>
-                <div>{transaction.blockNumber}</div>
-              </Col>
-              <Col>
-                <strong>From</strong>
-                <div>{transaction.from}</div>
-              </Col>
-              <Col>
-                <strong>To</strong>
-                <div>{transaction.to}</div>
-              </Col>
-              <Col>
-                <strong>Type</strong>
-                <div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
-              </Col>
-            </Row>
-          </CardBody>
-        </Card>
-      ))}
+      <Card>
+        <CardHeader>
+          <h1>Transactions</h1>
+        </CardHeader>
+        <CardBody>
+          {transactions.map(transaction => (
+            <div className="explorer-row" key={transaction.hash}>
+              <CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
+                <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
+                  {transaction.hash}
+                </Link>
+              </CardTitleIdenticon>
+              <Row>
+                <Col>
+                  <strong>Block number</strong>
+                  <div>{transaction.blockNumber}</div>
+                </Col>
+                <Col>
+                  <strong>From</strong>
+                  <div>{transaction.from}</div>
+                </Col>
+                <Col>
+                  <strong>To</strong>
+                  <div>{transaction.to}</div>
+                </Col>
+                <Col>
+                  <strong>Type</strong>
+                  <div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
+                </Col>
+              </Row>
+            </div>
+          ))}
+          {showLoadMore && <LoadMore loadMore={() => loadMore()} />}
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );
 
 Transactions.propTypes = {
-  transactions: PropTypes.arrayOf(PropTypes.object)
+  transactions: PropTypes.arrayOf(PropTypes.object),
+  showLoadMore: PropTypes.bool,
+  loadMore: PropTypes.func
 };
 
 export default Transactions;

embark-ui/src/containers/TransactionsContainer.js

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions';
+import Blocks from "../components/Blocks";
 import LoadMore from "../components/LoadMore";
 import Transactions from '../components/Transactions';
 import DataWrapper from "../components/DataWrapper";
@@ -34,9 +35,9 @@ class TransactionsContainer extends Component {
     return (
       <React.Fragment>
         <DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => (
-          <Transactions transactions={transactions} />
+          <Transactions transactions={transactions}
+                        showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
         )} />
-        {(this.loadMoreFrom() > 0) ? <LoadMore loadMore={() => this.loadMore()} /> : <React.Fragment />}
       </React.Fragment>
     );
   }