From d7ef4fa8ebb5bf2f3eac3ed809a5ec868a2f90f2 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Wed, 13 Nov 2024 17:30:36 +0200 Subject: [PATCH 1/3] TW-1563 Implement theming for native ads that support it --- package.json | 4 +- .../replace-ads/ads-stack.iframe.ts | 27 +++++++++---- src/lib/ads/configure-ads.ts | 40 +++++++++++++++++-- src/lib/constants.ts | 4 ++ yarn.lock | 8 ++-- 5 files changed, 66 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 5a24deb8d..139d15874 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "temple-wallet", - "version": "1.28.0", + "version": "1.28.1", "private": true, "scripts": { "start-run": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.json\" webpack --watch --stats errors-warnings", @@ -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" } } 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 2c5f84ced..a703ce72d 100644 --- a/yarn.lock +++ b/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" From a9176b3ae3ad36019a6cc76c0672a6b42cf80a0c Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Fri, 15 Nov 2024 12:49:48 +0200 Subject: [PATCH 2/3] TW-1563 Revert early version increment --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 139d15874..6ee0de818 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "temple-wallet", - "version": "1.28.1", + "version": "1.28.0", "private": true, "scripts": { "start-run": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.json\" webpack --watch --stats errors-warnings", From e4251192b1f1672fa0d8dd944db70f53416350db Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 2 Dec 2024 15:01:59 +0200 Subject: [PATCH 3/3] Bump tw-ext-ads dep version --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 7c606adf1..c7bb96950 100644 --- a/package.json +++ b/package.json @@ -233,6 +233,6 @@ "follow-redirects": "^1.15.4" }, "optionalDependencies": { - "@temple-wallet/extension-ads": "10.0.0" + "@temple-wallet/extension-ads": "10.0.1" } } diff --git a/yarn.lock b/yarn.lock index d95a79070..b566e0bc2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3657,10 +3657,10 @@ dependencies: nanoid "^3.1.25" -"@temple-wallet/extension-ads@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@temple-wallet/extension-ads/-/extension-ads-10.0.0.tgz#d60b7e98828d3a5a3c57aa6038f2d9a2f394601f" - integrity sha512-erDP+Njht5YwV7TZkDccYsbJEnXIQjlYOFXjo/FaQDjRMwGaNdjE2sDnlH4LM86WzCtbzr5d9iqLn5bKfvOa6A== +"@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"