Always show the wrap ether row in between ETH and WETH

2 files changed, 20 insertions, 18 deletions

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1f1e3598a..a75404637 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -320,8 +320,24 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
         const etherToken = this._getEthToken();
+        const wrapEtherItem = shouldShowWrapEtherItem ? (
+            <WrapEtherItem
+                userAddress={this.props.userAddress}
+                networkId={this.props.networkId}
+                blockchain={this.props.blockchain}
+                dispatcher={this.props.dispatcher}
+                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                direction={accessoryItemConfig.wrappedEtherDirection}
+                etherToken={etherToken}
+                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
+                // tslint:disable:jsx-no-lambda
+                refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
+            />
+        ) : null;
         return (
             <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
+                {this.state.wrappedEtherDirection === Side.Receive && wrapEtherItem}
                 <StandardIconRow
                     icon={icon}
                     main={
@@ -331,23 +347,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         </div>
                     }
                     accessory={this._renderAccessoryItems(accessoryItemConfig)}
-                    backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
                 />
-                {shouldShowWrapEtherItem && (
-                    <WrapEtherItem
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this.props.blockchain}
-                        dispatcher={this.props.dispatcher}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        direction={accessoryItemConfig.wrappedEtherDirection}
-                        etherToken={etherToken}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
-                        // tslint:disable:jsx-no-lambda
-                        refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
-                    />
-                )}
+                {this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
             </div>
         );
     }
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 851b35f90..2b4cf93fe 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -8,6 +8,7 @@ import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Container } from 'ts/components/ui/container';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { BlockchainCallErrs, Side, Token } from 'ts/types';
@@ -94,7 +95,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
         const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
 
         return (
-            <div className="flex" style={{ backgroundColor: colors.walletFocusedItemBackground }}>
+            <Container className="flex" backgroundColor={colors.walletFocusedItemBackground} paddingTop="25px">
                 <div>{this._renderIsEthConversionHappeningSpinner()} </div>
                 <div className="flex flex-column">
                     <div style={styles.topLabel}>{topLabelText}</div>
@@ -142,7 +143,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
 
                     {this._renderErrorMsg()}
                 </div>
-            </div>
+            </Container>
         );
     }
     private _onValueChange(_isValid: boolean, amount?: BigNumber): void {