Merge branch 'main' into rohan/lightbox-test

gallery-so · May 11, 2024 · 7dc7cfe · 7dc7cfe
2 parents 0c777ba + 5ae8213
commit 7dc7cfe
Show file tree

Hide file tree

Showing 46 changed files with 1,311 additions and 142 deletions.
diff --git a/.env.sample b/.env.sample
diff --git 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.63',
   updates: {
     fallbackToCacheTimeout: 0,
   },

diff --git 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/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,13 +10,15 @@ type AnimatedRefreshIconProps = {
   isSyncing: boolean;
   eventElementId: string;
   eventName: string;
+  style?: ViewProps['style'];
 };
 
 export function AnimatedRefreshIcon({
   onSync,
   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
@@ -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/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/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/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' | 'faint';
+  color?: 'default' | 'white' | 'black' | 'faint' | 'active';
 } & GalleryTouchableOpacityProps;
 
 export function IconContainer({
@@ -28,11 +28,12 @@ export function IconContainer({
     md: 'h-8 w-8',
   };
 
-  const colorVariants: { [color in 'default' | 'white' | 'black' | 'faint']: string } = {
+  const colorVariants: { [color in 'default' | 'white' | 'black' | 'faint' | 'active']: string } = {
     default: 'bg-faint dark:bg-black-500',
     white: 'bg-white dark:bg-black-900',
     black: 'bg-black-900 dark:bg-white',
     faint: 'bg-black-700',
+    active: 'bg-porcelain dark:bg-white',
   };
 
   return (

diff --git 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
@@ -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 />
         ) : (

diff --git 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}
+    />
+  );
 }