Merge pull request #1147 from madfish-solutions/development

Release 1.22

.github/workflows/code-quality.yml

@@ -48,6 +48,7 @@ jobs:
           PERSONA_ADS_MEDIUM_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_MEDIUM_BANNER_UNIT_ID }}
           PERSONA_ADS_SQUARISH_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_SQUARISH_BANNER_UNIT_ID }}
           TEMPLE_ADS_ORIGIN_PASSPHRASE: ${{ vars.TEMPLE_ADS_ORIGIN_PASSPHRASE }}
+          CONVERSION_VERIFICATION_URL: ${{ vars.CONVERSION_VERIFICATION_URL }}
 
       - name: Install dependencies and code quality check with private modules
         uses: ./.github/workflows/code-quality-check

.github/workflows/manual-builds.yml

@@ -63,6 +63,7 @@ jobs:
           PERSONA_ADS_MEDIUM_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_MEDIUM_BANNER_UNIT_ID }}
           PERSONA_ADS_SQUARISH_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_SQUARISH_BANNER_UNIT_ID }}
           TEMPLE_ADS_ORIGIN_PASSPHRASE: ${{ vars.TEMPLE_ADS_ORIGIN_PASSPHRASE }}
+          CONVERSION_VERIFICATION_URL: ${{ vars.CONVERSION_VERIFICATION_URL }}
           # [e2e]
           DEFAULT_HD_ACCOUNT_SEED_PHRASE: ${{ secrets.DEFAULT_HD_ACCOUNT_SEED_PHRASE }}
           DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY: ${{ secrets.DEFAULT_HD_ACCOUNT_FIRST_PRIVATE_KEY }}

.github/workflows/release.yml

@@ -49,6 +49,7 @@ jobs:
           PERSONA_ADS_MEDIUM_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_MEDIUM_BANNER_UNIT_ID }}
           PERSONA_ADS_SQUARISH_BANNER_UNIT_ID: ${{ vars.PERSONA_ADS_SQUARISH_BANNER_UNIT_ID }}
           TEMPLE_ADS_ORIGIN_PASSPHRASE: ${{ vars.TEMPLE_ADS_ORIGIN_PASSPHRASE }}
+          CONVERSION_VERIFICATION_URL: ${{ vars.CONVERSION_VERIFICATION_URL }}
 
       - name: Install dependencies and code quality
         uses: ./.github/workflows/code-quality-check

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

@@ -55,6 +55,8 @@ inputs:
     required: true
   PERSONA_ADS_SQUARISH_BANNER_UNIT_ID:
     required: true
+  CONVERSION_VERIFICATION_URL:
+    required: true
   # [e2e]
   DEFAULT_HD_ACCOUNT_SEED_PHRASE:
     required: false
@@ -140,6 +142,7 @@ runs:
         PERSONA_ADS_MEDIUM_BANNER_UNIT_ID=${{ inputs.PERSONA_ADS_MEDIUM_BANNER_UNIT_ID }}
         PERSONA_ADS_SQUARISH_BANNER_UNIT_ID=${{ inputs.PERSONA_ADS_SQUARISH_BANNER_UNIT_ID }}
         TEMPLE_ADS_ORIGIN_PASSPHRASE=${{ inputs.TEMPLE_ADS_ORIGIN_PASSPHRASE }}
+        CONVERSION_VERIFICATION_URL=${{ inputs.CONVERSION_VERIFICATION_URL }}
 
         TEMPLE_WALLET_DEVELOPMENT_BRANCH_NAME=${{ github.ref_name }}
         EOF

package.json

@@ -1,6 +1,6 @@
 {
   "name": "temple-wallet",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "private": true,
   "scripts": {
     "start-run": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.json\" webpack --watch --stats errors-warnings",
@@ -233,6 +233,6 @@
     "follow-redirects": "^1.15.4"
   },
   "optionalDependencies": {
-    "@temple-wallet/extension-ads": "^5.0.2"
+    "@temple-wallet/extension-ads": "^6.0.0"
   }
 }

src/app/WithDataLoading.tsx

@@ -9,6 +9,7 @@ import { useAssetsLoading } from './hooks/use-assets-loading';
 import { useAssetsMigrations } from './hooks/use-assets-migrations';
 import { useBalancesLoading } from './hooks/use-balances-loading';
 import { useCollectiblesDetailsLoading } from './hooks/use-collectibles-details-loading';
+import { useConversionTracking } from './hooks/use-conversion-tracking';
 import { useTokensApyLoading } from './hooks/use-load-tokens-apy.hook';
 import { useLongRefreshLoading } from './hooks/use-long-refresh-loading.hook';
 import { useMetadataLoading } from './hooks/use-metadata-loading';
@@ -37,6 +38,7 @@ export const WithDataLoading: FC<PropsWithChildren> = ({ children }) => {
   }, []);
 
   useStorageAnalytics();
