TW-1166 Add 0xOptimal banner to 'Notifications' page

src/app/hooks/use-load-partners-promo.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { useAppEnv } from 'app/env';
+import { loadPartnersPromoAction } from 'app/store/partners-promotion/actions';
+import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors';
+import { useIsEnabledAdsBannerSelector } from 'app/store/settings/selectors';
+import { OptimalPromoVariantEnum } from 'lib/apis/optimal';
+import { useAccountPkh } from 'lib/temple/front';
+
+/**
+ * Loads partners promo if it should be shown
+ * @param variant If specified, will be used instead of the default value. The default value is
+ * `OptimalPromoVariantEnum.Fullview` for full view and `OptimalPromoVariantEnum.Popup` for popup.
+ */
+export const useLoadPartnersPromo = (variant?: OptimalPromoVariantEnum) => {
+  const { popup } = useAppEnv();
+  const accountAddress = useAccountPkh();
+  const isEnabledAdsBanner = useIsEnabledAdsBannerSelector();
+  const shouldShowPartnersPromoState = useShouldShowPartnersPromoSelector();
+  const dispatch = useDispatch();
+
+  const finalVariant = variant ?? (popup ? OptimalPromoVariantEnum.Popup : OptimalPromoVariantEnum.Fullview);
+
+  useEffect(() => {
+    if (shouldShowPartnersPromoState && !isEnabledAdsBanner) {
+      dispatch(
+        loadPartnersPromoAction.submit({
+          optimalPromoVariantEnum: finalVariant,
+          accountAddress
+        })
+      );
+    }
+  }, [shouldShowPartnersPromoState, isEnabledAdsBanner, accountAddress, dispatch, finalVariant]);
+};

src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx

@@ -4,17 +4,15 @@ import { ChainIds } from '@taquito/taquito';
 import { BigNumber } from 'bignumber.js';
 import clsx from 'clsx';
 import { isEqual } from 'lodash';
-import { useDispatch } from 'react-redux';
 
 import { SyncSpinner, Divider, Checkbox } from 'app/atoms';
 import DropdownWrapper from 'app/atoms/DropdownWrapper';
 import { PartnersPromotion, PartnersPromotionVariant } from 'app/atoms/partners-promotion';
 import { useAppEnv } from 'app/env';
 import { useBalancesWithDecimals } from 'app/hooks/use-balances-with-decimals.hook';
+import { useLoadPartnersPromo } from 'app/hooks/use-load-partners-promo';
 import { ReactComponent as EditingIcon } from 'app/icons/editing.svg';
 import { ReactComponent as SearchIcon } from 'app/icons/search.svg';
-import { loadPartnersPromoAction } from 'app/store/partners-promotion/actions';
-import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors';
 import { useIsEnabledAdsBannerSelector } from 'app/store/settings/selectors';
 import { ButtonForManageDropdown } from 'app/templates/ManageDropdown';
 import SearchAssetField from 'app/templates/SearchAssetField';
@@ -40,7 +38,6 @@ const LOCAL_STORAGE_TOGGLE_KEY = 'tokens-list:hide-zero-balances';
 const svgIconClassName = 'w-4 h-4 stroke-current fill-current text-gray-600';
 
 export const TokensTab: FC = () => {
-  const dispatch = useDispatch();
   const chainId = useChainId(true)!;
   const balances = useBalancesWithDecimals();
 
@@ -71,7 +68,6 @@ export const TokensTab: FC = () => {
   );
 
   const isEnabledAdsBanner = useIsEnabledAdsBannerSelector();
-  const isShouldShowPartnersPromoState = useShouldShowPartnersPromoSelector();
 
   const [searchFocused, setSearchFocused] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -100,16 +96,7 @@ export const TokensTab: FC = () => {
     return tokensJsx;
   }, [filteredAssets, activeAssetSlug, balances]);
 
