packages/website/ts/components/ui/swap_icon.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

import * as _ from 'lodash';
import {colors} from 'ts/utils/colors';
import * as React from 'react';

interface SwapIconProps {
    swapTokensFn: () => void;
}

interface SwapIconState {
    isHovering: boolean;
}

export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
    public constructor(props: SwapIconProps) {
        super(props);
        this.state = {
            isHovering: false,
        };
    }
    public render() {
        const swapStyles = {
            color: this.state.isHovering ? colors.amber600 : colors.amber800,
            fontSize: 50,
        };
        return (
            <div
                className="mx-auto pt4"
                style={{cursor: 'pointer', height: 50, width: 37.5}}
                onClick={this.props.swapTokensFn}
                onMouseEnter={this.onToggleHover.bind(this, true)}
                onMouseLeave={this.onToggleHover.bind(this, false)}
            >
                <i
                    style={swapStyles}
                    className="zmdi zmdi-swap"
                />
            </div>
        );
    }
    private onToggleHover(isHovering: boolean) {
        this.setState({
            isHovering,
        });
    }
}