packages/website/ts/components/inputs/identicon_address_input.tsx


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

import * as _ from 'lodash';
import * as React from 'react';
import {colors} from 'material-ui/styles';
import {Blockchain} from 'ts/blockchain';
import {Identicon} from 'ts/components/ui/identicon';
import {RequiredLabel} from 'ts/components/ui/required_label';
import {AddressInput} from 'ts/components/inputs/address_input';
import {InputLabel} from 'ts/components/ui/input_label';

interface IdenticonAddressInputProps {
    initialAddress: string;
    isRequired?: boolean;
    label: string;
    updateOrderAddress: (address?: string) => void;
}

interface IdenticonAddressInputState {
    address: string;
}

export class IdenticonAddressInput extends React.Component<IdenticonAddressInputProps, IdenticonAddressInputState> {
    constructor(props: IdenticonAddressInputProps) {
        super(props);
        this.state = {
            address: props.initialAddress,
        };
    }
    public render() {
        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
                      this.props.label;
        return (
            <div className="relative" style={{width: '100%'}}>
                <InputLabel text={label} />
                <div className="flex">
                    <div className="col col-1 pb1 pr1" style={{paddingTop: 13}}>
                        <Identicon address={this.state.address} diameter={26} />
                    </div>
                    <div className="col col-11 pb1 pl1" style={{height: 65}}>
                        <AddressInput
                            hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
                            shouldHideLabel={true}
                            initialAddress={this.props.initialAddress}
                            updateAddress={this.updateAddress.bind(this)}
                        />
                    </div>
                </div>
            </div>
        );
    }
    private updateAddress(address?: string): void {
        this.setState({
            address,
        });
        this.props.updateOrderAddress(address);
    }
}