Convert ConfirmAddSuggestedToken to a functional component + cleanup (#13377)

* FC: ConfirmAddSuggestedToken
- change class to functional component

* clean: reorganize functions (no logic change)

* FC: ConfirmAddSuggestedToken pt. 2
- preserve trackEvent logic -> metricsEvent

* clean: rm _ prefix from fn name
- why? now, only 3 other functions remain prefixed w/ '_'

* clean: update useEffect hook

* clean: alphabetize props

* clean: functions in ConfirmAddSuggestedToken

* clean: use arrow fn for FC

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js

@@ -1,94 +1,100 @@
-import React, { Component } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../components/ui/button';
 import Identicon from '../../components/ui/identicon';
 import TokenBalance from '../../components/ui/token-balance';
+import { I18nContext } from '../../contexts/i18n';
+import { MetaMetricsContext } from '../../contexts/metametrics';
 import { isEqualCaseInsensitive } from '../../helpers/utils/util';
 
-export default class ConfirmAddSuggestedToken extends Component {
+function getTokenName(name, symbol) {
-  static contextTypes = {
-    t: PropTypes.func,
-    trackEvent: PropTypes.func,
-  };
-
-  static propTypes = {
-    history: PropTypes.object,
-    acceptWatchAsset: PropTypes.func,
-    rejectWatchAsset: PropTypes.func,
-    mostRecentOverviewPage: PropTypes.string.isRequired,
-    suggestedAssets: PropTypes.array,
-    tokens: PropTypes.array,
-  };
-
-  componentDidMount() {
-    this._checksuggestedAssets();
-  }
-
-  componentDidUpdate() {
-    this._checksuggestedAssets();
-  }
-
-  _checksuggestedAssets() {
-    const {
-      mostRecentOverviewPage,
-      suggestedAssets = [],
-      history,
-    } = this.props;
-
-    if (suggestedAssets.length > 0) {
-      return;
-    }
-
-    history.push(mostRecentOverviewPage);
-  }
-
-  getTokenName(name, symbol) {
   return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
 }
-
+const ConfirmAddSuggestedToken = (props) => {
-  render() {
   const {
-      suggestedAssets,
+    acceptWatchAsset,
-      tokens,
-      rejectWatchAsset,
     history,
     mostRecentOverviewPage,
-      acceptWatchAsset,
+    rejectWatchAsset,
-    } = this.props;
-
-    const hasTokenDuplicates = this.checkTokenDuplicates(
     suggestedAssets,
     tokens,
+  } = props;
+
+  const metricsEvent = useContext(MetaMetricsContext);
+  const t = useContext(I18nContext);
+
+  const tokenAddedEvent = (asset) => {
+    metricsEvent({
+      event: 'Token Added',
+      category: 'Wallet',
+      sensitiveProperties: {
+        token_symbol: asset.symbol,
+        token_contract_address: asset.address,
+        token_decimal_precision: asset.decimals,
+        unlisted: asset.unlisted,
+        source: 'dapp',
+      },
+    });
+  };
+
+  /**
+   * Returns true if any suggestedAssets both:
+   * - Share a symbol with an existing `tokens` member.
+   * - Does not share an address with that same `tokens` member.
+   * This should be flagged as possibly deceptive or confusing.
+   */
+  const checkNameReuse = () => {
+    const duplicates = suggestedAssets.filter(({ asset }) => {
+      const dupes = tokens.filter(
+        (old) =>
+          old.symbol === asset.symbol &&
+          !isEqualCaseInsensitive(old.address, asset.address),
       );
-    const reusesName = this.checkNameReuse(suggestedAssets, tokens);
+      return dupes.length > 0;
+    });
+    return duplicates.length > 0;
+  };
+
+  const checkTokenDuplicates = () => {
+    const pending = suggestedAssets.map(({ asset }) =>
+      asset.address.toUpperCase(),
+    );
+    const existing = tokens.map((token) => token.address.toUpperCase());
+    const dupes = pending.filter((proposed) => {
+      return existing.includes(proposed);
+    });
+
+    return dupes.length > 0;
+  };
+
+  const hasTokenDuplicates = checkTokenDuplicates();
+  const reusesName = checkNameReuse();
+
+  useEffect(() => {
+    if (!suggestedAssets.length) {
+      history.push(mostRecentOverviewPage);
+    }
+  }, [history, suggestedAssets, mostRecentOverviewPage]);
 
   return (
     <div className="page-container">
       <div className="page-container__header">
-          <div className="page-container__title">
+        <div className="page-container__title">{t('addSuggestedTokens')}</div>
-            {this.context.t('addSuggestedTokens')}
-          </div>
         <div className="page-container__subtitle">
-            {this.context.t('likeToImportTokens')}
+          {t('likeToImportTokens')}
         </div>
         {hasTokenDuplicates ? (
-            <div className="warning">{this.context.t('knownTokenWarning')}</div>
+          <div className="warning">{t('knownTokenWarning')}</div>
         ) : null}
         {reusesName ? (
-            <div className="warning">
+          <div className="warning">{t('reusedTokenNameWarning')}</div>
-              {this.context.t('reusedTokenNameWarning')}
-            </div>
         ) : null}
       </div>
       <div className="page-container__content">
         <div className="confirm-import-token">
           <div className="confirm-import-token__header">
-              <div className="confirm-import-token__token">
+            <div className="confirm-import-token__token">{t('token')}</div>
-                {this.context.t('token')}
+            <div className="confirm-import-token__balance">{t('balance')}</div>
-              </div>
-              <div className="confirm-import-token__balance">
-                {this.context.t('balance')}
-              </div>
           </div>
           <div className="confirm-import-token__token-list">
             {suggestedAssets.map(({ asset }) => {
@@ -105,7 +111,7 @@ export default class ConfirmAddSuggestedToken extends Component {
                       image={asset.image}
                     />
                     <div className="confirm-import-token__name">
-                        {this.getTokenName(asset.name, asset.symbol)}
+                      {getTokenName(asset.name, asset.symbol)}
                     </div>
                   </div>
                   <div className="confirm-import-token__balance">
@@ -130,7 +136,7 @@ export default class ConfirmAddSuggestedToken extends Component {
               history.push(mostRecentOverviewPage);
             }}
           >
-              {this.context.t('cancel')}
+            {t('cancel')}
           </Button>
           <Button
             type="primary"
@@ -141,60 +147,27 @@ export default class ConfirmAddSuggestedToken extends Component {
               await Promise.all(
                 suggestedAssets.map(async ({ asset, id }) => {
                   await acceptWatchAsset(id);
-                    this.context.trackEvent({
+                  tokenAddedEvent(asset);
-                      event: 'Token Added',
-                      category: 'Wallet',
-                      sensitiveProperties: {
-                        token_symbol: asset.symbol,
-                        token_contract_address: asset.address,
-                        token_decimal_precision: asset.decimals,
-                        unlisted: asset.unlisted,
-                        source: 'dapp',
-                      },
-                    });
                 }),
               );
               history.push(mostRecentOverviewPage);
             }}
           >
-              {this.context.t('addToken')}
+            {t('addToken')}
           </Button>
         </footer>
       </div>
     </div>
   );
-  }
+};
 
-  checkTokenDuplicates(suggestedAssets, tokens) {
+ConfirmAddSuggestedToken.propTypes = {
-    const pending = suggestedAssets.map(({ asset }) =>
+  acceptWatchAsset: PropTypes.func,
-      asset.address.toUpperCase(),
+  history: PropTypes.object,
-    );
+  mostRecentOverviewPage: PropTypes.string.isRequired,
-    const existing = tokens.map((token) => token.address.toUpperCase());
+  rejectWatchAsset: PropTypes.func,
-    const dupes = pending.filter((proposed) => {
+  suggestedAssets: PropTypes.array,
-      return existing.includes(proposed);
+  tokens: PropTypes.array,
-    });
+};
 
-    return dupes.length > 0;
+export default ConfirmAddSuggestedToken;
-  }
-
-  /**
-   * Returns true if any suggestedAssets both:
-   * - Share a symbol with an existing `tokens` member.
-   * - Does not share an address with that same `tokens` member.
-   * This should be flagged as possibly deceptive or confusing.
-   *
-   * @param suggestedAssets
-   * @param tokens
-   */
-  checkNameReuse(suggestedAssets, tokens) {
-    const duplicates = suggestedAssets.filter(({ asset }) => {
-      const dupes = tokens.filter(
-        (old) =>
-          old.symbol === asset.symbol &&
-          !isEqualCaseInsensitive(old.address, asset.address),
-      );
-      return dupes.length > 0;
-    });
-    return duplicates.length > 0;
-  }
-}