@temple-wallet/extension-ads 1.0.0

package/src/ads-actions/process-permanent-rule.ts

@@ -0,0 +1,187 @@
+import {
+  AdAction,
+  AdActionType,
+  AddActionsIfAdResolutionAvailable,
+  HideElementAction,
+  OmitAdInAction,
+  ReplaceElementWithAdAction,
+  SimpleInsertAdAction
+} from 'src/types/ads-actions';
+import { PermanentAdPlacesRule } from 'src/types/ads-rules';
+import { delay, isTruthy } from 'src/utils';
+
+import { applyQuerySelector, elementIsOurAd, getParentOfDepth, ourAdQuerySelector } from './helpers';
+
+export const processPermanentAdPlacesRule = async (
+  rule: PermanentAdPlacesRule,
+  addActionsIfAdResolutionAvailable: AddActionsIfAdResolutionAvailable,
+  result: AdAction[]
+) => {
+  const {
+    isMultiple: shouldSearchForManyParents,
+    cssString: parentCssString,
+    parentDepth: parentParentDepth
+  } = rule.parentSelector;
+
+  const parents = applyQuerySelector<HTMLElement>(parentCssString, shouldSearchForManyParents)
+    .map(element => getParentOfDepth(element, parentParentDepth))
+    .filter((value): value is HTMLElement => Boolean(value));
+
+  await Promise.all(
+    parents.map(async parent => {
+      await delay(0);
+
+      processPermanentAdsParent(parent, rule, addActionsIfAdResolutionAvailable, result);
+    })
+  );
+
+  return parents;
+};
+
+const processPermanentAdsParent = (
+  parent: HTMLElement,
+  rule: PermanentAdPlacesRule,
+  addActionsIfAdResolutionAvailable: AddActionsIfAdResolutionAvailable,
+  result: AdAction[]
+) => {
+  const {
+    shouldUseDivWrapper,
+    divWrapperStyle,
+    elementStyle,
+    adSelector,
+    insertionIndex,
+    insertBeforeSelector,
+    insertAfterSelector,
+    insertionsCount = 1,
+    elementToMeasureSelector,
+    stylesOverrides,
+    shouldHideOriginal = false,
+    isNative
+  } = rule;
+
+  const {
+    isMultiple: shouldSearchForManyBannersInParent,
+    cssString: bannerCssString,
+    parentDepth: bannerParentDepth
+  } = adSelector;
+
+  const ourAds = applyQuerySelector(ourAdQuerySelector, true, parent).reduce<Element[]>((acc, element) => {
+    if (acc.some(prevElement => prevElement.contains(element) || element.contains(prevElement))) {
+      return acc;
+    }
+
+    return [...acc, element];
+  }, []);
+
+  const ourAdsCount = ourAds.length;
+  let insertionsLeft = insertionsCount - ourAdsCount;
+
+  const banners = applyQuerySelector<HTMLElement>(bannerCssString, shouldSearchForManyBannersInParent, parent)
+    .map(element => getParentOfDepth(element, bannerParentDepth))
+    .filter((value): value is HTMLElement => isTruthy(value) && !elementIsOurAd(value));
+
+  banners.forEach(banner => {
+    if (insertionsLeft <= 0) {
+      const { display: bannerDisplay } = window.getComputedStyle(banner);
+      if (!shouldHideOriginal || bannerDisplay !== 'none') {
+        result.push({
+          type: shouldHideOriginal ? AdActionType.HideElement : AdActionType.RemoveElement,
+          element: banner
+        });
+      }
+    } else {
+      let elementToMeasure = banner.parentElement?.children.length === 1 ? banner.parentElement : banner;
+      if (elementToMeasureSelector) {
+        elementToMeasure = document.querySelector(elementToMeasureSelector) ?? elementToMeasure;
+      }
+      const replaceActionBase: OmitAdInAction<ReplaceElementWithAdAction> = {
+        type: AdActionType.ReplaceElement,
+        element: banner,
+        shouldUseDivWrapper,
+        divWrapperStyle,
+        elementStyle,
+        stylesOverrides
+      };
+      const hideActionBase: HideElementAction = {
+        type: AdActionType.HideElement,
+        element: banner
+      };
+      const insertActionBase: OmitAdInAction<SimpleInsertAdAction> = {
+        type: AdActionType.SimpleInsertAd,
+        shouldUseDivWrapper,
+        divWrapperStyle,
+        elementStyle,
+        parent: banner.parentElement!,
+        insertionIndex: Array.from(banner.parentElement!.children).indexOf(banner),
+        stylesOverrides
+      };
+
+      const nextBannerSibling = banner.nextElementSibling;
+      const nextBannerSiblingIsOurAd = nextBannerSibling && elementIsOurAd(nextBannerSibling as HTMLElement);
+      const actionsToInsert = shouldHideOriginal
+        ? nextBannerSiblingIsOurAd
+          ? []
+          : [hideActionBase, insertActionBase]
+        : [replaceActionBase];
+      if (
+        actionsToInsert.length > 0 &&
+        addActionsIfAdResolutionAvailable(elementToMeasure, false, true, isNative, ...actionsToInsert)
+      ) {
+        insertionsLeft--;
+      }
+    }
+  });
+
+  if (insertionsLeft <= 0) {
+    return;
+  }
+
+  let normalizedInsertionIndex = -1;
+  let insertionParentElement = parent;
+  let elementToMeasure = parent;
+  const insertAnchorSelector = insertBeforeSelector || insertAfterSelector;
+  if (insertAnchorSelector) {
+    const insertAnchorElement = parent.querySelector(insertAnchorSelector);
+    const newInsertionParentElement = insertAnchorElement?.parentElement;
+
+    if (insertAnchorElement && newInsertionParentElement) {
+      insertionParentElement = newInsertionParentElement;
+      normalizedInsertionIndex =
+        Array.from(parent.children).indexOf(insertAnchorElement) + (insertBeforeSelector ? 0 : 1);
+      elementToMeasure =
+        (elementToMeasureSelector && document.querySelector(elementToMeasureSelector)) ||
+        (insertAnchorElement as HTMLElement);
+    }
+  } else {
+    const insertionIndexWithDefault = insertionIndex ?? 0;
+
+    normalizedInsertionIndex =
+      insertionIndexWithDefault < 0
+        ? Math.max(parent.children.length + insertionIndexWithDefault, 0)
+        : Math.min(insertionIndexWithDefault, parent.children.length);
+
+    elementToMeasure =
+      (elementToMeasureSelector && document.querySelector(elementToMeasureSelector)) ||
+      ((parent.children[normalizedInsertionIndex] as HTMLElement | undefined) ?? parent);
+  }
+
+  if (normalizedInsertionIndex !== -1) {
+    const actionBase: OmitAdInAction<SimpleInsertAdAction> = {
+      type: AdActionType.SimpleInsertAd,
+      shouldUseDivWrapper,
+      divWrapperStyle,
+      elementStyle,
+      parent: insertionParentElement,
+      insertionIndex: normalizedInsertionIndex,
+      stylesOverrides
+    };
+
+    addActionsIfAdResolutionAvailable(
+      elementToMeasure,
+      false,
+      true,
+      isNative,
+      ...Array<typeof actionBase>(insertionsLeft).fill(actionBase)
+    );
+  }
+};

