Automatically track custom tokens (#1769)

common/components/BalanceSidebar/TokenBalances/Balances.tsx

@@ -20,7 +20,7 @@ interface TrackedTokens {
 }
 
 interface State {
-  trackedTokens: { [symbol: string]: boolean };
+  trackedTokens: TrackedTokens;
   showCustomTokenForm: boolean;
 }
 export default class TokenBalances extends React.PureComponent<Props, State> {
@@ -32,7 +32,7 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
   public UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.tokenBalances !== this.props.tokenBalances) {
       const trackedTokens = nextProps.tokenBalances.reduce<TrackedTokens>((prev, t) => {
-        prev[t.symbol] = !t.balance.isZero();
+        prev[t.symbol] = !t.balance.isZero() || t.custom;
         return prev;
       }, {});
       this.setState({ trackedTokens });
@@ -45,7 +45,7 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
 
     let bottom;
     let help;
-    if (tokenBalances.length && !hasSavedWalletTokens) {
+    if (tokenBalances.length && !hasSavedWalletTokens && !this.onlyCustomTokens()) {
       help = 'Select which tokens you would like to keep track of';
       bottom = (
         <div className="TokenBalances-buttons">
@@ -134,6 +134,24 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
     });
   };
 
+  /**
+   *
+   * @description Checks if all currently tracked tokens are custom
+   * @private
+   * @returns
+   * @memberof TokenBalances
+   */
+  private onlyCustomTokens() {
+    const tokenMap = this.props.tokenBalances.reduce<{ [key: string]: TokenBalance }>(
+      (acc, cur) => ({ ...acc, [cur.symbol]: cur }),
+      {}
+    );
+
+    return Object.keys(this.state.trackedTokens).reduce(
+      (prev, tokenName) => tokenMap[tokenName].custom && prev,
+      true
+    );
+  }
   private addCustomToken = (token: Token) => {
     this.props.onAddCustomToken(token);
     this.setState({ showCustomTokenForm: false });

common/components/BalanceSidebar/TokenBalances/TokenRow.tsx

@@ -30,11 +30,14 @@ export default class TokenRow extends React.PureComponent<Props, State> {
 
     return (
       <tr className="TokenRow" onClick={this.handleToggleTracked}>
-        {this.props.toggleTracked && (
-          <td className="TokenRow-toggled">
-            <input type="checkbox" checked={tracked} />
-          </td>
-        )}
+        {/* Only allow to toggle tracking on non custom tokens
+        because the user can just remove the custom token instead */}
+        {!this.props.custom &&
+          this.props.toggleTracked && (
+            <td className="TokenRow-toggled">
+              <input type="checkbox" checked={tracked} />
+            </td>
+          )}
         <td
           className="TokenRow-balance"
           title={`${balance.toString()} (Double-Click)`}