blob: 76a2835479d0622087cd33c66cbf7dd86b731c88 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import { ZeroEx } from '0x.js';
import * as _ from 'lodash';
import * as React from 'react';
import { Party } from 'ts/components/ui/party';
import { AssetToken, Token, TokenByAddress } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { utils } from 'ts/utils/utils';
interface VisualOrderProps {
makerAssetToken: AssetToken;
takerAssetToken: AssetToken;
makerToken: Token;
takerToken: Token;
networkId: number;
tokenByAddress: TokenByAddress;
isMakerTokenAddressInRegistry: boolean;
isTakerTokenAddressInRegistry: boolean;
}
interface VisualOrderState {}
export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderState> {
public render(): React.ReactNode {
const allTokens = _.values(this.props.tokenByAddress);
const makerImage = this.props.makerToken.iconUrl;
const takerImage = this.props.takerToken.iconUrl;
return (
<div>
<div className="clearfix">
<div className="col col-5 center">
<Party
label="Send"
address={this.props.takerToken.address}
alternativeImage={takerImage}
networkId={this.props.networkId}
isInTokenRegistry={this.props.isTakerTokenAddressInRegistry}
hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.takerToken)}
/>
</div>
<div className="col col-2 center pt1">
<div className="pb1">
{this._renderAmount(this.props.takerAssetToken, this.props.takerToken)}
</div>
<div className="lg-p2 md-p2 sm-p1">
<img src="/images/trade_arrows.png" style={{ width: 47 }} />
</div>
<div className="pt1">
{this._renderAmount(this.props.makerAssetToken, this.props.makerToken)}
</div>
</div>
<div className="col col-5 center">
<Party
label="Receive"
address={this.props.makerToken.address}
alternativeImage={makerImage}
networkId={this.props.networkId}
isInTokenRegistry={this.props.isMakerTokenAddressInRegistry}
hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.makerToken)}
/>
</div>
</div>
</div>
);
}
private _renderAmount(assetToken: AssetToken, token: Token): React.ReactNode {
const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
return (
<div style={{ fontSize: 13 }}>
{unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {token.symbol}
</div>
);
}
}
|
