TW-1496: [Mises] Ads impressions rework (#1169)

* TW-1474: Support Mises browser. + IS_MISES_BROWSER + Minor UI fixes

* TW-1474: Support Mises browser. Fix Accounts dropdown

* TW-1474: Support Mises browser. -- Unnecessary scroll in overlays

* TW-1496: [Mises] Ads impressions rework

* TW-1496: [Mises] Ads impressions rework. Enable pipeline

* TW-1496: [Mises] Ads impressions rework. Tuned logic to requirements

* TW-1496: [Mises] Ads impressions rework. + useAdsImpressionsLinking()

* TW-1496: [Mises] Ads impressions rework. + ECDSA

* TW-1496: [Mises] Ads impressions rework. ECDSA. jwk -> pkcs8 + spki

.env.dist

@@ -8,6 +8,7 @@ TEMPLE_WALLET_UTORG_SID=
 
 TEMPLE_WALLET_API_URL=https://temple-api-mainnet.prod.templewallet.com
 TEMPLE_WALLET_DEXES_API_URL=wss://dexes-api-mainnet.prod.templewallet.com
+TEMPLE_ADS_API_URL=
 
 TEMPLE_WALLET_ROUTE3_AUTH_TOKEN=
 TEMPLE_WALLET_MOONPAY_API_KEY=

.github/workflows/code-quality.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - master
       - development
+      - 'TW-[0-9]+-epic-**'
 
 jobs:
   pull-request-check:
@@ -31,6 +32,7 @@ jobs:
           TEMPLE_WALLET_UTORG_SID: ${{ secrets.TEMPLE_WALLET_UTORG_SID }}
           TEMPLE_WALLET_API_URL: ${{ vars.TEMPLE_WALLET_API_URL }}
           TEMPLE_WALLET_DEXES_API_URL: ${{ vars.TEMPLE_WALLET_DEXES_API_URL }}
+          TEMPLE_ADS_API_URL: ${{ vars.TEMPLE_ADS_API_URL }}
           TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
           TEMPLE_WALLET_MOONPAY_API_KEY: ${{ secrets.TEMPLE_WALLET_MOONPAY_API_KEY }}
           TEMPLE_FIREBASE_CONFIG: ${{ secrets.TEMPLE_FIREBASE_CONFIG }}

.github/workflows/manual-builds.yml

@@ -50,6 +50,7 @@ jobs:
           TEMPLE_WALLET_UTORG_SID: ${{ secrets.TEMPLE_WALLET_UTORG_SID }}
           TEMPLE_WALLET_API_URL: ${{ vars.TEMPLE_WALLET_API_URL }}
           TEMPLE_WALLET_DEXES_API_URL: ${{ vars.TEMPLE_WALLET_DEXES_API_URL }}
+          TEMPLE_ADS_API_URL: ${{ vars.TEMPLE_ADS_API_URL }}
           TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
           TEMPLE_WALLET_MOONPAY_API_KEY: ${{ secrets.TEMPLE_WALLET_MOONPAY_API_KEY }}
           TEMPLE_FIREBASE_CONFIG: ${{ secrets.TEMPLE_FIREBASE_CONFIG }}

.github/workflows/release.yml

@@ -32,6 +32,7 @@ jobs:
           TEMPLE_WALLET_UTORG_SID: ${{ secrets.TEMPLE_WALLET_UTORG_SID }}
           TEMPLE_WALLET_API_URL: ${{ vars.TEMPLE_WALLET_API_URL }}
           TEMPLE_WALLET_DEXES_API_URL: ${{ vars.TEMPLE_WALLET_DEXES_API_URL }}
+          TEMPLE_ADS_API_URL: ${{ vars.TEMPLE_ADS_API_URL }}
           TEMPLE_WALLET_ROUTE3_AUTH_TOKEN: ${{ vars.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
           TEMPLE_WALLET_MOONPAY_API_KEY: ${{ secrets.TEMPLE_WALLET_MOONPAY_API_KEY }}
           TEMPLE_FIREBASE_CONFIG: ${{ secrets.TEMPLE_FIREBASE_CONFIG }}

.github/workflows/secrets-setup/action.yml

@@ -23,6 +23,8 @@ inputs:
     required: true
   TEMPLE_WALLET_DEXES_API_URL:
     required: true
+  TEMPLE_ADS_API_URL:
+    required: true
   TEMPLE_FIREBASE_CONFIG:
       required: true
   TEMPLE_FIREBASE_MESSAGING_VAPID_KEY:
@@ -123,6 +125,7 @@ runs:
 
         TEMPLE_WALLET_API_URL=${{ inputs.TEMPLE_WALLET_API_URL }}
         TEMPLE_WALLET_DEXES_API_URL=${{ inputs.TEMPLE_WALLET_DEXES_API_URL }}
+        TEMPLE_ADS_API_URL=${{ inputs.TEMPLE_ADS_API_URL }}
         TEMPLE_WALLET_ROUTE3_AUTH_TOKEN=${{ inputs.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
         TEMPLE_WALLET_MOONPAY_API_KEY=${{ inputs.TEMPLE_WALLET_MOONPAY_API_KEY }}
         TEMPLE_FIREBASE_CONFIG=${{ inputs.TEMPLE_FIREBASE_CONFIG }}

src/app/WithDataLoading.tsx

@@ -4,6 +4,7 @@ import { dispatch } from 'app/store';
 import { loadTokensScamlistActions } from 'app/store/assets/actions';
 import { loadSwapDexesAction, loadSwapTokensAction } from 'app/store/swap/actions';
 
+import { useAdsImpressionsLinking } from './hooks/use-ads-impressions-linking';
 import { useAdvertisingLoading } from './hooks/use-advertising.hook';
 import { useAssetsLoading } from './hooks/use-assets-loading';
 import { useAssetsMigrations } from './hooks/use-assets-migrations';
@@ -42,6 +43,7 @@ export const WithDataLoading: FC<PropsWithChildren> = ({ children }) => {
   useStorageAnalytics();
   useConversionTracking();
   useUserIdAccountPkhSync();
+  useAdsImpressionsLinking();
 
   return <>{children}</>;
 };

src/app/hooks/use-ads-impressions-linking.ts

@@ -0,0 +1,18 @@
+import { dispatch } from 'app/store';
+import { setAdsImpressionsLinkedAction } from 'app/store/settings/actions';
+import { useIsAdsImpressionsLinkedSelector } from 'app/store/settings/selectors';
+import { performLinkingOfAdsImpressions } from 'lib/ads/link-ads-impressions';
+import { useDidMount } from 'lib/ui/hooks';
+
+import { useAdsViewerPkh } from './use-ads-viewer-pkh';
+
+export const useAdsImpressionsLinking = () => {
+  const linked = useIsAdsImpressionsLinkedSelector();
+  const accountPkh = useAdsViewerPkh();
+
+  useDidMount(() => {
+    if (linked) return;
+
+    performLinkingOfAdsImpressions(accountPkh).then(() => void dispatch(setAdsImpressionsLinkedAction()));
+  });
+};

src/app/storage/app-install-id.ts

@@ -0,0 +1,16 @@
+import { fetchFromStorage, putToStorage } from 'lib/storage';
+
+const storageKey = 'APP_INSTALL_IDENTITY';
+
+interface AppInstallIdentity {
+  version: string;
+  privateKey: string;
+  publicKey: string;
+  publicKeyHash: string;
+  ts: string;
+}
+
+export const getStoredAppInstallIdentity = () => fetchFromStorage<AppInstallIdentity>(storageKey);
+
+export const putStoredAppInstallIdentity = (value: AppInstallIdentity) =>
+  putToStorage<AppInstallIdentity>(storageKey, value);

src/app/store/settings/actions.ts

@@ -11,3 +11,5 @@ export const setOnRampPossibilityAction = createAction<boolean>('settings/SET_ON
 export const setConversionTrackedAction = createAction<void>('settings/SET_CONVERSION_TRACKED');
 
 export const setPendingReactivateAdsAction = createAction<boolean>('settings/SET_PENDING_REACTIVATE_ADS');
+
+export const setAdsImpressionsLinkedAction = createAction('settings/SET_ADS_IMPRESSIONS_LINKED');

src/app/store/settings/reducers.ts

@@ -1,6 +1,7 @@
 import { createReducer } from '@reduxjs/toolkit';
 
 import {
+  setAdsImpressionsLinkedAction,
   setConversionTrackedAction,
   setIsAnalyticsEnabledAction,
   setOnRampPossibilityAction,
@@ -29,4 +30,8 @@ export const settingsReducer = createReducer<SettingsState>(settingsInitialState
   builder.addCase(setPendingReactivateAdsAction, (state, { payload }) => {
     state.pendingReactivateAds = payload;
   });
+
+  builder.addCase(setAdsImpressionsLinkedAction, state => {
+    state.adsImpressionsLinked = true;
+  });
 });

src/app/store/settings/selectors.ts

@@ -11,3 +11,5 @@ export const useOnRampPossibilitySelector = () => useSelector(({ settings }) =>
 export const useIsConversionTrackedSelector = () => useSelector(({ settings }) => settings.isConversionTracked);
 
 export const useIsPendingReactivateAdsSelector = () => useSelector(({ settings }) => settings.pendingReactivateAds);
+
+export const useIsAdsImpressionsLinkedSelector = () => useSelector(({ settings }) => settings.adsImpressionsLinked);

src/app/store/settings/state.mock.ts

@@ -6,5 +6,6 @@ export const mockSettingsState: SettingsState = {
   balanceMode: BalanceMode.Fiat,
   isOnRampPossibility: false,
   isConversionTracked: false,
-  pendingReactivateAds: false
+  pendingReactivateAds: false,
+  adsImpressionsLinked: false
 };

src/app/store/settings/state.ts

@@ -12,6 +12,7 @@ export interface SettingsState {
   isOnRampPossibility: boolean;
   isConversionTracked: boolean;
   pendingReactivateAds: boolean;
+  adsImpressionsLinked: boolean;
 }
 
 export const settingsInitialState: SettingsState = {
@@ -20,5 +21,6 @@ export const settingsInitialState: SettingsState = {
   balanceMode: BalanceMode.Fiat,
   isOnRampPossibility: false,
   isConversionTracked: false,
-  pendingReactivateAds: false
+  pendingReactivateAds: false,
+  adsImpressionsLinked: false
 };

src/app/templates/partners-promotion/index.tsx

@@ -12,7 +12,7 @@ import {
   usePromotionHidingTimestampSelector
 } from 'app/store/partners-promotion/selectors';
 import { AdsProviderName, AdsProviderTitle } from 'lib/ads';
-import { AnalyticsEventCategory, useAnalytics } from 'lib/analytics';
+import { postAdImpression } from 'lib/apis/ads-api';
 import { AD_HIDING_TIMEOUT } from 'lib/constants';
 
 import { HypelabPromotion } from './components/hypelab-promotion';
@@ -40,7 +40,6 @@ const shouldBeHiddenTemporarily = (hiddenAt: number) => {
 export const PartnersPromotion = memo<PartnersPromotionProps>(({ variant, id, pageName, withPersonaProvider }) => {
   const isImageAd = variant === PartnersPromotionVariant.Image;
   const adsViewerAddress = useAdsViewerPkh();
-  const { trackEvent } = useAnalytics();
   const { popup } = useAppEnv();
   const dispatch = useDispatch();
   const hiddenAt = usePromotionHidingTimestampSelector(id);
@@ -72,19 +71,10 @@ export const PartnersPromotion = memo<PartnersPromotionProps>(({ variant, id, pa
   const handleAdRectSeen = useCallback(() => {
     if (isAnalyticsSentRef.current) return;
 
-    trackEvent(
-      'Internal Ads Activity',
-      AnalyticsEventCategory.General,
-      {
-        variant: providerName === 'Persona' ? PartnersPromotionVariant.Image : variant,
-        page: pageName,
-        provider: AdsProviderTitle[providerName],
-        accountPkh: adsViewerAddress
-      },
-      true
-    );
+    postAdImpression(adsViewerAddress, AdsProviderTitle[providerName], { pageName });
+
     isAnalyticsSentRef.current = true;
-  }, [providerName, pageName, adsViewerAddress, variant, trackEvent]);
+  }, [providerName, pageName, adsViewerAddress]);
 
   const handleClosePartnersPromoClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     e => {

src/background.ts

@@ -3,6 +3,7 @@ import { getMessaging } from '@firebase/messaging/sw';
 import browser from 'webextension-polyfill';
 
 import 'lib/keep-bg-worker-alive/background';
+import { putStoredAppInstallIdentity } from 'app/storage/app-install-id';
 import {
   getStoredAppUpdateDetails,
   putStoredAppUpdateDetails,
@@ -11,10 +12,13 @@ import {
 import { updateRulesStorage } from 'lib/ads/update-rules-storage';
 import { EnvVars } from 'lib/env';
 import { start } from 'lib/temple/back/main';
+import { generateKeyPair } from 'lib/utils/ecdsa';
+
+import PackageJSON from '../package.json';
 
 browser.runtime.onInstalled.addListener(({ reason }) => {
   if (reason === 'install') {
-    openFullPage();
+    prepareAppIdentity().finally(openFullPage);
     return;
   }
 
@@ -57,3 +61,17 @@ const firebase = initializeApp(JSON.parse(EnvVars.TEMPLE_FIREBASE_CONFIG));
 getMessaging(firebase);
 
 updateRulesStorage();
+
+async function prepareAppIdentity() {
+  const { privateKey, publicKey, publicKeyHash } = await generateKeyPair();
+
+  const ts = new Date().toISOString();
+
+  await putStoredAppInstallIdentity({
+    version: PackageJSON.version,
+    privateKey,
+    publicKey,
+    publicKeyHash: publicKeyHash.slice(0, 32),
+    ts
+  });
+}

src/lib/ads/link-ads-impressions.ts

@@ -0,0 +1,21 @@
+import { getStoredAppInstallIdentity } from 'app/storage/app-install-id';
+import { postLinkAdsImpressions } from 'lib/apis/ads-api';
+import { signData } from 'lib/utils/ecdsa';
+
+export async function performLinkingOfAdsImpressions(accountPkh: string) {
+  const identity = await getStoredAppInstallIdentity();
+  if (!identity) {
+    console.warn('App identity not found');
+    return;
+  }
+
+  const {
+    privateKey,
+    // Actual installId will be derived by the API
+    publicKey: installId
+  } = identity;
+
+  const signature = await signData(privateKey, 'LINK_ADS_IMPRESSIONS');
+
+  await postLinkAdsImpressions(accountPkh, installId, signature);
+}

src/lib/apis/ads-api.ts

@@ -0,0 +1,38 @@
+import axiosFetchAdapter from '@vespaiach/axios-fetch-adapter';
+import axios from 'axios';
+
+import { APP_VERSION, EnvVars } from 'lib/env';
+
+const axiosClient = axios.create({
+  baseURL: EnvVars.TEMPLE_ADS_API_URL,
+  adapter: axiosFetchAdapter
+});
+
+interface ImpressionDetails {
+  /** For external */
+  urlDomain?: string;
+  /** For internal */
+  pageName?: string;
+}
+
+export async function postAdImpression(
+  accountPkh: string,
+  provider: string,
+  { urlDomain, pageName }: ImpressionDetails
+) {
+  await axiosClient.post('/impression', {
+    accountPkh,
+    urlDomain,
+    pageName,
+    provider,
+    appVersion: APP_VERSION
+  });
+}
+
+export async function postAnonymousAdImpression(installId: string, urlDomain: string, provider: string) {
+  await axiosClient.post('/impression', { installId, urlDomain, provider, appVersion: APP_VERSION });
+}
+
+export async function postLinkAdsImpressions(accountPkh: string, installId: string, signature: string) {
+  await axiosClient.post('/link-impressions', { accountPkh, installId, signature, appVersion: APP_VERSION });
+}

src/lib/env.ts

@@ -4,7 +4,7 @@ export const APP_VERSION = PackageJSON.version;
 
 /** Only Mises browser among supported vendors counts as a mobile platform */
 // @ts-expect-error
-export const IS_MISES_BROWSER = navigator.userAgentData?.mobile ?? false;
+export const IS_MISES_BROWSER = Boolean(navigator.userAgentData?.mobile);
 
 export const IS_DEV_ENV = process.env.NODE_ENV === 'development';
 
@@ -17,6 +17,7 @@ export const BACKGROUND_IS_WORKER = process.env.BACKGROUND_IS_WORKER === 'true';
 export const EnvVars = {
   TEMPLE_WALLET_API_URL: process.env.TEMPLE_WALLET_API_URL!,
   TEMPLE_WALLET_DEXES_API_URL: process.env.TEMPLE_WALLET_DEXES_API_URL!,
+  TEMPLE_ADS_API_URL: process.env.TEMPLE_ADS_API_URL!,
   TEMPLE_WALLET_JITSU_TRACKING_HOST: process.env.TEMPLE_WALLET_JITSU_TRACKING_HOST!,
   TEMPLE_WALLET_JITSU_WRITE_KEY: process.env.TEMPLE_WALLET_JITSU_WRITE_KEY!,
   TEMPLE_WALLET_EXOLIX_API_KEY: process.env.TEMPLE_WALLET_EXOLIX_API_KEY!,

src/lib/temple/back/main.ts

@@ -1,7 +1,9 @@
 import browser, { Runtime } from 'webextension-polyfill';
 
+import { getStoredAppInstallIdentity } from 'app/storage/app-install-id';
 import { updateRulesStorage } from 'lib/ads/update-rules-storage';
-import { ADS_VIEWER_ADDRESS_STORAGE_KEY, ANALYTICS_USER_ID_STORAGE_KEY, ContentScriptType } from 'lib/constants';
+import { postAdImpression, postAnonymousAdImpression } from 'lib/apis/ads-api';
+import { ADS_VIEWER_ADDRESS_STORAGE_KEY, ContentScriptType } from 'lib/constants';
 import { E2eMessageType } from 'lib/e2e/types';
 import { BACKGROUND_IS_WORKER } from 'lib/env';
 import { fetchFromStorage } from 'lib/storage';
@@ -10,8 +12,6 @@ import { clearAsyncStorages } from 'lib/temple/reset';
 import { TempleMessageType, TempleRequest, TempleResponse } from 'lib/temple/types';
 import { getTrackedCashbackServiceDomain, getTrackedUrl } from 'lib/utils/url-track/url-track.utils';
 
-import { AnalyticsEventCategory } from '../analytics-types';
-
 import * as Actions from './actions';
 import * as Analytics from './analytics';
 import { intercom } from './defaults';
@@ -260,12 +260,6 @@ const getAdsViewerPkh = async (): Promise<string | undefined> => {
   return frontState.accounts[0]?.publicKeyHash;
 };
 
-const getAnalyticsUserId = async (): Promise<string | undefined> => {
-  const { [ANALYTICS_USER_ID_STORAGE_KEY]: userId } = await browser.storage.local.get(ANALYTICS_USER_ID_STORAGE_KEY);
-
-  return userId;
-};
-
 browser.runtime.onMessage.addListener(async msg => {
   try {
     switch (msg?.type) {
@@ -294,14 +288,14 @@ browser.runtime.onMessage.addListener(async msg => {
 
         break;
       case ContentScriptType.ExternalAdsActivity:
-        const userId = await getAnalyticsUserId();
-        await Analytics.trackEvent({
-          category: AnalyticsEventCategory.General,
-          userId: userId ?? '',
-          event: 'External Ads Activity',
-          properties: { domain: new URL(msg.url).hostname, accountPkh, provider: msg.provider },
-          rpc: undefined
-        });
+        const urlDomain = new URL(msg.url).hostname;
+        if (accountPkh) await postAdImpression(accountPkh, msg.provider, { urlDomain });
+        else {
+          const identity = await getStoredAppInstallIdentity();
+          if (!identity) throw new Error('App identity not found');
+          const installId = identity.publicKeyHash;
+          await postAnonymousAdImpression(installId, urlDomain, msg.provider);
+        }
         break;
     }
   } catch (e) {

src/lib/temple/reset.ts

@@ -1,3 +1,4 @@
+import { getStoredAppInstallIdentity, putStoredAppInstallIdentity } from 'app/storage/app-install-id';
 import { browser } from 'lib/browser';
 import * as Repo from 'lib/temple/repo';
 
@@ -9,7 +10,9 @@ export async function clearAllStorages() {
 export async function clearAsyncStorages() {
   await Repo.db.delete();
   await Repo.db.open();
+  const appIdentity = await getStoredAppInstallIdentity();
   await browser.storage.local.clear();
+  if (appIdentity) putStoredAppInstallIdentity(appIdentity);
   await browser.storage.session?.clear();
 }