What's new - OpenSea security provider (#16831)

app/_locales/en/messages.json

@@ -329,6 +329,9 @@
     "message": "Allow $1 to withdraw and spend up to the following amount:",
     "description": "The url of the site that requested permission to 'withdraw and spend'"
   },
+  "alwaysBeSureTo": {
+    "message": "Always be sure to do your own due diligence before approving any requests."
+  },
   "amount": {
     "message": "Amount"
   },
@@ -1266,6 +1269,9 @@
   "enableOpenSeaAPIDescription": {
     "message": "Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off."
   },
+  "enableOpenSeaSecurityProvider": {
+    "message": "Enable security provider"
+  },
   "enableSmartTransactions": {
     "message": "Enable smart transactions"
   },
@@ -1567,6 +1573,9 @@
     "message": "Get Ether from a faucet for the $1 network.",
     "description": "Displays network name for Ether faucet"
   },
+  "getWarningsFromOpenSea": {
+    "message": "Get warnings from OpenSea whenever you receive a known malicious request."
+  },
   "goBack": {
     "message": "Go back"
   },
@@ -2327,6 +2336,9 @@
   "notEnoughGas": {
     "message": "Not enough gas"
   },
+  "notNow": {
+    "message": "Not now"
+  },
   "notifications": {
     "message": "Notifications"
   },
@@ -2660,6 +2672,12 @@
   "openSea": {
     "message": "OpenSea (Beta)"
   },
+  "openSeaAltText": {
+    "message": "OpenSea security provider"
+  },
+  "openSeaDescription": {
+    "message": "OpenSea is the first security provider for this feature. More providers coming soon!"
+  },
   "openSeaNew": {
     "message": "OpenSea"
   },
@@ -3561,6 +3579,9 @@
   "statusNotConnected": {
     "message": "Not connected"
   },
+  "staySafeWithOpenSea": {
+    "message": "Stay safe with OpenSea"
+  },
   "step1LatticeWallet": {
     "message": "Connect your Lattice1"
   },

app/scripts/controllers/preferences.js

@@ -70,6 +70,7 @@ export default class PreferencesController {
         : LedgerTransportTypes.u2f,
       transactionSecurityCheckEnabled: false,
       theme: ThemeType.os,
+      openSeaTransactionSecurityProviderPopoverHasBeenShown: false,
       ...opts.initState,
     };
 
@@ -206,6 +207,16 @@ export default class PreferencesController {
     });
   }
 