package/src/ads-actions/process-rule.ts

@@ -0,0 +1,123 @@
+import {
+  AddActionsIfAdResolutionAvailable,
+  AdActionType,
+  HideElementAction,
+  InsertAdActionWithoutMeta,
+  OmitAdInAction,
+  RemoveElementAction,
+  ReplaceAllChildrenWithAdAction,
+  ReplaceElementWithAdAction,
+  SimpleInsertAdAction
+} from 'src/types/ads-actions';
+import { AdsRules } from 'src/types/ads-rules';
+import { delay } from 'src/utils';
+
+import { applyQuerySelector, elementIsOurAd, getParentOfDepth, ourAdQuerySelector } from './helpers';
+
+export const processAdPlacesRule = async (
+  rule: AdsRules['adPlacesRules'][number],
+  permanentAdsParents: HTMLElement[],
+  addActionsIfAdResolutionAvailable: AddActionsIfAdResolutionAvailable
+) => {
+  const { cssString, isMultiple } = rule.selector;
+
+  const selectedElements = applyQuerySelector<HTMLElement>(cssString, isMultiple);
+
+  await Promise.all(
+    selectedElements.map(async selectedElement => {
+      await delay(0);
+
+      processSelectedElement(selectedElement, rule, permanentAdsParents, addActionsIfAdResolutionAvailable);
+    })
+  );
+};
+
+const processSelectedElement = (
+  selectedElement: HTMLElement,
+  rule: AdsRules['adPlacesRules'][number],
+  permanentAdsParents: HTMLElement[],
+  addActionsIfAdResolutionAvailable: AddActionsIfAdResolutionAvailable
+) => {
+  const {
+    selector: { shouldUseDivWrapper, parentDepth, divWrapperStyle },
+    stylesOverrides,
+    shouldHideOriginal
+  } = rule;
+
+  const banner = getParentOfDepth(selectedElement, parentDepth);
+
+  if (
+    !banner ||
+    permanentAdsParents.some(parent => parent.contains(banner)) ||
+    elementIsOurAd(banner) ||
+    banner.querySelector(ourAdQuerySelector)
+  ) {
+    return;
+  }
+
+  const actionBaseCommonProps = {
+    shouldUseDivWrapper,
+    divWrapperStyle
+  };
+
+  let actionsBases: (InsertAdActionWithoutMeta | HideElementAction | RemoveElementAction)[];
+  if (shouldUseDivWrapper && shouldHideOriginal) {
+    const parent = banner.parentElement!;
+    const insertAdAction: OmitAdInAction<SimpleInsertAdAction> = {
+      type: AdActionType.SimpleInsertAd,
+      parent,
+      insertionIndex: Array.from(parent.children).indexOf(banner),
+      stylesOverrides: stylesOverrides?.map(({ parentDepth, ...restProps }) => ({
+        ...restProps,
+        parentDepth: parentDepth - 1
+      })),
+      ...actionBaseCommonProps
+    };
+
+    actionsBases = [];
+    if (window.getComputedStyle(banner).display !== 'none') {
+      actionsBases.push({ type: AdActionType.HideElement, element: banner });
+    }
+    if (!parent.querySelector(ourAdQuerySelector)) {
+      actionsBases.push(insertAdAction);
+    }
+  } else if (shouldUseDivWrapper) {
+    const replaceElementActionBase: OmitAdInAction<ReplaceElementWithAdAction> = {
+      type: AdActionType.ReplaceElement,
+      element: banner,
+      stylesOverrides: stylesOverrides?.map(({ parentDepth, ...restProps }) => ({
+        ...restProps,
+        parentDepth: parentDepth - 1
+      })),
+      ...actionBaseCommonProps
+    };
+    actionsBases = [replaceElementActionBase];
+  } else if (shouldHideOriginal) {
+    const insertAdAction: OmitAdInAction<SimpleInsertAdAction> = {
+      type: AdActionType.SimpleInsertAd,
+      parent: banner,
+      insertionIndex: 0,
+      stylesOverrides,
+      ...actionBaseCommonProps
+    };
+
+    actionsBases = Array.from(banner.children)
+      .filter(child => window.getComputedStyle(child).display !== 'none')
+      .map((child): HideElementAction => ({ type: AdActionType.HideElement, element: child as HTMLElement }));
+    if (!banner.querySelector(ourAdQuerySelector)) {
+      actionsBases.push(insertAdAction);
+    }
+  } else {
+    const replaceAllChildrenActionBase: OmitAdInAction<ReplaceAllChildrenWithAdAction> = {
+      type: AdActionType.ReplaceAllChildren,
+      parent: banner,
+      stylesOverrides,
+      ...actionBaseCommonProps
+    };
+    actionsBases = [replaceAllChildrenActionBase];
+  }
+
+  if (actionsBases.length > 0) {
+    addActionsIfAdResolutionAvailable(banner, false, false, false, ...actionsBases);
+  }
+};

