Update wallet footer and add remove token functionality

2 files changed, 69 insertions, 12 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b5e8150c4..4cbc65ce4 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -14,8 +14,10 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { localStorage } from 'ts/local_storage/local_storage';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, TokenVisibility } from 'ts/types';
+import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
@@ -49,7 +51,13 @@ interface PortalState {
     prevPathname: string;
     isDisclaimerDialogOpen: boolean;
     isLedgerDialogOpen: boolean;
-    isAssetPickerDialogOpen: boolean;
+    tokenManagementState: TokenManagementState;
+}
+
+enum TokenManagementState {
+    Add = 'Add',
+    Remove = 'Remove',
+    None = 'None',
 }
 
 const THROTTLE_TIMEOUT = 100;
@@ -90,7 +98,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             prevUserAddress: this.props.userAddress,
             prevPathname: this.props.location.pathname,
             isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
-            isAssetPickerDialogOpen: false,
+            tokenManagementState: TokenManagementState.None,
             isLedgerDialogOpen: false,
         };
     }
@@ -142,6 +150,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
         const allTokens = _.values(this.props.tokenByAddress);
         const trackedTokens = _.filter(allTokens, t => t.isTracked);
+        const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None;
+        const tokenVisibility =
+            this.state.tokenManagementState === TokenManagementState.Add
+                ? TokenVisibility.UNTRACKED
+                : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
                 <DocumentTitle title="0x Portal DApp" />
@@ -180,6 +193,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 providerType={this.props.providerType}
                                 onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
                                 onAddToken={this._onAddToken.bind(this)}
+                                onRemoveToken={this._onRemoveToken.bind(this)}
                             />
                         </div>
                         <div className="flex-auto px3" style={styles.scrollContainer}>
@@ -217,11 +231,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         networkId={this.props.networkId}
                         blockchain={this._blockchain}
                         dispatcher={this.props.dispatcher}
-                        isOpen={this.state.isAssetPickerDialogOpen}
+                        isOpen={isAssetPickerDialogOpen}
                         currentTokenAddress={''}
                         onTokenChosen={this._onTokenChosen.bind(this)}
                         tokenByAddress={this.props.tokenByAddress}
-                        tokenVisibility={TokenVisibility.UNTRACKED}
+                        tokenVisibility={tokenVisibility}
                     />
                 </div>
             </div>
@@ -230,14 +244,29 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _onTokenChosen(tokenAddress: string) {
         if (_.isEmpty(tokenAddress)) {
             this.setState({
-                isAssetPickerDialogOpen: false,
+                tokenManagementState: TokenManagementState.None,
             });
             return;
         }
         const token = this.props.tokenByAddress[tokenAddress];
-        this.props.dispatcher.updateTokenByAddress([token]);
+        const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
+        if (this.state.tokenManagementState === TokenManagementState.Remove && !isDefaultTrackedToken) {
+            if (token.isRegistered) {
+                // Remove the token from tracked tokens
+                const newToken = {
+                    ...token,
+                    isTracked: false,
+                };
+                this.props.dispatcher.updateTokenByAddress([newToken]);
+            } else {
+                this.props.dispatcher.removeTokenToTokenByAddress(token);
+            }
+            trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress);
+        } else if (isDefaultTrackedToken) {
+            this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`);
+        }
         this.setState({
-            isAssetPickerDialogOpen: false,
+            tokenManagementState: TokenManagementState.None,
         });
     }
     private _onToggleLedgerDialog() {
@@ -247,7 +276,12 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
     private _onAddToken() {
         this.setState({
-            isAssetPickerDialogOpen: !this.state.isAssetPickerDialogOpen,
+            tokenManagementState: TokenManagementState.Add,
+        });
+    }
+    private _onRemoveToken() {
+        this.setState({
+            tokenManagementState: TokenManagementState.Remove,
         });
     }
     private _onPortalDisclaimerAccepted() {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index a28012aaf..079c0e3b3 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -9,8 +9,11 @@ import {
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
 import { List, ListItem } from 'material-ui/List';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import ContentRemove from 'material-ui/svg-icons/content/remove';
 import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward';
 import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
 import Close from 'material-ui/svg-icons/navigation/close';
@@ -56,6 +59,7 @@ export interface WalletProps {
     providerType: ProviderType;
     onToggleLedgerDialog: () => void;
     onAddToken: () => void;
+    onRemoveToken: () => void;
 }
 
 interface WalletState {
@@ -138,6 +142,7 @@ const ZRX_TOKEN_SYMBOL = 'ZRX';
 const ETHER_SYMBOL = 'ETH';
 const ICON_DIMENSION = 24;
 const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
 const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
@@ -248,7 +253,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         };
         return (
             <ListItem
-                key="body"
+                key={BODY_ITEM_KEY}
                 innerDivStyle={bodyStyle}
                 onMouseEnter={this._onSidebarHover.bind(this)}
                 onMouseLeave={this._onSidebarHoverOff.bind(this)}
@@ -269,13 +274,31 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         });
     }
     private _renderFooterRows() {
-        const primaryText = '+ other tokens';
         return (
             <ListItem
                 key={FOOTER_ITEM_KEY}
-                primaryText={primaryText}
+                primaryText={
+                    <div className="flex">
+                        <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+                            <ContentAdd />
+                        </FloatingActionButton>
+                        <FloatingActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
+                            <ContentRemove />
+                        </FloatingActionButton>
+                        <div
+                            style={{
+                                paddingLeft: 10,
+                                position: 'relative',
+                                top: '50%',
+                                transform: 'translateY(33%)',
+                            }}
+                        >
+                            add/remove tokens
+                        </div>
+                    </div>
+                }
+                disabled={true}
                 innerDivStyle={styles.footerItemInnerDiv}
-                onClick={this.props.onAddToken}
             />
         );
     }