feat: Adds opensea to blockaid migration BannerAlert

app/scripts/controllers/preferences.js

@@ -53,6 +53,7 @@ export default class PreferencesController {
         eth_sign: false,
       },
       useMultiAccountBalanceChecker: true,
+      hasDismissedOpenSeaToBlockaidBanner: false,
       useSafeChainsListValidation: true,
       // set to true means the dynamic list from the API is being used
       // set to false will be using the static list from contract-metadata
@@ -192,6 +193,14 @@ export default class PreferencesController {
     this.store.updateState({ useMultiAccountBalanceChecker: val });
   }
 
+  /**
+   * Setter for the `dismissOpenSeaToBlockaidBanner` property
+   *
+   */
+  dismissOpenSeaToBlockaidBanner() {
+    this.store.updateState({ hasDismissedOpenSeaToBlockaidBanner: true });
+  }
+
   /**
    * Setter for the `useSafeChainsListValidation` property
    *

app/scripts/controllers/preferences.test.js

@@ -199,6 +199,23 @@ describe('preferences controller', () => {
     });
   });
 
+  describe('dismissOpenSeaToBlockaidBanner', () => {
+    it('hasDismissedOpenSeaToBlockaidBanner should default to false', () => {
+      expect(
+        preferencesController.store.getState()
+          .hasDismissedOpenSeaToBlockaidBanner,
+      ).toStrictEqual(false);
+    });
+
+    it('should set the hasDismissedOpenSeaToBlockaidBanner property in state', () => {
+      preferencesController.dismissOpenSeaToBlockaidBanner();
+      expect(
+        preferencesController.store.getState()
+          .hasDismissedOpenSeaToBlockaidBanner,
+      ).toStrictEqual(true);
+    });
+  });
+
   describe('setUseSafeChainsListValidation', function () {
     it('should default to true', function () {
       const state = preferencesController.store.getState();

app/scripts/lib/setupSentry.js

@@ -237,6 +237,7 @@ export const SENTRY_BACKGROUND_STATE = {
     useTokenDetection: true,
     useRequestQueue: true,
     useTransactionSimulations: true,
+    hasDismissedOpenSeaToBlockaidBanner: true,
   },
   SelectedNetworkController: { domains: false },
   SignatureController: {

app/scripts/metamask-controller.js

@@ -2879,6 +2879,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController.setUseMultiAccountBalanceChecker.bind(
           preferencesController,
         ),
+      dismissOpenSeaToBlockaidBanner:
+        preferencesController.dismissOpenSeaToBlockaidBanner.bind(
+          preferencesController,
+        ),
       setUseSafeChainsListValidation:
         preferencesController.setUseSafeChainsListValidation.bind(
           preferencesController,

app/scripts/migrations/114.test.ts

@@ -21,7 +21,7 @@ describe('migration #114', () => {
   });
 
   describe('deprecates transactionSecurityCheckEnabled in PreferencesController', () => {
-    it('sets securityAlertsEnabled to true if transactionSecurityCheckEnabled is true', async () => {
+    it('sets securityAlertsEnabled and hasMigratedFromOpenSeaToBlockaid to true if transactionSecurityCheckEnabled is true', async () => {
       const oldStorage = {
         PreferencesController: {
           transactionSecurityCheckEnabled: true,
@@ -32,6 +32,7 @@ describe('migration #114', () => {
       const expectedState = {
         PreferencesController: {
           securityAlertsEnabled: true,
+          hasMigratedFromOpenSeaToBlockaid: true,
         },
       };
 

app/scripts/migrations/114.ts

@@ -43,6 +43,7 @@ function transformState(state: Record<string, any>) {
   ) {
     if (state.PreferencesController.transactionSecurityCheckEnabled) {
       state.PreferencesController.securityAlertsEnabled = true;
+      state.PreferencesController.hasMigratedFromOpenSeaToBlockaid = true;
     }
 
     delete state.PreferencesController.transactionSecurityCheckEnabled;

test/e2e/tests/ppom/migrate-opensea-to-blockaid-banner.spec.js

@@ -0,0 +1,135 @@
+const { connectAccountToTestDapp } = require('../../accounts/common');
+const FixtureBuilder = require('../../fixture-builder');
+const {
+  defaultGanacheOptions,
+  unlockWallet,
+  withFixtures,
+  openDapp,
+  WINDOW_TITLES,
+} = require('../../helpers');
+
+describe('Migrate Opensea to Blockaid Banner @no-mmi', function () {
+  it('Shows up on simple send transaction', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPreferencesController({ hasMigratedFromOpenSeaToBlockaid: true })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await connectAccountToTestDapp(driver);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+        await driver.clickElement('#sendButton');
+        await driver.delay(2000);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.waitForSelector({ text: 'Heads up!', tag: 'p' });
+      },
+    );
+  });
+
+  it('Shows up on token approval', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPreferencesController({ hasMigratedFromOpenSeaToBlockaid: true })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await connectAccountToTestDapp(driver);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+        await driver.findClickableElement('#createToken');
+        await driver.clickElement('#createToken');
+        await driver.delay(2000);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.findClickableElements({
+          text: 'Confirm',
+          tag: 'button',
+        });
+        await driver.clickElement({
+          text: 'Confirm',
+          tag: 'button',
+        });
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+        await driver.clickElement({ text: 'Approve Tokens', tag: 'button' });
+        await driver.delay(2000);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.waitForSelector({ text: 'Heads up!', tag: 'p' });
+      },
+    );
+  });
+
+  it('Shows up on personal signature', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPreferencesController({ hasMigratedFromOpenSeaToBlockaid: true })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await connectAccountToTestDapp(driver);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+        await driver.clickElement('#personalSign');
+        await driver.delay(2000);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.waitForSelector({ text: 'Heads up!', tag: 'p' });
+      },
+    );
+  });
+
+  it('Shows up on contract interaction', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPreferencesController({ hasMigratedFromOpenSeaToBlockaid: true })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+        await openDapp(driver);
+
+        await connectAccountToTestDapp(driver);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+        await driver.clickElement('#deployMultisigButton');
+        await driver.delay(2000);
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.waitForSelector({ text: 'Heads up!', tag: 'p' });
+      },
+    );
+  });
+});

test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -155,6 +155,7 @@
     "addSnapAccountEnabled": "boolean",
     "advancedGasFee": {},
     "featureFlags": {},
+    "hasDismissedOpenSeaToBlockaidBanner": false,
     "incomingTransactionsPreferences": {},
     "knownMethodData": "object",
     "currentLocale": "en",

test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -74,6 +74,7 @@
     "showAccountBanner": true,
     "trezorModel": null,
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,
+    "hasDismissedOpenSeaToBlockaidBanner": false,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",
     "qrHardware": {},

ui/pages/confirmations/components/signature-request-original/signature-request-original.component.js

@@ -26,6 +26,7 @@ import {
   TextAlign,
   TextColor,
   Size,
+  Severity,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   IconColor,
   Display,
@@ -36,6 +37,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import {
   ButtonLink,
+  BannerAlert,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   Box,
   Icon,
@@ -85,6 +87,10 @@ export default class SignatureRequestOriginal extends Component {
     mostRecentOverviewPage: PropTypes.string.isRequired,
     resolvePendingApproval: PropTypes.func.isRequired,
     completedTx: PropTypes.func.isRequired,
+    hasMigratedFromOpenSeaToBlockaid: PropTypes.bool.isRequired,
+    isNetworkSupportedByBlockaid: PropTypes.bool.isRequired,
+    hasDismissedOpenSeaToBlockaidBanner: PropTypes.bool.isRequired,
+    dismissOpenSeaToBlockaidBanner: PropTypes.func.isRequired,
     ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
     // Used to show a warning if the signing account is not the selected account
     // Largely relevant for contract wallet custodians
@@ -129,6 +135,8 @@ export default class SignatureRequestOriginal extends Component {
   };
 
   renderBody = () => {
+    const { t } = this.context;
+
     let rows;
     const notice = `${this.context.t('youSign')}:`;
 
@@ -150,6 +158,20 @@ export default class SignatureRequestOriginal extends Component {
       ? subjectMetadata?.[txData.msgParams.origin]
       : null;
 
+    const {
+      hasMigratedFromOpenSeaToBlockaid,
+      isNetworkSupportedByBlockaid,
+      hasDismissedOpenSeaToBlockaidBanner,
+      dismissOpenSeaToBlockaidBanner,
+    } = this.props;
+    const showOpenSeaToBlockaidBannerAlert =
+      hasMigratedFromOpenSeaToBlockaid &&
+      !isNetworkSupportedByBlockaid &&
+      !hasDismissedOpenSeaToBlockaidBanner;
+    const handleCloseOpenSeaToBlockaidBannerAlert = () => {
+      dismissOpenSeaToBlockaidBanner();
+    };
+
     return (
       <div className="request-signature__body">
         {
@@ -162,6 +184,23 @@ export default class SignatureRequestOriginal extends Component {
             securityProviderResponse={txData.securityProviderResponse}
           />
         )}
+        {showOpenSeaToBlockaidBannerAlert ? (
+          <BannerAlert
+            severity={Severity.Info}
+            title={t('openSeaToBlockaidTitle')}
+            description={t('openSeaToBlockaidDescription')}
+            actionButtonLabel={t('openSeaToBlockaidBtnLabel')}
+            actionButtonProps={{
+              href: 'https://snaps.metamask.io/transaction-insights',
+              externalLink: true,
+            }}
+            marginBottom={4}
+            marginLeft={4}
+            marginTop={4}
+            marginRight={4}
+            onClose={handleCloseOpenSeaToBlockaidBannerAlert}
+          />
+        ) : null}
         {
           ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
           this.props.selectedAccount.address ===

ui/pages/confirmations/components/signature-request-original/signature-request-original.container.js

@@ -8,6 +8,7 @@ import {
   rejectPendingApproval,
   rejectAllMessages,
   completedTx,
+  dismissOpenSeaToBlockaidBanner,
 } from '../../../../store/actions';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 // eslint-disable-next-line import/order
@@ -22,6 +23,9 @@ import {
   doesAddressRequireLedgerHidConnection,
   unconfirmedMessagesHashSelector,
   getTotalUnapprovedMessagesCount,
+  getIsNetworkSupportedByBlockaid,
+  getHasDismissedOpenSeaToBlockaidBanner,
+  getHasMigratedFromOpenSeaToBlockaid,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   getAccountType,
   getSelectedInternalAccount,
@@ -44,6 +48,12 @@ function mapStateToProps(state, ownProps) {
   const messagesList = unconfirmedMessagesHashSelector(state);
   const messagesCount = getTotalUnapprovedMessagesCount(state);
 
+  const hasMigratedFromOpenSeaToBlockaid =
+    getHasMigratedFromOpenSeaToBlockaid(state);
+  const hasDismissedOpenSeaToBlockaidBanner =
+    getHasDismissedOpenSeaToBlockaidBanner(state);
+  const isNetworkSupportedByBlockaid = getIsNetworkSupportedByBlockaid(state);
+
   return {
     requester: null,
     requesterAddress: null,
@@ -55,6 +65,9 @@ function mapStateToProps(state, ownProps) {
     subjectMetadata: getSubjectMetadata(state),
     messagesList,
     messagesCount,
+    hasMigratedFromOpenSeaToBlockaid,
+    hasDismissedOpenSeaToBlockaidBanner,
+    isNetworkSupportedByBlockaid,
     ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
     accountType: getAccountType(state),
     selectedAccount: getSelectedInternalAccount(state),
@@ -90,6 +103,8 @@ mapDispatchToProps = function (dispatch) {
     cancelAllApprovals: (messagesList) => {
       dispatch(rejectAllMessages(messagesList));
     },
+    dismissOpenSeaToBlockaidBanner: () =>
+      dispatch(dismissOpenSeaToBlockaidBanner()),
   };
 };