Hide token balance when syncing

packages/fether-react/src/Tokens/TokensList/TokensList.js

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-
+import RequireHealth from '../../RequireHealthOverlay';
 import TokenBalance from './TokenBalance';
 import withTokens from '../../utils/withTokens';
 
@@ -17,20 +17,22 @@ class TokensList extends Component {
     const shownArray = tokensArray.length ? tokensArray : [{}];
 
     return (
-      <div className='window_content'>
-        <div className='box -scroller'>
-          <ul className='list -padded'>
-            {shownArray.map((
-              token,
-              index // With empty tokens, the token.address is not defined, so we prefix with index
-            ) => (
-              <li key={`${index}-${token.address}`}>
-                <TokenBalance token={token} />
-              </li>
-            ))}
-          </ul>
+      <RequireHealth require='sync'>
+        <div className='window_content'>
+          <div className='box -scroller'>
+            <ul className='list -padded'>
+              {shownArray.map((
+                token,
+                index // With empty tokens, the token.address is not defined, so we prefix with index
+              ) => (
+                <li key={`${index}-${token.address}`}>
+                  <TokenBalance token={token} />
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
-      </div>
+      </RequireHealth>
     );
   }
 }

packages/fether-react/src/assets/sass/components/_alert-screen.scss

@@ -5,6 +5,8 @@
   right: 0;
   bottom: 0;
   height: auto;
+  background: $chrome;
+  z-index: 1;
 
   display: flex;
   align-items: center;
@@ -41,7 +43,7 @@
 
     p {
       color: $grey;
-      font-size: .8rem;
+      font-size: 0.8rem;
       line-height: 1.4;
     }
   }