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,21 +4,23 @@ 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}>
+      <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>
-          </CardHeader>
-          <CardBody>
               <Row>
                 <Col>
                   <strong>Block number</strong>
@@ -37,15 +39,19 @@ const Transactions = ({transactions}) => (
                   <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>
     );
   }