@temple-wallet/extension-ads 7.1.1 → 8.1.0-dev.1

package/src/ads-configuration.ts

@@ -1,12 +1,12 @@
 import { AdMetadata } from './types/ads-meta';
 
 interface IAdsConfiguration {
-  hypelabAdsWindowUrl: string;
+  adsTwWindowUrl: string;
   tkeyInpageAdUrl: string;
   smallTkeyInpageAdUrl?: string;
   swapTkeyUrl: string;
   externalAdsActivityMessageType: string;
-  getPersonaIframeURL: (id: string, slug: string) => string;
+  personaIframePath: string;
   getAdsStackIframeURL: (id: string, adsMetadataIds: (number | AdMetadata)[], origin: string) => string;
   buildNativeAdsMeta: (containerWidth: number, containerHeight: number) => AdMetadata[];
   bannerAdsMeta: AdMetadata[];
@@ -17,12 +17,12 @@ interface IAdsConfiguration {
 
 export class AdsConfiguration {
   static IS_MISES_BROWSER = false;
-  static HYPELAB_ADS_WINDOW_URL = '';
+  static ADS_TW_WINDOW_URL = '';
   static TKEY_INPAGE_AD_URL = '';
   static SMALL_TKEY_INPAGE_AD_URL = '';
   static SWAP_TKEY_URL = '';
   static EXTERNAL_ADS_ACTIVITY_MESSAGE_TYPE = '';
-  static getPersonaIframeURL: IAdsConfiguration['getPersonaIframeURL'] = () => '';
+  static personaIframePath: IAdsConfiguration['personaIframePath'] = '';
   static getAdsStackIframeURL: IAdsConfiguration['getAdsStackIframeURL'] = () => '';
   static buildNativeAdsMeta: IAdsConfiguration['buildNativeAdsMeta'] = () => [];
   static bannerAdsMeta: AdMetadata[] = [];
@@ -32,12 +32,12 @@ export class AdsConfiguration {
 
 export const configureAds = (config: IAdsConfiguration) => {
   const {
-    hypelabAdsWindowUrl,
+    adsTwWindowUrl,
     tkeyInpageAdUrl,
     smallTkeyInpageAdUrl,
     swapTkeyUrl,
     externalAdsActivityMessageType,
-    getPersonaIframeURL,
+    personaIframePath,
     getAdsStackIframeURL,
     buildNativeAdsMeta,
     bannerAdsMeta,
@@ -50,11 +50,11 @@ export const configureAds = (config: IAdsConfiguration) => {
     AdsConfiguration.SMALL_TKEY_INPAGE_AD_URL = smallTkeyInpageAdUrl;
   }
 
-  AdsConfiguration.HYPELAB_ADS_WINDOW_URL = hypelabAdsWindowUrl;
+  AdsConfiguration.ADS_TW_WINDOW_URL = adsTwWindowUrl;
   AdsConfiguration.TKEY_INPAGE_AD_URL = tkeyInpageAdUrl;
   AdsConfiguration.SWAP_TKEY_URL = swapTkeyUrl;
   AdsConfiguration.EXTERNAL_ADS_ACTIVITY_MESSAGE_TYPE = externalAdsActivityMessageType;
-  AdsConfiguration.getPersonaIframeURL = getPersonaIframeURL;
+  AdsConfiguration.personaIframePath = personaIframePath;
   AdsConfiguration.getAdsStackIframeURL = getAdsStackIframeURL;
   AdsConfiguration.buildNativeAdsMeta = buildNativeAdsMeta;
   AdsConfiguration.bannerAdsMeta = bannerAdsMeta;

package/src/constants.ts

@@ -7,3 +7,5 @@ export const AD_RESIZE_MESSAGE_TYPE = 'resize';
 export const AD_READY_MESSAGE_TYPE = 'ready';
 export const AD_ERROR_MESSAGE_TYPE = 'error';
 export const IFRAME_ALLOWANCE = 'accelerometer; gyroscope';
+export const CRYPTO_CATEGORY_NAME = 'crypto';
+export const BACKGROUND_ELEMENT_ID = 'background';

package/src/execute-ads-actions/ads-views/index.ts

@@ -1,3 +1,3 @@
 export { makeTKeyAdView } from './make-tkey-ad';
-export { makeHypelabAdView } from './make-hypelab-ad';
-export { makePersonaAdView } from './make-persona-ad';
+export { makeAdsTwView } from './make-ads-tw-view';
+export { makeExtensionIframeView } from './make-extension-iframe-view';

package/src/execute-ads-actions/ads-views/{make-hypelab-ad.ts → make-ads-tw-view.ts}

@@ -3,17 +3,17 @@ import { AES } from 'crypto-js';
 import { AdsConfiguration } from 'src/ads-configuration';
 import { IFRAME_ALLOWANCE } from 'src/constants';
 import { AdView } from 'src/types/ad-view';
-import { AdDimensions, HypeLabAdSource } from 'src/types/ads-meta';
+import { AdDimensions, AdSource } from 'src/types/ads-meta';
 
-export const makeHypelabAdView = (
+export const makeAdsTwView = (
   id: string,
-  source: HypeLabAdSource,
+  source: AdSource,
   { width, height }: AdDimensions,
   origin: string
 ): AdView => {
   const iframe = document.createElement('iframe');
   iframe.id = id;
-  iframe.src = getHypelabIframeUrl(source, origin, width, height, iframe.id);
+  iframe.src = getAdsTwUrl(source, origin, width, height, iframe.id);
   iframe.style.width = source.native ? '100%' : `${width}px`;
   iframe.style.height = `${height}px`;
   iframe.style.border = 'none';
@@ -23,21 +23,23 @@ export const makeHypelabAdView = (
 };
 
 /**
- * Returns URL for Hypelab ad iframe
+ * Returns URL for ads.templewallet.com or its preview iframe
  * @param placementType Placement type
  * @param origin Full URL of the page
  * @param width Frame width
  * @param height Frame height
  */
-const getHypelabIframeUrl = (source: HypeLabAdSource, origin: string, width: number, height: number, id: string) => {
-  const url = new URL(AdsConfiguration.HYPELAB_ADS_WINDOW_URL);
-  if (source.native) {
+const getAdsTwUrl = (source: AdSource, origin: string, width: number, height: number, id: string) => {
+  const { providerName, slug, native } = source;
+  const url = new URL(AdsConfiguration.ADS_TW_WINDOW_URL);
+  url.searchParams.set('ap', providerName.toLowerCase());
+  if (native) {
     url.searchParams.set('vh', String(height));
   } else {
     url.searchParams.set('w', String(width));
   }
   url.searchParams.set('h', String(height));
-  url.searchParams.set('p', source.slug);
+  url.searchParams.set('p', slug);
   url.searchParams.set('o', encryptWithAES(origin));
   if (id) {
     url.searchParams.set('id', id);

package/src/execute-ads-actions/ads-views/make-extension-iframe-view.ts

@@ -0,0 +1,26 @@
+import { AdsConfiguration } from 'src/ads-configuration';
+import { AdView } from 'src/types/ad-view';
+import { AdDimensions, AdSource } from 'src/types/ads-meta';
+
+export const makeExtensionIframeView = (id: string, source: AdSource, { width, height }: AdDimensions): AdView => {
+  const element = document.createElement('iframe');
+  let iframePath = '';
+  switch (source.providerName) {
+    case 'Persona':
+      iframePath = AdsConfiguration.personaIframePath;
+      break;
+    default:
+      throw new Error(`Ads from ${source.providerName} are unavailable via extension iframe`);
+  }
+  const iframeUrl = new URL(iframePath);
+  iframeUrl.searchParams.set('id', id);
+  iframeUrl.searchParams.set('slug', source.slug);
+  element.src = iframeUrl.toString();
+  element.id = id;
+
+  element.style.width = `${width}px`;
+  element.style.height = `${height}px`;
+  element.style.border = 'none';
+
+  return { element };
+};

package/src/execute-ads-actions/ads-views/make-tkey-ad.ts

@@ -42,5 +42,5 @@ export const makeTKeyAdView = (width: number, height: number, isNative = false):
   img.style.height = '100%';
   anchor.appendChild(img);
 
-  return { element };
+  return { element, creativeSet: { image: { url: img.src } } };
 };

package/src/execute-ads-actions/observing.ts

@@ -1,5 +1,6 @@
 import browser from 'webextension-polyfill';
 
+import { extendOrKeepDimension } from 'src/ads-actions/helpers';
 import { AdsConfiguration } from 'src/ads-configuration';
 import {
   AD_ERROR_MESSAGE_TYPE,
@@ -46,21 +47,26 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
             reject(new Error(data.reason ?? 'Unknown error'));
             break;
           case AD_RENDER_START_MESSAGE_TYPE:
-            const { dimensions }: AdMetadata = data.adMetadata;
+            const { dimensions, source }: AdMetadata = data.adMetadata;
             const { width, height } = dimensions;
             if (width > 0 && height > 0) {
-              if (!element.style.width?.endsWith('%')) {
-                element.style.width = `${dimensions.width}px`;
+              if (source.native) {
+                element.style.height = `${height}px`;
+              } else {
+                extendOrKeepDimension(element, 'width', width);
+                extendOrKeepDimension(element, 'height', height);
               }
-              element.style.height = `${dimensions.height}px`;
             }
             break;
           case AD_RESIZE_MESSAGE_TYPE:
             const { width: newWidth, height: newHeight } = data;
-            if (!element.style.width?.endsWith('%')) {
-              element.style.width = `${newWidth + horizontalBordersWidth}px`;
+
+            if (element.style.width?.endsWith('%')) {
+              element.style.height = `${newHeight + verticalBordersWidth}px`;
+            } else {
+              extendOrKeepDimension(element, 'width', newWidth + horizontalBordersWidth);
+              extendOrKeepDimension(element, 'height', newHeight + verticalBordersWidth);
             }
-            element.style.height = `${newHeight + verticalBordersWidth}px`;
         }
       } catch (error) {
         console.error('Observing error:', error);

package/src/execute-ads-actions/process-insert-ad-action.ts

@@ -14,7 +14,7 @@ import { AdDimensions } from 'src/types/ads-meta';
 import { subscribeToAdsStackIframeLoadIfNecessary } from './observing';
 import { overrideElementStyles } from './override-element-styles';
 
-const adjustToAd = (wrapperElement: HTMLDivElement, adDimensions: AdDimensions) => {
+const adjustToAd = (wrapperElement: HTMLDivElement, adDimensions: Pick<AdDimensions, 'width' | 'height'>) => {
   const predefinedStylesKeyToOverride = ['width', 'height'] as const;
   predefinedStylesKeyToOverride.forEach(dimensionName => {
     const predefinedStyleValue = wrapperElement.style[dimensionName] ?? '';
@@ -33,7 +33,7 @@ const processInsertAdActionOnce = async (
   insertionPoint: HTMLDivElement | HTMLTableCellElement,
   onAdsStackError: (error: Error) => void
 ) => {
-  const { elementStyle = {}, stylesOverrides = [], adsMetadata, wrapperType } = action;
+  const { elementStyle = {}, stylesOverrides = [], adsMetadata, wrapperType, originalHeight, originalWidth } = action;
 
   stylesOverrides.sort((a, b) => a.parentDepth - b.parentDepth);
 
@@ -41,12 +41,17 @@ const processInsertAdActionOnce = async (
 
   const adId = nanoid();
   const adElement = document.createElement('iframe');
+  adElement.loading = 'lazy';
   adElement.src = AdsConfiguration.getAdsStackIframeURL(adId, adsMetadata, window.location.href);
   adElement.id = adId;
   adElement.allow = IFRAME_ALLOWANCE;
   const firstAdMetadataOrId = adsMetadata[0];
-  const { dimensions } =
+  const { dimensions: minDimensions } =
     typeof firstAdMetadataOrId === 'number' ? AdsConfiguration.bannerAdsMeta[firstAdMetadataOrId] : firstAdMetadataOrId;
+  const dimensions = {
+    width: Math.max(originalWidth, minDimensions.width),
+    height: Math.max(originalHeight, minDimensions.height)
+  };
   adElement.style.width = wrapperType === 'tbody' ? '100%' : `${dimensions.width}px`;
   adElement.style.height = `${dimensions.height}px`;
   adElement.style.border = 'none';
@@ -157,6 +162,9 @@ export const processInsertAdAction = async (action: InsertAdAction) => {
     if (isNativeAd) {
       emptyAdElement.setAttribute(TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME, 'true');
     }
+    if (action.type === AdActionType.SimpleInsertAd && action.isSiblingReplacement) {
+      emptyAdElement.setAttribute(SIBLING_REPLACEMENT_ATTRIBUTE_NAME, 'true');
+    }
     emptyAdElement.style.display = 'none';
     wrapperElement.replaceWith(emptyAdElement);
   };

package/src/render-ads-stack.ts

@@ -1,12 +1,15 @@
+import { extendOrKeepDimension } from './ads-actions/helpers';
 import { AdsConfiguration } from './ads-configuration';
 import {
   AD_ERROR_MESSAGE_TYPE,
   AD_READY_MESSAGE_TYPE,
   AD_RENDER_START_MESSAGE_TYPE,
-  AD_RESIZE_MESSAGE_TYPE
+  AD_RESIZE_MESSAGE_TYPE,
+  BACKGROUND_ELEMENT_ID
 } from './constants';
-import { makeHypelabAdView, makePersonaAdView, makeTKeyAdView } from './execute-ads-actions/ads-views';
-import { AdView } from './types/ad-view';
+import { makeAdsTwView, makeExtensionIframeView, makeTKeyAdView } from './execute-ads-actions/ads-views';
+import { overrideElementStyles } from './execute-ads-actions/override-element-styles';
+import { AdView, CreativeSet } from './types/ad-view';
 import { AdMetadata } from './types/ads-meta';
 
 const broadcastMessage = (content: unknown) => window.parent.postMessage(JSON.stringify(content), '*');
@@ -34,17 +37,16 @@ export const renderAdsStack = async (
 
   const { source, dimensions } = adMetadata;
   let adView: AdView;
-  let withTempleLabel = true;
   switch (source.providerName) {
     case 'Temple':
       adView = makeTKeyAdView(dimensions.width, dimensions.height, source.native);
       break;
     case 'HypeLab':
-      adView = makeHypelabAdView(adId, source, dimensions, origin);
-      if (source.native) withTempleLabel = false;
+    case 'SmartyAds':
+      adView = makeAdsTwView(adId, source, dimensions, origin);
       break;
     default:
-      adView = makePersonaAdView(adId, source, dimensions);
+      adView = makeExtensionIframeView(adId, source, dimensions);
   }
 
   const { element } = adView;
@@ -52,9 +54,57 @@ export const renderAdsStack = async (
   const templeLabelElement = document.getElementById('temple-label')!;
   rootElement.replaceChildren(element);
 
-  if (withTempleLabel) templeLabelElement.setAttribute('active', '');
+  if (!source.native) templeLabelElement.setAttribute('active', '');
   else templeLabelElement.removeAttribute('active');
 
+  const updateBackground = (creativeSet: CreativeSet = {}) => {
+    try {
+      const { image, video } = creativeSet;
+      const prevBackgroundElement = document.getElementById(BACKGROUND_ELEMENT_ID);
+      let backgroundElement: HTMLImageElement | HTMLVideoElement | undefined;
+      if (image) {
+        backgroundElement = document.createElement('img');
+        backgroundElement.src = image.url;
+        backgroundElement.alt = '';
+      } else if (video) {
+        backgroundElement = document.createElement('video');
+        backgroundElement.src = video.url;
+        backgroundElement.autoplay = true;
+        backgroundElement.preload = 'auto';
+        backgroundElement.playsInline = true;
+        backgroundElement.muted = true;
+        backgroundElement.loop = true;
+      }
+
+      if (!backgroundElement && prevBackgroundElement) {
+        rootElement.removeChild(prevBackgroundElement);
+      }
+
+      if (!backgroundElement) return;
+
+      backgroundElement.id = BACKGROUND_ELEMENT_ID;
+      backgroundElement.style.zIndex = '-1';
+      overrideElementStyles(backgroundElement, {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        right: '0px',
+        bottom: '0px',
+        width: '100%',
+        height: '100%',
+        'object-fit': 'cover',
+        filter: 'blur(12px)'
+      });
+      if (prevBackgroundElement) {
+        rootElement.replaceChild(backgroundElement, prevBackgroundElement);
+      } else {
+        rootElement.appendChild(backgroundElement);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   if (element instanceof HTMLIFrameElement) {
     return new Promise<void>((resolve, reject) => {
       const responseTimeout = setTimeout(
@@ -82,19 +132,24 @@ export const renderAdsStack = async (
                 clearTimeout(responseTimeout);
                 resolve();
               }
+              updateBackground(data.ad?.creative_set);
               break;
             case AD_ERROR_MESSAGE_TYPE:
-              window.removeEventListener('message', messageListener);
-              clearTimeout(responseTimeout);
-              reject(new Error(data.reason ?? 'Unknown error'));
+              if (!wasReady) {
+                window.removeEventListener('message', messageListener);
+                clearTimeout(responseTimeout);
+                reject(new Error(data.reason ?? 'Unknown error'));
+              }
               break;
             case AD_RESIZE_MESSAGE_TYPE:
               const { width, height } = data;
               if (width > 0 && height > 0) {
-                if (!element.style.width?.endsWith('%')) {
-                  element.style.width = `${width}px`;
+                if (adMetadata.source.native) {
+                  element.style.height = `${height}px`;
+                } else {
+                  extendOrKeepDimension(element, 'width', width);
+                  extendOrKeepDimension(element, 'height', height);
                 }
-                element.style.height = `${height}px`;
                 broadcastMessage({ ...data, id: adId });
               }
           }
@@ -111,5 +166,6 @@ export const renderAdsStack = async (
     });
   }
 
+  updateBackground(adView.creativeSet);
   broadcastMessage({ id: adId, type: AD_READY_MESSAGE_TYPE, adMetadata });
 };

package/src/temple-wallet-api.ts

@@ -42,6 +42,10 @@ export class TempleWalletApi {
     this.api.get<string[]>('/slise-ad-rules/providers/all-sites')
   );
 
+  getProvidersCategories = withFetchDataExtraction(() =>
+    this.api.get<Record<string, string[]>>('/slise-ad-rules/providers/categories')
+  );
+
   getProvidersRulesForAllDomains = withFetchDataExtraction(() =>
     this.api.get<Record<string, RawAdProvidersRule[]>>('/slise-ad-rules/providers/by-sites')
   );
@@ -92,7 +96,8 @@ export class TempleWalletApi {
       permanentNativeAdPlacesRulesForAllDomains,
       adsReplaceUrlsBlacklist,
       providersNegativeSelectors,
-      elementsToHideOrRemoveRules
+      elementsToHideOrRemoveRules,
+      providersCategories
     ] = await Promise.all([
       this.getAdPlacesRulesForAllDomains(),
       this.getProvidersRulesForAllDomains(),
@@ -102,7 +107,8 @@ export class TempleWalletApi {
       this.getPermanentNativeAdPlacesRulesForAllDomains(),
       this.getAdsReplaceUrlsBlacklist(),
       this.getNegativeSelectorsForAllProviders(),
-      this.getElementsToHideOrRemoveRules()
+      this.getElementsToHideOrRemoveRules(),
+      this.getProvidersCategories()
     ]);
 
     return {
@@ -115,6 +121,7 @@ export class TempleWalletApi {
       adsReplaceUrlsBlacklist,
       providersNegativeSelectors,
       elementsToHideOrRemoveRules,
+      providersCategories,
       timestamp: Date.now()
     };
   };

package/src/transform-raw-rules.ts

@@ -3,6 +3,8 @@ import { isEqual } from 'lodash';
 import { AdPlacesRule, AdsRules } from 'src/types/ads-rules';
 import { RawAllAdsRules, RawPermanentAdPlacesRule } from 'src/types/temple-wallet-api';
 
+import { CRYPTO_CATEGORY_NAME } from './constants';
+
 export const transformRawRules = (location: Location, rules: RawAllAdsRules): AdsRules => {
   const {
     adPlacesRulesForAllDomains,
@@ -14,6 +16,7 @@ export const transformRawRules = (location: Location, rules: RawAllAdsRules): Ad
     permanentNativeAdPlacesRulesForAllDomains = {},
     adsReplaceUrlsBlacklist = [],
     elementsToHideOrRemoveRules = {},
+    providersCategories = {},
     timestamp
   } = rules;
   const { hostname, href } = location;
@@ -50,14 +53,16 @@ export const transformRawRules = (location: Location, rules: RawAllAdsRules): Ad
       hrefMatchPredicate,
       providersRulesForAllDomains,
       providersSelectors,
-      providersToReplaceAtAllSites
+      providersToReplaceAtAllSites,
+      providersCategories
     ),
     providersNegativeSelectors: buildProvidersSelectors(
       hostname,
       hrefMatchPredicate,
       providersRulesForAllDomains,
       providersNegativeSelectors,
-      providersToReplaceAtAllSites
+      providersToReplaceAtAllSites,
+      providersCategories
     ),
     elementsToHideOrRemoveRules: buildElementsToHideOrRemoveRules(
       hostname,
@@ -163,7 +168,8 @@ const buildProvidersSelectors = (
   hrefMatchPredicate: (regex: RegExp) => boolean,
   providersRulesForAllDomains: RawAllAdsRules['providersRulesForAllDomains'],
   providersSelectors: RawAllAdsRules['providersSelectors'],
-  providersToReplaceAtAllSites: RawAllAdsRules['providersToReplaceAtAllSites']
+  providersToReplaceAtAllSites: RawAllAdsRules['providersToReplaceAtAllSites'],
+  providersCategories: RawAllAdsRules['providersCategories']
 ): AdsRules['providersSelectors'] => {
   const providersRulesByHostname = (providersRulesForAllDomains[hostname] ?? []).map(
     ({ urlRegexes, ...restRuleProps }) => ({
@@ -176,19 +182,24 @@ const buildProvidersSelectors = (
     urlRegexes.some(hrefMatchPredicate)
   );
   const alreadyProcessedProviders = new Set<string>();
-  const selectorsForProvidersToReplace: Record<number, Set<string>> = {};
+  const adsSelectors: Record<string, Record<number, Set<string>>> = {};
   const handleProvider = (provider: string) => {
     if (alreadyProcessedProviders.has(provider)) return;
 
+    const categoriesSlug = (providersCategories[provider] ?? [CRYPTO_CATEGORY_NAME]).join('|');
     const newSelectors = providersSelectors[provider] ?? [];
     newSelectors.forEach(selector => {
       const { selector: cssString, parentDepth } =
         typeof selector === 'string' ? { selector, parentDepth: 0 } : selector;
 
-      if (!selectorsForProvidersToReplace[parentDepth]) {
-        selectorsForProvidersToReplace[parentDepth] = new Set();
+      if (!adsSelectors[categoriesSlug]) {
+        adsSelectors[categoriesSlug] = {};
+      }
+      const sameCategoriesAdsSelectors = adsSelectors[categoriesSlug];
+      if (!sameCategoriesAdsSelectors[parentDepth]) {
+        sameCategoriesAdsSelectors[parentDepth] = new Set();
       }
-      selectorsForProvidersToReplace[parentDepth].add(cssString);
+      sameCategoriesAdsSelectors[parentDepth].add(cssString);
     });
     alreadyProcessedProviders.add(provider);
   };
@@ -196,8 +207,13 @@ const buildProvidersSelectors = (
   providersToReplaceAtAllSites.forEach(handleProvider);
   relatedProvidersRulesByUrl.forEach(({ providers }) => providers.forEach(handleProvider));
 
-  return Object.entries(selectorsForProvidersToReplace).map(([parentDepth, selectors]) => ({
-    parentDepth: Number(parentDepth),
-    selector: quickJoinSelectors(selectors)
-  }));
+  return Object.entries(adsSelectors)
+    .map(([categoriesSlug, sameCategoriesSelectors]) =>
+      Object.entries(sameCategoriesSelectors).map(([parentDepth, selectors]) => ({
+        parentDepth: Number(parentDepth),
+        selector: quickJoinSelectors(selectors),
+        categories: categoriesSlug.split('|')
+      }))
+    )
+    .flat();
 };

package/src/types/ad-view.ts

@@ -1,3 +1,6 @@
+export type CreativeSet = Partial<Record<'image' | 'video', { url: string }>>;
+
 export interface AdView {
   element: HTMLDivElement | HTMLIFrameElement;
+  creativeSet?: CreativeSet;
 }

package/src/types/ads-actions.ts

@@ -29,6 +29,8 @@ interface InsertAdActionProps
   adsMetadata: (number | AdMetadata)[];
   elementStyle?: StringRecord<string>;
   stylesOverrides?: AdStylesOverrides[];
+  originalWidth: number;
+  originalHeight: number;
 }
 
 export interface ReplaceAllChildrenWithAdAction extends AdActionBase, InsertAdActionProps {
@@ -60,7 +62,7 @@ export interface HideElementAction extends AdActionBase {
 
 export type InsertAdAction = ReplaceAllChildrenWithAdAction | ReplaceElementWithAdAction | SimpleInsertAdAction;
 
-export type OmitAdInAction<T extends InsertAdActionProps> = Omit<T, 'adsMetadata'>;
+export type OmitAdInAction<T extends InsertAdActionProps> = Omit<T, 'adsMetadata' | 'originalWidth' | 'originalHeight'>;
 
 export type InsertAdActionWithoutMeta =
   | OmitAdInAction<ReplaceAllChildrenWithAdAction>
@@ -73,5 +75,6 @@ export type AddActionsIfAdResolutionAvailable = (
   elementsToMeasure: Record<'width' | 'height', HTMLElement>,
   adType: AdType,
   adIsNative: boolean,
+  expectedCategories: string[],
   ...actionsBases: (InsertAdActionWithoutMeta | HideElementAction | RemoveElementAction)[]
 ) => boolean;

package/src/types/ads-meta.ts

@@ -1,26 +1,11 @@
-interface AdSourceBase {
+export interface AdSource {
   shouldNotUseStrictContainerLimits?: boolean;
-}
-
-/** Only covers TKEY ads for now */
-interface TempleAdSource extends AdSourceBase {
-  providerName: 'Temple';
+  providerName: 'Temple' | 'Persona' | 'HypeLab' | 'SmartyAds';
   native?: boolean;
-}
-
-export interface PersonaAdSource extends AdSourceBase {
-  providerName: 'Persona';
   slug: string;
+  categories?: string[];
 }
 
-export interface HypeLabAdSource extends AdSourceBase {
-  providerName: 'HypeLab';
-  native: boolean;
-  slug: string;
-}
-
-type AdSource = HypeLabAdSource | TempleAdSource | PersonaAdSource;
-
 export interface AdDimensions {
   width: number;
   height: number;

package/src/types/ads-provider.ts

@@ -1,5 +1,6 @@
 export enum AdsProviderTitle {
   Optimal = 'Optimal',
+  SmartyAds = 'SmartyAds',
   HypeLab = 'HypeLab',
   Persona = 'Persona',
   Temple = 'Temple Wallet'

package/src/types/ads-rules.ts

@@ -17,7 +17,7 @@ export interface ElementsToHideOrRemoveRule extends Omit<RawElementsToHideOrRemo
 export interface AdsRules {
   adPlacesRules: Array<Omit<AdPlacesRule, 'urlRegexes'>>;
   permanentAdPlacesRules: PermanentAdPlacesRule[];
-  providersSelectors: Array<{ selector: string; parentDepth: number }>;
+  providersSelectors: Array<{ selector: string; parentDepth: number; categories: string[] }>;
   providersNegativeSelectors: Array<{ selector: string; parentDepth: number }>;
   elementsToHideOrRemoveRules: ElementsToHideOrRemoveRule[];
   timestamp: number;

package/src/types/temple-wallet-api.ts

@@ -65,6 +65,7 @@ export interface RawElementsToHideOrRemoveEntry {
 
 export interface RawAllAdsRules {
   adPlacesRulesForAllDomains: Record<string, RawAdPlacesRule[]>;
+  providersCategories: Record<string, string[]>;
   providersRulesForAllDomains: Record<string, RawAdProvidersRule[]>;
   providersSelectors: Record<string, (string | { selector: string; parentDepth: number })[]>;
   providersNegativeSelectors: Record<string, (string | { selector: string; parentDepth: number })[]>;

package/src/utils.ts

@@ -1,7 +1,3 @@
-export const IS_DEV = process && process.env && process.env.NODE_ENV === 'development';
-
-export const IS_MAC_OS = navigator.userAgent.includes('Macintosh');
-
 /** From lodash */
 type Truthy<T> = T extends null | undefined | void | false | '' | 0 | 0n ? never : T;
 

package/dist/referrals/index.d.ts

@@ -1,33 +0,0 @@
-import memoizee from 'memoizee';
-import * as lodash from 'lodash';
-
-declare function processAnchors(supportedDomains: Set<string>, AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI): Promise<undefined>;
-interface AdsBrowserExtensionMessageTypeI {
-    FetchReferrals: string;
-    ReferralClick: string;
-}
-
-/**
- * API docs: https://docs.takeads.com
- */
-declare class TakeAdsClient {
-    private publicKey;
-    readonly apiUrl: string;
-    private axios;
-    constructor(publicKey: string, apiUrl?: string);
-    affiliateLinks(websiteUrls: string[], subId?: string): Promise<TekeadsAffiliateResponse>;
-}
-declare const buildTakeadsClient: ((publicKey: string) => TakeAdsClient) & memoizee.Memoized<(publicKey: string) => TakeAdsClient>;
-interface TekeadsAffiliateResponse {
-    data: AffiliateLink[];
-}
-interface AffiliateLink {
-    iri: string;
-    trackingLink: string;
-    imageUrl: string | null;
-}
-
-/** Current page's domain with 'www' stripped off */
-declare const getCurrentPageDomain: (() => string) & lodash.MemoizedFunction;
-
-export { buildTakeadsClient, getCurrentPageDomain, processAnchors };