Hide wallet management option and expand component on small screens

2 files changed, 23 insertions, 15 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a03731ec0..0e1506e17 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -296,6 +296,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                     injectedProviderName={this.props.injectedProviderName}
                     providerType={this.props.providerType}
+                    screenWidth={this.props.screenWidth}
+                    location={this.props.location}
                     onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
                     onAddToken={this._onAddToken.bind(this)}
                     onRemoveToken={this._onRemoveToken.bind(this)}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 39e591bac..10ee31619 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -35,6 +35,7 @@ import {
     BlockchainErrs,
     ItemByAddress,
     ProviderType,
+    ScreenWidths,
     Side,
     Token,
     TokenByAddress,
@@ -61,6 +62,8 @@ export interface WalletProps {
     lastForceTokenStateRefetch: number;
     injectedProviderName: string;
     providerType: ProviderType;
+    screenWidth: ScreenWidths;
+    location: Location;
     onToggleLedgerDialog: () => void;
     onAddToken: () => void;
     onRemoveToken: () => void;
@@ -116,8 +119,6 @@ const styles: Styles = {
         paddingBottom: 8,
     },
     bodyInnerDiv: {
-        // TODO: make this completely responsive
-        maxHeight: 475,
         overflow: 'auto',
         WebkitOverflowScrolling: 'touch',
     },
@@ -140,6 +141,7 @@ const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
 const ETHER_ITEM_KEY = 'ETHER';
 const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
+const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 
 export class Wallet extends React.Component<WalletProps, WalletState> {
     private _isUnmounted: boolean;
@@ -226,7 +228,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const userAddress = this.props.userAddress;
         const primaryText = utils.getAddressBeginAndEnd(userAddress);
         return (
-            <Link key={HEADER_ITEM_KEY} to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+            <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
                 <ListItem
                     primaryText={primaryText}
                     leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
@@ -240,6 +242,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const bodyStyle: React.CSSProperties = {
             ...styles.bodyInnerDiv,
             overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+            // TODO: make this completely responsive
+            maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined,
         };
         return (
             <div
@@ -296,18 +300,20 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     innerDivStyle={styles.footerItemInnerDiv}
                     style={styles.borderedItem}
                 />
-                <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
-                    <ListItem
-                        primaryText={
-                            <div className="flex right" style={styles.manageYourWalletText}>
-                                {'manage your wallet'}
-                            </div>
-                            // https://github.com/palantir/tslint-react/issues/140
-                            // tslint:disable-next-line:jsx-curly-spacing
-                        }
-                        style={{ ...styles.paddedItem, ...styles.borderedItem }}
-                    />
-                </Link>
+                {this.props.location.pathname !== ACCOUNT_PATH && (
+                    <Link to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
+                        <ListItem
+                            primaryText={
+                                <div className="flex right" style={styles.manageYourWalletText}>
+                                    {'manage your wallet'}
+                                </div>
+                                // https://github.com/palantir/tslint-react/issues/140
+                                // tslint:disable-next-line:jsx-curly-spacing
+                            }
+                            style={{ ...styles.paddedItem, ...styles.borderedItem }}
+                        />
+                    </Link>
+                )}
             </div>
         );
     }