Adding Refresh list and import tokens link to the main page (#11755)

app/_locales/en/messages.json

@@ -1085,6 +1085,9 @@
   "importTokenWarning": {
     "message": "Anyone can create a token with any name, including fake versions of existing tokens. Add and trade at your own risk!"
   },
+  "importTokens": {
+    "message": "import tokens"
+  },
   "importWallet": {
     "message": "Import wallet"
   },
@@ -1328,8 +1331,11 @@
     "message": "verify the network details",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
+  "missingToken": {
+    "message": "Don't see your token?"
+  },
   "mobileSyncWarning": {
-    "message": "The 'Sync with extension' feature is temporarily disabled. If you want to use your extension wallet on MetaMask mobile, then on your mobile app: go back to the wallet setup options and select the 'Import with Secret Recovery Phrase' option. Use your extension wallet’s secret phrase to then import your wallet into mobile."
+    "message": "⚠️ Proceeding will display a secret QR code that allows access to your accounts. Do not share it with anyone. Support staff will never ask you for it."
   },
   "mustSelectOne": {
     "message": "Must select at least 1 token."
@@ -1700,6 +1706,9 @@
   "recoveryPhraseReminderTitle": {
     "message": "Protect your funds"
   },
+  "refreshList": {
+    "message": "Refresh list"
+  },
   "reject": {
     "message": "Reject"
   },

app/scripts/metamask-controller.js

@@ -1179,6 +1179,12 @@ export default class MetamaskController extends EventEmitter {
         this.appStateController.removePollingToken,
         this.appStateController,
       ),
+
+      // DetectTokenController
+      detectNewTokens: nodeify(
+        this.detectTokensController.detectNewTokens,
+        this.detectTokensController,
+      ),
     };
   }
 

test/e2e/metamask-ui.spec.js

@@ -501,9 +501,9 @@ describe('MetaMask', function () {
       await driver.delay(largeDelayMs);
     });
 
-    it('clicks on the Add Token button', async function () {
+    it('clicks on the import tokens button', async function () {
       await driver.clickElement(`[data-testid="home__asset-tab"]`);
-      await driver.clickElement({ text: 'Add Token', tag: 'button' });
+      await driver.clickElement({ text: 'import tokens', tag: 'a' });
       await driver.delay(regularDelayMs);
     });
 

test/e2e/tests/add-hide-token.spec.js

@@ -79,7 +79,7 @@ describe('Add existing token using search', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        await driver.clickElement({ text: 'Add Token', tag: 'button' });
+        await driver.clickElement({ text: 'import tokens', tag: 'a' });
         await driver.fill('#search-tokens', 'BAT');
         await driver.clickElement({ text: 'BAT', tag: 'span' });
         await driver.clickElement({ text: 'Next', tag: 'button' });

ui/components/app/add-token-button/index.js

@@ -1 +0,0 @@
-export { default } from './add-token-button.component';

ui/components/app/add-token-button/index.scss

@@ -1,6 +0,0 @@
-.add-token-button {
-  &__button {
-    max-width: 200px;
-    margin: 16px auto;
-  }
-}

ui/components/app/app-components.scss

@@ -1,7 +1,7 @@
 /** Please import your files in alphabetical order **/
 @import 'account-list-item/index';
 @import 'account-menu/index';
-@import 'add-token-button/index';
+@import 'import-token-link/index';
 @import 'advanced-gas-controls/index';
 @import 'alerts/alerts';
 @import 'app-header/index';

ui/components/app/asset-list/asset-list.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import AddTokenButton from '../add-token-button';
+import ImportTokenLink from '../import-token-link';
 import TokenList from '../token-list';
 import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import AssetListItem from '../asset-list-item';
@@ -16,8 +16,18 @@ import {
 } from '../../../selectors';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
+import Typography from '../../ui/typography/typography';
+import Box from '../../ui/box/box';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 const AssetList = ({ onClickAsset }) => {
+  const t = useI18nContext();
   const history = useHistory();
   const selectedAccountBalance = useSelector(
     (state) => getCurrentAccountWithSendEtherInfo(state).balance,
@@ -85,12 +95,23 @@ const AssetList = ({ onClickAsset }) => {
           selectTokenEvent();
         }}
       />
-      <AddTokenButton
-        onClick={() => {
-          history.push(ADD_TOKEN_ROUTE);
-          addTokenEvent();
-        }}
-      />
+      <Box marginTop={4}>
+        <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
+          <Typography
+            color={COLORS.UI4}
+            variant={TYPOGRAPHY.H6}
+            fontWeight={FONT_WEIGHT.NORMAL}
+          >
+            {t('missingToken')}
+          </Typography>
+        </Box>
+        <ImportTokenLink
+          onClick={() => {
+            history.push(ADD_TOKEN_ROUTE);
+            addTokenEvent();
+          }}
+        />
+      </Box>
     </>
   );
 };

ui/components/app/import-token-link/import-token-link.component.js

@@ -4,8 +4,11 @@ import { useMetricEvent } from '../../../hooks/useMetricEvent';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Button from '../../ui/button';
+import Box from '../../ui/box/box';
+import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
+import { detectNewTokens } from '../../../store/actions';
 
-export default function AddTokenButton() {
+export default function ImportTokenLink() {
   const addTokenEvent = useMetricEvent({
     eventOpts: {
       category: 'Navigation',
@@ -17,18 +20,25 @@ export default function AddTokenButton() {
   const history = useHistory();
 
   return (
-    <div className="add-token-button">
+    <Box className="import-token-link" textAlign={TEXT_ALIGN.CENTER}>
       <Button
-        className="add-token-button__button"
-        type="secondary"
-        rounded
+        className="import-token-link__link"
+        type="link"
+        onClick={() => detectNewTokens()}
+      >
+        {t('refreshList')}
+      </Button>
+      {' or '}
+      <Button
+        className="import-token-link__link"
+        type="link"
         onClick={() => {
           history.push(ADD_TOKEN_ROUTE);
           addTokenEvent();
         }}
       >
-        {t('addToken')}
+        {t('importTokens')}
       </Button>
-    </div>
+    </Box>
   );
 }

ui/components/app/import-token-link/index.js

@@ -0,0 +1 @@
+export { default } from './import-token-link.component';

ui/components/app/import-token-link/index.scss

@@ -0,0 +1,8 @@
+.import-token-link {
+  & &__link {
+    @include H6;
+
+    display: inline;
+    padding: 0 0 16px;
+  }
+}

ui/store/actions.js

@@ -2856,3 +2856,8 @@ export async function setUnconnectedAccountAlertShown(origin) {
 export async function setWeb3ShimUsageAlertDismissed(origin) {
   await promisifiedBackground.setWeb3ShimUsageAlertDismissed(origin);
 }
+
+// DetectTokenController
+export async function detectNewTokens() {
+  return promisifiedBackground.detectNewTokens();
+}