chatch#35 add inflation pools list view

src/App.js

@@ -39,6 +39,7 @@ import Payments from './components/Payments'
 import Trades from './components/Trades'
 import Assets from './components/Assets'
 import Effects from './components/Effects'
+import InflationPools from './components/InflationPools'
 
 import {networks, Server} from './lib/stellar'
 import {hostnameToNetwork} from './lib/stellar/networks'
@@ -148,6 +149,7 @@ class App extends Component {
                 <Route path="/trades" component={Trades} />
                 <Route path="/txs" component={Transactions} />
                 <Route path="/tx/:id" component={Transaction} />
+                <Route path="/pools" component={InflationPools} />
                 <Route
                   path="/search/:id"
                   render={({match}) => {

src/components/InflationPools.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import Grid from 'react-bootstrap/lib/Grid'
+import Panel from 'react-bootstrap/lib/Panel'
+import Row from 'react-bootstrap/lib/Row'
+import Table from 'react-bootstrap/lib/Table'
+import {FormattedMessage, injectIntl} from 'react-intl'
+import PropTypes from 'prop-types'
+
+import AccountLink from './shared/AccountLink'
+import Logo from './shared/Logo'
+import {titleWithJSONButton} from './shared/TitleWithJSONButton'
+
+import pools from '../data/inflation_pools.json'
+
+const METADATA_PATH =
+  'https://raw.githubusercontent.com/chatch/stellarexplorer/master/src/data/inflation_pools.json'
+
+const Pool = ({account, name, website}) => {
+  return (
+    <tr className="directoryRow">
+      <td>{name}</td>
+      <td>
+        <a href={website} target="_blank">
+          {website}
+        </a>
+      </td>
+      <td>
+        <AccountLink account={account} hideKnown />
+      </td>
+    </tr>
+  )
+}
+
+Pool.propTypes = {
+  account: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  website: PropTypes.string.isRequired,
+}
+
+class Pools extends React.Component {
+  render() {
+    const {formatMessage} = this.props.intl
+    const header = titleWithJSONButton(
+      formatMessage({id: 'inflation.pools'}),
+      METADATA_PATH
+    )
+    return (
+      <Grid>
+        <Row>
+          <Panel header={header}>
+            <Table>
+              <thead>
+                <tr>
+                  <th>
+                    <FormattedMessage id="name" />
+                  </th>
+                  <th>
+                    <FormattedMessage id="home" />
+                  </th>
+                  <th>
+                    <FormattedMessage id="account" />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(pools).map(key => {
+                  const pool = pools[key]
+                  return <Pool key={key} account={key} {...pool} />
+                })}
+              </tbody>
+            </Table>
+          </Panel>
+        </Row>
+      </Grid>
+    )
+  }
+}
+
+export default injectIntl(Pools)

src/components/OfferTable.js

@@ -25,7 +25,10 @@ class OfferTable extends React.Component {
 
   render() {
     const {records, showSeller} = this.props
-    if (records.length === 0) return <div>No Offers</div>
+
+    if (records.length === 0)
+      return <div style={{marginTop: 20, marginBottom: 20}}>No Offers</div>
+
     return (
       <Table
         id="offer-table"

src/components/layout/Header.js

@@ -100,6 +100,11 @@ class Header extends React.Component {
                   <FormattedMessage id="trades" />
                 </MenuItem>
               </LinkContainer>
+              <LinkContainer to="/pools">
+                <MenuItem>
+                  <FormattedMessage id="inflation.pools" />
+                </MenuItem>
+              </LinkContainer>
             </NavDropdown>
           </Nav>
         </Navbar.Collapse>

src/data/inflation_pools.json

@@ -0,0 +1,26 @@
+{
+  "GBL7AE2HGRNQSPWV56ZFLILXNT52QWSMOQGDBBXYOP7XKMQTCKVMX2ZL": {
+    "name": "futuretense.io",
+    "website": "https://pool.futuretense.io"
+  },
+  "GCCD6AJOYZCUAQLX32ZJF2MKFFAUJ53PVCFQI3RHWKL3V47QYE2BNAUT": {
+    "name": "Lumenaut",
+    "website": "https://lumenaut.net"
+  },
+  "GB56YLTH5SDOYTUGPWY5MXJ7VQTY7BEM2YVJZTN5O555VA6DJYCTY2MP": {
+    "name": "MoonPool",
+    "website": "https://moonpool.space"
+  },
+  "GAJOC4WSOL3VUHYTEQPSOY54LP3XDWBS3AEZZ4DH24NEOHBBMEQKK7I7": {
+    "name": "Stellar Pool",
+    "website": "https://stellarpool.net"
+  },
+  "GDCHDRSDOBRMSUDKRE2C4U4KDLNEATJPIHHR2ORFL5BSD56G4DQXL4VW": {
+    "name": "StellarTerm",
+    "website": "https://stellarterm.com"
+  },
+  "GA3FUYFOPWZ25YXTCA73RK2UGONHCO27OHQRSGV3VCE67UEPEFEDCOPA": {
+    "name": "XLMPOOL",
+    "website": "https://xlmpool.com"
+  }
+}

src/languages/en.json

@@ -44,6 +44,7 @@
   "home.domain": "Home Domain",
 
   "inflation": "Inflation Destination",
+  "inflation.pools": "Inflation Pools",
   "invalid.account": "Account is invalid",
   "issued": "issued",
   "issuer": "Issuer",