Make wallet scrollable

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

@@ -61,6 +61,7 @@ export interface WalletProps {
 interface WalletState {
     trackedTokenStateByAddress: TokenStateByAddress;
     wrappedEtherDirection?: Side;
+    isHoveringSidebar: boolean;
 }
 
 interface AllowanceToggleConfig {
@@ -95,6 +96,9 @@ const styles: Styles = {
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
+        borderTopColor: colors.walletBorder,
+        borderTopStyle: 'solid',
+        borderWidth: 1,
     },
     borderedItem: {
         borderBottomColor: colors.walletBorder,
@@ -115,7 +119,17 @@ const styles: Styles = {
         paddingTop: 8,
         paddingBottom: 8,
     },
-    accessoryItemsContainer: { width: 150, right: 8 },
+    accessoryItemsContainer: {
+        width: 150,
+        right: 8,
+    },
+    bodyInnerDiv: {
+        padding: 0,
+        // TODO: make this completely responsive
+        maxHeight: 475,
+        overflow: 'auto',
+        WebkitOverflowScrolling: 'touch',
+    },
 };
 
 const ETHER_ICON_PATH = '/images/ether.png';
@@ -140,6 +154,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         this.state = {
             trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
             wrappedEtherDirection: undefined,
+            isHoveringSidebar: false,
         };
     }
     public componentWillMount() {
@@ -185,12 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         return (
             <List style={styles.list}>
                 {isAddressAvailable
-                    ? _.concat(
-                          this._renderConnectedHeaderRows(),
-                          this._renderEthRows(),
-                          this._renderTokenRows(),
-                          this._renderFooterRows(),
-                      )
+                    ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows())
                     : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
             </List>
         );
@@ -231,6 +241,33 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             />
         );
     }
+    private _renderBody() {
+        const bodyStyle: React.CSSProperties = {
+            ...styles.bodyInnerDiv,
+            overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+        };
+        return (
+            <ListItem
+                key="body"
+                innerDivStyle={bodyStyle}
+                onMouseEnter={this._onSidebarHover.bind(this)}
+                onMouseLeave={this._onSidebarHoverOff.bind(this)}
+            >
+                {this._renderEthRows()}
+                {this._renderTokenRows()}
+            </ListItem>
+        );
+    }
+    private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+        this.setState({
+            isHoveringSidebar: true,
+        });
+    }
+    private _onSidebarHoverOff() {
+        this.setState({
+            isHoveringSidebar: false,
+        });
+    }
     private _renderFooterRows() {
         const primaryText = '+ other tokens';
         return (
@@ -301,7 +338,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
-    private _renderTokenRow(token: Token) {
+    private _renderTokenRow(token: Token, index: number) {
         const tokenState = this.state.trackedTokenStateByAddress[token.address];
         const tokenLink = sharedUtils.getEtherScanLinkIfExists(
             token.address,
@@ -318,12 +355,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 tokenState,
             },
         };
+        // if this is the last item in the list, do not render the border, it is rendered by the footer
+        const borderedStyle = index !== this.props.trackedTokens.length - 1 ? styles.borderedItem : {};
         const shouldShowWrapEtherItem =
             !_.isUndefined(this.state.wrappedEtherDirection) &&
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
         const style = shouldShowWrapEtherItem
             ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
-            : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
+            : { ...styles.tokenItem, ...borderedStyle, ...styles.paddedItem };
         const etherToken = this._getEthToken();
         return (
             <div key={token.address}>