[TW-1307] HypeLab advertising integration

.env.dist

@@ -19,3 +19,7 @@ TEZOS_DEXES_API_URL=wss://dexes-api-mainnet.stage.madfish.xyz
 TEMPLE_WALLET_ROUTE3_AUTH_TOKEN=
 
 DYNAMIC_LINKS_DOMAIN_URI_PREFIX=https://templenft.page.link
+
+HYPELAB_AD_FRAME_URL=
+HYPELAB_SMALL_PLACEMENT_SLUG=
+HYPELAB_NATIVE_PLACEMENT_SLUG=

.github/workflows/apk-build.yml

@@ -48,6 +48,9 @@ jobs:
           FIREBASE_GOOGLE_SERVICE_ANDROID: ${{ secrets.FIREBASE_GOOGLE_SERVICE_ANDROID }}
           FIREBASE_GOOGLE_SERVICE_IOS: ${{ secrets.FIREBASE_GOOGLE_SERVICE_IOS }}
           DYNAMIC_LINKS_DOMAIN_URI_PREFIX: ${{ secrets.DYNAMIC_LINKS_DOMAIN_URI_PREFIX }}
+          HYPELAB_AD_FRAME_URL: ${{ vars.HYPELAB_AD_FRAME_URL }}
+          HYPELAB_SMALL_PLACEMENT_SLUG: ${{ vars.HYPELAB_SMALL_PLACEMENT_SLUG }}
+          HYPELAB_NATIVE_PLACEMENT_SLUG: ${{ vars.HYPELAB_NATIVE_PLACEMENT_SLUG }}
           APPSTORE_AUTHKEY: ${{ secrets.APPSTORE_AUTHKEY }}
           GOOGLE_PLAY_AUTHKEY: ${{ secrets.GOOGLE_PLAY_AUTHKEY }}
           KEYSTORE_KEY: ${{ secrets.KEYSTORE_KEY }}

.github/workflows/fastlane-build.yml

@@ -44,6 +44,9 @@ jobs:
           FIREBASE_GOOGLE_SERVICE_ANDROID: ${{ secrets.FIREBASE_GOOGLE_SERVICE_ANDROID }}
           FIREBASE_GOOGLE_SERVICE_IOS: ${{ secrets.FIREBASE_GOOGLE_SERVICE_IOS }}
           DYNAMIC_LINKS_DOMAIN_URI_PREFIX: ${{ secrets.DYNAMIC_LINKS_DOMAIN_URI_PREFIX }}
+          HYPELAB_AD_FRAME_URL: ${{ vars.HYPELAB_AD_FRAME_URL }}
+          HYPELAB_SMALL_PLACEMENT_SLUG: ${{ vars.HYPELAB_SMALL_PLACEMENT_SLUG }}
+          HYPELAB_NATIVE_PLACEMENT_SLUG: ${{ vars.HYPELAB_NATIVE_PLACEMENT_SLUG }}
           APPSTORE_AUTHKEY: ${{ secrets.APPSTORE_AUTHKEY }}
           GOOGLE_PLAY_AUTHKEY: ${{ secrets.GOOGLE_PLAY_AUTHKEY }}
           KEYSTORE_KEY: ${{ secrets.KEYSTORE_KEY }}

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

@@ -29,6 +29,9 @@ runs:
         TEMPLE_WALLET_ROUTE3_AUTH_TOKEN=${{ inputs.TEMPLE_WALLET_ROUTE3_AUTH_TOKEN }}
 
         DYNAMIC_LINKS_DOMAIN_URI_PREFIX=${{ inputs.DYNAMIC_LINKS_DOMAIN_URI_PREFIX }}
+        HYPELAB_AD_FRAME_URL=${{ inputs.HYPELAB_AD_FRAME_URL }}
+        HYPELAB_SMALL_PLACEMENT_SLUG=${{ inputs.HYPELAB_SMALL_PLACEMENT_SLUG }}
+        HYPELAB_NATIVE_PLACEMENT_SLUG=${{ inputs.HYPELAB_NATIVE_PLACEMENT_SLUG }}
         APK_BUILD_ID=${{ inputs.APK_BUILD_ID }}
         EOF
 

.github/workflows/testapp-build.yml

@@ -54,6 +54,9 @@ jobs:
           FIREBASE_GOOGLE_SERVICE_ANDROID: ${{ secrets.FIREBASE_GOOGLE_SERVICE_ANDROID }}
           FIREBASE_GOOGLE_SERVICE_IOS: ${{ secrets.FIREBASE_GOOGLE_SERVICE_IOS }}
           DYNAMIC_LINKS_DOMAIN_URI_PREFIX: ${{ secrets.DYNAMIC_LINKS_DOMAIN_URI_PREFIX }}
