Add contract-wrappers page and make topBar component more concise

1 files changed, 38 insertions, 117 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 646d3fc94..d2f530fb5 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -74,6 +74,18 @@ const styles: Styles = {
     },
 };
 
+const DOC_WEBSITE_PATHS_TO_KEY = {
+    [WebsitePaths.SolCov]: Key.SolCov,
+    [WebsitePaths.SmartContracts]: Key.SmartContracts,
+    [WebsitePaths.Web3Wrapper]: Key.Web3Wrapper,
+    [WebsitePaths.SolCompiler]: Key.SolCompiler,
+    [WebsitePaths.JSONSchemas]: Key.JsonSchemas,
+    [WebsitePaths.Subproviders]: Key.Subproviders,
+    [WebsitePaths.ContractWrappers]: Key.ContractWrappers,
+    [WebsitePaths.Connect]: Key.Connect,
+    [WebsitePaths.ZeroExJs]: Key.ZeroExJs,
+}
+
 const DEFAULT_HEIGHT = 68;
 const EXPANDED_HEIGHT = 75;
 
@@ -154,6 +166,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
                 />
             </Link>,
+            <Link key="subMenuItem-contractWrappers" to={WebsitePaths.ContractWrappers} className="text-decoration-none">
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)}
+                />
+            </Link>,
             <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
                 <MenuItem
                     style={{ fontSize: styles.menuItem.fontSize }}
@@ -334,75 +352,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
                         <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 {this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingConnectDocs() && (
-                        <Link to={WebsitePaths.Connect} className="text-decoration-none">
-                            <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">
-                                {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingWeb3WrapperDocs() && (
-                        <Link to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.Web3Wrapper, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingSolCompilerDocs() && (
-                        <Link to={WebsitePaths.SolCompiler} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.SolCompiler, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingJsonSchemasDocs() && (
-                        <Link to={WebsitePaths.JSONSchemas} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.JsonSchemas, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingSolCovDocs() && (
-                        <Link to={WebsitePaths.SolCov} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.SolCov, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingSubprovidersDocs() && (
-                        <Link to={WebsitePaths.Subproviders} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.Subproviders, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
-                    {!this._isViewingEthereumTypesDocs() && (
-                        <Link to={WebsitePaths.EthereumTypes} className="text-decoration-none">
-                            <MenuItem className="py2">
-                                {this.props.translate.get(Key.EthereumTypes, Deco.Cap)}{' '}
-                                {this.props.translate.get(Key.Docs, Deco.Cap)}
-                            </MenuItem>
-                        </Link>
-                    )}
+                    {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => {
+                        if (!this._doesUrlInclude(websitePath)) {
+                            <Link to={websitePath} className="text-decoration-none">
+                                <MenuItem className="py2">
+                                    {this.props.translate.get(key, 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">
@@ -429,15 +388,11 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         );
     }
     private _renderDocsMenu(): React.ReactNode {
+        const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
+            return this._doesUrlInclude(websitePath);
+        });
         if (
-            (!this._isViewing0xjsDocs() &&
-                !this._isViewingSmartContractsDocs() &&
-                !this._isViewingWeb3WrapperDocs() &&
-                !this._isViewingSolCompilerDocs() &&
-                !this._isViewingJsonSchemasDocs() &&
-                !this._isViewingSolCovDocs() &&
-                !this._isViewingSubprovidersDocs() &&
-                !this._isViewingConnectDocs()) ||
+            !isViewingDocsPage ||
             _.isUndefined(this.props.menu)
         ) {
             return undefined;
@@ -488,55 +443,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     private _isViewingFAQ(): boolean {
         return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
     }
-    private _isViewing0xjsDocs(): boolean {
-        return (
-            _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs) ||
-            _.includes(this.props.location.pathname, WebsiteLegacyPaths.ZeroExJs)
-        );
-    }
-    private _isViewingConnectDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.Connect);
-    }
-    private _isViewingSmartContractsDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
-    }
-    private _isViewingWeb3WrapperDocs(): boolean {
-        return (
-            _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper) ||
-            _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper)
-        );
-    }
-    private _isViewingSolCompilerDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler);
-    }
-    private _isViewingJsonSchemasDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas);
-    }
-    private _isViewingSolCovDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.SolCov);
-    }
-    private _isViewingSubprovidersDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.Subproviders);
-    }
-    private _isViewingEthereumTypesDocs(): boolean {
-        return _.includes(this.props.location.pathname, WebsitePaths.EthereumTypes);
+    private _doesUrlInclude(aPath: string): boolean {
+        return _.includes(this.props.location.pathname, aPath);
     }
     private _isViewingWiki(): boolean {
         return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
     }
     private _shouldDisplayBottomBar(): boolean {
+        const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
+            return this._doesUrlInclude(websitePath);
+        });
         return (
+            isViewingDocsPage ||
             this._isViewingWiki() ||
             this._isViewingFAQ() ||
             this._isViewingDocs() ||
-            this._isViewing0xjsDocs() ||
-            this._isViewingSmartContractsDocs() ||
-            this._isViewingWeb3WrapperDocs() ||
-            this._isViewingSolCompilerDocs() ||
-            this._isViewingJsonSchemasDocs() ||
-            this._isViewingSolCovDocs() ||
-            this._isViewingSubprovidersDocs() ||
-            this._isViewingConnectDocs() ||
             this._isViewingPortal()
         );
     }