Add warning to watchAsset API when editing a known token (#8049)

* Add warning when editing a known token with watchAsset API

* Add warning when watchAsset attempts to reuse token symbol

* Linted

app/_locales/en/messages.json

@@ -743,6 +743,12 @@
   "knownAddressRecipient": {
     "message": "Known contract address."
   },
+  "knownTokenWarning": {
+    "message": "This action will edit tokens that are already listed in your wallet, which can be used to phish you. Only approve if you are certain that you mean to change what these tokens represent."
+  },
+  "reusedTokenNameWarning": {
+    "message": "A token here reuses a symbol from another token you watch, this can be confusing or deceptive."
+  },
   "invalidAddressRecipientNotEthNetwork": {
     "message": "Not ETH network, set to lowercase"
   },

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

@@ -15,6 +15,7 @@ export default class ConfirmAddSuggestedToken extends Component {
     addToken: PropTypes.func,
     pendingTokens: PropTypes.object,
     removeSuggestedTokens: PropTypes.func,
+    tokens: PropTypes.array,
   }
 
   componentDidMount () {
@@ -32,9 +33,11 @@ export default class ConfirmAddSuggestedToken extends Component {
   }
 
   render () {
-    const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
+    const { addToken, pendingTokens, tokens, removeSuggestedTokens, history } = this.props
     const pendingTokenKey = Object.keys(pendingTokens)[0]
     const pendingToken = pendingTokens[pendingTokenKey]
+    const hasTokenDuplicates = this.checkTokenDuplicates(pendingTokens, tokens)
+    const reusesName = this.checkNameReuse(pendingTokens, tokens)
 
     return (
       <div className="page-container">
@@ -45,6 +48,20 @@ export default class ConfirmAddSuggestedToken extends Component {
           <div className="page-container__subtitle">
             { this.context.t('likeToAddTokens') }
           </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-add-token">
@@ -118,4 +135,32 @@ export default class ConfirmAddSuggestedToken extends Component {
       </div>
     )
   }
+
+  checkTokenDuplicates (pendingTokens, tokens) {
+    const pending = Object.keys(pendingTokens)
+    const existing = tokens.map(token => token.address)
+    const dupes = pending.filter((proposed) => {
+      return existing.includes(proposed)
+    })
+
+    return dupes.length > 0
+  }
+
+  /**
+   * Returns true if any pendingTokens 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.
+   */
+  checkNameReuse (pendingTokens, tokens) {
+    const duplicates = Object.keys(pendingTokens)
+      .map((addr) => pendingTokens[addr])
+      .filter((token) => {
+        const dupes = tokens.filter(old => old.symbol === token.symbol)
+          .filter(old => old.address !== token.address)
+        return dupes.length > 0
+      })
+    return duplicates.length > 0
+  }
+
 }

ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js

@@ -5,11 +5,12 @@ import { withRouter } from 'react-router-dom'
 import { addToken, removeSuggestedTokens } from '../../store/actions'
 
 const mapStateToProps = ({ metamask }) => {
-  const { pendingTokens, suggestedTokens } = metamask
+  const { pendingTokens, suggestedTokens, tokens } = metamask
   const params = { ...pendingTokens, ...suggestedTokens }
 
   return {
     pendingTokens: params,
+    tokens,
   }
 }