TW-1563 Implement theming for native ads that support it

package.json

@@ -232,6 +232,6 @@
     "follow-redirects": "^1.15.4"
   },
   "optionalDependencies": {
-    "@temple-wallet/extension-ads": "9.1.0"
+    "@temple-wallet/extension-ads": "10.0.0-dev.1563.1"
   }
 }

src/content-scripts/replace-ads/ads-stack.iframe.ts

@@ -1,11 +1,21 @@
 import { configureAds } from 'lib/ads/configure-ads';
 import { importExtensionAdsModule } from 'lib/ads/import-extension-ads-module';
-import { ADS_META_SEARCH_PARAM_NAME, AD_CATEGORIES_PARAM_NAME, ORIGIN_SEARCH_PARAM_NAME } from 'lib/constants';
+import {
+  ADS_META_SEARCH_PARAM_NAME,
+  AD_CATEGORIES_PARAM_NAME,
+  FONT_SIZE_SEARCH_PARAM_NAME,
+  LINE_HEIGHT_SEARCH_PARAM_NAME,
+  ORIGIN_SEARCH_PARAM_NAME,
+  THEME_COLOR_SEARCH_PARAM_NAME
+} from 'lib/constants';
 
 import { getRulesFromStorage } from './ads-rules';
 
 const usp = new URLSearchParams(window.location.search);
 const id = usp.get('id');
+const rawThemeColor = usp.get(THEME_COLOR_SEARCH_PARAM_NAME);
+const rawFontSize = usp.get(FONT_SIZE_SEARCH_PARAM_NAME);
+const rawLineHeight = usp.get(LINE_HEIGHT_SEARCH_PARAM_NAME);
 const origin = usp.get(ORIGIN_SEARCH_PARAM_NAME) ?? window.location.href;
 const adsMetadataIds = usp.getAll(ADS_META_SEARCH_PARAM_NAME).map(value => JSON.parse(value));
 const adCategories = usp.getAll(AD_CATEGORIES_PARAM_NAME);
@@ -16,13 +26,16 @@ configureAds()
   .then(({ renderAdsStack, rules }) => {
     const { blacklistedHypelabCampaignsSlugs, permanentAdPlacesRules, adPlacesRules } = rules;
 
-    renderAdsStack(
-      id ?? '',
-      adsMetadataIds,
+    renderAdsStack({
+      id: id ?? '',
+      initialAdsMetadata: adsMetadataIds,
       origin,
-      permanentAdPlacesRules.length > 0 || adPlacesRules.length > 0,
+      pageHasPlacesRules: permanentAdPlacesRules.length > 0 || adPlacesRules.length > 0,
       adCategories,
-      blacklistedHypelabCampaignsSlugs
-    );
+      hypelabBlacklistedCampaignsSlugs: blacklistedHypelabCampaignsSlugs,
+      themeColor: rawThemeColor ?? undefined,
+      fontSize: rawFontSize ? Number(rawFontSize) : undefined,
+      lineHeight: rawLineHeight ? Number(rawLineHeight) : undefined
+    });
   })
   .catch(error => console.error(error));

src/lib/ads/configure-ads.ts

@@ -5,14 +5,17 @@ import {
   ADS_META_SEARCH_PARAM_NAME,
   AD_CATEGORIES_PARAM_NAME,
   ContentScriptType,
-  ORIGIN_SEARCH_PARAM_NAME
+  FONT_SIZE_SEARCH_PARAM_NAME,
+  LINE_HEIGHT_SEARCH_PARAM_NAME,
+  ORIGIN_SEARCH_PARAM_NAME,
+  THEME_COLOR_SEARCH_PARAM_NAME
 } from 'lib/constants';
 import { APP_VERSION, EnvVars, IS_MISES_BROWSER } from 'lib/env';
 import { isTruthy } from 'lib/utils';
 
 import { importExtensionAdsModule } from './import-extension-ads-module';
 
