From 145280374db444adeaa6e1a5869be57154e7418e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 11 Jul 2023 10:43:39 -0500
Subject: [PATCH] Fix #19393 - Add indicator for Refresh list on tokens screen
 (#19952)

---
 .../import-token-link/import-token-link.js    |  5 +++--
 .../import-token-link.test.js                 |  2 +-
 ui/store/actions.ts                           | 21 ++++++++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js
index 241654ff8..699db9136 100644
--- a/ui/components/multichain/import-token-link/import-token-link.js
+++ b/ui/components/multichain/import-token-link/import-token-link.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -26,6 +26,7 @@ export const ImportTokenLink = ({ className, ...props }) => {
   const trackEvent = useContext(MetaMetricsContext);
   const t = useI18nContext();
   const history = useHistory();
+  const dispatch = useDispatch();
 
   const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported);
   const isTokenDetectionInactiveOnMainnet = useSelector(
@@ -68,7 +69,7 @@ export const ImportTokenLink = ({ className, ...props }) => {
           size={Size.MD}
           startIconName={IconName.Refresh}
           data-testid="refresh-list-button"
-          onClick={() => detectNewTokens()}
+          onClick={() => dispatch(detectNewTokens())}
         >
           {t('refreshList')}
         </ButtonLink>
diff --git a/ui/components/multichain/import-token-link/import-token-link.test.js b/ui/components/multichain/import-token-link/import-token-link.test.js
index 130252a41..a4763f6de 100644
--- a/ui/components/multichain/import-token-link/import-token-link.test.js
+++ b/ui/components/multichain/import-token-link/import-token-link.test.js
@@ -19,7 +19,7 @@ jest.mock('react-router-dom', () => {
 });
 
 jest.mock('../../../store/actions.ts', () => ({
-  detectNewTokens: jest.fn(),
+  detectNewTokens: jest.fn().mockReturnValue({ type: '' }),
 }));
 
 describe('Import Token Link', () => {
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index 2d7853237..6594ed390 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -2990,6 +2990,22 @@ export function setOpenSeaEnabled(
   };
 }
 
+// DetectTokenController
+export function detectNewTokens(): ThunkAction<
+  void,
+  MetaMaskReduxState,
+  unknown,
+  AnyAction
+> {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    dispatch(showLoadingIndication());
+    log.debug(`background.detectNewTokens`);
+    await submitRequestToBackground('detectNewTokens');
+    dispatch(hideLoadingIndication());
+    await forceUpdateMetamaskState(dispatch);
+  };
+}
+
 export function detectNfts(): ThunkAction<
   void,
   MetaMaskReduxState,
@@ -4287,11 +4303,6 @@ export function dismissSmartTransactionsErrorMessage(): Action {
   };
 }
 
-// DetectTokenController
-export async function detectNewTokens() {
-  return submitRequestToBackground('detectNewTokens');
-}
-
 // App state
 export function hideTestNetMessage() {
   return submitRequestToBackground('setShowTestnetMessageInDropdown', [false]);