add Blockaid announcement modal

@shared/api/internal.ts

@@ -1195,6 +1195,7 @@ export const saveSettings = async ({
     settingsState: SettingsState.IDLE,
     isSorobanPublicEnabled: false,
     isNonSSLEnabled: false,
+    isBlockaidAnnounced: false,
     error: "",
   };
 
@@ -1499,3 +1500,24 @@ export const simulateTokenTransfer = async (args: {
     response,
   };
 };
+
+export const saveIsBlockaidAnnounced = async ({
+  isBlockaidAnnounced,
+}: {
+  isBlockaidAnnounced: boolean;
+}) => {
+  let response = {
+    error: "",
+    isBlockaidAnnounced: false,
+  };
+
+  response = await sendMessageToBackground({
+    type: SERVICE_TYPES.SAVE_IS_BLOCKAID_ANNOUNCED,
+    isBlockaidAnnounced,
+  });
+
+  return {
+    isBlockaidAnnounced: response.isBlockaidAnnounced,
+    error: response.error,
+  };
+};

@shared/api/types.ts

@@ -90,6 +90,7 @@ export interface Response {
   isMergeSelected: boolean;
   recommendedFee: string;
   isNonSSLEnabled: boolean;
+  isBlockaidAnnounced: boolean;
 }
 
 export interface BlockedDomains {
@@ -148,6 +149,7 @@ export interface Preferences {
   isValidatingSafeAssetsEnabled: boolean;
   networksList: NetworkDetails[];
   isNonSSLEnabled: boolean;
+  isBlockaidAnnounced: boolean;
   error: string;
 }
 

@shared/constants/services.ts

@@ -48,6 +48,7 @@ export enum SERVICE_TYPES {
   MIGRATE_ACCOUNTS = "MIGRATE_ACCOUNTS",
   ADD_ASSETS_LIST = "ADD_ASSETS_LIST",
   MODIFY_ASSETS_LIST = "MODIFY_ASSETS_LIST",
+  SAVE_IS_BLOCKAID_ANNOUNCED = "SAVE_IS_BLOCKAID_ANNOUNCED",
 }
 
 export enum EXTERNAL_SERVICE_TYPES {

docs/docs/playground/components/SignMessageDemo.tsx

@@ -30,7 +30,6 @@ export const SignMessageDemo = () => {
     if (signedMessageObj.error) {
       setResult(JSON.stringify(signedMessageObj.error));
     } else {
-      console.log(signedMessageObj);
       setResult(JSON.stringify(signedMessageObj.signedMessage));
       setSignerAddressResult(signedMessageObj.signerAddress);
     }

extension/e2e-tests/helpers/login.ts

@@ -22,6 +22,7 @@ export const loginAndFund = async ({ page, extensionId }) => {
   });
 
   await page.goto(`chrome-extension://${extensionId}/index.html#/account`);
+  await page.getByTestId("BlockaidAnnouncement__accept").click();
   await expect(page.getByTestId("network-selector-open")).toBeVisible({
     timeout: 10000,
   });
@@ -75,6 +76,7 @@ export const loginToTestAccount = async ({ page, extensionId }) => {
   });
 
   await page.goto(`chrome-extension://${extensionId}/index.html#/account`);
+  await page.getByTestId("BlockaidAnnouncement__accept").click();
   await expect(page.getByTestId("network-selector-open")).toBeVisible({
     timeout: 50000,
   });

extension/src/background/helpers/account.ts

@@ -13,6 +13,7 @@ import {
   ASSETS_LISTS_ID,
   IS_HASH_SIGNING_ENABLED_ID,
   IS_NON_SSL_ENABLED_ID,
+  IS_BLOCKAID_ANNOUNCED_ID,
 } from "constants/localStorageTypes";
 import { DEFAULT_NETWORKS, NetworkDetails } from "@shared/constants/stellar";
 import { DEFAULT_ASSETS_LISTS } from "@shared/constants/soroban/token";
@@ -161,6 +162,16 @@ export const getIsNonSSLEnabled = async () => {
   return isNonSSLEnabled;
 };
 
+export const getIsBlockaidAnnounced = async () => {
+  if (!(await localStore.getItem(IS_BLOCKAID_ANNOUNCED_ID))) {
+    await localStore.setItem(IS_BLOCKAID_ANNOUNCED_ID, false);
+  }
+  const isBlockaidAnnounced =
+    (await localStore.getItem(IS_BLOCKAID_ANNOUNCED_ID)) ?? false;
+
+  return isBlockaidAnnounced;
+};
+
 export const getIsRpcHealthy = async (networkDetails: NetworkDetails) => {
   let rpcHealth = { status: "" };
   if (isCustomNetwork(networkDetails)) {

extension/src/background/helpers/dataStorage.ts

@@ -10,6 +10,7 @@ import {
   ASSETS_LISTS_ID,
   IS_HASH_SIGNING_ENABLED_ID,
   IS_NON_SSL_ENABLED_ID,
+  IS_BLOCKAID_ANNOUNCED_ID,
 } from "constants/localStorageTypes";
 import {
   DEFAULT_NETWORKS,
@@ -251,6 +252,16 @@ export const addIsNonSSLEnabled = async () => {
   }
 };
 
+export const addIsBlockaidAnnounced = async () => {
+  const localStore = dataStorageAccess(browserLocalStorage);
+  const storageVersion = (await localStore.getItem(STORAGE_VERSION)) as string;
+
+  if (!storageVersion || semver.lt(storageVersion, "4.3.0")) {
+    await localStore.setItem(IS_BLOCKAID_ANNOUNCED_ID, false);
+    await migrateDataStorageVersion("4.3.0");
+  }
+};
+
 export const versionedMigration = async () => {
   // sequentially call migrations in order to enforce smooth schema upgrades
 

extension/src/background/messageListener/popupMessageListener.ts

@@ -55,6 +55,7 @@ import {
   TOKEN_ID_LIST,
   IS_HASH_SIGNING_ENABLED_ID,
   IS_NON_SSL_ENABLED_ID,
+  IS_BLOCKAID_ANNOUNCED_ID,
 } from "constants/localStorageTypes";
 import {
   FUTURENET_NETWORK_DETAILS,
@@ -83,6 +84,7 @@ import {
   getNetworksList,
   getAssetsLists,
   getIsNonSSLEnabled,
+  getIsBlockaidAnnounced,
   HW_PREFIX,
   getBipPath,
   subscribeTokenBalance,
@@ -1303,6 +1305,7 @@ export const popupMessageListener = (request: Request, sessionStore: Store) => {
     const isHashSigningEnabled = await getIsHashSigningEnabled();
     const assetsLists = await getAssetsLists();
     const isNonSSLEnabled = await getIsNonSSLEnabled();
+    const isBlockaidAnnounced = await getIsBlockaidAnnounced();
 
     return {
       allowList: await getAllowList(),
@@ -1319,6 +1322,7 @@ export const popupMessageListener = (request: Request, sessionStore: Store) => {
       userNotification,
       assetsLists,
       isNonSSLEnabled,
+      isBlockaidAnnounced,
     };
   };
 
@@ -1774,6 +1778,14 @@ export const popupMessageListener = (request: Request, sessionStore: Store) => {
     return { assetsLists: await getAssetsLists() };
   };
 
+  const saveIsBlockaidAnnounced = async () => {
+    const { isBlockaidAnnounced } = request;
+
+    await localStore.setItem(IS_BLOCKAID_ANNOUNCED_ID, isBlockaidAnnounced);
+
+    return { isBlockaidAnnounced: await getIsBlockaidAnnounced() };
+  };
+
   const messageResponder: MessageResponder = {
     [SERVICE_TYPES.CREATE_ACCOUNT]: createAccount,
     [SERVICE_TYPES.FUND_ACCOUNT]: fundAccount,
@@ -1826,6 +1838,7 @@ export const popupMessageListener = (request: Request, sessionStore: Store) => {
     [SERVICE_TYPES.MIGRATE_ACCOUNTS]: migrateAccounts,
     [SERVICE_TYPES.ADD_ASSETS_LIST]: addAssetsList,
     [SERVICE_TYPES.MODIFY_ASSETS_LIST]: modifyAssetsList,
+    [SERVICE_TYPES.SAVE_IS_BLOCKAID_ANNOUNCED]: saveIsBlockaidAnnounced,
   };
 
   return messageResponder[request.type]();

extension/src/constants/localStorageTypes.ts

@@ -23,3 +23,4 @@ export const HAS_ACCOUNT_SUBSCRIPTION = "hasAccountSubscription";
 export const ASSETS_LISTS_ID = "assetsLists";
 export const IS_HASH_SIGNING_ENABLED_ID = "isHashSigningEnabled";
 export const IS_NON_SSL_ENABLED_ID = "isNonSSLEnabled";
+export const IS_BLOCKAID_ANNOUNCED_ID = "isBlockaidAnnounced";

extension/src/popup/components/WarningMessages/index.tsx

@@ -329,7 +329,6 @@ export const ScamAssetWarning = ({
   const { t } = useTranslation();
   const dispatch: AppDispatch = useDispatch();
   const warningRef = useRef<HTMLDivElement>(null);
-  const { isValidatingSafeAssetsEnabled } = useSelector(settingsSelector);
   const { recommendedFee } = useNetworkFees();
   const networkDetails = useSelector(settingsNetworkDetailsSelector);
   const publicKey = useSelector(publicKeySelector);
@@ -446,7 +445,7 @@ export const ScamAssetWarning = ({
               )}
             </div>
             <div className="ScamAssetWarning__btns">
-              {!isValidatingSafeAssetsEnabled && !isSendWarning && (
+              {!isSendWarning && (
                 <Button
                   data-testid="ScamAsset__add-asset"
                   size="md"
@@ -468,7 +467,7 @@ export const ScamAssetWarning = ({
                 type="button"
                 onClick={closeOverlay}
               >
-                {isValidatingSafeAssetsEnabled ? t("Got it") : t("Cancel")}
+                {t("Cancel")}
               </Button>
               {isSendWarning && (
                 <Button

extension/src/popup/components/account/BlockaidAnnouncement/index.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { Button, Icon, Paragraph } from "@stellar/design-system";
+
+import { AppDispatch } from "popup/App";
+
+import { LoadingBackground } from "popup/basics/LoadingBackground";
+import {
+  settingsSelector,
+  saveIsBlockaidAnnounced,
+} from "popup/ducks/settings";
+import { openTab } from "popup/helpers/navigate";
+
+import BlockaidLogo from "popup/assets/blockaid-logo.svg";
+
+import "./styles.scss";
+
+export const BlockaidAnnouncement = () => {
+  const { t } = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+  const { isBlockaidAnnounced } = useSelector(settingsSelector);
+
+  const handleLearnMore = () => {
+    openTab("https://blockaid.io");
+  };
+
+  const handleCloseModal = () => {
+    dispatch(saveIsBlockaidAnnounced({ isBlockaidAnnounced: true }));
+  };
+
+  return isBlockaidAnnounced ? null : (
+    <>
+      <LoadingBackground
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onClick={() => {}}
+        isActive
+      />
+      <div className="BlockaidAnnouncement">
+        <div className="BlockaidAnnouncement__modal">
+          <div className="BlockaidAnnouncement__modal__title">
+            <div>{t("Freighter is adding a new layer of protection")}</div>
+            <div className="BlockaidAnnouncement__modal__close">
+              <Icon.Close onClick={handleCloseModal} />
+            </div>
+          </div>
+          <div className="BlockaidAnnouncement__modal__image">
+            <img src={BlockaidLogo} alt="Blockaid Logo" />
+          </div>
+          <div className="BlockaidAnnouncement__modal__description">
+            <Paragraph size="sm">
+              {t("Freighter now uses Blockaid to keep your accounts safer.")}
+            </Paragraph>
+            <Paragraph size="sm">{t("By default it will verify:")}</Paragraph>
+          </div>
+          <div className="BlockaidAnnouncement__modal__list">
+            <ul>
+              <li>{t("The domains you interact with")}</li>
+              <li>{t("The assets you interact with")}</li>
+              <li>{t("The accounts you interact with")}</li>
+              <li>
+                {t(
+                  "The operations and functions executed in transactions and smart contracts",
+                )}
+              </li>
+            </ul>
+          </div>
+
+          <div className="BlockaidAnnouncement__modal__buttons">
+            <Button
+              size="md"
+              isFullWidth
+              variant="secondary"
+              type="button"
+              onClick={handleLearnMore}
+              icon={<Icon.ExternalLink />}
+              iconPosition="right"
+            >
+              {t("Learn more")}
+            </Button>
+            <Button
+              data-testid="BlockaidAnnouncement__accept"
+              size="md"
+              variant="primary"
+              isFullWidth
+              type="button"
+              onClick={handleCloseModal}
+            >
+              {t("Got it")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

extension/src/popup/components/account/BlockaidAnnouncement/styles.scss

@@ -0,0 +1,50 @@
+.BlockaidAnnouncement {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__modal {
+    background: var(--color-gray-10);
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-gray-40);
+    padding: 1rem;
+    width: 312px;
+    z-index: 2;
+
+    &__title {
+      display: flex;
+      line-height: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    &__close {
+      cursor: pointer;
+    }
+
+    &__image {
+      margin-bottom: 0.5rem;
+    }
+
+    &__description {
+      color: var(--color-gray-70);
+    }
+
+    &__list {
+      color: var(--color-gray-70);
+
+      ul {
+        font-size: 0.875rem !important;
+        margin-left: 1rem !important;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      column-gap: 1rem;
+      margin-top: 1rem;
+    }
+  }
+}