@temple-wallet/extension-ads 9.0.0-dev.2 → 9.1.0

package/dist/referrals/index.d.ts

@@ -1,7 +1,17 @@
-import memoizee from 'memoizee';
 import * as lodash from 'lodash';
+import memoizee from 'memoizee';
 
-declare function processAnchors(supportedDomains: Set<string>, AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI): Promise<undefined>;
+/** Current page's domain with 'www' stripped off */
+declare const getCurrentPageDomain: (() => string) & lodash.MemoizedFunction;
+interface ReferralTextIconRule {
+    /** RegEx (string) to check page hostname against */
+    hostRegExStr: string;
+    aChildSelector?: string;
+    aMatchSelector?: string;
+    iconHeight?: number;
+}
+
+declare function processAnchors(supportedDomains: Set<string>, textIconRules: ReferralTextIconRule[], AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI, redirectUrl?: string): Promise<undefined>;
 interface AdsBrowserExtensionMessageTypeI {
     FetchReferrals: string;
     ReferralClick: string;
@@ -27,7 +37,4 @@ interface AffiliateLink {
     imageUrl: string | null;
 }
 
-/** Current page's domain with 'www' stripped off */
-declare const getCurrentPageDomain: (() => string) & lodash.MemoizedFunction;
-
 export { buildTakeadsClient, getCurrentPageDomain, processAnchors };

package/dist/referrals/index.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var T = require('webextension-polyfill');
+var A = require('webextension-polyfill');
 var lodash = require('lodash');
-var E = require('axios');
-var D = require('memoizee');
+var D = require('axios');
+var U = require('memoizee');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var T__default = /*#__PURE__*/_interopDefault(T);
-var E__default = /*#__PURE__*/_interopDefault(E);
+var A__default = /*#__PURE__*/_interopDefault(A);
 var D__default = /*#__PURE__*/_interopDefault(D);
+var U__default = /*#__PURE__*/_interopDefault(U);
 
-var p=(r,t,e)=>new Promise((c,s)=>{var a=i=>{try{n(e.next(i));}catch(l){s(l);}},o=i=>{try{n(e.throw(i));}catch(l){s(l);}},n=i=>i.done?c(i.value):Promise.resolve(i.value).then(a,o);n((e=e.apply(r,t)).next());});var f=process&&process.env&&process.env.NODE_ENV==="development",h=navigator.userAgent.includes("Macintosh"),w=r=>!!r;var u=lodash.memoize(()=>m(window.location.hostname,"www"));function m(r,t){return r.includes(`${t}.`)?r.slice(t.length+1):r}var A="data-tw-referral";function y(r,t){return p(this,null,function*(){var o;let e=Array.from(document.querySelectorAll("a"));if(!e.length)throw new Error("No anchors found");let c=e.map(n=>{if(n.hasAttribute(A))return null;let i=R(n.href);if(!i||!r.has(i))return null;let l=v(n.href);return l?{iri:l,aElem:n,urlDomain:i}:null}).filter(w);if(!c.length)return void(f&&console.info("Nothing to replace"));let s=c.map(n=>n.iri),a=yield T__default.default.runtime.sendMessage({type:t.FetchReferrals,links:s});if(!a.data.length)return void(f&&console.info("No referrals received"));f&&console.info("Replacing",a.data.length,"referralas");for(let{iri:n,aElem:i,urlDomain:l}of c){let g=(o=a.data.find(x=>x.iri===n))==null?void 0:o.trackingLink;if(!g){f&&console.warn("No affiliate link for",i);continue}L({iri:n,aElem:i,urlDomain:l,referralUrl:g},t);}})}function L(r,t){let{aElem:e,urlDomain:c,referralUrl:s}=r,a=e.href;f&&console.info("Replacing referral:",a,"to",s,"for anchor:",e),e.setAttribute(A,"set"),e.onclick=o=>{o.preventDefault(),f&&console.log("Referral clicked:",a,"->",s),T__default.default.runtime.sendMessage({type:t.ReferralClick,urlDomain:c,pageDomain:u()});let n=o.button===1||(h?o.metaKey:o.ctrlKey);window.open(s,n?"_blank":"_self");},e.oncontextmenu=()=>{e.href=s;let o=()=>{e.href=a,window.removeEventListener("focus",o);};window.addEventListener("focus",o);};}function R(r){try{return m(new URL(r).hostname,"www")}catch(t){return null}}function v(r){try{let t=new URL(r);return t.origin+t.pathname}catch(t){return null}}var d=class{constructor(t,e="https://api.takeads.com"){this.publicKey=t;this.apiUrl=e;this.axios=E__default.default.create({baseURL:e,headers:{Authorization:`Bearer ${this.publicKey}`},adapter:"fetch"});}affiliateLinks(t,e){return p(this,null,function*(){return (yield this.axios.put("/v1/product/monetize-api/v2/resolve",{iris:t,subId:e,withImages:!1})).data})}},I=D__default.default(r=>new d(r),{max:2});
+var h=(r,t,i)=>new Promise((u,o)=>{var g=e=>{try{a(i.next(e));}catch(s){o(s);}},l=e=>{try{a(i.throw(e));}catch(s){o(s);}},a=e=>e.done?u(e.value):Promise.resolve(e.value).then(g,l);a((i=i.apply(r,t)).next());});var m=process&&process.env&&process.env.NODE_ENV==="development",R=navigator.userAgent.includes("Macintosh"),y=r=>!!r;var x=lodash.memoize(()=>w(window.location.hostname,"www"));function w(r,t){return r.includes(`${t}.`)?r.slice(t.length+1):r}var k="data-tw-referral";function S(r,t,i,u){return h(this,null,function*(){let o=Array.from(document.querySelectorAll("a"));if(!o.length)throw new Error("No anchors found");let g=o.map(e=>{if(e.hasAttribute(k))return null;let s=I(e.href);if(!s||!r.has(s))return null;let d=b(e.href);return d?{iri:d,aElem:e,urlDomain:s}:null}).filter(y);if(!g.length)return void(m&&console.info("Nothing to replace"));let l=g.map(e=>e.iri),a=yield A__default.default.runtime.sendMessage({type:i.FetchReferrals,links:l});if(!a.data.length)return void(m&&console.info("No referrals received"));m&&console.info("Replacing",a.data.length,"referralas");for(let{iri:e,aElem:s,urlDomain:d}of g){let p=a.data.find(f=>f.iri===e),n=p==null?void 0:p.trackingLink;if(!n){m&&console.warn("No affiliate link for",s);continue}let c=p.imageUrl;L({iri:e,aElem:s,urlDomain:d,referralUrl:n,imageUrl:c},t,i,u);}})}function L(r,t,i,u){var p;let{aElem:o,urlDomain:g,referralUrl:l,imageUrl:a}=r,e=o.href,s=u?v(u,l):l;if(m&&console.info("Replacing referral:",e,"to",l,"for anchor:",o),o.setAttribute(k,"set"),o.onclick=n=>{n.preventDefault(),m&&console.log("Referral clicked:",e,"->",l),A__default.default.runtime.sendMessage({type:i.ReferralClick,urlDomain:g,pageDomain:x()});let c=n.button===1||(R?n.metaKey:n.ctrlKey);window.open(s,c?"_blank":"_self");},o.oncontextmenu=()=>{o.href=s;let n=()=>{o.href=e,window.removeEventListener("focus",n);};window.addEventListener("focus",n);},!a)return;let d=x();for(let n of t){if(new RegExp(n.hostRegExStr).test(d)===!1)continue;let c=n.aChildSelector?o.querySelector(n.aChildSelector):null;if(c||(c=n.aMatchSelector&&o.matches(n.aMatchSelector)?o:null),!c)continue;let f=document.createElement("img");f.src=a,f.height=(p=n.iconHeight)!=null?p:20,f.style.display="inline-block",f.style.marginLeft="6px",f.style.verticalAlign="middle",c.appendChild(f);return}}function v(r,t){let i=new URL(r);return i.searchParams.set("url",t),i.toString()}function I(r){try{return w(new URL(r).hostname,"www")}catch(t){return null}}function b(r){try{let t=new URL(r);return t.origin+t.pathname}catch(t){return null}}var T=class{constructor(t,i="https://api.takeads.com"){this.publicKey=t;this.apiUrl=i;this.axios=D__default.default.create({baseURL:i,headers:{Authorization:`Bearer ${this.publicKey}`},adapter:"fetch"});}affiliateLinks(t,i){return h(this,null,function*(){return (yield this.axios.put("/v1/product/monetize-api/v2/resolve",{iris:t,subId:i,withImages:!0})).data})}},C=U__default.default(r=>new T(r),{max:2});
 
-exports.buildTakeadsClient = I;
-exports.getCurrentPageDomain = u;
-exports.processAnchors = y;
+exports.buildTakeadsClient = C;
+exports.getCurrentPageDomain = x;
+exports.processAnchors = S;

package/package.json

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

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

@@ -0,0 +1,24 @@
+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);
+      }
+    }
+  }
+};

