Adding a Token detection announcement in Search tab (#12152)

app/_locales/en/messages.json

@@ -748,6 +748,9 @@
   "editPermission": {
     "message": "Edit Permission"
   },
+  "enableFromSettings": {
+    "message": " Enable it from Settings."
+  },
   "encryptionPublicKeyNotice": {
     "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.",
     "description": "$1 is the web3 site name"
@@ -2570,6 +2573,9 @@
   "tokenDecimalFetchFailed": {
     "message": "Token decimal required."
   },
+  "tokenDetectionAnnouncement": {
+    "message": "New! Improved token detection is available on Ethereum Mainnet as an experimental feature. $1"
+  },
   "tokenSymbol": {
     "message": "Token Symbol"
   },

ui/pages/import-token/import-token.component.js

@@ -6,7 +6,10 @@ import {
   getURLHostName,
 } from '../../helpers/utils/util';
 import { tokenInfoGetter } from '../../helpers/utils/token-util';
-import { CONFIRM_IMPORT_TOKEN_ROUTE } from '../../helpers/constants/routes';
+import {
+  CONFIRM_IMPORT_TOKEN_ROUTE,
+  EXPERIMENTAL_ROUTE,
+} from '../../helpers/constants/routes';
 import TextField from '../../components/ui/text-field';
 import PageContainer from '../../components/ui/page-container';
 import { Tabs, Tab } from '../../components/ui/tabs';
@@ -388,10 +391,27 @@ class ImportToken extends Component {
   }
 
   renderSearchToken() {
-    const { tokenList } = this.props;
+    const { tokenList, history } = this.props;
     const { tokenSelectorError, selectedTokens, searchResults } = this.state;
     return (
       <div className="import-token__search-token">
+        <ActionableMessage
+          message={this.context.t('tokenDetectionAnnouncement', [
+            <Button
+              type="link"
+              key="token-detection-announcement"
+              className="import-token__link"
+              onClick={() => history.push(EXPERIMENTAL_ROUTE)}
+            >
+              {this.context.t('enableFromSettings')}
+            </Button>,
+          ])}
+          type={false}
+          withRightButton
+          useIcon
+          iconFillColor="#037DD6"
+          className="import-token__token-detection-announcement"
+        />
         <TokenSearch
           onSearch={({ results = [] }) =>
             this.setState({ searchResults: results })

ui/pages/import-token/index.scss

@@ -21,7 +21,7 @@
   }
 
   &__search-token {
-    padding: 16px;
+    padding: 0 16px 16px 16px;
   }
 
   &__token-list {
@@ -54,4 +54,8 @@
     color: $primary-blue;
     padding-left: 0;
   }
+
+  &__token-detection-announcement {
+    margin-bottom: 16px;
+  }
 }