diff options
Diffstat (limited to 'packages/website/ts/components/trade_history')
| -rw-r--r-- | packages/website/ts/components/trade_history/trade_history.tsx | 44 | ||||
| -rw-r--r-- | packages/website/ts/components/trade_history/trade_history_item.tsx | 81 |
2 files changed, 57 insertions, 68 deletions
diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 59f85a03d..635358627 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -2,10 +2,10 @@ import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; import Paper from 'material-ui/Paper'; import * as React from 'react'; -import {TradeHistoryItem} from 'ts/components/trade_history/trade_history_item'; -import {tradeHistoryStorage} from 'ts/local_storage/trade_history_storage'; -import {Fill, TokenByAddress} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { TradeHistoryItem } from 'ts/components/trade_history/trade_history_item'; +import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage'; +import { Fill, TokenByAddress } from 'ts/types'; +import { utils } from 'ts/utils/utils'; const FILL_POLLING_INTERVAL = 1000; @@ -20,19 +20,19 @@ interface TradeHistoryState { } export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> { - private fillPollingIntervalId: number; + private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); - const sortedFills = this.getSortedFills(); + const sortedFills = this._getSortedFills(); this.state = { sortedFills, }; } public componentWillMount() { - this.startPollingForFills(); + this._startPollingForFills(); } public componentWillUnmount() { - this.stopPollingForFills(); + this._stopPollingForFills(); } public componentDidMount() { window.scrollTo(0, 0); @@ -42,16 +42,16 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor <div className="lg-px4 md-px4 sm-px2"> <h3>Trade history</h3> <Divider /> - <div className="pt2" style={{height: 608, overflow: 'scroll'}}> - {this.renderTrades()} + <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> + {this._renderTrades()} </div> </div> ); } - private renderTrades() { - const numNonCustomFills = this.numFillsWithoutCustomERC20Tokens(); + private _renderTrades() { + const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens(); if (numNonCustomFills === 0) { - return this.renderEmptyNotice(); + return this._renderEmptyNotice(); } return _.map(this.state.sortedFills, (fill, index) => { @@ -66,14 +66,14 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor ); }); } - private renderEmptyNotice() { + private _renderEmptyNotice() { return ( - <Paper className="mt1 p2 mx-auto center" style={{width: '80%'}}> + <Paper className="mt1 p2 mx-auto center" style={{ width: '80%' }}> No filled orders yet. </Paper> ); } - private numFillsWithoutCustomERC20Tokens() { + private _numFillsWithoutCustomERC20Tokens() { let numNonCustomFills = 0; const tokens = _.values(this.props.tokenByAddress); _.each(this.state.sortedFills, fill => { @@ -93,9 +93,9 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor }); return numNonCustomFills; } - private startPollingForFills() { - this.fillPollingIntervalId = window.setInterval(() => { - const sortedFills = this.getSortedFills(); + private _startPollingForFills() { + this._fillPollingIntervalId = window.setInterval(() => { + const sortedFills = this._getSortedFills(); if (!utils.deepEqual(sortedFills, this.state.sortedFills)) { this.setState({ sortedFills, @@ -103,10 +103,10 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor } }, FILL_POLLING_INTERVAL); } - private stopPollingForFills() { - clearInterval(this.fillPollingIntervalId); + private _stopPollingForFills() { + clearInterval(this._fillPollingIntervalId); } - private getSortedFills() { + private _getSortedFills() { const fillsByHash = tradeHistoryStorage.getUserFillsByHash(this.props.userAddress, this.props.networkId); const fills = _.values(fillsByHash); const sortedFills = _.sortBy(fills, [(fill: Fill) => fill.blockTimestamp * -1]); diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index 4dcceadb7..7e42e64e6 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,14 +1,14 @@ -import {ZeroEx} from '0x.js'; -import BigNumber from 'bignumber.js'; +import { ZeroEx } from '0x.js'; +import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; -import {colors} from 'material-ui/styles'; import * as moment from 'moment'; import * as React from 'react'; import * as ReactTooltip from 'react-tooltip'; -import {EtherScanIcon} from 'ts/components/ui/etherscan_icon'; -import {Party} from 'ts/components/ui/party'; -import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types'; +import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; +import { Party } from 'ts/components/ui/party'; +import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types'; +import { colors } from 'ts/utils/colors'; const PRECISION = 5; const IDENTICON_DIAMETER = 40; @@ -44,30 +44,26 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra fontWeight: 100, display: 'inline-block', }; - const amountColClassNames = 'col col-12 lg-col-4 md-col-4 lg-py2 md-py2 sm-py1 lg-pr2 md-pr2 \ + const amountColClassNames = + 'col col-12 lg-col-4 md-col-4 lg-py2 md-py2 sm-py1 lg-pr2 md-pr2 \ lg-right-align md-right-align sm-center'; return ( - <Paper - className="py1" - style={{margin: '3px 3px 15px 3px'}} - > + <Paper className="py1" style={{ margin: '3px 3px 15px 3px' }}> <div className="clearfix"> - <div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3"> - {this.renderDate()} - </div> + <div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3">{this._renderDate()}</div> <div className="col col-12 lg-col-6 md-col-6 lg-pl3 md-pl3" - style={{fontSize: 12, fontWeight: 100}} + style={{ fontSize: 12, fontWeight: 100 }} > - <div className="flex sm-mx-auto xs-mx-auto" style={{paddingTop: 4, width: 224}}> + <div className="flex sm-mx-auto xs-mx-auto" style={{ paddingTop: 4, width: 224 }}> <Party label="Maker" address={fill.maker} identiconDiameter={IDENTICON_DIAMETER} networkId={this.props.networkId} /> - <i style={{fontSize: 30}} className="zmdi zmdi-swap py3" /> + <i style={{ fontSize: 30 }} className="zmdi zmdi-swap py3" /> <Party label="Taker" address={fill.taker} @@ -76,18 +72,15 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra /> </div> </div> - <div - className={amountColClassNames} - style={amountColStyle} - > - {this.renderAmounts(makerToken, takerToken)} + <div className={amountColClassNames} style={amountColStyle}> + {this._renderAmounts(makerToken, takerToken)} </div> <div className="col col-12 lg-col-1 md-col-1 lg-pr3 md-pr3 lg-py3 md-py3 sm-pb1 sm-center"> - <div className="pt1 lg-right md-right sm-mx-auto" style={{width: 13}}> + <div className="pt1 lg-right md-right sm-mx-auto" style={{ width: 13 }}> <EtherScanIcon addressOrTxHash={fill.transactionHash} networkId={this.props.networkId} - etherscanLinkSuffixes={EtherscanLinkSuffixes.tx} + etherscanLinkSuffixes={EtherscanLinkSuffixes.Tx} /> </div> </div> @@ -95,7 +88,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </Paper> ); } - private renderAmounts(makerToken: Token, takerToken: Token) { + private _renderAmounts(makerToken: Token, takerToken: Token) { const fill = this.props.fill; const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals); const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals); @@ -124,31 +117,26 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra givenToken = takerToken; } else { // This condition should never be hit - throw new Error('Found Fill that wasn\'t performed by this user'); + throw new Error("Found Fill that wasn't performed by this user"); } return ( <div> - <div - style={{color: colors.green400, fontSize: 16}} - > - <span>+{' '}</span> - {this.renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)} + <div style={{ color: colors.green400, fontSize: 16 }}> + <span>+ </span> + {this._renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)} </div> - <div - className="pb1 inline-block" - style={{color: colors.red200, fontSize: 16}} - > - <span>-{' '}</span> - {this.renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)} + <div className="pb1 inline-block" style={{ color: colors.red200, fontSize: 16 }}> + <span>- </span> + {this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)} </div> - <div style={{color: colors.grey400, fontSize: 14}}> + <div style={{ color: colors.grey400, fontSize: 14 }}> {exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol} </div> </div> ); } - private renderDate() { + private _renderDate() { const blockMoment = moment.unix(this.props.fill.blockTimestamp); if (!blockMoment.isValid()) { return null; @@ -160,17 +148,18 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra const dateTooltipId = `${this.props.fill.transactionHash}-date`; return ( - <div - data-tip={true} - data-for={dateTooltipId} - > - <div className="center pt1" style={{fontSize: 13}}>{monthAbreviation}</div> - <div className="center" style={{fontSize: 24, fontWeight: 100}}>{dayOfMonth}</div> + <div data-tip={true} data-for={dateTooltipId}> + <div className="center pt1" style={{ fontSize: 13 }}> + {monthAbreviation} + </div> + <div className="center" style={{ fontSize: 24, fontWeight: 100 }}> + {dayOfMonth} + </div> <ReactTooltip id={dateTooltipId}>{formattedBlockDate}</ReactTooltip> </div> ); } - private renderAmount(amount: BigNumber, symbol: string, decimals: number) { + private _renderAmount(amount: BigNumber, symbol: string, decimals: number) { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); return ( <span> |