Merge pull request #570 from 0xProject/feature/website/wallet-add-tokens

Portal v2 add tokens flow

4 files changed, 92 insertions, 79 deletions

diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
index 8942e4356..c45b20365 100644
--- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
@@ -154,7 +154,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
         const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
             this.props.dispatcher,
         );
-        const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
         const portalStyle: React.CSSProperties = {
             minHeight: '100vh',
             display: 'flex',
@@ -204,18 +203,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
                                     <div className="py2" style={{ backgroundColor: colors.grey50 }}>
                                         {this.props.blockchainIsLoaded ? (
                                             <Switch>
-                                                {isDevelopment && (
-                                                    <Route
-                                                        path={`${WebsitePaths.Portal}/wallet`}
-                                                        render={this._renderWallet.bind(this)}
-                                                    />
-                                                )}
-                                                {isDevelopment && (
-                                                    <Route
-                                                        path={`${WebsitePaths.Portal}/relayers`}
-                                                        render={this._renderRelayers.bind(this)}
-                                                    />
-                                                )}
                                                 <Route
                                                     path={`${WebsitePaths.Portal}/weth`}
                                                     render={this._renderEthWrapper.bind(this)}
@@ -294,40 +281,6 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
             isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
         });
     }
-    private _renderWallet() {
-        const allTokens = _.values(this.props.tokenByAddress);
-        const trackedTokens = _.filter(allTokens, t => t.isTracked);
-        return (
-            <div className="flex flex-center">
-                <div className="mx-auto">
-                    <Wallet
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this._blockchain}
-                        blockchainIsLoaded={this.props.blockchainIsLoaded}
-                        blockchainErr={this.props.blockchainErr}
-                        dispatcher={this.props.dispatcher}
-                        tokenByAddress={this.props.tokenByAddress}
-                        trackedTokens={trackedTokens}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        injectedProviderName={this.props.injectedProviderName}
-                        providerType={this.props.providerType}
-                        onToggleLedgerDialog={this.onToggleLedgerDialog.bind(this)}
-                    />
-                </div>
-            </div>
-        );
-    }
-    private _renderRelayers() {
-        return (
-            <div className="flex flex-center">
-                <div className="mx-auto" style={{ width: 800 }}>
-                    <RelayerIndex networkId={this.props.networkId} />
-                </div>
-            </div>
-        );
-    }
     private _renderEthWrapper() {
         return (
             <EthWrappers
diff --git a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
index 634d966ed..94113f066 100644
--- a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
@@ -58,26 +58,6 @@ export class LegacyPortalMenu extends React.Component<LegacyPortalMenuProps, Leg
                 >
                     {this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
                 </MenuItem>
-                {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
-                    <div>
-                        <MenuItem
-                            style={this.props.menuItemStyle}
-                            className="py2"
-                            to={`${WebsitePaths.Portal}/wallet`}
-                            onClick={this.props.onClick.bind(this)}
-                        >
-                            {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
-                        </MenuItem>
-                        <MenuItem
-                            style={this.props.menuItemStyle}
-                            className="py2"
-                            to={`${WebsitePaths.Portal}/relayers`}
-                            onClick={this.props.onClick.bind(this)}
-                        >
-                            {this._renderMenuItemWithIcon('Relayers', 'zmdi-input-antenna')}
-                        </MenuItem>
-                    </div>
-                )}
             </div>
         );
     }
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 507860ee6..e198a9f03 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -8,13 +8,14 @@ import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
 import { LedgerConfigDialog } from 'ts/components/dialogs/ledger_config_dialog';
 import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
 import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TopBar } 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 { Dispatcher } from 'ts/redux/dispatcher';
-import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress } from 'ts/types';
+import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, TokenVisibility } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
@@ -48,6 +49,7 @@ interface PortalState {
     prevPathname: string;
     isDisclaimerDialogOpen: boolean;
     isLedgerDialogOpen: boolean;
+    isAssetPickerDialogOpen: boolean;
 }
 
 const THROTTLE_TIMEOUT = 100;
