From 2ada6b39e21e105257485f24d0e64da621c13be4 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Wed, 6 Sep 2023 12:25:08 +0800
Subject: [PATCH] [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
---
 .../components/Login/ConnectWalletButton.tsx  |  28 +-
 apps/mobile/src/components/WelcomeNewUser.tsx |  53 ++++
 .../src/navigation/LoginStackNavigator.tsx    |   7 +
 apps/mobile/src/navigation/types.ts           |  24 +-
 .../src/screens/HomeScreen/CuratedScreen.tsx  |  32 +--
 ...avigateToNotificationUpsellOrHomeScreen.ts |  11 +-
 .../Onboarding/OnboardingProfileBioScreen.tsx | 168 +++++++++++
 .../Onboarding/OnboardingUsernameScreen.tsx   | 261 ++++++++++++++++++
 .../screens/ProfileScreen/ProfileScreen.tsx   |   2 +-
 .../Announcement/AnnouncementList.tsx         |   2 +-
 apps/web/src/components/Email/EmailForm.tsx   |   2 +-
 .../components/Follow/FollowListUserItem.tsx  |   2 +-
 .../src/components/Profile/UserInfoForm.tsx   |   3 +-
 .../src/components/Profile/useUserInfoForm.ts |  39 +--
 .../TokenHolderListGalleryPreview.tsx         |   2 +-
 .../multichain/MagicLinkLogin.tsx             |   2 +-
 apps/web/src/utils/formatUrl.ts               |   2 +-
 apps/web/src/utils/regex.test.tsx             |   2 +-
 apps/web/src/utils/token.ts                   |   2 +-
 .../shared/src/hooks/useAuthPayloadQuery.ts   |  21 ++
 .../shared/src/hooks}/useCreateUser.ts        |   2 +-
 .../shared/src/hooks}/useUpdateUser.ts        |   5 +-
 ...useUserInfoFormIsUsernameAvailableQuery.ts |  32 +++
 .../shared}/src/utils/regex.ts                |   0
 .../shared}/src/utils/validators.ts           |   0
 25 files changed, 626 insertions(+), 78 deletions(-)
 create mode 100644 apps/mobile/src/components/WelcomeNewUser.tsx
 create mode 100644 apps/mobile/src/screens/Onboarding/OnboardingProfileBioScreen.tsx
 create mode 100644 apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx
 create mode 100644 packages/shared/src/hooks/useAuthPayloadQuery.ts
 rename {apps/web/src/hooks/api/users => packages/shared/src/hooks}/useCreateUser.ts (97%)
 rename {apps/web/src/hooks/api/users => packages/shared/src/hooks}/useUpdateUser.ts (94%)
 create mode 100644 packages/shared/src/hooks/useUserInfoFormIsUsernameAvailableQuery.ts
 rename {apps/web => packages/shared}/src/utils/regex.ts (100%)
 rename {apps/web => packages/shared}/src/utils/validators.ts (100%)

diff --git a/apps/mobile/src/components/Login/ConnectWalletButton.tsx b/apps/mobile/src/components/Login/ConnectWalletButton.tsx
index e4858f7f67..2515b71f1c 100644
--- a/apps/mobile/src/components/Login/ConnectWalletButton.tsx
+++ b/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,
diff --git a/apps/mobile/src/components/WelcomeNewUser.tsx b/apps/mobile/src/components/WelcomeNewUser.tsx
new file mode 100644
index 0000000000..ff2ad51910
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/mobile/src/navigation/LoginStackNavigator.tsx b/apps/mobile/src/navigation/LoginStackNavigator.tsx
index f7de7a5c43..c0f5004309 100644
--- a/apps/mobile/src/navigation/LoginStackNavigator.tsx
+++ b/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>
   );
 }
diff --git a/apps/mobile/src/navigation/types.ts b/apps/mobile/src/navigation/types.ts
index dbd2cb20cb..fbd99b5c24 100644
--- a/apps/mobile/src/navigation/types.ts
+++ b/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';
diff --git a/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx b/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx
index 83aa3e8fd3..c7028bc0a5 100644
--- a/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx
+++ b/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 ?? ''} />}
     </>
   );
 }
