Feature: Add remote promo sheet

src/App.js

@@ -32,10 +32,7 @@ import { Playground } from './design-system/playground/Playground';
 import { TransactionType } from './entities';
 import appEvents from './handlers/appEvents';
 import handleDeeplink from './handlers/deeplinks';
-import {
-  runFeatureAndCampaignChecks,
-  runWalletBackupStatusChecks,
-} from './handlers/walletReadyEvents';
+import { runWalletBackupStatusChecks } from './handlers/walletReadyEvents';
 import {
   getCachedProviderForNetwork,
   isHardHat,
@@ -85,6 +82,7 @@ import branch from 'react-native-branch';
 import { initializeReservoirClient } from '@/resources/reservoir/client';
 import { ReviewPromptAction } from '@/storage/schema';
 import { handleReviewPromptAction } from '@/utils/reviewAlert';
+import { RemotePromoSheetProvider } from '@/components/remote-promo-sheet/RemotePromoSheetProvider';
 
 if (__DEV__) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
@@ -187,15 +185,6 @@ class OldApp extends Component {
       // Everything we need to do after the wallet is ready goes here
       logger.info('✅ Wallet ready!');
       runWalletBackupStatusChecks();
-
-      InteractionManager.runAfterInteractions(() => {
-        setTimeout(() => {
-          if (IS_TESTING === 'true') {
-            return;
-          }
-          runFeatureAndCampaignChecks();
-        }, 2000);
-      });
     }
   }
 
