@temple-wallet/extension-ads 6.0.0 → 6.2.0

package/dist/types/ads-meta.d.ts

@@ -0,0 +1,46 @@
+interface AdSourceBase {
+    shouldNotUseStrictContainerLimits?: boolean;
+}
+interface HypeLabBannerAdSource extends AdSourceBase {
+    providerName: 'HypeLab';
+    native: false;
+    size: 'small' | 'high' | 'wide';
+}
+interface HypeLabNativeAdSource extends AdSourceBase {
+    providerName: 'HypeLab';
+    native: true;
+    slug: string;
+}
+/** Only covers TKEY ads for now */
+interface TempleAdSource extends AdSourceBase {
+    providerName: 'Temple';
+}
+/** See: https://pub.persona3.io/docs
+ * `regular` - 321x101
+ * `medium` - 600x160
+ * `wide` - 970x90
+ * `squarish` - 300x250
+ */
+export type PersonaAdShape = 'regular' | 'medium' | 'wide' | 'squarish';
+interface PersonaAdSource extends AdSourceBase {
+    providerName: 'Persona';
+    shape: PersonaAdShape;
+}
+export type HypeLabAdSources = HypeLabBannerAdSource | HypeLabNativeAdSource;
+type AdSource = HypeLabAdSources | TempleAdSource | PersonaAdSource;
+export interface AdDimensions {
+    width: number;
+    height: number;
+    minContainerWidth: number;
+    minContainerHeight: number;
+    maxContainerWidth: number;
+    maxContainerHeight: number;
+}
+export interface AdMetadata {
+    source: AdSource;
+    dimensions: {
+        width?: number;
+        height: number;
+    };
+}
+export {};

package/dist/types/ads-meta.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ads-meta.js.map

package/dist/types/ads-meta.js.map

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

package/dist/types/ads-provider.d.ts

@@ -0,0 +1,7 @@
+export declare enum AdsProviderTitle {
+    Optimal = "Optimal",
+    HypeLab = "HypeLab",
+    Persona = "Persona",
+    Temple = "Temple Wallet"
+}
+export type AdsProviderName = keyof typeof AdsProviderTitle;

package/dist/types/ads-provider.js

@@ -0,0 +1,8 @@
+export var AdsProviderTitle;
+(function (AdsProviderTitle) {
+    AdsProviderTitle["Optimal"] = "Optimal";
+    AdsProviderTitle["HypeLab"] = "HypeLab";
+    AdsProviderTitle["Persona"] = "Persona";
+    AdsProviderTitle["Temple"] = "Temple Wallet";
+})(AdsProviderTitle || (AdsProviderTitle = {}));
+//# sourceMappingURL=ads-provider.js.map

package/dist/types/ads-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ads-provider.js","sourceRoot":"","sources":["../../src/types/ads-provider.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;IACnB,4CAAwB,CAAA;AAC1B,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B"}

package/dist/types/ads-rules.d.ts

@@ -0,0 +1,17 @@
+import { RawAdPlacesRule, RawPermanentAdPlacesRule } from './temple-wallet-api';
+export interface AdPlacesRule extends Omit<RawAdPlacesRule, 'urlRegexes'> {
+    urlRegexes: RegExp[];
+}
+export interface PermanentAdPlacesRule extends Omit<RawPermanentAdPlacesRule, 'urlRegexes'> {
+    urlRegexes: RegExp[];
+    isNative: boolean;
+}
+export interface AdsRules {
+    adPlacesRules: Array<Omit<AdPlacesRule, 'urlRegexes'>>;
+    permanentAdPlacesRules: PermanentAdPlacesRule[];
+    providersSelectors: Array<{
+        selector: string;
+        parentDepth: number;
+    }>;
+    timestamp: number;
+}

package/dist/types/ads-rules.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ads-rules.js.map

package/dist/types/ads-rules.js.map

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

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

@@ -0,0 +1,61 @@
+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;
+}
+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;
+    stylesOverrides?: AdStylesOverrides[];
+    shouldHideOriginal?: boolean;
+}
+export interface RawAdProvidersRule {
+    urlRegexes: string[];
+    providers: string[];
+}
+export interface RawAllAdsRules {
+    adPlacesRulesForAllDomains: Record<string, RawAdPlacesRule[]>;
+    providersRulesForAllDomains: Record<string, RawAdProvidersRule[]>;
+    providersSelectors: Record<string, (string | {
+        selector: string;
+        parentDepth: number;
+    })[]>;
+    providersToReplaceAtAllSites: string[];
+    permanentAdPlacesRulesForAllDomains: Record<string, RawPermanentAdPlacesRule[]>;
+    permanentNativeAdPlacesRulesForAllDomains: Record<string, RawPermanentAdPlacesRule[]>;
+    adsReplaceUrlsBlacklist: string[];
+    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": "6.0.0",
+  "version": "6.2.0",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

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

@@ -64,7 +64,7 @@ const processSelectedElement = (
 
   const actionBaseCommonProps = {
     shouldUseDivWrapper,
-    divWrapperStyle
+    wrapperStyle: divWrapperStyle
   };
 
   let actionsBases: (InsertAdActionWithoutMeta | HideElementAction | RemoveElementAction)[];
@@ -108,7 +108,7 @@ const processSelectedElement = (
       insertionIndex: 0,
       stylesOverrides,
       isSiblingReplacement: true,
-      divWrapperStyle: { display: 'contents' }
+      wrapperStyle: { display: 'contents' }
     };
 
     actionsBases = Array.from(banner.children)
@@ -122,7 +122,7 @@ const processSelectedElement = (
       type: AdActionType.ReplaceAllChildren,
       parent: banner,
       stylesOverrides,
-      divWrapperStyle: { display: 'contents' }
+      wrapperStyle: { display: 'contents' }
     };
     actionsBases = [replaceAllChildrenActionBase];
   }

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;
   });