Skip to content

Commit

Permalink
pi-apps#53 add trades tab to Account view
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Hatch committed Jul 14, 2018
1 parent 60bff28 commit 03f3002
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 65 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ Local: http://localhost:3000
| Balances Tab | [/account/stellar\*fed.network#balances](https://steexp.com/account/stellar*fed.network#balances) |
| Payments Tab | [/account/stellar\*fed.network#payments](https://steexp.com/account/stellar*fed.network#payments) |
| Offers Tab | [/account/stellar\*fed.network#offers](https://steexp.com/account/stellar*fed.network#offers) |
| Trades Tab | [/account/stellar\*fed.network#trades](https://steexp.com/account/stellar*fed.network#trades) |
| Effects Tab | [/account/stellar\*fed.network#effects](https://steexp.com/account/stellar*fed.network#effects) |
| Operations Tab | [/account/stellar\*fed.network#operations](https://steexp.com/account/stellar*fed.network#operations) |
| Transactions Tab | [/account/stellar\*fed.network#transactions](https://steexp.com/account/stellar*fed.network#transactions) |
Expand Down
13 changes: 11 additions & 2 deletions src/components/Account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,12 @@ import AccountLink from './shared/AccountLink'
import Asset from './shared/Asset'
import ClipboardCopy from './shared/ClipboardCopy'
import EffectTable from './EffectTable'
import FormattedAmount from './shared/FormattedAmount'
import Logo from './shared/Logo'
import OperationTable from './OperationTable'
import OfferTable from './OfferTable'
import PaymentTable from './PaymentTable'
import TradeTable from './TradeTable'
import TransactionTable from './TransactionTableContainer'

const stellarAddressFromURI = () => {
Expand Down Expand Up @@ -60,7 +62,9 @@ const NameValueTable = ({data, decodeValue = false}) => {
<td>
{typeof data[key] === 'boolean'
? data[key].toString()
: decodeValue ? base64Decode(data[key]) : data[key]}
: decodeValue
? base64Decode(data[key])
: data[key]}
</td>
</tr>
))}
Expand All @@ -79,7 +83,9 @@ const balanceRow = bal => (
/>
</td>
<td>
<span className="break">{bal.balance}</span>
<span className="break">
<FormattedAmount amount={bal.balance} />
</span>
</td>
<td>
<span className="break">{bal.limit}</span>
Expand Down Expand Up @@ -327,6 +333,9 @@ class Account extends React.Component {
usePaging
/>
</Tab>
<Tab eventKey="trades" title={formatMessage({id: 'trades'})}>
<TradeTable key={a.id} account={a.id} limit={20} usePaging />
</Tab>
<Tab eventKey="effects" title={formatMessage({id: 'effects'})}>
{// OPTIMISATION: render on focus only as it hits the server for every effect
this.state.renderEffects === true && (
Expand Down
138 changes: 87 additions & 51 deletions src/components/TradeTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,19 @@ import mapKeys from 'lodash/mapKeys'
import camelCase from 'lodash/camelCase'

import AccountLink from './shared/AccountLink'
import FormattedAmount from './shared/FormattedAmount'
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}) => {
import {isPublicKey} from '../lib/utils'

const Trade = ({account, singleAccountView, trade, parentRenderTimestamp}) => {
const Base = (
<span>
{trade.baseAmount}{' '}
<FormattedAmount amount={trade.baseAmount} />{' '}
<Asset
code={trade.baseAssetCode}
issuer={trade.baseAssetIssuer}
Expand All @@ -28,7 +31,7 @@ const Trade = ({trade, parentRenderTimestamp}) => {

const Counter = (
<span>
{trade.counterAmount}{' '}
<FormattedAmount amount={trade.counterAmount} />{' '}
<Asset
code={trade.counterAssetCode}
issuer={trade.counterAssetIssuer}
Expand All @@ -37,24 +40,34 @@ const Trade = ({trade, parentRenderTimestamp}) => {
</span>
)

let baseFirst
let account1, account2

if (singleAccountView) {
const accountIsBase = account === trade.baseAccount
baseFirst = !accountIsBase // account's bought asset first
account1 = account
account2 = accountIsBase ? trade.counterAccount : trade.baseAccount
} else {
baseFirst = trade.baseIsSeller
account1 = trade.baseAccount
account2 = trade.counterAccount
}

return (
<tr key={trade.id} className="trade">
<td className="account-badge">
<AccountLink
account={
trade.baseIsSeller ? trade.baseAccount : trade.counterAccount
}
/>
<td>
<span className="account-badge">
<AccountLink account={account1} />
</span>
</td>
<td>{trade.baseIsSeller ? Base : Counter}</td>
<td className="account-badge">
<AccountLink
account={
trade.baseIsSeller ? trade.counterAccount : trade.baseAccount
}
/>
<td>{baseFirst ? Base : Counter}</td>
<td>
<span className="account-badge">
<AccountLink account={account2} />
</span>
</td>
<td>{trade.baseIsSeller ? Counter : Base}</td>
<td>{baseFirst ? Counter : Base}</td>
<td>
<span title={trade.time}>
<TimeSynchronisedFormattedRelative
Expand All @@ -67,45 +80,68 @@ const Trade = ({trade, parentRenderTimestamp}) => {
)
}

const TradeTable = ({compact, server, parentRenderTimestamp, records}) => (
<Table id="trade-table" className="table-striped table-hover table-condensed">
<thead>
<tr>
<th>
<FormattedMessage id="seller" />
</th>
<th>
<FormattedMessage id="amount" />
</th>
<th>
<FormattedMessage id="buyer" />
</th>
<th>
<FormattedMessage id="amount" />
</th>
<th>
<FormattedMessage id="time" />
</th>
</tr>
</thead>
<tbody>
{records.map(trade => (
<Trade
key={trade.id}
compact={compact}
trade={trade}
parentRenderTimestamp={parentRenderTimestamp}
/>
))}
</tbody>
</Table>
)
Trade.propTypes = {
parentRenderTimestamp: PropTypes.number,
trade: PropTypes.shape({
id: PropTypes.string.isRequired,
baseIsSeller: PropTypes.bool.isRequired,
baseAccount: PropTypes.string.isRequired,
counterAccount: PropTypes.string.isRequired,
time: PropTypes.string.isRequired,
}).isRequired,
account: PropTypes.string,
singleAccountView: PropTypes.bool,
}

const TradeTable = ({server, parentRenderTimestamp, account, records}) => {
const singleAccountView = isPublicKey(account)
return (
<Table
id="trade-table"
className="table-striped table-hover table-condensed"
>
<thead>
<tr>
<th>
<FormattedMessage id="account" />
{' 1'}
</th>
<th>
<FormattedMessage id="bought" />
</th>
<th>
<FormattedMessage id="account" />
{' 2'}
</th>
<th>
<FormattedMessage id="bought" />
</th>
<th>
<FormattedMessage id="time" />
</th>
</tr>
</thead>
<tbody>
{records.map(trade => (
<Trade
key={trade.id}
trade={trade}
account={account}
singleAccountView={singleAccountView}
parentRenderTimestamp={parentRenderTimestamp}
/>
))}
</tbody>
</Table>
)
}

TradeTable.propTypes = {
compact: PropTypes.bool,
parentRenderTimestamp: PropTypes.number,
records: PropTypes.array.isRequired,
server: PropTypes.object.isRequired,
account: PropTypes.string,
accountView: PropTypes.bool,
}

const rspRecToPropsRec = record => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Trades.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class Trades extends React.Component {
<Grid>
<Row>
<Panel header={formatMessage({id: 'trades'})}>
<TradeTable compact={false} limit={50} usePaging />
<TradeTable limit={50} usePaging />
</Panel>
</Row>
</Grid>
Expand Down
14 changes: 3 additions & 11 deletions src/components/shared/FormattedAmount.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
import PropTypes from 'prop-types'
import {formatAmount} from '../../lib/utils'

const REGEX_TRAILING_ZEROS = /0*$/
const REGEX_TRAILING_DOT = /\.$/

// chop off any trailing 0s and the '.' if only . left.
const FormattedAmount = ({amount}) => {
let fmtAmount = amount
fmtAmount = fmtAmount.replace(REGEX_TRAILING_ZEROS, '')
if (fmtAmount.endsWith('.'))
fmtAmount = fmtAmount.replace(REGEX_TRAILING_DOT, '')
return fmtAmount
}
// chop off any trailing 0s
const FormattedAmount = ({amount}) => formatAmount(amount)

FormattedAmount.propTypes = {
amount: PropTypes.string.isRequired,
Expand Down

0 comments on commit 03f3002

Please sign in to comment.