@@ -284,13 +273,15 @@ class OldApp extends Component {
       <Portal>
         <View style={containerStyle}>
           {this.state.initialRoute && (
-            <InitialRouteContext.Provider value={this.state.initialRoute}>
-              <RoutesComponent
-                onReady={this.handleSentryNavigationIntegration}
-                ref={this.handleNavigatorRef}
-              />
-              <PortalConsumer />
-            </InitialRouteContext.Provider>
+            <RemotePromoSheetProvider isWalletReady={this.props.walletReady}>
+              <InitialRouteContext.Provider value={this.state.initialRoute}>
+                <RoutesComponent
+                  onReady={this.handleSentryNavigationIntegration}
+                  ref={this.handleNavigatorRef}
+                />
+                <PortalConsumer />
+              </InitialRouteContext.Provider>
+            </RemotePromoSheetProvider>
           )}
           <OfflineToast />
         </View>

src/analytics/event.ts

@@ -13,6 +13,8 @@ export const event = {
   appStateChange: 'State change',
   analyticsTrackingDisabled: 'analytics_tracking.disabled',
   analyticsTrackingEnabled: 'analytics_tracking.enabled',
+  promoSheetShown: 'promo_sheet.shown',
+  promoSheetDismissed: 'promo_sheet.dismissed',
   swapSubmitted: 'Submitted Swap',
   // notification promo sheet was shown
   notificationsPromoShown: 'notifications_promo.shown',
@@ -120,6 +122,14 @@ export type EventProperties = {
     inputCurrencySymbol: string;
     outputCurrencySymbol: string;
   };
+  [event.promoSheetShown]: {
+    campaign: string;
+    time_viewed: number;
+  };
+  [event.promoSheetDismissed]: {
+    campaign: string;
+    time_viewed: number;
+  };
   [event.notificationsPromoShown]: undefined;
   [event.notificationsPromoPermissionsBlocked]: undefined;
   [event.notificationsPromoPermissionsGranted]: undefined;

src/components/PromoSheet.tsx

@@ -4,7 +4,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { SheetActionButton, SheetHandle, SlackSheet } from '@/components/sheet';
 import { CampaignKey } from '@/campaigns/campaignChecks';
-import { analytics } from '@/analytics';
+import { analyticsV2 } from '@/analytics';
 import {
   AccentColorProvider,
   Box,
@@ -38,7 +38,7 @@ type PromoSheetProps = {
   backgroundColor: string;
   accentColor: string;
   sheetHandleColor?: string;
-  campaignKey: CampaignKey;
+  campaignKey: CampaignKey | string;
   header: string;
   subHeader: string;
   primaryButtonProps: SheetActionButtonProps;
@@ -74,7 +74,7 @@ export function PromoSheet({
     () => () => {
       if (!activated) {
         const timeElapsed = (Date.now() - renderedAt) / 1000;
-        analytics.track('Dismissed Feature Promo', {
+        analyticsV2.track(analyticsV2.event.promoSheetDismissed, {
           campaign: campaignKey,
           time_viewed: timeElapsed,
         });
@@ -86,12 +86,12 @@ export function PromoSheet({
   const primaryButtonOnPress = useCallback(() => {
     activate();
     const timeElapsed = (Date.now() - renderedAt) / 1000;
-    analytics.track('Activated Feature Promo Action', {
+    analyticsV2.track(analyticsV2.event.promoSheetShown, {
       campaign: campaignKey,
       time_viewed: timeElapsed,
     });
     primaryButtonProps.onPress();
-  }, [activate, campaignKey, primaryButtonProps.onPress, renderedAt]);
+  }, [activate, campaignKey, primaryButtonProps, renderedAt]);
 
   // We are not using `isSmallPhone` from `useDimensions` here as we
   // want to explicitly set a min height.

src/components/remote-promo-sheet/RemotePromoSheet.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useEffect } from 'react';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import { get } from 'lodash';
+
+import { useNavigation } from '@/navigation/Navigation';
+import { PromoSheet } from '@/components/PromoSheet';
+import { useTheme } from '@/theme';
+import { CampaignCheckResult } from './checkForCampaign';
+import { usePromoSheetQuery } from '@/resources/promoSheet/promoSheetQuery';
+import { maybeSignUri } from '@/handlers/imgix';
+import { campaigns } from '@/storage';
+import { delay } from '@/utils/delay';
+import { Linking } from 'react-native';
+import Routes from '@/navigation/routesNames';
+import { Language } from '@/languages';
+import { useAccountSettings } from '@/hooks';
+
+const DEFAULT_HEADER_HEIGHT = 285;
+const DEFAULT_HEADER_WIDTH = 390;
+
+type RootStackParamList = {
+  RemotePromoSheet: CampaignCheckResult;
+};
+
+const enum ButtonType {
+  Internal = 'Internal',
+  External = 'External',
+}
+
+export const convertLanguageToLocale = (language: Language) => {
+  if (language === Language.AR_AR) {
+    return 'ar';
+  }
+
+  return language.replace('_', '-');
+};
+
+export function RemotePromoSheet() {
+  const { colors } = useTheme();
+  const { goBack, navigate } = useNavigation();
+  const { params } = useRoute<
+    RouteProp<RootStackParamList, 'RemotePromoSheet'>
+  >();
+  const { campaignId, campaignKey } = params;
+  const { language } = useAccountSettings();
+
+  useEffect(() => {
+    return () => {
+      campaigns.set(['isCurrentlyShown'], false);
+    };
+  }, []);
+
+  const { data, error } = usePromoSheetQuery(
+    {
+      id: campaignId,
+      locale: convertLanguageToLocale(language as Language),
+    },
+    {
+      enabled: !!campaignId,
+    }
+  );
+
+  const getButtonForType = (type: ButtonType) => {
+    switch (type) {
+      default:
+      case ButtonType.Internal:
+        return () => internalNavigation();
+      case ButtonType.External:
+        return () => externalNavigation();
+    }
+  };
+
+  const externalNavigation = useCallback(() => {
+    Linking.openURL(data?.promoSheet?.primaryButtonProps.props.url);
+  }, []);
+
+  const internalNavigation = useCallback(() => {
+    goBack();
+
+    delay(300).then(() =>
+      navigate(
+        (Routes as any)[data?.promoSheet?.primaryButtonProps.props.route],
+        {
+          ...(data?.promoSheet?.primaryButtonProps.props.options || {}),
+        }
+      )
+    );
+  }, [goBack, navigate, data?.promoSheet]);
+
+  if (!data?.promoSheet || error) {
+    return null;
+  }
+
+  const {
+    accentColor: accentColorString,
+    backgroundColor: backgroundColorString,
+    sheetHandleColor: sheetHandleColorString,
+    backgroundImage,
+    headerImage,
+    headerImageAspectRatio,
+    header,
+    items,
+    primaryButtonProps,
+    secondaryButtonProps,
+    subHeader,
+  } = data.promoSheet;
+
+  const accentColor =
+    (colors as { [key: string]: any })[accentColorString as string] ??
+    colors.whiteLabel;
+
+  const backgroundColor =
+    (colors as { [key: string]: any })[backgroundColorString as string] ??
+    colors.trueBlack;
+
+  const sheetHandleColor =
+    (colors as { [key: string]: any })[sheetHandleColorString as string] ??
+    colors.trueBlack;
+
+  const backgroundSignedImageUrl = backgroundImage?.url
+    ? maybeSignUri(backgroundImage.url)
+    : undefined;
+
+  const headerSignedImageUrl = headerImage?.url
+    ? maybeSignUri(headerImage.url)
+    : undefined;
+
+  return (
+    <PromoSheet
+      accentColor={accentColor}
+      backgroundColor={backgroundColor}
+      backgroundImage={
+        backgroundSignedImageUrl ? { uri: backgroundSignedImageUrl } : undefined
+      }
+      campaignKey={campaignKey}
+      headerImage={{ uri: headerSignedImageUrl }}
+      headerImageAspectRatio={
+        headerImageAspectRatio ?? DEFAULT_HEADER_WIDTH / DEFAULT_HEADER_HEIGHT
+      }
+      sheetHandleColor={sheetHandleColor}
+      header={header ?? ''}
+      subHeader={subHeader ?? ''}
+      primaryButtonProps={{
+        ...primaryButtonProps,
+        onPress: getButtonForType(data.promoSheet.primaryButtonProps.type),
+      }}
+      secondaryButtonProps={{
+        ...secondaryButtonProps,
+        onPress: goBack,
+      }}
+      items={items.map((item: any) => {
+        if (item.gradient) {
+          if (item.gradient.includes('.')) {
+            const gradient = get(colors, item.gradient);
+
+            return {
+              ...item,
+              gradient,
+            };
+          }
+
+          const gradient =
+            (colors as { [key: string]: any }).gradients[item.gradient] ??
+            undefined;
+
+          return {
+            ...item,
+            gradient,
+          };
+        }
+
+        return item;
+      })}
+    />
+  );
+}

src/components/remote-promo-sheet/RemotePromoSheetProvider.tsx

@@ -0,0 +1,78 @@
+import React, {
+  useEffect,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+} from 'react';
+import { IS_TESTING } from 'react-native-dotenv';
+import { InteractionManager } from 'react-native';
+import { noop } from 'lodash';
+
+import { REMOTE_PROMO_SHEETS, useExperimentalFlag } from '@/config';
+import { logger } from '@/logger';
+import { campaigns } from '@/storage';
+import { checkForCampaign } from '@/components/remote-promo-sheet/checkForCampaign';
+import { runFeatureUnlockChecks } from '@/handlers/walletReadyEvents';
+import { runLocalCampaignChecks } from './localCampaignChecks';
+
+interface WalletReadyContext {
+  isWalletReady: boolean;
+  runChecks: () => void;
+}
+
+export const RemotePromoSheetContext = createContext<WalletReadyContext>({
+  isWalletReady: false,
+  runChecks: noop,
+});
+
+type WalletReadyProvider = PropsWithChildren & WalletReadyContext;
+
+export const RemotePromoSheetProvider = ({
+  isWalletReady = false,
+  children,
+}: WalletReadyProvider) => {
+  const remotePromoSheets = useExperimentalFlag(REMOTE_PROMO_SHEETS);
+
+  const runChecks = useCallback(async () => {
+    if (!isWalletReady) return;
+
+    InteractionManager.runAfterInteractions(async () => {
+      setTimeout(async () => {
+        if (IS_TESTING === 'true') return;
+
+        // Stop checking for promo sheets if the exp. flag is toggled off
+        if (!remotePromoSheets) {
+          logger.info('Campaigns: remote promo sheets is disabled');
+          return;
+        }
+
+        const showedFeatureUnlock = await runFeatureUnlockChecks();
+        if (showedFeatureUnlock) return;
+
+        const showedLocalPromo = await runLocalCampaignChecks();
+        if (showedLocalPromo) return;
+
+        checkForCampaign();
+      }, 2_000);
+    });
+  }, [isWalletReady, remotePromoSheets]);
+
+  useEffect(() => {
+    runChecks();
+
+    return () => {
+      campaigns.remove(['lastShownTimestamp']);
+      campaigns.set(['isCurrentlyShown'], false);
+    };
+  }, [runChecks]);
+
+  return (
+    <RemotePromoSheetContext.Provider value={{ isWalletReady, runChecks }}>
+      {children}
+    </RemotePromoSheetContext.Provider>
+  );
+};
+
+export const useRemotePromoSheetContext = () =>
+  useContext(RemotePromoSheetContext);

src/components/remote-promo-sheet/check-fns/hasNftOffers.ts

@@ -0,0 +1,15 @@
+import store from '@/redux/store';
+import { fetchNftOffers } from '@/resources/reservoir/nftOffersQuery';
+
+export async function hasNftOffers(): Promise<boolean> {
+  const { accountAddress } = store.getState().settings;
+
+  try {
+    const data = await fetchNftOffers({ walletAddress: accountAddress });
+    if (!data?.nftOffers) return false;
+
+    return data?.nftOffers?.length > 1;
+  } catch (e) {
+    return false;
+  }
+}