@@ -89,6 +91,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             prevUserAddress: this.props.userAddress,
             prevPathname: this.props.location.pathname,
             isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
+            isAssetPickerDialogOpen: false,
             isLedgerDialogOpen: false,
         };
     }
@@ -105,7 +108,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         // We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
         // the initialization process always occurs from the same base state. This helps avoid
         // initialization inconsistencies (i.e While the portal was unrendered, the user might have
-        // become disconnected from their backing Ethereum node, changes user accounts, etc...)
+        // become disconnected from their backing Ethereum node, changed user accounts, etc...)
         this.props.dispatcher.resetState();
     }
     public componentWillReceiveProps(nextProps: PortalProps) {
@@ -176,6 +179,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 injectedProviderName={this.props.injectedProviderName}
                                 providerType={this.props.providerType}
                                 onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                                onAddToken={this._onAddToken.bind(this)}
                             />
                         </div>
                         <div className="flex-auto px3" style={styles.scrollContainer}>
@@ -208,15 +212,44 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                             isOpen={this.state.isLedgerDialogOpen}
                         />
                     )}
+                    <AssetPicker
+                        userAddress={this.props.userAddress}
+                        networkId={this.props.networkId}
+                        blockchain={this._blockchain}
+                        dispatcher={this.props.dispatcher}
+                        isOpen={this.state.isAssetPickerDialogOpen}
+                        currentTokenAddress={''}
+                        onTokenChosen={this._onTokenChosen.bind(this)}
+                        tokenByAddress={this.props.tokenByAddress}
+                        tokenVisibility={TokenVisibility.UNTRACKED}
+                    />
                 </div>
             </div>
         );
     }
+    private _onTokenChosen(tokenAddress: string) {
+        if (_.isEmpty(tokenAddress)) {
+            this.setState({
+                isAssetPickerDialogOpen: false,
+            });
+            return;
+        }
+        const token = this.props.tokenByAddress[tokenAddress];
+        this.props.dispatcher.updateTokenByAddress([token]);
+        this.setState({
+            isAssetPickerDialogOpen: false,
+        });
+    }
     private _onToggleLedgerDialog() {
         this.setState({
             isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
         });
     }
+    private _onAddToken() {
+        this.setState({
+            isAssetPickerDialogOpen: !this.state.isAssetPickerDialogOpen,
+        });
+    }
     private _onPortalDisclaimerAccepted() {
         localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
         this.setState({
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 057c712e5..a28012aaf 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -55,11 +55,13 @@ export interface WalletProps {
     injectedProviderName: string;
     providerType: ProviderType;
     onToggleLedgerDialog: () => void;
+    onAddToken: () => void;
 }
 
 interface WalletState {
     trackedTokenStateByAddress: TokenStateByAddress;
     wrappedEtherDirection?: Side;
+    isHoveringSidebar: boolean;
 }
 
 interface AllowanceToggleConfig {
@@ -94,6 +96,9 @@ const styles: Styles = {
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
+        borderTopColor: colors.walletBorder,
+        borderTopStyle: 'solid',
+        borderWidth: 1,
     },
     borderedItem: {
         borderBottomColor: colors.walletBorder,
@@ -114,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';
@@ -139,6 +154,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         this.state = {
             trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
             wrappedEtherDirection: undefined,
+            isHoveringSidebar: false,
         };
     }
     public componentWillMount() {
@@ -184,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>
         );
@@ -230,9 +241,43 @@ 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 <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
+        return (
+            <ListItem
+                key={FOOTER_ITEM_KEY}
+                primaryText={primaryText}
+                innerDivStyle={styles.footerItemInnerDiv}
+                onClick={this.props.onAddToken}
+            />
+        );
     }
     private _renderEthRows() {
         const primaryText = this._renderAmount(
@@ -293,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,
@@ -310,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}>