diff --git a/apps/mobile/src/components/ClaimMintUpsellBanner.tsx b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx new file mode 100644 index 0000000000..94ce20c97b --- /dev/null +++ b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx @@ -0,0 +1,100 @@ +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 { 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] = usePersistedState( + 'isUpsellMintBannerDismissed', + false + ); + + const handleDismissUpsellBanner = useCallback(() => { + setIsUpsellMintBannerDismissed(true); + }, [setIsUpsellMintBannerDismissed]); + + const handleClaimPress = useCallback(() => { + showBottomSheetModal({ content: }); + }, [hideBottomSheetModal, showBottomSheetModal]); + + const user = query.viewer?.user; + + if (!user || claimCode || isUpsellMintBannerDismissed) { + return ; + } + + return ( + + + + Exclusive free mint + + + Claim your free generative work by MCHX + + + +