Merge branch 'develop' into jl/bump-queued-request-controller-fix-con…

…firmation-popup-focus

ui/hooks/useIsOriginalTokenSymbol.js

@@ -1,17 +1,44 @@
+// TODO: reconsider this approach altogether
+// checking against on-chain data to see if a user has changed a token symbol is not ideal
+// we should just keep track of the original symbol in state, or better yet, rely on the address instead of the symbol
+// see: https://github.com/MetaMask/metamask-extension/pull/21610 (original PR)
+
 import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { getTokenSymbol } from '../store/actions';
+import { getTokenList } from '../selectors';
 
+/**
+ * This hook determines whether a token uses the original symbol based on data not influenced by the user.
+ *
+ * @param {string} tokenAddress - the address of the token
+ * @param {string} tokenSymbol - the local symbol of the token
+ * @returns a boolean indicating whether the token uses the original symbol
+ */
 export function useIsOriginalTokenSymbol(tokenAddress, tokenSymbol) {
   const [isOriginalNativeSymbol, setIsOriginalNativeSymbol] = useState(null);
 
+  const tokens = useSelector(getTokenList);
+
   useEffect(() => {
     async function getTokenSymbolForToken(address) {
-      const symbol = await getTokenSymbol(address);
+      // attempt to fetch from cache first
+      let trueSymbol = tokens[address?.toLowerCase()]?.symbol;
+
+      // if tokens aren't available, fetch from the blockchain
+      if (!trueSymbol) {
+        trueSymbol = await getTokenSymbol(address);
+      }
+
+      // if the symbol is the same as the tokenSymbol, it's the original
       setIsOriginalNativeSymbol(
-        symbol?.toLowerCase() === tokenSymbol?.toLowerCase(),
+        trueSymbol?.toLowerCase() === tokenSymbol?.toLowerCase(),
       );
     }
+
     getTokenSymbolForToken(tokenAddress);
+    // no need to wait for tokens to load, since we'd fetch without them if they aren't available
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tokenAddress, tokenSymbol]);
 
   return isOriginalNativeSymbol;

ui/hooks/useIsOriginalTokenSymbol.test.js

@@ -1,12 +1,26 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act } from '@testing-library/react-hooks';
 import * as actions from '../store/actions';
+import mockState from '../../test/data/mock-state.json';
+
+import { renderHookWithProvider } from '../../test/lib/render-helpers';
 import { useIsOriginalTokenSymbol } from './useIsOriginalTokenSymbol';
 
 // Mocking the getTokenSymbol function
 jest.mock('../store/actions', () => ({
   getTokenSymbol: jest.fn(),
 }));
 
+const state = {
+  metamask: {
+    ...mockState.metamask,
+    tokenList: {
+      '0x1234': {
+        symbol: 'ABCD',
+      },
+    },
+  },
+};
+
 describe('useIsOriginalTokenSymbol', () => {
   it('useIsOriginalTokenSymbol returns correct value when token symbol matches', async () => {
     const tokenAddress = '0x123';
@@ -17,8 +31,9 @@ describe('useIsOriginalTokenSymbol', () => {
     let result;
 
     await act(async () => {
-      result = renderHook(() =>
-        useIsOriginalTokenSymbol(tokenAddress, tokenSymbol),
+      result = renderHookWithProvider(
+        () => useIsOriginalTokenSymbol(tokenAddress, tokenSymbol),
+        state,
       );
     });
 
@@ -35,12 +50,32 @@ describe('useIsOriginalTokenSymbol', () => {
     let result;
 
     await act(async () => {
-      result = renderHook(() =>
-        useIsOriginalTokenSymbol(tokenAddress, tokenSymbol),
+      result = renderHookWithProvider(
+        () => useIsOriginalTokenSymbol(tokenAddress, tokenSymbol),
+        state,
       );
     });
 
     // Expect the hook to return false when the symbol matches the original symbol
     expect(result.result.current).toBe(false);
   });
+
+  it('useIsOriginalTokenSymbol uses cached value when available', async () => {
+    const tokenAddress = '0x1234';
+    const tokenSymbol = 'ABCD';
+
+    actions.getTokenSymbol.mockResolvedValue('Should not matter'); // Mock the getTokenSymbol function
+
+    let result;
+
+    await act(async () => {
+      result = renderHookWithProvider(
+        () => useIsOriginalTokenSymbol(tokenAddress, tokenSymbol),
+        state,
+      );
+    });
+
+    // Expect the hook to return true when the symbol matches the original symbol
+    expect(result.result.current).toBe(true);
+  });
 });