fix: Add different copy for tooltip when a snap is requesting a signa…

…ture (#27492)

## **Description**

Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change? The tooltip content incorrectly
says "site" when a snap is requesting a signature
2. What is the improvement/solution? Changing the copy to say "snap" for
when a snap is making the signature request.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx

@@ -10,6 +10,8 @@ import {
 } from '../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import { signatureRequestSIWE } from '../../../../../../../test/data/confirmations/personal_sign';
+import * as utils from '../../../../utils';
+import * as snapUtils from '../../../../../../helpers/utils/snaps';
 import PersonalSignInfo from './personal-sign';
 
 jest.mock(
@@ -21,6 +23,29 @@ jest.mock(
   }),
 );
 
+jest.mock('../../../../utils', () => {
+  const originalUtils = jest.requireActual('../../../../utils');
+  return {
+    ...originalUtils,
+    isSIWESignatureRequest: jest.fn().mockReturnValue(false),
+  };
+});
+
+jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => {
+  const originalUtils = jest.requireActual(
+    '../../../../../../../node_modules/@metamask/snaps-utils',
+  );
+  return {
+    ...originalUtils,
+    stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'),
+    getSnapPrefix: jest.fn().mockReturnValue('npm:'),
+  };
+});
+
+jest.mock('../../../../../../helpers/utils/snaps', () => ({
+  isSnapId: jest.fn(),
+}));
+
 describe('PersonalSignInfo', () => {
   it('renders correctly for personal sign request', () => {
     const state = getMockPersonalSignConfirmState();
@@ -62,6 +87,7 @@ describe('PersonalSignInfo', () => {
   });
 
   it('display signing in from for SIWE request', () => {
+    (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true);
     const state =
       getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE);
     const mockStore = configureMockStore([])(state);
@@ -73,6 +99,7 @@ describe('PersonalSignInfo', () => {
   });
 
   it('display simulation for SIWE request if preference useTransactionSimulations is enabled', () => {
+    (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true);
     const state = getMockPersonalSignConfirmStateForRequest(
       signatureRequestSIWE,
       {
@@ -88,4 +115,73 @@ describe('PersonalSignInfo', () => {
     );
     expect(getByText('Estimated changes')).toBeDefined();
   });
+
+  it('does not display tooltip text when isSIWE is true', async () => {
+    const state =
+      getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE); // isSIWE is true
+
+    (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true);
+    const mockStore = configureMockStore([])(state);
+    const { queryByText, getByText } = renderWithConfirmContextProvider(
+      <PersonalSignInfo />,
+      mockStore,
+    );
+
+    const requestFromLabel = getByText('Request from');
+    await requestFromLabel.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+
+    expect(
+      queryByText('This is the site asking for your signature.'),
+    ).toBeNull();
+    expect(
+      queryByText('This is the Snap asking for your signature.'),
+    ).toBeNull();
+  });
+
+  it('displays "requestFromInfoSnap" tooltip when isSIWE is false and origin is a snap', async () => {
+    const state =
+      getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE);
+
+    (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false);
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+
+    const mockStore = configureMockStore([])(state);
+    const { queryByText, getByText } = renderWithConfirmContextProvider(
+      <PersonalSignInfo />,
+      mockStore,
+    );
+
+    const requestFromLabel = getByText('Request from');
+    await requestFromLabel.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+
+    expect(
+      queryByText('This is the Snap asking for your signature.'),
+    ).toBeDefined();
+  });
+
+  it('displays "requestFromInfo" tooltip when isSIWE is false and origin is not a snap', async () => {
+    const state =
+      getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE);
+    (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false);
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+
+    const mockStore = configureMockStore([])(state);
+    const { getByText, queryByText } = renderWithConfirmContextProvider(
+      <PersonalSignInfo />,
+      mockStore,
+    );
+
+    const requestFromLabel = getByText('Request from');
+    await requestFromLabel.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+
+    expect(
+      queryByText('This is the site asking for your signature.'),
+    ).toBeDefined();
+  });
 });

ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx

@@ -19,6 +19,7 @@ import { selectUseTransactionSimulations } from '../../../../selectors/preferenc
 import { isSIWESignatureRequest } from '../../../../utils';
 import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
+import { isSnapId } from '../../../../../../helpers/utils/snaps';
 import { SIWESignInfo } from './siwe-sign';
 
 const PersonalSignInfo: React.FC = () => {
@@ -39,6 +40,15 @@ const PersonalSignInfo: React.FC = () => {
     hexToText(currentConfirmation.msgParams?.data),
   );
 
+  let toolTipMessage;
+  if (!isSIWE) {
+    if (isSnapId(currentConfirmation.msgParams.origin)) {
+      toolTipMessage = t('requestFromInfoSnap');
+    } else {
+      toolTipMessage = t('requestFromInfo');
+    }
+  }
+
   return (
     <>
       {isSIWE && useTransactionSimulations && (
@@ -56,7 +66,7 @@ const PersonalSignInfo: React.FC = () => {
           alertKey={RowAlertKey.RequestFrom}
           ownerId={currentConfirmation.id}
           label={t('requestFrom')}
-          tooltip={isSIWE ? undefined : t('requestFromInfo')}
+          tooltip={toolTipMessage}
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </ConfirmInfoAlertRow>

ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx

@@ -5,6 +5,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import { getMockTypedSignConfirmStateForRequest } from '../../../../../../../test/data/confirmations/helper';
 import { unapprovedTypedSignMsgV1 } from '../../../../../../../test/data/confirmations/typed_sign';
+import * as snapUtils from '../../../../../../helpers/utils/snaps';
 import TypedSignInfoV1 from './typed-sign-v1';
 
 jest.mock(
@@ -16,6 +17,21 @@ jest.mock(
   }),
 );
 
+jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => {
+  const originalUtils = jest.requireActual(
+    '../../../../../../../node_modules/@metamask/snaps-utils',
+  );
+  return {
+    ...originalUtils,
+    stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'),
+    getSnapPrefix: jest.fn().mockReturnValue('npm:'),
+  };
+});
+
+jest.mock('../../../../../../helpers/utils/snaps', () => ({
+  isSnapId: jest.fn(),
+}));
+
 describe('TypedSignInfo', () => {
   it('correctly renders typed sign data request', () => {
     const mockState = getMockTypedSignConfirmStateForRequest(
@@ -42,4 +58,50 @@ describe('TypedSignInfo', () => {
     );
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
+
+  it('displays "requestFromInfoSnap" tooltip when origin is a snap', async () => {
+    const mockState = getMockTypedSignConfirmStateForRequest({
+      id: '123',
+      type: TransactionType.signTypedData,
+      chainId: '0x5',
+    });
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    const mockStore = configureMockStore([])(mockState);
+    const { queryByText } = renderWithConfirmContextProvider(
+      <TypedSignInfoV1 />,
+      mockStore,
+    );
+
+    const requestFromLabel = queryByText('Request from');
+
+    await requestFromLabel?.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+    expect(
+      queryByText('This is the Snap asking for your signature.'),
+    ).toBeDefined();
+  });
+
+  it('displays "requestFromInfo" tooltip when origin is not a snap', async () => {
+    const mockState = getMockTypedSignConfirmStateForRequest({
+      id: '123',
+      type: TransactionType.signTypedData,
+      chainId: '0x5',
+    });
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(false);
+    const mockStore = configureMockStore([])(mockState);
+    const { queryByText } = renderWithConfirmContextProvider(
+      <TypedSignInfoV1 />,
+      mockStore,
+    );
+
+    const requestFromLabel = queryByText('Request from');
+
+    await requestFromLabel?.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+    expect(
+      queryByText('This is the site asking for your signature.'),
+    ).toBeDefined();
+  });
 });

ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx

@@ -14,6 +14,7 @@ import {
 import { useConfirmContext } from '../../../../context/confirm';
 import { ConfirmInfoRowTypedSignDataV1 } from '../../row/typed-sign-data-v1/typedSignDataV1';
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
+import { isSnapId } from '../../../../../../helpers/utils/snaps';
 
 const TypedSignV1Info: React.FC = () => {
   const t = useI18nContext();
@@ -23,6 +24,9 @@ const TypedSignV1Info: React.FC = () => {
     return null;
   }
 
+  const toolTipMessage = isSnapId(currentConfirmation.msgParams?.origin)
+    ? t('requestFromInfoSnap')
+    : t('requestFromInfo');
   const chainId = currentConfirmation.chainId as string;
 
   return (
@@ -32,7 +36,7 @@ const TypedSignV1Info: React.FC = () => {
           alertKey={RowAlertKey.RequestFrom}
           ownerId={currentConfirmation.id}
           label={t('requestFrom')}
-          tooltip={t('requestFromInfo')}
+          tooltip={toolTipMessage}
         >
           <ConfirmInfoRowUrl
             url={currentConfirmation.msgParams?.origin ?? ''}

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx

@@ -16,6 +16,7 @@ import {
   unapprovedTypedSignMsgV3,
 } from '../../../../../../../test/data/confirmations/typed_sign';
 import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
+import * as snapUtils from '../../../../../../helpers/utils/snaps';
 import TypedSignInfo from './typed-sign';
 
 jest.mock(
@@ -33,6 +34,21 @@ jest.mock('../../../../../../store/actions', () => {
   };
 });
 
+jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => {
+  const originalUtils = jest.requireActual(
+    '../../../../../../../node_modules/@metamask/snaps-utils',
+  );
+  return {
+    ...originalUtils,
+    stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'),
+    getSnapPrefix: jest.fn().mockReturnValue('npm:'),
+  };
+});
+
+jest.mock('../../../../../../helpers/utils/snaps', () => ({
+  isSnapId: jest.fn(),
+}));
+
 describe('TypedSignInfo', () => {
   it('renders origin for typed sign data request', () => {
     const state = getMockTypedSignConfirmState();
@@ -127,4 +143,50 @@ describe('TypedSignInfo', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('displays "requestFromInfoSnap" tooltip when origin is a snap', async () => {
+    const mockState = getMockTypedSignConfirmStateForRequest({
+      id: '123',
+      type: TransactionType.signTypedData,
+      chainId: '0x5',
+    });
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(true);
+    const mockStore = configureMockStore([])(mockState);
+    const { queryByText } = renderWithConfirmContextProvider(
+      <TypedSignInfo />,
+      mockStore,
+    );
+
+    const requestFromLabel = queryByText('Request from');
+
+    await requestFromLabel?.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+    expect(
+      queryByText('This is the Snap asking for your signature.'),
+    ).toBeDefined();
+  });
+
+  it('displays "requestFromInfo" tooltip when origin is not a snap', async () => {
+    const mockState = getMockTypedSignConfirmStateForRequest({
+      id: '123',
+      type: TransactionType.signTypedData,
+      chainId: '0x5',
+    });
+    (snapUtils.isSnapId as jest.Mock).mockReturnValue(false);
+    const mockStore = configureMockStore([])(mockState);
+    const { queryByText } = renderWithConfirmContextProvider(
+      <TypedSignInfo />,
+      mockStore,
+    );
+
+    const requestFromLabel = queryByText('Request from');
+
+    await requestFromLabel?.dispatchEvent(
+      new MouseEvent('mouseenter', { bubbles: true }),
+    );
+    expect(
+      queryByText('This is the site asking for your signature.'),
+    ).toBeDefined();
+  });
 });

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx

@@ -22,6 +22,7 @@ import { fetchErc20Decimals } from '../../../../utils/token';
 import { useConfirmContext } from '../../../../context/confirm';
 import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
+import { isSnapId } from '../../../../../../helpers/utils/snaps';
 import { PermitSimulation } from './permit-simulation';
 
 const TypedSignInfo: React.FC = () => {
@@ -55,6 +56,9 @@ const TypedSignInfo: React.FC = () => {
     })();
   }, [verifyingContract]);
 
+  const toolTipMessage = isSnapId(currentConfirmation.msgParams.origin)
+    ? t('requestFromInfoSnap')
+    : t('requestFromInfo');
   const msgData = currentConfirmation.msgParams?.data as string;
 
   return (
@@ -73,7 +77,7 @@ const TypedSignInfo: React.FC = () => {
           alertKey={RowAlertKey.RequestFrom}
           ownerId={currentConfirmation.id}
           label={t('requestFrom')}
-          tooltip={t('requestFromInfo')}
+          tooltip={toolTipMessage}
         >
           <ConfirmInfoRowUrl url={currentConfirmation.msgParams.origin} />
         </ConfirmInfoAlertRow>