Hiding refresh list on non-Mainnet networks (#12210)

app/_locales/en/messages.json

@@ -1616,6 +1616,9 @@
   "optionalCurrencySymbol": {
     "message": "Currency Symbol (optional)"
   },
+  "or": {
+    "message": "or"
+  },
   "origin": {
     "message": "Origin"
   },

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

@@ -13,6 +13,7 @@ import {
   getCurrentAccountWithSendEtherInfo,
   getShouldShowFiat,
   getNativeCurrencyImage,
+  getIsMainnet,
 } from '../../../selectors';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
@@ -75,6 +76,7 @@ const AssetList = ({ onClickAsset }) => {
   });
 
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
+  const isMainnet = useSelector(getIsMainnet) || process.env.IN_TEST;
 
   return (
     <>
@@ -106,6 +108,7 @@ const AssetList = ({ onClickAsset }) => {
           </Typography>
         </Box>
         <ImportTokenLink
+          isMainnet={isMainnet}
           onClick={() => {
             history.push(IMPORT_TOKEN_ROUTE);
             addTokenEvent();

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useMetricEvent } from '../../../hooks/useMetricEvent';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -8,7 +9,7 @@ import Box from '../../ui/box/box';
 import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
 import { detectNewTokens } from '../../../store/actions';
 
-export default function ImportTokenLink() {
+export default function ImportTokenLink({ isMainnet }) {
   const addTokenEvent = useMetricEvent({
     eventOpts: {
       category: 'Navigation',
@@ -21,14 +22,18 @@ export default function ImportTokenLink() {
 
   return (
     <Box className="import-token-link" textAlign={TEXT_ALIGN.CENTER}>
-      <Button
-        className="import-token-link__link"
-        type="link"
-        onClick={() => detectNewTokens()}
-      >
-        {t('refreshList')}
-      </Button>
-      {' or '}
+      {isMainnet && (
+        <>
+          <Button
+            className="import-token-link__link"
+            type="link"
+            onClick={() => detectNewTokens()}
+          >
+            {t('refreshList')}
+          </Button>
+          {t('or')}
+        </>
+      )}
       <Button
         className="import-token-link__link"
         type="link"
@@ -37,8 +42,15 @@ export default function ImportTokenLink() {
           addTokenEvent();
         }}
       >
-        {t('importTokens')}
+        {isMainnet
+          ? t('importTokens')
+          : t('importTokens').charAt(0).toUpperCase() +
+            t('importTokens').slice(1)}
       </Button>
     </Box>
   );
 }
+
+ImportTokenLink.propTypes = {
+  isMainnet: PropTypes.bool,
+};

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

@@ -3,6 +3,6 @@
     @include H6;
 
     display: inline;
-    padding: 0 0 16px;
+    padding: 0 5px 16px;
   }
 }