Show warning when no tokens are found after scan (#711)

* Show warning when no tokens are found.

* Rework no tokens message so users can still add customs or scan for new ones.

common/components/BalanceSidebar/TokenBalances/Balances.tsx

@@ -40,7 +40,9 @@ export default class TokenBalances extends React.Component<Props, State> {
     const { showCustomTokenForm, trackedTokens } = this.state;
 
     let bottom;
-    if (!hasSavedWalletTokens) {
+    let help;
+    if (tokenBalances.length && !hasSavedWalletTokens) {
+      help = 'Select which tokens you would like to keep track of';
       bottom = (
         <div className="TokenBalances-buttons">
           <button className="btn btn-primary btn-block" onClick={this.handleSetWalletTokens}>
@@ -76,9 +78,9 @@ export default class TokenBalances extends React.Component<Props, State> {
 
     return (
       <div>
-        {!hasSavedWalletTokens && (
-          <p className="TokenBalances-help">Select which tokens you would like to keep track of</p>
-        )}
+        {help && <p className="TokenBalances-help">{help}</p>}
+
+        {tokenBalances.length ? (
           <table className="TokenBalances-rows">
             <tbody>
               {tokenBalances.map(
@@ -98,6 +100,9 @@ export default class TokenBalances extends React.Component<Props, State> {
               )}
             </tbody>
           </table>
+        ) : (
+          <div className="well well-sm text-center">No tokens found</div>
+        )}
         {bottom}
       </div>
     );

common/components/BalanceSidebar/TokenBalances/index.scss

@@ -14,6 +14,11 @@
     margin-top: 10px;
   }
 
+  &-none {
+    text-align: center;
+    margin-bottom: -5px;
+  }
+
   &-loader {
     padding: 25px 0;
     text-align: center;

common/components/BalanceSidebar/TokenBalances/index.tsx

@@ -38,7 +38,7 @@ interface ActionProps {
 }
 type Props = StateProps & ActionProps;
 
-class TokenBalances extends React.Component<Props, {}> {
+class TokenBalances extends React.Component<Props> {
   public render() {
     const {
       tokens,
@@ -96,6 +96,7 @@ class TokenBalances extends React.Component<Props, {}> {
   private scanWalletForTokens = () => {
     if (this.props.wallet) {
       this.props.scanWalletForTokens(this.props.wallet);
+      this.setState({ hasScanned: true });
     }
   };
 }