rest of the owl

apps/mobile/src/App.tsx

@@ -1,6 +1,6 @@
 import 'expo-dev-client';
 
-import { PortalHost, PortalProvider } from '@gorhom/portal';
+import { PortalProvider } from '@gorhom/portal';
 import { PrivyProvider } from '@privy-io/expo';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';

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

@@ -39,7 +39,7 @@ export function CommunityCard({ communityRef }: CommunityCardProps) {
   return (
     <GalleryTouchableOpacity
       onPress={handlePress}
-      className="flex flex-row items-center space-x-4 py-2 px-4"
+      className="flex flex-row items-center space-x-4 py-2"
       eventElementId="Community Name"
       eventName="Community Name Clicked"
       eventContext={contexts.Community}

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

@@ -1,20 +1,12 @@
-import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
-import { ForwardedRef, forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
 import { CommunityBottomSheetFragment$key } from '~/generated/CommunityBottomSheetFragment.graphql';
 
-import {
-  GalleryBottomSheetModal,
-  GalleryBottomSheetModalType,
-} from '../GalleryBottomSheet/GalleryBottomSheetModal';
 import { Markdown } from '../Markdown';
-import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
 import { Typography } from '../Typography';
 
-const SNAP_POINTS = ['CONTENT_HEIGHT'];
-
 const markdownStyles = {
   paragraph: {
     marginBottom: 16,
@@ -25,10 +17,7 @@ type Props = {
   communityRef: CommunityBottomSheetFragment$key;
 };
 
-function CommunityBottomSheet(
-  { communityRef }: Props,
-  ref: ForwardedRef<GalleryBottomSheetModalType>
-) {
+function CommunityBottomSheet({ communityRef }: Props) {
   const community = useFragment(
     graphql`
       fragment CommunityBottomSheetFragment on Community {
@@ -39,49 +28,23 @@ function CommunityBottomSheet(
     communityRef
   );
 
-  const { bottom } = useSafeAreaPadding();
-
-  const bottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
-
-  const { animatedHandleHeight, animatedSnapPoints, animatedContentHeight, handleContentLayout } =
-    useBottomSheetDynamicSnapPoints(SNAP_POINTS);
-
   return (
-    <GalleryBottomSheetModal
-      ref={(value) => {
-        bottomSheetRef.current = value;
-
-        if (typeof ref === 'function') {
-          ref(value);
-        } else if (ref) {
-          ref.current = value;
-        }
-      }}
-      snapPoints={animatedSnapPoints}
-      handleHeight={animatedHandleHeight}
-      contentHeight={animatedContentHeight}
-    >
-      <View
-        onLayout={handleContentLayout}
-        style={{ paddingBottom: bottom }}
-        className="p-4 flex flex-col space-y-6"
-      >
-        <View className="flex flex-col space-y-4">
-          <Typography
-            className="text-lg text-black-900 dark:text-offWhite"
-            font={{ family: 'ABCDiatype', weight: 'Bold' }}
-          >
-            {community.name}
-          </Typography>
-          <Typography
-            className="text-sm text-black-900 dark:text-offWhite"
-            font={{ family: 'ABCDiatype', weight: 'Regular' }}
-          >
-            <Markdown style={markdownStyles}>{community.description}</Markdown>
-          </Typography>
-        </View>
+    <View className="flex flex-col space-y-6">
+      <View className="flex flex-col space-y-4">
+        <Typography
+          className="text-lg text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Bold' }}
+        >
+          {community.name}
+        </Typography>
+        <Typography
+          className="text-sm text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+        >
+          <Markdown style={markdownStyles}>{community.description}</Markdown>
+        </Typography>
       </View>
-    </GalleryBottomSheetModal>
+    </View>
   );
 }
 

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

@@ -1,21 +1,21 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 import { EditPencilIcon } from 'src/icons/EditPencilIcon';
 
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
 import { CommunityHeaderFragment$key } from '~/generated/CommunityHeaderFragment.graphql';
 import { CommunityHeaderQueryFragment$key } from '~/generated/CommunityHeaderQueryFragment.graphql';
 import { contexts } from '~/shared/analytics/constants';
 import { extractRelevantMetadataFromCommunity } from '~/shared/utils/extractRelevantMetadataFromCommunity';
 import { truncateAddress } from '~/shared/utils/wallet';
 
-import { GalleryBottomSheetModalType } from '../GalleryBottomSheet/GalleryBottomSheetModal';
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import { Markdown } from '../Markdown';
 import { CommunityProfilePicture } from '../ProfilePicture/CommunityProfilePicture';
 import { Typography } from '../Typography';
 import { CommunityBottomSheet } from './CommunityBottomSheet';
-import { CommunityMetadataFormBottomSheet } from './CommunityMetadataFormBottomSheet';
+import CommunityMetadataFormBottomSheet from './CommunityMetadataFormBottomSheet';
 
 type Props = {
   communityRef: CommunityHeaderFragment$key;
@@ -46,11 +46,15 @@ export function CommunityHeader({ communityRef, queryRef }: Props) {
   );
 
   const hasCommunityDescription = Boolean(community.description);
-  const bottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
+
+  const { showBottomSheetModal } = useBottomSheetModalActions();
   const handlePress = useCallback(() => {
     if (!hasCommunityDescription) return;
-    bottomSheetRef.current?.present();
-  }, [hasCommunityDescription]);
+
+    showBottomSheetModal({
+      content: <CommunityBottomSheet communityRef={community} />,
+    });
+  }, [community, hasCommunityDescription, showBottomSheetModal]);
 
   // combines description into a single paragraph by removing extra whitespace,
   //  then splitting the cleaned text into sentences using a regular expression
@@ -62,10 +66,11 @@ export function CommunityHeader({ communityRef, queryRef }: Props) {
 
   const displayName = community.name || truncateAddress(contractAddress);
 
-  const formBottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
   const handleEditPress = useCallback(() => {
-    formBottomSheetRef.current?.present();
-  }, []);
+    showBottomSheetModal({
+      content: <CommunityMetadataFormBottomSheet communityRef={community} queryRef={query} />,
+    });
+  }, [community, query, showBottomSheetModal]);
 
   return (
     <View className="mb-2">
@@ -98,12 +103,6 @@ export function CommunityHeader({ communityRef, queryRef }: Props) {
           </View>
         </GalleryTouchableOpacity>
       </View>
-      <CommunityBottomSheet ref={bottomSheetRef} communityRef={community} />
-      <CommunityMetadataFormBottomSheet
-        ref={formBottomSheetRef}
-        communityRef={community}
-        queryRef={query}
-      />
     </View>
   );
 }

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

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment, useRefetchableFragment } from 'react-relay';
 import { ArbitrumIcon } from 'src/icons/ArbitrumIcon';
@@ -12,6 +12,7 @@ import { PolygonIcon } from 'src/icons/PolygonIcon';
 import { TezosIcon } from 'src/icons/TezosIcon';
 import { ZoraIcon } from 'src/icons/ZoraIcon';
 
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
 import { useManageWalletActions } from '~/contexts/ManageWalletContext';
 import { CommunityMetaFragment$key } from '~/generated/CommunityMetaFragment.graphql';
 import { CommunityMetaQueryFragment$key } from '~/generated/CommunityMetaQueryFragment.graphql';
@@ -24,11 +25,10 @@ import { Chain } from '~/shared/utils/chains';
 import { extractRelevantMetadataFromCommunity } from '~/shared/utils/extractRelevantMetadataFromCommunity';
 
 import { Button } from '../Button';
-import { GalleryBottomSheetModalType } from '../GalleryBottomSheet/GalleryBottomSheetModal';
 import { MintLinkButton } from '../MintLinkButton';
 import { CreatorProfilePictureAndUsernameOrAddress } from '../ProfilePicture/ProfilePictureAndUserOrAddress';
 import { Typography } from '../Typography';
-import { CommunityPostBottomSheet } from './CommunityPostBottomSheet';
+import CommunityPostBottomSheet from './CommunityPostBottomSheet';
 
 type Props = {
   communityRef: CommunityMetaFragment$key;
@@ -93,17 +93,29 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
   const { openManageWallet } = useManageWalletActions();
 
   const navigation = useNavigation<MainTabStackNavigatorProp>();
-  const bottomSheetRef = useRef<GalleryBottomSheetModalType | null>(null);
 
   const handleUsernamePress = useCallback(() => {
     if (community.creator?.__typename === 'GalleryUser') {
       navigation.navigate('Profile', { username: community.creator?.username ?? '' });
     }
   }, [community.creator, navigation]);
 
+  const handleRefresh = useCallback(() => {
+    refetch(
+      {
+        communityID: community.dbid,
+      },
+      { fetchPolicy: 'network-only' }
+    );
+  }, [community.dbid, refetch]);
+
+  const { showBottomSheetModal } = useBottomSheetModalActions();
   const handleCreatePost = useCallback(() => {
     if (!isMemberOfCommunity) {
-      bottomSheetRef.current?.present();
+      showBottomSheetModal({
+        content: <CommunityPostBottomSheet communityRef={community} onRefresh={handleRefresh} />,
+      });
+
       return;
     }
 
@@ -112,7 +124,14 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
       contractAddress,
       page: 'Community',
     });
-  }, [contractAddress, isMemberOfCommunity, navigation]);
+  }, [
+    community,
+    contractAddress,
+    handleRefresh,
+    isMemberOfCommunity,
+    navigation,
+    showBottomSheetModal,
+  ]);
 
   const handlePress = useCallback(() => {
     if (!userHasWallet) {
@@ -144,15 +163,6 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
     }
   }, [isMemberOfCommunity, colorScheme]);
 
-  const handleRefresh = useCallback(() => {
-    refetch(
-      {
-        communityID: community.dbid,
-      },
-      { fetchPolicy: 'network-only' }
-    );
-  }, [community.dbid, refetch]);
-
   return (
     <View className="flex flex-row justify-between">
       <View className="space-y-3">
@@ -220,12 +230,6 @@ export function CommunityMeta({ communityRef, queryRef }: Props) {
           referrerAddress={creatorWalletAddress}
         />
       )}
-
-      <CommunityPostBottomSheet
-        ref={bottomSheetRef}
-        communityRef={community}
-        onRefresh={handleRefresh}
-      />
     </View>
   );
 }