diff --git a/package.json b/package.json index b30b5f375..c7bb96950 100644 --- a/package.json +++ b/package.json @@ -233,6 +233,6 @@ "follow-redirects": "^1.15.4" }, "optionalDependencies": { - "@temple-wallet/extension-ads": "9.1.1-dev.1589.2" + "@temple-wallet/extension-ads": "10.0.1" } } diff --git a/src/content-scripts/replace-ads/ads-stack.iframe.ts b/src/content-scripts/replace-ads/ads-stack.iframe.ts index 9ab9ef801..cd274abc0 100644 --- a/src/content-scripts/replace-ads/ads-stack.iframe.ts +++ b/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)); diff --git a/src/lib/ads/configure-ads.ts b/src/lib/ads/configure-ads.ts index 667038c57..4dce82ea3 100644 --- a/src/lib/ads/configure-ads.ts +++ b/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)) ); diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 054dc9e08..a7da07100 100644 --- a/src/lib/constants.ts +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 638e8b2c7..b566e0bc2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3657,10 +3657,10 @@ dependencies: nanoid "^3.1.25" -"@temple-wallet/extension-ads@9.1.1-dev.1589.2": - version "9.1.1-dev.1589.2" - resolved "https://registry.yarnpkg.com/@temple-wallet/extension-ads/-/extension-ads-9.1.1-dev.1589.2.tgz#6f57e8881016769018671ddfcaa2417647d74d45" - integrity sha512-upUeIqLT5L3z5loTM4kTEWLYKldYV7j23aa/tpL/7VNknGGvGWP1wzu3rge+FSYg7pex6swmQpV1URrdpbxLQA== +"@temple-wallet/extension-ads@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@temple-wallet/extension-ads/-/extension-ads-10.0.1.tgz#76a05a83b037ad539d2a67a271ddb1cc35025660" + integrity sha512-rRY2xFvSwJXhLLOeOmxfJqprAGfPtpoWOmFxgF1Rx/f3ajogqNYcYH0dLn8Q3T8Vit2xzr5T4S7BdzDbLijNSQ== dependencies: axios "^1.7.4" crypto-js "^4.2.0"