+  useConversionTracking();
   useUserIdAccountPkhSync();
 
   return <>{children}</>;

src/app/hooks/use-conversion-tracking.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+
+import axios from 'axios';
+
+import { dispatch } from 'app/store';
+import { setConversionTrackedAction } from 'app/store/settings/actions';
+import { useIsConversionTrackedSelector } from 'app/store/settings/selectors';
+import { AnalyticsEventCategory, useAnalytics } from 'lib/analytics';
+import { EnvVars } from 'lib/env';
+
+function fetchConversionInformation() {
+  return axios
+    .get<{ linkId: string; name: string }>(EnvVars.CONVERSION_VERIFICATION_URL, {
+      withCredentials: true
+    })
+    .then(response => response.data);
+}
+
+export const useConversionTracking = () => {
+  const { trackEvent } = useAnalytics();
+
+  const isConversionTracked = useIsConversionTrackedSelector();
+
+  useEffect(() => {
+    if (!isConversionTracked) {
+      fetchConversionInformation().then(({ linkId, name }) => {
+        trackEvent('Conversion Info', AnalyticsEventCategory.General, {
+          conversionId: linkId,
+          conversionName: name
+        });
+      });
+
+      dispatch(setConversionTrackedAction());
+    }
+  }, [trackEvent]);
+};

src/app/store/settings/actions.ts

@@ -7,3 +7,5 @@ export const setIsAnalyticsEnabledAction = createAction<boolean>('settings/SET_I
 export const toggleBalanceModeAction = createAction<BalanceMode>('settings/TOGGLE_BALANCE_MODE');
 
 export const setOnRampPossibilityAction = createAction<boolean>('settings/SET_ON_RAMP_POSSIBILITY_ACTION');
+
+export const setConversionTrackedAction = createAction<void>('settings/SET_CONVERSION_TRACKED');

src/app/store/settings/reducers.ts

@@ -1,6 +1,11 @@
 import { createReducer } from '@reduxjs/toolkit';
 
-import { setIsAnalyticsEnabledAction, setOnRampPossibilityAction, toggleBalanceModeAction } from './actions';
+import {
+  setConversionTrackedAction,
+  setIsAnalyticsEnabledAction,
+  setOnRampPossibilityAction,
+  toggleBalanceModeAction
+} from './actions';
 import { SettingsState, settingsInitialState } from './state';
 
 export const settingsReducer = createReducer<SettingsState>(settingsInitialState, builder => {
@@ -15,4 +20,8 @@ export const settingsReducer = createReducer<SettingsState>(settingsInitialState
     ...state,
     isOnRampPossibility
   }));
+  builder.addCase(setConversionTrackedAction, state => ({
+    ...state,
+    isConversionTracked: true
+  }));
 });

src/app/store/settings/selectors.ts

