import { BigNumber } from '@0xproject/utils';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Side, Token, TokenState } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface EthWethConversionDialogProps {
direction: Side;
onComplete: (direction: Side, value: BigNumber) => void;
onCancelled: () => void;
isOpen: boolean;
token: Token;
tokenState: TokenState;
etherBalance: BigNumber;
}
interface EthWethConversionDialogState {
value?: BigNumber;
shouldShowIncompleteErrs: boolean;
hasErrors: boolean;
}
export class EthWethConversionDialog extends React.Component<
EthWethConversionDialogProps,
EthWethConversionDialogState
> {
constructor() {
super();
this.state = {
shouldShowIncompleteErrs: false,
hasErrors: false,
};
}
public render() {
const convertDialogActions = [
,
,
];
const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
return (
);
}
private _renderConversionDialogBody() {
const explanation =
this.props.direction === Side.Deposit
? 'Convert your Ether into a tokenized, tradable form.'
: "Convert your Wrapped Ether back into it's native form.";
const isWrappedVersion = this.props.direction === Side.Receive;
return (
{explanation}
{this._renderCurrency(isWrappedVersion)}
{this._renderCurrency(!isWrappedVersion)}
{this.props.direction === Side.Receive ? (
) : (
)}
1 ETH = 1 WETH
{this.props.direction === Side.Receive && (
Max
)}
);
}
private _renderCurrency(isWrappedVersion: boolean) {
const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
const symbol = isWrappedVersion ? 'WETH' : 'ETH';
return (
);
}
private _onMaxClick() {
this.setState({
value: this.props.tokenState.balance,
});
}
private _onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
value: amount,
hasErrors: !isValid,
});
}
private _onConvertClick() {
if (this.state.hasErrors) {
this.setState({
shouldShowIncompleteErrs: true,
});
} else {
const value = this.state.value;
this.setState({
value: undefined,
});
this.props.onComplete(this.props.direction, value);
}
}
private _onCancel() {
this.setState({
value: undefined,
});
this.props.onCancelled();
}
}