+  /**
+   * Setter for the `openSeaTransactionSecurityProviderPopoverHasBeenShown` property
+   *
+   */
+  setOpenSeaTransactionSecurityProviderPopoverHasBeenShown() {
+    this.store.updateState({
+      openSeaTransactionSecurityProviderPopoverHasBeenShown: true,
+    });
+  }
+
   /**
    * Add new methodData to state, to avoid requesting this information again through Infura
    *

app/scripts/controllers/preferences.test.js

@@ -390,4 +390,28 @@ describe('preferences controller', function () {
       );
     });
   });
+
+  describe('setOpenSeaTransactionSecurityProviderPopoverHasBeenShown', function () {
+    it('should default to value "false"', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(
+        state.openSeaTransactionSecurityProviderPopoverHasBeenShown,
+        false,
+      );
+    });
+
+    it('should set the openSeaTransactionSecurityProviderPopoverHasBeenShown to true', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(
+        state.openSeaTransactionSecurityProviderPopoverHasBeenShown,
+        false,
+      );
+      preferencesController.setOpenSeaTransactionSecurityProviderPopoverHasBeenShown();
+      assert.equal(
+        preferencesController.store.getState()
+          .openSeaTransactionSecurityProviderPopoverHasBeenShown,
+        true,
+      );
+    });
+  });
 });

app/scripts/metamask-controller.js

@@ -1865,6 +1865,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController.setTransactionSecurityCheckEnabled.bind(
           preferencesController,
         ),
+      setOpenSeaTransactionSecurityProviderPopoverHasBeenShown:
+        preferencesController.setOpenSeaTransactionSecurityProviderPopoverHasBeenShown.bind(
+          preferencesController,
+        ),
       // AssetsContractController
       getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 

test/e2e/fixture-builder.js

@@ -234,6 +234,7 @@ function defaultFixture() {
         useTokenDetection: false,
         useCurrencyRateCheck: true,
         useMultiAccountBalanceChecker: true,
+        openSeaTransactionSecurityProviderPopoverHasBeenShown: true,
       },
       SmartTransactionsController: {
         smartTransactionsState: {
@@ -346,6 +347,7 @@ function onboardingFixture() {
         useTokenDetection: false,
         useCurrencyRateCheck: true,
         useMultiAccountBalanceChecker: true,
+        openSeaTransactionSecurityProviderPopoverHasBeenShown: true,
       },
       SmartTransactionsController: {
         smartTransactionsState: {

ui/components/app/open-sea-whats-new-popover/index.js

@@ -0,0 +1 @@
+export { default } from './open-sea-whats-new-popover';

ui/components/app/open-sea-whats-new-popover/index.scss

@@ -0,0 +1,6 @@
+.open-sea-whats-new-popover {
+  &__enable-security-provider-button {
+    width: fit-content;
+    font-weight: 400;
+  }
+}

ui/components/app/open-sea-whats-new-popover/open-sea-whats-new-popover.js

@@ -0,0 +1,124 @@
+import React, { useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { I18nContext } from '../../../contexts/i18n';
+import Popover from '../../ui/popover';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import Button from '../../ui/button';
+import Box from '../../ui/box';
+import {
+  setOpenSeaTransactionSecurityProviderPopoverHasBeenShown,
+  setTransactionSecurityCheckEnabled,
+} from '../../../store/actions';
+import { getHasTheOpenSeaTransactionSecurityProviderPopoverBeenShown } from '../../../selectors';
+import { Text } from '../../component-library';
+import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
+
+export default function OpenSeaWhatsNewPopover() {
+  const t = useContext(I18nContext);
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const hasThePopoverBeenShown = useSelector(
+    getHasTheOpenSeaTransactionSecurityProviderPopoverBeenShown,
+  );
+
+  return (
+    process.env.TRANSACTION_SECURITY_PROVIDER &&
+    !hasThePopoverBeenShown && (
+      <Popover
+        title={
+          <Text
+            variant={TextVariant.headingSm}
+            color={TextColor.textAlternative}
+            fontWeight={FONT_WEIGHT.BOLD}
+          >
+            {t('staySafeWithOpenSea')}
+          </Text>
+        }
+        footer={
+          <>
+            <Button
+              type="primary"
+              onClick={() => {
+                dispatch(setTransactionSecurityCheckEnabled(true));
+                dispatch(
+                  setOpenSeaTransactionSecurityProviderPopoverHasBeenShown(),
+                );
+                history.push(
+                  `${EXPERIMENTAL_ROUTE}#transaction-security-check`,
+                );
+              }}
+              className="open-sea-whats-new-popover__enable-security-provider-button"
+            >
+              {t('enableOpenSeaSecurityProvider')}
+            </Button>
+            <Box marginTop={2}>
+              <Text variant={TextVariant.bodySm}>
+                <Button
+                  type="link"
+                  onClick={() =>
+                    dispatch(
+                      setOpenSeaTransactionSecurityProviderPopoverHasBeenShown(),
+                    )
+                  }
+                >
+                  {t('notNow')}
+                </Button>
+              </Text>
+            </Box>
+          </>
+        }
+        footerClassName="smart-transactions-popover__footer"
+        className="smart-transactions-popover"
+        onClose={() =>
+          dispatch(setOpenSeaTransactionSecurityProviderPopoverHasBeenShown())
+        }
+      >
+        <Box
+          paddingRight={6}
+          paddingLeft={6}
+          paddingTop={0}
+          paddingBottom={0}
+          display={DISPLAY.FLEX}
+          className="smart-transactions-popover__content"
+        >
+          <Box
+            marginTop={1}
+            marginBottom={1}
+            display={DISPLAY.FLEX}
+            flexDirection={FLEX_DIRECTION.COLUMN}
+          >
+            <img
+              src="./images/open-sea-security-provider.svg"
+              alt={t('openSeaAltText')}
+            />
+          </Box>
+          <Text variant={TextVariant.bodySm}>
+            {t('getWarningsFromOpenSea')}
+          </Text>
+          <Text
+            variant={TextVariant.bodySm}
+            marginTop={4}
+            fontWeight={FONT_WEIGHT.BOLD}
+          >
+            {t('openSeaDescription')}
+          </Text>
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textAlternative}
+            marginTop={4}
+          >
+            {t('alwaysBeSureTo')}
+          </Text>
+        </Box>
+      </Popover>
+    )
+  );
+}

ui/pages/home/home.component.js

@@ -49,6 +49,7 @@ import {
   ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
 } from '../../helpers/constants/routes';
 import ZENDESK_URLS from '../../helpers/constants/zendesk-url';
+import OpenSeaWhatsNewPopover from '../../components/app/open-sea-whats-new-popover/open-sea-whats-new-popover';
 ///: BEGIN:ONLY_INCLUDE_IN(main)
 import { SUPPORT_LINK } from '../../../shared/lib/ui-utils';
 ///: END:ONLY_INCLUDE_IN
@@ -638,6 +639,7 @@ export default class Home extends PureComponent {
         />
         <div className="home__container">
           {showWhatsNew ? <WhatsNewPopup onClose={hideWhatsNewPopup} /> : null}
+          {showWhatsNew ? <OpenSeaWhatsNewPopover /> : null}
           {!showWhatsNew && showRecoveryPhraseReminder ? (
             <RecoveryPhraseReminder
               hasBackedUp={seedPhraseBackedUp}

ui/selectors/selectors.js

@@ -1422,3 +1422,9 @@ export function getIsDesktopEnabled(state) {
   return state.metamask.desktopEnabled;
 }
 ///: END:ONLY_INCLUDE_IN
+
+export function getHasTheOpenSeaTransactionSecurityProviderPopoverBeenShown(
+  state,
+) {
+  return state.metamask.openSeaTransactionSecurityProviderPopoverHasBeenShown;
+}

ui/store/actions.ts

@@ -4496,11 +4496,12 @@ export function hideBetaHeader() {
 export function setTransactionSecurityCheckEnabled(
   transactionSecurityCheckEnabled: boolean,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
-  return async () => {
+  return async (dispatch) => {
     try {
       await submitRequestToBackground('setTransactionSecurityCheckEnabled', [
         transactionSecurityCheckEnabled,
       ]);
+      await forceUpdateMetamaskState(dispatch);
     } catch (error) {
       logErrorWithMessage(error);
     }
@@ -4511,6 +4512,19 @@ export function setFirstTimeUsedNetwork(chainId: string) {
   return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
 }
 
+export function setOpenSeaTransactionSecurityProviderPopoverHasBeenShown(): ThunkAction<
+  void,
+  MetaMaskReduxState,
+  unknown,
+  AnyAction
+> {
+  return async () => {
+    await submitRequestToBackground(
+      'setOpenSeaTransactionSecurityProviderPopoverHasBeenShown',
+    );
+  };
+}
+
 // QR Hardware Wallets
 export async function submitQRHardwareCryptoHDKey(cbor: Hex) {
   await submitRequestToBackground('submitQRHardwareCryptoHDKey', [cbor]);