+          HYPELAB_AD_FRAME_URL: ${{ vars.HYPELAB_AD_FRAME_URL }}
+          HYPELAB_SMALL_PLACEMENT_SLUG: ${{ vars.HYPELAB_SMALL_PLACEMENT_SLUG }}
+          HYPELAB_NATIVE_PLACEMENT_SLUG: ${{ vars.HYPELAB_NATIVE_PLACEMENT_SLUG }}
           APPSTORE_AUTHKEY: ${{ secrets.APPSTORE_AUTHKEY }}
           GOOGLE_PLAY_AUTHKEY: ${{ secrets.GOOGLE_PLAY_AUTHKEY }}
           KEYSTORE_KEY: ${{ secrets.KEYSTORE_KEY }}

src/components/activity-groups-list/activity-group-item/activity-group-item.styles.ts

@@ -3,6 +3,7 @@ import { formatSize } from '../../../styles/format-size';
 
 export const useActivityGroupItemStyles = createUseStyles(({ colors }) => ({
   container: {
+    marginLeft: formatSize(16),
     borderBottomColor: colors.lines,
     borderBottomWidth: formatSize(0.5),
     paddingRight: formatSize(16)

src/components/activity-groups-list/activity-groups-list.styles.ts

@@ -5,21 +5,22 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography
   contentContainer: {
     flex: 1,
     paddingTop: formatSize(8),
-    paddingBottom: formatSize(16),
-    paddingLeft: formatSize(16)
+    paddingBottom: formatSize(16)
   },
   adContainer: {
     paddingBottom: formatSize(12),
-    paddingHorizontal: formatSize(16)
+    paddingRight: formatSize(16)
   },
   sectionHeaderText: {
     ...typography.numbersMedium13,
     color: colors.gray2,
     backgroundColor: colors.pageBG,
-    paddingVertical: formatSize(4)
+    paddingVertical: formatSize(4),
+    marginLeft: formatSize(16)
   },
   promotionItemWrapper: {
     paddingVertical: formatSize(12),
+    marginLeft: formatSize(16),
     borderBottomWidth: formatSize(0.5),
     borderBottomColor: colors.lines
   },
@@ -35,7 +36,7 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography
   additionalLoader: {
     paddingTop: formatSize(16)
   },
-  promotionItem: {
-    width: formatSize(343)
+  listPromotionItem: {
+    marginRight: formatSize(16)
   }
 }));

src/components/activity-groups-list/activity-groups-list.tsx

@@ -1,13 +1,16 @@
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { ActivityIndicator, Text, View } from 'react-native';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, LayoutChangeEvent, Text, View } from 'react-native';
 
 import { DataPlaceholder } from 'src/components/data-placeholder/data-placeholder';
-import { OptimalPromotionItem } from 'src/components/optimal-promotion-item/optimal-promotion-item';
+import { PromotionItem } from 'src/components/promotion-item';
 import { RefreshControl } from 'src/components/refresh-control/refresh-control';
 import { emptyFn } from 'src/config/general';
+import { useAdTemporaryHiding } from 'src/hooks/use-ad-temporary-hiding.hook';
 import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-props.hook';
-import { usePartnersPromoLoad } from 'src/hooks/use-partners-promo';
+import { useInternalAdsAnalytics } from 'src/hooks/use-internal-ads-analytics.hook';
+import { useListElementIntersection } from 'src/hooks/use-list-element-intersection.hook';
+import { useOutsideOfListIntersection } from 'src/hooks/use-outside-of-list-intersection.hook';
 import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface';
 import { useIsPartnersPromoEnabledSelector } from 'src/store/partners-promotion/partners-promotion-selectors';
 import { isTheSameDay, isToday, isYesterday } from 'src/utils/date.utils';
@@ -19,37 +22,50 @@ import { useActivityGroupsListStyles } from './activity-groups-list.styles';
 
 type ListItem = string | ActivityGroup;
 
-const keyExtractor = (item: ListItem) => (typeof item === 'string' ? item : item[0].hash);
 const getItemType = (item: ListItem) => (typeof item === 'string' ? 'sectionHeader' : 'row');
 
 const ListEmptyComponent = <DataPlaceholder text="No Activity records were found" />;
 
 const AVERAGE_ITEM_HEIGHT = 150;
-export const PROMOTION_ID = 'activities-promotion';
+const PROMOTION_ID = 'activities-promotion';
 
 interface Props {
   activityGroups: ActivityGroup[];
   isAllLoaded?: boolean;
   isLoading?: boolean;
   handleUpdate?: () => void;
+  pageName: string;
 }
 
 export const ActivityGroupsList: FC<Props> = ({
   activityGroups,
   isAllLoaded = false,
   isLoading = false,
-  handleUpdate = emptyFn
+  handleUpdate = emptyFn,
+  pageName
 }) => {
-  usePartnersPromoLoad(PROMOTION_ID);
-
   const styles = useActivityGroupsListStyles();
 
   const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
+  const { isHiddenTemporarily } = useAdTemporaryHiding(PROMOTION_ID);
   const fakeRefreshControlProps = useFakeRefreshControlProps();
   const [endIsReached, setEndIsReached] = useState(false);
   const [loadingEnded, setLoadingEnded] = useState(!isLoading);
   const [promotionErrorOccurred, setPromotionErrorOccurred] = useState(false);
-  const shouldShowPromotion = partnersPromotionEnabled && !promotionErrorOccurred;
+  const shouldShowPromotion = partnersPromotionEnabled && !promotionErrorOccurred && !isHiddenTemporarily;
+
+  const keyExtractor = useCallback(
+    (item: ListItem, index: number) => {
+      const keyRoot = typeof item === 'string' ? item : item[0].hash;
+
+      if (index === 1 && shouldShowPromotion) {
+        return `${keyRoot}-with-promotion`;
+      }
+
+      return keyRoot;
+    },
+    [shouldShowPromotion]
+  );
 
   useEffect(() => {
     if (!isLoading) {
@@ -63,7 +79,7 @@ export const ActivityGroupsList: FC<Props> = ({
   }, [handleUpdate]);
   useEffect(() => setEndIsReached(false), [activityGroups]);
 
-  const onOptimalPromotionError = useCallback(() => setPromotionErrorOccurred(true), []);
+  const handlePromotionError = useCallback(() => setPromotionErrorOccurred(true), []);
 
   const sections = useMemo(() => {
     const result: ListItem[] = [];
@@ -89,20 +105,55 @@ export const ActivityGroupsList: FC<Props> = ({
 
     return result;
   }, [activityGroups]);
+  const shouldRenderList = sections.length > 0;
+
+  const adRef = useRef<View>(null);
+  const separateAdParentRef = useRef<View>(null);
+
+  const { onAdLoad, resetAdState, onIsVisible } = useInternalAdsAnalytics(pageName);
+  const {
+    onListScroll,
+    onElementLayoutChange: onListAdLayoutChange,
+    onListLayoutChange,
+    onUnmount: onListAdUnmount
+  } = useListElementIntersection(onIsVisible);
+  const { onElementOrParentLayout: onSeparateAdOrParentLayout, onUnmount: onSeparateAdUnmount } =
+    useOutsideOfListIntersection(separateAdParentRef, adRef, onIsVisible);
+
+  useEffect(() => {
+    if (shouldRenderList) {
+      onSeparateAdUnmount();
+    } else {
+      onListAdUnmount();
+    }
+    resetAdState();
+  }, [onListAdUnmount, onSeparateAdUnmount, resetAdState, shouldRenderList]);
+
+  const handlePromotionLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (shouldRenderList) {
+        onListAdLayoutChange(e);
+      } else {
+        onSeparateAdOrParentLayout();
+      }
+    },
+    [onListAdLayoutChange, onSeparateAdOrParentLayout, shouldRenderList]
+  );
 
   const Promotion = useMemo(
     () => (
-      <View style={styles.promotionItemWrapper}>
-        <OptimalPromotionItem
+      <View style={styles.promotionItemWrapper} onLayout={handlePromotionLayout}>
+        <PromotionItem
           id={PROMOTION_ID}
-          style={styles.promotionItem}
+          style={shouldRenderList && styles.listPromotionItem}
           testID={ActivityGroupsListSelectors.promotion}
-          onImageError={onOptimalPromotionError}
-          onEmptyPromotionReceived={onOptimalPromotionError}
+          ref={adRef}
+          onError={handlePromotionError}
+          onLoad={onAdLoad}
         />
       </View>
     ),
-    [onOptimalPromotionError, styles]
+    [styles, shouldRenderList, handlePromotionLayout, handlePromotionError, onAdLoad]
   );
 
   const renderItem: ListRenderItem<string | ActivityGroup> = useCallback(
@@ -129,14 +180,16 @@ export const ActivityGroupsList: FC<Props> = ({
     [shouldRenderAdditionalLoader, styles.additionalLoader]
   );
 
-  if (sections.length > 0) {
+  if (shouldRenderList) {
     return (
       <View style={styles.contentContainer}>
         <FlashList
           data={sections}
           stickyHeaderIndices={stickyHeaderIndices}
           onEndReachedThreshold={0.01}
           onEndReached={handleEndReached}
+          onLayout={onListLayoutChange}
+          onScroll={onListScroll}
           keyExtractor={keyExtractor}
           renderItem={renderItem}
           estimatedItemSize={AVERAGE_ITEM_HEIGHT}
@@ -150,7 +203,11 @@ export const ActivityGroupsList: FC<Props> = ({
 
   return (
     <>
-      {shouldShowPromotion && <View style={styles.adContainer}>{Promotion}</View>}
+      {shouldShowPromotion && (
+        <View style={styles.adContainer} ref={separateAdParentRef} onLayout={onSeparateAdOrParentLayout}>
+          {Promotion}
+        </View>
+      )}
       <View style={styles.emptyListWrapper}>
         {loadingEnded ? (
           ListEmptyComponent