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,28 +78,31 @@ export default class TokenBalances extends React.Component<Props, State> {
 
     return (
       <div>
-        {!hasSavedWalletTokens && (
+        {help && <p className="TokenBalances-help">{help}</p>}
-          <p className="TokenBalances-help">Select which tokens you would like to keep track of</p>
+
+        {tokenBalances.length ? (
+          <table className="TokenBalances-rows">
+            <tbody>
+              {tokenBalances.map(
+                token =>
+                  token ? (
+                    <TokenRow
+                      key={token.symbol}
+                      balance={token.balance}
+                      symbol={token.symbol}
+                      custom={token.custom}
+                      decimal={token.decimal}
+                      tracked={trackedTokens[token.symbol]}
+                      toggleTracked={!hasSavedWalletTokens && this.toggleTrack}
+                      onRemove={this.props.onRemoveCustomToken}
+                    />
+                  ) : null
+              )}
+            </tbody>
+          </table>
+        ) : (
+          <div className="well well-sm text-center">No tokens found</div>
         )}
-        <table className="TokenBalances-rows">
-          <tbody>
-            {tokenBalances.map(
-              token =>
-                token ? (
-                  <TokenRow
-                    key={token.symbol}
-                    balance={token.balance}
-                    symbol={token.symbol}
-                    custom={token.custom}
-                    decimal={token.decimal}
-                    tracked={trackedTokens[token.symbol]}
-                    toggleTracked={!hasSavedWalletTokens && this.toggleTrack}
-                    onRemove={this.props.onRemoveCustomToken}
-                  />
-                ) : null
-            )}
-          </tbody>
-        </table>
         {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 });
     }
   };
 }