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

package/dist/types/temple-wallet-api.d.ts

@@ -0,0 +1,78 @@
+export interface AdStylesOverrides {
+    parentDepth: number;
+    style: Record<string, string>;
+}
+export interface RawAdPlacesRule {
+    urlRegexes: string[];
+    selector: {
+        isMultiple: boolean;
+        cssString: string;
+        parentDepth: number;
+        shouldUseDivWrapper: boolean;
+        divWrapperStyle?: Record<string, string>;
+    };
+    stylesOverrides?: AdStylesOverrides[];
+    shouldHideOriginal?: boolean;
+    isNative?: boolean;
+}
+export type ElementsToMeasure = Record<'width' | 'height', string>;
+export interface RawPermanentAdPlacesRule {
+    urlRegexes: string[];
+    adSelector: {
+        isMultiple: boolean;
+        cssString: string;
+        parentDepth: number;
+    };
+    parentSelector: {
+        isMultiple: boolean;
+        cssString: string;
+        parentDepth: number;
+    };
+    insertionIndex?: number;
+    insertBeforeSelector?: string;
+    insertAfterSelector?: string;
+    insertionsCount?: number;
+    shouldUseDivWrapper?: boolean;
+    wrapperType?: 'div' | 'tbody';
+    colsBefore?: number;
+    colspan?: number;
+    colsAfter?: number;
+    divWrapperStyle?: Record<string, string>;
+    wrapperStyle?: Record<string, string>;
+    elementStyle?: Record<string, string>;
+    elementToMeasureSelector?: string;
+    elementsToMeasureSelectors?: ElementsToMeasure;
+    stylesOverrides?: AdStylesOverrides[];
+    shouldHideOriginal?: boolean;
+    displayWidth?: string;
+}
+export interface RawAdProvidersRule {
+    urlRegexes: string[];
+    providers: string[];
+}
+export interface RawElementsToHideOrRemoveEntry {
+    cssString: string;
+    parentDepth: number;
+    isMultiple: boolean;
+    urlRegexes: string[];
+    shouldHide: boolean;
+}
+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;
+    })[]>;
+    providersToReplaceAtAllSites: string[];
+    permanentAdPlacesRulesForAllDomains: Record<string, RawPermanentAdPlacesRule[]>;
+    permanentNativeAdPlacesRulesForAllDomains: Record<string, RawPermanentAdPlacesRule[]>;
+    adsReplaceUrlsBlacklist: string[];
+    elementsToHideOrRemoveRules: Record<string, RawElementsToHideOrRemoveEntry[]>;
+    timestamp: number;
+}

package/dist/types/temple-wallet-api.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=temple-wallet-api.js.map

package/dist/types/temple-wallet-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temple-wallet-api.js","sourceRoot":"","sources":["../../src/types/temple-wallet-api.ts"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+/** From lodash */
+type Truthy<T> = T extends null | undefined | void | false | '' | 0 | 0n ? never : T;
+export declare const isTruthy: <T>(value: T) => value is Truthy<T>;
+export declare const delay: (ms?: number) => Promise<unknown>;
+export type StringRecord<T = string> = Record<string, T>;
+export {};

package/dist/utils.js

@@ -0,0 +1,4 @@
+export const isTruthy = (value) => Boolean(value);
+const DEFAULT_DELAY = 300;
+export const delay = (ms = DEFAULT_DELAY) => new Promise(res => setTimeout(res, ms));
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,KAAQ,EAAsB,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAE5E,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@temple-wallet/extension-ads",
-  "version": "8.1.0-dev.1",
+  "version": "8.1.0-dev.3",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/ads-actions/helpers.ts

@@ -102,6 +102,19 @@ export const pickAdsToDisplay = (
     return AdsConfiguration.buildNativeAdsMeta(containerWidth, containerHeight);
   }
 
