Merge branch 'development' into feature/0x.js/lowercase-addresses

4 files changed, 184 insertions, 127 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a0f1a0c96..810460cac 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,9 +1,13 @@
 import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { WebsitePaths } from 'ts/types';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 
 interface MenuItemsBySection {
     [sectionName: string]: FooterMenuItem[];
@@ -15,105 +19,114 @@ interface FooterMenuItem {
     isExternal?: boolean;
 }
 
-enum Sections {
-    Documentation = 'Documentation',
-    Community = 'Community',
-    Organization = 'Organization',
-}
-
 const ICON_DIMENSION = 16;
-const menuItemsBySection: MenuItemsBySection = {
-    Documentation: [
-        {
-            title: '0x.js',
-            path: WebsitePaths.ZeroExJs,
-        },
-        {
-            title: '0x Smart Contracts',
-            path: WebsitePaths.SmartContracts,
-        },
-        {
-            title: '0x Connect',
-            path: WebsitePaths.Connect,
-        },
-        {
-            title: 'Whitepaper',
-            path: WebsitePaths.Whitepaper,
-            isExternal: true,
-        },
-        {
-            title: 'Wiki',
-            path: WebsitePaths.Wiki,
-        },
-        {
-            title: 'FAQ',
-            path: WebsitePaths.FAQ,
-        },
-    ],
-    Community: [
-        {
-            title: 'Rocket.chat',
-            isExternal: true,
-            path: constants.URL_ZEROEX_CHAT,
-        },
-        {
-            title: 'Blog',
-            isExternal: true,
-            path: constants.URL_BLOG,
-        },
-        {
-            title: 'Twitter',
-            isExternal: true,
-            path: constants.URL_TWITTER,
-        },
-        {
-            title: 'Reddit',
-            isExternal: true,
-            path: constants.URL_REDDIT,
-        },
-        {
-            title: 'Forum',
-            isExternal: true,
-            path: constants.URL_DISCOURSE_FORUM,
-        },
-    ],
-    Organization: [
-        {
-            title: 'About',
-            isExternal: false,
-            path: WebsitePaths.About,
-        },
-        {
-            title: 'Careers',
-            isExternal: true,
-            path: constants.URL_ANGELLIST,
-        },
-        {
-            title: 'Contact',
-            isExternal: true,
-            path: 'mailto:team@0xproject.com',
-        },
-    ],
-};
+
 const linkStyle = {
     color: colors.white,
     cursor: 'pointer',
 };
 
-const titleToIcon: { [title: string]: string } = {
-    'Rocket.chat': 'rocketchat.png',
-    Blog: 'medium.png',
-    Twitter: 'twitter.png',
-    Reddit: 'reddit.png',
-    Forum: 'discourse.png',
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
 };
 
-export interface FooterProps {}
+export interface FooterProps {
+    translate: Translate;
+    dispatcher: Dispatcher;
+}
 
-interface FooterState {}
+interface FooterState {
+    selectedLanguage: Language;
+}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
+    constructor(props: FooterProps) {
+        super();
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
     public render() {
+        const menuItemsBySection: MenuItemsBySection = {
+            [Key.Documentation]: [
+                {
+                    title: '0x.js',
+                    path: WebsitePaths.ZeroExJs,
+                },
+                {
+                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
+                    path: WebsitePaths.SmartContracts,
+                },
+                {
+                    title: this.props.translate.get(Key.Connect, Deco.Cap),
+                    path: WebsitePaths.Connect,
+                },
+                {
+                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
+                    path: WebsitePaths.Whitepaper,
+                    isExternal: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
+                    path: WebsitePaths.Wiki,
+                },
+                {
+                    title: this.props.translate.get(Key.Faq, Deco.Cap),
+                    path: WebsitePaths.FAQ,
+                },
+            ],
+            [Key.Community]: [
+                {
+                    title: this.props.translate.get(Key.RocketChat, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_ZEROEX_CHAT,
+                },
+                {
+                    title: this.props.translate.get(Key.Blog, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_BLOG,
+                },
+                {
+                    title: 'Twitter',
+                    isExternal: true,
+                    path: constants.URL_TWITTER,
+                },
+                {
+                    title: 'Reddit',
+                    isExternal: true,
+                    path: constants.URL_REDDIT,
+                },
+                {
+                    title: this.props.translate.get(Key.Forum, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_DISCOURSE_FORUM,
+                },
+            ],
+            [Key.Organization]: [
+                {
+                    title: this.props.translate.get(Key.About, Deco.Cap),
+                    isExternal: false,
+                    path: WebsitePaths.About,
+                },
+                {
+                    title: this.props.translate.get(Key.Careers, Deco.Cap),
+                    isExternal: true,
+                    path: constants.URL_ANGELLIST,
+                },
+                {
+                    title: this.props.translate.get(Key.Contact, Deco.Cap),
+                    isExternal: true,
+                    path: 'mailto:team@0xproject.com',
+                },
+            ],
+        };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
         return (
             <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -132,25 +145,34 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                             >
                                 © ZeroEx, Intl.
                             </div>
+                            <div className="pt4 center">
+                                <DropDownMenu
+                                    labelStyle={{ color: colors.white }}
+                                    value={this.state.selectedLanguage}
+                                    onChange={this._updateLanguage.bind(this)}
+                                >
+                                    {languageMenuItems}
+                                </DropDownMenu>
+                            </div>
                         </div>
                     </div>
                     <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Documentation)}
-                                {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Documentation)}
+                                {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Community)}
-                                {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Community)}
+                                {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Sections.Organization)}
-                                {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
+                                {this._renderHeader(Key.Organization)}
+                                {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                     </div>
@@ -166,17 +188,22 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         );
     }
     private _renderMenuItem(item: FooterMenuItem) {
+        const titleToIcon: { [title: string]: string } = {
+            [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
+            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+            Twitter: 'twitter.png',
+            Reddit: 'reddit.png',
+            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+        };
         const iconIfExists = titleToIcon[item.title];
         return (
             <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
                 {item.isExternal ? (
                     <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
                         {!_.isUndefined(iconIfExists) ? (
-                            <div className="sm-mx-auto" style={{ width: 65 }}>
-                                <div className="flex">
-                                    <div className="pr1">{this._renderIcon(iconIfExists)}</div>
-                                    <div>{item.title}</div>
-                                </div>
+                            <div className="inline-block">
+                                <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
+                                <div className="table-cell">{item.title}</div>
                             </div>
                         ) : (
                             item.title
@@ -195,9 +222,8 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
-    private _renderHeader(title: string) {
+    private _renderHeader(key: Key) {
         const headerStyle = {
-            textTransform: 'uppercase',
             color: colors.grey400,
             letterSpacing: 2,
             fontFamily: 'Roboto Mono',
@@ -205,8 +231,14 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         };
         return (
             <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
-                {title}
+                {this.props.translate.get(key, Deco.Upper)}
             </div>
         );
     }
+    private _updateLanguage(e: any, index: number, value: Language) {
+        this.setState({
+            selectedLanguage: value,
+        });
+        this.props.dispatcher.updateSelectedLanguage(value);
+    }
 }
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 0409f28c0..4871997ac 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -27,6 +27,7 @@ import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAdd
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const THROTTLE_TIMEOUT = 100;
@@ -52,6 +53,7 @@ export interface PortalAllProps {
     location: Location;
     flashMessage?: string | React.ReactNode;
     lastForceTokenStateRefetch: number;
+    translate: Translate;
 }
 
 interface PortalAllState {
@@ -166,6 +168,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                     blockchainIsLoaded={this.props.blockchainIsLoaded}
                     location={this.props.location}
                     blockchain={this._blockchain}
+                    translate={this.props.translate}
                 />
                 <div id="portal" className="mx-auto max-width-4" style={{ width: '100%' }}>
                     <Paper className="mb3 mt2">
@@ -259,7 +262,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                         />
                     )}
                 </div>
-                <Footer />;
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index a412007f2..2723c2218 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -14,9 +14,10 @@ import { Identicon } from 'ts/components/ui/identicon';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { DocsMenu, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types';
+import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
 
 interface TopBarProps {
     userAddress?: string;
@@ -28,6 +29,7 @@ interface TopBarProps {
     dispatcher?: Dispatcher;
     blockchainIsLoaded: boolean;
     location: Location;
+    translate: Translate;
     docsVersion?: string;
     availableDocVersions?: string[];
     menu?: DocsMenu;
@@ -95,10 +97,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
             </Link>,
             <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Smart Contracts" />
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)}
+                />
             </Link>,
             <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x Connect" />
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)}
+                />
             </Link>,
             <a
                 key="subMenuItem-standard-relayer-api"
@@ -106,7 +114,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 className="text-decoration-none"
                 href={constants.URL_STANDARD_RELAYER_API_GITHUB}
             >
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" />
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)}
+                />
             </a>,
             <a
                 key="subMenuItem-github"
@@ -122,7 +133,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 className="text-decoration-none"
                 href={`${WebsitePaths.Whitepaper}`}
             >
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" />
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
+                />
             </a>,
         ];
         const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
@@ -137,7 +151,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         };
         const hoverActiveNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>Developers</div>
+                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
                 <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
                     <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
                 </div>
@@ -165,28 +179,28 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     style={styles.menuItem}
                                 />
                                 <TopBarMenuItem
-                                    title="Wiki"
+                                    title={this.props.translate.get(Key.Wiki, Deco.Cap)}
                                     path={`${WebsitePaths.Wiki}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
                                     isExternal={false}
                                 />
                                 <TopBarMenuItem
-                                    title="Blog"
+                                    title={this.props.translate.get(Key.Blog, Deco.Cap)}
                                     path={constants.URL_BLOG}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
                                     isExternal={true}
                                 />
                                 <TopBarMenuItem
-                                    title="About"
+                                    title={this.props.translate.get(Key.About, Deco.Cap)}
                                     path={`${WebsitePaths.About}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
                                     isExternal={false}
                                 />
                                 <TopBarMenuItem
-                                    title="Portal DApp"
+                                    title={this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
                                     path={`${WebsitePaths.Portal}`}
                                     isPrimary={true}
                                     style={styles.menuItem}
@@ -233,46 +247,54 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     {this._renderDocsMenu()}
                     {this._renderWiki()}
                     <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
-                        Website
+                        {this.props.translate.get(Key.Website, Deco.Cap)}
                     </div>
                     <Link to={WebsitePaths.Home} className="text-decoration-none">
-                        <MenuItem className="py2">Home</MenuItem>
+                        <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem>
                     </Link>
                     <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
-                        <MenuItem className="py2">Wiki</MenuItem>
+                        <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
                     </Link>
                     {!this._isViewing0xjsDocs() && (
                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                            <MenuItem className="py2">0x.js Docs</MenuItem>
+                            <MenuItem className="py2">0x.js {this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem>
                         </Link>
                     )}
                     {!this._isViewingConnectDocs() && (
                         <Link to={WebsitePaths.Connect} className="text-decoration-none">
-                            <MenuItem className="py2">0x Connect Docs</MenuItem>
+                            <MenuItem className="py2">
+                                {this.props.translate.get(Key.Connect, Deco.Cap)}{' '}
+                                {this.props.translate.get(Key.Docs, Deco.Cap)}
+                            </MenuItem>
                         </Link>
                     )}
                     {!this._isViewingSmartContractsDocs() && (
                         <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
-                            <MenuItem className="py2">Smart Contract Docs</MenuItem>
+                            <MenuItem className="py2">
+                                {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '}
+                                {this.props.translate.get(Key.Docs, Deco.Cap)}
+                            </MenuItem>
                         </Link>
                     )}
                     {!this._isViewingPortal() && (
                         <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
-                            <MenuItem className="py2">Portal DApp</MenuItem>
+                            <MenuItem className="py2">
+                                {this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
+                            </MenuItem>
                         </Link>
                     )}
                     <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
-                        <MenuItem className="py2">Whitepaper</MenuItem>
+                        <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem>
                     </a>
                     <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
-                        <MenuItem className="py2">About</MenuItem>
+                        <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
                     </Link>
                     <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
-                        <MenuItem className="py2">Blog</MenuItem>
+                        <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
                     </a>
                     <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
                         <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
-                            FAQ
+                            {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </MenuItem>
                     </Link>
                 </div>
@@ -313,7 +335,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
-                    title="Wiki"
+                    title={this.props.translate.get(Key.Wiki, Deco.Cap)}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                 />
@@ -328,7 +350,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         return (
             <div className="lg-hide md-hide">
                 <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
-                    Portal DApp
+                    {this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
                 </div>
                 <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} />
             </div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 983050abc..e70381456 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -34,7 +34,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                   marginTop: 15,
                   paddingLeft: 9,
                   paddingRight: 9,
-                  width: 77,
+                  minWidth: 77,
               }
             : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;