spv: spv mode indicator on sidebar (#2666)

decred · Oct 7, 2020 · df39847 · df39847
1 parent 11875d9
commit df39847
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/app/components/SideBar/MenuBottom/MenuBottom.module.css b/app/components/SideBar/MenuBottom/MenuBottom.module.css
@@ -105,6 +105,21 @@
   animation: spin 1s linear infinite;
 }
 
+.spvIcon {
+  background-image: var(--enable-spv);
+  height: 1.6rem;
+  display: flex;
+  width: 1.6rem;
+  margin-left: 1rem;
+  align-items: center;
+  top: -1.3rem;
+  position: absolute;
+}
+
+.spvLabel {
+  display: block;
+}
+
 @media screen and (max-width: 768px) {
   .latestBlock {
     background-color: var(--sidebar-color);

diff --git a/app/components/SideBar/MenuBottom/MenuBottomCollapsed.jsx b/app/components/SideBar/MenuBottom/MenuBottomCollapsed.jsx
@@ -6,7 +6,8 @@ const MenuBottomCollapsed = ({
   rescanRequest,
   rescanAttempt,
   rescanCancel,
-  sidebarOnBottom
+  sidebarOnBottom,
+  isSPV
 }) => (
   <>
     {!sidebarOnBottom && (
@@ -20,6 +21,7 @@ const MenuBottomCollapsed = ({
           {rescanRequest && (
             <RescanCancelButton {...{ rescanRequest, rescanCancel }} />
           )}
+          {isSPV && <span className={style.spvLabel}>SPV</span>}
         </div>
       </div>
     )}

diff --git a/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx b/app/components/SideBar/MenuBottom/MenuBottomExpanded.jsx
@@ -4,7 +4,7 @@ import { RescanButton } from "buttons";
 import { RescanProgress } from "indicators";
 import LastBlockTime from "./LastBlockTime/LastBlockTime";
 import style from "./MenuBottom.module.css";
-import { classNames } from "pi-ui";
+import { classNames, Tooltip } from "pi-ui";
 
 const MenuBarExpanded = ({
   isShowingAccounts,
@@ -14,7 +14,8 @@ const MenuBarExpanded = ({
   rescanAttempt,
   lastBlockTimestamp,
   onShowAccounts,
-  onHideAccounts
+  onHideAccounts,
+  isSPV
 }) => (
   <div className={style.bottom}>
     <div
@@ -47,6 +48,11 @@ const MenuBarExpanded = ({
               {currentBlockHeight}
             </span>
           </a>
+          {isSPV && (
+            <Tooltip content={<T id="sidebar.spvMode" m="SPV Mode" />}>
+              <div className={style.spvIcon} />
+            </Tooltip>
+          )}
           <div className={style.latestBlockTime}>
             <LastBlockTime lastBlockTimestamp={lastBlockTimestamp} />
           </div>

diff --git a/app/components/SideBar/SideBar.jsx b/app/components/SideBar/SideBar.jsx
@@ -25,7 +25,8 @@ const SideBar = () => {
     onExpandSideBar,
     onReduceSideBar,
     rescanAttempt,
-    rescanCancel
+    rescanCancel,
+    isSPV
   } = useSideBar();
 
   return (
@@ -67,7 +68,8 @@ const SideBar = () => {
             rescanAttempt,
             lastBlockTimestamp,
             onShowAccounts,
-            onHideAccounts
+            onHideAccounts,
+            isSPV
           }}
         />
       ) : (
@@ -76,7 +78,8 @@ const SideBar = () => {
             rescanRequest,
             rescanAttempt,
             rescanCancel,
-            sidebarOnBottom
+            sidebarOnBottom,
+            isSPV
           }}
         />
       )}

diff --git a/app/components/SideBar/hooks.js b/app/components/SideBar/hooks.js
@@ -20,6 +20,7 @@ export function useSideBar() {
   const sidebarOnBottom = useSelector(sel.sidebarOnBottom);
   const accountMixerRunning = useSelector(sel.getAccountMixerRunning);
   const rescanRequest = useSelector(sel.rescanRequest);
+  const isSPV = useSelector(sel.isSPV);
 
   const dispatch = useDispatch();
 
@@ -53,6 +54,7 @@ export function useSideBar() {
     onExpandSideBar,
     onReduceSideBar,
     rescanAttempt,
-    rescanCancel
+    rescanCancel,
+    isSPV
   };
 }