Always show the wrap ether row in between ETH and WETH

packages/website/ts/components/wallet/wallet.tsx

@@ -320,20 +320,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
         const etherToken = this._getEthToken();
-        return (
+        const wrapEtherItem = shouldShowWrapEtherItem ? (
-            <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
-                <StandardIconRow
-                    icon={icon}
-                    main={
-                        <div className="flex flex-column">
-                            {primaryText}
-                            <Container marginTop="3px">{secondaryText}</Container>
-                        </div>
-                    }
-                    accessory={this._renderAccessoryItems(accessoryItemConfig)}
-                    backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
-                />
-                {shouldShowWrapEtherItem && (
             <WrapEtherItem
                 userAddress={this.props.userAddress}
                 networkId={this.props.networkId}
@@ -347,7 +334,21 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 // 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={
+                        <div className="flex flex-column">
+                            {primaryText}
+                            <Container marginTop="3px">{secondaryText}</Container>
+                        </div>
+                    }
+                    accessory={this._renderAccessoryItems(accessoryItemConfig)}
+                />
+                {this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
             </div>
         );
     }

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 {