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

Adding experimental flag for blockaid (#19819)

Browse Source
This commit is contained in:
Jyoti Puri 2023-07-20 21:17:01 +05:30 committed by GitHub
parent e8deec28bb
commit 6ce80fe997
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 256 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3567,6 +3567,15 @@
"securityAlert": {
"message": "Security alert from $1 and $2"
},
"securityAlerts": {
"message": "Security alerts"
},
"securityAlertsDescription1": {
"message": "Enable this to have your transactions and signature requests reviewed locally (no data shared with third parties) and warnings displayed when malicious activity is detected."
},
"securityAlertsDescription2": {
"message": "Always be sure to do your own due diligence before approving any requests. There's no guarantee all mailcious activity will be detected by this feature."
},
"securityAndPrivacy": {
"message": "Security & privacy"
},

16
app/scripts/controllers/preferences.js
View File

@ -41,6 +41,9 @@ export default class PreferencesController {
useNftDetection: false,
useCurrencyRateCheck: true,
openSeaEnabled: false,
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
securityAlertsEnabled: false,
///: END:ONLY_INCLUDE_IN
advancedGasFee: null,
// WARNING: Do not use feature flags for security-sensitive things.
@ -185,6 +188,19 @@ export default class PreferencesController {
});
}
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
/**
* Setter for the `securityAlertsEnabled` property
*
* @param {boolean} securityAlertsEnabled - Whether or not the user prefers to use the security alerts.
*/
setSecurityAlertsEnabled(securityAlertsEnabled) {
this.store.updateState({
securityAlertsEnabled,
});
}
///: END:ONLY_INCLUDE_IN
/**
* Setter for the `advancedGasFee` property
*

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

@ -649,6 +649,11 @@ export default class MetamaskController extends EventEmitter {
networkControllerMessenger,
'NetworkController:stateChange',
),
securityAlertsEnabled:
this.preferencesController.store.getState().securityAlertsEnabled,
onPreferencesChange: this.preferencesController.store.subscribe.bind(
this.preferencesController.store,
),
});
///: END:ONLY_INCLUDE_IN
@ -1596,6 +1601,9 @@ export default class MetamaskController extends EventEmitter {
this.institutionalFeaturesController.store,
MmiConfigurationController: this.mmiConfigurationController.store,
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
PPOMController: this.ppomController,
///: END:ONLY_INCLUDE_IN
...resetOnRestartStore,
});
@ -2153,6 +2161,12 @@ export default class MetamaskController extends EventEmitter {
setOpenSeaEnabled: preferencesController.setOpenSeaEnabled.bind(
preferencesController,
),
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
setSecurityAlertsEnabled:
preferencesController.setSecurityAlertsEnabled.bind(
preferencesController,
),
///: END:ONLY_INCLUDE_IN
setIpfsGateway: preferencesController.setIpfsGateway.bind(
preferencesController,
),

90
ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
View File

@ -5,6 +5,96 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
<div
class="settings-page__body"
>
<h4
class="box mm-text mm-text--heading-sm box--margin-bottom-2 box--flex-direction-row box--color-text-alternative"
>
Security
</h4>
<div
class="settings-page__content-row settings-page__content-row-experimental"
>
<div
class="settings-page__content-item"
>
<span>
Security alerts
</span>
<div
class="settings-page__content-description"
>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Enable this to have your transactions and signature requests reviewed locally (no data shared with third parties) and warnings displayed when malicious activity is detected.
</p>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Always be sure to do your own due diligence before approving any requests. There's no guarantee all mailcious activity will be detected by this feature.
</p>
<p
class="box mm-text mm-text--body-sm box--margin-top-3 box--margin-bottom-1 box--flex-direction-row box--color-text-alternative"
>
Select providers:
</p>
<div
class="settings-page__content-item-col settings-page__content-item-col-open-sea"
>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
Blockaid
</p>
<label
class="toggle-button toggle-button--off"
tabindex="0"
>
<div
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
/>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
/>
</div>
<div
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
>
<div
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
/>
</div>
<input
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
type="checkbox"
value="false"
/>
</div>
<div
class="toggle-button__status"
>
<span
class="toggle-button__label-off"
/>
<span
class="toggle-button__label-on"
/>
</div>
</label>
</div>
<p
class="box mm-text mm-text--body-md box--margin-top-2 box--flex-direction-row box--color-text-muted"
>
More coming soon...
</p>
</div>
</div>
</div>
<h4
class="box box--margin-top-1 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-alternative"
>

93
ui/pages/settings/experimental-tab/experimental-tab.component.js
View File

@ -11,6 +11,9 @@ import { Text } from '../../../components/component-library/text/deprecated';
import {
FONT_WEIGHT,
TextColor,
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
TextVariant,
///: END:ONLY_INCLUDE_IN
TypographyVariant,
} from '../../../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(desktop)
@ -30,6 +33,10 @@ export default class ExperimentalTab extends PureComponent {
openSeaEnabled: PropTypes.bool,
transactionSecurityCheckEnabled: PropTypes.bool,
setTransactionSecurityCheckEnabled: PropTypes.func,
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
securityAlertsEnabled: PropTypes.bool,
setSecurityAlertsEnabled: PropTypes.func,
///: END:ONLY_INCLUDE_IN
};
settingsRefs = Array(
@ -53,6 +60,87 @@ export default class ExperimentalTab extends PureComponent {
handleSettingsRefs(t, t('experimental'), this.settingsRefs);
}
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
renderSecurityAlertsToggle() {
const { t } = this.context;
const { securityAlertsEnabled, setSecurityAlertsEnabled } = this.props;
return (
<>
<Text
variant={TextVariant.headingSm}
color={TextColor.textAlternative}
marginBottom={2}
>
{t('security')}
</Text>
<div
ref={this.settingsRefs[1]}
className="settings-page__content-row settings-page__content-row-experimental"
>
<div className="settings-page__content-item">
<span>{t('securityAlerts')}</span>
<div className="settings-page__content-description">
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
>
{t('securityAlertsDescription1')}
</Text>
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
>
{t('securityAlertsDescription2')}
</Text>
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
marginTop={3}
marginBottom={1}
>
{t('selectProvider')}
</Text>
<div className="settings-page__content-item-col settings-page__content-item-col-open-sea">
<Text
variant={TextVariant.bodyMd}
color={TextColor.textDefault}
marginBottom={0}
>
{t('blockaid')}
</Text>
<ToggleButton
value={securityAlertsEnabled}
onToggle={(value) => {
this.context.trackEvent({
category: MetaMetricsEventCategory.Settings,
event: 'Enabled/Disable security_alerts_enabled',
properties: {
action: 'Enabled/Disable security_alerts_enabled',
legacy_event: true,
},
});
setSecurityAlertsEnabled(!value || false);
}}
/>
</div>
<Text
variant={TextVariant.bodyMd}
color={TextColor.textMuted}
marginTop={2}
>
{t('moreComingSoon')}
</Text>
</div>
</div>
</div>
</>
);
}
///: END:ONLY_INCLUDE_IN
renderOpenSeaEnabledToggle() {
const { t } = this.context;
const {
@ -261,6 +349,11 @@ export default class ExperimentalTab extends PureComponent {
render() {
return (
<div className="settings-page__body">
{
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
this.renderSecurityAlertsToggle()
///: END:ONLY_INCLUDE_IN
}
{this.renderTransactionSecurityCheckToggle()}
{this.renderOpenSeaEnabledToggle()}
{

12
ui/pages/settings/experimental-tab/experimental-tab.container.js
View File

@ -5,11 +5,17 @@ import {
setUseNftDetection,
setOpenSeaEnabled,
setTransactionSecurityCheckEnabled,
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
setSecurityAlertsEnabled,
///: END:ONLY_INCLUDE_IN
} from '../../../store/actions';
import {
getUseNftDetection,
getOpenSeaEnabled,
getIsTransactionSecurityCheckEnabled,
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
getIsSecurityAlertsEnabled,
///: END:ONLY_INCLUDE_IN
} from '../../../selectors';
import ExperimentalTab from './experimental-tab.component';
@ -19,6 +25,9 @@ const mapStateToProps = (state) => {
openSeaEnabled: getOpenSeaEnabled(state),
transactionSecurityCheckEnabled:
getIsTransactionSecurityCheckEnabled(state),
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
securityAlertsEnabled: getIsSecurityAlertsEnabled(state),
///: END:ONLY_INCLUDE_IN
};
};
@ -28,6 +37,9 @@ const mapDispatchToProps = (dispatch) => {
setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
setTransactionSecurityCheckEnabled: (val) =>
dispatch(setTransactionSecurityCheckEnabled(val)),
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
setSecurityAlertsEnabled: (val) => setSecurityAlertsEnabled(val),
///: END:ONLY_INCLUDE_IN
};
};

12
ui/selectors/selectors.js
View File

@ -1433,6 +1433,18 @@ export function getIsTransactionSecurityCheckEnabled(state) {
return state.metamask.transactionSecurityCheckEnabled;
}
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
/**
* To get the `getIsSecurityAlertsEnabled` value which determines whether security check is enabled
*
* @param {*} state
* @returns Boolean
*/
export function getIsSecurityAlertsEnabled(state) {
return state.metamask.securityAlertsEnabled;
}
///: END:ONLY_INCLUDE_IN
export function getIsCustomNetwork(state) {
const chainId = getCurrentChainId(state);

10
ui/store/actions.ts
View File

@ -4344,6 +4344,16 @@ export function setTransactionSecurityCheckEnabled(
};
}
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
export function setSecurityAlertsEnabled(val: boolean): void {
try {
submitRequestToBackground('setSecurityAlertsEnabled', [val]);
} catch (error) {
logErrorWithMessage(error);
}
}
///: END:ONLY_INCLUDE_IN
export function setFirstTimeUsedNetwork(chainId: string) {
return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
}