Adding Epoch Search.

Fixing TransactionItem scss.
Fix fragment definition on FullBlockInfo

Author: afposchenrieder

examples/explorer/package.json

@@ -14,7 +14,7 @@
   "private": true,
   "dependencies": {
     "@reach/router": "1.2.1",
-    "big.js": "^5.2.2",
+    "big.js": "5.2.2",
     "bootstrap": "4.3.1",
     "graphql": "14.5.8",
     "node-sass": "4.12.0",

examples/explorer/src/components/Blocks/EpochBlockTable/EpochBlockTable.jsx

@@ -11,6 +11,10 @@ import { blocksFromBlockConnection } from '../../../helpers/blockHelper';
 // TODO: Think on some way of extract shared code between EpochBlockTable and BlockPagedTable
 const EpochBlockTable = ({ epoch, relay }) => {
   const [start, setStart] = useState(1);
+  if (!epoch.blocks) {
+    return null;
+  }
+
   const blocks = blocksFromBlockConnection(epoch.blocks);
   const { pageInfo } = epoch.blocks;
 

examples/explorer/src/components/Blocks/FullBlockInfo/FullBlockInfo.jsx

@@ -25,17 +25,7 @@ const FullBlockInfo = ({ block }) => {
 export default createFragmentContainer(FullBlockInfo, {
   block: graphql`
     fragment FullBlockInfo_block on Block {
-      id
-      date {
-        epoch {
-          id
-        }
-        slot
-      }
-      chainLength
-      previousBlock {
-        id
-      }
+      ...BlockInfo_block
       transactions {
         ...TransactionTable_transactions
       }

examples/explorer/src/components/Epochs/EpochInfo/EpochInfo.jsx

@@ -13,7 +13,7 @@ const EpochInfo = ({ epoch }) => {
   if (!epoch) {
     return <EmptyResult {...{ entityName: 'Epoch' }} />;
   }
-  const { blocks } = epoch;
+  const { blocks, firstBlock, lastBlock } = epoch;
 
   return (
     <div className="epochInfo">
@@ -30,15 +30,11 @@ const EpochInfo = ({ epoch }) => {
             </tr>
             <tr>
               <td>First Block:</td>
-              <td>
-                <BlockLink id={epoch.firstBlock.id} />
-              </td>
+              <td>{firstBlock && <BlockLink id={firstBlock.id} />}</td>
             </tr>
             <tr>
               <td>Last Block:</td>
-              <td>
-                <BlockLink id={epoch.lastBlock.id} />
-              </td>
+              <td>{lastBlock && <BlockLink id={lastBlock.id} />}</td>
             </tr>
             <tr>
               <td>Blocks count:</td>

examples/explorer/src/components/Epochs/FullEpochInfo/FullEpochInfo.jsx

@@ -17,7 +17,6 @@ const FullEpochInfo = ({ epoch }) => {
   return (
     <div className="fullEpochInfo">
       <EpochInfo {...{ epoch }} />
-      <h3>Blocks</h3>
       <EpochBlockTable {...{ epoch }} />
     </div>
   );

examples/explorer/src/components/Search/SearchBar/SearchBar.jsx

@@ -8,6 +8,12 @@ import Button from 'react-bootstrap/Button';
 import './searchBar.scss';
 import { isBlockNumber } from '../../../helpers/blockHelper';
 
+const onEpochSearchClick = searchValue => {
+  const baseUrl = 'epoch';
+
+  navigate(`/${baseUrl}/${searchValue}`);
+};
+
 const onBlockSearchClick = searchValue => {
   let baseUrl = 'block';
 
@@ -42,6 +48,9 @@ const Search = () => {
             placeholder="Search by block hash, chain length and transaction hash..."
           />
           <ButtonGroup>
+            <Button variant="primary" onClick={() => onEpochSearchClick(searchValue)}>
+              Epoch
+            </Button>
             <Button variant="primary" onClick={() => onBlockSearchClick(searchValue)}>
               Block
             </Button>

examples/explorer/src/components/Transactions/TransactionItem/transactionItem.scss

@@ -7,5 +7,8 @@
   flex-direction: row;
   justify-content: space-between;
   padding: 1%;
+  div {
+    padding: 1% 0%;
+  }
   box-shadow: 0 0 4px 0px grey;
 }