Release 1.29 (#1234)

Merge pull request #1234 from madfish-solutions/development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "temple-wallet",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "private": true,
   "scripts": {
     "start-run": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.json\" webpack --watch --stats errors-warnings",
@@ -217,6 +217,7 @@
     "source-map": "^0.7.4"
   },
   "resolutions": {
+    "npm-run-all/cross-spawn": "^7.0.6",
     "tslib": "^2.4.0",
     "@types/react": "18.0.15",
     "@types/react-dev-utils/@types/webpack-dev-server": "^4",
@@ -232,6 +233,6 @@
     "follow-redirects": "^1.15.4"
   },
   "optionalDependencies": {
-    "@temple-wallet/extension-ads": "9.1.0"
+    "@temple-wallet/extension-ads": "10.0.1"
   }
 }

public/_locales/en/messages.json

@@ -3160,11 +3160,11 @@
   "selectedAccountCannotSignTx": { "message": "Selected account cannot sign transactions" },
   "attributes": { "message": "Attributes" },
   "properties": { "message": "Properties" },
-  "earnRewardsWithAds": {
-    "message": "Earn Rewards with Ads"
+  "earnTkeyRewards": {
+    "message": "Earn TKEY Rewards"
   },
-  "earnRewardsWithAdsDescription": {
-    "message": "I agree to share my wallet address and IP to receive ads and rewards in TKEY token."
+  "earnTkeyRewardsDescription": {
+    "message": "I agree to share my wallet address and IP to receive ads, referral links and rewards in TKEY token."
   },
   "dropdownNoItems": {
     "message": "No items"

src/app/hooks/use-user-analytics-and-ads-settings.hook.ts

@@ -1,24 +1,27 @@
 import { useEffect, useRef } from 'react';
 
 import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors';
-import { useAnalyticsEnabledSelector } from 'app/store/settings/selectors';
+import { useReferralLinksEnabledSelector } from 'app/store/settings/selectors';
 import { useAnalytics } from 'lib/analytics';
-import { WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
+import { REPLACE_REFERRALS_ENABLED, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
 import { AnalyticsEventCategory } from 'lib/temple/analytics-types';
 import { useAccountPkh } from 'lib/temple/front';
 import { usePassiveStorage } from 'lib/temple/front/storage';
 
 export const useUserAnalyticsAndAdsSettings = () => {
   const { trackEvent } = useAnalytics();
-  const isAnalyticsEnabled = useAnalyticsEnabledSelector();
   const isAdsEnabled = useShouldShowPartnersPromoSelector();
+  const isReferralLinksEnabled = useReferralLinksEnabledSelector();
 
   const [, setIsWebsitesAnalyticsEnabled] = usePassiveStorage(WEBSITES_ANALYTICS_ENABLED);
+  const [, setIsReplaceReferralsEnabled] = usePassiveStorage(REPLACE_REFERRALS_ENABLED);
+
   const prevAdsEnabledRef = useRef(isAdsEnabled);
   const accountPkh = useAccountPkh();
 
   useEffect(() => {
     setIsWebsitesAnalyticsEnabled(isAdsEnabled);
+    setIsReplaceReferralsEnabled(isReferralLinksEnabled);
 
     // It happens when the wallet is not ready although `registerWallet` promise has been resolved
     if (typeof accountPkh !== 'string') {
@@ -30,5 +33,12 @@ export const useUserAnalyticsAndAdsSettings = () => {
     }
 
     prevAdsEnabledRef.current = isAdsEnabled;
-  }, [isAdsEnabled, setIsWebsitesAnalyticsEnabled, trackEvent, accountPkh, isAnalyticsEnabled]);
+  }, [
+    isAdsEnabled,
+    isReferralLinksEnabled,
+    setIsWebsitesAnalyticsEnabled,
+    setIsReplaceReferralsEnabled,
+    trackEvent,
+    accountPkh
+  ]);
 };

src/app/pages/NewWallet/setWalletPassword/SetWalletPassword.tsx

@@ -50,8 +50,8 @@ interface FormData extends TestIDProps {
   password?: string;
   repeatPassword?: string;
   termsAccepted: boolean;
-  analytics?: boolean;
-  earnRewardsWithAds: boolean;
+  analytics: boolean;
+  earnTkeyRewards: boolean;
   testID?: string;
 }
 
@@ -102,7 +102,7 @@ export const SetWalletPassword: FC<SetWalletPasswordProps> = ({
     defaultValues: {
       shouldUseKeystorePassword: !isKeystorePasswordWeak,
       analytics: true,
-      earnRewardsWithAds: true
+      earnTkeyRewards: true
     },
     mode: 'onChange'
   });
@@ -140,20 +140,21 @@ export const SetWalletPassword: FC<SetWalletPasswordProps> = ({
           : data.password
         : data.password;
       try {
-        const shouldEnableAnalytics = Boolean(data.analytics);
-        const adsViewEnabled = data.earnRewardsWithAds;
+        const analyticsEnabled = data.analytics;
+        const adsViewEnabled = data.earnTkeyRewards;
+
+        setAnalyticsEnabled(analyticsEnabled);
         setAdsViewEnabled(adsViewEnabled);
-        setAnalyticsEnabled(shouldEnableAnalytics);
-        setReferralLinksEnabled(true);
+        setReferralLinksEnabled(adsViewEnabled);
         setTermsAccepted();
 
         await setOnboardingCompleted(true);
 
         const accountPkh = await registerWallet(password!, formatMnemonic(seedPhrase));
         // registerWallet function clears async storages
-        await putToStorage(REPLACE_REFERRALS_ENABLED, true);
+        await putToStorage(REPLACE_REFERRALS_ENABLED, adsViewEnabled);
         await putToStorage(WEBSITES_ANALYTICS_ENABLED, adsViewEnabled);
-        trackEvent('AnalyticsEnabled', AnalyticsEventCategory.General, { accountPkh }, shouldEnableAnalytics);
+        trackEvent('AnalyticsEnabled', AnalyticsEventCategory.General, { accountPkh }, analyticsEnabled);
         trackEvent('AdsEnabled', AnalyticsEventCategory.General, { accountPkh }, adsViewEnabled);
 
         navigate('/loading');
@@ -287,10 +288,10 @@ export const SetWalletPassword: FC<SetWalletPasswordProps> = ({
         <Controller
           basic
           control={control}
-          name="earnRewardsWithAds"
+          name="earnTkeyRewards"
           as={FormCheckbox}
-          label={t('earnRewardsWithAds')}
-          labelDescription={<T id="earnRewardsWithAdsDescription" />}
+          label={t('earnTkeyRewards')}
+          labelDescription={<T id="earnTkeyRewardsDescription" />}
           testID={setWalletPasswordSelectors.viewAdsCheckBox}
         />
       </FormCheckboxGroup>

src/app/store/index.ts

@@ -24,7 +24,7 @@ const persistConfigBlacklist: (keyof RootState)[] = SLICES_BLACKLIST;
 const persistedReducer = persistReducer<RootState>(
   {
     key: 'temple-root',
-    version: 4,
+    version: 5,
     ...storageConfig,
     stateReconciler: autoMergeLevel2,
     blacklist: persistConfigBlacklist,

src/app/store/migrations.ts

@@ -2,6 +2,7 @@ import { cloneDeep } from 'lodash';
 import type { MigrationManifest, PersistedState } from 'redux-persist';
 
 import { toTokenSlug } from 'lib/assets';
+import { IS_MISES_BROWSER } from 'lib/env';
 import { isCollectible } from 'lib/metadata';
 
 import { collectiblesMetadataInitialState } from './collectibles-metadata/state';
@@ -99,6 +100,24 @@ export const MIGRATIONS: MigrationManifest = {
       }
     };
 
+    return newState;
+  },
+
+  '5': (persistedState: PersistedState) => {
+    if (!persistedState || IS_MISES_BROWSER) return persistedState;
+
+    const typedPersistedState = persistedState as TypedPersistedRootState;
+
+    if (typedPersistedState.partnersPromotion.shouldShowPromotion) return persistedState;
+
+    const newState: TypedPersistedRootState = {
+      ...typedPersistedState,
+      settings: {
+        ...typedPersistedState.settings,
+        referralLinksEnabled: false
+      }
+    };
+
     return newState;
   }
 };

src/app/templates/AdvancedFeatures/referral-links-settings.tsx

@@ -7,12 +7,10 @@ import { useAcceptedTermsVersionSelector, useReferralLinksEnabledSelector } from
 import {
   PRIVACY_POLICY_URL,
   RECENT_TERMS_VERSION,
-  REPLACE_REFERRALS_ENABLED,
   TERMS_OF_USE_URL,
   TERMS_WITH_REFERRALS_VERSION
 } from 'lib/constants';
 import { t, T } from 'lib/i18n';
-import { putToStorage } from 'lib/storage';
 import { useConfirm } from 'lib/ui/dialog';
 
 import { EnablingSetting } from '../EnablingSetting';
@@ -65,7 +63,6 @@ export const ReferralLinksSettings = memo(() => {
 
       dispatch(setAcceptedTermsVersionAction(RECENT_TERMS_VERSION));
       dispatch(setReferralLinksEnabledAction(toChecked));
-      putToStorage(REPLACE_REFERRALS_ENABLED, toChecked);
     },
     [acceptedTermsVersion, confirm, dispatch]
   );

src/content-scripts/replace-ads/ads-stack.iframe.ts

@@ -1,11 +1,21 @@
 import { configureAds } from 'lib/ads/configure-ads';
 import { importExtensionAdsModule } from 'lib/ads/import-extension-ads-module';
-import { ADS_META_SEARCH_PARAM_NAME, AD_CATEGORIES_PARAM_NAME, ORIGIN_SEARCH_PARAM_NAME } from 'lib/constants';
+import {
+  ADS_META_SEARCH_PARAM_NAME,
+  AD_CATEGORIES_PARAM_NAME,
+  FONT_SIZE_SEARCH_PARAM_NAME,
+  LINE_HEIGHT_SEARCH_PARAM_NAME,
+  ORIGIN_SEARCH_PARAM_NAME,
+  THEME_COLOR_SEARCH_PARAM_NAME
+} from 'lib/constants';
 
 import { getRulesFromStorage } from './ads-rules';
 
 const usp = new URLSearchParams(window.location.search);
 const id = usp.get('id');
+const rawThemeColor = usp.get(THEME_COLOR_SEARCH_PARAM_NAME);
+const rawFontSize = usp.get(FONT_SIZE_SEARCH_PARAM_NAME);
+const rawLineHeight = usp.get(LINE_HEIGHT_SEARCH_PARAM_NAME);
 const origin = usp.get(ORIGIN_SEARCH_PARAM_NAME) ?? window.location.href;
 const adsMetadataIds = usp.getAll(ADS_META_SEARCH_PARAM_NAME).map(value => JSON.parse(value));
 const adCategories = usp.getAll(AD_CATEGORIES_PARAM_NAME);
@@ -16,13 +26,16 @@ configureAds()
   .then(({ renderAdsStack, rules }) => {
     const { blacklistedHypelabCampaignsSlugs, permanentAdPlacesRules, adPlacesRules } = rules;
 
-    renderAdsStack(
-      id ?? '',
-      adsMetadataIds,
+    renderAdsStack({
+      id: id ?? '',
+      initialAdsMetadata: adsMetadataIds,
       origin,
-      permanentAdPlacesRules.length > 0 || adPlacesRules.length > 0,
+      pageHasPlacesRules: permanentAdPlacesRules.length > 0 || adPlacesRules.length > 0,
       adCategories,
-      blacklistedHypelabCampaignsSlugs
-    );
+      hypelabBlacklistedCampaignsSlugs: blacklistedHypelabCampaignsSlugs,
+      themeColor: rawThemeColor ?? undefined,
+      fontSize: rawFontSize ? Number(rawFontSize) : undefined,
+      lineHeight: rawLineHeight ? Number(rawLineHeight) : undefined
+    });
   })
   .catch(error => console.error(error));

src/lib/ads/configure-ads.ts

@@ -5,14 +5,17 @@ import {
   ADS_META_SEARCH_PARAM_NAME,
   AD_CATEGORIES_PARAM_NAME,
   ContentScriptType,
-  ORIGIN_SEARCH_PARAM_NAME
+  FONT_SIZE_SEARCH_PARAM_NAME,
+  LINE_HEIGHT_SEARCH_PARAM_NAME,
+  ORIGIN_SEARCH_PARAM_NAME,
+  THEME_COLOR_SEARCH_PARAM_NAME
 } from 'lib/constants';
 import { APP_VERSION, EnvVars, IS_MISES_BROWSER } from 'lib/env';
 import { isTruthy } from 'lib/utils';
 
 import { importExtensionAdsModule } from './import-extension-ads-module';
 
-// Three interfaces below are copied from '@temple-wallet/extension-ads' to avoid importing it to ensure that a core
+// Four interfaces below are copied from '@temple-wallet/extension-ads' to avoid importing it to ensure that a core
 // build runs without errors.
 interface AdSource {
   shouldNotUseStrictContainerLimits?: boolean;
@@ -36,6 +39,16 @@ interface AdMetadata {
   dimensions: AdDimensions;
 }
 
+interface AdsStackIframeURLParams {
+  id: string;
+  adsMetadataIds: any[];
+  origin: string;
+  adCategories: string[];
+  themeColor?: string;
+  fontSize?: number;
+  lineHeight?: number;
+}
+
 const smallTkeyInpageAdUrl = browser.runtime.getURL(`/misc/ad-banners/small-tkey-inpage-ad.png`);
 const tkeyInpageAdUrl = browser.runtime.getURL(`/misc/ad-banners/tkey-inpage-ad.png`);
 
@@ -45,9 +58,28 @@ const swapTkeyUrl = `${browser.runtime.getURL('fullpage.html')}#/swap?${buildSwa
   true
 )}`;
 
-const getAdsStackIframeURL = (id: string, adsMetadataIds: any[], origin: string, adCategories: string[]) => {
+const searchParamsNames = {
+  id: 'id',
+  themeColor: THEME_COLOR_SEARCH_PARAM_NAME,
+  fontSize: FONT_SIZE_SEARCH_PARAM_NAME,
+  lineHeight: LINE_HEIGHT_SEARCH_PARAM_NAME
+};
+
+const getAdsStackIframeURL = ({
+  adsMetadataIds,
+  origin,
+  adCategories,
+  ...plainSearchParamsInput
+}: AdsStackIframeURLParams) => {
   const url = new URL(browser.runtime.getURL('iframes/ads-stack.html'));
-  url.searchParams.set('id', id);
+  for (const searchParamsInputName in plainSearchParamsInput) {
+    const searchParamsInputNameTyped = searchParamsInputName as keyof typeof plainSearchParamsInput;
+    const key = searchParamsNames[searchParamsInputNameTyped];
+    const value = plainSearchParamsInput[searchParamsInputNameTyped];
+    if (value || value === 0) {
+      url.searchParams.set(key, String(value));
+    }
+  }
   adsMetadataIds.forEach(adMetadataId =>
     url.searchParams.append(ADS_META_SEARCH_PARAM_NAME, JSON.stringify(adMetadataId))
   );

src/lib/constants.ts

@@ -53,3 +53,7 @@ export const searchHotkey = ` (${isMacOS ? '⌘' : 'Ctrl + '}K)`;
 export const FEE_PER_GAS_UNIT = 0.1;
 
 export const LIQUIDITY_BAKING_DEX_ADDRESS = 'KT1TxqZ8QtKvLu3V3JH7Gx58n7Co8pgtpQU5';
+
+export const THEME_COLOR_SEARCH_PARAM_NAME = 'tc';
+export const FONT_SIZE_SEARCH_PARAM_NAME = 'fs';
+export const LINE_HEIGHT_SEARCH_PARAM_NAME = 'lh';