diff --git a/apps/mobile/src/screens/Login/navigateToNotificationUpsellOrHomeScreen.ts b/apps/mobile/src/screens/Login/navigateToNotificationUpsellOrHomeScreen.ts
index c16bcd4f5b..ce30033341 100644
--- a/apps/mobile/src/screens/Login/navigateToNotificationUpsellOrHomeScreen.ts
+++ b/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 } },
+            },
+          },
         },
       ],
     });
diff --git a/apps/mobile/src/screens/Onboarding/OnboardingProfileBioScreen.tsx b/apps/mobile/src/screens/Onboarding/OnboardingProfileBioScreen.tsx
new file mode 100644
index 0000000000..b62b594744
--- /dev/null
+++ b/apps/mobile/src/screens/Onboarding/OnboardingProfileBioScreen.tsx
@@ -0,0 +1,168 @@
+import { useNavigation } from '@react-navigation/native';
+import { useColorScheme } from 'nativewind';
+import { useCallback, useState } from 'react';
+import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+
+import { BackButton } from '~/components/BackButton';
+import { Button } from '~/components/Button';
+import { ProfilePicture } from '~/components/ProfilePicture/ProfilePicture';
+import { Typography } from '~/components/Typography';
+import { OnboardingProfileBioScreenQuery } from '~/generated/OnboardingProfileBioScreenQuery.graphql';
+import { LoginStackNavigatorProp } from '~/navigation/types';
+import { useTrack } from '~/shared/contexts/AnalyticsContext';
+import useUpdateUser, { BIO_MAX_CHAR_COUNT } from '~/shared/hooks/useUpdateUser';
+import colors from '~/shared/theme/colors';
+
+import { navigateToNotificationUpsellOrHomeScreen } from '../Login/navigateToNotificationUpsellOrHomeScreen';
+
+export function OnboardingProfileBioScreen() {
+  const query = useLazyLoadQuery<OnboardingProfileBioScreenQuery>(
+    graphql`
+      query OnboardingProfileBioScreenQuery {
+        viewer {
+          ... on Viewer {
+            user {
+              __typename
+              dbid
+              username
+              ...ProfilePictureFragment
+            }
+          }
+        }
+      }
+    `,
+    {}
+  );
+
+  const user = query?.viewer?.user;
+
+  const track = useTrack();
+  const navigation = useNavigation<LoginStackNavigatorProp>();
+  const { colorScheme } = useColorScheme();
+
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [bio, setBio] = useState('');
+
+  const updateUser = useUpdateUser();
+
+  const handleBack = useCallback(() => {
+    navigation.goBack();
+  }, [navigation]);
+
+  const handleSelectProfilePicture = useCallback(() => {
+    track('Profile Picture Pressed', {
+      id: 'Onboarding Profile Picture Selected',
+      name: 'Onboarding Profile Picture Selected',
+      screen: 'OnboardingProfileBio',
+    });
+
+    navigation.navigate('OnboardingNftSelector', {
+      page: 'ProfilePicture',
+    });
+  }, [navigation, track]);
+
+  const handleNext = useCallback(async () => {
+    if (!user) return null;
+
+    if (bio) {
+      await updateUser(user.dbid, user.username ?? '', bio);
+    }
+
+    await navigateToNotificationUpsellOrHomeScreen(navigation, true);
+  }, [bio, navigation, updateUser, user]);
+
+  if (user?.__typename !== 'GalleryUser') {
+    throw new Error(`Unable to fetch the logged in user`);
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ paddingTop: top }}
+      className="flex flex-1 flex-col bg-white dark:bg-black-900"
+    >
+      <View className="flex flex-col flex-grow space-y-8 px-4">
+        <View className="relative flex-row items-center justify-between ">
+          <BackButton onPress={handleBack} />
+
+          <View
+            className="absolute w-full flex flex-row justify-center items-center"
+            pointerEvents="none"
+          >
+            <Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Bold' }}>
+              Set up your profile
+            </Typography>
+          </View>
+
+          <View />
+        </View>
+
+        <View
+          className="flex-1 items-center justify-center space-y-12 px-8"
+          style={{
+            marginBottom: bottom,
+          }}
+        >
+          <View>
+            <ProfilePicture
+              userRef={user}
+              size="xxl"
+              onPress={handleSelectProfilePicture}
+              isEditable
+            />
+          </View>
+
+          <TextInput
+            style={{
+              fontSize: 24,
+              fontFamily: 'GTAlpinaStandardLight',
+            }}
+            className="dark:text-white text-center"
+            placeholderTextColor={colors.metal}
+            selectionColor={colorScheme === 'dark' ? colors.offWhite : colors.black['800']}
+            textAlignVertical="center"
+            placeholder="tell us about yourself..."
+            value={bio}
+            onChange={(e) => setBio(e.nativeEvent.text)}
+            autoCapitalize="none"
+            autoCorrect={false}
+            multiline
+          />
+
+          {bio.length > BIO_MAX_CHAR_COUNT && (
+            <Typography
+              className="text-sm text-red"
+              font={{ family: 'ABCDiatype', weight: 'Regular' }}
+            >
+              {`Bio must be less than ${BIO_MAX_CHAR_COUNT} characters`}
+            </Typography>
+          )}
+
+          {bio.length > 0 ? (
+            <Button
+              onPress={handleNext}
+              className="w-full"
+              eventElementId="Next button on onboarding bio screen"
+              eventName="Next button on onboarding bio screen"
+              disabled={bio.length > BIO_MAX_CHAR_COUNT}
+              variant={bio.length > BIO_MAX_CHAR_COUNT ? 'disabled' : 'primary'}
+              text="NEXT"
+            />
+          ) : (
+            <Button
+              onPress={handleNext}
+              variant="secondary"
+              className="w-full"
+              eventElementId="Skip onboarding bio & profile picture"
+              eventName="Skip onboarding bio & profile picture"
+              text="SKIP"
+            />
+          )}
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
diff --git a/apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx b/apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx
new file mode 100644
index 0000000000..261ef0f2d7
--- /dev/null
+++ b/apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx
@@ -0,0 +1,261 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import clsx from 'clsx';
+import { useColorScheme } from 'nativewind';
+import { useCallback, useEffect, useState } from 'react';
+import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+
+import { BackButton } from '~/components/BackButton';
+import { Button } from '~/components/Button';
+import { Typography } from '~/components/Typography';
+import { OnboardingUsernameScreenQuery } from '~/generated/OnboardingUsernameScreenQuery.graphql';
+import { LoginStackNavigatorParamList, LoginStackNavigatorProp } from '~/navigation/types';
+import { useReportError } from '~/shared/contexts/ErrorReportingContext';
+import useCreateUser from '~/shared/hooks/useCreateUser';
+import useDebounce from '~/shared/hooks/useDebounce';
+import useUpdateUser from '~/shared/hooks/useUpdateUser';
+import { useIsUsernameAvailableFetcher } from '~/shared/hooks/useUserInfoFormIsUsernameAvailableQuery';
+import colors from '~/shared/theme/colors';
+import {
+  alphanumericUnderscores,
+  maxLength,
+  minLength,
+  noConsecutivePeriodsOrUnderscores,
+  required,
+  validate,
+} from '~/shared/utils/validators';
+
+import useSyncTokens from '../NftSelectorScreen/useSyncTokens';
+
+export function OnboardingUsernameScreen() {
+  const query = useLazyLoadQuery<OnboardingUsernameScreenQuery>(
+    graphql`
+      query OnboardingUsernameScreenQuery {
+        viewer {
+          ... on Viewer {
+            user {
+              __typename
+              dbid
+              username
+              bio
+            }
+          }
+        }
+      }
+    `,
+    {}
+  );
+
+  const user = query?.viewer?.user;
+
+  const navigation = useNavigation<LoginStackNavigatorProp>();
+  const { colorScheme } = useColorScheme();
+  const createUser = useCreateUser();
+  const updateUser = useUpdateUser();
+  const isUsernameAvailableFetcher = useIsUsernameAvailableFetcher();
+  const reportError = useReportError();
+  const { isSyncing, syncTokens } = useSyncTokens();
+
+  const route = useRoute<RouteProp<LoginStackNavigatorParamList, 'OnboardingUsername'>>();
+
+  const [username, setUsername] = useState(user?.username ?? '');
+  const [bio] = useState('');
+
+  // This cannot be derived from a "null" `usernameError`
+  // since the value starts off as empty when the form is empty
+  const [isUsernameValid, setIsUsernameValid] = useState(false);
+  const [usernameError, setUsernameError] = useState('');
+
+  const debouncedUsername = useDebounce(username, 500);
+
+  const authMechanism = route.params.authMechanism;
+
+  const { top, bottom } = useSafeAreaInsets();
+
+  const handleBack = useCallback(() => {
+    navigation.goBack();
+  }, [navigation]);
+
+  const handleUsernameChange = useCallback((text: string) => {
+    setUsernameError('');
+    setUsername(text);
+  }, []);
+
+  const handleNext = useCallback(async () => {
+    setUsernameError('');
+
+    try {
+      // If its existing user, update the username
+      if (user?.username) {
+        await updateUser(user.dbid, username, user.bio ?? '');
+
+        navigation.navigate('OnboardingProfileBio');
+        return;
+      }
+
+      const response = await createUser(authMechanism, username, bio);
+
+      if (response.createUser?.__typename === 'CreateUserPayload') {
+        // TODO: Remove this once incremental sync is implemented
+        if (!isSyncing) {
+          syncTokens('Ethereum');
+        }
+
+        navigation.navigate('OnboardingProfileBio');
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        setUsernameError(error.message);
+      }
+    }
+  }, [
+    authMechanism,
+    bio,
+    createUser,
+    isSyncing,
+    navigation,
+    syncTokens,
+    username,
+    updateUser,
+    user,
+  ]);
+
+  const [isCheckingUsername, setIsCheckingUsername] = useState(false);
+  useEffect(
+    function validateUsername() {
+      setUsernameError('');
+
+      if (debouncedUsername.length < 2) {
+        return;
+      }
+
+      // if the user checking the username is the same as the user
+      // that is currently logged in, then we don't need to check
+      if (user?.username === debouncedUsername) {
+        setIsUsernameValid(true);
+        return;
+      }
+
+      const clientSideUsernameError = validate(debouncedUsername, [
+        required,
+        minLength(2),
+        maxLength(20),
+        alphanumericUnderscores,
+        noConsecutivePeriodsOrUnderscores,
+      ]);
+
+      if (clientSideUsernameError) {
+        setUsernameError(clientSideUsernameError);
+
+        return;
+      } else {
+        setUsernameError('');
+      }
+
+      setIsCheckingUsername(true);
+
+      isUsernameAvailableFetcher(debouncedUsername)
+        .then((isUsernameAvailable) => {
+          if (!isUsernameAvailable) {
+            setUsernameError('Username is taken');
+            setIsUsernameValid(false);
+          } else {
+            setIsUsernameValid(true);
+          }
+        })
+        .catch((error) => {
+          if (error instanceof Error) {
+            reportError(error);
+          } else {
+            reportError('Failure while validating username', {
+              tags: { username: debouncedUsername },
+            });
+          }
+
+          setUsernameError(
+            "Something went wrong while validating your username. We're looking into it."
+          );
+        })
+        .finally(() => {
+          setIsCheckingUsername(false);
+        });
+    },
+    [debouncedUsername, isUsernameAvailableFetcher, reportError, user?.username]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ paddingTop: top }}
+      className="flex flex-1 flex-col bg-white dark:bg-black-900"
+    >
+      <View className="flex flex-col flex-grow space-y-8 px-4">
+        <View className="relative flex-row items-center justify-between ">
+          <BackButton onPress={handleBack} />
+
+          <View
+            className="absolute w-full flex flex-row justify-center items-center"
+            pointerEvents="none"
+          >
+            <Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Bold' }}>
+              Pick a username
+            </Typography>
+          </View>
+
+          <View />
+        </View>
+
+        <View
+          className="flex-1  justify-center space-y-12 px-8"
+          style={{
+            marginBottom: bottom,
+          }}
+        >
+          <TextInput
+            style={{
+              fontSize: 32,
+              fontFamily: 'GTAlpinaStandardLight',
+            }}
+            className="dark:text-white text-center"
+            placeholderTextColor={colors.metal}
+            selectionColor={colorScheme === 'dark' ? colors.offWhite : colors.black['800']}
+            textAlignVertical="center"
+            placeholder="username"
+            value={username}
+            onChange={(e) => handleUsernameChange(e.nativeEvent.text)}
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+
+          <View className="space-y-4">
+            <Button
+              onPress={handleNext}
+              className={clsx(
+                'w-full',
+                username.length > 0 && 'opacity-100',
+                username.length === 0 && 'opacity-0'
+              )}
+              eventElementId="Onboarding Username Next Pressed"
+              eventName="Onboarding Username Next Pressed"
+              text="NEXT"
+              variant={!isUsernameValid ? 'disabled' : 'primary'}
+              disabled={!isUsernameValid}
+              loading={isCheckingUsername}
+            />
+            <Typography
+              className={clsx(
+                'text-sm text-red',
+                username.length > 0 && 'opacity-100',
+                username.length === 0 && 'opacity-0'
+              )}
+              font={{ family: 'ABCDiatype', weight: 'Regular' }}
+            >
+              {usernameError}
+            </Typography>
+          </View>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
diff --git a/apps/mobile/src/screens/ProfileScreen/ProfileScreen.tsx b/apps/mobile/src/screens/ProfileScreen/ProfileScreen.tsx
index 0f0c7f2558..4d1f3872bc 100644
--- a/apps/mobile/src/screens/ProfileScreen/ProfileScreen.tsx
+++ b/apps/mobile/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -55,7 +55,7 @@ function ProfileScreenInner() {
       sharedFollowersFirst: SHARED_FOLLOWERS_PER_PAGE,
       includePosts: isPostEnabled,
     },