package/src/ads-configuration.ts

@@ -0,0 +1,43 @@
+export class AdsConfiguration {
+  static HYPELAB_NATIVE_PLACEMENT_SLUG = '';
+  static HYPELAB_SMALL_PLACEMENT_SLUG = '';
+  static HYPELAB_HIGH_PLACEMENT_SLUG = '';
+  static HYPELAB_WIDE_PLACEMENT_SLUG = '';
+  static HYPELAB_ADS_WINDOW_URL = '';
+  static TKEY_INPAGE_AD_URL = '';
+  static SWAP_TKEY_URL = '';
+  static EXTERNAL_ADS_ACTIVITY_MESSAGE_TYPE = '';
+}
+
+interface IAdsConfiguration {
+  hypelabNativePlacementSlug: string;
+  hypelabSmallPlacementSlug: string;
+  hypelabHighPlacementSlug: string;
+  hypelabWidePlacementSlug: string;
+  hypelabAdsWindowUrl: string;
+  tkeyInpageAdUrl: string;
+  swapTkeyUrl: string;
+  externalAdsActivityMessageType: string;
+}
+
+export const configureAds = (config: IAdsConfiguration) => {
+  const {
+    hypelabNativePlacementSlug,
+    hypelabSmallPlacementSlug,
+    hypelabHighPlacementSlug,
+    hypelabWidePlacementSlug,
+    hypelabAdsWindowUrl,
+    tkeyInpageAdUrl,
+    swapTkeyUrl,
+    externalAdsActivityMessageType
+  } = config;
+
+  AdsConfiguration.HYPELAB_NATIVE_PLACEMENT_SLUG = hypelabNativePlacementSlug;
+  AdsConfiguration.HYPELAB_SMALL_PLACEMENT_SLUG = hypelabSmallPlacementSlug;
+  AdsConfiguration.HYPELAB_HIGH_PLACEMENT_SLUG = hypelabHighPlacementSlug;
+  AdsConfiguration.HYPELAB_WIDE_PLACEMENT_SLUG = hypelabWidePlacementSlug;
+  AdsConfiguration.HYPELAB_ADS_WINDOW_URL = hypelabAdsWindowUrl;
+  AdsConfiguration.TKEY_INPAGE_AD_URL = tkeyInpageAdUrl;
+  AdsConfiguration.SWAP_TKEY_URL = swapTkeyUrl;
+  AdsConfiguration.EXTERNAL_ADS_ACTIVITY_MESSAGE_TYPE = externalAdsActivityMessageType;
+};

