mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
[MMI] Adds a warning if message signing account mismatches selected account (#18659)
* [MMI] Adds a warning if message signing account mismatches selected account * chore: fix code fencing * chore: remove render method to simplify * chore: remove renderMethods
This commit is contained in:
parent
c1614ec670
commit
16dabdf802
3
app/_locales/en/messages.json
generated
3
app/_locales/en/messages.json
generated
@ -2142,6 +2142,9 @@
|
||||
"metrics": {
|
||||
"message": "Metrics"
|
||||
},
|
||||
"mismatchAccount": {
|
||||
"message": "Your selected account ($1) is different than the account trying to sign ($2)"
|
||||
},
|
||||
"mismatchedChainLinkText": {
|
||||
"message": "verify the network details",
|
||||
"description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
|
||||
|
@ -5,7 +5,13 @@ import { ObjectInspector } from 'react-inspector';
|
||||
import LedgerInstructionField from '../ledger-instruction-field';
|
||||
|
||||
import { MESSAGE_TYPE } from '../../../../shared/constants/app';
|
||||
import { getURLHostName, sanitizeString } from '../../../helpers/utils/util';
|
||||
import {
|
||||
getURLHostName,
|
||||
sanitizeString,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
shortenAddress,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../helpers/utils/util';
|
||||
import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils';
|
||||
import Button from '../../ui/button';
|
||||
import SiteOrigin from '../../ui/site-origin';
|
||||
@ -17,6 +23,13 @@ import {
|
||||
FONT_WEIGHT,
|
||||
TEXT_ALIGN,
|
||||
TextColor,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
IconColor,
|
||||
DISPLAY,
|
||||
BLOCK_SIZES,
|
||||
TextVariant,
|
||||
BackgroundColor,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { NETWORK_TYPES } from '../../../../shared/constants/network';
|
||||
import { Numeric } from '../../../../shared/modules/Numeric';
|
||||
@ -26,6 +39,11 @@ import SecurityProviderBannerMessage from '../security-provider-banner-message/s
|
||||
import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants';
|
||||
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
|
||||
import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
import { Icon, IconName, Text } from '../../component-library';
|
||||
import Box from '../../ui/box/box';
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
import SignatureRequestOriginalWarning from './signature-request-original-warning';
|
||||
|
||||
export default class SignatureRequestOriginal extends Component {
|
||||
@ -55,6 +73,9 @@ export default class SignatureRequestOriginal extends Component {
|
||||
showRejectTransactionsConfirmationModal: PropTypes.func.isRequired,
|
||||
cancelAll: PropTypes.func.isRequired,
|
||||
provider: PropTypes.object,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
selectedAccount: PropTypes.object,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
};
|
||||
|
||||
state = {
|
||||
@ -92,6 +113,16 @@ export default class SignatureRequestOriginal extends Component {
|
||||
}
|
||||
};
|
||||
|
||||
renderAccountInfo = () => {
|
||||
return (
|
||||
<div className="request-signature__account-info">
|
||||
{this.renderAccount()}
|
||||
{this.renderRequestIcon()}
|
||||
{this.renderBalance()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
renderTypedData = (data) => {
|
||||
const { t } = this.context;
|
||||
const { domain, message } = JSON.parse(data);
|
||||
@ -152,6 +183,39 @@ export default class SignatureRequestOriginal extends Component {
|
||||
securityProviderResponse={txData.securityProviderResponse}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
this.props.selectedAccount.address ===
|
||||
this.props.fromAccount.address ? null : (
|
||||
<Box
|
||||
className="request-signature__mismatch-info"
|
||||
display={DISPLAY.FLEX}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
padding={4}
|
||||
marginBottom={4}
|
||||
backgroundColor={BackgroundColor.primaryMuted}
|
||||
>
|
||||
<Icon
|
||||
name={IconName.Info}
|
||||
color={IconColor.infoDefault}
|
||||
marginRight={2}
|
||||
/>
|
||||
<Text
|
||||
variant={TextVariant.bodyXs}
|
||||
color={TextColor.textDefault}
|
||||
as="h7"
|
||||
>
|
||||
{this.context.t('mismatchAccount', [
|
||||
shortenAddress(this.props.selectedAccount.address),
|
||||
shortenAddress(this.props.fromAccount.address),
|
||||
])}
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
|
||||
<div className="request-signature__origin">
|
||||
<SiteOrigin
|
||||
title={txData.msgParams.origin}
|
||||
|
@ -13,6 +13,9 @@ import {
|
||||
getTotalUnapprovedMessagesCount,
|
||||
getPreferences,
|
||||
getCurrentCurrency,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
getSelectedAccount,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../selectors';
|
||||
import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util';
|
||||
import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
|
||||
@ -53,6 +56,9 @@ function mapStateToProps(state, ownProps) {
|
||||
messagesList,
|
||||
messagesCount,
|
||||
provider,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
selectedAccount: getSelectedAccount(state),
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -5,7 +5,9 @@ import testData from '../../../../.storybook/test-data';
|
||||
import README from './README.mdx';
|
||||
import SignatureRequestOriginal from './signature-request-original.component';
|
||||
|
||||
const [MOCK_PRIMARY_IDENTITY] = Object.values(testData.metamask.identities);
|
||||
const [MOCK_PRIMARY_IDENTITY, MOCK_SECONDARY_IDENTITY] = Object.values(
|
||||
testData.metamask.identities,
|
||||
);
|
||||
|
||||
const MOCK_SIGN_DATA = JSON.stringify({
|
||||
domain: {
|
||||
@ -72,6 +74,7 @@ export default {
|
||||
mostRecentOverviewPage: '/',
|
||||
nativeCurrency: 'ETH',
|
||||
provider: { name: 'Goerli ETH' },
|
||||
selectedAccount: MOCK_PRIMARY_IDENTITY,
|
||||
},
|
||||
};
|
||||
|
||||
@ -131,3 +134,18 @@ ETHSignTypedStory.args = {
|
||||
type: MESSAGE_TYPE.ETH_SIGN_TYPED_DATA,
|
||||
},
|
||||
};
|
||||
|
||||
export const AccountMismatchStory = Template.bind({});
|
||||
|
||||
AccountMismatchStory.storyName = 'Account Mismatch warning';
|
||||
|
||||
AccountMismatchStory.args = {
|
||||
txData: {
|
||||
msgParams: {
|
||||
data: MOCK_SIGN_DATA,
|
||||
origin: 'https://happydapp.website/governance?futarchy=true',
|
||||
},
|
||||
type: MESSAGE_TYPE.PERSONAL_SIGN,
|
||||
},
|
||||
selectedAccount: MOCK_SECONDARY_IDENTITY,
|
||||
};
|
||||
|
@ -51,6 +51,9 @@ const props = {
|
||||
},
|
||||
type: MESSAGE_TYPE.ETH_SIGN,
|
||||
},
|
||||
selectedAccount: {
|
||||
address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
|
||||
},
|
||||
};
|
||||
|
||||
const render = (txData = props.txData) => {
|
||||
|
@ -2,7 +2,13 @@ import React, { PureComponent } from 'react';
|
||||
import { memoize } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import LedgerInstructionField from '../ledger-instruction-field';
|
||||
import { sanitizeMessage, getURLHostName } from '../../../helpers/utils/util';
|
||||
import {
|
||||
sanitizeMessage,
|
||||
getURLHostName,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
shortenAddress,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../helpers/utils/util';
|
||||
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
|
||||
import SiteOrigin from '../../ui/site-origin';
|
||||
import Button from '../../ui/button';
|
||||
@ -13,6 +19,13 @@ import {
|
||||
FONT_WEIGHT,
|
||||
TEXT_ALIGN,
|
||||
TextColor,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
IconColor,
|
||||
DISPLAY,
|
||||
BLOCK_SIZES,
|
||||
TextVariant,
|
||||
BackgroundColor,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import NetworkAccountBalanceHeader from '../network-account-balance-header';
|
||||
import { NETWORK_TYPES } from '../../../../shared/constants/network';
|
||||
@ -23,6 +36,11 @@ import SecurityProviderBannerMessage from '../security-provider-banner-message/s
|
||||
import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants';
|
||||
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
|
||||
import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
import { Icon, IconName, Text } from '../../component-library';
|
||||
import Box from '../../ui/box/box';
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
import Footer from './signature-request-footer';
|
||||
import Message from './signature-request-message';
|
||||
|
||||
@ -75,6 +93,11 @@ export default class SignatureRequest extends PureComponent {
|
||||
mostRecentOverviewPage: PropTypes.string,
|
||||
showRejectTransactionsConfirmationModal: PropTypes.func.isRequired,
|
||||
cancelAll: PropTypes.func.isRequired,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
// Used to show a warning if the signing account is not the selected account
|
||||
// Largely relevant for contract wallet custodians
|
||||
selectedAccount: PropTypes.object,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
@ -255,6 +278,38 @@ export default class SignatureRequest extends PureComponent {
|
||||
securityProviderResponse={txData.securityProviderResponse}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
this.props.selectedAccount.address === address ? null : (
|
||||
<Box
|
||||
className="request-signature__mismatch-info"
|
||||
display={DISPLAY.FLEX}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
padding={4}
|
||||
marginBottom={4}
|
||||
backgroundColor={BackgroundColor.primaryMuted}
|
||||
>
|
||||
<Icon
|
||||
name={IconName.Info}
|
||||
color={IconColor.infoDefault}
|
||||
marginRight={2}
|
||||
/>
|
||||
<Text
|
||||
variant={TextVariant.bodyXs}
|
||||
color={TextColor.textDefault}
|
||||
as="h7"
|
||||
>
|
||||
{this.context.t('mismatchAccount', [
|
||||
shortenAddress(this.props.selectedAccount.address),
|
||||
shortenAddress(address),
|
||||
])}
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
|
||||
<div className="signature-request__origin">
|
||||
<SiteOrigin
|
||||
siteOrigin={origin}
|
||||
|
@ -23,6 +23,9 @@ const baseProps = {
|
||||
balance: '0x346ba7725f412cbfdb',
|
||||
name: 'Antonio',
|
||||
},
|
||||
selectedAccount: {
|
||||
address: '0x123456789abcdef',
|
||||
},
|
||||
};
|
||||
|
||||
describe('Signature Request Component', () => {
|
||||
@ -324,5 +327,38 @@ describe('Signature Request Component', () => {
|
||||
).toBeNull();
|
||||
expect(queryByText('This is based on information from')).toBeNull();
|
||||
});
|
||||
|
||||
it('should render a warning when the selected account is not the one being used to sign', () => {
|
||||
const msgParams = {
|
||||
data: JSON.stringify(messageData),
|
||||
version: 'V4',
|
||||
origin: 'test',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<SignatureRequest
|
||||
{...baseProps}
|
||||
selectedAccount={{
|
||||
address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
|
||||
balance: '0x0',
|
||||
name: 'Account 1',
|
||||
}}
|
||||
conversionRate={null}
|
||||
txData={{
|
||||
msgParams,
|
||||
securityProviderResponse: {
|
||||
flagAsDangerous:
|
||||
SECURITY_PROVIDER_MESSAGE_SEVERITIES.NOT_MALICIOUS,
|
||||
},
|
||||
}}
|
||||
unapprovedMessagesCount={2}
|
||||
/>,
|
||||
store,
|
||||
);
|
||||
|
||||
expect(
|
||||
container.querySelector('.request-signature__mismatch-info'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -10,6 +10,9 @@ import {
|
||||
getCurrentCurrency,
|
||||
getPreferences,
|
||||
conversionRateSelector,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
getSelectedAccount,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../selectors';
|
||||
import {
|
||||
isAddressLedger,
|
||||
@ -55,6 +58,9 @@ function mapStateToProps(state, ownProps) {
|
||||
subjectMetadata: getSubjectMetadata(state),
|
||||
// not forwarded to component
|
||||
allAccounts: accountsWithSendEtherInfoSelector(state),
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
selectedAccount: getSelectedAccount(state),
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -111,6 +111,9 @@ describe('Signature Request', () => {
|
||||
nativeCurrency: 'ETH',
|
||||
currentCurrency: 'usd',
|
||||
conversionRate: null,
|
||||
selectedAccount: {
|
||||
address: '0x123456789abcdef',
|
||||
},
|
||||
};
|
||||
|
||||
const propsWithFiat = {
|
||||
|
@ -3,7 +3,9 @@ import testData from '../../../../.storybook/test-data';
|
||||
import README from './README.mdx';
|
||||
import SignatureRequest from './signature-request.component';
|
||||
|
||||
const [MOCK_PRIMARY_IDENTITY] = Object.values(testData.metamask.identities);
|
||||
const [MOCK_PRIMARY_IDENTITY, MOCK_SECONDARY_IDENTITY] = Object.values(
|
||||
testData.metamask.identities,
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'Components/App/SignatureRequest',
|
||||
@ -76,4 +78,16 @@ DefaultStory.args = {
|
||||
},
|
||||
fromAccount: MOCK_PRIMARY_IDENTITY,
|
||||
provider: { name: 'Goerli ETH' },
|
||||
selectedAccount: MOCK_PRIMARY_IDENTITY,
|
||||
};
|
||||
|
||||
export const AccountMismatchStory = (args) => {
|
||||
return <SignatureRequest {...args} />;
|
||||
};
|
||||
|
||||
AccountMismatchStory.storyName = 'AccountMismatch';
|
||||
|
||||
AccountMismatchStory.args = {
|
||||
...DefaultStory.args,
|
||||
selectedAccount: MOCK_SECONDARY_IDENTITY,
|
||||
};
|
||||
|
@ -10,7 +10,12 @@ import SignatureRequestSIWE from '../../components/app/signature-request-siwe';
|
||||
import SignatureRequestOriginal from '../../components/app/signature-request-original';
|
||||
import Loading from '../../components/ui/loading-screen';
|
||||
import { useRouting } from '../../hooks/useRouting';
|
||||
import { getTotalUnapprovedSignatureRequestCount } from '../../selectors';
|
||||
import {
|
||||
getTotalUnapprovedSignatureRequestCount,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
getSelectedAccount,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../selectors';
|
||||
import { MESSAGE_TYPE } from '../../../shared/constants/app';
|
||||
import { TransactionStatus } from '../../../shared/constants/transaction';
|
||||
import { getSendTo } from '../../ducks/send';
|
||||
@ -68,6 +73,11 @@ const ConfirmTxScreen = ({ match }) => {
|
||||
provider: { chainId },
|
||||
} = useSelector((state) => state.metamask);
|
||||
const { txId: index } = useSelector((state) => state.appState);
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
const selectedAccount = useSelector(getSelectedAccount);
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
const [prevValue, setPrevValues] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
@ -212,6 +222,9 @@ const ConfirmTxScreen = ({ match }) => {
|
||||
cancelMessage={cancelMessage(SIGN_MESSAGE_TYPE.MESSAGE)}
|
||||
cancelPersonalMessage={cancelMessage(SIGN_MESSAGE_TYPE.PERSONAL)}
|
||||
cancelTypedMessage={cancelMessage(SIGN_MESSAGE_TYPE.TYPED)}
|
||||
///: BEGIN:ONLY_INCLUDE_IN(mmi)
|
||||
selectedAccount={selectedAccount}
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user