@temple-wallet/extension-ads 6.0.0 → 6.2.0

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), '*');
 
 /**
@@ -35,25 +34,33 @@ export const renderAdsStack = async (
 
   const { source, dimensions } = adMetadata;
   let adView: AdView;
+  let withTempleLabel = true;
   switch (source.providerName) {
     case 'Temple':
       adView = makeTKeyAdView(dimensions.width, dimensions.height);
       break;
     case 'HypeLab':
       adView = makeHypelabAdView(source, dimensions, origin);
+      if (source.native) withTempleLabel = false;
       break;
     default:
       adView = makePersonaAdView(adId, source.shape, dimensions);
   }
+
   const { element } = adView;
-  document.body.replaceChildren(element);
+  const rootElement = document.getElementById('root')!;
+  const templeLabelElement = document.getElementById('temple-label')!;
+  rootElement.replaceChildren(element);
+
+  if (withTempleLabel) templeLabelElement.setAttribute('active', '');
+  else templeLabelElement.removeAttribute('active');
 
   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>) => {
@@ -69,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

@@ -32,8 +32,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[];

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}