42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { colors } from '@0xproject/react-shared';
|
|
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(): React.ReactNode {
|
|
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): void {
|
|
this.setState({
|
|
isHovering,
|
|
});
|
|
}
|
|
}
|