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,192 +1,49 @@
-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 = {
+  return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
-    t: PropTypes.func,
+}
-    trackEvent: PropTypes.func,
+const ConfirmAddSuggestedToken = (props) => {
-  };
+  const {
+    acceptWatchAsset,
+    history,
+    mostRecentOverviewPage,
+    rejectWatchAsset,
+    suggestedAssets,
+    tokens,
+  } = props;
 
-  static propTypes = {
+  const metricsEvent = useContext(MetaMetricsContext);
-    history: PropTypes.object,
+  const t = useContext(I18nContext);
-    acceptWatchAsset: PropTypes.func,
-    rejectWatchAsset: PropTypes.func,
-    mostRecentOverviewPage: PropTypes.string.isRequired,
-    suggestedAssets: PropTypes.array,
-    tokens: PropTypes.array,
-  };
 
-  componentDidMount() {
+  const tokenAddedEvent = (asset) => {
-    this._checksuggestedAssets();
+    metricsEvent({
-  }
+      event: 'Token Added',
-
+      category: 'Wallet',
-  componentDidUpdate() {
+      sensitiveProperties: {
-    this._checksuggestedAssets();
+        token_symbol: asset.symbol,
-  }
+        token_contract_address: asset.address,
-
+        token_decimal_precision: asset.decimals,
-  _checksuggestedAssets() {
+        unlisted: asset.unlisted,
-    const {
+        source: 'dapp',
-      mostRecentOverviewPage,
+      },
-      suggestedAssets = [],
-      history,
-    } = this.props;
-
-    if (suggestedAssets.length > 0) {
-      return;
-    }
-
-    history.push(mostRecentOverviewPage);
-  }
-
-  getTokenName(name, symbol) {
-    return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
-  }
-
-  render() {
-    const {
-      suggestedAssets,
-      tokens,
-      rejectWatchAsset,
-      history,
-      mostRecentOverviewPage,
-      acceptWatchAsset,
-    } = this.props;
-
-    const hasTokenDuplicates = this.checkTokenDuplicates(
-      suggestedAssets,
-      tokens,
-    );
-    const reusesName = this.checkNameReuse(suggestedAssets, tokens);
-
-    return (
-      <div className="page-container">
-        <div className="page-container__header">
-          <div className="page-container__title">
-            {this.context.t('addSuggestedTokens')}
-          </div>
-          <div className="page-container__subtitle">
-            {this.context.t('likeToImportTokens')}
-          </div>
-          {hasTokenDuplicates ? (
-            <div className="warning">{this.context.t('knownTokenWarning')}</div>
-          ) : null}
-          {reusesName ? (
-            <div className="warning">
-              {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">
-                {this.context.t('token')}
-              </div>
-              <div className="confirm-import-token__balance">
-                {this.context.t('balance')}
-              </div>
-            </div>
-            <div className="confirm-import-token__token-list">
-              {suggestedAssets.map(({ asset }) => {
-                return (
-                  <div
-                    className="confirm-import-token__token-list-item"
-                    key={asset.address}
-                  >
-                    <div className="confirm-import-token__token confirm-import-token__data">
-                      <Identicon
-                        className="confirm-import-token__token-icon"
-                        diameter={48}
-                        address={asset.address}
-                        image={asset.image}
-                      />
-                      <div className="confirm-import-token__name">
-                        {this.getTokenName(asset.name, asset.symbol)}
-                      </div>
-                    </div>
-                    <div className="confirm-import-token__balance">
-                      <TokenBalance token={asset} />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-        <div className="page-container__footer">
-          <footer>
-            <Button
-              type="secondary"
-              large
-              className="page-container__footer-button"
-              onClick={async () => {
-                await Promise.all(
-                  suggestedAssets.map(async ({ id }) => rejectWatchAsset(id)),
-                );
-                history.push(mostRecentOverviewPage);
-              }}
-            >
-              {this.context.t('cancel')}
-            </Button>
-            <Button
-              type="primary"
-              large
-              className="page-container__footer-button"
-              disabled={suggestedAssets.length === 0}
-              onClick={async () => {
-                await Promise.all(
-                  suggestedAssets.map(async ({ asset, id }) => {
-                    await acceptWatchAsset(id);
-                    this.context.trackEvent({
-                      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')}
-            </Button>
-          </footer>
-        </div>
-      </div>
-    );
-  }
-
-  checkTokenDuplicates(suggestedAssets, tokens) {
-    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;
-  }
 
   /**
    * 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 checkNameReuse = () => {
     const duplicates = suggestedAssets.filter(({ asset }) => {
       const dupes = tokens.filter(
         (old) =>
@@ -196,5 +53,121 @@ export default class ConfirmAddSuggestedToken extends Component {
       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">{t('addSuggestedTokens')}</div>
+        <div className="page-container__subtitle">
+          {t('likeToImportTokens')}
+        </div>
+        {hasTokenDuplicates ? (
+          <div className="warning">{t('knownTokenWarning')}</div>
+        ) : null}
+        {reusesName ? (
+          <div className="warning">{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">{t('token')}</div>
+            <div className="confirm-import-token__balance">{t('balance')}</div>
+          </div>
+          <div className="confirm-import-token__token-list">
+            {suggestedAssets.map(({ asset }) => {
+              return (
+                <div
+                  className="confirm-import-token__token-list-item"
+                  key={asset.address}
+                >
+                  <div className="confirm-import-token__token confirm-import-token__data">
+                    <Identicon
+                      className="confirm-import-token__token-icon"
+                      diameter={48}
+                      address={asset.address}
+                      image={asset.image}
+                    />
+                    <div className="confirm-import-token__name">
+                      {getTokenName(asset.name, asset.symbol)}
+                    </div>
+                  </div>
+                  <div className="confirm-import-token__balance">
+                    <TokenBalance token={asset} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="page-container__footer">
+        <footer>
+          <Button
+            type="secondary"
+            large
+            className="page-container__footer-button"
+            onClick={async () => {
+              await Promise.all(
+                suggestedAssets.map(async ({ id }) => rejectWatchAsset(id)),
+              );
+              history.push(mostRecentOverviewPage);
+            }}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            type="primary"
+            large
+            className="page-container__footer-button"
+            disabled={suggestedAssets.length === 0}
+            onClick={async () => {
+              await Promise.all(
+                suggestedAssets.map(async ({ asset, id }) => {
+                  await acceptWatchAsset(id);
+                  tokenAddedEvent(asset);
+                }),
+              );
+              history.push(mostRecentOverviewPage);
+            }}
+          >
+            {t('addToken')}
+          </Button>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+ConfirmAddSuggestedToken.propTypes = {
+  acceptWatchAsset: PropTypes.func,
+  history: PropTypes.object,
+  mostRecentOverviewPage: PropTypes.string.isRequired,
+  rejectWatchAsset: PropTypes.func,
+  suggestedAssets: PropTypes.array,
+  tokens: PropTypes.array,
+};
+
+export default ConfirmAddSuggestedToken;