Dismissable App Promo Banner

@shared/api/internal.ts

@@ -1869,6 +1869,30 @@ export const getTokenIds = async ({
   return tokenIdList;
 };
 
+export const getMobileAppBannerDismissed = async (): Promise<boolean> => {
+  const { isDismissed, error } = await sendMessageToBackground({
+    activePublicKey: null,
+    type: SERVICE_TYPES.GET_MOBILE_APP_BANNER_DISMISSED,
+  });
+
+  if (error) {
+    return false;
+  }
+
+  return !!isDismissed;
+};
+
+export const dismissMobileAppBanner = async (): Promise<void> => {
+  const { error } = await sendMessageToBackground({
+    activePublicKey: null,
+    type: SERVICE_TYPES.DISMISS_MOBILE_APP_BANNER,
+  });
+
+  if (error) {
+    throw new Error(error);
+  }
+};
+
 export const removeTokenId = async ({
   activePublicKey,
   contractId,

@shared/api/types/message-request.ts

@@ -352,6 +352,14 @@ export interface GetHiddenAssetsMessage extends BaseMessage {
   type: SERVICE_TYPES.GET_HIDDEN_ASSETS;
 }
 
+export interface GetMobileAppBannerDismissedMessage extends BaseMessage {
+  type: SERVICE_TYPES.GET_MOBILE_APP_BANNER_DISMISSED;
+}
+
+export interface DismissMobileAppBannerMessage extends BaseMessage {
+  type: SERVICE_TYPES.DISMISS_MOBILE_APP_BANNER;
+}
+
 export type ServiceMessageRequest =
   | FundAccountMessage
   | CreateAccountMessage
@@ -407,4 +415,6 @@ export type ServiceMessageRequest =
   | ModifyAssetsListMessage
   | GetIsAccountMismatchMessage
   | ChangeAssetVisibilityMessage
-  | GetHiddenAssetsMessage;
+  | GetHiddenAssetsMessage
+  | GetMobileAppBannerDismissedMessage
+  | DismissMobileAppBannerMessage;

@shared/api/types/types.ts

@@ -117,6 +117,7 @@ export interface Response {
   };
   hiddenAssets: Record<IssuerKey, AssetVisibility>;
   isOverwritingAccount: boolean;
+  isDismissed: boolean;
 }
 
 export interface MemoRequiredAccount {

@shared/constants/services.ts

@@ -54,6 +54,8 @@ export enum SERVICE_TYPES {
   CHANGE_ASSET_VISIBILITY = "CHANGE_ASSET_VISIBILITY",
   GET_HIDDEN_ASSETS = "GET_HIDDEN_ASSETS",
   GET_IS_ACCOUNT_MISMATCH = "GET_IS_ACCOUNT_MISMATCH",
+  GET_MOBILE_APP_BANNER_DISMISSED = "GET_MOBILE_APP_BANNER_DISMISSED",
+  DISMISS_MOBILE_APP_BANNER = "DISMISS_MOBILE_APP_BANNER",
 }
 
 export enum EXTERNAL_SERVICE_TYPES {

extension/src/background/messageListener/handlers/dismissMobileAppBanner.ts

@@ -0,0 +1,11 @@
+import { DataStorageAccess } from "background/helpers/dataStorageAccess";
+
+const STORAGE_KEY = "mobileAppBannerDismissed";
+
+export const dismissMobileAppBanner = async ({
+  localStore,
+}: {
+  localStore: DataStorageAccess;
+}): Promise<void> => {
+  await localStore.setItem(STORAGE_KEY, true);
+};

extension/src/background/messageListener/handlers/getMobileAppBannerDismissed.ts

@@ -0,0 +1,12 @@
+import { DataStorageAccess } from "background/helpers/dataStorageAccess";
+
+const STORAGE_KEY = "mobileAppBannerDismissed";
+
+export const getMobileAppBannerDismissed = async ({
+  localStore,
+}: {
+  localStore: DataStorageAccess;
+}): Promise<{ isDismissed: boolean }> => {
+  const dismissed = await localStore.getItem(STORAGE_KEY);
+  return { isDismissed: !!dismissed };
+};

extension/src/background/messageListener/popupMessageListener.ts

@@ -73,6 +73,8 @@ import { modifyAssetsList } from "./handlers/modifyAssetsList";
 import { getIsAccountMismatch } from "./handlers/getIsAccountMismatch";
 import { changeAssetVisibility } from "./handlers/changeAssetVisibility";
 import { getHiddenAssets } from "./handlers/getHiddenAssets";
+import { getMobileAppBannerDismissed } from "./handlers/getMobileAppBannerDismissed";
+import { dismissMobileAppBanner } from "./handlers/dismissMobileAppBanner";
 import { loadBackendSettings } from "./handlers/loadBackendSettings";
 
 const numOfPublicKeysToCheck = 5;
@@ -470,6 +472,16 @@ export const popupMessageListener = (
         localStore,
       });
     }
+    case SERVICE_TYPES.GET_MOBILE_APP_BANNER_DISMISSED: {
+      return getMobileAppBannerDismissed({
+        localStore,
+      });
+    }
+    case SERVICE_TYPES.DISMISS_MOBILE_APP_BANNER: {
+      return dismissMobileAppBanner({
+        localStore,
+      });
+    }
     default:
       return { error: "Message type not supported" };
   }

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

@@ -24,6 +24,7 @@ import { signOut } from "popup/ducks/accountServices";
 import { AccountHeaderModal } from "popup/components/account/AccountHeaderModal";
 import { NetworkIcon } from "popup/components/manageNetwork/NetworkIcon";
 import { NetworkDetails } from "@shared/constants/stellar";
+import { MobileAppBanner } from "popup/components/account/MobileAppBanner";
 
 import "./styles.scss";
 
@@ -380,7 +381,7 @@ export const AccountHeader = ({
                   </div>
                 </NavLink>
               </div>
-
+              <MobileAppBanner />
               {isBackgroundActive
                 ? createPortal(
                     <LoadingBackground

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

@@ -252,6 +252,7 @@
     display: flex;
     margin-top: pxToRem(8px);
     gap: pxToRem(12px);
+    justify-content: center;
 
     &__column {
       align-items: center;

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

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import { Icon, Text } from "@stellar/design-system";
+import { useTranslation } from "react-i18next";
+import browser from "webextension-polyfill";
+
+import {
+  getMobileAppBannerDismissed,
+  dismissMobileAppBanner,
+} from "@shared/api/internal";
+
+import { openTab } from "popup/helpers/navigate";
+import FreighterLogo from "popup/assets/logo-freighter-shadow.png";
+
+import "./styles.scss";
+
+// Check if browser storage is available (extension context, not fullscreen)
+const isStorageAvailable = (): boolean => {
+  return !!browser?.storage?.local;
+};
+
+export const MobileAppBanner = () => {
+  const { t } = useTranslation();
+  const [isDismissed, setIsDismissed] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const checkDismissedStatus = async () => {
+      try {
+        const dismissed = await getMobileAppBannerDismissed();
+        setIsDismissed(dismissed);
+      } catch (error) {
+        console.error("Error checking banner dismissal status:", error);
+        setIsDismissed(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (isStorageAvailable()) {
+      checkDismissedStatus();
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleDismiss = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await dismissMobileAppBanner();
+      setIsDismissed(true);
+    } catch (error) {
+      console.error("Error dismissing banner:", error);
+    }
+  };
+
+  const handleBannerClick = () => {
+    openTab("https://www.freighter.app/#download");
+  };
+
+  // Don't show banner if storage is not available (e.g., fullscreen mode) or if dismissed
+  if (!isStorageAvailable() || isLoading || isDismissed) {
+    return null;
+  }
+
+  return (
+    <div
+      className="MobileAppBanner"
+      data-testid="mobile-app-banner"
+      onClick={handleBannerClick}
+    >
+      <div className="MobileAppBanner__content">
+        <div className="MobileAppBanner__text">
+          <Text
+            as="div"
+            size="sm"
+            weight="medium"
+            className="MobileAppBanner__title"
+          >
+            {t("Introducing Freighter Mobile")}
+          </Text>
+          <Text
+            as="div"
+            size="xs"
+            weight="medium"
+            className="MobileAppBanner__subtitle"
+          >
+            {t("Download on iOS or Android today")}
+          </Text>
+        </div>
+        <div className="MobileAppBanner__logo">
+          <img src={FreighterLogo} alt="Freighter logo" />
+        </div>
+      </div>
+      <button
+        type="button"
+        className="MobileAppBanner__dismiss"
+        onClick={handleDismiss}
+        aria-label="Dismiss banner"
+        data-testid="mobile-app-banner-dismiss"
+      >
+        <Icon.X />
+      </button>
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+@use "../../../styles/utils.scss" as *;
+
+.MobileAppBanner {
+  position: relative;
+  background: var(--sds-clr-lilac-03);
+  border-radius: pxToRem(12px);
+  padding: pxToRem(16px);
+  margin: pxToRem(12px) 0 pxToRem(0) pxToRem(-16px);
+  width: calc(100% + pxToRem(32px));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: pxToRem(12px);
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: pxToRem(16px);
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(8px);
+    flex: 1;
+  }
+
+  &__title {
+    color: var(--sds-clr-base-01);
+    margin: 0;
+    font-size: pxToRem(14px);
+  }
+
+  &__subtitle {
+    color: var(--sds-clr-gray-11);
+    margin: 0;
+    font-size: pxToRem(12px);
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    img {
+      width: pxToRem(40px);
+      height: pxToRem(40px);
+      object-fit: contain;
+    }
+  }
+
+  &__dismiss {
+    position: absolute;
+    top: pxToRem(4px);
+    right: pxToRem(4px);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: pxToRem(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sds-clr-base-01);
+    border-radius: pxToRem(16px);
+    z-index: 10;
+    pointer-events: auto;
+
+    &:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    svg {
+      width: pxToRem(16px);
+      height: pxToRem(16px);
+    }
+  }
+}

extension/src/popup/locales/en/translation.json

@@ -121,6 +121,7 @@
   "Discover": "Discover",
   "Do this later": "Do this later",
   "Done": "Done",
+  "Download on iOS or Android today": "Download on iOS or Android today",
   "Enable Blind Signing on Ledger": "Enable Blind Signing on Ledger",
   "Enabled": "Enabled",
   "Enter a Stellar Asset List compatible URL": "Enter a Stellar Asset List compatible URL",
@@ -206,6 +207,7 @@
   "Insufficient Balance": "Insufficient Balance",
   "Insufficient Fee": "Insufficient Fee",
   "INSUFFICIENT FUNDS FOR FEE": "INSUFFICIENT FUNDS FOR FEE",
+  "Introducing Freighter Mobile": "Introducing Freighter Mobile",
   "invalid destination address": "invalid destination address",
   "Invalid mnemonic phrase": "Invalid mnemonic phrase",
   "INVALID STELLAR ADDRESS": "INVALID STELLAR ADDRESS",

extension/src/popup/locales/pt/translation.json

@@ -121,6 +121,7 @@
   "Discover": "Discover",
   "Do this later": "Do this later",
   "Done": "Done",
+  "Download on iOS or Android today": "Baixe no iOS ou Android hoje",
   "Enable Blind Signing on Ledger": "Enable Blind Signing on Ledger",
   "Enabled": "Enabled",
   "Enter a Stellar Asset List compatible URL": "Enter a Stellar Asset List compatible URL",
@@ -206,6 +207,7 @@
   "Insufficient Balance": "Insufficient Balance",
   "Insufficient Fee": "Insufficient Fee",
   "INSUFFICIENT FUNDS FOR FEE": "INSUFFICIENT FUNDS FOR FEE",
+  "Introducing Freighter Mobile": "Apresentando o Freighter Mobile",
   "invalid destination address": "invalid destination address",
   "Invalid mnemonic phrase": "Invalid mnemonic phrase",
   "INVALID STELLAR ADDRESS": "INVALID STELLAR ADDRESS",