Feature: Add remote promo sheet (#5140)

* feat: initial work on generalizing promo sheet checks and remote promo sheet component * more work on remote promo sheets * update queries * Update arc.graphql to expose promoSheet and promoSheetCollection * update campaign checks and consume getPromoSheet query * write promoSheet and promoSheetCollection queries * add remote promo sheet route and name * add a couple mmkv STORAGE_IDS to control whether or not we show promos * add remote promo sheets feature flag * tweak remote promo sheet logic * fix signing remote images * more sanity checks and refetch interval * add RemotePromoSheetProvider and remove unnecessary campaignChecks * tweak checks and add Context/Provider for controlling remote promo sheets * re-enable firstLaunch and hasViewed checks * another sanity check * fix hasNonZeroAssetBalance * update check fns * add campaign storage to @storage model * update fns and remove some unused ones * update arc.graphql query to include priority * update provider and sheet to use @storage * add priority tag to collection query * update check for campaign to use @/storage and abstraction of check-fns to reduce boilerplate * adjust asset check fns * syncronize feature unlocks and campaign checks * add notifications promo and cleanup analytic events * add nft offers promo sheet and cleanup priority logic * fix conflicting nft offers asset type with contentful * replace PromoSheet analytics with v2 * revert graphql arc config change and cleanup local promo sheets * enable i18n in contentful and pass locale through * enable i18n clientside * update language * remove unused campaigns folder and uncomment check * remove unused campaigns folder * fix lint and func name * pass all locales through localized fields * change default colors to hex * add specific address for testing preview purposes * final touches * re-add hasShown check * add isPreviewing actionFn to bypass hasShown check * get color from theme if primary/secondary button has that prop * add network to asset check
rainbow-me · Nov 15, 2023 · b433c99 · b433c99
1 parent 593d9cb
commit b433c99
Show file tree

Hide file tree

Showing 40 changed files with 1,004 additions and 317 deletions.
diff --git a/src/App.js b/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>

diff --git a/src/analytics/event.ts b/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;

diff --git a/src/campaigns/swapsPromoCampaign.ts b/src/campaigns/swapsPromoCampaign.ts
diff --git a/src/components/PromoSheet.tsx b/src/components/PromoSheet.tsx
@@ -3,8 +3,8 @@ import { ImageSourcePropType, StatusBar, ImageBackground } from 'react-native';
 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 { CampaignKey } from '@/components/remote-promo-sheet/localCampaignChecks';
+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.

diff --git a/src/components/cards/NFTOffersCard/index.tsx b/src/components/cards/NFTOffersCard/index.tsx
@@ -253,7 +253,7 @@ export const NFTOffersCard = () => {
                       setCanRefresh(false);
                       queryClient.invalidateQueries(
                         nftOffersQueryKey({
-                          address: accountAddress,
+                          walletAddress: accountAddress,
                         })
                       );
                     }}