enable searching contracts

embark-ui/src/components/Account.js

@@ -13,7 +13,7 @@ const Account = ({account}) => (
           <CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>
         </CardHeader>
         <CardBody>
-          <dl class="row">
+          <dl className="row">
             <Description label="Balance" value={account.balance} />
             <Description label="Transaction count" value={account.transactionCount} />
           </dl>

embark-ui/src/components/Blocks.js

@@ -10,7 +10,7 @@ const Blocks = ({blocks}) => (
     <Col>
       <h1>Blocks</h1>
       {blocks.map(block => (
-        <Card>
+        <Card key={block.number}>
           <CardHeader>
             <Link to={`/embark/explorer/blocks/${block.number}`}> <CardTitleIdenticon id={block.hash}>Block {block.number}</CardTitleIdenticon></Link>
           </CardHeader>

embark-ui/src/components/Layout.js

@@ -10,7 +10,6 @@ import {LIGHT_THEME, DARK_THEME} from '../constants';
 import FontAwesome from 'react-fontawesome';
 
 import {
-  AppAside,
   AppFooter,
   AppHeader,
   AppSidebar,
@@ -79,6 +78,10 @@ class Layout extends React.Component {
         return true;
       }
 
+      if (nextProps.searchResult.className) {
+        this.props.history.push(`/embark/contracts/${nextProps.searchResult.className}/overview`);
+        return false;
+      }
       if (nextProps.searchResult.address) {
         this.props.history.push(`/embark/explorer/accounts/${nextProps.searchResult.address}`);
         return false;

embark-ui/src/components/Transaction.js

@@ -14,7 +14,7 @@ const Transaction = ({transaction}) => (
           <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
         </CardHeader>
         <CardBody>
-          <dl class="row">
+          <dl className="row">
             <Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
             <Description label="From" value={transaction.from} />
             <Description label="To" value={transaction.to} />

embark-ui/src/components/Transactions.js

@@ -10,7 +10,7 @@ const Transactions = ({transactions}) => (
     <Col>
       <h1>Transactions</h1>
       {transactions.map(transaction => (
-        <Card>
+        <Card key={transaction.hash}>
           <CardHeader>
             <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
               <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>

embark-ui/src/components/search.css

@@ -3,7 +3,7 @@
   border-bottom-right-radius: 0;
   outline: none;
   box-shadow: none;
-  width: 330px;
+  width: 245px;
   border: 1px solid #c8ced3;
   border-right: 0;
 }

embark-ui/src/containers/GasStationContainer.js

@@ -19,7 +19,7 @@ class GasStationContainer extends Component {
   }
 
   render() {
-    return <DataWrapper shouldRender={this.props.gasOracleStats && Object.keys(this.props.gasOracleStats).length && this.props.lastBlock}
+    return <DataWrapper shouldRender={Boolean(this.props.gasOracleStats && Object.keys(this.props.gasOracleStats).length && this.props.lastBlock)}
                         {...this.props} render={({lastBlock, gasOracleStats}) => (
       <GasStation gasOracleStats={gasOracleStats} lastBlock={lastBlock}/>
     )}/>;

embark-ui/src/sagas/searchSaga.js

@@ -1,6 +1,6 @@
 import {put, select} from "redux-saga/effects";
-import {getAccounts, getBlocks, getTransactions} from "../reducers/selectors";
+import {getAccounts, getBlocks, getTransactions, getContracts} from "../reducers/selectors";
-import {fetchAccounts, fetchBlocks, fetchTransactions} from "./index";
+import {fetchAccounts, fetchBlocks, fetchTransactions, fetchContracts} from "./index";
 
 export function *searchExplorer(entity, payload) {
   let result;
@@ -17,6 +17,17 @@ export function *searchExplorer(entity, payload) {
     return yield put(entity.success(result));
   }
 
+  // Contracts
+  yield fetchContracts({});
+  const contracts = yield select(getContracts);
+  result = contracts.find(contract => {
+    return contract.address === payload.searchValue;
+  });
+
+  if (result) {
+    return yield put(entity.success(result));
+  }
+
   // Blocks
   yield fetchBlocks({limit: SEARCH_LIMIT});
   const blocks = yield select(getBlocks);