@temple-wallet/extension-ads 6.1.0 → 6.3.0

package/src/ads-actions/helpers.ts

@@ -1,9 +1,17 @@
 import { BANNER_ADS_META, buildHypeLabNativeMeta } from 'src/ads-meta';
-import { SIBLING_REPLACEMENT_ATTRIBUTE_NAME, TEMPLE_WALLET_AD_ATTRIBUTE_NAME } from 'src/constants';
+import {
+  SIBLING_REPLACEMENT_ATTRIBUTE_NAME,
+  TEMPLE_WALLET_AD_ATTRIBUTE_NAME,
+  TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME
+} from 'src/constants';
 import { AdType } from 'src/types/ads-actions';
 import { AdMetadata } from 'src/types/ads-meta';
 
-export const ourAdQuerySelector = `iframe[${TEMPLE_WALLET_AD_ATTRIBUTE_NAME}], div[${TEMPLE_WALLET_AD_ATTRIBUTE_NAME}]`;
+export const PX_VALUE_REGEX = /[\d.]+(px)?$/;
+
+export const ourAdQuerySelector = `[${TEMPLE_WALLET_AD_ATTRIBUTE_NAME}]`;
+export const ourBannerAdQuerySelector = `[${TEMPLE_WALLET_AD_ATTRIBUTE_NAME}]:not([${TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME}])`;
+export const ourNativeAdQuerySelector = `[${TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME}]`;
 
 export const elementIsOurAd = (element: Element) => Boolean(element.closest(ourAdQuerySelector));
 