-    { fetchPolicy: 'store-or-network', UNSTABLE_renderPolicy: 'partial' }
+    { fetchPolicy: 'store-or-network', UNSTABLE_renderPolicy: 'full' }
   );
 
   const [query, refetch] = useRefetchableFragment<
diff --git a/apps/web/src/components/Announcement/AnnouncementList.tsx b/apps/web/src/components/Announcement/AnnouncementList.tsx
index 1e722ae6a3..1b21942065 100644
--- a/apps/web/src/components/Announcement/AnnouncementList.tsx
+++ b/apps/web/src/components/Announcement/AnnouncementList.tsx
@@ -8,8 +8,8 @@ import { useDrawerActions } from '~/contexts/globalLayout/GlobalSidebar/SidebarD
 import { AnnouncementListFragment$key } from '~/generated/AnnouncementListFragment.graphql';
 import { useTrack } from '~/shared/contexts/AnalyticsContext';
 import colors from '~/shared/theme/colors';
+import { HTTPS_URL } from '~/shared/utils/regex';
 import { useOptimisticallyDismissExperience } from '~/utils/graphql/experiences/useUpdateUserExperience';
-import { HTTPS_URL } from '~/utils/regex';
 
 import { Chip } from '../core/Chip/Chip';
 import { HStack, VStack } from '../core/Spacer/Stack';