package/src/referrals/replace.ts

@@ -3,13 +3,15 @@ import browser from 'webextension-polyfill';
 import { IS_DEV, IS_MAC_OS, isTruthy } from 'src/utils';
 
 import type { TekeadsAffiliateResponse } from './takeads';
-import { getCurrentPageDomain, stripSubdomain } from './utils';
+import { getCurrentPageDomain, ReferralTextIconRule, stripSubdomain } from './utils';
 
 const TEMPLE_WALLET_ANCHOR_ATTRIBUTE = 'data-tw-referral';
 
 export async function processAnchors(
   supportedDomains: Set<string>,
-  AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI
+  textIconRules: ReferralTextIconRule[],
+  AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI,
+  redirectUrl?: string
 ) {
   const anchors = Array.from(document.querySelectorAll('a'));
   if (!anchors.length) throw new Error('No anchors found');
@@ -43,14 +45,22 @@ export async function processAnchors(
   IS_DEV && console.info('Replacing', takeadsItems.data.length, 'referralas');
 
   for (const { iri, aElem, urlDomain } of items) {
-    const referralUrl = takeadsItems.data.find(item => item.iri === iri)?.trackingLink;
+    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;
     }
 
-    processAnchorElement({ iri, aElem, urlDomain, referralUrl }, AdsBrowserExtensionMessageType);
+    const imageUrl = data.imageUrl;
+
+    processAnchorElement(
+      { iri, aElem, urlDomain, referralUrl, imageUrl },
+      textIconRules,
+      AdsBrowserExtensionMessageType,
+      redirectUrl
+    );
   }
 
   return;
@@ -66,12 +76,19 @@ interface PreppedItem {
   aElem: HTMLAnchorElement;
   urlDomain: string;
   referralUrl: string;
+  imageUrl?: string | null;
 }
 
-function processAnchorElement(item: PreppedItem, AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI) {
-  const { aElem, urlDomain, referralUrl } = item;
+function processAnchorElement(
+  item: PreppedItem,
+  textIconRules: ReferralTextIconRule[],
+  AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI,
+  redirectUrl?: string
+) {
+  const { aElem, urlDomain, referralUrl, imageUrl } = item;
 
   const showHref = aElem.href;
+  const url = redirectUrl ? buildRedirectedUrl(redirectUrl, referralUrl) : referralUrl;
 
   IS_DEV && console.info('Replacing referral:', showHref, 'to', referralUrl, 'for anchor:', aElem);
 
@@ -90,7 +107,7 @@ function processAnchorElement(item: PreppedItem, AdsBrowserExtensionMessageType:
 
     const newTab = event.button === 1 || (IS_MAC_OS ? event.metaKey : event.ctrlKey);
 
-    window.open(referralUrl, newTab ? '_blank' : '_self');
+    window.open(url, newTab ? '_blank' : '_self');
   };
 
   aElem.oncontextmenu = () => {
@@ -99,7 +116,7 @@ function processAnchorElement(item: PreppedItem, AdsBrowserExtensionMessageType:
       Note: 'Copy to clipboard' button will also provide referral URL this way.
     */
 
-    aElem.href = referralUrl;
+    aElem.href = url;
 
     const revertHref = () => {
       aElem.href = showHref;
@@ -108,6 +125,38 @@ function processAnchorElement(item: PreppedItem, AdsBrowserExtensionMessageType:
 
     window.addEventListener('focus', revertHref);
   };
+
+  if (!imageUrl) return;
+
+  const hostname = getCurrentPageDomain();
+
+  for (const rule of textIconRules) {
+    if (new RegExp(rule.hostRegExStr).test(hostname) === false) continue;
+
+    let targetElem = rule.aChildSelector ? aElem.querySelector(rule.aChildSelector) : null;
+
+    if (!targetElem) targetElem = rule.aMatchSelector && aElem.matches(rule.aMatchSelector) ? aElem : null;
+
+    if (!targetElem) continue;
+
+    const icon = document.createElement('img');
+    icon.src = imageUrl;
+    icon.height = rule.iconHeight ?? 20;
+    icon.style.display = 'inline-block';
+    icon.style.marginLeft = '6px';
+    icon.style.verticalAlign = 'middle';
+
+    targetElem.appendChild(icon);
+
+    return;
+  }
+}
+
+function buildRedirectedUrl(redirectUrl: string, url: string) {
+  const $url = new URL(redirectUrl);
+  $url.searchParams.set('url', url);
+
+  return $url.toString();
 }
 
 function getDomain(href: string) {

package/src/referrals/takeads.ts

@@ -24,7 +24,7 @@ export class TakeAdsClient {
     const response = await this.axios.put<TekeadsAffiliateResponse>('/v1/product/monetize-api/v2/resolve', {
       iris: websiteUrls,
       subId,
-      withImages: false
+      withImages: true
     });
 
     return response.data;

package/src/referrals/utils.ts

@@ -12,3 +12,11 @@ export function stripSubdomain(hostname: string, subdomain: string) {
 
   return hostname;
 }
+
+export interface ReferralTextIconRule {
+  /** RegEx (string) to check page hostname against */
+  hostRegExStr: string;
+  aChildSelector?: string;
+  aMatchSelector?: string;
+  iconHeight?: number;
+}