@@ -21,7 +29,7 @@ export const getFinalSize = (element: Element) => {
     const rawDimensionFromAttribute = element.getAttribute(dimension);
     const rawDimension = rawDimensionFromAttribute || rawDimensionFromStyle;
 
-    if (/\d+px/.test(rawDimension)) {
+    if (PX_VALUE_REGEX.test(rawDimension)) {
       size[dimension] = Number(rawDimension.replace('px', ''));
     }
     if (dimension === 'width' && x < 0) {

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

@@ -17,7 +17,8 @@ import {
   applyQuerySelector,
   elementIsOurAd,
   getParentOfDepth,
-  ourAdQuerySelector,
+  ourBannerAdQuerySelector,
+  ourNativeAdQuerySelector,
   prevBannerSiblingIsReplacement
 } from './helpers';
 
@@ -56,6 +57,7 @@ const processPermanentAdsParent = (
   const {
     shouldUseDivWrapper,
     divWrapperStyle: originalDivWrapperStyle,
+    wrapperStyle: originalWrapperStyle,
     elementStyle,
     adSelector,
     insertionIndex,
@@ -65,9 +67,16 @@ const processPermanentAdsParent = (
     elementToMeasureSelector,
     stylesOverrides,
     shouldHideOriginal = false,
-    isNative
+    isNative,
+    urlRegexes,
+    parentSelector,
+    ...restProps
   } = rule;
-  const divWrapperStyle = shouldUseDivWrapper ? originalDivWrapperStyle : { display: 'contents' };
+  const wrapperStyle = restProps.wrapperType
+    ? originalWrapperStyle
+    : shouldUseDivWrapper
+      ? originalDivWrapperStyle
+      : { display: 'contents' };
 
   const {
     isMultiple: shouldSearchForManyBannersInParent,
@@ -75,7 +84,11 @@ const processPermanentAdsParent = (
     parentDepth: bannerParentDepth
   } = adSelector;
 
-  const ourAds = applyQuerySelector(ourAdQuerySelector, true, parent).reduce<Element[]>((acc, element) => {
+  const ourAds = applyQuerySelector(
+    isNative ? ourNativeAdQuerySelector : ourBannerAdQuerySelector,
+    true,
+    parent
+  ).reduce<Element[]>((acc, element) => {
     if (acc.some(prevElement => prevElement.contains(element) || element.contains(prevElement))) {
       return acc;
     }
@@ -107,9 +120,10 @@ const processPermanentAdsParent = (
       const replaceActionBase: OmitAdInAction<ReplaceElementWithAdAction> = {
         type: AdActionType.ReplaceElement,
         element: banner,
-        divWrapperStyle,
+        wrapperStyle,
         elementStyle,
-        stylesOverrides
+        stylesOverrides,
+        ...restProps
       };
       const hideActionBase: HideElementAction = {
         type: AdActionType.HideElement,
@@ -117,12 +131,13 @@ const processPermanentAdsParent = (
       };
       const insertActionBase: OmitAdInAction<SimpleInsertAdAction> = {
         type: AdActionType.SimpleInsertAd,
-        divWrapperStyle,
+        wrapperStyle,
         elementStyle,
         parent: banner.parentElement!,
         insertionIndex: Array.from(banner.parentElement!.children).indexOf(banner),
         isSiblingReplacement: true,
-        stylesOverrides
+        stylesOverrides,
+        ...restProps
       };
 
       let actionsToInsert: (InsertAdActionWithoutMeta | HideElementAction | RemoveElementAction)[] = [];
@@ -179,12 +194,13 @@ const processPermanentAdsParent = (
   if (normalizedInsertionIndex !== -1) {
     const actionBase: OmitAdInAction<SimpleInsertAdAction> = {
       type: AdActionType.SimpleInsertAd,
-      divWrapperStyle,
+      wrapperStyle,
       elementStyle,
       parent: insertionParentElement,
       insertionIndex: normalizedInsertionIndex,
       isSiblingReplacement: false,
-      stylesOverrides
+      stylesOverrides,
+      ...restProps
     };
 
     addActionsIfAdResolutionAvailable(

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

@@ -16,7 +16,8 @@ import {
   prevBannerSiblingIsReplacement,
   getFinalSize,
   ourAdQuerySelector,
-  getParentOfDepth
+  getParentOfDepth,
+  PX_VALUE_REGEX
 } from './helpers';
 
 const styleToAdjustProps = [
@@ -69,8 +70,9 @@ export const processProvidersAds = async (
           return action.element.parentElement?.contains(newBanner) || newBanner.contains(action.element);
         });
         const bannerIsHiddenByParent = parentStyles?.display === 'none' || parentStyles?.visibility === 'hidden';
+        const hasAnchorParent = parentElementIndex >= 0 && acc[parentElementIndex] instanceof HTMLAnchorElement;
 
-        if (bannerIsTouchedByOtherActions || width === 0 || height === 0 || bannerIsHiddenByParent) {
+        if (bannerIsTouchedByOtherActions || width === 0 || height === 0 || bannerIsHiddenByParent || hasAnchorParent) {
           return acc;
         }
 
@@ -90,10 +92,13 @@ export const processProvidersAds = async (
       await delay(0);
 
       const parent = banner.parentElement;
+      const { width: bannerStyleWidth, height: bannerStyleHeight } = window.getComputedStyle(banner);
       const elementToMeasure =
-        parent?.closest<HTMLElement>('div, article, aside, footer, header') ??
-        (parent?.tagName.toLowerCase() === 'body' ? undefined : parent) ??
-        banner;
+        PX_VALUE_REGEX.test(bannerStyleWidth) && PX_VALUE_REGEX.test(bannerStyleHeight)
+          ? banner
+          : parent?.closest<HTMLElement>('div, article, aside, footer, header') ??
+            (parent?.tagName.toLowerCase() === 'body' ? undefined : parent) ??
+            banner;
 
       if (
         !elementIsOurAd(banner) &&
@@ -120,7 +125,7 @@ export const processProvidersAds = async (
 
         const bannerStyle = window.getComputedStyle(banner as HTMLElement);
 
-        const divWrapperStyle = {
+        const wrapperStyle = {
           ...Object.fromEntries(styleToAdjustProps.map(propName => [propName, bannerStyle.getPropertyValue(propName)])),
           ...bannerStyleFromAttribute
         };
@@ -130,7 +135,7 @@ export const processProvidersAds = async (
         };
         const insertAdAction: OmitAdInAction<SimpleInsertAdAction> = {
           type: AdActionType.SimpleInsertAd,
-          divWrapperStyle,
+          wrapperStyle,
           parent: banner.parentElement ?? document.body,
           insertionIndex: Array.from(banner.parentElement?.children ?? []).indexOf(banner),
           isSiblingReplacement: true

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

@@ -48,7 +48,8 @@ const processSelectedElement = (
   const {
     selector: { shouldUseDivWrapper, parentDepth, divWrapperStyle },
     stylesOverrides,
-    shouldHideOriginal
+    shouldHideOriginal,
+    isNative = false
   } = rule;
 
   const banner = getParentOfDepth(selectedElement, parentDepth);
@@ -64,7 +65,7 @@ const processSelectedElement = (
 
   const actionBaseCommonProps = {
     shouldUseDivWrapper,
-    divWrapperStyle
+    wrapperStyle: divWrapperStyle
   };
 
   let actionsBases: (InsertAdActionWithoutMeta | HideElementAction | RemoveElementAction)[];
@@ -108,7 +109,7 @@ const processSelectedElement = (
       insertionIndex: 0,
       stylesOverrides,
       isSiblingReplacement: true,
-      divWrapperStyle: { display: 'contents' }
+      wrapperStyle: { display: 'contents' }
     };
 
     actionsBases = Array.from(banner.children)
@@ -122,12 +123,12 @@ const processSelectedElement = (
       type: AdActionType.ReplaceAllChildren,
       parent: banner,
       stylesOverrides,
-      divWrapperStyle: { display: 'contents' }
+      wrapperStyle: { display: 'contents' }
     };
     actionsBases = [replaceAllChildrenActionBase];
   }
 
   if (actionsBases.length > 0) {
-    addActionsIfAdResolutionAvailable(banner, AdType.SlotReplacement, false, ...actionsBases);
+    addActionsIfAdResolutionAvailable(banner, AdType.SlotReplacement, isNative, ...actionsBases);
   }
 };

package/src/constants.ts

@@ -1,7 +1,9 @@
 export const TEMPLE_WALLET_AD_ATTRIBUTE_NAME = 'twa';
+export const TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME = 'twa-native';
 export const SIBLING_REPLACEMENT_ATTRIBUTE_NAME = 'twa-sibling-replacement';
 export const AD_SEEN_THRESHOLD = 0.5;
 export const AD_RENDER_START_MESSAGE_TYPE = 'adRenderStart';
 export const AD_RESIZE_MESSAGE_TYPE = 'resize';
 export const AD_READY_MESSAGE_TYPE = 'ready';
 export const AD_ERROR_MESSAGE_TYPE = 'error';
+export const AD_VARIANT_READY_TIMEOUT = 10_000;

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

@@ -9,7 +9,7 @@ export const makeHypelabAdView = (source: HypeLabAdSources, dimensions: AdDimens
 
   const iframe = document.createElement('iframe');
   iframe.src = getHypelabIframeUrl(source, origin, width, height, iframe.id);
-  iframe.style.width = `${width}px`;
+  iframe.style.width = source.native ? '100%' : `${width}px`;
   iframe.style.height = `${height}px`;
   iframe.style.border = 'none';
 
@@ -56,7 +56,11 @@ const getHypelabIframeUrl = (
     }
 
   const url = new URL(AdsConfiguration.HYPELAB_ADS_WINDOW_URL);
-  url.searchParams.set('w', String(width ?? defaultWidth));
+  if (source.native) {
+    url.searchParams.set('vh', String(height ?? defaultHeight));
+  } else {
+    url.searchParams.set('w', String(width ?? defaultWidth));
+  }
   url.searchParams.set('h', String(height ?? defaultHeight));
   url.searchParams.set('p', placementSlug);
   url.searchParams.set('o', encryptWithAES(origin));

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

@@ -15,8 +15,6 @@ const loadingAdsIds = new Set();
 const loadedAdsIds = new Set();
 const alreadySentAnalyticsAdsIds = new Set();
 
-const IFRAME_READY_TIMEOUT = 30_000;
-
 export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFrameElement) => {
   const adId = element.id;
 
@@ -27,11 +25,6 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
   loadingAdsIds.add(adId);
 
   return new Promise<AdMetadata['source']['providerName']>((resolve, reject) => {
-    setTimeout(() => {
-      window.removeEventListener('message', messageListener);
-      reject(new Error(`Timeout exceeded for ${adId}`));
-    }, IFRAME_READY_TIMEOUT);
-
     const messageListener = (event: MessageEvent<any>) => {
       if (event.source !== element.contentWindow) return;
 
@@ -40,6 +33,9 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
 
         if (data.id !== adId) return;
 
+        const horizontalBordersWidth = element.offsetWidth - element.clientWidth;
+        const verticalBordersWidth = element.offsetHeight - element.clientHeight;
+
         switch (data.type) {
           case AD_READY_MESSAGE_TYPE:
             resolve(data.adMetadata.source.providerName);
@@ -53,14 +49,18 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
             const { dimensions }: AdMetadata = data.adMetadata;
             const { width, height } = dimensions;
             if (width > 0 && height > 0) {
-              element.style.width = `${dimensions.width}px`;
+              if (!element.style.width?.endsWith('%')) {
+                element.style.width = `${dimensions.width}px`;
+              }
               element.style.height = `${dimensions.height}px`;
             }
             break;
           case AD_RESIZE_MESSAGE_TYPE:
             const { width: newWidth, height: newHeight } = data;
-            element.style.width = `${newWidth}px`;
-            element.style.height = `${newHeight}px`;
+            if (!element.style.width?.endsWith('%')) {
+              element.style.width = `${newWidth + horizontalBordersWidth}px`;
+            }
+            element.style.height = `${newHeight + verticalBordersWidth}px`;
         }
       } catch (error) {
         console.error('Observing error:', error);
@@ -81,7 +81,11 @@ export const subscribeToAdsStackIframeLoadIfNecessary = async (element: HTMLIFra
         observeIntersection(element, providerName);
       }
     })
-    .catch(console.error)
+    .catch(e => {
+      console.error(e);
+
+      throw e;
+    })
     .finally(() => void loadingAdsIds.delete(adId));
 };
 

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

@@ -1,8 +1,13 @@
 import { nanoid } from 'nanoid';
 
+import { PX_VALUE_REGEX } from 'src/ads-actions/helpers';
 import { AdsConfiguration } from 'src/ads-configuration';
 import { BANNER_ADS_META } from 'src/ads-meta';
-import { SIBLING_REPLACEMENT_ATTRIBUTE_NAME, TEMPLE_WALLET_AD_ATTRIBUTE_NAME } from 'src/constants';
+import {
+  SIBLING_REPLACEMENT_ATTRIBUTE_NAME,
+  TEMPLE_WALLET_AD_ATTRIBUTE_NAME,
+  TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME
+} from 'src/constants';
 import { AdActionType, InsertAdAction } from 'src/types/ads-actions';
 import { AdDimensions } from 'src/types/ads-meta';
 
@@ -13,7 +18,7 @@ const adjustToAd = (wrapperElement: HTMLDivElement, adDimensions: AdDimensions)
   const predefinedStylesKeyToOverride = ['width', 'height'] as const;
   predefinedStylesKeyToOverride.forEach(dimensionName => {
     const predefinedStyleValue = wrapperElement.style[dimensionName] ?? '';
-    if (/^\d+(px)?$/.test(predefinedStyleValue)) {
+    if (PX_VALUE_REGEX.test(predefinedStyleValue)) {
       const predefinedSize = parseInt(predefinedStyleValue, 10);
       if (predefinedSize < adDimensions[dimensionName]) {
         wrapperElement.style.removeProperty(dimensionName);
@@ -22,8 +27,20 @@ const adjustToAd = (wrapperElement: HTMLDivElement, adDimensions: AdDimensions)
   });
 };
 
-const processInsertAdActionOnce = async (action: InsertAdAction, wrapperElement: HTMLDivElement) => {
-  const { elementStyle = {}, stylesOverrides = [] } = action;
+const sumPxValues = (values: string[]) =>
+  values.reduce((acc, value) => {
+    const parsedValue = parseInt(value, 10);
+
+    return isNaN(parsedValue) && PX_VALUE_REGEX.test(value) ? acc : acc + parsedValue;
+  }, 0);
+
+const processInsertAdActionOnce = async (
+  action: InsertAdAction,
+  wrapperElement: HTMLDivElement,
+  insertionPoint: HTMLDivElement | HTMLTableCellElement,
+  onAdsStackError: (error: Error) => void
+) => {
+  const { elementStyle = {}, stylesOverrides = [], adsMetadata, wrapperType } = action;
 
   stylesOverrides.sort((a, b) => a.parentDepth - b.parentDepth);
 
@@ -36,7 +53,7 @@ const processInsertAdActionOnce = async (action: InsertAdAction, wrapperElement:
   const firstAdMetadataOrId = action.adsMetadata[0];
   const { dimensions } =
     typeof firstAdMetadataOrId === 'number' ? BANNER_ADS_META[firstAdMetadataOrId] : firstAdMetadataOrId;
-  adElement.style.width = `${dimensions.width}px`;
+  adElement.style.width = wrapperType === 'tbody' ? '100%' : `${dimensions.width}px`;
   adElement.style.height = `${dimensions.height}px`;
   adElement.style.border = 'none';
   for (const styleProp in elementStyle) {
@@ -45,7 +62,7 @@ const processInsertAdActionOnce = async (action: InsertAdAction, wrapperElement:
   adElement.setAttribute(TEMPLE_WALLET_AD_ATTRIBUTE_NAME, 'true');
 
   adjustToAd(wrapperElement, dimensions);
-  wrapperElement.appendChild(adElement);
+  insertionPoint.appendChild(adElement);
 
   switch (action.type) {
     case AdActionType.ReplaceAllChildren:
@@ -66,7 +83,36 @@ const processInsertAdActionOnce = async (action: InsertAdAction, wrapperElement:
       break;
   }
 
-  subscribeToAdsStackIframeLoadIfNecessary(adElement);
+  if (wrapperType !== 'tbody') {
+    const {
+      borderLeftWidth: adElementBLWidth,
+      borderRightWidth: adElementBRWidth,
+      borderTopWidth: adElementBTWidth,
+      borderBottomWidth: adElementBBWidth
+    } = window.getComputedStyle(adElement);
+    const {
+      borderLeftWidth: wrapperElementBLWidth,
+      borderRightWidth: wrapperElementBRWidth,
+      borderTopWidth: wrapperElementBTWidth,
+      borderBottomWidth: wrapperElementBBWidth
+    } = window.getComputedStyle(wrapperElement);
+    const horizontalBordersWidth = sumPxValues([
+      adElementBLWidth,
+      adElementBRWidth,
+      wrapperElementBLWidth,
+      wrapperElementBRWidth
+    ]);
+    const verticalBordersWidth = sumPxValues([
+      adElementBTWidth,
+      adElementBBWidth,
+      wrapperElementBTWidth,
+      wrapperElementBBWidth
+    ]);
+    adElement.style.width = `${dimensions.width - horizontalBordersWidth}px`;
+    adElement.style.height = `${dimensions.height - verticalBordersWidth}px`;
+  }
+
+  subscribeToAdsStackIframeLoadIfNecessary(adElement).catch(onAdsStackError);
 
   let currentParentDepth = 0;
   stylesOverrides.forEach(({ parentDepth, style }) => {
@@ -81,20 +127,51 @@ const processInsertAdActionOnce = async (action: InsertAdAction, wrapperElement:
 };
 
 export const processInsertAdAction = async (action: InsertAdAction) => {
-  const { divWrapperStyle = {} } = action;
-
-  const wrapperElement = document.createElement('div');
+  const { wrapperStyle = {}, adsMetadata, wrapperType = 'div', colsAfter = 0, colsBefore = 0, colspan = 1 } = action;
+  const isNativeAd = adsMetadata.every(adMetadata => typeof adMetadata === 'object');
+
+  let wrapperElement: HTMLDivElement | HTMLTableSectionElement;
+  let insertionPoint: HTMLDivElement | HTMLTableCellElement;
+  if (wrapperType === 'div') {
+    wrapperElement = document.createElement('div');
+    insertionPoint = wrapperElement;
+  } else {
+    wrapperElement = document.createElement('tbody');
+    const row = document.createElement('tr');
+    wrapperElement.appendChild(row);
+    for (let i = 0; i < colsBefore; i++) {
+      row.appendChild(document.createElement('td'));
+    }
+    const cell = document.createElement('td');
+    cell.colSpan = colspan;
+    row.appendChild(cell);
+    insertionPoint = cell;
+    for (let i = 0; i < colsAfter; i++) {
+      row.appendChild(document.createElement('td'));
+    }
+  }
   wrapperElement.setAttribute(TEMPLE_WALLET_AD_ATTRIBUTE_NAME, 'true');
+  if (isNativeAd) {
+    wrapperElement.setAttribute(TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME, 'true');
+  }
 
-  overrideElementStyles(wrapperElement, divWrapperStyle);
-
-  await processInsertAdActionOnce(action, wrapperElement).catch(error => {
-    console.error('Inserting an ad attempt error:', error);
+  overrideElementStyles(wrapperElement, wrapperStyle);
 
+  const hideFailedAd = () => {
     const emptyAdElement = document.createElement('div');
     emptyAdElement.setAttribute(TEMPLE_WALLET_AD_ATTRIBUTE_NAME, 'true');
+    if (isNativeAd) {
+      emptyAdElement.setAttribute(TEMPLE_WALLET_NATIVE_AD_ATTRIBUTE_NAME, 'true');
+    }
     emptyAdElement.style.display = 'none';
     wrapperElement.replaceWith(emptyAdElement);
+  };
+  await processInsertAdActionOnce(action, wrapperElement, insertionPoint, error => {
+    console.error('Failed to render ads', error);
+    hideFailedAd();
+  }).catch(error => {
+    console.error('Inserting an ad attempt error:', error);
+    hideFailedAd();
 
     throw error;
   });

package/src/render-ads-stack.ts

@@ -3,14 +3,13 @@ import {
   AD_ERROR_MESSAGE_TYPE,
   AD_READY_MESSAGE_TYPE,
   AD_RENDER_START_MESSAGE_TYPE,
-  AD_RESIZE_MESSAGE_TYPE
+  AD_RESIZE_MESSAGE_TYPE,
+  AD_VARIANT_READY_TIMEOUT
 } from './constants';
 import { makeHypelabAdView, makePersonaAdView, makeTKeyAdView } from './execute-ads-actions/ads-views';
 import { AdView } from './types/ad-view';
 import { AdMetadata } from './types/ads-meta';
 
-const IFRAME_READY_TIMEOUT = 30_000;
-
 const broadcastMessage = (content: unknown) => window.parent.postMessage(JSON.stringify(content), '*');
 
 /**
@@ -58,10 +57,10 @@ export const renderAdsStack = async (
 
   if (element instanceof HTMLIFrameElement) {
     return new Promise<void>((resolve, reject) => {
-      setTimeout(() => {
+      const responseTimeout = setTimeout(() => {
         window.removeEventListener('message', messageListener);
         reject(new Error(`Timeout exceeded for ${adId}, ad source: ${JSON.stringify(source)}`));
-      }, IFRAME_READY_TIMEOUT);
+      }, AD_VARIANT_READY_TIMEOUT);
 
       let wasReady = false;
       const messageListener = (event: MessageEvent<any>) => {
@@ -77,17 +76,21 @@ export const renderAdsStack = async (
               if (!wasReady) {
                 wasReady = true;
                 broadcastMessage({ id: adId, type: AD_READY_MESSAGE_TYPE, adMetadata });
+                clearTimeout(responseTimeout);
                 resolve();
               }
               break;
             case AD_ERROR_MESSAGE_TYPE:
               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) {
-                element.style.width = `${width}px`;
+                if (!element.style.width?.endsWith('%')) {
+                  element.style.width = `${width}px`;
+                }
                 element.style.height = `${height}px`;
                 broadcastMessage({ ...data, id: adId });
               }

package/src/types/ads-actions.ts

@@ -1,7 +1,7 @@
 import { StringRecord } from 'src/utils';
 
 import { AdMetadata } from './ads-meta';
-import type { AdStylesOverrides } from './temple-wallet-api';
+import type { AdStylesOverrides, RawPermanentAdPlacesRule } from './temple-wallet-api';
 
 export enum AdActionType {
   ReplaceAllChildren = 'replace-all-children',
@@ -21,12 +21,12 @@ interface AdActionBase {
   type: AdActionType;
 }
 
-interface InsertAdActionProps {
+interface InsertAdActionProps
+  extends Pick<RawPermanentAdPlacesRule, 'wrapperStyle' | 'wrapperType' | 'colsAfter' | 'colsBefore' | 'colspan'> {
   /** A value of 'number' type stands for the value with respective index in `BANNER_ADS_META`. It is done to shorten
    * ads stack Iframe URL search parameters.
    */
   adsMetadata: (number | AdMetadata)[];
-  divWrapperStyle?: StringRecord<string>;
   elementStyle?: StringRecord<string>;
   stylesOverrides?: AdStylesOverrides[];
 }

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

@@ -14,6 +14,7 @@ export interface RawAdPlacesRule {
   };
   stylesOverrides?: AdStylesOverrides[];
   shouldHideOriginal?: boolean;
+  isNative?: boolean;
 }
 
 export interface RawPermanentAdPlacesRule {
@@ -32,8 +33,13 @@ export interface RawPermanentAdPlacesRule {
   insertBeforeSelector?: string;
   insertAfterSelector?: string;
   insertionsCount?: number;
-  shouldUseDivWrapper: boolean;
+  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;
   stylesOverrides?: AdStylesOverrides[];