@temple-wallet/extension-ads 17.0.0-beta.1 → 18.0.0

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

@@ -14,6 +14,7 @@ import { AdActionType, InsertAdAction } from 'src/types/ads-actions';
 import { AdDimensions } from 'src/types/ads-meta';
 import { doAfterSuccessfulPing } from 'src/utils';
 
+import { ChildrenAddOrRemoveChanges } from './children-add-or-remove-changes';
 import { observeNodeMutations, subscribeToAdsStackIframeLoadIfNecessary, unobserveNodeMutations } from './observing';
 import { overrideElementStyles } from './override-element-styles';
 import { getAdThemingParams } from './theming-params';
@@ -46,6 +47,7 @@ const getWrapperDimensions = (action: InsertAdAction) => {
 
 const processInsertAdActionOnce = async (
   action: InsertAdAction,
+  childrenAddOrRemoveChanges: ChildrenAddOrRemoveChanges,
   wrapperElement: HTMLDivElement,
   insertionPoint: HTMLDivElement | HTMLTableCellElement,
   onAdsStackLoad: () => void,
@@ -94,15 +96,31 @@ const processInsertAdActionOnce = async (
   switch (action.type) {
     case AdActionType.ReplaceAllChildren:
       stylesOverridesCurrentElement = action.parent;
+      for (const child of action.parent.children) {
+        childrenAddOrRemoveChanges.beforeChildRemoved(child);
+      }
       action.parent.innerHTML = '';
       action.parent.appendChild(wrapperElement);
+      childrenAddOrRemoveChanges.onChildAdded(wrapperElement);
       break;
     case AdActionType.ReplaceElement:
       stylesOverridesCurrentElement = action.element.parentElement;
       action.element.replaceWith(wrapperElement);
       break;
     default:
-      const nextSibling = action.parent.children[action.insertionIndex];
+      let insertionIndex = action.insertionIndex;
+      childrenAddOrRemoveChanges.get(action.parent).forEach(change => {
+        if (change.index >= insertionIndex) {
+          return;
+        }
+
+        if (change.type === 'remove') {
+          insertionIndex--;
+        } else {
+          insertionIndex++;
+        }
+      });
+      const nextSibling = action.parent.children[insertionIndex];
       if (action.isSiblingReplacement) {
         wrapperElement.setAttribute(SIBLING_REPLACEMENT_ATTRIBUTE_NAME, 'true');
         const observer = new MutationObserver(mutations => {
@@ -111,6 +129,7 @@ const processInsertAdActionOnce = async (
           );
 
           if (hasRemoveSiblingMutation) {
+            childrenAddOrRemoveChanges.beforeChildRemoved(wrapperElement);
             wrapperElement.remove();
             observer.disconnect();
           }
@@ -119,6 +138,7 @@ const processInsertAdActionOnce = async (
       }
       stylesOverridesCurrentElement = action.parent;
       action.parent.insertBefore(wrapperElement, nextSibling);
+      childrenAddOrRemoveChanges.onChildAdded(wrapperElement);
       break;
   }
 
@@ -234,7 +254,10 @@ const hidingStylesOverrides = {
   'min-width': '0px'
 };
 
-export const processInsertAdAction = async (action: InsertAdAction) => {
+export const processInsertAdAction = async (
+  action: InsertAdAction,
+  childrenAddOrRemoveChanges: ChildrenAddOrRemoveChanges
+) => {
   const { wrapperStyle = {}, adsMetadata, wrapperType = 'div', colsAfter = 0, colsBefore = 0, colspan = 1 } = action;
   const isNativeAd = adsMetadata.every(adMetadata => typeof adMetadata === 'object');
 
@@ -274,6 +297,7 @@ export const processInsertAdAction = async (action: InsertAdAction) => {
 
   await processInsertAdActionOnce(
     action,
+    childrenAddOrRemoveChanges,
     wrapperElement,
     insertionPoint,
     () => {

package/src/referrals/common.ts

@@ -7,7 +7,6 @@ import { getCurrentPageDomain, ReferralTextIconRule, stripSubdomain } from './ut
 const TEMPLE_WALLET_ANCHOR_ATTRIBUTE = 'data-tw-referral';
 
 export interface AdsBrowserExtensionMessageTypeI {
-  FetchTakeAdsReferrals: string;
   ReferralClick: string;
 }
 
@@ -42,7 +41,7 @@ export function processAnchorElement(
   item: PreppedItem,
   textIconRules: ReferralTextIconRule[],
   AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI,
-  provider: 'TakeAds' | 'Temple',
+  provider: 'Temple',
   redirectUrl?: string
 ) {
   const { aElem, urlDomain, referralUrl, imageUrl } = item;

package/src/referrals/index.ts

@@ -1,7 +1,3 @@
-export { processTakeAdsAnchors } from './replace-takeads';
-
 export { processTempleAnchors } from './replace-temple';
 
-export { buildTakeadsClient } from './takeads';
-
 export { getCurrentPageDomain } from './utils';

package/src/transform-raw-rules.ts

@@ -107,7 +107,12 @@ const buildAdPlacesRules = (
       const ruleToComplementIndex = acc.findIndex(({ selector: candidateSelector, ...candidateRestProps }) => {
         const { cssString: _candidateCssString, ...restCandidateSelectorProps } = candidateSelector;
 
-        return isEqual(restSelectorProps, restCandidateSelectorProps) && isEqual(restProps, candidateRestProps);
+        return (
+          isEqual(restSelectorProps, restCandidateSelectorProps) &&
+          isEqual(restProps, candidateRestProps) &&
+          restSelectorProps.isMultiple &&
+          restCandidateSelectorProps.isMultiple
+        );
       });
       if (ruleToComplementIndex === -1) {
         acc.push({ selector, ...restProps });

package/src/referrals/replace-takeads.ts

@@ -1,52 +0,0 @@
-import browser from 'webextension-polyfill';
-
-import { IS_DEV } from 'src/utils';
-
-import { AdsBrowserExtensionMessageTypeI, getItemsToReplace, processAnchorElement } from './common';
-import type { TekeadsAffiliateResponse } from './takeads';
-import { ReferralTextIconRule } from './utils';
-
-export async function processTakeAdsAnchors(
-  supportedDomains: Set<string>,
-  textIconRules: ReferralTextIconRule[],
-  AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI,
-  redirectUrl?: string
-) {
-  const items = getItemsToReplace(supportedDomains);
-
-  if (!items.length) return void (IS_DEV && console.info('Nothing to replace'));
-
-  const links = items.map(l => l.iri);
-
-  // Not requesting directly in content script because of CORS.
-  const takeadsItems: TekeadsAffiliateResponse = await browser.runtime.sendMessage({
-    type: AdsBrowserExtensionMessageType.FetchTakeAdsReferrals,
-    links
-  });
-
-  if (!takeadsItems.data.length) return void (IS_DEV && console.info('No referrals received'));
-
-  IS_DEV && console.info('Replacing', takeadsItems.data.length, 'referralas');
-
-  for (const { iri, aElem, urlDomain } of items) {
-    const data = takeadsItems.data.find(item => item.iri === iri);
-    const referralUrl = data?.trackingLink;
-
-    if (!referralUrl) {
-      IS_DEV && console.warn('No affiliate link for', aElem);
-      continue;
-    }
-
-    const imageUrl = data.imageUrl;
-
-    processAnchorElement(
-      { iri, aElem, urlDomain, referralUrl, imageUrl },
-      textIconRules,
-      AdsBrowserExtensionMessageType,
-      'TakeAds',
-      redirectUrl
-    );
-  }
-
-  return;
-}

package/src/referrals/takeads.ts

@@ -1,44 +0,0 @@
-import axios, { AxiosInstance } from 'axios';
-import memoizee from 'memoizee';
-
-/**
- * API docs: https://docs.takeads.com
- */
-class TakeAdsClient {
-  private axios: AxiosInstance;
-
-  constructor(
-    private publicKey: string,
-    readonly apiUrl: string = 'https://api.takeads.com'
-  ) {
-    this.axios = axios.create({
-      baseURL: apiUrl,
-      headers: {
-        Authorization: `Bearer ${this.publicKey}`
-      },
-      adapter: 'fetch'
-    });
-  }
-
-  async affiliateLinks(websiteUrls: string[], subId?: string) {
-    const response = await this.axios.put<TekeadsAffiliateResponse>('/v1/product/monetize-api/v2/resolve', {
-      iris: websiteUrls,
-      subId,
-      withImages: true
-    });
-
-    return response.data;
-  }
-}
-
-export const buildTakeadsClient = memoizee((publicKey: string) => new TakeAdsClient(publicKey), { max: 2 });
-
-export interface TekeadsAffiliateResponse {
-  data: AffiliateLink[];
-}
-
-interface AffiliateLink {
-  iri: string;
-  trackingLink: string;
-  imageUrl: string | null;
-}