aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs/hash_input.tsx
blob: 73b6615d45c2a2e27ab0bd2c6a0baa74ac3ee162 (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
import { assetDataUtils, orderHashUtils } from '@0x/order-utils';
import { Styles } from '@0x/react-shared';
import { Order } from '@0x/types';
import * as _ from 'lodash';
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 } 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(): React.ReactNode {
        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(): string {
        const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
        const hashData = this.props.hashData;
        const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr);
        const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr);
        const order: Order = {
            senderAddress: constants.NULL_ADDRESS,
            exchangeAddress,
            expirationTimeSeconds: hashData.orderExpiryTimestamp,
            feeRecipientAddress: hashData.feeRecipientAddress,
            makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
            makerFee: hashData.makerFee,
            makerAssetData,
            makerAssetAmount: hashData.depositAmount,
            salt: hashData.orderSalt,
            takerAddress: hashData.orderTakerAddress,
            takerFee: hashData.takerFee,
            takerAssetData,
            takerAssetAmount: hashData.receiveAmount,
        };
        const orderHash = orderHashUtils.getOrderHashHex(order);
        return orderHash;
    }
}