74 lines
3.1 KiB
TypeScript
74 lines
3.1 KiB
TypeScript
import { Web3Wrapper } from '@0x/web3-wrapper';
|
|
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 = Web3Wrapper.toUnitAmount(assetToken.amount, token.decimals);
|
|
return (
|
|
<div style={{ fontSize: 13 }}>
|
|
{unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {token.symbol}
|
|
</div>
|
|
);
|
|
}
|
|
}
|