desktop#47 added basic trade view - still needs formatting and some f…

…ield adds

src/App.js

@@ -35,6 +35,7 @@ import Anchors from './components/Anchors'
 import Exchanges from './components/Exchanges'
 import Operations from './components/Operations'
 import Payments from './components/Payments'
+import Trades from './components/Trades'
 
 import {networks, Server} from './lib/stellar'
 import {hostnameToNetwork} from './lib/stellar/networks'
@@ -130,16 +131,17 @@ class App extends Component {
               <SponsoredLink />
               <Switch>
                 <Route exact path="/" component={Home} />
-                <Route path="/ledgers" component={Ledgers} />
-                <Route path="/ledger/:id" component={Ledger} />
-                <Route path="/txs" component={Transactions} />
-                <Route path="/tx/:id" component={Transaction} />
-                <Route path="/operations" component={Operations} />
                 <Route path="/accounts" component={Accounts} />
                 <Route path="/account/:id" component={Account} />
-                <Route path="/payments" component={Payments} />
                 <Route path="/anchors" component={Anchors} />
                 <Route path="/exchanges" component={Exchanges} />
+                <Route path="/ledgers" component={Ledgers} />
+                <Route path="/ledger/:id" component={Ledger} />
+                <Route path="/operations" component={Operations} />
+                <Route path="/payments" component={Payments} />
+                <Route path="/trades" component={Trades} />
+                <Route path="/txs" component={Transactions} />
+                <Route path="/tx/:id" component={Transaction} />
                 <Route
                   path="/search/:id"
                   render={({match}) => {

src/components/TradeTable.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {compose} from 'recompose'
+import Table from 'react-bootstrap/lib/Table'
+import {FormattedMessage} from 'react-intl'
+
+import mapKeys from 'lodash/mapKeys'
+import camelCase from 'lodash/camelCase'
+
+import AccountLink from './shared/AccountLink'
+import Asset from './shared/Asset'
+import {withDataFetchingContainer} from './shared/DataFetchingContainer'
+import {withPaging} from './shared/Paging'
+import {withSpinner} from './shared/Spinner'
+import TimeSynchronisedFormattedRelative from './shared/TimeSynchronizedFormattedRelative'
+
+const Trade = ({trade, parentRenderTimestamp}) => {
+  const Base = (
+    <div>
+      <AccountLink account={trade.baseAccount} /> {trade.baseAmount}{' '}
+      <Asset
+        code={trade.baseAssetCode}
+        issuer={trade.baseAssetIssuer}
+        type={trade.baseAssetType}
+      />
+    </div>
+  )
+  const Counter = (
+    <div>
+      <AccountLink account={trade.counterAccount} /> {trade.counterAmount}{' '}
+      <Asset
+        code={trade.counterAssetCode}
+        issuer={trade.counterAssetIssuer}
+        type={trade.counterAssetType}
+      />
+    </div>
+  )
+  return (
+    <tr key={trade.id} className="trade">
+      <td>{trade.baseIsSeller ? Base : Counter}</td>
+      <td>{trade.baseIsSeller ? Counter : Base}</td>
+      <td>
+        <span title={trade.time}>
+          <TimeSynchronisedFormattedRelative
+            initialNow={parentRenderTimestamp}
+            value={trade.time}
+          />
+        </span>
+      </td>
+    </tr>
+  )
+}
+
+const TradeTable = ({compact, server, parentRenderTimestamp, records}) => (
+  <Table id="trade-table" className="table-striped table-hover table-condensed">
+    <thead>
+      <tr>
+        <th>
+          <FormattedMessage id="Sell" />
+        </th>
+        <th>
+          <FormattedMessage id="Buy" />
+        </th>
+        <th>
+          <FormattedMessage id="time" />
+        </th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {records.map(trade => (
+        <Trade
+          key={trade.id}
+          compact={compact}
+          trade={trade}
+          parentRenderTimestamp={parentRenderTimestamp}
+        />
+      ))}
+    </tbody>
+  </Table>
+)
+
+TradeTable.propTypes = {
+  compact: PropTypes.bool,
+  parentRenderTimestamp: PropTypes.number,
+  records: PropTypes.array.isRequired,
+  server: PropTypes.object.isRequired,
+}
+
+const rspRecToPropsRec = record => {
+  record.time = record.ledger_close_time
+  return mapKeys(record, (v, k) => camelCase(k))
+}
+
+const fetchRecords = ({account, limit, server}) => {
+  const builder = server.trades()
+  if (account) builder.forAccount(account)
+  builder.limit(limit)
+  builder.order('desc')
+  return builder.call()
+}
+
+const callBuilder = props => props.server.trades()
+
+const enhance = compose(
+  withPaging(),
+  withDataFetchingContainer(fetchRecords, rspRecToPropsRec, callBuilder),
+  withSpinner()
+)
+
+export default enhance(TradeTable)

src/components/Trades.js

@@ -0,0 +1,23 @@
+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 {injectIntl} from 'react-intl'
+import TradeTable from './TradeTable'
+
+class Trades extends React.Component {
+  render() {
+    const {formatMessage} = this.props.intl
+    return (
+      <Grid>
+        <Row>
+          <Panel header={formatMessage({id: 'trades'})}>
+            <TradeTable compact={false} limit={50} usePaging />
+          </Panel>
+        </Row>
+      </Grid>
+    )
+  }
+}
+
+export default injectIntl(Trades)

src/lib/stellar/server.js

@@ -33,7 +33,6 @@ class WrappedServer extends sdk.Server {
   ledgerURL = id => `${this.serverURL}ledgers/${id}`
   opURL = id => `${this.serverURL}operations/${id}`
   txURL = id => `${this.serverURL}transactions/${id}`
-  paymentURL = id => `${this.serverURL}payments/${id}`
 
   //
   // Data fetching utilities