Merge pull request #1008 from madfish-solutions/TW-1104-integrate-sli…

…se-xyz-to-temple-wallet-extension

Tw 1104 integrate slise xyz to temple wallet extension

.eslintrc

@@ -23,6 +23,7 @@
       }
     }
   },
+  "ignorePatterns": "src/**/*.embed.js",
   "rules": {
     "prettier/prettier": "error",
     "prefer-const": "error",

package.json

@@ -45,6 +45,7 @@
     "@redux-devtools/remote": "^0.8.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@rnw-community/shared": "^0.48.0",
+    "@slise/embed-react": "^2.2.0",
     "@svgr/webpack": "6.4.0",
     "@taquito/ledger-signer": "17.0.0",
     "@taquito/local-forging": "17.0.0",

src/contentScript.ts

@@ -1,13 +1,11 @@
 import { TemplePageMessage, TemplePageMessageType } from '@temple-wallet/dapp/dist/types';
 import browser from 'webextension-polyfill';
 
+import { ContentScriptType, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
 import { IntercomClient } from 'lib/intercom/client';
 import { serealizeError } from 'lib/intercom/helpers';
 import { TempleMessageType, TempleResponse } from 'lib/temple/types';
 
-import { ContentScriptType } from './lib/constants';
-
-const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
 const TRACK_URL_CHANGE_INTERVAL = 5000;
 
 enum BeaconMessageTarget {

src/lib/slise/get-ads-containers.ts

@@ -0,0 +1,42 @@
+interface AdContainerProps {
+  element: HTMLElement;
+  width: number;
+}
+
+const getFinalWidth = (element: Element) => {
+  const elementStyle = getComputedStyle(element);
+  const rawWidthFromStyle = elementStyle.width;
+  const rawWidthFromAttribute = element.getAttribute('width');
+
+  return Number((rawWidthFromAttribute || rawWidthFromStyle).replace('px', '') || element.clientWidth);
+};
+
+export const getAdsContainers = () => {
+  const builtInAdsImages = [...document.querySelectorAll('span + img')].filter(element => {
+    const { width, height } = element.getBoundingClientRect();
+    const label = element.previousElementSibling?.innerHTML ?? '';
+
+    return (width > 0 || height > 0) && ['Featured', 'Ad'].includes(label);
+  });
+  const coinzillaBanners = [...document.querySelectorAll('.coinzilla')];
+  const bitmediaBanners = [...document.querySelectorAll('iframe[src*="media.bmcdn"], iframe[src*="cdn.bmcdn"]')];
+
+  return builtInAdsImages
+    .map((image): AdContainerProps | null => {
+      const element = image.closest('div');
+
+      return element && { element, width: getFinalWidth(image) };
+    })
+    .concat(
+      [...bitmediaBanners, ...coinzillaBanners].map(banner => {
+        const parentElement = banner.parentElement;
+        const closestDiv = parentElement?.closest('div') ?? null;
+        const element = bitmediaBanners.includes(banner) ? closestDiv : parentElement;
+        const widthDefinedElement = element?.parentElement ?? parentElement;
+        const bannerFrame = banner.tagName === 'iframe' ? banner : banner.querySelector('iframe');
+
+        return element && { element, width: getFinalWidth(bannerFrame || widthDefinedElement!) };
+      })
+    )
+    .filter((element): element is AdContainerProps => Boolean(element));
+};

src/lib/slise/get-slot-id.ts

@@ -0,0 +1,7 @@
+export const getSlotId = () => {
+  const hostnameParts = window.location.hostname.split('.').filter(part => part !== 'www');
+  const serviceId = hostnameParts[0];
+  const pathnameParts = window.location.pathname.split('/').filter(part => part !== '' && !/0x[0-9a-f]+/i.test(part));
+
+  return [serviceId, ...pathnameParts].join('-');
+};

src/lib/slise/slise-ad.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+import { SliseAd as OriginalSliseAd, SliseAdProps } from '@slise/embed-react';
+
+import { useDidMount } from 'lib/ui/hooks/useDidMount';
+
+interface CunningSliseAdProps extends Omit<SliseAdProps, 'format' | 'style'> {
+  width: number;
+  height: number;
+}
+
+export const SliseAd = memo(({ width, height, ...restProps }: CunningSliseAdProps) => {
+  useDidMount(() => require('./slise-ad.embed'));
+
+  return <OriginalSliseAd {...restProps} format={`${width}x${height}`} style={{ width, height }} />;
+});

src/replaceAds.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import debounce from 'debounce';
+import { createRoot } from 'react-dom/client';
+import browser from 'webextension-polyfill';
+
+import { WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
+import { getAdsContainers } from 'lib/slise/get-ads-containers';
+import { getSlotId } from 'lib/slise/get-slot-id';
+import { SliseAd } from 'lib/slise/slise-ad';
+
+const availableAdsResolutions = [
+  { width: 270, height: 90 },
+  { width: 728, height: 90 }
+];
+
+const replaceAds = debounce(
+  () => {
+    try {
+      const adsContainers = getAdsContainers();
+
+      adsContainers.forEach(({ element: adContainer, width: containerWidth }) => {
+        let adsResolution = availableAdsResolutions[0];
+        for (let i = 1; i < availableAdsResolutions.length; i++) {
+          const candidate = availableAdsResolutions[i];
+          if (candidate.width <= containerWidth && candidate.width > adsResolution.width) {
+            adsResolution = candidate;
+          }
+        }
+
+        const adRoot = createRoot(adContainer);
+        adRoot.render(
+          <SliseAd slotId={getSlotId()} pub="pub-25" width={adsResolution.width} height={adsResolution.height} />
+        );
+      });
+    } catch {}
+  },
+  100,
+  true
+);
+
+// Prevents the script from running in an Iframe
+if (window.frameElement === null) {
+  browser.storage.local.get(WEBSITES_ANALYTICS_ENABLED).then(storage => {
+    if (storage[WEBSITES_ANALYTICS_ENABLED]) {
+      // Replace ads with those from Slise
+      window.addEventListener('load', () => replaceAds());
+      window.addEventListener('ready', () => replaceAds());
+      setInterval(() => replaceAds(), 1000);
+      replaceAds();
+    }
+  });
+}

webpack.config.ts

@@ -42,7 +42,7 @@ const HTML_TEMPLATES = PAGES_NAMES.map(name => {
   return { name, filename, path };
 });
 
-const CONTENT_SCRIPTS = ['contentScript'];
+const CONTENT_SCRIPTS = ['contentScript', 'replaceAds'];
 if (BACKGROUND_IS_WORKER) CONTENT_SCRIPTS.push('keepBackgroundWorkerAlive');
 
 const mainConfig = (() => {
@@ -159,7 +159,8 @@ const scriptsConfig = (() => {
   const config = buildBaseConfig();
 
   config.entry = {
-    contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts')
+    contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts'),
+    replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.tsx')
   };
 
   if (BACKGROUND_IS_WORKER)

webpack/manifest.ts

@@ -152,6 +152,12 @@ const buildManifestCommons = (vendor: string): Omit<Manifest.WebExtensionManifes
         js: ['scripts/contentScript.js'],
         run_at: 'document_start',
         all_frames: true
+      },
+      {
+        matches: ['https://etherscan.io/*', 'https://bscscan.com/*', 'https://polygonscan.com/*'],
+        js: ['scripts/replaceAds.js'],
+        run_at: 'document_start',
+        all_frames: false
       }
     ]
   };

yarn.lock

@@ -2329,6 +2329,13 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@slise/embed-react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@slise/embed-react/-/embed-react-2.2.0.tgz#346bf34d375144a7f5173354c1672d3687fa8b47"
+  integrity sha512-btboJc24ABEg5ncbVnab+asKarp3kTSTdMHHcndrnkCDlXNQNSw3vL0Lv8tanqgE3Ogt51AF8QGEhWDNOZAcxQ==
+  dependencies:
+    react-script-hook "^1.7.2"
+
 "@stablelib/aead@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
@@ -10593,6 +10600,11 @@ react-redux@^8.0.2:
     react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
+react-script-hook@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.7.2.tgz#ec130d67f9a25fcde57fbfd1faa87e5b97521948"
+  integrity sha512-fhyCEfXb94fag34UPRF0zry1XGwmVY+79iibWwTqAoOiCzYJQOYTiWJ7CnqglA9tMSV8g45cQpHCMcBwr7dwhA==
+
 react-text-mask@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/react-text-mask/-/react-text-mask-5.5.0.tgz#468ea690160b364981205f5633e7475e939383ff"