blob: 2adefbda3ed616c7e0fc0efe312beb8e2fd22759 (
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
|
import * as _ from 'lodash';
import * as React from 'react';
import {colors} from 'ts/utils/colors';
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,
});
}
}
|