+  const fallbackAdsFullMeta =
+    adType === AdType.Permanent || adType === AdType.SlotReplacement
+      ? AdsConfiguration.bannerAdsMeta.filter(({ source }) => source.shouldNotUseStrictContainerLimits)
+      : [];
+  const containerWithFallbackWidth = Math.max(
+    containerWidth,
+    ...fallbackAdsFullMeta.map(({ dimensions }) => dimensions.width)
+  );
+  const containerWithFallbackHeight = Math.max(
+    containerHeight,
+    ...fallbackAdsFullMeta.map(({ dimensions }) => dimensions.height)
+  );
+
   return AdsConfiguration.bannerAdsMeta.reduce<number[]>((acc, { dimensions, source }, i) => {
     const { shouldNotUseStrictContainerLimits = false, categories = [CRYPTO_CATEGORY_NAME] } = source;
 
@@ -116,12 +129,14 @@ export const pickAdsToDisplay = (
       case AdType.Permanent:
         matches =
           shouldNotUseStrictContainerLimits ||
-          (containerWidth >= width && (containerHeight >= minContainerHeight || containerHeight < 2));
+          (containerWithFallbackWidth >= width &&
+            (containerWithFallbackHeight >= minContainerHeight || containerWithFallbackHeight < 2));
         break;
       case AdType.SlotReplacement:
         matches =
           shouldNotUseStrictContainerLimits ||
-          (containerWidth >= minContainerWidth && (containerHeight >= minContainerHeight || containerHeight < 2));
+          (containerWithFallbackWidth >= minContainerWidth &&
+            (containerWithFallbackHeight >= minContainerHeight || containerWithFallbackHeight < 2));
         break;
       default:
         matches =

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

@@ -26,6 +26,7 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
   loadingAdsIds.add(adId);
 
   return new Promise<AdMetadata['source']['providerName']>((resolve, reject) => {
+    let adIsNative = false;
     const messageListener = (event: MessageEvent<any>) => {
       if (event.source !== element.contentWindow) return;
 
@@ -48,6 +49,7 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
             break;
           case AD_RENDER_START_MESSAGE_TYPE:
             const { dimensions, source }: AdMetadata = data.adMetadata;
+            adIsNative = source.native ?? false;
             const { width, height } = dimensions;
             if (width > 0 && height > 0) {
               if (source.native) {
@@ -61,7 +63,7 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
           case AD_RESIZE_MESSAGE_TYPE:
             const { width: newWidth, height: newHeight } = data;
 
-            if (element.style.width?.endsWith('%')) {
+            if (adIsNative) {
               element.style.height = `${newHeight + verticalBordersWidth}px`;
             } else {
               extendOrKeepDimension(element, 'width', newWidth + horizontalBordersWidth);

package/src/render-ads-stack.ts

@@ -58,9 +58,17 @@ export const renderAdsStack = async (
   else templeLabelElement.removeAttribute('active');
 
   const updateBackground = (creativeSet: CreativeSet = {}) => {
+    const prevBackgroundElement = document.getElementById(BACKGROUND_ELEMENT_ID);
+    if (source.native && prevBackgroundElement) {
+      rootElement.removeChild(prevBackgroundElement);
+    }
+
+    if (source.native) {
+      return;
+    }
+
     try {
       const { image, video } = creativeSet;
-      const prevBackgroundElement = document.getElementById(BACKGROUND_ELEMENT_ID);
       let backgroundElement: HTMLImageElement | HTMLVideoElement | undefined;
       if (image) {
         backgroundElement = document.createElement('img');

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

@@ -1,24 +0,0 @@
-export const stripDimentionsLimits = (wrapperElement: HTMLDivElement, width: number, height: number) => {
-  const predefinedStyles = wrapperElement.style;
-  // If needed in future, try `getComputedStyle(wrapperElement)` - though would have to not remove but override
-
-  stripOneDimensionLimit(predefinedStyles, width, ['width']);
-  stripOneDimensionLimit(predefinedStyles, height, ['height', 'maxHeight']);
-};
-
-const stripOneDimensionLimit = (
-  predefinedStyles: CSSStyleDeclaration,
-  value: number,
-  dimensionNames: ('width' | 'height' | 'maxWidth' | 'maxHeight')[]
-) => {
-  for (const dimensionName of dimensionNames) {
-    const predefinedStyleValue = predefinedStyles[dimensionName] ?? '';
-
-    if (/^\d+(px)?$/.test(predefinedStyleValue)) {
-      const predefinedSize = parseInt(predefinedStyleValue, 10);
-      if (predefinedSize < value) {
-        predefinedStyles.removeProperty(dimensionName);
-      }
-    }
-  }
-};