m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

[MMI] Adds a warning if message signing account mismatches selected account (#18659)

Browse Source 
* [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:
Shane T 2023-04-25 11:47:12 +01:00 committed by GitHub
parent c1614ec670
commit 16dabdf802
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 226 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json generated
View File

@ -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."

66
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -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}

6
ui/components/app/signature-request-original/signature-request-original.container.js
View File

@ -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
};
}

20
ui/components/app/signature-request-original/signature-request-original.stories.js
View File

@ -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,
};

3
ui/components/app/signature-request-original/signature-request-original.test.js
View File

@ -51,6 +51,9 @@ const props = {
},
type: MESSAGE_TYPE.ETH_SIGN,
},
selectedAccount: {
address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
},
};
const render = (txData = props.txData) => {

57
ui/components/app/signature-request/signature-request.component.js
View File

@ -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}

36
ui/components/app/signature-request/signature-request.component.test.js
View File

@ -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();
});
});
});

6
ui/components/app/signature-request/signature-request.container.js
View File

@ -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
};
}

3
ui/components/app/signature-request/signature-request.container.test.js
View File

@ -111,6 +111,9 @@ describe('Signature Request', () => {
nativeCurrency: 'ETH',
currentCurrency: 'usd',
conversionRate: null,
selectedAccount: {
address: '0x123456789abcdef',
},
};
const propsWithFiat = {

16
ui/components/app/signature-request/signature-request.stories.js
View File

@ -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,
};

15
ui/pages/confirm-signature-request/index.js
View File

@ -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
/>
);
};