@@ -7,3 +7,5 @@ export const useAnalyticsEnabledSelector = () => useSelector(({ settings }) => s
 export const useBalanceModeSelector = () => useSelector(({ settings }) => settings.balanceMode);
 
 export const useOnRampPossibilitySelector = () => useSelector(({ settings }) => settings.isOnRampPossibility);
+
+export const useIsConversionTrackedSelector = () => useSelector(({ settings }) => settings.isConversionTracked);

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

@@ -4,5 +4,6 @@ export const mockSettingsState: SettingsState = {
   isAnalyticsEnabled: true,
   userId: '0',
   balanceMode: BalanceMode.Fiat,
-  isOnRampPossibility: false
+  isOnRampPossibility: false,
+  isConversionTracked: false
 };

src/app/store/settings/state.ts

@@ -10,11 +10,13 @@ export interface SettingsState {
   isAnalyticsEnabled: boolean;
   balanceMode: BalanceMode;
   isOnRampPossibility: boolean;
+  isConversionTracked: boolean;
 }
 
 export const settingsInitialState: SettingsState = {
   userId: nanoid(),
   isAnalyticsEnabled: true,
   balanceMode: BalanceMode.Fiat,
-  isOnRampPossibility: false
+  isOnRampPossibility: false,
+  isConversionTracked: false
 };

src/app/templates/partners-promotion/components/close-button.tsx

@@ -19,7 +19,7 @@ export const CloseButton = memo<CloseButtonProps>(({ onClick, variant }) => {
   return (
     <button
       className={clsx(
-        'w-4 h-4 flex justify-center items-center',
+        'w-4 h-4 flex justify-center items-center z-20',
         isImageAd ? 'absolute top-2 right-2 bg-blue-500 rounded-circle' : 'border border-gray-300 rounded'
       )}
       onClick={onClick}

src/app/templates/partners-promotion/components/hypelab-promotion/hypelab-image-promotion.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Banner } from '@hypelab/sdk-react';
 
@@ -26,6 +26,19 @@ export const HypelabImagePromotion: FC<Omit<SingleProviderPromotionProps, 'varia
   const [adIsReady, setAdIsReady] = useState(false);
   const [currentAd, setCurrentAd] = useState<HypelabBannerAd | null>(null);
   const prevAdUrlRef = useRef('');
+  const { backgroundAssetType, backgroundAssetUrl } = useMemo(() => {
+    const creativeSet = currentAd?.creative_set;
+
+    if (!creativeSet) {
+      return {};
+    }
+
+    if ('image' in creativeSet) {
+      return { backgroundAssetType: 'image' as const, backgroundAssetUrl: creativeSet.image.url };
+    }
+
+    return { backgroundAssetType: 'video' as const, backgroundAssetUrl: creativeSet.video.url };
+  }, [currentAd]);
 
   useAdTimeout(adIsReady, onError);
 
@@ -71,6 +84,8 @@ export const HypelabImagePromotion: FC<Omit<SingleProviderPromotionProps, 'varia
       providerTitle={AdsProviderTitle.HypeLab}
       pageName={pageName}
       onAdRectSeen={onAdRectSeen}
+      backgroundAssetUrl={backgroundAssetUrl}
+      backgroundAssetType={backgroundAssetType}
     >
       <div ref={hypelabBannerParentRef}>
         <Banner

src/app/templates/partners-promotion/components/image-promotion-view.tsx

@@ -9,7 +9,7 @@ import { useAccountPkh } from 'lib/temple/front';
 
 import { PartnersPromotionSelectors } from '../selectors';
 import { PartnersPromotionVariant } from '../types';
-import { AD_BANNER_HEIGHT, buildAdClickAnalyticsProperties } from '../utils';
+import { buildAdClickAnalyticsProperties } from '../utils';
 
 import { CloseButton } from './close-button';
 
@@ -18,6 +18,8 @@ interface Props extends PropsWithChildren {
   isVisible: boolean;
   providerTitle: AdsProviderTitle;
   pageName: string;
+  backgroundAssetUrl?: string;
+  backgroundAssetType?: 'image' | 'video';
   onAdRectSeen: EmptyFn;
   onClose: MouseEventHandler<HTMLButtonElement>;
 }
@@ -28,6 +30,8 @@ export const ImagePromotionView: FC<Props> = ({
   isVisible,
   providerTitle,
   pageName,
+  backgroundAssetUrl,
+  backgroundAssetType = 'image',
   onAdRectSeen,
   onClose
 }) => {
@@ -44,8 +48,7 @@ export const ImagePromotionView: FC<Props> = ({
   return (
     <Anchor
       className={clsx(
-        'relative w-full flex justify-center items-center rounded-xl',
-        `min-h-${AD_BANNER_HEIGHT}`,
+        'relative w-full rounded-xl overflow-hidden',
         'bg-gray-100 hover:bg-gray-200',
         !isVisible && 'invisible'
       )}
@@ -56,7 +59,29 @@ export const ImagePromotionView: FC<Props> = ({
       testID={PartnersPromotionSelectors.promoLink}
       testIDProperties={testIDProperties}
     >
-      {children}
+      {backgroundAssetUrl && (
+        <>
+          {backgroundAssetType === 'image' ? (
+            <img
+              className="absolute inset-0 w-full h-full object-cover filter blur-md"
+              src={backgroundAssetUrl}
+              alt=""
+            />
+          ) : (
+            <video
+              className="absolute inset-0 w-full h-full object-cover filter blur-md"
+              src={backgroundAssetUrl}
+              autoPlay
+              preload="auto"
+              playsInline
+              muted
+              loop
+            />
+          )}
+        </>
+      )}
+
+      <div className="w-full flex justify-center items-center z-10 relative">{children}</div>
 
       <ImageAdLabel />
 
@@ -65,10 +90,10 @@ export const ImagePromotionView: FC<Props> = ({
   );
 };
 
-export const ImageAdLabel: FC = () => (
+const ImageAdLabel: FC = () => (
   <div
     className={clsx(
-      'absolute top-0 left-0 px-3 rounded-tl-lg rounded-br-lg ',
+      'absolute top-0 left-0 px-3 rounded-tl-xl rounded-br-xl z-20',
       'bg-blue-500 text-2xs leading-snug font-semibold text-white'
     )}
   >

src/app/templates/partners-promotion/components/optimal-promotion.tsx

@@ -68,8 +68,9 @@ export const OptimalPromotion = memo<SingleProviderPromotionProps>(
           pageName={pageName}
           onClose={onClose}
           onAdRectSeen={onAdRectSeen}
+          backgroundAssetUrl={imageSrc}
         >
-          <img src={imageSrc} alt="Partners promotion" className="shadow-lg rounded-lg" onError={onImageError} />
+          <img src={imageSrc} alt="Partners promotion" className="rounded-xl" onError={onImageError} />
         </ImagePromotionView>
       );
     }