package/src/ads-meta.ts

@@ -0,0 +1,108 @@
+import { AdsConfiguration } from 'src/ads-configuration';
+import { AdMetadata } from 'src/types/ads-meta';
+
+export const BANNER_ADS_META: AdMetadata[] = [
+  {
+    source: {
+      providerName: 'Persona',
+      shape: 'wide'
+    },
+    dimensions: {
+      width: 970,
+      height: 90,
+      minContainerWidth: 600,
+      minContainerHeight: 60,
+      maxContainerWidth: 1440,
+      maxContainerHeight: 110
+    }
+  },
+  {
+    source: {
+      providerName: 'Temple'
+    },
+    dimensions: {
+      width: 728,
+      height: 90,
+      minContainerWidth: 600,
+      minContainerHeight: 60,
+      maxContainerWidth: 1440,
+      maxContainerHeight: 110
+    }
+  },
+  {
+    source: {
+      providerName: 'HypeLab',
+      native: false,
+      size: 'high'
+    },
+    dimensions: {
+      width: 300,
+      height: 250,
+      minContainerWidth: 210,
+      minContainerHeight: 170,
+      maxContainerWidth: 400,
+      maxContainerHeight: 300
+    }
+  },
+  {
+    source: {
+      providerName: 'Persona',
+      shape: 'squarish'
+    },
+    dimensions: {
+      width: 300,
+      height: 250,
+      minContainerWidth: 210,
+      minContainerHeight: 170,
+      maxContainerWidth: 400,
+      maxContainerHeight: 300
+    }
+  },
+  {
+    source: {
+      providerName: 'HypeLab',
+      native: false,
+      size: 'small',
+      shouldNotUseStrictContainerLimits: true
+    },
+    dimensions: {
+      width: 320,
+      height: 50,
+      minContainerWidth: 230,
+      minContainerHeight: 32,
+      maxContainerWidth: 420,
+      maxContainerHeight: 110
+    }
+  },
+  {
+    source: {
+      providerName: 'Persona',
+      shape: 'regular',
+      shouldNotUseStrictContainerLimits: true
+    },
+    dimensions: {
+      width: 321,
+      height: 101,
+      minContainerWidth: 230,
+      minContainerHeight: 32,
+      maxContainerWidth: 420,
+      maxContainerHeight: 110
+    }
+  }
+];
+
+export const buildHypeLabNativeMeta = (containerWidth: number, containerHeight: number) => ({
+  source: {
+    providerName: 'HypeLab' as const,
+    native: true as const,
+    slug: AdsConfiguration.HYPELAB_NATIVE_PLACEMENT_SLUG
+  },
+  dimensions: {
+    width: Math.max(160, containerWidth),
+    height: Math.max(16, containerHeight),
+    minContainerWidth: 2,
+    minContainerHeight: 2,
+    maxContainerWidth: Infinity,
+    maxContainerHeight: Infinity
+  }
+});

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const TEMPLE_WALLET_AD_ATTRIBUTE_NAME = 'twa';
+export const AD_SEEN_THRESHOLD = 0.5;

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