diff --git a/apps/web/src/components/Email/EmailForm.tsx b/apps/web/src/components/Email/EmailForm.tsx
index 8b86b3aa18..457392fafa 100644
--- a/apps/web/src/components/Email/EmailForm.tsx
+++ b/apps/web/src/components/Email/EmailForm.tsx
@@ -11,7 +11,7 @@ import { AdditionalContext, useReportError } from '~/shared/contexts/ErrorReport
 import useDebounce from '~/shared/hooks/useDebounce';
 import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
 import colors from '~/shared/theme/colors';
-import { EMAIL_FORMAT } from '~/utils/regex';
+import { EMAIL_FORMAT } from '~/shared/utils/regex';
 
 import { Button } from '../core/Button/Button';
 import { HStack, VStack } from '../core/Spacer/Stack';
diff --git a/apps/web/src/components/Follow/FollowListUserItem.tsx b/apps/web/src/components/Follow/FollowListUserItem.tsx
index 88026efc30..54f642f387 100644
--- a/apps/web/src/components/Follow/FollowListUserItem.tsx
+++ b/apps/web/src/components/Follow/FollowListUserItem.tsx
@@ -11,7 +11,7 @@ import { FollowListUserItemFragment$key } from '~/generated/FollowListUserItemFr
 import { FollowListUserItemQueryFragment$key } from '~/generated/FollowListUserItemQueryFragment.graphql';
 import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize';
 import colors from '~/shared/theme/colors';
