mchx campaign banner and mint on gallery

apps/mobile/src/components/ClaimMintUpsellBanner.tsx

@@ -0,0 +1,107 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useCallback, useEffect, useState } 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 { ClaimMintUpsellBannerFragment$key } from '~/generated/ClaimMintUpsellBannerFragment.graphql';
+import { contexts } from '~/shared/analytics/constants';
+import colors from '~/shared/theme/colors';
+
+import { Button } from './Button';
+import { GalleryTouchableOpacity } from './GalleryTouchableOpacity';
+import MintCampaignBottomSheet from './Mint/MintCampaign/MintCampaignBottomSheet';
+import { Typography } from './Typography';
+
+type Props = {
+  queryRef: ClaimMintUpsellBannerFragment$key;
+};
+
+export function ClaimMintUpsellBanner({ queryRef }: Props) {
+  const query = useFragment(
+    graphql`
+      fragment ClaimMintUpsellBannerFragment on Query {
+        viewer {
+          ... on Viewer {
+            user {
+              __typename
+            }
+          }
+        }
+      }
+    `,
+    queryRef
+  );
+
+  const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
+
+  const [claimCode] = usePersistedState(MCHX_CLAIM_CODE_KEY, '');
+
+  const [isUpsellMintBannerDismissed, setIsUpsellMintBannerDismissed] = useState(false);
+
+  useEffect(() => {
+    AsyncStorage.getItem('isUpsellMintBannerDismissed').then((value) => {
+      if (value === 'true') {
+        setIsUpsellMintBannerDismissed(true);
+      }
+    });
+  }, []);
+
+  const handleDismissUpsellBanner = useCallback(() => {
+    setIsUpsellMintBannerDismissed(true);
+    AsyncStorage.setItem('isUpsellMintBannerDismissed', 'true');
+  }, []);
+
+  const handleClaimPress = useCallback(() => {
+    showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
+  }, [hideBottomSheetModal, showBottomSheetModal]);
+
+  const user = query.viewer?.user;
+
+  if (!user || claimCode || isUpsellMintBannerDismissed) {
+    return <View className="bg-white dark:bg-black-900" />;
+  }
+
+  return (
+    <View className="bg-activeBlue dark:bg-darkModeBlue w-full px-4 py-2 flex-row items-center justify-between">
+      <View>
+        <Typography
+          font={{ family: 'ABCDiatype', weight: 'Bold' }}
+          className="text-offWhite text-sm"
+        >
+          Exclusive free mint !
+        </Typography>
+        <Typography
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+          className="text-offWhite text-xs"
+        >
+          Claim your free generative work by MCHX
+        </Typography>
+      </View>
+      <View className="flex-row items-center space-x-2">
+        <Button
+          onPress={handleClaimPress}
+          text="claim"
+          size="xs"
+          variant="secondary"
+          fontWeight="Bold"
+          eventElementId="Press Claim Upsell Banner"
+          eventName="Press Claim Upsell Banner"
+          eventContext={contexts.Authentication}
+        />
+        <GalleryTouchableOpacity
+          className="p-2"
+          eventElementId="Close Claim Upsell Banner"
+          eventName="Close Claim Upsell Banner"
+          eventContext={contexts.Authentication}
+          onPress={handleDismissUpsellBanner}
+        >
+          <XMarkIcon color={colors.offWhite} />
+        </GalleryTouchableOpacity>
+      </View>
+    </View>
+  );
+}

apps/mobile/src/components/Feed/Posts/PostListMintButtonSection.tsx

@@ -1,5 +1,7 @@
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
+import { extractRelevantMetadataFromToken } from 'shared/utils/extractRelevantMetadataFromToken';
 
 import { MintLinkButton } from '~/components/MintLinkButton';
 import { PostListMintButtonSectionFragment$key } from '~/generated/PostListMintButtonSectionFragment.graphql';