@@ -0,0 +1,3 @@
+export { makeTKeyAdView } from './make-tkey-ad';
+export { makeHypelabAdView } from './make-hypelab-ad';
+export { makePersonaAdView } from './make-persona-ad';

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

@@ -0,0 +1,77 @@
+import { nanoid } from 'nanoid';
+
+import { AdsConfiguration } from 'src/ads-configuration';
+import { AdView } from 'src/types/ad-view';
+import { AdDimensions, HypeLabAdSources } from 'src/types/ads-meta';
+import { StringRecord } from 'src/utils';
+
+export const makeHypelabAdView = (
+  source: HypeLabAdSources,
+  dimensions: AdDimensions,
+  elementStyle: StringRecord
+): AdView => {
+  const { width, height } = dimensions;
+
+  const iframe = document.createElement('iframe');
+  iframe.id = nanoid();
+  iframe.src = getHypelabIframeUrl(source, window.location.href, width, height, iframe.id);
+  iframe.style.width = `${width}px`;
+  iframe.style.height = `${height}px`;
+  iframe.style.border = 'none';
+  for (const styleProp in elementStyle) {
+    iframe.style.setProperty(styleProp, elementStyle[styleProp]);
+  }
+
+  return { element: iframe };
+};
+
+/**
+ * Returns URL for Hypelab ad iframe
+ * @param placementType Placement type
+ * @param origin Full URL of the page
+ * @param width Frame width
+ * @param height Frame height
+ */
+const getHypelabIframeUrl = (
+  source: HypeLabAdSources,
+  origin: string,
+  width?: number,
+  height?: number,
+  id?: string
+) => {
+  let defaultWidth: number, defaultHeight: number, placementSlug: string;
+
+  if (source.native) {
+    placementSlug = AdsConfiguration.HYPELAB_NATIVE_PLACEMENT_SLUG;
+    defaultWidth = 360;
+    defaultHeight = 110;
+  } else
+    switch (source.size) {
+      case 'small':
+        defaultWidth = 320;
+        defaultHeight = 50;
+        placementSlug = AdsConfiguration.HYPELAB_SMALL_PLACEMENT_SLUG;
+        break;
+      case 'high':
+        defaultWidth = 300;
+        defaultHeight = 250;
+        placementSlug = AdsConfiguration.HYPELAB_HIGH_PLACEMENT_SLUG;
+        break;
+      case 'wide':
+        defaultWidth = 728;
+        defaultHeight = 90;
+        placementSlug = AdsConfiguration.HYPELAB_WIDE_PLACEMENT_SLUG;
+        break;
+    }
+
+  const url = new URL(AdsConfiguration.HYPELAB_ADS_WINDOW_URL);
+  url.searchParams.set('w', String(width ?? defaultWidth));
+  url.searchParams.set('h', String(height ?? defaultHeight));
+  url.searchParams.set('p', placementSlug);
+  url.searchParams.set('o', origin);
+  if (id) {
+    url.searchParams.set('id', id);
+  }
+
+  return url.toString();
+};

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