-import { BREAK_LINES } from '~/utils/regex';
+import { BREAK_LINES } from '~/shared/utils/regex';
 
 import HoverCardOnUsername from '../HoverCard/HoverCardOnUsername';
 import { ProfilePicture } from '../ProfilePicture/ProfilePicture';
diff --git a/apps/web/src/components/Profile/UserInfoForm.tsx b/apps/web/src/components/Profile/UserInfoForm.tsx
index ac7af40eab..ec662fb996 100644
--- a/apps/web/src/components/Profile/UserInfoForm.tsx
+++ b/apps/web/src/components/Profile/UserInfoForm.tsx
@@ -6,6 +6,7 @@ import Input from '~/components/core/Input/Input';
 import { HStack, VStack } from '~/components/core/Spacer/Stack';
 import { TitleS } from '~/components/core/Text/Text';
 import { TextAreaWithCharCount } from '~/components/core/TextArea/TextArea';
+import { BIO_MAX_CHAR_COUNT } from '~/shared/hooks/useUpdateUser';
 // import { UserInfoFormFragment$key } from '~/generated/UserInfoFormFragment.graphql';
 // import { UserInfoFormQueryFragment$key } from '~/generated/UserInfoFormQueryFragment.graphql';
 // import { useTrack } from '~/shared/contexts/AnalyticsContext';