@@ -15,6 +17,7 @@ export function PostListMintButtonSection({ postRef }: Props) {
       fragment PostListMintButtonSectionFragment on Post {
         tokens {
           ...MintLinkButtonFragment
+          ...extractRelevantMetadataFromTokenFragment
         }
         author {
           primaryWallet {
@@ -35,9 +38,24 @@ export function PostListMintButtonSection({ postRef }: Props) {
 
   const userAddedMintURL = post?.userAddedMintURL ?? '';
 
+  const { contractAddress } = useMemo(() => {
+    if (token) {
+      return extractRelevantMetadataFromToken(token);
+    }
+    return {
+      contractAddress: '',
+      chain: '',
+      mintUrl: '',
+    };
+  }, [token]);
+
+  const isRadiance = useMemo(() => {
+    return contractAddress === '0x78b92e9afd56b033ead2103f07aced5fac8c0854';
+  }, [contractAddress]);
+
   return (
     <View className="px-3 pb-8 pt-2">
-      {token && userAddedMintURL && (
+      {(isRadiance || userAddedMintURL) && token && (
         <MintLinkButton
           tokenRef={token}
           variant="secondary"

apps/mobile/src/components/MintLinkButton.tsx

@@ -2,6 +2,8 @@ import { useColorScheme } from 'nativewind';
 import { useCallback, useMemo } from 'react';
 import { Linking, ViewStyle } 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 { EnsembleIcon } from 'src/icons/EnsembleIcon';
 import { FoundationIcon } from 'src/icons/FoundationIcon';
 import { FxHashIcon } from 'src/icons/FxHashIcon';
@@ -11,6 +13,7 @@ import { SuperRareIcon } from 'src/icons/SuperRareIcon';
 import { TopRightArrowIcon } from 'src/icons/TopRightArrowIcon';
 import { ZoraIcon } from 'src/icons/ZoraIcon';
 
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
 import { MintLinkButtonFragment$key } from '~/generated/MintLinkButtonFragment.graphql';
 import { GalleryElementTrackingProps } from '~/shared/contexts/AnalyticsContext';
 import colors from '~/shared/theme/colors';
@@ -23,6 +26,7 @@ import {
 } from '~/shared/utils/getMintUrlWithReferrer';
 
 import { Button, ButtonProps } from './Button';
+import MintCampaignBottomSheet from './Mint/MintCampaign/MintCampaignBottomSheet';
 
 type Props = {
   // in order to generate the mint URL with the correct params, we either grab it
@@ -78,11 +82,19 @@ export function MintLinkButton({
     };
   }, [overrideMetadata, token]);
 
+  const isRadiance = useMemo(() => {
+    return contractAddress === '0x78b92e9afd56b033ead2103f07aced5fac8c0854';
+  }, [contractAddress]);
+
   const { url: mintURL, provider: mintProviderType } = getMintUrlWithReferrer(
     overrideMintUrl || mintUrl,
     referrerAddress ?? ''
   );
 
+  const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
+
+  const [claimCode] = usePersistedState(MCHX_CLAIM_CODE_KEY, '');
+
   const mintProvider: {
     buttonText: string;
     icon: React.ReactNode;
@@ -113,10 +125,17 @@ export function MintLinkButton({
         icon: <SuperRareIcon width={size === 'sm' ? 16 : 24} height={size === 'sm' ? 16 : 24} />,
       };
     } else if (mintProviderType === 'Highlight') {
-      return {
-        buttonText: 'mint on highlight',
-        icon: <HighlightIcon width={size === 'sm' ? 16 : 24} height={size === 'sm' ? 16 : 24} />,
-      };
+      if (isRadiance && !claimCode) {
+        return {
+          buttonText: 'mint on gallery',
+          icon: <FoundationIcon width={size === 'sm' ? 16 : 24} height={size === 'sm' ? 16 : 24} />,
+        };
+      } else {
+        return {
+          buttonText: 'mint on highlight',
+          icon: <HighlightIcon width={size === 'sm' ? 16 : 24} height={size === 'sm' ? 16 : 24} />,
+        };
+      }
     } else if (mintProviderType === 'Foundation') {
       return {
         buttonText: 'mint on foundation',
@@ -125,11 +144,15 @@ export function MintLinkButton({
     } else {
       return null;
     }
-  }, [mintProviderType, size]);
+  }, [claimCode, isRadiance, mintProviderType, size]);
 
   const handlePress = useCallback(() => {
-    Linking.openURL(mintURL);
-  }, [mintURL]);
+    if (isRadiance) {
+      showBottomSheetModal({ content: <MintCampaignBottomSheet onClose={hideBottomSheetModal} /> });
+    } else {
+      Linking.openURL(mintURL);
+    }
+  }, [hideBottomSheetModal, isRadiance, mintURL, showBottomSheetModal]);
 
   const arrowColor = useMemo(() => {
     const colorMap = {

apps/mobile/src/components/Notification/NotificationSkeleton.tsx

@@ -258,10 +258,13 @@ export function NotificationSkeleton({
     [notification.followers?.edges, notification.user]
   );
 
+  // TODO Get data from backend
+  const isPinned = true;
+
   return (
     <GalleryTouchableOpacity
       onPress={onPress}
-      className="flex flex-row justify-between p-4"
+      className={`flex flex-row justify-between p-4 ${isPinned && 'm-4 border border-blue-700'}`}
       eventElementId="Notification Row"
       eventName="Notification Row Clicked"
       eventContext={contexts.Notifications}

apps/mobile/src/navigation/RootStackNavigator.tsx

@@ -5,6 +5,7 @@ import { View } from 'react-native';
 import { graphql, useFragment, useLazyLoadQuery } from 'react-relay';
 import { useMaintenanceContext } from 'shared/contexts/MaintenanceStatusContext';
 
+import { ClaimMintUpsellBanner } from '~/components/ClaimMintUpsellBanner';
 import { ConnectWalletUpsellBanner } from '~/components/ConnectWalletUpsellBanner';
 import { MaintenanceNoticeBottomSheetWrapper } from '~/components/MaintenanceScreen';
 import { RootStackNavigatorFragment$key } from '~/generated/RootStackNavigatorFragment.graphql';
@@ -116,6 +117,7 @@ function MainScreen({ queryRef }: MainScreenProps) {
     graphql`
       fragment RootStackNavigatorFragment on Query {
         ...ConnectWalletUpsellBannerFragment
+        ...ClaimMintUpsellBannerFragment
       }
     `,
     queryRef
@@ -125,6 +127,7 @@ function MainScreen({ queryRef }: MainScreenProps) {
     <View className="flex-1">
       <Suspense fallback={<View />}>
         <ConnectWalletUpsellBanner queryRef={query} />
+        <ClaimMintUpsellBanner queryRef={query} />
       </Suspense>
       <MainTabNavigator />
     </View>

schema.graphql

@@ -2835,6 +2835,7 @@ enum UserExperienceType {
   PostsBetaAnnouncement
   CreatorBetaFullscreenAnnouncementModal
   CreatorBetaMicroAnnouncementModal
+  RadianceMintApr2024
 }
 
 type UserFollowedUsersFeedEventData implements FeedEventData {