diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js index 11e515eee..de7441cb7 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe.js +++ b/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({ ])} )} + + {isLedgerWallet && ( +
+ +
+ )} + {!isSIWEDomainValid && ( { + return { + __esModule: true, + default: () => { + return
; + }, + }; +}); + 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(); + }); });