@@ -0,0 +1,28 @@
+import { nanoid } from 'nanoid';
+import browser from 'webextension-polyfill';
+
+import { AdView } from 'src/types/ad-view';
+import { AdDimensions, PersonaAdShape } from 'src/types/ads-meta';
+import { StringRecord } from 'src/utils';
+
+export const makePersonaAdView = (
+  shape: PersonaAdShape,
+  { width, height }: AdDimensions,
+  elementStyle: StringRecord
+): AdView => {
+  const id = nanoid();
+
+  const element = document.createElement('iframe');
+  element.src = browser.runtime.getURL(`iframes/persona-ad.html?id=${id}&shape=${shape}`);
+  element.id = id;
+
+  element.style.width = `${width}px`;
+  element.style.height = `${height}px`;
+  element.style.border = 'none';
+
+  for (const styleProp in elementStyle) {
+    element.style.setProperty(styleProp, elementStyle[styleProp]);
+  }
+
+  return { element };
+};

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

@@ -0,0 +1,37 @@
+import { nanoid } from 'nanoid';
+
+import { AdsConfiguration } from 'src/ads-configuration';
+import { AdView } from 'src/types/ad-view';
+import { StringRecord } from 'src/utils';
+
+export const makeTKeyAdView = (width: number, height: number, elementStyle: StringRecord): AdView => {
+  const element = document.createElement('div');
+  element.id = nanoid();
+  element.style.width = `${width}px`;
+  element.style.height = `${height}px`;
+  for (const styleProp in elementStyle) {
+    element.style.setProperty(styleProp, elementStyle[styleProp]);
+  }
+
+  const div = document.createElement('div');
+  div.style.width = `${width}px`;
+  div.style.height = `${height}px`;
+
+  element.appendChild(div);
+
+  const anchor = document.createElement('a');
+  anchor.href = AdsConfiguration.SWAP_TKEY_URL;
+  anchor.target = '_blank';
+  anchor.rel = 'noopener noreferrer';
+  anchor.style.width = '100%';
+  anchor.style.height = '100%';
+  div.appendChild(anchor);
+
+  const img = document.createElement('img');
+  img.src = AdsConfiguration.TKEY_INPAGE_AD_URL;
+  img.style.width = '100%';
+  img.style.height = '100%';
+  anchor.appendChild(img);
+
+  return { element };
+};

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

@@ -0,0 +1,16 @@
+import { AdAction, AdActionType } from 'src/types/ads-actions';
+
+import { processInsertAdAction } from './process-insert-ad-action';
+
+export const executeAdsActions = (adsActions: AdAction[]) =>
+  Promise.allSettled(
+    adsActions.map(async action => {
+      if (action.type === AdActionType.RemoveElement) {
+        action.element.remove();
+      } else if (action.type === AdActionType.HideElement) {
+        action.element.style.setProperty('display', 'none');
+      } else {
+        await processInsertAdAction(action, action.ad);
+      }
+    })
+  );