Refactor the WETH conversion dialog/button to be either wrap or unwrap specific and not both

1 files changed, 78 insertions, 52 deletions

diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index aba5b9faf..4904ee9e2 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,14 +1,15 @@
 import BigNumber from 'bignumber.js';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import RadioButton from 'material-ui/RadioButton';
-import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup';
 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';
 
+const DARK_BLUE = '#4D5481';
+
 interface EthWethConversionDialogProps {
+    direction: Side;
     onComplete: (direction: Side, value: BigNumber) => void;
     onCancelled: () => void;
     isOpen: boolean;
@@ -19,7 +20,6 @@ interface EthWethConversionDialogProps {
 
 interface EthWethConversionDialogState {
     value?: BigNumber;
-    direction: Side;
     shouldShowIncompleteErrs: boolean;
     hasErrors: boolean;
 }
@@ -29,7 +29,6 @@ export class EthWethConversionDialog extends
     constructor() {
         super();
         this.state = {
-            direction: Side.deposit,
             shouldShowIncompleteErrs: false,
             hasErrors: true,
         };
@@ -48,11 +47,13 @@ export class EthWethConversionDialog extends
                 onTouchTap={this.onConvertClick.bind(this)}
             />,
         ];
+        const title = this.props.direction === Side.deposit ?  'Wrap ETH' : 'Unwrap WETH';
         return (
             <Dialog
-                title="I want to convert"
+                title={title}
                 titleStyle={{fontWeight: 100}}
                 actions={convertDialogActions}
+                contentStyle={{width: 600}}
                 open={this.props.isOpen}
             >
                 {this.renderConversionDialogBody()}
@@ -60,56 +61,81 @@ export class EthWethConversionDialog extends
         );
     }
     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 (
-            <div className="mx-auto" style={{maxWidth: 300}}>
-                <RadioButtonGroup
-                    className="pb1"
-                    defaultSelected={this.state.direction}
-                    name="conversionDirection"
-                    onChange={this.onConversionDirectionChange.bind(this)}
-                >
-                    <RadioButton
-                        className="pb1"
-                        value={Side.deposit}
-                        label="Ether -> Ether Tokens"
-                    />
-                    <RadioButton
-                        value={Side.receive}
-                        label="Ether Tokens -> Ether"
-                    />
-                </RadioButtonGroup>
-                {this.state.direction === Side.receive ?
-                    <TokenAmountInput
-                        label="Amount to convert"
-                        token={this.props.token}
-                        tokenState={this.props.tokenState}
-                        shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                        shouldCheckBalance={true}
-                        shouldCheckAllowance={false}
-                        onChange={this.onValueChange.bind(this)}
-                        amount={this.state.value}
-                        onVisitBalancesPageClick={this.props.onCancelled}
-                    /> :
-                    <EthAmountInput
-                        label="Amount to convert"
-                        balance={this.props.etherBalance}
-                        amount={this.state.value}
-                        onChange={this.onValueChange.bind(this)}
-                        shouldCheckBalance={true}
-                        shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                        onVisitBalancesPageClick={this.props.onCancelled}
-                    />
-                }
+            <div>
+                <div className="pb2">
+                    {explanation}
+                </div>
+                <div className="mx-auto" style={{maxWidth: 332}}>
+                    <div className="flex">
+                        {this.renderCurrency(isWrappedVersion)}
+                        <div style={{paddingTop: 68}}>
+                            <i
+                                style={{fontSize: 28, color: DARK_BLUE}}
+                                className="zmdi zmdi-arrow-right"
+                            />
+                        </div>
+                        {this.renderCurrency(!isWrappedVersion)}
+                    </div>
+                    <div
+                        className="pt2 mx-auto"
+                        style={{width: 235}}
+                    >
+                        {this.props.direction === Side.receive ?
+                            <TokenAmountInput
+                                token={this.props.token}
+                                tokenState={this.props.tokenState}
+                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+                                shouldCheckBalance={true}
+                                shouldCheckAllowance={false}
+                                onChange={this.onValueChange.bind(this)}
+                                amount={this.state.value}
+                                onVisitBalancesPageClick={this.props.onCancelled}
+                            /> :
+                            <EthAmountInput
+                                balance={this.props.etherBalance}
+                                amount={this.state.value}
+                                onChange={this.onValueChange.bind(this)}
+                                shouldCheckBalance={true}
+                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+                                onVisitBalancesPageClick={this.props.onCancelled}
+                            />
+                        }
+                        <div
+                            className="pt1"
+                            style={{fontSize: 12}}
+                        >
+                            1 ETH = 1 WETH
+                        </div>
+                    </div>
+                </div>
             </div>
         );
     }
-    private onConversionDirectionChange(e: any, direction: Side) {
-        this.setState({
-            value: undefined,
-            shouldShowIncompleteErrs: false,
-            direction,
-            hasErrors: true,
-        });
+    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 (
+            <div className="mx-auto pt2">
+                <div
+                    className="center"
+                    style={{color: DARK_BLUE}}
+                >
+                    {name}
+                </div>
+                <div className="center py2">
+                    <img src={iconUrl} style={{width: 60}} />
+                </div>
+                <div className="center">
+                    ({symbol})
+                </div>
+            </div>
+        );
     }
     private onValueChange(isValid: boolean, amount?: BigNumber) {
         this.setState({
@@ -127,7 +153,7 @@ export class EthWethConversionDialog extends
             this.setState({
                 value: undefined,
             });
-            this.props.onComplete(this.state.direction, value);
+            this.props.onComplete(this.props.direction, value);
         }
     }
     private onCancel() {