siwe: add ledger instructions (#18589)

ui/components/app/signature-request-siwe/signature-request-siwe.js

@@ -7,6 +7,7 @@ import Popover from '../../ui/popover';
 import Checkbox from '../../ui/check-box';
 import { I18nContext } from '../../../contexts/i18n';
 import { PageContainerFooter } from '../../ui/page-container';
+import { isAddressLedger } from '../../../ducks/metamask/metamask';
 import {
   accountsWithSendEtherInfoSelector,
   getSubjectMetadata,
@@ -20,6 +21,7 @@ import {
 
 import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
 import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants';
+import LedgerInstructionField from '../ledger-instruction-field';
 import Header from './signature-request-siwe-header';
 import Message from './signature-request-siwe-message';
 
@@ -39,6 +41,8 @@ export default function SignatureRequestSIWE({
     },
   } = txData;
 
+  const isLedgerWallet = useSelector((state) => isAddressLedger(state, from));
+
   const fromAccount = getAccountByAddress(allAccounts, from);
   const targetSubjectMetadata = subjectMetadata[origin];
 
@@ -115,6 +119,13 @@ export default function SignatureRequestSIWE({
           ])}
         </BannerAlert>
       )}
+
+      {isLedgerWallet && (
+        <div className="confirm-approve-content__ledger-instruction-wrapper">
+          <LedgerInstructionField showDataInstruction />
+        </div>
+      )}
+
       {!isSIWEDomainValid && (
         <BannerAlert
           severity={SEVERITIES.DANGER}

ui/components/app/signature-request-siwe/signature-request-siwe.test.js

@@ -52,6 +52,15 @@ const mockProps = {
   },
 };
 
+jest.mock('../ledger-instruction-field', () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div className="mock-ledger-instruction-field" />;
+    },
+  };
+});
+
 const render = (txData = mockProps.txData) => {
   const store = configureStore(mockStoreInitialState);
 
@@ -110,4 +119,21 @@ describe('SignatureRequestSIWE (Sign in with Ethereum)', () => {
     expect(bannerAlert).toBeTruthy();
     expect(bannerAlert).toHaveTextContent('Deceptive site request.');
   });
+
+  it('should not show Ledger instructions if the address is not a Ledger address', () => {
+    const { container } = render();
+    expect(
+      container.querySelector('.mock-ledger-instruction-field'),
+    ).not.toBeTruthy();
+  });
+
+  it('should show Ledger instructions if the address is a Ledger address', () => {
+    const mockTxData = cloneDeep(mockProps.txData);
+    mockTxData.msgParams.from = '0xc42edfcc21ed14dda456aa0756c153f7985d8813';
+    const { container } = render(mockTxData);
+
+    expect(
+      container.querySelector('.mock-ledger-instruction-field'),
+    ).toBeTruthy();
+  });
 });