Data instrumentation refactor

apps/mobile/src/components/BackButton.tsx

@@ -19,6 +19,7 @@ export function BackButton({ onPress, size = 'md' }: Props) {
       size={size}
       eventElementId={null}
       eventName={null}
+      eventContext={null}
       icon={<BackIcon />}
       onPress={handlePress}
     />

apps/mobile/src/components/BottomSheetRow.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import { View } from 'react-native';
+
+import { GalleryElementTrackingProps } from '~/shared/contexts/AnalyticsContext';
+
+import { GalleryTouchableOpacity } from './GalleryTouchableOpacity';
+import { Typography } from './Typography';
+
+type BottomSheetRowProps = {
+  icon?: React.ReactNode;
+  text: string;
+  onPress: () => void;
+  style?: React.ComponentProps<typeof GalleryTouchableOpacity>['style'];
+  isConfirmationRow?: boolean;
+  fontWeight?: 'Regular' | 'Bold';
+  rightIcon?: React.ReactNode;
+  eventContext: GalleryElementTrackingProps['eventContext'];
+};
+
+export function BottomSheetRow({
+  icon,
+  text,
+  onPress,
+  style,
+  isConfirmationRow,
+  fontWeight = 'Regular',
+  rightIcon,
+  eventContext,
+}: BottomSheetRowProps) {
+  return (
+    <GalleryTouchableOpacity
+      onPress={onPress}
+      eventElementId="Bottom Sheet Row"
+      eventName="Bottom Sheet Row Press"
+      eventContext={eventContext}
+      properties={{ selection: text }}
+      style={style}
+    >
+      <View className="bg-offWhite dark:bg-black-800 p-3 flex-row items-center">
+        {icon && <View className="mr-2">{icon}</View>}
+        <Typography
+          font={{ family: 'ABCDiatype', weight: fontWeight }}
+          className={clsx(
+            'text-sm',
+            isConfirmationRow ? 'text-red' : 'text-black-900 dark:text-offWhite'
+          )}
+        >
+          {text}
+        </Typography>
+        {rightIcon && <View className="ml-auto">{rightIcon}</View>}
+      </View>
+    </GalleryTouchableOpacity>
+  );
+}

apps/mobile/src/components/Boundaries/TokenFailureBoundary/TokenFailureFallbacks.tsx

@@ -8,6 +8,7 @@ import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
 import { useTokenStateManagerContext } from '~/contexts/TokenStateManagerContext';
 import { TokenFailureFallbacksErrorFallbackFragment$key } from '~/generated/TokenFailureFallbacksErrorFallbackFragment.graphql';
 import { TokenFailureFallbacksLoadingFallbackFragment$key } from '~/generated/TokenFailureFallbacksLoadingFallbackFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 
 export type FallbackProps = {
   fallbackAspectSquare?: boolean;
@@ -80,6 +81,7 @@ export function TokenPreviewErrorFallback({
       onPress={handlePress}
       eventElementId="Refresh Broken Token Button"
       eventName="Refresh Broken Token Pressed"
+      eventContext={contexts.Error}
       activeOpacity={refreshable ? 0.2 : 1}
     >
       <Text

apps/mobile/src/components/ButtonChip.tsx

@@ -98,8 +98,10 @@ export function ButtonChip({
     <GalleryTouchableOpacity
       onPressIn={() => setActive(true)}
       onPressOut={() => setActive(false)}
+      // TODO: analytics this should be prop drilled
       eventElementId="Follow Button"
       eventName="Follow Button Clicked"
+      eventContext={null}
       activeOpacity={1}
       properties={{ variant, ...eventProperties }}
       onPress={onPress}

apps/mobile/src/components/CommunitiesList/CommunityCard.tsx

@@ -5,6 +5,7 @@ import { graphql } from 'relay-runtime';
 
 import { Typography } from '~/components/Typography';
 import { CommunityCardFragment$key } from '~/generated/CommunityCardFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import { Markdown } from '../Markdown';
@@ -48,6 +49,7 @@ export function CommunityCard({ communityRef, onPress }: CommunityCardProps) {
       className="flex flex-row items-center space-x-4 py-2 px-4"
       eventElementId="Community Name"
       eventName="Community Name Clicked"
+      eventContext={contexts.Community}
     >
       <CommunityProfilePicture communityRef={community} size="md" />
 

apps/mobile/src/components/Community/CommunityHeader.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
 import { CommunityHeaderFragment$key } from '~/generated/CommunityHeaderFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 import { truncateAddress } from '~/shared/utils/wallet';
 
 import { GalleryBottomSheetModalType } from '../GalleryBottomSheet/GalleryBottomSheetModal';
@@ -53,8 +54,9 @@ export function CommunityHeader({ communityRef }: Props) {
         <GalleryTouchableOpacity
           className="flex-1"
           onPress={handlePress}
-          eventElementId={null}
-          eventName={null}
+          eventElementId="Community Header"
+          eventName="Community Header Press"
+          eventContext={contexts.Community}
           disabled={!hasCommunityDescription}
         >
           <View>

apps/mobile/src/components/Community/CommunityMeta.tsx

@@ -18,6 +18,7 @@ import { CommunityMetaQueryFragment$key } from '~/generated/CommunityMetaQueryFr
 import { CommunityMetaRefetchQuery } from '~/generated/CommunityMetaRefetchQuery.graphql';
 import { PostIcon } from '~/navigation/MainTabNavigator/PostIcon';
 import { MainTabStackNavigatorProp } from '~/navigation/types';
+import { contexts } from '~/shared/analytics/constants';
 import colors from '~/shared/theme/colors';
 
 import { Button } from '../Button';
@@ -160,6 +161,7 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
           onPress={handleUsernamePress}
           eventElementId="Community Page Creator Username"
           eventName="Tapped Community Page Creator Username"
+          eventContext={contexts.Community}
         >
           {community.creator.__typename && <ProfilePicture userRef={community.creator} size="xs" />}
 
@@ -174,12 +176,20 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
     } else if (community.contractAddress) {
       return (
         <View className="flex flex-row items-center space-x-1">
-          <RawProfilePicture size="xs" default eventElementId={null} eventName={null} />
+          <RawProfilePicture
+            size="xs"
+            default
+            eventElementId="Community PFP"
+            eventName="Community PFP Press"
+            eventContext={contexts.Community}
+          />
           <LinkableAddress
             chainAddressRef={community.contractAddress}
-            type="Community Contract Address"
             textStyle={{ color: colorScheme === 'light' ? colors.black[800] : colors.offWhite }}
             font={{ family: 'ABCDiatype', weight: 'Bold' }}
+            eventElementId="Community Contract Address"
+            eventName="Community Contract Address Press"
+            eventContext={contexts.Community}
           />
         </View>
       );
@@ -228,8 +238,9 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
         variant={isMemberOfCommunity ? 'primary' : 'disabled'}
         icon={<PostIcon width={16} color={PostIconColor} strokeWidth={2} />}
         onPress={handlePress}
-        eventElementId={null}
-        eventName={null}
+        eventElementId="Attempt Create Post Button"
+        eventName="Attempt Create Post"
+        eventContext={contexts.Community}
       />
       <CommunityPostBottomSheet
         ref={bottomSheetRef}

apps/mobile/src/components/Community/CommunityPostBottomSheet.tsx

@@ -7,6 +7,7 @@ import { RefreshIcon } from 'src/icons/RefreshIcon';
 import { useSyncTokenstActions } from '~/contexts/SyncTokensContext';
 import { useToastActions } from '~/contexts/ToastContext';
 import { CommunityPostBottomSheetFragment$key } from '~/generated/CommunityPostBottomSheetFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 
 import { Button } from '../Button';
 import {
@@ -105,15 +106,22 @@ function CommunityPostBottomSheet(
               refreshing your collection.
             </Typography>
           </Text>
-          <Button text="Ok" onPress={closeBottomSheet} eventElementId={null} eventName={null} />
+          <Button
+            text="Ok"
+            onPress={closeBottomSheet}
+            eventElementId={null}
+            eventName={null}
+            eventContext={null}
+          />
           <Button
             text="Refresh collection"
             variant="secondary"
             loading={isSyncing}
             onPress={handleSync}
             icon={<RefreshIcon />}
-            eventElementId={null}
-            eventName={null}
+            eventElementId="Refresh Tokens From Community Screen Button"
+            eventName="Refresh Tokens From Community Screen"
+            eventContext={contexts.Posts}
           />
         </View>
       </View>

apps/mobile/src/components/Community/CommunityTabsHeader.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
 import { CommunityTabsHeaderFragment$key } from '~/generated/CommunityTabsHeaderFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 
 import { GalleryTabBar } from '../GalleryTabs/GalleryTabBar';
 
@@ -59,6 +60,7 @@ export function CommunityTabsHeader({ selectedRoute, onRouteChange, communityRef
         routes={routes}
         eventElementId="Community Tab"
         eventName="Community Tab Clicked"
+        eventContext={contexts.Community}
       />
     </View>
   );

apps/mobile/src/components/Community/CommunityView.tsx

@@ -5,6 +5,7 @@ import { graphql, useFragment } from 'react-relay';
 import { ShareIcon } from 'src/icons/ShareIcon';
 
 import { CommunityViewFragment$key } from '~/generated/CommunityViewFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 
 import { BackButton } from '../BackButton';
 import { GalleryTabsContainer } from '../GalleryTabs/GalleryTabsContainer';
@@ -93,6 +94,7 @@ export function CommunityView({ queryRef }: Props) {
           <IconContainer
             eventElementId="Community Share Icon"
             eventName="Community Share Icon Clicked"
+            eventContext={contexts.Community}
             icon={<ShareIcon />}
             onPress={handleShare}
           />

apps/mobile/src/components/Community/Tabs/CommunityViewPostsTab.tsx

@@ -19,6 +19,8 @@ import { Typography } from '~/components/Typography';
 import { CommunityViewPostsTabFragment$key } from '~/generated/CommunityViewPostsTabFragment.graphql';
 import { CommunityViewPostsTabQueryFragment$key } from '~/generated/CommunityViewPostsTabQueryFragment.graphql';
 import { MainTabStackNavigatorProp } from '~/navigation/types';
+import { contexts } from '~/shared/analytics/constants';
+import { noop } from '~/shared/utils/noop';
 
 import { CommunityPostBottomSheet } from '../CommunityPostBottomSheet';
 
@@ -115,7 +117,7 @@ export function CommunityViewPostsTab({ communityRef, queryRef }: Props) {
         itemId = item.eventId;
       }
 
-      const markFailure = () => (itemId ? markEventAsFailure(itemId) : () => {});
+      const markFailure = () => (itemId ? markEventAsFailure(itemId) : noop);
 
       return <FeedVirtualizedRow item={item} onFailure={markFailure} />;
     },
@@ -165,14 +167,15 @@ export function CommunityViewPostsTab({ communityRef, queryRef }: Props) {
           <Button
             text={'CREATE A POST'}
             onPress={handleCreatePost}
-            eventElementId={null}
-            eventName={null}
+            eventElementId="Empty View Create Post Button"
+            eventName="Empty View Create Post Button Press"
+            eventContext={contexts.Posts}
           />
 
           <CommunityPostBottomSheet
             ref={bottomSheetRef}
             communityRef={community}
-            onRefresh={() => {}}
+            onRefresh={noop}
           />
         </View>
       </View>

apps/mobile/src/components/UpsellBanner.tsx → apps/mobile/src/components/ConnectWalletUpsellBanner.tsx

@@ -6,21 +6,22 @@ import { graphql, useFragment } from 'react-relay';
 import { XMarkIcon } from 'src/icons/XMarkIcon';
 
 import { useManageWalletActions } from '~/contexts/ManageWalletContext';
-import { UpsellBannerFragment$key } from '~/generated/UpsellBannerFragment.graphql';
+import { ConnectWalletUpsellBannerFragment$key } from '~/generated/ConnectWalletUpsellBannerFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
 import colors from '~/shared/theme/colors';
 
 import { Button } from './Button';
 import { GalleryTouchableOpacity } from './GalleryTouchableOpacity';
 import { Typography } from './Typography';
 
 type Props = {
-  queryRef: UpsellBannerFragment$key;
+  queryRef: ConnectWalletUpsellBannerFragment$key;
 };
 
-export function UpsellBanner({ queryRef }: Props) {
+export function ConnectWalletUpsellBanner({ queryRef }: Props) {
   const query = useFragment(
     graphql`
-      fragment UpsellBannerFragment on Query {
+      fragment ConnectWalletUpsellBannerFragment on Query {
         viewer {
           ... on Viewer {
             user {
@@ -103,11 +104,13 @@ export function UpsellBanner({ queryRef }: Props) {
           fontWeight="Bold"
           eventElementId="Press Connect Wallet Upsell Banner"
           eventName="Press Connect Wallet Upsell Banner"
+          eventContext={contexts.Authentication}
         />
         <GalleryTouchableOpacity
           className="p-2"
           eventElementId="Close Connect Wallet Upsell Banner"
           eventName="Close Connect Wallet Upsell Banner"
+          eventContext={contexts.Authentication}
           onPress={handleDismissUpsellBanner}
         >
           <XMarkIcon color={colors.offWhite} />

apps/mobile/src/components/DarkModeToggle.tsx

@@ -2,6 +2,7 @@ import { useColorScheme } from 'nativewind';
 import { useCallback } from 'react';
 
 import { IconContainer } from '~/components/IconContainer';
+import { contexts } from '~/shared/analytics/constants';
 
 import { DarkModeIcon } from '../icons/DarkModeIcon';
 import { LightModeIcon } from '../icons/LightModeIcon';
@@ -17,8 +18,9 @@ export function DarkModeToggle() {
     <IconContainer
       icon={colorScheme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
       onPress={handlePress}
-      eventElementId={null}
-      eventName={null}
+      eventElementId="Dark Mode Toggle"
+      eventName="Toggle Dark Mode"
+      eventContext={contexts.Settings}
     />
   );
 }