[sidebar] Disabled Dex menu with tooltip in SPV mode (#3505)

decred · Jun 11, 2021 · d93b57b · d93b57b
1 parent f448243
commit d93b57b
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 80 deletions.
diff --git a/app/components/SideBar/MenuLinks/MenuLinks.jsx b/app/components/SideBar/MenuLinks/MenuLinks.jsx
@@ -24,19 +24,28 @@ const MenuLinks = () => {
           sidebarOnBottom && styles.onBottom
         )}>
         {menuLinks.map((menuLink, index) => {
-          const menuLinkLabel = (text) => (
+          const menuLinkLabel = () => (
             <div
-              className={styles.menuLinkLabel}
-              data-testid={`menuLinkLabel-${menuLink.icon}`}>
-              {text}
+              className={styles.menuContent}
+              data-testid={`menuLinkContent-${menuLink.icon}`}>
+              <div
+                className={classNames(
+                  styles.icon,
+                  styles[`${menuLink.icon}Icon`]
+                )}
+              />
+              {expandSideBar && !sidebarOnBottom && (
+                <div className={styles.menuLinkLabel}>{menuLink.link}</div>
+              )}
             </div>
           );
           const label =
-            expandSideBar && !sidebarOnBottom ? (
-              menuLinkLabel(menuLink.link)
+            expandSideBar && !sidebarOnBottom && !menuLink.disabled ? (
+              menuLinkLabel()
             ) : (
               <Tooltip
-                content={menuLink.link}
+                contentClassName={styles.tooltip}
+                content={menuLink.tooltip ?? menuLink.link}
                 placement={sidebarOnBottom ? "top" : "right"}>
                 {menuLinkLabel()}
               </Tooltip>
@@ -50,10 +59,10 @@ const MenuLinks = () => {
                 key={menuLink.path}
                 className={classNames(
                   styles.tab,
-                  styles[`${menuLink.icon}Icon`],
                   expandSideBar && styles.expanded,
                   sidebarOnBottom && styles.onBottom,
-                  menuLink.notifProp && styles.notificationIcon
+                  menuLink.notifProp && styles.notificationIcon,
+                  menuLink.disabled && styles.disabled
                 )}
               />
             )

diff --git a/app/components/SideBar/MenuLinks/MenuLinks.module.css b/app/components/SideBar/MenuLinks/MenuLinks.module.css
@@ -1,54 +1,65 @@
 .tabs {
   overflow: visible !important;
 }
-.tabs.expanded {
-  overflow: auto !important;
-}
 .tabs.onBottom.expanded {
   overflow: visible !important;
 }
 .tab {
-  background-position: 13px 50%;
-  background-size: 22px;
-  background-repeat: no-repeat;
   height: 56px;
   min-height: 56px !important;
   margin-top: 0 !important;
   border-width: 5px !important;
   padding-left: 0 !important;
   font-size: 15px !important;
 }
-.tabs.expanded .tab span {
-  padding-left: 55px !important;
+.tab span {
+  height: inherit;
+}
+.tab.disabled {
+  cursor: not-allowed;
+}
+.menuContent {
+  display: flex;
+  flex-direction: row;
 }
 .tabs.onBottom.expanded .tab span {
   padding-left: 0 !important;
 }
-.tab.ticketsIcon {
+.icon {
+  background-position: 50%;
+  background-size: 22px;
+  background-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+}
+.tab.disabled .icon {
+  opacity: 0.2;
+}
+.icon.ticketsIcon {
   background-image: var(--menu-tickets);
 }
-.tab.transactionsIcon {
+.icon.transactionsIcon {
   background-image: var(--menu-transactions);
 }
-.tab.trezorIcon {
+.icon.trezorIcon {
   background-image: var(--menu-trezor);
 }
-.tab.accountsIcon {
+.icon.accountsIcon {
   background-image: var(--menu-accounts);
 }
-.tab.securitycntrIcon {
+.icon.securitycntrIcon {
   background-image: var(--menu-privacy);
 }
-.tab.overviewIcon {
+.icon.overviewIcon {
   background-image: var(--menu-overview);
 }
-.tab.governanceIcon {
+.icon.governanceIcon {
   background-image: var(--menu-governance);
 }
-.tab.lnIcon {
+.icon.lnIcon {
   background-image: var(--menu-ln);
 }
-.tab.dexIcon {
+.icon.dexIcon {
   background-image: var(--menu-dex);
 }
 .tab.notificationIcon::before {
@@ -68,21 +79,38 @@
   background-color: var(--stroke-color-focused);
 }
 .menuLinkLabel {
-  width: 56px;
+  width: 55px;
   height: 56px;
   line-height: 56px;
 }
+.tabs.expanded .menuLinkLabel {
+  width: auto;
+  padding-right: 10px;
+}
+.tab.disabled .tooltip {
+  width: 18rem;
+  white-space: break-spaces;
+  text-align: center;
+}
+.tab.disabled .menuLinkLabel {
+  opacity: 0.3;
+  color: var(--text-color) !important;
+}
+
 @media screen and (max-width: 768px) {
   .tabs {
     margin: 0 auto;
   }
   .tab {
     height: 64px;
     width: 64px;
-    background-position: 50%;
     margin-right: 0 !important;
     padding: 0 !important;
   }
+  .icon {
+    background-position: 50% 60%;
+    width: 64px;
+  }
   .tab.notificationIcon::before {
     margin-left: 33px;
     margin-top: -14px;

diff --git a/app/components/SideBar/MenuLinks/hooks.js b/app/components/SideBar/MenuLinks/hooks.js
@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import * as sel from "selectors";
 import { linkList, TREZOR_KEY, LN_KEY, DEX_KEY } from "./Links";
 import { useHistory } from "react-router-dom";
+import { FormattedMessage as T } from "react-intl";
 
 export function useMenuLinks() {
   const location = useSelector(sel.location);
@@ -39,9 +40,23 @@ export function useMenuLinks() {
     if (!lnEnabled) {
       links = links.filter((l) => l.key !== LN_KEY);
     }
-    if (isSPV || isTrezor) {
+    if (isTrezor) {
       links = links.filter((l) => l.key !== DEX_KEY);
     }
+    if (isSPV) {
+      links = links.map((l) => {
+        if (l.key === DEX_KEY) {
+          l.disabled = true;
+          l.tooltip = (
+            <T
+              id="sidebar.link.disabledDexTooltip"
+              m="DEX not available while using SPV. Please go to settings and disable SPV to access the DEX."
+            />
+          );
+        }
+        return l;
+      });
+    }
 
     return links;
   };
@@ -56,8 +71,10 @@ export function useMenuLinks() {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
   const history = useHistory();
   const onSelectTab = (index) => {
-    setActiveTabIndex(index);
-    history.push(menuLinks[index].path);
+    if (!menuLinks[index].disabled) {
+      setActiveTabIndex(index);
+      history.push(menuLinks[index].path);
+    }
   };
 
   useEffect(() => {

diff --git a/app/components/SideBar/SideBar.module.css b/app/components/SideBar/SideBar.module.css
@@ -32,15 +32,10 @@
 .sidebarMain {
   position: relative;
   flex: 1;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-.sidebar.sidebarReduced .sidebarMain {
-  overflow: visible;
-}
-
 .watchOnlyIcon {
   width: 16px;
   height: 16px;