-  useEffect(() => {
-    if (isShouldShowPartnersPromoState && !isEnabledAdsBanner) {
-      dispatch(
-        loadPartnersPromoAction.submit({
-          optimalPromoVariantEnum: OptimalPromoVariantEnum.Token,
-          accountAddress: publicKeyHash
-        })
-      );
-    }
-  }, [isShouldShowPartnersPromoState, isEnabledAdsBanner, publicKeyHash, dispatch]);
+  useLoadPartnersPromo(OptimalPromoVariantEnum.Token);
 
   useEffect(() => {
     if (activeIndex !== 0 && activeIndex >= filteredAssets.length) {

src/app/templates/activity/Activity.tsx

@@ -1,21 +1,17 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment } from 'react';
 
 import classNames from 'clsx';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { useDispatch } from 'react-redux';
 
 import { SyncSpinner } from 'app/atoms';
 import { PartnersPromotion, PartnersPromotionVariant } from 'app/atoms/partners-promotion';
 import { useAppEnv } from 'app/env';
+import { useLoadPartnersPromo } from 'app/hooks/use-load-partners-promo';
 import { ReactComponent as LayersIcon } from 'app/icons/layers.svg';
-import { loadPartnersPromoAction } from 'app/store/partners-promotion/actions';
-import { OptimalPromoVariantEnum } from 'lib/apis/optimal';
 import { T } from 'lib/i18n/react';
 import useActivities from 'lib/temple/activity-new/hook';
 import { useAccount } from 'lib/temple/front';
 
-import { useShouldShowPartnersPromoSelector } from '../../store/partners-promotion/selectors';
-import { useIsEnabledAdsBannerSelector } from '../../store/settings/selectors';
 import { ActivityItem } from './ActivityItem';
 
 const INITIAL_NUMBER = 30;
@@ -26,26 +22,13 @@ interface Props {
 }
 
 export const ActivityComponent: React.FC<Props> = ({ assetSlug }) => {
-  const dispatch = useDispatch();
   const { loading, reachedTheEnd, list: activities, loadMore } = useActivities(INITIAL_NUMBER, assetSlug);
 
   const { popup } = useAppEnv();
 
   const { publicKeyHash: accountAddress } = useAccount();
 
-  const isShouldShowPartnersPromoState = useShouldShowPartnersPromoSelector();
-  const isEnabledAdsBanner = useIsEnabledAdsBannerSelector();
-
-  useEffect(() => {
-    if (isShouldShowPartnersPromoState && !isEnabledAdsBanner) {
-      dispatch(
-        loadPartnersPromoAction.submit({
-          optimalPromoVariantEnum: OptimalPromoVariantEnum.Fullview,
-          accountAddress
-        })
-      );
-    }
-  }, [isShouldShowPartnersPromoState, isEnabledAdsBanner, dispatch, accountAddress]);
+  useLoadPartnersPromo();
 
   if (activities.length === 0 && !loading && reachedTheEnd) {
     return (

src/lib/notifications/components/notifications/index.tsx

@@ -1,11 +1,16 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import { useDispatch } from 'react-redux';
 
 import { DataPlaceholder } from 'app/atoms';
+import { PartnersPromotion, PartnersPromotionVariant } from 'app/atoms/partners-promotion';
+import { useLoadPartnersPromo } from 'app/hooks/use-load-partners-promo';
 import PageLayout from 'app/layouts/PageLayout';
+import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors';
+import { useIsEnabledAdsBannerSelector } from 'app/store/settings/selectors';
 import { T } from 'lib/i18n';
 import { BellIcon } from 'lib/icons';
+import { useTimeout } from 'lib/ui/hooks';
 
 import { viewAllNotificationsAction } from '../../store/actions';
 import { useNotificationsSelector } from '../../store/selectors';
@@ -16,12 +21,13 @@ const VIEW_ALL_NOTIFICATIONS_TIMEOUT = 5 * 1000;
 export const Notifications = () => {
   const dispatch = useDispatch();
   const notifications = useNotificationsSelector();
+  const isEnabledAdsBanner = useIsEnabledAdsBannerSelector();
+  const shouldShowPartnersPromoState = useShouldShowPartnersPromoSelector();
 
-  useEffect(() => {
-    const timer = setTimeout(() => void dispatch(viewAllNotificationsAction()), VIEW_ALL_NOTIFICATIONS_TIMEOUT);
+  const viewAllNotifications = useCallback(() => void dispatch(viewAllNotificationsAction()), [dispatch]);
 
-    return () => clearTimeout(timer);
-  }, [notifications]);
+  useTimeout(viewAllNotifications, VIEW_ALL_NOTIFICATIONS_TIMEOUT, true, [notifications]);
+  useLoadPartnersPromo();
 
   return (
     <PageLayout
@@ -34,6 +40,11 @@ export const Notifications = () => {
       contentContainerStyle={{ padding: 0 }}
     >
       <div className="max-w-sm mx-auto pb-15">
+        {shouldShowPartnersPromoState && !isEnabledAdsBanner && (
+          <div className="pt-6 pb-4 flex justify-center">
+            <PartnersPromotion variant={PartnersPromotionVariant.Image} />
+          </div>
+        )}
         {notifications.length === 0 ? (
           <DataPlaceholder id="notificationsNotFound" />
         ) : (

src/lib/ui/hooks/useTimeout.ts

@@ -1,14 +1,17 @@
 import { useEffect } from 'react';
 
+const DEFAULT_DEPS: unknown[] = [];
+
 /**
  * @arg callback // Must be memoized
  */
-export const useTimeout = (callback: EmptyFn, timeout: number, condition = true) => {
+export const useTimeout = (callback: EmptyFn, timeout: number, condition = true, deps = DEFAULT_DEPS) => {
   useEffect(() => {
     if (!condition) return;
 
     const timeoutId = setTimeout(callback, timeout);
 
     return () => void clearTimeout(timeoutId);
-  }, [condition, timeout, callback]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [condition, timeout, callback, ...deps]);
 };