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
|
import {Order, ZeroEx} from '0x.js';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import {Blockchain} from 'ts/blockchain';
import {FakeTextField} from 'ts/components/ui/fake_text_field';
import {HashData, Styles} from 'ts/types';
import {constants} from 'ts/utils/constants';
const styles: Styles = {
textField: {
overflow: 'hidden',
paddingTop: 8,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
};
interface HashInputProps {
blockchain: Blockchain;
blockchainIsLoaded: boolean;
hashData: HashData;
label: string;
}
interface HashInputState {}
export class HashInput extends React.Component<HashInputProps, HashInputState> {
public render() {
const msgHashHex = this.props.blockchainIsLoaded ? this.generateMessageHashHex() : '';
return (
<div>
<FakeTextField label={this.props.label}>
<div
style={styles.textField}
data-tip={true}
data-for="hashTooltip"
>
{msgHashHex}
</div>
</FakeTextField>
<ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip>
</div>
);
}
private generateMessageHashHex() {
const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
const hashData = this.props.hashData;
const order: Order = {
exchangeContractAddress,
expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
feeRecipient: hashData.feeRecipientAddress,
maker: hashData.orderMakerAddress,
makerFee: hashData.makerFee,
makerTokenAddress: hashData.depositTokenContractAddr,
makerTokenAmount: hashData.depositAmount,
salt: hashData.orderSalt,
taker: hashData.orderTakerAddress,
takerFee: hashData.takerFee,
takerTokenAddress: hashData.receiveTokenContractAddr,
takerTokenAmount: hashData.receiveAmount,
};
const orderHash = ZeroEx.getOrderHashHex(order);
return orderHash;
}
}
|