-// Three interfaces below are copied from '@temple-wallet/extension-ads' to avoid importing it to ensure that a core
+// Four interfaces below are copied from '@temple-wallet/extension-ads' to avoid importing it to ensure that a core
 // build runs without errors.
 interface AdSource {
   shouldNotUseStrictContainerLimits?: boolean;
@@ -36,6 +39,16 @@ interface AdMetadata {
   dimensions: AdDimensions;
 }
 
+interface AdsStackIframeURLParams {
+  id: string;
+  adsMetadataIds: any[];
+  origin: string;
+  adCategories: string[];
+  themeColor?: string;
+  fontSize?: number;
+  lineHeight?: number;
+}
+
 const smallTkeyInpageAdUrl = browser.runtime.getURL(`/misc/ad-banners/small-tkey-inpage-ad.png`);
 const tkeyInpageAdUrl = browser.runtime.getURL(`/misc/ad-banners/tkey-inpage-ad.png`);
 
@@ -45,9 +58,28 @@ const swapTkeyUrl = `${browser.runtime.getURL('fullpage.html')}#/swap?${buildSwa
   true
 )}`;
 
-const getAdsStackIframeURL = (id: string, adsMetadataIds: any[], origin: string, adCategories: string[]) => {
+const searchParamsNames = {
+  id: 'id',
+  themeColor: THEME_COLOR_SEARCH_PARAM_NAME,
+  fontSize: FONT_SIZE_SEARCH_PARAM_NAME,
+  lineHeight: LINE_HEIGHT_SEARCH_PARAM_NAME
+};
+
+const getAdsStackIframeURL = ({
+  adsMetadataIds,
+  origin,
+  adCategories,
+  ...plainSearchParamsInput
+}: AdsStackIframeURLParams) => {
   const url = new URL(browser.runtime.getURL('iframes/ads-stack.html'));
-  url.searchParams.set('id', id);
+  for (const searchParamsInputName in plainSearchParamsInput) {
+    const searchParamsInputNameTyped = searchParamsInputName as keyof typeof plainSearchParamsInput;
+    const key = searchParamsNames[searchParamsInputNameTyped];
+    const value = plainSearchParamsInput[searchParamsInputNameTyped];
+    if (value || value === 0) {
+      url.searchParams.set(key, String(value));
+    }
+  }
   adsMetadataIds.forEach(adMetadataId =>
     url.searchParams.append(ADS_META_SEARCH_PARAM_NAME, JSON.stringify(adMetadataId))
   );

src/lib/constants.ts

@@ -53,3 +53,7 @@ export const searchHotkey = ` (${isMacOS ? '⌘' : 'Ctrl + '}K)`;
 export const FEE_PER_GAS_UNIT = 0.1;
 
 export const LIQUIDITY_BAKING_DEX_ADDRESS = 'KT1TxqZ8QtKvLu3V3JH7Gx58n7Co8pgtpQU5';
+
+export const THEME_COLOR_SEARCH_PARAM_NAME = 'tc';
+export const FONT_SIZE_SEARCH_PARAM_NAME = 'fs';
+export const LINE_HEIGHT_SEARCH_PARAM_NAME = 'lh';

yarn.lock

@@ -3657,10 +3657,10 @@
   dependencies:
     nanoid "^3.1.25"
 
-"@temple-wallet/extension-ads@9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@temple-wallet/extension-ads/-/extension-ads-9.1.0.tgz#dc3e786584b26528604f5ffa629090da4a7d0838"
-  integrity sha512-2m5vgvfp3FnY6mt8e0cf9S1H6uDB7D9OWiiSJv5OJpxuTfo+IGbxmcqmDZVXK292qgxpvuZxCopDZfObZbUg/A==
+"@temple-wallet/extension-ads@10.0.0-dev.1563.1":
+  version "10.0.0-dev.1563.1"
+  resolved "https://registry.yarnpkg.com/@temple-wallet/extension-ads/-/extension-ads-10.0.0-dev.1563.1.tgz#6ad69db9aa93aefd28f1bc798901e426fbd8350c"
+  integrity sha512-BIjx0mO70Ty1mhXKojVev6f9HdAM6tP3eQ+uH/M1x2bNFy0Xa5HaW5s0iXmkF3+nSDiBhqWpNM0hb/SVTDgkRg==
   dependencies:
     axios "^1.7.4"
     crypto-js "^4.2.0"