From 424af091096544dbb5da38ce15890a50cbdb8b8a Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Mon, 29 Apr 2024 23:29:24 +0530
Subject: [PATCH 01/13] followup: remove opacity dip for trending user card
 mobile (#2450)

* base

* base
---
 .../src/components/GalleryTouchableOpacity.tsx      |  4 +++-
 .../components/ProfilePicture/ProfilePicture.tsx    | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/mobile/src/components/GalleryTouchableOpacity.tsx b/apps/mobile/src/components/GalleryTouchableOpacity.tsx
index b63e9016d7..c8f8a8f335 100644
--- a/apps/mobile/src/components/GalleryTouchableOpacity.tsx
+++ b/apps/mobile/src/components/GalleryTouchableOpacity.tsx
@@ -13,6 +13,7 @@ import { GalleryElementTrackingProps, useTrack } from '~/shared/contexts/Analyti
 
 export type GalleryTouchableOpacityProps = {
   withoutFeedback?: boolean;
+  activeOpacity?: number;
 } & GalleryElementTrackingProps &
   TouchableOpacityProps;
 
@@ -25,6 +26,7 @@ export function GalleryTouchableOpacity({
   onPress,
   properties,
   withoutFeedback,
+  activeOpacity = 0.2,
   ...props
 }: GalleryTouchableOpacityProps) {
   const track = useTrack();
@@ -62,7 +64,7 @@ export function GalleryTouchableOpacity({
   }
 
   return (
-    <TouchableOpacity {...props} onPress={handlePress}>
+    <TouchableOpacity {...props} onPress={handlePress} activeOpacity={activeOpacity}>
       {children}
     </TouchableOpacity>
   );
diff --git a/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx b/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
index 094e2b4489..94c8138e69 100644
--- a/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
+++ b/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
@@ -95,6 +95,19 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
         />
       </ReportingErrorBoundary>
     );
+  } else if (token) {
+    return (
+      <ReportingErrorBoundary fallback={fallbackProfilePicture}>
+        <ValidProfilePicture
+          style={style}
+          tokenRef={token}
+          eventElementId={null}
+          eventName={null}
+          eventContext={null}
+          {...rest}
+        />
+      </ReportingErrorBoundary>
+    );
   } else {
     return fallbackProfilePicture;
   }

From 3c49cf0e7fff117f8573a5f1f277f8ef9600db2c Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Wed, 1 May 2024 14:09:11 +0800
Subject: [PATCH 02/13] Add multiple token into gallery editor (#2451)

---
 .../src/components/AnimatedRefreshIcon.tsx    |   5 +-
 apps/mobile/src/components/Button.tsx         |   8 +-
 apps/mobile/src/components/IconContainer.tsx  |   5 +-
 .../NftSelectorContractHeader.tsx             |   9 +-
 .../NftSelectorContractPickerGrid.tsx         |  21 ++-
 .../NftSelectorContractToolbar.tsx            |  78 +++++++++
 .../NftSelector/NftSelectorHeader.tsx         |  10 +-
 .../NftSelectorSelectionIndicator.tsx         |  30 ++++
 .../NftSelector/NftSelectorToolbar.tsx        |  19 +++
 apps/mobile/src/icons/CheckIcon.tsx           |   9 +
 apps/mobile/src/icons/CheckboxIcon.tsx        |   1 -
 apps/mobile/src/icons/MultiSelectIcon.tsx     |  10 ++
 .../src/navigation/RootStackNavigator.tsx     |   5 +
 apps/mobile/src/navigation/types.ts           |   5 +
 .../GalleryEditorNftSelector.tsx              | 105 ++++++++++--
 ...GalleryEditorNftSelectorContractScreen.tsx | 160 ++++++++++++++++++
 .../NftSelectorPickerGrid.tsx                 |  69 +++++++-
 .../NftSelectorPickerSingularAsset.tsx        |   7 +
 18 files changed, 523 insertions(+), 33 deletions(-)
 create mode 100644 apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
 create mode 100644 apps/mobile/src/components/NftSelector/NftSelectorSelectionIndicator.tsx
 create mode 100644 apps/mobile/src/icons/CheckIcon.tsx
 create mode 100644 apps/mobile/src/icons/MultiSelectIcon.tsx
 create mode 100644 apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx

diff --git a/apps/mobile/src/components/AnimatedRefreshIcon.tsx b/apps/mobile/src/components/AnimatedRefreshIcon.tsx
index 844c6f4be1..67cf8b705f 100644
--- a/apps/mobile/src/components/AnimatedRefreshIcon.tsx
+++ b/apps/mobile/src/components/AnimatedRefreshIcon.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { ViewProps } from 'react-native';
 import { RefreshIcon } from 'src/icons/RefreshIcon';
 
 import { IconContainer } from '~/components/IconContainer';
@@ -9,6 +10,7 @@ type AnimatedRefreshIconProps = {
   isSyncing: boolean;
   eventElementId: string;
   eventName: string;
+  style?: ViewProps['style'];
 };
 
 export function AnimatedRefreshIcon({
@@ -16,6 +18,7 @@ export function AnimatedRefreshIcon({
   isSyncing,
   eventElementId,
   eventName,
+  style,
 }: AnimatedRefreshIconProps) {
   const handleSync = useCallback(async () => {
     if (isSyncing) return;
@@ -30,7 +33,7 @@ export function AnimatedRefreshIcon({
       eventElementId={eventElementId}
       eventName={eventName}
       eventContext={contexts.Posts}
-      style={{ opacity: isSyncing ? 0.3 : 1 }}
+      style={[{ opacity: isSyncing ? 0.3 : 1 }, style]}
     />
   );
 }
diff --git a/apps/mobile/src/components/Button.tsx b/apps/mobile/src/components/Button.tsx
index 403137fdc2..cdfb157ff1 100644
--- a/apps/mobile/src/components/Button.tsx
+++ b/apps/mobile/src/components/Button.tsx
@@ -11,6 +11,7 @@ import { Typography } from './Typography';
 type Variant = 'primary' | 'secondary' | 'danger' | 'disabled' | 'blue';
 type FontWeight = 'Medium' | 'Regular' | 'Bold';
 type Size = 'xs' | 'sm' | 'md';
+type TextTransform = 'uppercase' | 'capitalize' | 'lowercase';
 
 export type ButtonProps = {
   style?: GalleryTouchableOpacityProps['style'];
@@ -24,6 +25,7 @@ export type ButtonProps = {
   textClassName?: string;
   containerClassName?: string;
   fontWeight?: FontWeight;
+  textTransform?: TextTransform;
   size?: Size;
   DO_NOT_USE_OR_YOU_WILL_BE_FIRED_colorScheme?: 'light' | 'dark';
 } & GalleryTouchableOpacityProps;
@@ -179,6 +181,7 @@ export function Button({
   size = 'md',
   fontWeight = 'Medium',
   footerElement,
+  textTransform = 'uppercase',
   DO_NOT_USE_OR_YOU_WILL_BE_FIRED_colorScheme,
   ...props
 }: ButtonProps) {
@@ -226,9 +229,10 @@ export function Button({
             <Typography
               font={{ family: 'ABCDiatype', weight: fontWeight }}
               className={clsx(
-                'text-xs uppercase text-center',
+                'text-xs text-center',
                 variantClassNames.textClassName,
-                textClassName
+                textClassName,
+                textTransform
               )}
             >
               {text}
diff --git a/apps/mobile/src/components/IconContainer.tsx b/apps/mobile/src/components/IconContainer.tsx
index 092ef33ea7..e7c4caa650 100644
--- a/apps/mobile/src/components/IconContainer.tsx
+++ b/apps/mobile/src/components/IconContainer.tsx
@@ -10,7 +10,7 @@ type IconContainerProps = {
   onPress: () => void;
   size?: 'xs' | 'sm' | 'md';
   border?: boolean;
-  color?: 'default' | 'white' | 'black';
+  color?: 'default' | 'white' | 'black' | 'active';
 } & GalleryTouchableOpacityProps;
 
 export function IconContainer({
@@ -28,10 +28,11 @@ export function IconContainer({
     md: 'h-8 w-8',
   };
 
-  const colorVariants: { [color in 'default' | 'white' | 'black']: string } = {
+  const colorVariants: { [color in 'default' | 'white' | 'black' | 'active']: string } = {
     default: 'bg-faint dark:bg-black-500',
     white: 'bg-white dark:bg-black-900',
     black: 'bg-black-900 dark:bg-white',
+    active: 'bg-porcelain dark:bg-white',
   };
 
   return (
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx
index 65aadd2b1e..cc605a24a5 100644
--- a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx
+++ b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 
 import { AnimatedRefreshIcon } from '~/components/AnimatedRefreshIcon';
 import { BackButton } from '~/components/BackButton';
@@ -24,6 +25,12 @@ export function NftSelectorContractHeader({
   const { isSyncingCreatedTokensForContract, syncCreatedTokensForExistingContract } =
     useSyncTokensActions();
 
+  const animateStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(rightButton ? 1 : 0),
+    };
+  });
+
   const handleSyncTokensForContract = useCallback(async () => {
     if (!contractId) return;
     syncCreatedTokensForExistingContract(contractId);
@@ -47,7 +54,7 @@ export function NftSelectorContractHeader({
           {title}
         </Typography>
       </View>
-      {rightButton ? <View>{rightButton}</View> : null}
+      <Animated.View style={animateStyle}>{rightButton}</Animated.View>
       {isCreator && contractId ? (
         <View>
           <AnimatedRefreshIcon
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx
index bf4cd65a62..c5c687abca 100644
--- a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx
+++ b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid.tsx
@@ -14,9 +14,19 @@ type Props = {
   tokenRefs: NftSelectorContractPickerGridFragment$key;
   onSelect: (tokenId: string) => void;
   style?: ViewProps['style'];
+
+  isMultiselectMode?: boolean;
+  selectedTokens?: Set<string>;
 };
 
-export function NftSelectorContractPickerGrid({ isCreator, tokenRefs, onSelect, style }: Props) {
+export function NftSelectorContractPickerGrid({
+  isCreator,
+  isMultiselectMode,
+  tokenRefs,
+  onSelect,
+  selectedTokens,
+  style,
+}: Props) {
   const tokens = useFragment(
     graphql`
       fragment NftSelectorContractPickerGridFragment on Token @relay(plural: true) {
@@ -43,6 +53,10 @@ export function NftSelectorContractPickerGrid({ isCreator, tokenRefs, onSelect,
     syncCreatedTokensForExistingContract(contractId);
   }, [syncCreatedTokensForExistingContract, contractId]);
 
+  const isSelected = useMemo(() => {
+    return (tokenId: string) => selectedTokens?.has(tokenId) ?? false;
+  }, [selectedTokens]);
+
   const renderItem = useCallback<ListRenderItem<typeof tokens>>(
     ({ item: row }) => {
       return (
@@ -53,6 +67,8 @@ export function NftSelectorContractPickerGrid({ isCreator, tokenRefs, onSelect,
                 key={token.dbid}
                 onPress={onSelect}
                 tokenRef={token}
+                isMultiselectMode={isMultiselectMode}
+                isSelected={isSelected(token.dbid)}
               />
             );
           })}
@@ -63,7 +79,7 @@ export function NftSelectorContractPickerGrid({ isCreator, tokenRefs, onSelect,
         </View>
       );
     },
-    [onSelect]
+    [isMultiselectMode, isSelected, onSelect]
   );
 
   const rows = useMemo(() => {
@@ -83,6 +99,7 @@ export function NftSelectorContractPickerGrid({ isCreator, tokenRefs, onSelect,
           renderItem={renderItem}
           data={rows}
           estimatedItemSize={100}
+          extraData={[isMultiselectMode, selectedTokens]}
           refreshControl={
             isCreator ? (
               <GalleryRefreshControl
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
new file mode 100644
index 0000000000..810eeac9c1
--- /dev/null
+++ b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar.tsx
@@ -0,0 +1,78 @@
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { contexts } from 'shared/analytics/constants';
+import { MultiSelectIcon } from 'src/icons/MultiSelectIcon';
+
+import { AnimatedRefreshIcon } from '~/components/AnimatedRefreshIcon';
+import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
+import { IconContainer } from '~/components/IconContainer';
+import { BaseM } from '~/components/Text';
+import { useSyncTokensActions } from '~/contexts/SyncTokensContext';
+
+type Props = {
+  contractId: string;
+  contractName: string;
+  isMultiselectMode: boolean;
+  setIsMultiselectMode: (value: boolean) => void;
+  onSelectedAllPress: () => void;
+  hasSelectedItems: boolean;
+  ownershipTypeFilter: 'Collected' | 'Created';
+};
+
+export function NftSelectorContractToolbar({
+  contractId,
+  contractName,
+  isMultiselectMode,
+  setIsMultiselectMode,
+  onSelectedAllPress,
+  hasSelectedItems,
+  ownershipTypeFilter,
+}: Props) {
+  const { isSyncing, isSyncingCreatedTokens, syncCreatedTokensForExistingContract } =
+    useSyncTokensActions();
+
+  const handleMultiselectPress = useCallback(() => {
+    setIsMultiselectMode?.(!isMultiselectMode);
+  }, [isMultiselectMode, setIsMultiselectMode]);
+
+  const handleSyncTokensForContract = useCallback(async () => {
+    if (!contractId) return;
+    syncCreatedTokensForExistingContract(contractId);
+  }, [syncCreatedTokensForExistingContract, contractId]);
+
+  return (
+    <View className="flex-row justify-between px-4 pt-4">
+      <BaseM weight="Bold" style={{ maxWidth: '65%' }}>
+        {contractName}
+      </BaseM>
+
+      <View className="flex-row space-x-2 items-center">
+        <GalleryTouchableOpacity
+          onPress={onSelectedAllPress}
+          eventElementId={null}
+          eventName={null}
+          eventContext={null}
+        >
+          <BaseM weight="Bold" classNameOverride="text-shadow">
+            {hasSelectedItems ? 'Deselect All' : 'Select All'}
+          </BaseM>
+        </GalleryTouchableOpacity>
+        <IconContainer
+          size="sm"
+          onPress={handleMultiselectPress}
+          icon={<MultiSelectIcon />}
+          eventElementId="NftSelectorSelectorSettingsButton"
+          eventName="NftSelectorSelectorSettingsButton pressed"
+          eventContext={contexts.Posts}
+          color={isMultiselectMode ? 'active' : 'default'}
+        />
+        <AnimatedRefreshIcon
+          onSync={handleSyncTokensForContract}
+          isSyncing={ownershipTypeFilter === 'Collected' ? isSyncing : isSyncingCreatedTokens}
+          eventElementId="NftSelectorSelectorRefreshButton"
+          eventName="NftSelectorSelectorRefreshButton pressed"
+        />
+      </View>
+    </View>
+  );
+}
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx b/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx
index ae5341233d..d364a7c9af 100644
--- a/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx
+++ b/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 
 import { BackButton } from '../BackButton';
 import { Typography } from '../Typography';
@@ -11,6 +12,12 @@ type Props = {
 } & PropsWithChildren;
 
 export function NftSelectorHeader({ rightButton, title, children, style }: Props) {
+  const animateStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(rightButton ? 1 : 0),
+    };
+  });
+
   return (
     <View style={style}>
       <View className="px-4 relative flex-row justify-between items-center">
@@ -24,8 +31,7 @@ export function NftSelectorHeader({ rightButton, title, children, style }: Props
             {title}
           </Typography>
         </View>
-
-        {rightButton && rightButton}
+        <Animated.View style={animateStyle}>{rightButton && rightButton}</Animated.View>
       </View>
 
       {children}
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorSelectionIndicator.tsx b/apps/mobile/src/components/NftSelector/NftSelectorSelectionIndicator.tsx
new file mode 100644
index 0000000000..63b96bd248
--- /dev/null
+++ b/apps/mobile/src/components/NftSelector/NftSelectorSelectionIndicator.tsx
@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { CheckIcon } from 'src/icons/CheckIcon';
+
+type Props = {
+  selected: boolean;
+};
+
+export function NftSelectorSelectionIndicator({ selected }: Props) {
+  const animateStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(selected ? 1 : 0),
+    };
+  });
+
+  return (
+    <Animated.View
+      className={clsx(
+        'absolute top-1 right-1 h-3 w-3 rounded-full border border-white shadow flex items-center justify-center',
+        selected ? 'bg-activeBlue' : 'bg-white/30'
+      )}
+    >
+      {selected ? (
+        <Animated.View style={animateStyle}>
+          <CheckIcon />
+        </Animated.View>
+      ) : null}
+    </Animated.View>
+  );
+}
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorToolbar.tsx b/apps/mobile/src/components/NftSelector/NftSelectorToolbar.tsx
index d5f55218b9..53355f9029 100644
--- a/apps/mobile/src/components/NftSelector/NftSelectorToolbar.tsx
+++ b/apps/mobile/src/components/NftSelector/NftSelectorToolbar.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { View, ViewProps } from 'react-native';
 import { contexts } from 'shared/analytics/constants';
 import { chains } from 'shared/utils/chains';
+import { MultiSelectIcon } from 'src/icons/MultiSelectIcon';
 import { SlidersIcon } from 'src/icons/SlidersIcon';
 import { getChainIconComponent } from 'src/utils/getChainIconComponent';
 
@@ -41,6 +42,8 @@ type Props = {
   setNetworkFilter: (value: NetworkChoice) => void;
   sortView: NftSelectorSortView;
   setSortView: (value: NftSelectorSortView) => void;
+  isMultiselectMode?: boolean;
+  setIsMultiselectMode?: (value: boolean) => void;
   isSyncing: boolean;
   isSyncingCreatedTokens: boolean;
   handleSync: () => void;
@@ -56,6 +59,8 @@ export function NftSelectorToolbar({
   setNetworkFilter,
   sortView,
   setSortView,
+  isMultiselectMode,
+  setIsMultiselectMode,
   isSyncing,
   isSyncingCreatedTokens,
   handleSync,
@@ -92,6 +97,10 @@ export function NftSelectorToolbar({
     [setNetworkFilter]
   );
 
+  const handleMultiselectPress = useCallback(() => {
+    setIsMultiselectMode?.(!isMultiselectMode);
+  }, [isMultiselectMode, setIsMultiselectMode]);
+
   return (
     <View className="flex flex-col space-y-4" style={style}>
       <View className="px-4">
@@ -116,6 +125,16 @@ export function NftSelectorToolbar({
         />
 
         <View className="flex flex-row space-x-1">
+          <IconContainer
+            size="sm"
+            onPress={handleMultiselectPress}
+            icon={<MultiSelectIcon />}
+            eventElementId="NftSelectorSelectorSettingsButton"
+            eventName="NftSelectorSelectorSettingsButton pressed"
+            eventContext={contexts.Posts}
+            color={isMultiselectMode ? 'active' : 'default'}
+          />
+
           <AnimatedRefreshIcon
             onSync={handleSync}
             isSyncing={ownershipTypeFilter === 'Collected' ? isSyncing : isSyncingCreatedTokens}
diff --git a/apps/mobile/src/icons/CheckIcon.tsx b/apps/mobile/src/icons/CheckIcon.tsx
new file mode 100644
index 0000000000..3c6c755403
--- /dev/null
+++ b/apps/mobile/src/icons/CheckIcon.tsx
@@ -0,0 +1,9 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export function CheckIcon(props: SvgProps) {
+  return (
+    <Svg width={16} height={15} fill="none" {...props}>
+      <Path stroke="#FEFEFE" strokeMiterlimit={10} strokeWidth={0.9} d="m5.6 7 1.8 1.8 3-3" />
+    </Svg>
+  );
+}
diff --git a/apps/mobile/src/icons/CheckboxIcon.tsx b/apps/mobile/src/icons/CheckboxIcon.tsx
index b94dbde0e6..dee4aadbaa 100644
--- a/apps/mobile/src/icons/CheckboxIcon.tsx
+++ b/apps/mobile/src/icons/CheckboxIcon.tsx
@@ -10,7 +10,6 @@ export function CheckboxIcon(props: SvgProps) {
   return (
     <Svg width={18} height={18} viewBox="0 0 18 18" fill="none" {...props}>
       <Path d="M5 8.5l3 3 5-5" stroke={stroke} strokeMiterlimit={10} />
-      <Path stroke={stroke} d="M0.5 0.5H17.5V17.5H0.5z" />
     </Svg>
   );
 }
diff --git a/apps/mobile/src/icons/MultiSelectIcon.tsx b/apps/mobile/src/icons/MultiSelectIcon.tsx
new file mode 100644
index 0000000000..44888929d3
--- /dev/null
+++ b/apps/mobile/src/icons/MultiSelectIcon.tsx
@@ -0,0 +1,10 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export function MultiSelectIcon(props: SvgProps) {
+  return (
+    <Svg width={16} height={16} fill="none" {...props}>
+      <Path stroke="#000" d="M13.667 2.332H5v8.667h8.667V2.332Z" />
+      <Path stroke="#000" d="M11 11v2.667H2.334V5H5" />
+    </Svg>
+  );
+}
diff --git a/apps/mobile/src/navigation/RootStackNavigator.tsx b/apps/mobile/src/navigation/RootStackNavigator.tsx
index d9a098ec69..ce81fdac0f 100644
--- a/apps/mobile/src/navigation/RootStackNavigator.tsx
+++ b/apps/mobile/src/navigation/RootStackNavigator.tsx
@@ -17,6 +17,7 @@ import { RootStackNavigatorParamList } from '~/navigation/types';
 import { Debugger } from '~/screens/Debugger';
 import { DesignSystemButtonsScreen } from '~/screens/DesignSystemButtonsScreen';
 import { GalleryEditorNftSelector } from '~/screens/GalleryScreen/GalleryEditorNftSelector';
+import { GalleryEditorNftSelectorContractScreen } from '~/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen';
 import { GalleryEditorScreen } from '~/screens/GalleryScreen/GalleryEditorScreen';
 import { TwitterSuggestionListScreen } from '~/screens/HomeScreen/TwitterSuggestionListScreen';
 import { UserSuggestionListScreen } from '~/screens/HomeScreen/UserSuggestionListScreen';
@@ -105,6 +106,10 @@ export function RootStackNavigator({ navigationContainerRef }: Props) {
 
         <Stack.Screen name="GalleryEditor" component={GalleryEditorScreen} />
         <Stack.Screen name="NftSelectorGalleryEditor" component={GalleryEditorNftSelector} />
+        <Stack.Screen
+          name="NftSelectorContractGalleryEditor"
+          component={GalleryEditorNftSelectorContractScreen}
+        />
       </Stack.Navigator>
       <View className="flex">
         <PortalHost name="bottomSheetPortal" />
diff --git a/apps/mobile/src/navigation/types.ts b/apps/mobile/src/navigation/types.ts
index 2aac104578..6544fc2cf3 100644
--- a/apps/mobile/src/navigation/types.ts
+++ b/apps/mobile/src/navigation/types.ts
@@ -30,6 +30,11 @@ export type RootStackNavigatorParamList = {
   NftSelectorGalleryEditor: {
     galleryId: string;
   };
+  NftSelectorContractGalleryEditor: {
+    galleryId: string;
+    contractAddress: string;
+    ownerFilter?: 'Collected' | 'Created';
+  };
 };
 
 export type ScreenWithNftSelector = 'ProfilePicture' | 'Post' | 'Community' | 'Onboarding';
diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx
index 2956365b23..5cebc94fa9 100644
--- a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx
+++ b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelector.tsx
@@ -1,12 +1,13 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
-import { Suspense, useCallback, useMemo } from 'react';
+import { Suspense, useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
-import { noop } from 'shared/utils/noop';
 
+import { Button } from '~/components/Button';
 import { NftSelectorHeader } from '~/components/NftSelector/NftSelectorHeader';
 import { NftSelectorToolbar } from '~/components/NftSelector/NftSelectorToolbar';
 import { NftSelectorWrapper } from '~/components/NftSelector/NftSelectorWrapper';
 import { useNftSelector } from '~/components/NftSelector/useNftSelector';
+import { NftSelectorPickerGridTokenGridFragment$data } from '~/generated/NftSelectorPickerGridTokenGridFragment.graphql';
 import { RootStackNavigatorParamList, RootStackNavigatorProp } from '~/navigation/types';
 import { NftSelectorLoadingSkeleton } from '~/screens/NftSelectorScreen/NftSelectorLoadingSkeleton';
 import { NftSelectorPickerGrid } from '~/screens/NftSelectorScreen/NftSelectorPickerGrid';
@@ -29,20 +30,78 @@ export function GalleryEditorNftSelector() {
 
   const route = useRoute<RouteProp<RootStackNavigatorParamList, 'NftSelectorGalleryEditor'>>();
 
+  const [isMultiselectMode, setIsMultiselectMode] = useState(false);
+
+  const [selectedTokens, setSelectedTokens] = useState<Set<string>>(new Set());
+
   const handleSelectNft = useCallback(
     (tokenId: string) => {
-      navigation.navigate({
-        name: 'GalleryEditor',
-        params: {
-          galleryId: route.params.galleryId,
-          stagedTokens: [tokenId],
-        },
-        merge: true,
-      });
+      if (isMultiselectMode) {
+        setSelectedTokens((prevTokens) => {
+          const newTokens = new Set(prevTokens);
+
+          if (newTokens.has(tokenId)) {
+            newTokens.delete(tokenId);
+          } else {
+            newTokens.add(tokenId);
+          }
+          return newTokens;
+        });
+      } else {
+        navigation.navigate({
+          name: 'GalleryEditor',
+          params: {
+            galleryId: route.params.galleryId,
+            stagedTokens: [tokenId],
+          },
+          merge: true,
+        });
+      }
+    },
+    [isMultiselectMode, navigation, route.params.galleryId]
+  );
+
+  const handleSelectNftGroup = useCallback(
+    (contractAddress: string, tokens: NftSelectorPickerGridTokenGridFragment$data[number][]) => {
+      if (isMultiselectMode) {
+        setSelectedTokens((prevTokens) => {
+          const newTokens = new Set(prevTokens);
+
+          tokens.forEach((token) => {
+            if (newTokens.has(token.dbid)) {
+              newTokens.delete(token.dbid);
+            } else {
+              newTokens.add(token.dbid);
+            }
+          });
+          return newTokens;
+        });
+      } else {
+        navigation.navigate({
+          name: 'NftSelectorContractGalleryEditor',
+          params: {
+            galleryId: route.params.galleryId,
+            contractAddress,
+          },
+        });
+      }
     },
-    [navigation, route.params.galleryId]
+    [isMultiselectMode, navigation, route.params.galleryId]
   );
 
+  const handleAddSelectedTokens = useCallback(() => {
+    const formattedTokens = Array.from(selectedTokens);
+
+    navigation.navigate({
+      name: 'GalleryEditor',
+      params: {
+        galleryId: route.params.galleryId,
+        stagedTokens: formattedTokens,
+      },
+      merge: true,
+    });
+  }, [navigation, route.params.galleryId, selectedTokens]);
+
   const searchCriteria = useMemo(
     () => ({
       searchQuery,
@@ -56,7 +115,23 @@ export function GalleryEditorNftSelector() {
   return (
     <NftSelectorWrapper ownershipTypeFilter={ownershipTypeFilter} isFullscreen>
       <View className="gap-8">
-        <NftSelectorHeader title="Select item to add" />
+        <NftSelectorHeader
+          title="Select item to add"
+          rightButton={
+            isMultiselectMode && selectedTokens.size > 0 ? (
+              <Button
+                onPress={handleAddSelectedTokens}
+                eventElementId={null}
+                eventName={null}
+                eventContext={null}
+                text="add"
+                size="xs"
+                fontWeight="Bold"
+                textTransform="capitalize"
+              />
+            ) : null
+          }
+        />
         <NftSelectorToolbar
           searchQuery={searchQuery}
           setSearchQuery={setSearchQuery}
@@ -68,6 +143,8 @@ export function GalleryEditorNftSelector() {
           setSortView={setSortView}
           isSyncing={isSyncing}
           isSyncingCreatedTokens={isSyncingCreatedTokens}
+          isMultiselectMode={isMultiselectMode}
+          setIsMultiselectMode={setIsMultiselectMode}
           handleSync={sync}
         />
       </View>
@@ -77,7 +154,9 @@ export function GalleryEditorNftSelector() {
             searchCriteria={searchCriteria}
             onRefresh={sync}
             onSelect={handleSelectNft}
-            onSelectNftGroup={noop}
+            onSelectNftGroup={handleSelectNftGroup}
+            isMultiselectMode={isMultiselectMode}
+            selectedTokens={selectedTokens}
           />
         </Suspense>
       </View>
diff --git a/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
new file mode 100644
index 0000000000..36694d255a
--- /dev/null
+++ b/apps/mobile/src/screens/GalleryScreen/GalleryEditorNftSelectorContractScreen.tsx
@@ -0,0 +1,160 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { useCallback, useMemo, useState } from 'react';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+
+import { Button } from '~/components/Button';
+import { NftSelectorContractHeader } from '~/components/NftSelector/NftSelectorContract/NftSelectorContractHeader';
+import { NftSelectorContractPickerGrid } from '~/components/NftSelector/NftSelectorContract/NftSelectorContractPickerGrid';
+import { NftSelectorContractToolbar } from '~/components/NftSelector/NftSelectorContract/NftSelectorContractToolbar';
+import { NftSelectorContractWrapper } from '~/components/NftSelector/NftSelectorContract/NftSelectorContractWrapper';
+import { GalleryEditorNftSelectorContractScreenQuery } from '~/generated/GalleryEditorNftSelectorContractScreenQuery.graphql';
+import { RootStackNavigatorParamList, RootStackNavigatorProp } from '~/navigation/types';
+
+export function GalleryEditorNftSelectorContractScreen() {
+  const query = useLazyLoadQuery<GalleryEditorNftSelectorContractScreenQuery>(
+    graphql`
+      query GalleryEditorNftSelectorContractScreenQuery {
+        viewer {
+          ... on Viewer {
+            user {
+              tokens {
+                __typename
+                dbid
+                definition {
+                  contract {
+                    dbid
+                    name
+                    contractAddress {
+                      address
+                    }
+                  }
+                }
+                ...NftSelectorContractPickerGridFragment
+              }
+            }
+          }
+        }
+      }
+    `,
+    {}
+  );
+
+  const navigation = useNavigation<RootStackNavigatorProp>();
+  const route =
+    useRoute<RouteProp<RootStackNavigatorParamList, 'NftSelectorContractGalleryEditor'>>();
+
+  const [isMultiselectMode, setIsMultiselectMode] = useState(false);
+  const [selectedTokens, setSelectedTokens] = useState<Set<string>>(new Set());
+
+  const contractAddress = route.params.contractAddress;
+  const isCreator = route.params.ownerFilter === 'Created';
+
+  const nonNullableTokens = useMemo(() => {
+    const tokens = [];
+
+    for (const token of query.viewer?.user?.tokens ?? []) {
+      if (token?.definition?.contract?.contractAddress?.address === contractAddress) {
+        tokens.push(token);
+      }
+    }
+
+    return tokens;
+  }, [query.viewer?.user?.tokens, contractAddress]);
+
+  const contractName = nonNullableTokens[0]?.definition?.contract?.name ?? '';
+  const contractId = nonNullableTokens[0]?.definition?.contract?.dbid ?? '';
+
+  const handleSelectNft = useCallback(
+    (tokenId: string) => {
+      if (isMultiselectMode) {
+        setSelectedTokens((prevTokens) => {
+          const newTokens = new Set(prevTokens);
+
+          if (newTokens.has(tokenId)) {
+            newTokens.delete(tokenId);
+          } else {
+            newTokens.add(tokenId);
+          }
+          return newTokens;
+        });
+      } else {
+        navigation.navigate({
+          name: 'GalleryEditor',
+          params: {
+            galleryId: route.params.galleryId,
+            stagedTokens: [tokenId],
+          },
+          merge: true,
+        });
+      }
+    },
+    [navigation, isMultiselectMode, route.params.galleryId]
+  );
+
+  const handleAddSelectedTokens = useCallback(() => {
+    const formattedTokens = Array.from(selectedTokens);
+
+    navigation.navigate({
+      name: 'GalleryEditor',
+      params: {
+        galleryId: route.params.galleryId,
+        stagedTokens: formattedTokens,
+      },
+      merge: true,
+    });
+  }, [navigation, route.params.galleryId, selectedTokens]);
+
+  const handleSelectedAllPress = useCallback(() => {
+    setSelectedTokens((prevTokens) => {
+      const newTokens = new Set(prevTokens);
+
+      if (newTokens.size > 0) {
+        setIsMultiselectMode(false);
+        return new Set();
+      } else {
+        setIsMultiselectMode(true);
+        return new Set(nonNullableTokens.map((token) => token.dbid));
+      }
+    });
+  }, [nonNullableTokens]);
+
+  return (
+    <NftSelectorContractWrapper isFullscreen>
+      <NftSelectorContractHeader
+        title="Select items to add"
+        isCreator={isCreator}
+        contractId={contractId}
+        rightButton={
+          selectedTokens.size > 0 ? (
+            <Button
+              onPress={handleAddSelectedTokens}
+              eventElementId={null}
+              eventName={null}
+              eventContext={null}
+              text="add"
+              size="xs"
+              fontWeight="Bold"
+              textTransform="capitalize"
+            />
+          ) : null
+        }
+      />
+      <NftSelectorContractToolbar
+        contractId={contractId}
+        contractName={contractName}
+        isMultiselectMode={isMultiselectMode}
+        setIsMultiselectMode={setIsMultiselectMode}
+        onSelectedAllPress={handleSelectedAllPress}
+        hasSelectedItems={selectedTokens.size > 0}
+        ownershipTypeFilter={route.params.ownerFilter || 'Collected'}
+      />
+      <NftSelectorContractPickerGrid
+        isCreator={isCreator}
+        tokenRefs={nonNullableTokens}
+        onSelect={handleSelectNft}
+        isMultiselectMode={isMultiselectMode}
+        selectedTokens={selectedTokens}
+      />
+    </NftSelectorContractWrapper>
+  );
+}
diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
index 9425f8b92d..4ffd5144fb 100644
--- a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
+++ b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerGrid.tsx
@@ -13,6 +13,7 @@ import { GalleryRefreshControl } from '~/components/GalleryRefreshControl';
 import { GallerySkeleton } from '~/components/GallerySkeleton';
 import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
 import { NftPreviewAssetToWrapInBoundary } from '~/components/NftPreview/NftPreviewAsset';
+import { NftSelectorSelectionIndicator } from '~/components/NftSelector/NftSelectorSelectionIndicator';
 import { Typography } from '~/components/Typography';
 import { useManageWalletActions } from '~/contexts/ManageWalletContext';
 import { useSyncTokensActions } from '~/contexts/SyncTokensContext';
@@ -48,15 +49,24 @@ type NftSelectorPickerGridProps = {
     networkFilter: NetworkChoice;
     sortView: NftSelectorSortView;
   };
+
+  isMultiselectMode?: boolean;
+  selectedTokens?: Set<string>;
+
   onRefresh: () => void;
 
   onSelect: (tokenId: string) => void;
-  onSelectNftGroup: (contractAddress: string) => void;
+  onSelectNftGroup: (
+    contractAddress: string,
+    tokens: NftSelectorPickerGridTokenGridFragment$data[number][]
+  ) => void;
 };
 
 export function NftSelectorPickerGrid({
   searchCriteria,
   style,
+  isMultiselectMode,
+  selectedTokens = new Set(),
   onRefresh,
   onSelect,
   onSelectNftGroup,
@@ -315,6 +325,8 @@ export function NftSelectorPickerGrid({
                 ownerFilter={searchCriteria.ownerFilter}
                 onSelectNft={onSelect}
                 onSelectGroup={onSelectNftGroup}
+                isMultiselectMode={isMultiselectMode}
+                selectedTokens={selectedTokens}
               />
             );
           })}
@@ -326,7 +338,7 @@ export function NftSelectorPickerGrid({
         </View>
       );
     },
-    [onSelect, onSelectNftGroup, searchCriteria.ownerFilter]
+    [isMultiselectMode, onSelect, onSelectNftGroup, searchCriteria.ownerFilter, selectedTokens]
   );
 
   const navigation = useNavigation<LoginStackNavigatorProp>();
@@ -387,6 +399,7 @@ export function NftSelectorPickerGrid({
         refreshControl={
           <GalleryRefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
         }
+        extraData={[isMultiselectMode, selectedTokens]}
       />
     </View>
   );
@@ -436,10 +449,22 @@ type TokenGridProps = {
   tokenRefs: NftSelectorPickerGridTokenGridFragment$key;
   ownerFilter: 'Created' | 'Collected';
   contractAddress: string;
-  onPress: (contractAddress: string) => void;
+  isMultiselectMode?: boolean;
+  isSelected?: boolean;
+  onPress: (
+    contractAddress: string,
+    tokens: NftSelectorPickerGridTokenGridFragment$data[number][]
+  ) => void;
 };
 
-function TokenGrid({ tokenRefs, contractAddress, style, onPress }: TokenGridProps) {
+function TokenGrid({
+  tokenRefs,
+  contractAddress,
+  style,
+  isMultiselectMode,
+  onPress,
+  isSelected = false,
+}: TokenGridProps) {
   const tokens = useFragment(
     graphql`
       fragment NftSelectorPickerGridTokenGridFragment on Token @relay(plural: true) {
@@ -460,8 +485,8 @@ function TokenGrid({ tokenRefs, contractAddress, style, onPress }: TokenGridProp
   }, [tokens]);
 
   const handlePress = useCallback(() => {
-    onPress(contractAddress);
-  }, [contractAddress, onPress]);
+    onPress(contractAddress, removeNullValues(tokens));
+  }, [contractAddress, onPress, tokens]);
 
   return (
     <GalleryTouchableOpacity
@@ -490,6 +515,8 @@ function TokenGrid({ tokenRefs, contractAddress, style, onPress }: TokenGridProp
           );
         })}
       </View>
+
+      {isMultiselectMode && <NftSelectorSelectionIndicator selected={isSelected} />}
     </GalleryTouchableOpacity>
   );
 }
@@ -500,7 +527,12 @@ type TokenGroupProps = {
   tokenRefs: NftSelectorPickerGridOneOrManyFragment$key;
   contractAddress: string;
   onSelectNft: (tokenId: string) => void;
-  onSelectGroup: (contractAddress: string) => void;
+  onSelectGroup: (
+    contractAddress: string,
+    tokens: NftSelectorPickerGridTokenGridFragment$data[number][]
+  ) => void;
+  isMultiselectMode?: boolean;
+  selectedTokens?: Set<string>;
 };
 
 function TokenGroup({
@@ -510,10 +542,13 @@ function TokenGroup({
   ownerFilter,
   onSelectNft,
   onSelectGroup,
+  isMultiselectMode,
+  selectedTokens = new Set(),
 }: TokenGroupProps) {
   const tokens = useFragment(
     graphql`
       fragment NftSelectorPickerGridOneOrManyFragment on Token @relay(plural: true) {
+        dbid
         ...NftSelectorPickerGridTokenGridFragment
         ...NftSelectorPickerSingularAssetFragment
       }
@@ -522,20 +557,36 @@ function TokenGroup({
   );
 
   const [firstToken] = tokens;
+
+  const isSingleView = useMemo(() => {
+    return tokens.length === 1;
+  }, [tokens]);
+
+  const isSelected = useMemo(() => {
+    return selectedTokens.has(firstToken?.dbid ?? '');
+  }, [firstToken?.dbid, selectedTokens]);
+
   if (!firstToken) {
     return null;
   }
 
   return (
     <View style={style} className="flex-1 aspect-square bg-offWhite dark:bg-black-800">
-      {tokens.length === 1 ? (
-        <NftSelectorPickerSingularAsset onPress={onSelectNft} tokenRef={firstToken} />
+      {isSingleView ? (
+        <NftSelectorPickerSingularAsset
+          onPress={onSelectNft}
+          tokenRef={firstToken}
+          isMultiselectMode={isMultiselectMode}
+          isSelected={isSelected}
+        />
       ) : (
         <TokenGrid
           ownerFilter={ownerFilter}
           contractAddress={contractAddress}
           tokenRefs={tokens}
           onPress={onSelectGroup}
+          isMultiselectMode={isMultiselectMode}
+          isSelected={isSelected}
         />
       )}
     </View>
diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerSingularAsset.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerSingularAsset.tsx
index 82a0ab17a7..eb97ef2bb6 100644
--- a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerSingularAsset.tsx
+++ b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorPickerSingularAsset.tsx
@@ -9,6 +9,7 @@ import { TokenFailureBoundary } from '~/components/Boundaries/TokenFailureBounda
 import { GallerySkeleton } from '~/components/GallerySkeleton';
 import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
 import { NftPreviewAssetToWrapInBoundary } from '~/components/NftPreview/NftPreviewAsset';
+import { NftSelectorSelectionIndicator } from '~/components/NftSelector/NftSelectorSelectionIndicator';
 import { NftSelectorPickerSingularAssetFragment$key } from '~/generated/NftSelectorPickerSingularAssetFragment.graphql';
 import { contexts } from '~/shared/analytics/constants';
 import colors from '~/shared/theme/colors';
@@ -18,6 +19,8 @@ type NftSelectorPickerSingularAssetProps = {
   tokenRef: NftSelectorPickerSingularAssetFragment$key;
   onPress: (tokenId: string) => void;
   isLoading?: boolean;
+  isMultiselectMode?: boolean;
+  isSelected?: boolean;
 };
 
 export function NftSelectorPickerSingularAsset({
@@ -25,6 +28,8 @@ export function NftSelectorPickerSingularAsset({
   tokenRef,
   onPress,
   isLoading,
+  isMultiselectMode,
+  isSelected = false,
 }: NftSelectorPickerSingularAssetProps) {
   const token = useFragment(
     graphql`
@@ -69,6 +74,8 @@ export function NftSelectorPickerSingularAsset({
             resizeMode={ResizeMode.COVER}
             onLoad={handleAssetLoad}
           />
+
+          {isMultiselectMode && <NftSelectorSelectionIndicator selected={isSelected} />}
           {!assetLoaded && (
             <View className="absolute inset-0">
               <GallerySkeleton borderRadius={0}>

From 80c3381cb4c490762d2cac7efffffc5f53129faa Mon Sep 17 00:00:00 2001
From: kaito <80802871+kaitoo1@users.noreply.github.com>
Date: Wed, 1 May 2024 19:17:18 +0900
Subject: [PATCH 03/13] Mobile: Add pinned announcement notification powered by
 Sanity + Make Mint Flow configurable via Sanity (#2445)

* add pinned announcement notification powered by Sanity

* make mint flow bottom sheet generic, powered by sanity

* sanity powered mint config

* address comments

* update dark mode colors
---
 apps/mobile/src/App.tsx                       |  46 +++---
 .../src/components/ClaimMintUpsellBanner.tsx  |  26 ++-
 .../MintCampaign/MintCampaignBottomSheet.tsx  |  39 ++++-
 .../MintCampaignPostTransaction.tsx           |  44 ++---
 .../MintCampaignPreTransaction.tsx            |  37 ++---
 apps/mobile/src/components/MintLinkButton.tsx |   9 +-
 .../Notification/NotificationList.tsx         |  40 ++++-
 .../AnnouncementNotification.tsx              |  80 +++++++++
 .../Notifications/GalleryAnnouncement.tsx     |   9 +-
 .../contexts/SanityAnnouncementContext.tsx    | 154 ++++++++++++++++++
 .../mobile/src/contexts/SanityDataContext.tsx |  93 +++++++++++
 .../MainTabNavigator/NotificationBlueDot.tsx  |   8 +-
 .../src/navigation/RootStackNavigator.tsx     |   7 +-
 .../SettingsScreen/DebugBottomSheetModal.tsx  |   6 +-
 .../screens/SettingsScreen/SettingsScreen.tsx |   9 +-
 15 files changed, 521 insertions(+), 86 deletions(-)
 create mode 100644 apps/mobile/src/components/Notification/Notifications/AnnouncementNotification.tsx
 create mode 100644 apps/mobile/src/contexts/SanityAnnouncementContext.tsx
 create mode 100644 apps/mobile/src/contexts/SanityDataContext.tsx

diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx
index 8072dd656c..c3a4b0c34e 100644
--- a/apps/mobile/src/App.tsx
+++ b/apps/mobile/src/App.tsx
@@ -31,6 +31,8 @@ import { CheckMaintenanceOnAppForeground, MaintenanceScreen } from './components
 import SearchProvider from './components/Search/SearchContext';
 import BottomSheetModalProvider from './contexts/BottomSheetModalContext';
 import ManageWalletProvider from './contexts/ManageWalletContext';
+import { SanityAnnouncementProvider } from './contexts/SanityAnnouncementContext';
+import SanityDataProvider from './contexts/SanityDataContext';
 import SyncTokensProvider from './contexts/SyncTokensContext';
 import ToastProvider from './contexts/ToastContext';
 import { TokenStateManagerProvider } from './contexts/TokenStateManagerContext';
@@ -156,26 +158,30 @@ export default function App() {
                           <magic.Relayer />
                           <SearchProvider>
                             <NavigationContainer ref={navigationRef}>
-                              <ToastProvider>
-                                <TokenStateManagerProvider>
-                                  <PortalProvider>
-                                    <BottomSheetModalProvider>
-                                      <SyncTokensProvider>
-                                        <ManageWalletProvider>
-                                          {/* Register the user's push token if one exists (does not prompt the user) */}
-                                          <NotificationRegistrar />
-                                          <DevMenuItems />
-                                          <DeepLinkRegistrar />
-                                          <RootStackNavigator
-                                            navigationContainerRef={navigationRef}
-                                          />
-                                        </ManageWalletProvider>
-                                      </SyncTokensProvider>
-                                      <PortalHost name="app-context" />
-                                    </BottomSheetModalProvider>
-                                  </PortalProvider>
-                                </TokenStateManagerProvider>
-                              </ToastProvider>
+                              <SanityDataProvider>
+                                <ToastProvider>
+                                  <TokenStateManagerProvider>
+                                    <PortalProvider>
+                                      <BottomSheetModalProvider>
+                                        <SyncTokensProvider>
+                                          <ManageWalletProvider>
+                                            <SanityAnnouncementProvider>
+                                              {/* Register the user's push token if one exists (does not prompt the user) */}
+                                              <NotificationRegistrar />
+                                              <DevMenuItems />
+                                              <DeepLinkRegistrar />
+                                              <RootStackNavigator
+                                                navigationContainerRef={navigationRef}
+                                              />
+                                            </SanityAnnouncementProvider>
+                                          </ManageWalletProvider>
+                                        </SyncTokensProvider>
+                                        <PortalHost name="app-context" />
+                                      </BottomSheetModalProvider>
+                                    </PortalProvider>
+                                  </TokenStateManagerProvider>
+                                </ToastProvider>
+                              </SanityDataProvider>
                             </NavigationContainer>
                           </SearchProvider>
                         </SafeAreaProvider>
diff --git a/apps/mobile/src/components/ClaimMintUpsellBanner.tsx b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx
index 94ce20c97b..35313a41b0 100644
--- a/apps/mobile/src/components/ClaimMintUpsellBanner.tsx
+++ b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx
@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
-import { MCHX_CLAIM_CODE_KEY } from 'src/constants/storageKeys';
 import usePersistedState from 'src/hooks/usePersistedState';
 import { XMarkIcon } from 'src/icons/XMarkIcon';
 
 import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementContext';
 import { ClaimMintUpsellBannerFragment$key } from '~/generated/ClaimMintUpsellBannerFragment.graphql';
 import { contexts } from '~/shared/analytics/constants';
 import colors from '~/shared/theme/colors';
@@ -17,9 +17,10 @@ import { Typography } from './Typography';
 
 type Props = {
   queryRef: ClaimMintUpsellBannerFragment$key;
+  projectInternalId: string;
 };
 
-export function ClaimMintUpsellBanner({ queryRef }: Props) {
+export function ClaimMintUpsellBanner({ queryRef, projectInternalId }: Props) {
   const query = useFragment(
     graphql`
       fragment ClaimMintUpsellBannerFragment on Query {
@@ -37,10 +38,10 @@ export function ClaimMintUpsellBanner({ queryRef }: Props) {
 
   const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
 
-  const [claimCode] = usePersistedState(MCHX_CLAIM_CODE_KEY, '');
+  const [claimCode] = usePersistedState(`${projectInternalId}-claim-code`, '');
 
   const [isUpsellMintBannerDismissed, setIsUpsellMintBannerDismissed] = usePersistedState(
-    'isUpsellMintBannerDismissed',
+    `${projectInternalId}-isUpsellMintBannerDismissed`,
     false
   );
 
@@ -49,12 +50,21 @@ export function ClaimMintUpsellBanner({ queryRef }: Props) {
   }, [setIsUpsellMintBannerDismissed]);
 
   const handleClaimPress = useCallback(() => {
-    showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
-  }, [hideBottomSheetModal, showBottomSheetModal]);
+    showBottomSheetModal({
+      content: (
+        <MintCampaignBottomSheet
+          onClose={hideBottomSheetModal}
+          projectInternalId={projectInternalId}
+        />
+      ),
+    });
+  }, [hideBottomSheetModal, projectInternalId, showBottomSheetModal]);
+
+  const { announcement } = useSanityAnnouncementContext();
 
   const user = query.viewer?.user;
 
-  if (!user || claimCode || isUpsellMintBannerDismissed) {
+  if (!user || !announcement || claimCode || isUpsellMintBannerDismissed) {
     return <View className="bg-white dark:bg-black-900" />;
   }
 
@@ -71,7 +81,7 @@ export function ClaimMintUpsellBanner({ queryRef }: Props) {
           font={{ family: 'ABCDiatype', weight: 'Regular' }}
           className="text-offWhite text-xs"
         >
-          Claim your free generative work by MCHX
+          {announcement.description}
         </Typography>
       </View>
       <View className="flex-row items-center space-x-2">
diff --git a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignBottomSheet.tsx b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignBottomSheet.tsx
index 728d020efc..211baec115 100644
--- a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignBottomSheet.tsx
+++ b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignBottomSheet.tsx
@@ -1,18 +1,47 @@
-import { MCHX_CLAIM_CODE_KEY } from 'src/constants/storageKeys';
+import { useMemo } from 'react';
 import usePersistedState from 'src/hooks/usePersistedState';
 
+import { useSanityDataContext } from '~/contexts/SanityDataContext';
+
 import MintCampaignPostTransaction from './MintCampaignPostTransaction';
 import MintCampaignPreTransaction from './MintCampaignPreTransaction';
 
-export default function MintCampaignBottomSheet({ onClose }: { onClose: () => void }) {
+type Props = {
+  onClose?: () => void;
+  projectInternalId: string;
+};
+
+export default function MintCampaignBottomSheet({ onClose, projectInternalId }: Props) {
   // claimCode is the identifer used to poll for the status of the mint
   // Once we kick off the mint, the backend returns a claim code from Highlight that we can use to check the status of the mint
 
-  const [claimCode, setClaimCode] = usePersistedState(MCHX_CLAIM_CODE_KEY, '');
+  const [claimCode, setClaimCode] = usePersistedState(`${projectInternalId}_claim_code`, '');
+
+  const { data } = useSanityDataContext();
+  const projectData = useMemo(() => {
+    return data?.mintProjects.find((document) => document.internalId === projectInternalId);
+  }, [data, projectInternalId]);
+
+  if (!projectData) {
+    // TODO decide best way to handle missing data
+    return null;
+  }
 
   if (claimCode) {
-    return <MintCampaignPostTransaction claimCode={claimCode} onClose={onClose} />;
+    return (
+      <MintCampaignPostTransaction
+        claimCode={claimCode}
+        onClose={onClose}
+        projectData={projectData}
+      />
+    );
   }
 
-  return <MintCampaignPreTransaction setClaimCode={setClaimCode} />;
+  return (
+    <MintCampaignPreTransaction
+      setClaimCode={setClaimCode}
+      projectInternalId={projectInternalId}
+      projectData={projectData}
+    />
+  );
 }
diff --git a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPostTransaction.tsx b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPostTransaction.tsx
index 4099032707..2b4b309c2a 100644
--- a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPostTransaction.tsx
+++ b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPostTransaction.tsx
@@ -15,6 +15,7 @@ import { SpinnerIcon } from 'src/icons/SpinnerIcon';
 
 import { Button } from '~/components/Button';
 import { BaseM, TitleS } from '~/components/Text';
+import { MintProject } from '~/contexts/SanityDataContext';
 import {
   HighlightTxStatus,
   MintCampaignPostTransactionMintStatusQuery,
@@ -26,9 +27,11 @@ import { NftDetailAsset } from '../../../screens/NftDetailScreen/NftDetailAsset/
 export default function MintCampaignPostTransaction({
   claimCode,
   onClose,
+  projectData,
 }: {
   claimCode: string;
-  onClose: () => void;
+  onClose?: () => void;
+  projectData: MintProject;
 }) {
   const [state, setState] = useState<HighlightTxStatus>('TX_PENDING');
   // TODO: Fix any - prioritizing merging atm
@@ -119,7 +122,9 @@ export default function MintCampaignPostTransaction({
       });
     }
 
-    onClose();
+    if (onClose) {
+      onClose();
+    }
 
     // close bottom sheet
   }, [navigation, onClose, token?.dbid]);
@@ -129,7 +134,9 @@ export default function MintCampaignPostTransaction({
     if (token?.definition?.community) {
       navigateToCommunity(token?.definition?.community);
     }
-    onClose();
+    if (onClose) {
+      onClose();
+    }
   }, [navigateToCommunity, onClose, token?.definition?.community]);
 
   if (state === 'TOKEN_SYNCED' && token) {
@@ -137,7 +144,12 @@ export default function MintCampaignPostTransaction({
       <View>
         <View className="mb-1">
           <TitleS>Congratulations!</TitleS>
-          <TitleS>You collected {`${token?.definition?.name ?? 'Radiance'} by MCHX`}</TitleS>
+          <TitleS>
+            You collected{' '}
+            {`${token?.definition?.name ?? projectData.collectionName} by ${
+              projectData.artistName
+            }`}
+          </TitleS>
         </View>
         <BaseM>
           Thank you for using the Gallery mobile app. Share your unique piece with others below!
@@ -173,7 +185,7 @@ export default function MintCampaignPostTransaction({
       <BaseM>
         {state === 'TX_PENDING'
           ? 'Your new artwork is being minted onchain. This should take less than a minute.'
-          : 'Revealing your unique artwork. It will be ready to view in a moment!'}
+          : 'Revealing your artwork. It will be ready to view in a moment!'}
       </BaseM>
 
       <View className="my-4 flex justify-center items-center bg-faint dark:bg-black-700 w-full aspect-square ">
@@ -183,7 +195,7 @@ export default function MintCampaignPostTransaction({
             size="s"
             colorOverride={{ lightMode: colors.shadow, darkMode: colors.shadow }}
           />
-          <LoadingStateMessage />
+          <LoadingStateMessage funFacts={projectData.funFacts} />
         </View>
       </View>
       {error && <BaseM classNameOverride="text-red">{error}</BaseM>}
@@ -191,22 +203,10 @@ export default function MintCampaignPostTransaction({
   );
 }
 
-const COPY = [
-  'Anton Dubrovin, aka MCHX, was born in Kazakhstan and is currently based in Georgia.',
-  'Anton is a digital artist known for experimenting with colors and form.',
-  'Anton uses color as a universal channel of emotional connection and self-exploration.',
-  'For this project, MCHX created over 60 unique color modes and used a circle as the central object due to its universal symbolism of unity and integrity.',
-  'This work leverages Javascript, GLSL, and Display P3 wide-gamut to explore emotional connection through color.',
-  "Anton's diverse inspiration comes from 20th-century abstraction, Abstract Expressionism, Color Field artists, nature, music, and the internet.",
-  'In his free time, Anton enjoys taking walks, reading, and watching Japanese anime and dramas.',
-  'Anton has been creating art since 2016, but entered the NFT and Web3 space in 2020.',
-  'Anton believes in the exchange of energy inherent in blockchain interactions and his work carries imprints of his emotional states or needs at the time of creation.',
-];
-
 const FADE_DURATION = 250;
 const TEXT_DURATION = 8000;
 
-function LoadingStateMessage() {
+function LoadingStateMessage({ funFacts }: { funFacts: string[] }) {
   const [index, setIndex] = useState(0);
 
   const fadeInOpacity = useSharedValue(1);
@@ -235,18 +235,18 @@ function LoadingStateMessage() {
     const updateDisplayedMessage = async () => {
       fadeOut();
       await new Promise((resolve) => setTimeout(resolve, FADE_DURATION));
-      setIndex((index) => (index + 1) % COPY.length);
+      setIndex((index) => (index + 1) % funFacts.length);
       fadeIn();
     };
 
     const interval = setInterval(updateDisplayedMessage, TEXT_DURATION);
 
     return () => clearInterval(interval);
-  }, [fadeIn, fadeOut]);
+  }, [fadeIn, fadeOut, funFacts.length]);
   return (
     <View className="text-center h-32">
       <Animated.View style={[animatedStyle]}>
-        <BaseM classNameOverride="text-shadow text-center ">{COPY[index]}</BaseM>
+        <BaseM classNameOverride="text-shadow text-center ">{funFacts[index]}</BaseM>
       </Animated.View>
     </View>
   );
diff --git a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPreTransaction.tsx b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPreTransaction.tsx
index c6a0d26a3e..3a8c0e9e45 100644
--- a/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPreTransaction.tsx
+++ b/apps/mobile/src/components/Mint/MintCampaign/MintCampaignPreTransaction.tsx
@@ -2,25 +2,25 @@ import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { Image, View } from 'react-native';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { contexts } from 'shared/analytics/constants';
-import { MCHX_CLAIM_CODE_KEY } from 'src/constants/storageKeys';
 import { useHighlightClaimMint } from 'src/hooks/useHighlightClaimMint';
 import usePersistedState from 'src/hooks/usePersistedState';
 
 import { Button } from '~/components/Button';
 import { BaseM, BaseS, TitleLItalic, TitleS } from '~/components/Text';
+import { MintProject } from '~/contexts/SanityDataContext';
 import { MintCampaignPreTransactionQuery } from '~/generated/MintCampaignPreTransactionQuery.graphql';
 
-export const MCHX_MINT_CAMPAIGN_END_DATE = '2024-05-05T10:00:00-04:00';
-
-const MCHX_COLLECTION_ID = '660d4342c6bc04d5dc5598e7';
-
 export default function MintCampaignPreTransaction({
   setClaimCode,
+  projectInternalId,
+  projectData,
 }: {
   setClaimCode: (claimCode: string) => void;
+  projectInternalId: string;
+  projectData: MintProject;
 }) {
   const calculateTimeLeftText = useCallback(() => {
-    const endDate = new Date(MCHX_MINT_CAMPAIGN_END_DATE).getTime();
+    const endDate = new Date(projectData.endDate).getTime();
     const now = new Date().getTime();
     const difference = endDate - now;
 
@@ -33,13 +33,13 @@ export default function MintCampaignPreTransaction({
     }
 
     return 'Campaign ended';
-  }, []);
+  }, [projectData.endDate]);
 
   const isMintOver = useMemo(() => {
-    const endDate = new Date(MCHX_MINT_CAMPAIGN_END_DATE).getTime();
+    const endDate = new Date(projectData.endDate).getTime();
     const now = new Date().getTime();
     return now > endDate;
-  }, []);
+  }, [projectData.endDate]);
 
   const [timeLeft, setTimeLeft] = useState(calculateTimeLeftText());
   const [error, setError] = useState('');
@@ -54,7 +54,7 @@ export default function MintCampaignPreTransaction({
 
   const { claimMint, isClamingMint } = useHighlightClaimMint();
 
-  const [, setClaimCodeLocalStorage] = usePersistedState(MCHX_CLAIM_CODE_KEY, '');
+  const [, setClaimCodeLocalStorage] = usePersistedState(`${projectInternalId}-claim-code`, '');
 
   const handlePress = useCallback(
     async (recipientWalletId: string) => {
@@ -64,7 +64,7 @@ export default function MintCampaignPreTransaction({
 
       try {
         const claimCode = await claimMint({
-          collectionId: MCHX_COLLECTION_ID,
+          collectionId: projectData.highlightProjectId,
           recipientWalletId,
         });
 
@@ -84,20 +84,17 @@ export default function MintCampaignPreTransaction({
         setError('Something went wrong while minting. Please try again.');
       }
     },
-    [claimMint, setClaimCode, setClaimCodeLocalStorage]
+    [claimMint, projectData.highlightProjectId, setClaimCode, setClaimCodeLocalStorage]
   );
 
   return (
     <View>
-      <TitleS>Exclusive free mint</TitleS>
-      <BaseM classNameOverride="mt-1">
-        Thank you for downloading the Gallery app. As a token of our gratitude, we invite you to
-        mint Radiance by MCHX - on us ❤️
-      </BaseM>
+      <TitleS>{projectData.title}</TitleS>
+      <BaseM classNameOverride="mt-1">{projectData.description}</BaseM>
       <Image
         className="w-full aspect-square my-4"
         source={{
-          uri: 'https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fhighlight-creator-assets.highlight.xyz%2Fmain%2Fimage%2Fad73bc52-3e26-45c7-a73c-3666f165e9fa.png%3Fd%3D1000x1000',
+          uri: projectData.previewImageUrl,
         }}
       />
       <View className="flex flex-row space-apart justify-between">
@@ -107,7 +104,7 @@ export default function MintCampaignPreTransaction({
           <BaseM>Limit 1 per user</BaseM>
         </View>
         <View>
-          <TitleLItalic>Gallery x MCHX</TitleLItalic>
+          <TitleLItalic>Gallery x {projectData.artistName}</TitleLItalic>
         </View>
       </View>
       <View className="my-3">
@@ -128,7 +125,7 @@ export default function MintCampaignPreTransaction({
         {error && <BaseM classNameOverride="text-red">{error}</BaseM>}
       </View>
       <BaseS>
-        Note: Image above is an indicative preview only, final artwork will be uniquely generated.
+        Note: Image above is an indicative preview only, final artwork will be randomly generated.
         Powered by highlight.xyz
       </BaseS>
     </View>
diff --git a/apps/mobile/src/components/MintLinkButton.tsx b/apps/mobile/src/components/MintLinkButton.tsx
index 811625f1f4..010ec550fe 100644
--- a/apps/mobile/src/components/MintLinkButton.tsx
+++ b/apps/mobile/src/components/MintLinkButton.tsx
@@ -148,7 +148,14 @@ export function MintLinkButton({
 
   const handlePress = useCallback(() => {
     if (isRadiance) {
-      showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
+      showBottomSheetModal({
+        content: (
+          <MintCampaignBottomSheet
+            projectInternalId="mchx-app-store-2024"
+            onClose={hideBottomSheetModal}
+          />
+        ),
+      });
     } else {
       Linking.openURL(mintURL);
     }
diff --git a/apps/mobile/src/components/Notification/NotificationList.tsx b/apps/mobile/src/components/Notification/NotificationList.tsx
index 5a73ba2db5..c91bf98335 100644
--- a/apps/mobile/src/components/Notification/NotificationList.tsx
+++ b/apps/mobile/src/components/Notification/NotificationList.tsx
@@ -5,6 +5,7 @@ import { View } from 'react-native';
 import { graphql, usePaginationFragment } from 'react-relay';
 
 import { GalleryRefreshControl } from '~/components/GalleryRefreshControl';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementContext';
 import { NotificationFragment$key } from '~/generated/NotificationFragment.graphql';
 import { NotificationListFragment$key } from '~/generated/NotificationListFragment.graphql';
 import { NotificationQueryFragment$key } from '~/generated/NotificationQueryFragment.graphql';
@@ -14,6 +15,7 @@ import { useRefreshHandle } from '../../hooks/useRefreshHandle';
 import { Typography } from '../Typography';
 import { NOTIFICATIONS_PER_PAGE } from './constants';
 import { Notification } from './Notification';
+import AnnouncementNotification from './Notifications/AnnouncementNotification';
 
 type Props = {
   queryRef: NotificationListFragment$key;
@@ -23,8 +25,16 @@ type NotificationType = {
   id: string;
   notification: NotificationFragment$key;
   query: NotificationQueryFragment$key;
+  kind: 'notification';
 };
 
+type AnnouncementType = {
+  id: string;
+  kind: 'announcement';
+};
+
+type NotificationListItem = NotificationType | AnnouncementType;
+
 export function NotificationList({ queryRef }: Props) {
   const {
     data: query,
@@ -59,22 +69,29 @@ export function NotificationList({ queryRef }: Props) {
     queryRef
   );
 
+  const { announcement, fetchAnnouncement, hasDismissedAnnouncement } =
+    useSanityAnnouncementContext();
+
   const clearNotifications = useMobileClearNotifications();
   const { isRefreshing, handleRefresh } = useRefreshHandle(refetch);
 
   const nonNullNotifications = useMemo(() => {
-    const notifications: NotificationType[] = [];
+    const notifications: NotificationListItem[] = [];
 
     for (const edge of query.viewer?.notifications?.edges ?? []) {
       if (edge?.node) {
-        notifications.push({ ...edge.node, notification: edge.node, query });
+        notifications.push({ ...edge.node, notification: edge.node, query, kind: 'notification' });
       }
     }
 
+    if (announcement?.active && !hasDismissedAnnouncement) {
+      notifications.push({ id: 'announcement', kind: 'announcement' });
+    }
+
     notifications.reverse();
 
     return notifications;
-  }, [query]);
+  }, [announcement, hasDismissedAnnouncement, query]);
 
   const loadMore = useCallback(() => {
     if (hasPrevious) {
@@ -82,10 +99,18 @@ export function NotificationList({ queryRef }: Props) {
     }
   }, [hasPrevious, loadPrevious]);
 
-  const renderItem = useCallback<ListRenderItem<NotificationType>>(({ item }) => {
+  const renderItem = useCallback<ListRenderItem<NotificationListItem>>(({ item }) => {
+    if (item.kind === 'announcement') {
+      return <AnnouncementNotification />;
+    }
     return <Notification key={item.id} queryRef={item.query} notificationRef={item.notification} />;
   }, []);
 
+  const handleRefreshAndFetchAnnouncement = useCallback(() => {
+    fetchAnnouncement();
+    handleRefresh();
+  }, [fetchAnnouncement, handleRefresh]);
+
   // if user go outside of notifications screen, clear notifications
   useFocusEffect(
     useCallback(() => {
@@ -119,7 +144,12 @@ export function NotificationList({ queryRef }: Props) {
       onEndReached={loadMore}
       refreshing={isLoadingPrevious}
       onEndReachedThreshold={0.8}
-      refreshControl={<GalleryRefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
+      refreshControl={
+        <GalleryRefreshControl
+          refreshing={isRefreshing}
+          onRefresh={handleRefreshAndFetchAnnouncement}
+        />
+      }
     />
   );
 }
diff --git a/apps/mobile/src/components/Notification/Notifications/AnnouncementNotification.tsx b/apps/mobile/src/components/Notification/Notifications/AnnouncementNotification.tsx
new file mode 100644
index 0000000000..e176e1a281
--- /dev/null
+++ b/apps/mobile/src/components/Notification/Notifications/AnnouncementNotification.tsx
@@ -0,0 +1,80 @@
+import { ResizeMode } from 'expo-av';
+import { useColorScheme } from 'nativewind';
+import { useCallback, useEffect } from 'react';
+import { View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { contexts } from 'shared/analytics/constants';
+import colors from 'shared/theme/colors';
+import { XMarkIcon } from 'src/icons/XMarkIcon';
+
+import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
+import MintCampaignBottomSheet from '~/components/Mint/MintCampaign/MintCampaignBottomSheet';
+import { BaseM } from '~/components/Text';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementContext';
+
+// Displays announcement content from Sanity
+export default function AnnouncementNotification() {
+  const { announcement, markAnnouncementAsSeen, dismissAnnouncement } =
+    useSanityAnnouncementContext();
+  const { showBottomSheetModal } = useBottomSheetModalActions();
+
+  const handlePress = useCallback(() => {
+    if (!announcement) return;
+    showBottomSheetModal({
+      content: <MintCampaignBottomSheet projectInternalId={announcement.internal_id} />,
+    });
+  }, [announcement, showBottomSheetModal]);
+
+  const handleDismissPress = useCallback(() => {
+    dismissAnnouncement();
+  }, [dismissAnnouncement]);
+
+  useEffect(() => {
+    markAnnouncementAsSeen();
+    // Only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { colorScheme } = useColorScheme();
+
+  if (!announcement) {
+    return null;
+  }
+
+  return (
+    <View className="flex flex-row m-2">
+      <GalleryTouchableOpacity
+        onPress={handlePress}
+        className="flex-row flex-1 items-start space-x-2 border border-activeBlue dark:border-darkModeBlue p-3"
+        eventElementId="Announcement Notification"
+        eventName="Announcement Notification Pressed"
+        eventContext={contexts.Notifications}
+      >
+        <View className="flex-row flex-1 items-center space-x-2">
+          <FastImage
+            style={{ width: 56, height: 56 }}
+            resizeMode={ResizeMode.COVER}
+            source={{ uri: announcement.imageUrl }}
+          />
+          <View className="flex flex-col flex-1 ">
+            <BaseM weight="Bold" classNameOverride="text-activeBlue dark:text-darkModeBlue">
+              {announcement.title}
+            </BaseM>
+            <BaseM classNameOverride="text-activeBlue dark:text-darkModeBlue">
+              {announcement.description}
+            </BaseM>
+          </View>
+        </View>
+        <GalleryTouchableOpacity
+          onPress={handleDismissPress}
+          eventElementId="Dismiss Announcement Button"
+          eventName="Pressed Dismiss Announcement Button"
+          eventContext={contexts.Notifications}
+        >
+          <XMarkIcon color={colorScheme === 'dark' ? colors.darkModeBlue : colors.activeBlue} />
+        </GalleryTouchableOpacity>
+      </GalleryTouchableOpacity>
+    </View>
+  );
+}
diff --git a/apps/mobile/src/components/Notification/Notifications/GalleryAnnouncement.tsx b/apps/mobile/src/components/Notification/Notifications/GalleryAnnouncement.tsx
index 1730b33869..9e81bf334c 100644
--- a/apps/mobile/src/components/Notification/Notifications/GalleryAnnouncement.tsx
+++ b/apps/mobile/src/components/Notification/Notifications/GalleryAnnouncement.tsx
@@ -49,7 +49,14 @@ export function GalleryAnnouncement({ queryRef, notificationRef }: Props) {
   const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
   const handlePress = useCallback(() => {
     if (internalId === 'apr-2024-mchx-collab') {
-      showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
+      showBottomSheetModal({
+        content: (
+          <MintCampaignBottomSheet
+            onClose={hideBottomSheetModal}
+            projectInternalId="mchx-app-store-2024"
+          />
+        ),
+      });
       return;
     }
     if (!ctaLink) return;
diff --git a/apps/mobile/src/contexts/SanityAnnouncementContext.tsx b/apps/mobile/src/contexts/SanityAnnouncementContext.tsx
new file mode 100644
index 0000000000..921edcd739
--- /dev/null
+++ b/apps/mobile/src/contexts/SanityAnnouncementContext.tsx
@@ -0,0 +1,154 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useReportError } from 'shared/contexts/ErrorReportingContext';
+import { fetchSanityContent } from 'src/utils/sanity';
+import { useEffectOnAppForeground } from 'src/utils/useEffectOnAppForeground';
+
+type Announcement = {
+  internal_id: string;
+  active: boolean;
+  title: string;
+  description: string;
+  imageUrl: string;
+  platform: string;
+  min_mobile_version: number;
+  ctaText?: string;
+};
+
+type SanityAnnouncementContextType = {
+  announcement: Announcement | null;
+  fetchAnnouncement: () => void;
+  hasSeenAnnouncement: boolean;
+  hasDismissedAnnouncement: boolean;
+  markAnnouncementAsSeen: () => void;
+  dismissAnnouncement: () => void;
+};
+
+const SanityAnnouncementContext = createContext<SanityAnnouncementContextType | undefined>(
+  undefined
+);
+
+export function useSanityAnnouncementContext() {
+  const value = useContext(SanityAnnouncementContext);
+
+  if (!value) {
+    throw new Error('Tried to use SanityAnnouncementContext without a Provider');
+  }
+
+  return value;
+}
+
+export const SanityAnnouncementProvider = ({ children }: { children: ReactNode[] }) => {
+  const [announcement, setAnnouncement] = useState<Announcement | null>(null);
+  const [hasDismissedAnnouncement, setHasDismissedAnnouncement] = useState(false);
+  const [hasSeenAnnouncement, setHasSeenAnnouncement] = useState(false);
+
+  const reportError = useReportError();
+
+  const checkDismissalStatus = useCallback(
+    async (internalId: string) => {
+      try {
+        const dismissed = await AsyncStorage.getItem(`${internalId}-hasDismissedAnnouncement`);
+        setHasDismissedAnnouncement(dismissed === 'true');
+      } catch (error) {
+        reportError('An error occurred while checking announcement dismissal status');
+      }
+    },
+    [reportError]
+  );
+
+  const checkSeenStatus = useCallback(
+    async (internalId: string) => {
+      try {
+        const seen = await AsyncStorage.getItem(`${internalId}-hasSeenAnnouncement`);
+        setHasSeenAnnouncement(seen === 'true');
+      } catch (error) {
+        reportError('An error occurred while checking announcement seen status');
+      }
+    },
+    [reportError]
+  );
+
+  const fetchAnnouncement = useCallback(async () => {
+    try {
+      const result = await fetchSanityContent(
+        `*[_type == "announcementNotification" && active == true && (platform == "Mobile" || platform == "All")] {
+              internal_id,
+              active,
+              title,
+              description,
+              "imageUrl": image.asset->url,
+              platform,
+              min_mobile_version
+            } | order(_createdAt desc)[0]`
+      );
+
+      setAnnouncement(result);
+      if (result) {
+        checkDismissalStatus(result.internal_id);
+        checkSeenStatus(result.internal_id);
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        reportError(error);
+      } else {
+        reportError('An error occurred while fetching announcement from Sanity');
+      }
+    }
+  }, [checkDismissalStatus, checkSeenStatus, reportError]);
+
+  useEffectOnAppForeground(fetchAnnouncement);
+
+  // Function to dismiss an announcement
+  const dismissAnnouncement = useCallback(async () => {
+    if (announcement && announcement.internal_id) {
+      await AsyncStorage.setItem(`hasDismissedAnnouncement-${announcement.internal_id}`, 'true');
+      setHasDismissedAnnouncement(true);
+    }
+  }, [announcement]);
+
+  const markAnnouncementAsSeen = useCallback(async () => {
+    if (announcement && announcement.internal_id) {
+      await AsyncStorage.setItem(`hasSeenAnnouncement-${announcement.internal_id}`, 'true');
+      setHasSeenAnnouncement(true);
+    }
+  }, [announcement]);
+
+  useEffect(() => {
+    fetchAnnouncement();
+    // Only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const value = useMemo(() => {
+    return {
+      announcement,
+      fetchAnnouncement,
+      hasDismissedAnnouncement,
+      dismissAnnouncement,
+      hasSeenAnnouncement,
+      markAnnouncementAsSeen,
+    };
+  }, [
+    announcement,
+    dismissAnnouncement,
+    fetchAnnouncement,
+    hasDismissedAnnouncement,
+    hasSeenAnnouncement,
+    markAnnouncementAsSeen,
+  ]);
+
+  return (
+    <SanityAnnouncementContext.Provider value={value}>
+      {children}
+    </SanityAnnouncementContext.Provider>
+  );
+};
diff --git a/apps/mobile/src/contexts/SanityDataContext.tsx b/apps/mobile/src/contexts/SanityDataContext.tsx
new file mode 100644
index 0000000000..a0962989d7
--- /dev/null
+++ b/apps/mobile/src/contexts/SanityDataContext.tsx
@@ -0,0 +1,93 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useReportError } from 'shared/contexts/ErrorReportingContext';
+import { fetchSanityContent } from 'src/utils/sanity';
+import { useEffectOnAppForeground } from 'src/utils/useEffectOnAppForeground';
+
+export type MintProject = {
+  name: string;
+  internalId: string;
+  startDate: string;
+  endDate: string;
+  highlightProjectId: string;
+  previewImageUrl: string;
+  artistName: string;
+  collectionName: string;
+  title: string;
+  description: string;
+  funFacts: string[];
+  active: boolean;
+};
+
+type sanityDocumentTypes = {
+  mintProjects: MintProject[];
+};
+
+type SanityDataContextType = {
+  data: sanityDocumentTypes | null;
+};
+
+const SanityDataContext = createContext<SanityDataContextType | undefined>(undefined);
+
+export function useSanityDataContext() {
+  const value = useContext(SanityDataContext);
+  if (!value) {
+    throw new Error('Tried to use SanityDataContext without a Provider');
+  }
+  return value;
+}
+
+export default function SanityDataProvider({ children }: { children: ReactNode }) {
+  const [data, setData] = useState<sanityDocumentTypes | null>(null);
+  const reportError = useReportError();
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await fetchSanityContent(`
+      *[_type == "mintProject"] {
+          name,
+          internalId,
+          startDate,
+          endDate,
+          highlightProjectId,
+          "previewImageUrl": previewImage.asset->url,
+          artistName,
+          collectionName,
+          title,
+          description,
+          funFacts,
+          active
+        }`);
+      if (result) {
+        setData({ mintProjects: result });
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        reportError(error);
+      }
+      reportError('An error occurred while fetching sanity data');
+    }
+  }, [reportError]);
+
+  useEffectOnAppForeground(fetchData);
+
+  useEffect(() => {
+    fetchData();
+    // Only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const value = useMemo(() => {
+    return {
+      data,
+    };
+  }, [data]);
+
+  return <SanityDataContext.Provider value={value}>{children}</SanityDataContext.Provider>;
+}
diff --git a/apps/mobile/src/navigation/MainTabNavigator/NotificationBlueDot.tsx b/apps/mobile/src/navigation/MainTabNavigator/NotificationBlueDot.tsx
index 390f22c210..9f6103d7f2 100644
--- a/apps/mobile/src/navigation/MainTabNavigator/NotificationBlueDot.tsx
+++ b/apps/mobile/src/navigation/MainTabNavigator/NotificationBlueDot.tsx
@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { graphql, useLazyLoadQuery, useRefetchableFragment } from 'react-relay';
 import { useIntervalEffectOnAppForeground } from 'src/utils/useIntervalEffectOnAppForeground';
 
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementContext';
 import { NotificationBlueDotFragment$key } from '~/generated/NotificationBlueDotFragment.graphql';
 import { NotificationBlueDotQuery } from '~/generated/NotificationBlueDotQuery.graphql';
 import { RefetchableNotificationBlueDotFragmentQuery } from '~/generated/RefetchableNotificationBlueDotFragmentQuery.graphql';
@@ -55,6 +56,8 @@ function BlueDot({ queryRef }: BlueDotProps) {
     queryRef
   );
 
+  const { announcement, hasSeenAnnouncement } = useSanityAnnouncementContext();
+
   const handleNotificationRefresh = useCallback(() => {
     refetch({}, { fetchPolicy: 'network-only' });
   }, [refetch]);
@@ -62,12 +65,15 @@ function BlueDot({ queryRef }: BlueDotProps) {
   useIntervalEffectOnAppForeground(handleNotificationRefresh);
 
   const hasUnreadNotifications = useMemo(() => {
+    if (announcement?.active && !hasSeenAnnouncement) {
+      return true;
+    }
     if (query.viewer && query.viewer.__typename === 'Viewer') {
       return (query.viewer?.notifications?.unseenCount ?? 0) > 0;
     }
 
     return false;
-  }, [query.viewer]);
+  }, [announcement, hasSeenAnnouncement, query.viewer]);
 
   if (hasUnreadNotifications) {
     return (
diff --git a/apps/mobile/src/navigation/RootStackNavigator.tsx b/apps/mobile/src/navigation/RootStackNavigator.tsx
index ce81fdac0f..da4b989054 100644
--- a/apps/mobile/src/navigation/RootStackNavigator.tsx
+++ b/apps/mobile/src/navigation/RootStackNavigator.tsx
@@ -9,6 +9,7 @@ import { useMaintenanceContext } from 'shared/contexts/MaintenanceStatusContext'
 import { ClaimMintUpsellBanner } from '~/components/ClaimMintUpsellBanner';
 import { ConnectWalletUpsellBanner } from '~/components/ConnectWalletUpsellBanner';
 import { MaintenanceNoticeBottomSheetWrapper } from '~/components/MaintenanceScreen';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementContext';
 import { RootStackNavigatorFragment$key } from '~/generated/RootStackNavigatorFragment.graphql';
 import { RootStackNavigatorQuery } from '~/generated/RootStackNavigatorQuery.graphql';
 import { LoginStackNavigator } from '~/navigation/LoginStackNavigator';
@@ -137,11 +138,15 @@ function MainScreen({ queryRef }: MainScreenProps) {
     queryRef
   );
 
+  const { announcement } = useSanityAnnouncementContext();
+
   return (
     <View className="flex-1">
       <Suspense fallback={<View />}>
         <ConnectWalletUpsellBanner queryRef={query} />
-        <ClaimMintUpsellBanner queryRef={query} />
+        {announcement && (
+          <ClaimMintUpsellBanner queryRef={query} projectInternalId={announcement.internal_id} />
+        )}
       </Suspense>
       <MainTabNavigator />
     </View>
diff --git a/apps/mobile/src/screens/SettingsScreen/DebugBottomSheetModal.tsx b/apps/mobile/src/screens/SettingsScreen/DebugBottomSheetModal.tsx
index 837b6c49c5..3cd9a8be35 100644
--- a/apps/mobile/src/screens/SettingsScreen/DebugBottomSheetModal.tsx
+++ b/apps/mobile/src/screens/SettingsScreen/DebugBottomSheetModal.tsx
@@ -23,7 +23,11 @@ export default function DebugBottomSheetModal() {
   }, []);
 
   const handleClearStorage = useCallback(() => {
-    AsyncStorage.multiRemove([MARFA_2023_SUBMITTED_FORM_KEY, MCHX_CLAIM_CODE_KEY]);
+    AsyncStorage.multiRemove([
+      MARFA_2023_SUBMITTED_FORM_KEY,
+      MCHX_CLAIM_CODE_KEY,
+      'mchx-app-store-2024-hasDismissedAnnouncement',
+    ]);
   }, []);
   return (
     <View className="flex flex-column space-y-1 mx-4">
diff --git a/apps/mobile/src/screens/SettingsScreen/SettingsScreen.tsx b/apps/mobile/src/screens/SettingsScreen/SettingsScreen.tsx
index 2bd15c5251..83523d15b7 100644
--- a/apps/mobile/src/screens/SettingsScreen/SettingsScreen.tsx
+++ b/apps/mobile/src/screens/SettingsScreen/SettingsScreen.tsx
@@ -76,7 +76,14 @@ export function SettingsScreen() {
   }, [navigation]);
 
   const handleDebugMintPress = useCallback(() => {
-    showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
+    showBottomSheetModal({
+      content: (
+        <MintCampaignBottomSheet
+          onClose={hideBottomSheetModal}
+          projectInternalId="mchx-app-store-2024"
+        />
+      ),
+    });
   }, [hideBottomSheetModal, showBottomSheetModal]);
 
   const [logout, isLoggingOut] = useLogout();

From 894233b5c71afd2ea10597ee570adeba0d5aad8a Mon Sep 17 00:00:00 2001
From: robin <rokim8@gmail.com>
Date: Wed, 1 May 2024 12:38:29 -0700
Subject: [PATCH 04/13] [mobile] bump version 1.0.62 (#2452)

---
 apps/mobile/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts
index 513110468b..9ec40b25d8 100644
--- a/apps/mobile/app.config.ts
+++ b/apps/mobile/app.config.ts
@@ -50,7 +50,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   orientation: 'portrait',
   icon: './assets/icon.png',
   userInterfaceStyle: 'automatic',
-  version: '1.0.61',
+  version: '1.0.62',
   updates: {
     fallbackToCacheTimeout: 0,
   },

From 7df69037de5ff17922f420f7294f8e167c1935e9 Mon Sep 17 00:00:00 2001
From: pvicens <112896251+pvicensSpacedev@users.noreply.github.com>
Date: Thu, 2 May 2024 16:38:38 -0300
Subject: [PATCH 05/13] change length of tokens to load (#2454)

---
 .../src/scenes/UserGalleryPage/UserGalleryCollections.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
index 1aee5669d1..97bc592dbd 100644
--- a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
+++ b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
@@ -159,8 +159,11 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
     );
   }
 
+  // TODO: Change length to properly reflect virtualizedList onLoad. Some profile's onLoad function not triggering
+  const filteredTokenIds = tokenIds ? tokenIds.slice(0, 1) : [];
+
   return (
-    <MultiShimmerProvider tokenIdsToLoad={tokenIds ? tokenIds?.slice(0, 12) : []}>
+    <MultiShimmerProvider tokenIdsToLoad={filteredTokenIds}>
       <StyledUserGalleryCollections>
         <WindowScroller>
           {({ height, registerChild, scrollTop, onChildScroll }) => (

From 7a14a67dc0886e5882a0c55fafcb32102d7c3156 Mon Sep 17 00:00:00 2001
From: pvicens <112896251+pvicensSpacedev@users.noreply.github.com>
Date: Thu, 2 May 2024 16:54:07 -0300
Subject: [PATCH 06/13] memo token IDs (#2455)

---
 .../src/scenes/UserGalleryPage/UserGalleryCollections.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
index 97bc592dbd..b5e5de6df1 100644
--- a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
+++ b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
@@ -84,6 +84,11 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
     }, []);
   }, [collections]);
 
+  // TODO: Change length to properly reflect virtualizedList onLoad. Some profile's onLoad function not triggering
+  const filteredTokenIds = useMemo(() => {
+    return tokenIds ? tokenIds.slice(0, 1) : [];
+  }, [tokenIds]);
+
   const isAuthenticatedUsersPage = loggedInUserId === owner?.id;
 
   const nonNullCollections = removeNullValues(collections);
@@ -159,9 +164,6 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
     );
   }
 
-  // TODO: Change length to properly reflect virtualizedList onLoad. Some profile's onLoad function not triggering
-  const filteredTokenIds = tokenIds ? tokenIds.slice(0, 1) : [];
-
   return (
     <MultiShimmerProvider tokenIdsToLoad={filteredTokenIds}>
       <StyledUserGalleryCollections>

From 138ea89102ab964c28e40210efcb97968c4f454d Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Fri, 3 May 2024 10:46:08 +0800
Subject: [PATCH 07/13] fix bottom sheet regression (#2456)

---
 apps/mobile/src/components/Login/SignInBottomSheet.tsx         | 3 +--
 apps/mobile/src/components/Login/WalletSelectorBottomSheet.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/components/Login/SignInBottomSheet.tsx b/apps/mobile/src/components/Login/SignInBottomSheet.tsx
index 2a5ed0b1e7..2d54159d75 100644
--- a/apps/mobile/src/components/Login/SignInBottomSheet.tsx
+++ b/apps/mobile/src/components/Login/SignInBottomSheet.tsx
@@ -35,9 +35,8 @@ function SignInBottomSheet({ onQrCodePress, openManageWallet }: Props) {
   }, [hideBottomSheetModal, navigation]);
 
   const handleConnectWallet = useCallback(() => {
-    hideBottomSheetModal();
     openManageWallet({ method: 'auth' });
-  }, [hideBottomSheetModal, openManageWallet]);
+  }, [openManageWallet]);
 
   return (
     <View className="flex flex-col space-y-6">
diff --git a/apps/mobile/src/components/Login/WalletSelectorBottomSheet.tsx b/apps/mobile/src/components/Login/WalletSelectorBottomSheet.tsx
index 303fa54492..0ae88e982a 100644
--- a/apps/mobile/src/components/Login/WalletSelectorBottomSheet.tsx
+++ b/apps/mobile/src/components/Login/WalletSelectorBottomSheet.tsx
@@ -67,7 +67,7 @@ export default function WalletSelectorBottomSheet({
 
   return (
     <>
-      <View style={{ paddingBottom: bottom }} className="p-4 flex flex-col space-y-6">
+      <View style={{ paddingBottom: bottom }} className="flex flex-col space-y-6">
         {isSigningIn ? (
           <SignedInWalletMessage />
         ) : (

From decf548e000fe8436397f90408bc9abb9c72fb28 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Fri, 3 May 2024 10:46:56 +0800
Subject: [PATCH 08/13] [mobile] bump version 1.0.63 (#2457)

---
 apps/mobile/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts
index 9ec40b25d8..f303e305da 100644
--- a/apps/mobile/app.config.ts
+++ b/apps/mobile/app.config.ts
@@ -50,7 +50,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   orientation: 'portrait',
   icon: './assets/icon.png',
   userInterfaceStyle: 'automatic',
-  version: '1.0.62',
+  version: '1.0.63',
   updates: {
     fallbackToCacheTimeout: 0,
   },

From 17058faad276eced02c916887c846150c5bbd9d4 Mon Sep 17 00:00:00 2001
From: kaito <80802871+kaitoo1@users.noreply.github.com>
Date: Sat, 4 May 2024 00:53:39 +0900
Subject: [PATCH 09/13] fix announcement and seen state typo (#2459)

---
 apps/mobile/src/contexts/SanityAnnouncementContext.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/contexts/SanityAnnouncementContext.tsx b/apps/mobile/src/contexts/SanityAnnouncementContext.tsx
index 921edcd739..9bf44377d1 100644
--- a/apps/mobile/src/contexts/SanityAnnouncementContext.tsx
+++ b/apps/mobile/src/contexts/SanityAnnouncementContext.tsx
@@ -110,14 +110,14 @@ export const SanityAnnouncementProvider = ({ children }: { children: ReactNode[]
   // Function to dismiss an announcement
   const dismissAnnouncement = useCallback(async () => {
     if (announcement && announcement.internal_id) {
-      await AsyncStorage.setItem(`hasDismissedAnnouncement-${announcement.internal_id}`, 'true');
+      await AsyncStorage.setItem(`${announcement.internal_id}-hasDismissedAnnouncement`, 'true');
       setHasDismissedAnnouncement(true);
     }
   }, [announcement]);
 
   const markAnnouncementAsSeen = useCallback(async () => {
     if (announcement && announcement.internal_id) {
-      await AsyncStorage.setItem(`hasSeenAnnouncement-${announcement.internal_id}`, 'true');
+      await AsyncStorage.setItem(`${announcement.internal_id}-hasSeenAnnouncement`, 'true');
       setHasSeenAnnouncement(true);
     }
   }, [announcement]);

From 9acc77dec24166d4a0992b2fe85942c4de9789b6 Mon Sep 17 00:00:00 2001
From: pvicens <112896251+pvicensSpacedev@users.noreply.github.com>
Date: Mon, 6 May 2024 11:33:13 -0300
Subject: [PATCH 10/13] temp empty array tokens (#2461)

---
 apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
index b5e5de6df1..1db72392e2 100644
--- a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
+++ b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
@@ -86,7 +86,8 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
 
   // TODO: Change length to properly reflect virtualizedList onLoad. Some profile's onLoad function not triggering
   const filteredTokenIds = useMemo(() => {
-    return tokenIds ? tokenIds.slice(0, 1) : [];
+    // Temp fix for stuck loader
+    return tokenIds ? [] : [];
   }, [tokenIds]);
 
   const isAuthenticatedUsersPage = loggedInUserId === owner?.id;

From ffe5668e493b29f75302fe931605e0c136d6d0fb Mon Sep 17 00:00:00 2001
From: kaito <80802871+kaitoo1@users.noreply.github.com>
Date: Tue, 7 May 2024 04:02:45 +0900
Subject: [PATCH 11/13] add announcement notification via sanity to web (#2458)

* add announcement notification via sanity to web

* remove log

---------

Co-authored-by: Robinnnnn <rokim8@gmail.com>
---
 .../AnnouncementNotification.tsx              |  76 +++++++++
 .../Notifications/NotificationList.tsx        |   7 +
 .../contexts/SanityAnnouncementProvider.tsx   | 147 ++++++++++++++++++
 .../GlobalSidebar/GlobalSidebar.tsx           |  15 +-
 .../GlobalSidebar/StandardSidebar.tsx         |  11 +-
 .../ContentPages/MobileAppLandingPage.tsx     |   8 +-
 6 files changed, 250 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/components/Notifications/AnnouncementNotification.tsx
 create mode 100644 apps/web/src/contexts/SanityAnnouncementProvider.tsx

diff --git a/apps/web/src/components/Notifications/AnnouncementNotification.tsx b/apps/web/src/components/Notifications/AnnouncementNotification.tsx
new file mode 100644
index 0000000000..0ed7d30bb8
--- /dev/null
+++ b/apps/web/src/components/Notifications/AnnouncementNotification.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import colors from 'shared/theme/colors';
+import styled from 'styled-components';
+
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementProvider';
+import CloseIcon from '~/icons/CloseIcon';
+import { APP_STORE_URL } from '~/scenes/LandingPage/LandingPage';
+
+import GalleryLink from '../core/GalleryLink/GalleryLink';
+import IconContainer from '../core/IconContainer';
+import { HStack, VStack } from '../core/Spacer/Stack';
+import { BaseM } from '../core/Text/Text';
+
+type Announcement = {
+  internal_id: string;
+  active: boolean;
+  title: string;
+  description: string;
+  imageUrl: string;
+  platform: string;
+};
+
+// Renders an announcement notification from Sanity
+export default function AnnouncementNotification({ announcement }: { announcement: Announcement }) {
+  const { dismissAnnouncement, markAnnouncementAsSeen } = useSanityAnnouncementContext();
+
+  useEffect(() => {
+    markAnnouncementAsSeen();
+    // Only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <StyledAnnouncementNotification align="center" gap={8}>
+      <GalleryLink href={APP_STORE_URL} target="_blank" rel="noreferrer">
+        <HStack align="center" gap={8}>
+          <StyledImage src={announcement.imageUrl} alt="Announcement preview thumbnail" />
+          <VStack>
+            <BaseM color={colors.activeBlue}>
+              <strong>{announcement.title}</strong>
+            </BaseM>
+            <BaseM color={colors.activeBlue}>{announcement.description}</BaseM>
+          </VStack>
+        </HStack>
+      </GalleryLink>
+      <IconContainer
+        size="sm"
+        onClick={dismissAnnouncement}
+        variant="default"
+        icon={
+          <StyledIconWrapper>
+            <CloseIcon />
+          </StyledIconWrapper>
+        }
+      />
+    </StyledAnnouncementNotification>
+  );
+}
+
+const StyledAnnouncementNotification = styled(HStack)`
+  margin: 4px 12px;
+  border: 1px solid ${colors.activeBlue};
+  padding: 8px 12px;
+`;
+
+const StyledImage = styled.img`
+  height: 56px;
+  width: 56px;
+`;
+
+const StyledIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.activeBlue};
+`;
diff --git a/apps/web/src/components/Notifications/NotificationList.tsx b/apps/web/src/components/Notifications/NotificationList.tsx
index d32c5d2489..96f0f4f91d 100644
--- a/apps/web/src/components/Notifications/NotificationList.tsx
+++ b/apps/web/src/components/Notifications/NotificationList.tsx
@@ -6,9 +6,11 @@ import styled from 'styled-components';
 import { VStack } from '~/components/core/Spacer/Stack';
 import { TitleDiatypeL } from '~/components/core/Text/Text';
 import { SeeMore } from '~/components/Notifications/SeeMore';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementProvider';
 import { NotificationListFragment$key } from '~/generated/NotificationListFragment.graphql';
 import useExperience from '~/shared/hooks/useExperience';
 
+import AnnouncementNotification from './AnnouncementNotification';
 import { Notification } from './Notification';
 import { NotificationEmailAlert } from './NotificationEmailAlert';
 import { NotificationTwitterAlert } from './NotificationTwitterAlert';
@@ -64,6 +66,8 @@ export function NotificationList({ queryRef, toggleSubView }: NotificationListPr
     queryRef: query,
   });
 
+  const { announcement, hasDismissedAnnouncement } = useSanityAnnouncementContext();
+
   const handleDismiss = useCallback(async () => {
     await setEmailExperienced();
   }, [setEmailExperienced]);
@@ -96,6 +100,9 @@ export function NotificationList({ queryRef, toggleSubView }: NotificationListPr
     <NotificationsContent grow>
       {showEmailAlert && <NotificationEmailAlert queryRef={query} onDismiss={handleDismiss} />}
       <NotificationTwitterAlert queryRef={query} />
+      {announcement && !hasDismissedAnnouncement && (
+        <AnnouncementNotification announcement={announcement} />
+      )}
       {hasNotifications ? (
         <>
           {nonNullNotifications.map((notification) => {
diff --git a/apps/web/src/contexts/SanityAnnouncementProvider.tsx b/apps/web/src/contexts/SanityAnnouncementProvider.tsx
new file mode 100644
index 0000000000..69e421132e
--- /dev/null
+++ b/apps/web/src/contexts/SanityAnnouncementProvider.tsx
@@ -0,0 +1,147 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useReportError } from 'shared/contexts/ErrorReportingContext';
+
+import { fetchSanityContent } from '~/utils/sanity';
+
+type Announcement = {
+  internal_id: string;
+  active: boolean;
+  title: string;
+  description: string;
+  imageUrl: string;
+  platform: string;
+  ctaText?: string;
+};
+
+type SanityAnnouncementContextType = {
+  announcement: Announcement | null;
+  fetchAnnouncement: () => void;
+  hasSeenAnnouncement: boolean;
+  hasDismissedAnnouncement: boolean;
+  markAnnouncementAsSeen: () => void;
+  dismissAnnouncement: () => void;
+};
+
+const SanityAnnouncementContext = createContext<SanityAnnouncementContextType | undefined>(
+  undefined
+);
+export function useSanityAnnouncementContext() {
+  const value = useContext(SanityAnnouncementContext);
+
+  if (!value) {
+    throw new Error('Tried to use SanityAnnouncementContext without a Provider');
+  }
+
+  return value;
+}
+
+export const SanityAnnouncementProvider = ({ children }: { children: ReactNode }) => {
+  const [announcement, setAnnouncement] = useState<Announcement | null>(null);
+  const [hasDismissedAnnouncement, setHasDismissedAnnouncement] = useState(false);
+  const [hasSeenAnnouncement, setHasSeenAnnouncement] = useState(false);
+
+  const reportError = useReportError();
+
+  const checkDismissalStatus = useCallback(
+    async (internalId: string) => {
+      try {
+        const dismissed = window.localStorage.getItem(`${internalId}-hasDismissedAnnouncement`);
+        setHasDismissedAnnouncement(dismissed === 'true');
+      } catch (error) {
+        reportError('An error occurred while checking announcement dismissal status');
+      }
+    },
+    [reportError]
+  );
+
+  const checkSeenStatus = useCallback(
+    async (internalId: string) => {
+      try {
+        const seen = window.localStorage.getItem(`${internalId}-hasSeenAnnouncement`);
+        setHasSeenAnnouncement(seen === 'true');
+      } catch (error) {
+        reportError('An error occurred while checking announcement seen status');
+      }
+    },
+    [reportError]
+  );
+
+  const fetchAnnouncement = useCallback(async () => {
+    try {
+      const result = await fetchSanityContent(
+        `*[_type == "announcementNotification" && active == true && (platform == "Web" || platform == "All")] {
+              internal_id,
+              active,
+              title,
+              description,
+              "imageUrl": image.asset->url,
+              platform,
+            } | order(_createdAt desc)[0]`
+      );
+
+      setAnnouncement(result);
+      if (result) {
+        checkDismissalStatus(result.internal_id);
+        checkSeenStatus(result.internal_id);
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        reportError(error);
+      } else {
+        reportError('An error occurred while fetching announcement from Sanity');
+      }
+    }
+  }, [checkDismissalStatus, checkSeenStatus, reportError]);
+
+  const dismissAnnouncement = useCallback(async () => {
+    if (announcement && announcement.internal_id) {
+      window.localStorage.setItem(`${announcement.internal_id}-hasDismissedAnnouncement`, 'true');
+      setHasDismissedAnnouncement(true);
+    }
+  }, [announcement]);
+
+  const markAnnouncementAsSeen = useCallback(async () => {
+    if (announcement && announcement.internal_id) {
+      window.localStorage.setItem(`${announcement.internal_id}-hasSeenAnnouncement`, 'true');
+      setHasSeenAnnouncement(true);
+    }
+  }, [announcement]);
+
+  useEffect(() => {
+    fetchAnnouncement();
+    // Only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const value = useMemo(() => {
+    return {
+      announcement,
+      fetchAnnouncement,
+      hasDismissedAnnouncement,
+      dismissAnnouncement,
+      hasSeenAnnouncement,
+      markAnnouncementAsSeen,
+    };
+  }, [
+    announcement,
+    dismissAnnouncement,
+    fetchAnnouncement,
+    hasDismissedAnnouncement,
+    hasSeenAnnouncement,
+    markAnnouncementAsSeen,
+  ]);
+
+  return (
+    <SanityAnnouncementContext.Provider value={value}>
+      {children}
+    </SanityAnnouncementContext.Provider>
+  );
+};
diff --git a/apps/web/src/contexts/globalLayout/GlobalSidebar/GlobalSidebar.tsx b/apps/web/src/contexts/globalLayout/GlobalSidebar/GlobalSidebar.tsx
index bfb28bb86a..6dd58f78ee 100644
--- a/apps/web/src/contexts/globalLayout/GlobalSidebar/GlobalSidebar.tsx
+++ b/apps/web/src/contexts/globalLayout/GlobalSidebar/GlobalSidebar.tsx
@@ -3,6 +3,7 @@ import { ReactElement } from 'react';
 import styled from 'styled-components';
 
 import breakpoints from '~/components/core/breakpoints';
+import { SanityAnnouncementProvider } from '~/contexts/SanityAnnouncementProvider';
 import colors from '~/shared/theme/colors';
 
 import AnimatedSidebarDrawer from './AnimatedSidebarDrawer';
@@ -26,12 +27,14 @@ export default function GlobalSidebar({ content }: GlobalSidebarProps) {
 
   return (
     <StyledGlobalSidebar isDrawerOpen={isDrawerOpen}>
-      <StyledGlobalSidebarContent>{content}</StyledGlobalSidebarContent>
-      <AnimatePresence>
-        {drawerState.activeDrawer && (
-          <AnimatedSidebarDrawer content={drawerState.activeDrawer.content} />
-        )}
-      </AnimatePresence>
+      <SanityAnnouncementProvider>
+        <StyledGlobalSidebarContent>{content}</StyledGlobalSidebarContent>
+        <AnimatePresence>
+          {drawerState.activeDrawer && (
+            <AnimatedSidebarDrawer content={drawerState.activeDrawer.content} />
+          )}
+        </AnimatePresence>
+      </SanityAnnouncementProvider>
     </StyledGlobalSidebar>
   );
 }
diff --git a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx b/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx
index bc029d2e62..96ed37ae81 100644
--- a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx
+++ b/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx
@@ -12,6 +12,7 @@ import Search from '~/components/Search/Search';
 import Settings from '~/components/Settings/Settings';
 import { useModalActions } from '~/contexts/modal/ModalContext';
 import { usePostComposerContext } from '~/contexts/postComposer/PostComposerContext';
+import { useSanityAnnouncementContext } from '~/contexts/SanityAnnouncementProvider';
 import { StandardSidebarFragment$key } from '~/generated/StandardSidebarFragment.graphql';
 import { useSearchHotkey } from '~/hooks/useSearchHotkey';
 import useUniversalAuthModal from '~/hooks/useUniversalAuthModal';
@@ -77,13 +78,17 @@ export function StandardSidebar({ queryRef }: Props) {
     [activeDrawerState]
   );
 
+  const { announcement, hasSeenAnnouncement } = useSanityAnnouncementContext();
+
   const notificationCount = useMemo(() => {
+    const announcementNotificationCount = announcement && !hasSeenAnnouncement ? 1 : 0;
+
     if (query.viewer && query.viewer.__typename === 'Viewer') {
-      return query.viewer.notifications?.unseenCount ?? 0;
+      return (query.viewer.notifications?.unseenCount ?? 0) + announcementNotificationCount;
     }
 
-    return 0;
-  }, [query.viewer]);
+    return 0 + announcementNotificationCount;
+  }, [announcement, hasSeenAnnouncement, query.viewer]);
 
   const username = (isLoggedIn && query.viewer.user?.username) || '';
 
diff --git a/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx b/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx
index d3134b2519..611ed260d1 100644
--- a/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx
+++ b/apps/web/src/scenes/ContentPages/MobileAppLandingPage.tsx
@@ -9,6 +9,8 @@ import { BaseXL, TitleDiatypeL, TitleL } from '~/components/core/Text/Text';
 import { useGlobalNavbarHeight } from '~/contexts/globalLayout/GlobalNavbar/useGlobalNavbarHeight';
 import { contexts } from '~/shared/analytics/constants';
 
+import { APP_STORE_URL } from '../LandingPage/LandingPage';
+
 export default function MobileAppLandingPage() {
   const navbarHeight = useGlobalNavbarHeight();
 
@@ -32,11 +34,7 @@ export default function MobileAppLandingPage() {
               </BodyText>
             </VStack>
             <VStack gap={8}>
-              <StyledLink
-                href="https://apps.apple.com/app/gallery/id6447068892"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <StyledLink href={APP_STORE_URL} target="_blank" rel="noreferrer">
                 <StyledButton
                   eventElementId="Mobile Landing Page Download App Button"
                   eventName="Mobile Landing Page Download App Button Click"

From 2ceae3c39f394dbd0a3d478de62bc53ad2c26bab Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Wed, 8 May 2024 03:54:03 +0530
Subject: [PATCH 12/13] updated zora explorer url to zora.co (#2463)

---
 packages/shared/src/utils/wallet.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/utils/wallet.ts b/packages/shared/src/utils/wallet.ts
index 2b3abdc461..314b8c126a 100644
--- a/packages/shared/src/utils/wallet.ts
+++ b/packages/shared/src/utils/wallet.ts
@@ -101,7 +101,7 @@ export function getExternalAddressLink(chainAddressRef: walletGetExternalAddress
   } else if (chain === 'Optimism') {
     return `https://optimistic.etherscan.io/address/${address}`;
   } else if (chain === 'Zora') {
-    return `https://explorer.zora.energy/address/${address}`;
+    return `https://zora.co/${address}`;
   } else if (chain === 'Polygon') {
     return `https://polygonscan.com/address/${address}`;
   }

From 5ae82139dc9379324f1cc21f045917bb229e4b33 Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Wed, 8 May 2024 22:29:37 +0530
Subject: [PATCH 13/13] fix for missing preview cards in search default mobile
 (#2464)

---
 .env.sample                                                  | 0
 .../components/Search/SearchDefaultSuggestedUsersSection.tsx | 5 +++--
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 .env.sample

diff --git a/.env.sample b/.env.sample
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/components/Search/SearchDefaultSuggestedUsersSection.tsx b/apps/web/src/components/Search/SearchDefaultSuggestedUsersSection.tsx
index b227687caf..c00994946e 100644
--- a/apps/web/src/components/Search/SearchDefaultSuggestedUsersSection.tsx
+++ b/apps/web/src/components/Search/SearchDefaultSuggestedUsersSection.tsx
@@ -24,7 +24,7 @@ export default function SearchDefaultSuggestedUsersSection({ queryRef, variant,
       fragment SearchDefaultSuggestedUsersSectionFragment on Query {
         viewer @required(action: THROW) {
           ... on Viewer {
-            suggestedUsers(first: 2) @required(action: THROW) {
+            suggestedUsers(first: 4) @required(action: THROW) {
               __typename
               edges {
                 node {
@@ -57,7 +57,8 @@ export default function SearchDefaultSuggestedUsersSection({ queryRef, variant,
       .flatMap((edge) => (edge?.node ? [edge.node] : []))
       .filter((user) =>
         user?.galleries?.some((gallery) => removeNullValues(gallery?.tokenPreviews).length > 0)
-      );
+      )
+      ?.slice(0, 2);
   }, [query.viewer.suggestedUsers?.edges]);
 
   if (query.viewer?.suggestedUsers?.__typename !== 'UsersConnection' || !nonNullProfiles) {