diff --git a/src/App.js b/src/App.js index 5b349ea4e..c34cd03da 100644 --- a/src/App.js +++ b/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 { - - - - - - + + + + + + + { diff --git a/src/components/TradeTable.js b/src/components/TradeTable.js new file mode 100644 index 000000000..e3745ea25 --- /dev/null +++ b/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 = ( +
+ {trade.baseAmount}{' '} + +
+ ) + const Counter = ( +
+ {trade.counterAmount}{' '} + +
+ ) + return ( + + {trade.baseIsSeller ? Base : Counter} + {trade.baseIsSeller ? Counter : Base} + + + + + + + ) +} + +const TradeTable = ({compact, server, parentRenderTimestamp, records}) => ( + + + + + + + + + + {records.map(trade => ( + + ))} + +
+ + + + + + +
+) + +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) diff --git a/src/components/Trades.js b/src/components/Trades.js new file mode 100644 index 000000000..4def0b8c5 --- /dev/null +++ b/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 ( + + + + + + + + ) + } +} + +export default injectIntl(Trades) diff --git a/src/lib/stellar/server.js b/src/lib/stellar/server.js index 8595136a3..799ea8dff 100644 --- a/src/lib/stellar/server.js +++ b/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