Use privy auth mechanism, improve email validation UI

apps/mobile/src/screens/Login/Onboarding2FAScreen.tsx

@@ -83,15 +83,18 @@ function InnerOnboardingEmailScreen() {
             authMethod: 'Privy',
             authMechanism: {
               authMechanismType: 'privy',
-              token,
+              privyToken: token,
             },
             email,
           });
         }
         if (authMethod === 'Wallet' || authMethod === 'Farcaster') {
           navigation.navigate('OnboardingUsername', {
             authMethod,
-            authMechanism,
+            authMechanism: {
+              ...authMechanism,
+              privyToken: token,
+            },
             email,
           });
         }

apps/mobile/src/screens/Login/OnboardingEmailScreen.tsx

@@ -191,6 +191,11 @@ function InnerOnboardingEmailScreen() {
           onChange={(e) => handleEmailChange(e.nativeEvent.text)}
         />
         <View className="space-y-4 w-full">
+          {/* This suspense boundary is needed as the SubmitEmailButton makes
+              a lazy request to the server upon each character input to
+              check whether the email address is available. We leave the
+              variant `disabled` to prevent it from flashing to primary
+              when the fallback is revealed. */}
           <Suspense
             fallback={
               <Button
@@ -199,6 +204,7 @@ function InnerOnboardingEmailScreen() {
                 eventContext={contexts.Onboarding}
                 className="w-full"
                 text="Next"
+                variant="disabled"
               />
             }
           >

apps/mobile/src/screens/Onboarding/OnboardingUsernameScreen.tsx

@@ -15,7 +15,7 @@ import { OnboardingUsernameScreenQuery } from '~/generated/OnboardingUsernameScr
 import { LoginStackNavigatorParamList, LoginStackNavigatorProp } from '~/navigation/types';
 import { contexts } from '~/shared/analytics/constants';
 import { useReportError } from '~/shared/contexts/ErrorReportingContext';
-import useCreateUser, { getAuthMechanismFromAuthPayload } from '~/shared/hooks/useCreateUser';
+import useCreateUser from '~/shared/hooks/useCreateUser';
 import useDebounce from '~/shared/hooks/useDebounce';
 import useUpdateEmail from '~/shared/hooks/useUpdateEmail';
 import useUpdateUser from '~/shared/hooks/useUpdateUser';
@@ -135,9 +135,16 @@ function InnerOnboardingUsernameScreen() {
 
         const result = await updateEmail({
           email,
-          authMechanism: getAuthMechanismFromAuthPayload(authMechanism),
+          authMechanism: {
+            privy: {
+              token: authMechanism.privyToken!,
+            },
+          },
         });
 
+        // eslint-disable-next-line no-console
+        console.log('updateEmailResult', result);
+
         if (result.updateEmail?.__typename !== 'UpdateEmailPayload') {
           throw new Error(
             `Update email after create user failed on mobile due to ${result.updateEmail?.__typename}`

packages/shared/src/hooks/useAuthPayloadQuery.ts

@@ -10,40 +10,44 @@ export type EoaPayloadVariables = {
   chain: 'Ethereum' | 'Tezos';
   userFriendlyWalletName: string;
   email?: string;
+  privyToken?: string;
 } & SignerVariables;
 
 export type GnosisPayloadVariables = {
   authMechanismType: 'eoa' | 'gnosisSafe';
   userFriendlyWalletName: string;
   email?: string;
+  privyToken?: string;
 } & SignerVariables;
 
-export type EmailPayloadVariables = {
+export type PrivyPayloadVariables = {
   authMechanismType: 'privy';
-  token?: string;
+  privyToken?: string;
 };
 
 type DeprecatedWebEmailPayloadVariables = {
   authMechanismType: 'magicLink';
   token: string;
+  privyToken?: string;
 };
 
 export type NeynarPayloadVariables = {
   authMechanismType: 'neynar';
   primaryAddress?: string;
+  privyToken?: string;
 } & SignerVariables;
 
 export type AuthPayloadVariables =
   | EoaPayloadVariables
   | GnosisPayloadVariables
-  | EmailPayloadVariables
+  | PrivyPayloadVariables
   | DeprecatedWebEmailPayloadVariables
   | NeynarPayloadVariables;
 
 export function isEoaPayload(payload: AuthPayloadVariables): payload is EoaPayloadVariables {
   return payload.authMechanismType === 'eoa';
 }
 
-export function isEmailPayload(payload: AuthPayloadVariables): payload is EmailPayloadVariables {
+export function isEmailPayload(payload: AuthPayloadVariables): payload is PrivyPayloadVariables {
   return payload.authMechanismType === 'privy';
 }

packages/shared/src/hooks/useCreateUser.ts

@@ -166,10 +166,10 @@ export function getAuthMechanismFromAuthPayload(authPayloadVariables: AuthPayloa
       },
     };
   } else if (isEmailPayload(authPayloadVariables)) {
-    const { token } = authPayloadVariables;
+    const { privyToken } = authPayloadVariables;
     authMechanism = {
       privy: {
-        token: token!,
+        token: privyToken!,
       },
     };
   } else if (authPayloadVariables.authMechanismType === 'gnosisSafe') {