@@ -32,8 +33,6 @@ type Props = {
   // queryRef: UserInfoFormQueryFragment$key;
 };
 
-export const BIO_MAX_CHAR_COUNT = 600;
-
 function UserInfoForm({
   className,
   onSubmit,
diff --git a/apps/web/src/components/Profile/useUserInfoForm.ts b/apps/web/src/components/Profile/useUserInfoForm.ts
index 483158da1f..4311abf637 100644
--- a/apps/web/src/components/Profile/useUserInfoForm.ts
+++ b/apps/web/src/components/Profile/useUserInfoForm.ts
@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
 
 import { useTrackCreateUserSuccess } from '~/contexts/analytics/authUtil';
-import { useUserInfoFormIsUsernameAvailableQuery } from '~/generated/useUserInfoFormIsUsernameAvailableQuery.graphql';
 import useAuthPayloadQuery from '~/hooks/api/users/useAuthPayloadQuery';
-import useCreateUser from '~/hooks/api/users/useCreateUser';
-import useUpdateUser from '~/hooks/api/users/useUpdateUser';
 import { useReportError } from '~/shared/contexts/ErrorReportingContext';
 import formatError from '~/shared/errors/formatError';
+import useCreateUser from '~/shared/hooks/useCreateUser';
 import useDebounce from '~/shared/hooks/useDebounce';
+import useUpdateUser, { BIO_MAX_CHAR_COUNT } from '~/shared/hooks/useUpdateUser';
+import { useIsUsernameAvailableFetcher } from '~/shared/hooks/useUserInfoFormIsUsernameAvailableQuery';
 import {
   alphanumericUnderscores,
   maxLength,
@@ -16,9 +15,7 @@ import {
   noConsecutivePeriodsOrUnderscores,
   required,
   validate,
-} from '~/utils/validators';
-
-import { BIO_MAX_CHAR_COUNT } from './UserInfoForm';
+} from '~/shared/utils/validators';
 
 type Props = {
   onSuccess: (username: string) => void;
@@ -27,34 +24,6 @@ type Props = {
   userId?: string;
 };
 
-function useIsUsernameAvailableFetcher() {
-  const relayEnvironment = useRelayEnvironment();
-
-  return useCallback(
-    async (username: string) => {
-      const response = await fetchQuery<useUserInfoFormIsUsernameAvailableQuery>(
-        relayEnvironment,
-        graphql`
-          query useUserInfoFormIsUsernameAvailableQuery($username: String!) {
-            user: userByUsername(username: $username) {
-              ... on ErrUserNotFound {
-                __typename
-              }
-            }
-          }
-        `,
-        { username }
-      ).toPromise();
-
-      if (response?.user?.__typename === 'ErrUserNotFound') {
-        return true;
-      }
-      return false;
-    },
-    [relayEnvironment]
-  );
-}
-
 export default function useUserInfoForm({
   onSuccess,
   existingUsername,
diff --git a/apps/web/src/components/TokenHolderList/TokenHolderListGalleryPreview.tsx b/apps/web/src/components/TokenHolderList/TokenHolderListGalleryPreview.tsx
index 11640d0826..8ca4a78ae6 100644
--- a/apps/web/src/components/TokenHolderList/TokenHolderListGalleryPreview.tsx
+++ b/apps/web/src/components/TokenHolderList/TokenHolderListGalleryPreview.tsx
@@ -3,7 +3,7 @@ import styled, { css, keyframes } from 'styled-components';
 
 import { Directions } from '~/components/core/enums';
 import colors from '~/shared/theme/colors';
-import { GOOGLE_CONTENT_IMG_URL } from '~/utils/regex';
+import { GOOGLE_CONTENT_IMG_URL } from '~/shared/utils/regex';
 
 const verticalOffset = [0, 130, 260];
 const horizontalOffset = [0, 90, 180];
diff --git a/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx b/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx
index 72824927e1..0b2c030f2a 100644
--- a/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx
+++ b/apps/web/src/components/WalletSelector/multichain/MagicLinkLogin.tsx
@@ -10,7 +10,7 @@ import { BaseM, TitleS } from '~/components/core/Text/Text';
 import { EmptyState } from '~/components/EmptyState/EmptyState';
 import { useTrackSignInSuccess } from '~/contexts/analytics/authUtil';
 import useMagicLogin from '~/hooks/useMagicLink';
-import { EMAIL_FORMAT } from '~/utils/regex';
+import { EMAIL_FORMAT } from '~/shared/utils/regex';
 
 import useLoginOrRedirectToOnboarding from '../mutations/useLoginOrRedirectToOnboarding';
 
diff --git a/apps/web/src/utils/formatUrl.ts b/apps/web/src/utils/formatUrl.ts
index eae30be09e..b3ad118b62 100644
--- a/apps/web/src/utils/formatUrl.ts
+++ b/apps/web/src/utils/formatUrl.ts
@@ -1,4 +1,4 @@
-import { VALID_URL } from './regex';
+import { VALID_URL } from '~/shared/utils/regex';
 
 export default function formatUrl(str: string): string {
   const unformattedStr = str.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
diff --git a/apps/web/src/utils/regex.test.tsx b/apps/web/src/utils/regex.test.tsx
index 1eb63a59d3..c623e0417d 100644
--- a/apps/web/src/utils/regex.test.tsx
+++ b/apps/web/src/utils/regex.test.tsx
@@ -1,4 +1,4 @@
-import { ALPHANUMERIC_UNDERSCORES, BREAK_LINES, VALID_URL } from './regex';
+import { ALPHANUMERIC_UNDERSCORES, BREAK_LINES, VALID_URL } from '~/shared/utils/regex';
 
 function testRegex(pattern: RegExp, values: string[], expectedValue: boolean) {
   for (const value of values) {
diff --git a/apps/web/src/utils/token.ts b/apps/web/src/utils/token.ts
index 24eec79b34..5b1c4a0c13 100644
--- a/apps/web/src/utils/token.ts
+++ b/apps/web/src/utils/token.ts
@@ -1,4 +1,4 @@
-import { GOOGLE_CONTENT_IMG_URL } from './regex';
+import { GOOGLE_CONTENT_IMG_URL } from '~/shared/utils/regex';
 
 type resizeImageUrlReturnType =
   | {
diff --git a/packages/shared/src/hooks/useAuthPayloadQuery.ts b/packages/shared/src/hooks/useAuthPayloadQuery.ts
new file mode 100644
index 0000000000..ad37471bd7
--- /dev/null
+++ b/packages/shared/src/hooks/useAuthPayloadQuery.ts
@@ -0,0 +1,21 @@
+type EoaPayloadVariables = {
+  authMechanismType: 'eoa' | 'gnosisSafe';
+  chain: 'Ethereum' | 'Tezos';
+  address: string;
+  nonce: string;
+  signature: string;
+  userFriendlyWalletName: string;
+};
+
+type GnosisPayloadVariables = {
+  authMechanismType: 'eoa' | 'gnosisSafe';
+  address: string;
+  nonce: string;
+  userFriendlyWalletName: string;
+};
+
+export type AuthPayloadVariables = EoaPayloadVariables | GnosisPayloadVariables;
+
+export function isEoaPayload(payload: AuthPayloadVariables): payload is EoaPayloadVariables {
+  return payload.authMechanismType === 'eoa';
+}
diff --git a/apps/web/src/hooks/api/users/useCreateUser.ts b/packages/shared/src/hooks/useCreateUser.ts
similarity index 97%
rename from apps/web/src/hooks/api/users/useCreateUser.ts
rename to packages/shared/src/hooks/useCreateUser.ts
index cf250c62aa..fdd1d184d4 100644
--- a/apps/web/src/hooks/api/users/useCreateUser.ts
+++ b/packages/shared/src/hooks/useCreateUser.ts
@@ -4,8 +4,8 @@ import { fetchQuery, graphql } from 'relay-runtime';
 
 import { useCreateUserMutation } from '~/generated/useCreateUserMutation.graphql';
 import { useCreateUserRefreshViewerQuery } from '~/generated/useCreateUserRefreshViewerQuery.graphql';
-import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
 
+import { usePromisifiedMutation } from '../relay/usePromisifiedMutation';
 import { AuthPayloadVariables, isEoaPayload } from './useAuthPayloadQuery';
 
 export default function useCreateUser() {
diff --git a/apps/web/src/hooks/api/users/useUpdateUser.ts b/packages/shared/src/hooks/useUpdateUser.ts
similarity index 94%
rename from apps/web/src/hooks/api/users/useUpdateUser.ts
rename to packages/shared/src/hooks/useUpdateUser.ts
index 24fdadb114..27dfeaee1c 100644
--- a/apps/web/src/hooks/api/users/useUpdateUser.ts
+++ b/packages/shared/src/hooks/useUpdateUser.ts
@@ -5,7 +5,10 @@ import {
   useUpdateUserMutation,
   useUpdateUserMutation$data,
 } from '~/generated/useUpdateUserMutation.graphql';
-import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
+
+import { usePromisifiedMutation } from '../relay/usePromisifiedMutation';
+
+export const BIO_MAX_CHAR_COUNT = 600;
 
 export default function useUpdateUser() {
   const [updateUser] = usePromisifiedMutation<useUpdateUserMutation>(
diff --git a/packages/shared/src/hooks/useUserInfoFormIsUsernameAvailableQuery.ts b/packages/shared/src/hooks/useUserInfoFormIsUsernameAvailableQuery.ts
new file mode 100644
index 0000000000..f039398089
--- /dev/null
+++ b/packages/shared/src/hooks/useUserInfoFormIsUsernameAvailableQuery.ts
@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
+
+import { useUserInfoFormIsUsernameAvailableQuery } from '~/generated/useUserInfoFormIsUsernameAvailableQuery.graphql';
+
+export function useIsUsernameAvailableFetcher() {
+  const relayEnvironment = useRelayEnvironment();
+
+  return useCallback(
+    async (username: string) => {
+      const response = await fetchQuery<useUserInfoFormIsUsernameAvailableQuery>(
+        relayEnvironment,
+        graphql`
+          query useUserInfoFormIsUsernameAvailableQuery($username: String!) {
+            user: userByUsername(username: $username) {
+              ... on ErrUserNotFound {
+                __typename
+              }
+            }
+          }
+        `,
+        { username }
+      ).toPromise();
+
+      if (response?.user?.__typename === 'ErrUserNotFound') {
+        return true;
+      }
+      return false;
+    },
+    [relayEnvironment]
+  );
+}
diff --git a/apps/web/src/utils/regex.ts b/packages/shared/src/utils/regex.ts
similarity index 100%
rename from apps/web/src/utils/regex.ts
rename to packages/shared/src/utils/regex.ts
diff --git a/apps/web/src/utils/validators.ts b/packages/shared/src/utils/validators.ts
similarity index 100%
rename from apps/web/src/utils/validators.ts
rename to packages/shared/src/utils/validators.ts