diff --git a/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx b/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx
new file mode 100644
index 0000000000..3458435190
--- /dev/null
+++ b/apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx
@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import useDeleteGallery from 'shared/hooks/useDeleteGallery';
+
+import { Button } from '~/components/Button';
+import { Typography } from '~/components/Typography';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { DeleteGalleryBottomSheet$key } from '~/generated/DeleteGalleryBottomSheet.graphql';
+import { contexts } from '~/shared/analytics/constants';
+
+type Props = {
+ galleryRef: DeleteGalleryBottomSheet$key;
+};
+
+export default function DeleteGalleryBottomSheet({ galleryRef }: Props) {
+ const gallery = useFragment(
+ graphql`
+ fragment DeleteGalleryBottomSheet on Gallery {
+ dbid
+ }
+ `,
+ galleryRef
+ );
+ const deleteGallery = useDeleteGallery();
+ const { hideBottomSheetModal } = useBottomSheetModalActions();
+
+ const handleBack = useCallback(() => {
+ hideBottomSheetModal();
+ }, [hideBottomSheetModal]);
+
+ const handleDelete = useCallback(() => {
+ deleteGallery(gallery.dbid);
+ hideBottomSheetModal();
+ }, [deleteGallery, gallery, hideBottomSheetModal]);
+
+ return (
+
+
+
+ Delete gallery
+
+
+ Are you sure you want to delete this gallery?
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx b/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
index 3b4eba7971..cae767819c 100644
--- a/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
+++ b/apps/mobile/src/components/ProfileView/GalleryPreviewCard.tsx
@@ -11,17 +11,15 @@ import { RawNftPreviewAsset } from '~/components/NftPreview/NftPreviewAsset';
import { NftPreviewErrorFallback } from '~/components/NftPreview/NftPreviewErrorFallback';
import { Typography } from '~/components/Typography';
import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
-import { useToastActions } from '~/contexts/ToastContext';
import { GalleryPreviewCardFragment$key } from '~/generated/GalleryPreviewCardFragment.graphql';
import { GalleryPreviewCardQueryFragment$key } from '~/generated/GalleryPreviewCardQueryFragment.graphql';
-import { MainTabStackNavigatorProp, RootStackNavigatorProp } from '~/navigation/types';
+import { MainTabStackNavigatorProp } from '~/navigation/types';
import { contexts } from '~/shared/analytics/constants';
import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary';
import unescape from '~/shared/utils/unescape';
-import { BottomSheetRow } from '../BottomSheetRow';
import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
-import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
+import { GalleryPreviewCardBottomSheet } from './GalleryPreviewCardBottomSheet';
type GalleryPreviewCardProps = {
isFeatured: boolean;
@@ -41,6 +39,7 @@ export function GalleryPreviewCard({ galleryRef, isFeatured, queryRef }: Gallery
tokenPreviews {
medium
}
+ ...GalleryPreviewCardBottomSheetFragment
}
`,
galleryRef
@@ -69,10 +68,10 @@ export function GalleryPreviewCard({ galleryRef, isFeatured, queryRef }: Gallery
const handleOptionPress = useCallback(() => {
showBottomSheetModal({
content: (
-
+
),
});
- }, [gallery.dbid, hideBottomSheetModal, showBottomSheetModal]);
+ }, [gallery, hideBottomSheetModal, showBottomSheetModal]);
return (
@@ -160,61 +161,3 @@ function TokenCell({
);
}
-
-type GalleryPreviewCardBottomSheetProps = {
- galleryId: string;
- onClose: () => void;
-};
-
-function GalleryPreviewCardBottomSheet({ galleryId, onClose }: GalleryPreviewCardBottomSheetProps) {
- const { bottom } = useSafeAreaPadding();
- const { pushToast } = useToastActions();
- const navigation = useNavigation();
-
- const handleInProgress = useCallback(() => {
- pushToast({
- message: 'Feature in progress',
- });
- }, [pushToast]);
-
- const handleEditGallery = useCallback(() => {
- navigation.navigate('GalleryEditor', {
- galleryId,
- stagedTokens: [],
- });
- onClose();
- }, [galleryId, navigation, onClose]);
-
- return (
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx b/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx
new file mode 100644
index 0000000000..4a643ea88e
--- /dev/null
+++ b/apps/mobile/src/components/ProfileView/GalleryPreviewCardBottomSheet.tsx
@@ -0,0 +1,92 @@
+import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import { contexts } from 'shared/analytics/constants';
+
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { useToastActions } from '~/contexts/ToastContext';
+import { GalleryPreviewCardBottomSheetFragment$key } from '~/generated/GalleryPreviewCardBottomSheetFragment.graphql';
+import { RootStackNavigatorProp } from '~/navigation/types';
+
+import { BottomSheetRow } from '../BottomSheetRow';
+import DeleteGalleryBottomSheet from '../Gallery/DeleteGalleryBottomSheet';
+import { useSafeAreaPadding } from '../SafeAreaViewWithPadding';
+
+type Props = {
+ galleryRef: GalleryPreviewCardBottomSheetFragment$key;
+ onClose: () => void;
+};
+
+export function GalleryPreviewCardBottomSheet({ galleryRef, onClose }: Props) {
+ const gallery = useFragment(
+ graphql`
+ fragment GalleryPreviewCardBottomSheetFragment on Gallery {
+ dbid
+ ...DeleteGalleryBottomSheet
+ }
+ `,
+ galleryRef
+ );
+
+ const galleryId = gallery.dbid;
+
+ const { bottom } = useSafeAreaPadding();
+ const { pushToast } = useToastActions();
+
+ const { showBottomSheetModal } = useBottomSheetModalActions();
+ const navigation = useNavigation();
+
+ const handleInProgress = useCallback(() => {
+ pushToast({
+ message: 'Feature in progress',
+ });
+ }, [pushToast]);
+
+ const handleEditGallery = useCallback(() => {
+ navigation.navigate('GalleryEditor', {
+ galleryId,
+ stagedTokens: [],
+ });
+ onClose();
+ }, [galleryId, navigation, onClose]);
+
+ const handleDeleteGallery = useCallback(() => {
+ showBottomSheetModal({
+ content: ,
+ });
+ }, [gallery, showBottomSheetModal]);
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx b/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
index 2750dacb9d..a629f4bd23 100644
--- a/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
+++ b/apps/web/src/components/MultiGallery/DeleteGalleryConfirmation.tsx
@@ -8,7 +8,7 @@ import { contexts } from '~/shared/analytics/constants';
import { Button } from '../core/Button/Button';
import { HStack } from '../core/Spacer/Stack';
import { BaseM } from '../core/Text/Text';
-import useDeleteGallery from './useDeleteGallery';
+import useDeleteGallery from '~/shared/hooks/useDeleteGallery';
type Props = {
galleryId: string;
diff --git a/apps/web/src/components/MultiGallery/useDeleteGallery.ts b/packages/shared/src/hooks/useDeleteGallery.ts
similarity index 93%
rename from apps/web/src/components/MultiGallery/useDeleteGallery.ts
rename to packages/shared/src/hooks/useDeleteGallery.ts
index 93ec51ae5e..f5a77329dc 100644
--- a/apps/web/src/components/MultiGallery/useDeleteGallery.ts
+++ b/packages/shared/src/hooks/useDeleteGallery.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
import { graphql } from 'relay-runtime';
import { useDeleteGalleryMutation } from '~/generated/useDeleteGalleryMutation.graphql';
-import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
+import { usePromisifiedMutation } from '../relay/usePromisifiedMutation';
export default function useDeleteGallery() {
const [deleteGallery] = usePromisifiedMutation(graphql`