refactor loading hierarchy for nft selector (#2341)

gallery-so · Feb 29, 2024 · faee67a · faee67a
1 parent d47669e
commit faee67a
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 139 deletions.
diff --git a/apps/mobile/src/components/PfpPicker/PfpBottomSheet.tsx b/apps/mobile/src/components/PfpPicker/PfpBottomSheet.tsx
@@ -117,7 +117,7 @@ function PfpBottomSheet(
   }, [ensAddress, reportError, setEnsProfileImage]);
 
   const handleChooseFromCollectionPress = useCallback(() => {
-    navigation.navigate('ProfilePicturePicker', {
+    navigation.navigate('NftSelector', {
       page: 'ProfilePicture',
     });
   }, [navigation]);

diff --git a/apps/mobile/src/navigation/MainTabNavigator/TabBar.tsx b/apps/mobile/src/navigation/MainTabNavigator/TabBar.tsx
@@ -241,7 +241,7 @@ function LazyPostIcon(props: TabItemProps) {
   const handlePressOverride = useCallback(() => {
     if (userHasWallet) {
       props.navigation.navigate('PostNftSelector', {
-        screen: 'Post',
+        page: 'Post',
         fullScreen: true,
       });
       return;
@@ -251,7 +251,7 @@ function LazyPostIcon(props: TabItemProps) {
       title: 'You need to connect a wallet to post',
       onSuccess: () => {
         props.navigation.navigate('PostNftSelector', {
-          screen: 'Post',
+          page: 'Post',
           fullScreen: true,
         });
       },

diff --git a/apps/mobile/src/navigation/MainTabStackNavigator.tsx b/apps/mobile/src/navigation/MainTabStackNavigator.tsx
@@ -35,7 +35,7 @@ export function MainTabStackNavigator({ initialRouteName, initialProfileParams }
       <Stack.Screen name="Collection" component={CollectionScreen} />
       <Stack.Screen name="FeedEvent" component={FeedEventScreen} />
       <Stack.Screen name="Community" component={CommunityScreen} />
-      <Stack.Screen name="ProfilePicturePicker" component={NftSelectorPickerScreen} />
+      <Stack.Screen name="NftSelector" component={NftSelectorPickerScreen} />
       <Stack.Screen name="NftSelectorContractScreen" component={NftSelectorContractScreen} />
       <Stack.Screen name="SettingsProfile" component={SettingsProfileScreen} />
       <Stack.Screen name="Post" component={PostScreen} />

diff --git a/apps/mobile/src/navigation/types.ts b/apps/mobile/src/navigation/types.ts
@@ -48,7 +48,7 @@ export type MainTabStackNavigatorParamList = {
     projectId?: string;
   };
 
-  ProfilePicturePicker: {
+  NftSelector: {
     fullScreen?: boolean;
     page: ScreenWithNftSelector;
   };

diff --git a/apps/mobile/src/screens/NftSelectorScreen/CreatorSupportAnnouncementBottomSheet.tsx b/apps/mobile/src/screens/NftSelectorScreen/CreatorSupportAnnouncementBottomSheet.tsx
diff --git a/apps/mobile/src/screens/NftSelectorScreen/CreatorSupportAnnouncementBottomSheetModal.tsx b/apps/mobile/src/screens/NftSelectorScreen/CreatorSupportAnnouncementBottomSheetModal.tsx
@@ -0,0 +1,60 @@
+import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
+import { View } from 'react-native';
+
+import { Button } from '~/components/Button';
+import { GalleryLink } from '~/components/GalleryLink';
+import { useSafeAreaPadding } from '~/components/SafeAreaViewWithPadding';
+import { Typography } from '~/components/Typography';
+import { contexts } from '~/shared/analytics/constants';
+
+const SNAP_POINTS = ['CONTENT_HEIGHT'];
+
+type Props = {
+  onClose: () => void;
+};
+
+export default function CreatorSupportAnnouncementBottomSheet({ onClose }: Props) {
+  const { handleContentLayout } = useBottomSheetDynamicSnapPoints(SNAP_POINTS);
+
+  const { bottom } = useSafeAreaPadding();
+
+  return (
+    <View
+      onLayout={handleContentLayout}
+      style={{ paddingBottom: bottom }}
+      className="p-4 flex flex-col space-y-6"
+    >
+      <View className="flex flex-col space-y-3">
+        <Typography
+          className="text-5xl text-center -tracking-[2]"
+          font={{ family: 'GTAlpina', weight: 'Light' }}
+        >
+          Gallery for Creators is now in beta
+        </Typography>
+        <Typography
+          className="text-center text-sm leading-6"
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+        >
+          Welcome to our new creator support feature, currently in beta. Share and display works
+          you’ve created on Gallery. Learn more about how it works in{' '}
+          <GalleryLink
+            href="https://gallery-so.notion.site/Creator-FAQs-22b6a0cd877946efb06f25ce4a70cb5a"
+            eventElementId={'Creator Support Announcement Bottom Sheet FAQ Link'}
+            eventName={'Opened Creator Support Announcement Bottom Sheet FAQ Link'}
+            eventContext={contexts.Posts}
+          >
+            our FAQ here
+          </GalleryLink>
+          .
+        </Typography>
+      </View>
+      <Button
+        text="Continue"
+        onPress={onClose}
+        eventElementId={'Creator Support Announcement Bottom Sheet Continue Button'}
+        eventName={'Pressed Creator Support Announcement Bottom Sheet Continue Button'}
+        eventContext={contexts.Posts}
+      />
+    </View>
+  );
+}
diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
@@ -4,7 +4,7 @@ import { ResizeMode } from 'expo-av';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, ViewProps } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useFragment } from 'react-relay';
+import { useFragment, useLazyLoadQuery } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
 import { TokenFailureBoundary } from '~/components/Boundaries/TokenFailureBoundary/TokenFailureBoundary';
@@ -16,8 +16,8 @@ import { NftPreviewAssetToWrapInBoundary } from '~/components/NftPreview/NftPrev
 import { Typography } from '~/components/Typography';
 import { useManageWalletActions } from '~/contexts/ManageWalletContext';
 import { useSyncTokensActions } from '~/contexts/SyncTokensContext';
-import { NftSelectorPickerGridFragment$key } from '~/generated/NftSelectorPickerGridFragment.graphql';
 import { NftSelectorPickerGridOneOrManyFragment$key } from '~/generated/NftSelectorPickerGridOneOrManyFragment.graphql';
+import { NftSelectorPickerGridQuery } from '~/generated/NftSelectorPickerGridQuery.graphql';
 import { NftSelectorPickerGridSinglePreviewFragment$key } from '~/generated/NftSelectorPickerGridSinglePreviewFragment.graphql';
 import {
   NftSelectorPickerGridTokenGridFragment$data,
@@ -53,20 +53,19 @@ type NftSelectorPickerGridProps = {
     sortView: NftSelectorSortView;
   };
   screen: ScreenWithNftSelector;
-  queryRef: NftSelectorPickerGridFragment$key;
+  // queryRef: NftSelectorPickerGridFragment$key;
   onRefresh: () => void;
 };
 
 export function NftSelectorPickerGrid({
-  queryRef,
   searchCriteria,
   screen,
   style,
   onRefresh,
 }: NftSelectorPickerGridProps) {
-  const query = useFragment(
+  const query = useLazyLoadQuery<NftSelectorPickerGridQuery>(
     graphql`
-      fragment NftSelectorPickerGridFragment on Query {
+      query NftSelectorPickerGridQuery {
         viewer {
           ... on Viewer {
             user {
@@ -83,7 +82,7 @@ export function NftSelectorPickerGrid({
         ...doesUserOwnWalletFromChainFamilyFragment
       }
     `,
-    queryRef
+    {}
   );
 
   const ownsWalletFromSelectedChainFamily = doesUserOwnWalletFromChainFamily(

diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerScreen.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerScreen.tsx
@@ -16,15 +16,16 @@ import { OnboardingProgressBar } from '~/components/Onboarding/OnboardingProgres
 import { useSafeAreaPadding } from '~/components/SafeAreaViewWithPadding';
 import { Select } from '~/components/Select';
 import { Typography } from '~/components/Typography';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
 import { useSyncTokensActions } from '~/contexts/SyncTokensContext';
-import { NftSelectorPickerScreenQuery } from '~/generated/NftSelectorPickerScreenQuery.graphql';
+import { NftSelectorPickerScreenExperienceQuery } from '~/generated/NftSelectorPickerScreenExperienceQuery.graphql';
 import { SearchIcon } from '~/navigation/MainTabNavigator/SearchIcon';
 import { LoginStackNavigatorProp, MainTabStackNavigatorParamList } from '~/navigation/types';
 import { contexts } from '~/shared/analytics/constants';
 import useExperience from '~/shared/hooks/useExperience';
 import { chains } from '~/shared/utils/chains';
 
-import { CreatorSupportAnnouncementBottomSheet } from './CreatorSupportAnnouncementBottomSheet';
+import CreatorSupportAnnouncementBottomSheetModal from './CreatorSupportAnnouncementBottomSheetModal';
 import {
   NetworkChoice,
   NftSelectorFilterBottomSheet,
@@ -56,24 +57,13 @@ const screenHeaderText = {
 };
 
 function InnerNftSelectorPickerScreen() {
-  const route = useRoute<RouteProp<MainTabStackNavigatorParamList, 'ProfilePicturePicker'>>();
-
-  const query = useLazyLoadQuery<NftSelectorPickerScreenQuery>(
-    graphql`
-      query NftSelectorPickerScreenQuery {
-        ...useExperienceFragment
-        ...NftSelectorPickerGridFragment
-      }
-    `,
-    {}
-  );
+  const route = useRoute<RouteProp<MainTabStackNavigatorParamList, 'NftSelector'>>();
 
   const currentScreen = route.params.page;
   const isFullscreen = route.params.fullScreen;
 
   const { top } = useSafeAreaPadding();
   const filterBottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
-  const announcementBottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
 
   const handleSettingsPress = useCallback(() => {
     filterBottomSheetRef.current?.present();
@@ -108,18 +98,6 @@ function InnerNftSelectorPickerScreen() {
     setNetworkFilter(network);
   }, []);
 
-  const [creatorBetaAnnouncementSeen, setCreatorBetaAnnouncementSeen] = useExperience({
-    type: 'CreatorBetaMicroAnnouncementModal',
-    queryRef: query,
-  });
-
-  useEffect(() => {
-    if (ownershipTypeFilter === 'Created' && !creatorBetaAnnouncementSeen) {
-      announcementBottomSheetRef.current?.present();
-      setCreatorBetaAnnouncementSeen({ experienced: true });
-    }
-  }, [creatorBetaAnnouncementSeen, ownershipTypeFilter, setCreatorBetaAnnouncementSeen]);
-
   const decoratedNetworks = useMemo(() => {
     return NETWORKS.map((network) => {
       return {
@@ -243,20 +221,61 @@ function InnerNftSelectorPickerScreen() {
                     networkFilter: networkFilter,
                     sortView,
                   }}
-                  queryRef={query}
                   screen={currentScreen}
                   onRefresh={handleRefresh}
                 />
               </Suspense>
             </View>
           </View>
         </View>
+        <Suspense>
+          <CreatorBottomSheetWrapper isViewingCreatedFilter={ownershipTypeFilter === 'Created'} />
+        </Suspense>
       </View>
-      <CreatorSupportAnnouncementBottomSheet ref={announcementBottomSheetRef} />
     </>
   );
 }
 
+function CreatorBottomSheetWrapper({
+  isViewingCreatedFilter,
+}: {
+  isViewingCreatedFilter: boolean;
+}) {
+  const experienceQuery = useLazyLoadQuery<NftSelectorPickerScreenExperienceQuery>(
+    graphql`
+      query NftSelectorPickerScreenExperienceQuery {
+        ...useExperienceFragment
+      }
+    `,
+    {}
+  );
+
+  const [creatorBetaAnnouncementSeen, setCreatorBetaAnnouncementSeen] = useExperience({
+    type: 'CreatorBetaMicroAnnouncementModal',
+    queryRef: experienceQuery,
+  });
+  const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
+
+  useEffect(() => {
+    if (isViewingCreatedFilter && !creatorBetaAnnouncementSeen) {
+      showBottomSheetModal({
+        content: <CreatorSupportAnnouncementBottomSheetModal onClose={hideBottomSheetModal} />,
+      });
+      setCreatorBetaAnnouncementSeen({ experienced: true });
+    }
+  }, [
+    creatorBetaAnnouncementSeen,
+    hideBottomSheetModal,
+    isViewingCreatedFilter,
+    setCreatorBetaAnnouncementSeen,
+    showBottomSheetModal,
+  ]);
+
+  useEffect(() => {}, [hideBottomSheetModal, showBottomSheetModal]);
+
+  return <></>;
+}
+
 export function NftSelectorPickerScreen() {
   return (
     <Suspense fallback={<NftSelectorPickerScreenFallback />}>

diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerScreenFallback.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerScreenFallback.tsx
@@ -24,14 +24,11 @@ export function NftSelectorPickerScreenFallback() {
 
         <GallerySkeleton>
           <SkeletonPlaceholder.Item gap={32}>
-            <SkeletonPlaceholder.Item alignItems="center" justifyContent="center" height={32}>
-              <SkeletonPlaceholder.Item width={140} height={16} paddingTop={8} />
-            </SkeletonPlaceholder.Item>
-            <SkeletonPlaceholder.Item gap={16}>
-              <SkeletonPlaceholder.Item width="100%" height={36} borderRadius={80} />
+            <SkeletonPlaceholder.Item gap={16} paddingTop={64}>
+              <SkeletonPlaceholder.Item width="100%" height={36} borderRadius={2} />
 
               <SkeletonPlaceholder.Item flexDirection="row" justifyContent="space-between">
-                <SkeletonPlaceholder.Item width={128} height={24} borderRadius={80} />
+                <SkeletonPlaceholder.Item width={128} height={24} borderRadius={2} />
 
                 <SkeletonPlaceholder.Item flexDirection="row" gap={4}>
                   <SkeletonPlaceholder.Item width={24} height={24} borderRadius={80} />