Skip to content

Commit

Permalink
add banner and mint on gallery (mobile)
Browse files Browse the repository at this point in the history
  • Loading branch information
pvicensSpacedev committed Apr 11, 2024
1 parent 5c5d008 commit 97e16b4
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 9 deletions.
116 changes: 116 additions & 0 deletions apps/mobile/src/components/ClaimMintUpsellBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
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>
);
}
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,6 +17,7 @@ export function PostListMintButtonSection({ postRef }: Props) {
fragment PostListMintButtonSectionFragment on Post {
tokens {
...MintLinkButtonFragment
...extractRelevantMetadataFromTokenFragment
}
author {
primaryWallet {
Expand All @@ -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"
Expand Down
39 changes: 32 additions & 7 deletions apps/mobile/src/components/MintLinkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -78,11 +82,20 @@ 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;
Expand Down Expand Up @@ -113,23 +126,35 @@ 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',
icon: <FoundationIcon width={size === 'sm' ? 16 : 24} height={size === 'sm' ? 16 : 24} />,
};

} 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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions apps/mobile/src/navigation/RootStackNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -116,6 +117,7 @@ function MainScreen({ queryRef }: MainScreenProps) {
graphql`
fragment RootStackNavigatorFragment on Query {
...ConnectWalletUpsellBannerFragment
...ClaimMintUpsellBannerFragment
}
`,
queryRef
Expand All @@ -125,6 +127,7 @@ function MainScreen({ queryRef }: MainScreenProps) {
<View className="flex-1">
<Suspense fallback={<View />}>
<ConnectWalletUpsellBanner queryRef={query} />
<ClaimMintUpsellBanner queryRef={query} />
</Suspense>
<MainTabNavigator />
</View>
Expand Down
1 change: 1 addition & 0 deletions schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -2835,6 +2835,7 @@ enum UserExperienceType {
PostsBetaAnnouncement
CreatorBetaFullscreenAnnouncementModal
CreatorBetaMicroAnnouncementModal
RadianceMintApr2024
}

type UserFollowedUsersFeedEventData implements FeedEventData {
Expand Down

0 comments on commit 97e16b4

Please sign in to comment.