Add Web3Wrapper docs to website

1 files changed, 22 insertions, 1 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 29c68524c..ec8a69a9b 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -139,6 +139,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
                 />
             </a>,
+            <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
+                />
+            </Link>,
         ];
         const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
         const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
@@ -277,6 +283,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                             </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._isViewingPortal() && (
                         <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
                             <MenuItem className="py2">
@@ -304,7 +318,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     }
     private _renderDocsMenu(): React.ReactNode {
         if (
-            (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) ||
+            (!this._isViewing0xjsDocs() &&
+                !this._isViewingSmartContractsDocs() &&
+                !this._isViewingWeb3WrapperDocs() &&
+                !this._isViewingConnectDocs()) ||
             _.isUndefined(this.props.menu)
         ) {
             return undefined;
@@ -392,6 +409,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     private _isViewingSmartContractsDocs() {
         return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
     }
+    private _isViewingWeb3WrapperDocs() {
+        return _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper);
+    }
     private _isViewingWiki() {
         return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
     }
@@ -401,6 +421,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             this._isViewing0xjsDocs() ||
             this._isViewingFAQ() ||
             this._isViewingSmartContractsDocs() ||
+            this._isViewingWeb3WrapperDocs() ||
             this._isViewingConnectDocs()
         );
     }