Tw 1104 integrate slise xyz to temple wallet extension

src/contentScript.tsx → src/contentScript.ts

@@ -1,17 +1,9 @@
-import React from 'react';
-
 import { TemplePageMessage, TemplePageMessageType } from '@temple-wallet/dapp/dist/types';
-import debounce from 'debounce';
-import { createRoot } from 'react-dom/client';
 import browser from 'webextension-polyfill';
 
 import { ContentScriptType } from 'lib/constants';
 import { IntercomClient } from 'lib/intercom/client';
 import { serealizeError } from 'lib/intercom/helpers';
-import { ADS_REPLACE_URLS_BASES } from 'lib/slise/constants';
-import { getAdsContainers } from 'lib/slise/get-ads-containers';
-import { getSlotId } from 'lib/slise/get-slot-id';
-import { SliseAd } from 'lib/slise/slise-ad';
 import { TempleMessageType, TempleResponse } from 'lib/temple/types';
 
 const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
@@ -45,40 +37,6 @@ type BeaconMessage =
     };
 type BeaconPageMessage = BeaconMessage | { message: BeaconMessage; sender: { id: string } };
 
-const availableAdsResolutions = [
-  { width: 270, height: 90 },
-  { width: 728, height: 90 }
-];
-
-const replaceAds = debounce(
-  () => {
-    if (!ADS_REPLACE_URLS_BASES.some(base => window.location.href.startsWith(base))) {
-      return;
-    }
-
-    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 => {
@@ -100,12 +58,6 @@ if (window.frameElement === null) {
 
       // Track url changes without page reload
       setInterval(trackUrlChange, TRACK_URL_CHANGE_INTERVAL);
-
-      // Replace ads with those from Slise
-      window.addEventListener('load', () => replaceAds());
-      window.addEventListener('ready', () => replaceAds());
-      setInterval(() => replaceAds(), 1000);
-      replaceAds();
     }
   });
 }

src/lib/slise/slise-ad.tsx

@@ -12,11 +12,5 @@ interface CunningSliseAdProps extends Omit<SliseAdProps, 'format' | 'style'> {
 export const SliseAd = memo(({ width, height, ...restProps }: CunningSliseAdProps) => {
   useDidMount(() => require('./slise-ad.embed'));
 
-  return (
-    <OriginalSliseAd
-      {...restProps}
-      format={`${width}x${height}`}
-      style={{ width: `${width}px`, height: `${height}px` }}
-    />
-  );
+  return <OriginalSliseAd {...restProps} format={`${width}x${height}`} style={{ width, height }} />;
 });

src/replaceAds.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import debounce from 'debounce';
+import { createRoot } from 'react-dom/client';
+import browser from 'webextension-polyfill';
+
+import { getAdsContainers } from 'lib/slise/get-ads-containers';
+import { getSlotId } from 'lib/slise/get-slot-id';
+import { SliseAd } from 'lib/slise/slise-ad';
+
+const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
+
+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

@@ -158,7 +158,8 @@ const scriptsConfig = (() => {
   const config = buildBaseConfig();
 
   config.entry = {
-    contentScript: Path.join(PATHS.SOURCE, 'contentScript.tsx')
+    contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts'),
+    replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.tsx')
   };
 
   config.output = {

webpack/manifest.ts

@@ -139,6 +139,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
       }
     ]
   };