aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs/token_input.tsx
blob: 0bd36781e9e76b41bc80e2f8b3d874395c900767 (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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { colors } from '@0xproject/react-shared';
import Paper from 'material-ui/Paper';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
import { InputLabel } from 'ts/components/ui/input_label';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { Dispatcher } from 'ts/redux/dispatcher';
import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';

const TOKEN_ICON_DIMENSION = 80;

interface TokenInputProps {
    blockchain: Blockchain;
    blockchainErr: BlockchainErrs;
    dispatcher: Dispatcher;
    label: string;
    side: Side;
    networkId: number;
    assetToken: AssetToken;
    updateChosenAssetToken: (side: Side, token: AssetToken) => void;
    tokenByAddress: TokenByAddress;
    userAddress: string;
}

interface TokenInputState {
    isHoveringIcon: boolean;
    isPickerOpen: boolean;
    trackCandidateTokenIfExists?: Token;
}

export class TokenInput extends React.Component<TokenInputProps, TokenInputState> {
    constructor(props: TokenInputProps) {
        super(props);
        this.state = {
            isHoveringIcon: false,
            isPickerOpen: false,
        };
    }
    public render(): React.ReactNode {
        const token = this.props.tokenByAddress[this.props.assetToken.address];
        const iconStyles = {
            cursor: 'pointer',
            opacity: this.state.isHoveringIcon ? 0.5 : 1,
        };
        return (
            <div className="relative">
                <div className="pb1">
                    <InputLabel text={this.props.label} />
                </div>
                <Paper
                    zDepth={1}
                    style={{ cursor: 'pointer' }}
                    onMouseEnter={this._onToggleHover.bind(this, true)}
                    onMouseLeave={this._onToggleHover.bind(this, false)}
                    onClick={this._onAssetClicked.bind(this)}
                >
                    <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
                        <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
                    </div>
                    <div className="py1 center" style={{ color: colors.grey }}>
                        {token.name}
                    </div>
                </Paper>
                <AssetPicker
                    userAddress={this.props.userAddress}
                    networkId={this.props.networkId}
                    blockchain={this.props.blockchain}
                    dispatcher={this.props.dispatcher}
                    isOpen={this.state.isPickerOpen}
                    currentTokenAddress={this.props.assetToken.address}
                    onTokenChosen={this._onTokenChosen.bind(this)}
                    tokenByAddress={this.props.tokenByAddress}
                />
            </div>
        );
    }
    private _onTokenChosen(tokenAddress: string): void {
        const assetToken: AssetToken = {
            address: tokenAddress,
            amount: this.props.assetToken.amount,
        };
        this.props.updateChosenAssetToken(this.props.side, assetToken);
        this.setState({
            isPickerOpen: false,
        });
    }
    private _onToggleHover(isHoveringIcon: boolean): void {
        this.setState({
            isHoveringIcon,
        });
    }
    private _onAssetClicked(): void {
        if (this.props.blockchainErr !== BlockchainErrs.NoError) {
            this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
            return;
        }

        this.setState({
            isPickerOpen: true,
        });
    }
}