[GAL-4095] [GAL-4114] Enable Sign Up with Wallet (#1855)

* Make button text optional

* Add dependency

* Add connect wallet button

* Disconnect wallet when logout

* eth icon support sizing

* Add wallet selection

* Add sign in bottom sheet

* Bottom sheet row support icon

* Move createNonce to shared

* removed unused file

* lint shared

* prettier

* add try catch block

* set loading false

* Add dark mode + icons

* fix loading state

* turn off onboarding flag

* rename heading

* Add loading signature state

* Update metadata

* consolidate email icon

* update border on dark mode

* update spinner on dark mode

* reset state on dismiss

* handle reject signature

* Add username screen

* Add profile bio onboarding screen

* move util to shared

* Update shared path on web

* Add check username logic

* move update update user hooks to shared

* Move bio count to shared

* navigate to bio screen

* able to set pfp n add sync

* Fix typecheck path

* Add welcome bottom sheet

* Remove toast

* Add curated direction props

* show welcome bottom for new user

* lint

* fix fetch user profile after signed up

* fix shifted button

* standardize error state

* Add event tracker

* remove console

* Rename the copywriting

* Added comment to remove manual sync

* If created user, able to update username

* fix typo

apps/mobile/src/components/Login/ConnectWalletButton.tsx

@@ -54,21 +54,29 @@ export function ConnectWalletButton() {
     const signer = web3Provider.getSigner();
     const { nonce, user_exists: userExist } = await createNonce(address, 'Ethereum');
 
-    if (!userExist) {
-      pushToast({
-        message: 'You need to sign up first',
-        withoutNavbar: true,
-      });
-      setIsLoading(false);
-      provider?.disconnect();
-      return;
-    }
-
     try {
       setIsLoading(true);
       setIsSigningIn(true);
       const signature = await signer.signMessage(nonce);
 
+      if (!userExist) {
+        setIsLoading(false);
+        provider?.disconnect();
+
+        navigation.navigate('OnboardingUsername', {
+          authMechanism: {
+            authMechanismType: 'eoa',
+            chain: 'Ethereum',
+            address,
+            nonce,
+            signature,
+            userFriendlyWalletName: 'Unknown',
+          },
+        });
+
+        return;
+      }
+
       const result = await login({
         eoa: {
           signature,

apps/mobile/src/components/WelcomeNewUser.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+
+import { Button } from './Button';
+import {
+  GalleryBottomSheetModal,
+  GalleryBottomSheetModalType,
+} from './GalleryBottomSheet/GalleryBottomSheetModal';
+import { Typography } from './Typography';
+
+type Props = {
+  username: string;
+};
+
+export function WelcomeNewUser({ username }: Props) {
+  const snapPoints = useMemo(() => [360], []);
+  const bottomSheetRef = useRef<GalleryBottomSheetModalType>(null);
+  useEffect(() => bottomSheetRef.current?.present(), []);
+
+  return (
+    <GalleryBottomSheetModal ref={bottomSheetRef} index={0} snapPoints={snapPoints}>
+      <View className="flex flex-column space-y-8 mx-4 mt-2">
+        <View className="space-y-6">
+          <View>
+            <Typography
+              className="text-3xl text-center"
+              font={{ family: 'GTAlpina', weight: 'StandardLight' }}
+            >
+              Welcome to your feed,
+            </Typography>
+            <Typography
+              className="text-3xl text-center"
+              font={{ family: 'GTAlpina', weight: 'StandardLight' }}
+            >
+              {username}!
+            </Typography>
+          </View>
+          <Typography className="text-center" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
+            This is where you'll see what people are collecting, creating and sharing. Choose 'For
+            You' for tailored content or 'Following' to see what your connections are up to!
+          </Typography>
+        </View>
+
+        <Button
+          onPress={() => bottomSheetRef.current?.dismiss()}
+          text="continue"
+          eventElementId="welcome-bottom-sheet-continue"
+          eventName="welcome-bottom-sheet-continue"
+        />
+      </View>
+    </GalleryBottomSheetModal>
+  );
+}

apps/mobile/src/navigation/LoginStackNavigator.tsx

@@ -2,6 +2,9 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import { LoginStackNavigatorParamList } from '~/navigation/types';
 import { NotificationUpsellScreen } from '~/screens/Login/NotificationUpsellScreen';
+import { NftSelectorPickerScreen } from '~/screens/NftSelectorScreen/NftSelectorPickerScreen';
+import { OnboardingProfileBioScreen } from '~/screens/Onboarding/OnboardingProfileBioScreen';
+import { OnboardingUsernameScreen } from '~/screens/Onboarding/OnboardingUsernameScreen';
 
 import { EnterEmailScreen } from '../screens/Login/EnterEmailScreen';
 import { LandingScreen } from '../screens/Login/LandingScreen';
@@ -23,6 +26,10 @@ export function LoginStackNavigator() {
       <Stack.Screen name="NotificationUpsell" component={NotificationUpsellScreen} />
 
       <Stack.Screen name="QRCode" component={QRCodeScreen} />
+
+      <Stack.Screen name="OnboardingUsername" component={OnboardingUsernameScreen} />
+      <Stack.Screen name="OnboardingProfileBio" component={OnboardingProfileBioScreen} />
+      <Stack.Screen name="OnboardingNftSelector" component={NftSelectorPickerScreen} />
     </Stack.Navigator>
   );
 }

apps/mobile/src/navigation/types.ts

@@ -61,7 +61,10 @@ export type MainTabStackNavigatorParamList = {
 };
 
 export type FeedTabNavigatorParamList = {
-  Curated: undefined;
+  Curated: {
+    // check if new registered user, we show a welcome message
+    isNewUser?: boolean;
+  };
   Latest: undefined;
   Explore: undefined;
 };
@@ -75,12 +78,31 @@ export type MainTabNavigatorParamList = {
   PostTab: NavigatorScreenParams<MainTabStackNavigatorParamList>;
 };
 
+type AuthMechanism = {
+  authMechanismType: 'eoa';
+  chain: string;
+  address: string;
+  nonce: string;
+  signature: string;
+  userFriendlyWalletName: string;
+};
+
 export type LoginStackNavigatorParamList = {
   Landing: undefined;
   EnterEmail: undefined;
   QRCode: { onError: (message: string) => void };
   WaitingForConfirmation: { email: string };
   NotificationUpsell: undefined;
+
+  OnboardingUsername: {
+    authMechanism: AuthMechanism;
+  };
+
+  OnboardingProfileBio: undefined;
+
+  OnboardingNftSelector: {
+    page: ScreenWithNftSelector;
+  };
 };
 
 export type PostRedirect = 'Latest' | 'Community';

apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx

@@ -1,11 +1,12 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { RouteProp, useRoute } from '@react-navigation/native';
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { graphql, useLazyLoadQuery, usePaginationFragment } from 'react-relay';
 
-import { WelcomeToBeta } from '~/components/WelcomeToBeta';
+import { WelcomeNewUser } from '~/components/WelcomeNewUser';
 import { CuratedScreenFragment$key } from '~/generated/CuratedScreenFragment.graphql';
 import { CuratedScreenQuery } from '~/generated/CuratedScreenQuery.graphql';
 import { RefetchableCuratedScreenFragmentQuery } from '~/generated/RefetchableCuratedScreenFragmentQuery.graphql';
+import { FeedTabNavigatorParamList } from '~/navigation/types';
 import { removeNullValues } from '~/shared/relay/removeNullValues';
 
 import { FeedList } from '../../components/Feed/FeedList';
@@ -53,6 +54,17 @@ function CuratedScreenInner({ queryRef }: CuratedScreenInnerProps) {
 
   const curatedFeed = query.data.curatedFeed;
 
+  const route = useRoute<RouteProp<FeedTabNavigatorParamList, 'Curated'>>();
+  const [showWelcome, setShowWelcome] = useState(false);
+
+  const { isNewUser } = route.params ?? {};
+
+  useEffect(() => {
+    if (isNewUser) {
+      setShowWelcome(true);
+    }
+  }, [isNewUser, setShowWelcome]);
+
   const handleRefresh = useCallback(() => {
     setIsRefreshing(true);
 
@@ -83,20 +95,6 @@ function CuratedScreenInner({ queryRef }: CuratedScreenInnerProps) {
     return [...curatedEvents];
   }, [curatedFeed?.edges]);
 
-  const [showWelcome, setShowWelcome] = useState(false);
-
-  const checkShouldShowWelcome = useCallback(async () => {
-    const shown = await AsyncStorage.getItem('welcomeMessageShown');
-    if (shown !== 'true') {
-      setShowWelcome(true);
-      await AsyncStorage.setItem('welcomeMessageShown', 'true');
-    }
-  }, [setShowWelcome]);
-
-  useEffect(() => {
-    checkShouldShowWelcome();
-  }, [checkShouldShowWelcome]);
-
   return (
     <>
       <FeedList
@@ -107,7 +105,7 @@ function CuratedScreenInner({ queryRef }: CuratedScreenInnerProps) {
         feedEventRefs={events}
         queryRef={query.data}
       />
-      {showWelcome && <WelcomeToBeta username={query.data.viewer?.user?.username ?? ''} />}
+      {showWelcome && <WelcomeNewUser username={query.data.viewer?.user?.username ?? ''} />}
     </>
   );
 }

apps/mobile/src/screens/Login/navigateToNotificationUpsellOrHomeScreen.ts

@@ -10,7 +10,8 @@ export function markAsShown() {
 }
 
 export async function navigateToNotificationUpsellOrHomeScreen(
-  navigation: LoginStackNavigatorProp
+  navigation: LoginStackNavigatorProp,
+  isNewUser?: boolean
 ) {
   const shown = await AsyncStorage.getItem(KEY);
 
@@ -20,7 +21,13 @@ export async function navigateToNotificationUpsellOrHomeScreen(
       routes: [
         {
           name: 'MainTabs',
-          params: { screen: 'HomeTab', params: { screen: 'Home', params: { screen: 'Curated' } } },
+          params: {
+            screen: 'HomeTab',
+            params: {
+              screen: 'Home',
+              params: { screen: 'Curated', params: { isNewUser } },
+            },
+          },
         },
       ],
     });