m
/
metamask-extension
mirror of https://github.com/kremalicious/metamask-extension.git
1
0
Fork 0
Code

Confirmation page alerts (#20125)

This commit is contained in:
Jyoti Puri 2023-08-03 16:24:54 +05:30 committed by GitHub
parent 03f315e82d
commit 8c46f85764
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 900 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.metamaskrc.dist
View File

@ -13,3 +13,4 @@ INFURA_PROJECT_ID=00000000000
; Set this to test changes to the phishing warning page.
;PHISHING_WARNING_PAGE_URL=
BLOCKAID_FILE_CDN=
BLOCKAID_PUBLIC_KEY=

19
app/scripts/controllers/transactions/index.js
View File

@ -2415,13 +2415,22 @@ export default class TransactionController extends EventEmitter {
let uiCustomizations;
if (securityProviderResponse?.flagAsDangerous === 1) {
uiCustomizations = ['flagged_as_malicious'];
} else if (securityProviderResponse?.flagAsDangerous === 2) {
uiCustomizations = ['flagged_as_safety_unknown'];
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
if (securityAlertResponse?.result_type === BlockaidResultType.Failed) {
uiCustomizations = ['security_alert_failed'];
} else {
uiCustomizations = null;
///: END:ONLY_INCLUDE_IN
// eslint-disable-next-line no-lonely-if
if (securityProviderResponse?.flagAsDangerous === 1) {
uiCustomizations = ['flagged_as_malicious'];
} else if (securityProviderResponse?.flagAsDangerous === 2) {
uiCustomizations = ['flagged_as_safety_unknown'];
} else {
uiCustomizations = null;
}
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
}
///: END:ONLY_INCLUDE_IN
/** The transaction status property is not considered sensitive and is now included in the non-anonymous event */
let properties = {

77
app/scripts/controllers/transactions/index.test.js
View File

@ -2652,6 +2652,83 @@ describe('Transaction Controller', function () {
);
});
it('should call _trackMetaMetricsEvent with the correct payload when blockaid verification fails', async function () {
const txMeta = {
id: 1,
status: TransactionStatus.unapproved,
txParams: {
from: fromAccount.address,
to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
gasPrice: '0x77359400',
gas: '0x7b0d',
nonce: '0x4b',
},
type: TransactionType.simpleSend,
origin: 'other',
chainId: currentChainId,
time: 1624408066355,
metamaskNetworkId: currentNetworkId,
securityAlertResponse: {
result_type: BlockaidResultType.Failed,
reason: 'some error',
},
};
const expectedPayload = {
actionId,
initialEvent: 'Transaction Added',
successEvent: 'Transaction Approved',
failureEvent: 'Transaction Rejected',
uniqueIdentifier: 'transaction-added-1',
persist: true,
category: MetaMetricsEventCategory.Transactions,
properties: {
network: '5',
referrer: 'other',
source: MetaMetricsTransactionEventSource.Dapp,
status: 'unapproved',
transaction_type: TransactionType.simpleSend,
chain_id: '0x5',
eip_1559_version: '0',
gas_edit_attempted: 'none',
gas_edit_type: 'none',
account_type: 'MetaMask',
asset_type: AssetType.native,
token_standard: TokenStandard.none,
device_model: 'N/A',
transaction_speed_up: false,
ui_customizations: ['security_alert_failed'],
security_alert_reason: 'some error',
security_alert_response: BlockaidResultType.Failed,
},
sensitiveProperties: {
baz: 3.0,
foo: 'bar',
gas_price: '2',
gas_limit: '0x7b0d',
transaction_contract_method: undefined,
transaction_replaced: undefined,
first_seen: 1624408066355,
transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
},
};
await txController._trackTransactionMetricsEvent(
txMeta,
TransactionMetaMetricsEvent.added,
actionId,
{
baz: 3.0,
foo: 'bar',
},
);
assert.equal(createEventFragmentSpy.callCount, 1);
assert.equal(finalizeEventFragmentSpy.callCount, 0);
assert.deepEqual(
createEventFragmentSpy.getCall(0).args[0],
expectedPayload,
);
});
it('should call _trackMetaMetricsEvent with the correct payload (extra params) when flagAsDangerous is malicious', async function () {
const txMeta = {
id: 1,

116
app/scripts/lib/ppom/ppom-middleware.test.ts
View File

@ -1,3 +1,7 @@
import {
BlockaidReason,
BlockaidResultType,
} from '../../../../shared/constants/security-provider';
import { createPPOMMiddleware } from './ppom-middleware';
Object.defineProperty(globalThis, 'fetch', {
@ -13,10 +17,16 @@ Object.defineProperty(globalThis, 'performance', {
describe('PPOMMiddleware', () => {
it('should call ppomController.usePPOM for requests of type confirmation', async () => {
const useMock = jest.fn();
const controller = {
const ppomController = {
usePPOM: useMock,
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
await middlewareFunction(
{ method: 'eth_sendTransaction' },
undefined,
@ -26,25 +36,85 @@ describe('PPOMMiddleware', () => {
});
it('should add validation response on confirmation requests', async () => {
const controller = {
const ppomController = {
usePPOM: async () => Promise.resolve('VALIDATION_RESULT'),
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const req = { method: 'eth_sendTransaction', ppomResponse: undefined };
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
const req = {
method: 'eth_sendTransaction',
securityAlertResponse: undefined,
};
await middlewareFunction(req, undefined, () => undefined);
expect(req.ppomResponse).toBeDefined();
expect(req.securityAlertResponse).toBeDefined();
});
it('should not do validation if user has not enabled preference', async () => {
const ppomController = {
usePPOM: async () => Promise.resolve('VALIDATION_RESULT'),
};
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: false }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
const req = {
method: 'eth_sendTransaction',
securityAlertResponse: undefined,
};
await middlewareFunction(req, undefined, () => undefined);
expect(req.securityAlertResponse).toBeUndefined();
});
it('should set Failed type in response if usePPOM throw error', async () => {
const ppomController = {
usePPOM: async () => {
throw new Error('some error');
},
};
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
const req = {
method: 'eth_sendTransaction',
securityAlertResponse: undefined,
};
await middlewareFunction(req, undefined, () => undefined);
expect((req.securityAlertResponse as any)?.result_type).toBe(
BlockaidResultType.Failed,
);
expect((req.securityAlertResponse as any)?.reason).toBe(
BlockaidReason.failed,
);
});
it('should call next method when ppomController.usePPOM completes', async () => {
const ppom = {
validateJsonRpc: () => undefined,
};
const controller = {
const ppomController = {
usePPOM: async (callback: any) => {
callback(ppom);
},
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
const nextMock = jest.fn();
await middlewareFunction(
{ method: 'eth_sendTransaction' },
@ -55,12 +125,18 @@ describe('PPOMMiddleware', () => {
});
it('should call next method when ppomController.usePPOM throws error', async () => {
const controller = {
const ppomController = {
usePPOM: async (_callback: any) => {
throw Error('Some error');
},
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
const nextMock = jest.fn();
await middlewareFunction(
{ method: 'eth_sendTransaction' },
@ -75,12 +151,18 @@ describe('PPOMMiddleware', () => {
const ppom = {
validateJsonRpc: validateMock,
};
const controller = {
const ppomController = {
usePPOM: async (callback: any) => {
callback(ppom);
},
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
await middlewareFunction(
{ method: 'eth_sendTransaction' },
undefined,
@ -94,12 +176,18 @@ describe('PPOMMiddleware', () => {
const ppom = {
validateJsonRpc: validateMock,
};
const controller = {
const ppomController = {
usePPOM: async (callback: any) => {
callback(ppom);
},
};
const middlewareFunction = createPPOMMiddleware(controller as any);
const preferenceController = {
store: { getState: () => ({ securityAlertsEnabled: true }) },
};
const middlewareFunction = createPPOMMiddleware(
ppomController as any,
preferenceController as any,
);
await middlewareFunction(
{ method: 'eth_someRequest' },
undefined,

35
app/scripts/lib/ppom/ppom-middleware.ts
View File

@ -1,7 +1,14 @@
import { PPOM } from '@blockaid/ppom';
import { PPOMController } from '@metamask/ppom-validator';
import {
BlockaidReason,
BlockaidResultType,
} from '../../../../shared/constants/security-provider';
import PreferencesController from 'app/scripts/controllers/preferences';
const { sentry } = global as any;
const ConfirmationMethods = Object.freeze([
'eth_sendRawTransaction',
'eth_sendTransaction',
@ -23,19 +30,33 @@ const ConfirmationMethods = Object.freeze([
* the request will be forwarded to the next middleware, together with the PPOM response.
*
* @param ppomController - Instance of PPOMController.
* @param preferencesController - Instance of PreferenceController.
* @returns PPOMMiddleware function.
*/
export function createPPOMMiddleware(ppomController: PPOMController) {
export function createPPOMMiddleware(
ppomController: PPOMController,
preferencesController: PreferencesController,
) {
return async (req: any, _res: any, next: () => void) => {
try {
if (ConfirmationMethods.includes(req.method)) {
const securityAlertsEnabled =
preferencesController.store.getState()?.securityAlertsEnabled;
if (securityAlertsEnabled && ConfirmationMethods.includes(req.method)) {
// eslint-disable-next-line require-atomic-updates
req.ppomResponse = await ppomController.usePPOM(async (ppom: PPOM) => {
return ppom.validateJsonRpc(req);
});
req.securityAlertResponse = await ppomController.usePPOM(
async (ppom: PPOM) => {
return ppom.validateJsonRpc(req);
},
);
}
} catch (error: unknown) {
} catch (error: any) {
sentry?.captureException(error);
console.error('Error validating JSON RPC using PPOM: ', error);
req.securityAlertResponse = {
result_type: BlockaidResultType.Failed,
reason: BlockaidReason.failed,
description: 'Validating the confirmation failed by throwing error.',
};
} finally {
next();
}

888
app/scripts/lib/ppom/ppom.js
View File

File diff suppressed because it is too large Load Diff

5
app/scripts/metamask-controller.js
View File

@ -656,6 +656,7 @@ export default class MetamaskController extends EventEmitter {
this.preferencesController.store,
),
cdnBaseUrl: process.env.BLOCKAID_FILE_CDN,
blockaidPublicKey: process.env.BLOCKAID_PUBLIC_KEY,
});
///: END:ONLY_INCLUDE_IN
@ -4054,7 +4055,9 @@ export default class MetamaskController extends EventEmitter {
engine.push(this.permissionLogController.createMiddleware());
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
engine.push(createPPOMMiddleware(this.ppomController));
engine.push(
createPPOMMiddleware(this.ppomController, this.preferencesController),
);
///: END:ONLY_INCLUDE_IN
engine.push(

5
builds.yml
View File

@ -47,7 +47,7 @@ buildTypes:
- desktop
- build-flask
- keyring-snaps
# - blockaid
# - blockaid
env:
- INFURA_FLASK_PROJECT_ID
- SEGMENT_FLASK_WRITE_KEY
@ -120,6 +120,7 @@ features:
blockaid:
env:
- BLOCKAID_FILE_CDN: null
- BLOCKAID_PUBLIC_KEY: null
###
# Build Type code extensions. Things like different support links, warning pages, banners
@ -230,6 +231,8 @@ env:
- EDITOR_URL: ''
# CDN for blockaid files
- BLOCKAID_FILE_CDN
# Blockaid public key for verifying signatures of data files downloaded from CDN
- BLOCKAID_PUBLIC_KEY
###
# Meta variables

2
shared/constants/security-provider.ts
View File

@ -50,6 +50,7 @@ export enum BlockaidReason {
// Locally defined
notApplicable = 'NotApplicable',
failed = 'Failed',
}
export enum BlockaidResultType {
@ -57,6 +58,7 @@ export enum BlockaidResultType {
Warning = 'Warning',
Benign = 'Benign',
// Locally defined
Failed = 'Failed',
NotApplicable = 'NotApplicable',
}

10
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -13,6 +13,9 @@ import Typography from '../../../ui/typography';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils';
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
import BlockaidBannerAlert from '../../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
///: END:ONLY_INCLUDE_IN
import SecurityProviderBannerMessage from '../../security-provider-banner-message/security-provider-banner-message';
import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
@ -222,6 +225,13 @@ export default class ConfirmPageContainerContent extends Component {
{ethGasPriceWarning && (
<ConfirmPageContainerWarning warning={ethGasPriceWarning} />
)}
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
<BlockaidBannerAlert
securityAlertResponse={txData?.securityAlertResponse}
/>
///: END:ONLY_INCLUDE_IN
}
{isSuspiciousResponse(txData?.securityProviderResponse) && (
<SecurityProviderBannerMessage
securityProviderResponse={txData.securityProviderResponse}

22
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.test.js
View File

@ -197,4 +197,26 @@ describe('Confirm Page Container Content', () => {
);
expect(getByRole('button', { name: 'Buy' })).toBeInTheDocument();
});
it('should display security alert if present', () => {
const { getByText } = renderWithProvider(
<ConfirmPageContainerContent
{...props}
txData={{
securityAlertResponse: {
resultType: 'Malicious',
reason: 'blur_farming',
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
args: {
contract: '0xa7206d878c5c3871826dfdb42191c49b1d11f466',
operator: '0x92a3b9773b1763efa556f55ccbeb20441962d9b2',
},
},
}}
/>,
store,
);
expect(getByText('This is a deceptive request')).toBeInTheDocument();
});
});

2
ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Security Provider Banner Alert should match snapshot 1`] = `
<div>
<div
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"

10
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
View File

@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resultType is 'Malicious 1`] = `
exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertResponse.result_type is 'Malicious 1`] = `
<div
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
@ -46,9 +46,9 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul
</div>
`;
exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resultType is 'Warning 1`] = `
exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Warning 1`] = `
<div
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
@ -95,7 +95,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu
exports[`Blockaid Banner Alert should render details when provided 1`] = `
<div>
<div
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"

17
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js
View File

@ -39,12 +39,19 @@ const REASON_TO_DESCRIPTION_TKEY = Object.freeze({
/** List of suspicious reason(s). Other reasons will be deemed as deceptive. */
const SUSPCIOUS_REASON = [BlockaidReason.rawSignatureFarming];
function BlockaidBannerAlert({
ppomResponse: { reason, resultType, features },
}) {
function BlockaidBannerAlert({ securityAlertResponse }) {
const t = useContext(I18nContext);
if (resultType === BlockaidResultType.Benign) {
if (!securityAlertResponse) {
return null;
}
const { reason, result_type: resultType, features } = securityAlertResponse;
if (
resultType === BlockaidResultType.Benign ||
resultType === BlockaidResultType.Failed
) {
return null;
}
@ -84,7 +91,7 @@ function BlockaidBannerAlert({
}
BlockaidBannerAlert.propTypes = {
ppomResponse: PropTypes.object,
securityAlertResponse: PropTypes.object,
};
export default BlockaidBannerAlert;

12
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.stories.js
View File

@ -16,27 +16,27 @@ export default {
features: {
control: 'array',
description:
'ppomResponse.features value which is a list displayed as SecurityProviderBannerAlert details',
'securityAlertResponse.features value which is a list displayed as SecurityProviderBannerAlert details',
},
reason: {
control: 'select',
options: Object.values(BlockaidReason),
description: 'ppomResponse.reason value',
description: 'securityAlertResponse.reason value',
},
resultType: {
result_type: {
control: 'select',
options: Object.values(BlockaidResultType),
description: 'ppomResponse.resultType value',
description: 'securityAlertResponse.result_type value',
},
},
args: {
features: mockFeatures,
reason: BlockaidReason.setApprovalForAll,
resultType: BlockaidResultType.Warning,
result_type: BlockaidResultType.Warning,
},
};
export const DefaultStory = (args) => (
<BlockaidBannerAlert ppomResponse={args} />
<BlockaidBannerAlert securityAlertResponse={args} />
);
DefaultStory.storyName = 'Default';

58
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js
View File

@ -7,8 +7,8 @@ import {
} from '../../../../../shared/constants/security-provider';
import BlockaidBannerAlert from '.';
const mockPpomResponse = {
resultType: BlockaidResultType.Warning,
const mockSecurityAlertResponse = {
result_type: BlockaidResultType.Warning,
reason: BlockaidReason.setApprovalForAll,
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
@ -19,12 +19,20 @@ const mockPpomResponse = {
};
describe('Blockaid Banner Alert', () => {
it(`should not render when ppomResponse.resultType is '${BlockaidResultType.Benign}'`, () => {
it('should not render when securityAlertResponse is not present', () => {
const { container } = renderWithLocalization(
<BlockaidBannerAlert securityAlertResponse={undefined} />,
);
expect(container.querySelector('.mm-banner-alert')).toBeNull();
});
it(`should not render when securityAlertResponse.result_type is '${BlockaidResultType.Benign}'`, () => {
const { container } = renderWithLocalization(
<BlockaidBannerAlert
ppomResponse={{
...mockPpomResponse,
resultType: BlockaidResultType.Benign,
securityAlertResponse={{
...mockSecurityAlertResponse,
result_type: BlockaidResultType.Benign,
}}
/>,
);
@ -32,12 +40,25 @@ describe('Blockaid Banner Alert', () => {
expect(container.querySelector('.mm-banner-alert')).toBeNull();
});
it(`should render '${Severity.Danger}' UI when ppomResponse.resultType is '${BlockaidResultType.Malicious}`, () => {
it(`should not render when securityAlertResponse.result_type is '${BlockaidResultType.Failed}'`, () => {
const { container } = renderWithLocalization(
<BlockaidBannerAlert
ppomResponse={{
...mockPpomResponse,
resultType: BlockaidResultType.Malicious,
securityAlertResponse={{
...mockSecurityAlertResponse,
result_type: BlockaidResultType.Failed,
}}
/>,
);
expect(container.querySelector('.mm-banner-alert')).toBeNull();
});
it(`should render '${Severity.Danger}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Malicious}`, () => {
const { container } = renderWithLocalization(
<BlockaidBannerAlert
securityAlertResponse={{
...mockSecurityAlertResponse,
result_type: BlockaidResultType.Malicious,
}}
/>,
);
@ -49,9 +70,9 @@ describe('Blockaid Banner Alert', () => {
expect(dangerBannerAlert).toMatchSnapshot();
});
it(`should render '${Severity.Warning}' UI when ppomResponse.resultType is '${BlockaidResultType.Warning}`, () => {
it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Warning}`, () => {
const { container } = renderWithLocalization(
<BlockaidBannerAlert ppomResponse={mockPpomResponse} />,
<BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,
);
const warningBannerAlert = container.querySelector(
'.mm-banner-alert--severity-warning',
@ -63,7 +84,7 @@ describe('Blockaid Banner Alert', () => {
it('should render title, "This is a deceptive request"', () => {
const { getByText } = renderWithLocalization(
<BlockaidBannerAlert ppomResponse={mockPpomResponse} />,
<BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,
);
expect(getByText('This is a deceptive request')).toBeInTheDocument();
@ -72,8 +93,8 @@ describe('Blockaid Banner Alert', () => {
it('should render title, "This is a suspicious request", when the reason is "raw_signature_farming"', () => {
const { getByText } = renderWithLocalization(
<BlockaidBannerAlert
ppomResponse={{
...mockPpomResponse,
securityAlertResponse={{
...mockSecurityAlertResponse,
reason: BlockaidReason.rawSignatureFarming,
}}
/>,
@ -90,7 +111,10 @@ describe('Blockaid Banner Alert', () => {
const { container, getByText } = renderWithLocalization(
<BlockaidBannerAlert
ppomResponse={{ ...mockPpomResponse, features: mockFeatures }}
securityAlertResponse={{
...mockSecurityAlertResponse,
features: mockFeatures,
}}
/>,
);
@ -133,7 +157,7 @@ describe('Blockaid Banner Alert', () => {
it(`should render for '${reason}' correctly`, () => {
const { getByText } = renderWithLocalization(
<BlockaidBannerAlert
ppomResponse={{ ...mockPpomResponse, reason }}
securityAlertResponse={{ ...mockSecurityAlertResponse, reason }}
/>,
);

8
ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
View File

@ -36,13 +36,7 @@ function SecurityProviderBannerAlert({
const t = useContext(I18nContext);
return (
<BannerAlert
title={title}
severity={severity}
marginTop={4}
marginRight={4}
marginLeft={4}
>
<BannerAlert title={title} severity={severity} margin={4}>
<Text marginTop={2}>{description}</Text>
{details && (

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

@ -42,6 +42,9 @@ import {
Text,
///: END:ONLY_INCLUDE_IN
} from '../../component-library';
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import Box from '../../ui/box/box';
///: END:ONLY_INCLUDE_IN
@ -150,12 +153,18 @@ export default class SignatureRequestOriginal extends Component {
return (
<div className="request-signature__body">
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
<BlockaidBannerAlert
securityAlertResponse={txData?.securityAlertResponse}
/>
///: END:ONLY_INCLUDE_IN
}
{isSuspiciousResponse(txData?.securityProviderResponse) && (
<SecurityProviderBannerMessage
securityProviderResponse={txData.securityProviderResponse}
/>
)}
{
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
this.props.selectedAccount.address ===
@ -183,7 +192,6 @@ export default class SignatureRequestOriginal extends Component {
)
///: END:ONLY_INCLUDE_IN
}
<div className="request-signature__origin">
{
// Use legacy authorship header for snaps
@ -211,7 +219,6 @@ export default class SignatureRequestOriginal extends Component {
///: END:ONLY_INCLUDE_IN
}
</div>
<Typography
className="request-signature__content__title"
variant={TypographyVariant.H3}
@ -229,7 +236,6 @@ export default class SignatureRequestOriginal extends Component {
>
{this.context.t('signatureRequestGuidance')}
</Typography>
<div className={classnames('request-signature__notice')}>{notice}</div>
<div className="request-signature__rows">
{rows.map(({ name, value }, index) => {

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

@ -180,4 +180,20 @@ describe('SignatureRequestOriginal', () => {
).toBeNull();
expect(screen.queryByText('OpenSea')).toBeNull();
});
it('should display security alert if present', () => {
props.txData.securityAlertResponse = {
resultType: 'Malicious',
reason: 'blur_farming',
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
args: {
contract: '0xa7206d878c5c3871826dfdb42191c49b1d11f466',
operator: '0x92a3b9773b1763efa556f55ccbeb20441962d9b2',
},
};
render();
expect(screen.getByText('This is a deceptive request')).toBeInTheDocument();
});
});

14
ui/components/app/signature-request-siwe/signature-request-siwe.js
View File

@ -38,6 +38,9 @@ import {
import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation';
import { getMostRecentOverviewPage } from '../../../ducks/history/history';
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
///: END:ONLY_INCLUDE_IN
import LedgerInstructionField from '../ledger-instruction-field';
import SignatureRequestHeader from '../signature-request-header';
@ -133,13 +136,18 @@ export default function SignatureRequestSIWE({ txData }) {
isSIWEDomainValid={isSIWEDomainValid}
subjectMetadata={targetSubjectMetadata}
/>
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
<BlockaidBannerAlert
securityAlertResponse={txData?.securityAlertResponse}
/>
///: END:ONLY_INCLUDE_IN
}
{showSecurityProviderBanner && (
<SecurityProviderBannerMessage
securityProviderResponse={txData.securityProviderResponse}
/>
)}
<Message data={formatMessageParams(parsedMessage, t)} />
{!isMatchingAddress && (
<BannerAlert
@ -154,13 +162,11 @@ export default function SignatureRequestSIWE({ txData }) {
])}
</BannerAlert>
)}
{isLedgerWallet && (
<div className="confirm-approve-content__ledger-instruction-wrapper">
<LedgerInstructionField showDataInstruction />
</div>
)}
{!isSIWEDomainValid && (
<BannerAlert
severity={SEVERITIES.DANGER}

27
ui/components/app/signature-request-siwe/signature-request-siwe.test.js
View File

@ -225,4 +225,31 @@ describe('SignatureRequestSIWE (Sign in with Ethereum)', () => {
expect(mockShowModal).toHaveBeenCalled();
});
});
it('should display security alert if present', () => {
const store = configureStore(mockStoreInitialState);
const txData = cloneDeep(mockProps.txData);
const { getByText } = renderWithProvider(
<SignatureRequestSIWE
{...mockProps}
txData={{
...txData,
securityAlertResponse: {
resultType: 'Malicious',
reason: 'blur_farming',
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
args: {
contract: '0xa7206d878c5c3871826dfdb42191c49b1d11f466',
operator: '0x92a3b9773b1763efa556f55ccbeb20441962d9b2',
},
},
}}
/>,
store,
);
expect(getByText('This is a deceptive request')).toBeInTheDocument();
});
});

10
ui/components/app/signature-request/signature-request.js
View File

@ -90,6 +90,9 @@ import { mmiActionsFactory } from '../../../store/institutional/institution-back
import { showCustodyConfirmLink } from '../../../store/institutional/institution-actions';
import { useMMICustodySignMessage } from '../../../hooks/useMMICustodySignMessage';
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
///: END:ONLY_INCLUDE_IN
import Message from './signature-request-message';
import Footer from './signature-request-footer';
@ -245,6 +248,13 @@ const SignatureRequest = ({ txData }) => {
<SignatureRequestHeader txData={txData} />
</div>
<div className="signature-request-content">
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
<BlockaidBannerAlert
securityAlertResponse={txData?.securityAlertResponse}
/>
///: END:ONLY_INCLUDE_IN
}
{(txData?.securityProviderResponse?.flagAsDangerous !== undefined &&
txData?.securityProviderResponse?.flagAsDangerous !==
SECURITY_PROVIDER_MESSAGE_SEVERITY.NOT_MALICIOUS) ||

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

@ -447,5 +447,38 @@ describe('Signature Request Component', () => {
container.querySelector('.request-signature__mismatch-info'),
).toBeInTheDocument();
});
it('should display security alert if present', () => {
const msgParams = {
from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
data: JSON.stringify(messageData),
version: 'V4',
origin: 'test',
};
const { getByText } = renderWithProvider(
<SignatureRequest
{...baseProps}
conversionRate={null}
txData={{
msgParams,
securityAlertResponse: {
resultType: 'Malicious',
reason: 'blur_farming',
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
args: {
contract: '0xa7206d878c5c3871826dfdb42191c49b1d11f466',
operator: '0x92a3b9773b1763efa556f55ccbeb20441962d9b2',
},
},
}}
unapprovedMessagesCount={2}
/>,
store,
);
expect(getByText('This is a deceptive request')).toBeInTheDocument();
});
});
});

10
ui/pages/token-allowance/token-allowance.js
View File

@ -60,6 +60,9 @@ import {
NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX,
} from '../../../shared/constants/tokens';
import { isSuspiciousResponse } from '../../../shared/modules/security-provider.utils';
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
import BlockaidBannerAlert from '../../components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
///: END:ONLY_INCLUDE_IN
import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
import SimulationErrorMessage from '../../components/ui/simulation-error-message';
@ -311,6 +314,13 @@ export default function TokenAllowance({
<Box>
<ConfirmPageContainerNavigation />
</Box>
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
<BlockaidBannerAlert
securityAlertResponse={txData?.securityAlertResponse}
/>
///: END:ONLY_INCLUDE_IN
}
{isSuspiciousResponse(txData?.securityProviderResponse) && (
<SecurityProviderBannerMessage
securityProviderResponse={txData.securityProviderResponse}

24
ui/pages/token-allowance/token-allowance.test.js
View File

@ -491,4 +491,28 @@ describe('TokenAllowancePage', () => {
expect(queryByText('Account 1')).toBeInTheDocument();
expect(queryByText('Account 2')).not.toBeInTheDocument();
});
it('should display security alert if present', () => {
const { getByText } = renderWithProvider(
<TokenAllowance
{...props}
txData={{
...props.txData,
securityAlertResponse: {
resultType: 'Malicious',
reason: 'blur_farming',
description:
'A SetApprovalForAll request was made on {contract}. We found the operator {operator} to be malicious',
args: {
contract: '0xa7206d878c5c3871826dfdb42191c49b1d11f466',
operator: '0x92a3b9773b1763efa556f55ccbeb20441962d9b2',
},
},
}}
/>,
store,
);
expect(getByText('This is a deceptive request')).toBeInTheDocument();
});
});