Updated POC

Added nicer flow for users to 'test'

Created helpers
Cleaned up file names

components/Onboarding/init-xmtp-client.ts

@@ -1,4 +1,3 @@
-import { Signer } from "ethers";
 import { Alert } from "react-native";
 
 // import { invalidateProfileSocialsQuery } from "../../data/helpers/profiles/profilesUpdate";
@@ -13,8 +12,13 @@ import { awaitableAlert } from "../../utils/alert";
 import logger from "../../utils/logger";
 import { logoutAccount, waitForLogoutTasksDone } from "../../utils/logout";
 import { sentryTrackMessage } from "../../utils/sentry";
-import { createXmtpClientFromSigner } from "../../utils/xmtpRN/signIn";
+import {
+  createXmtpClientFromSigner,
+  createXmtpClientFromViemAccount,
+} from "../../utils/xmtpRN/signIn";
 import { getXmtpClient } from "../../utils/xmtpRN/sync";
+import { Signer } from "ethers";
+import { LocalAccount } from "viem/accounts";
 
 export async function initXmtpClient(args: {
   signer: Signer;
@@ -49,6 +53,39 @@ export async function initXmtpClient(args: {
   }
 }
 
+export async function initXmtpClientFromViemAccount(args: {
+  account: LocalAccount;
+  address: string;
+  privyAccountId?: string;
+  isEphemeral?: boolean;
+  pkPath?: string;
+}) {
+  const { account, address, ...restArgs } = args;
+
+  if (!account || !address) {
+    throw new Error("No signer or address");
+  }
+
+  try {
+    await createXmtpClientFromViemAccount(account, async () => {
+      await awaitableAlert(
+        translate("current_installation_revoked"),
+        translate("current_installation_revoked_description")
+      );
+      throw new Error("Current installation revoked");
+    });
+
+    await connectWithAddress({
+      address,
+      ...restArgs,
+    });
+  } catch (e) {
+    await logoutAccount(address, false, true, () => {});
+    logger.error(e);
+    throw e;
+  }
+}
+
 type IBaseArgs = {
   address: string;
 };

features/conversation/conversation.nav.tsx

@@ -24,7 +24,7 @@ export function ConversationNav() {
       options={{
         title: "",
         headerBackTitle: "",
-        headerBackVisible: false,
+        // headerBackVisible: false,
       }}
       name="Conversation"
       component={ConversationScreen}

features/embedded-wallets/turnkey-embedded-wallet.ts

@@ -1,4 +1,4 @@
-import { onPasskeyCreate } from "@/utils/passkeys/createPasskey";
+import { onPasskeyCreate } from "@/utils/passkeys/create-passkey";
 import { IEmbeddedWallet } from "./embedded-wallet.interface";
 import { Client } from "@xmtp/react-native-sdk";
 import { LocalAccount } from "viem/accounts";

features/onboarding/passkey/passkeyAuthStore.tsx

@@ -1,12 +1,24 @@
 import { createContext, memo, useContext, useRef } from "react";
 import { createStore, useStore } from "zustand";
+import { LocalAccount } from "viem/accounts";
+import { TurnkeyStoreInfo } from "@/utils/passkeys/passkeys.interfaces";
 
 type IPasskeyAuthStoreProps = {
-  loading: boolean;
+  loading?: boolean;
+  error?: string;
+  statusString?: string;
+  account?: LocalAccount;
+  turnkeyInfo?: TurnkeyStoreInfo;
+  previousPasskeyName?: string;
 };
 
 type IPasskeyAuthStoreState = IPasskeyAuthStoreProps & {
   setLoading: (loading: boolean) => void;
+  setError: (error: string | undefined) => void;
+  setStatusString: (statusString: string | undefined) => void;
+  setAccount: (account: LocalAccount | undefined) => void;
+  setTurnkeyInfo: (turnkeyInfo: TurnkeyStoreInfo | undefined) => void;
+  setPreviousPasskeyName: (previousPasskeyName: string | undefined) => void;
   reset: () => void;
 };
 
@@ -34,11 +46,23 @@ export const PasskeyAuthStoreProvider = memo(
 const createPasskeyAuthStore = (initProps: IPasskeyAuthStoreProps) => {
   const DEFAULT_PROPS: IPasskeyAuthStoreProps = {
     loading: false,
+    error: undefined,
+    statusString: undefined,
+    account: undefined,
+    turnkeyInfo: undefined,
+    previousPasskeyName: undefined,
   };
   return createStore<IPasskeyAuthStoreState>()((set) => ({
     ...DEFAULT_PROPS,
     ...initProps,
-    setLoading: (loading) => set({ loading }),
+    setLoading: (loading) =>
+      loading ? set({ loading, error: undefined }) : set({ loading: false }),
+    setError: (error) => set({ error, statusString: undefined }),
+    setStatusString: (statusString) => set({ statusString }),
+    setAccount: (account) => set({ account }),
+    setTurnkeyInfo: (turnkeyInfo) => set({ turnkeyInfo }),
+    setPreviousPasskeyName: (previousPasskeyName) =>
+      set({ previousPasskeyName }),
     reset: () => set(DEFAULT_PROPS),
   }));
 };

i18n/translations/en.ts

@@ -54,6 +54,7 @@ export const en = {
   },
   passkey: {
     title: "Create Passkey",
+    add_account_title: "Add account by passkey",
     subtitle: "Create a passkey to connect to Converse",
     createButton: "Create Passkey",
   },

navigation/OnboardingNavigator.tsx

@@ -5,7 +5,7 @@ import { useColorScheme } from "react-native";
 import { authScreensSharedScreenOptions } from "../screens/Navigation/Navigation";
 import { stackGroupScreenOptions } from "../screens/Navigation/navHelpers";
 import { OnboardingConnectWalletScreen } from "../screens/Onboarding/OnboardingConnectWalletScreen";
-import { OnboardingEphemeraScreen } from "../screens/Onboarding/OnboardingEphemeraScreen";
+import { OnboardingEphemeralScreen } from "../screens/Onboarding/OnboardingEphemeralScreen";
 import { OnboardingGetStartedScreen } from "../screens/Onboarding/OnboardingGetStartedScreen";
 import { OnboardingNotificationsScreen } from "../screens/Onboarding/OnboardingNotificationsScreen";
 import { OnboardingPrivateKeyScreen } from "../screens/Onboarding/OnboardingPrivateKeyScreen";
@@ -76,7 +76,7 @@ export const OnboardingNavigator = memo(function OnboardingNavigator() {
         />
         <OnboardingNativeStack.Screen
           name="OnboardingEphemeral"
-          component={OnboardingEphemeraScreen}
+          component={OnboardingEphemeralScreen}
         />
       </OnboardingNativeStack.Group>
     </OnboardingNativeStack.Navigator>

screens/Navigation/Navigation.tsx

@@ -10,13 +10,13 @@ import { useRouter } from "../../navigation/useNavigation";
 import Accounts from "../Accounts/Accounts";
 import { IdleScreen } from "../IdleScreen";
 import { NewAccountConnectWalletScreen } from "../NewAccount/NewAccountConnectWalletScreen";
-import { NewAccountEphemeraScreen } from "../NewAccount/NewAccountEphemeraScreen";
+import { NewAccountEphemeralScreen } from "../NewAccount/NewAccountEphemeralScreen";
 import { NewAccountPrivateKeyScreen } from "../NewAccount/NewAccountPrivateKeyScreen";
 import { NewAccountPrivyScreen } from "../NewAccount/NewAccountPrivyScreen";
 import { NewAccountScreen } from "../NewAccount/NewAccountScreen";
 import { NewAccountUserProfileScreen } from "../NewAccount/NewAccountUserProfileScreen";
 import { OnboardingConnectWalletScreen } from "../Onboarding/OnboardingConnectWalletScreen";
-import { OnboardingEphemeraScreen } from "../Onboarding/OnboardingEphemeraScreen";
+import { OnboardingEphemeralScreen } from "../Onboarding/OnboardingEphemeralScreen";
 import { OnboardingGetStartedScreen } from "../Onboarding/OnboardingGetStartedScreen";
 import { OnboardingNotificationsScreen } from "../Onboarding/OnboardingNotificationsScreen";
 import { OnboardingPrivateKeyScreen } from "../Onboarding/OnboardingPrivateKeyScreen";
@@ -47,6 +47,7 @@ import WebviewPreviewNav, {
 } from "./WebviewPreviewNav";
 import { translate } from "@/i18n";
 import { OnboardingPasskeyScreen } from "../Onboarding/OnboardingPasskeyScreen";
+import { NewAccountPasskeyScreen } from "../NewAccount/NewAccountPasskeyScreen";
 
 export type NavigationParamList = {
   Idle: undefined;
@@ -72,7 +73,7 @@ export type NavigationParamList = {
   NewAccountPrivy: undefined;
   NewAccountPrivateKey: undefined;
   NewAccountEphemera: undefined;
-
+  NewAccountPasskey: undefined;
   // Main
   Accounts: undefined;
   Blocked: undefined;
@@ -99,7 +100,7 @@ export type NavigationParamList = {
 export const authScreensSharedScreenOptions: NativeStackNavigationOptions = {
   headerTitle: "",
   headerBackTitle: translate("back"),
-  headerBackVisible: false,
+  // headerBackVisible: false,
   headerShadowVisible: false,
 };
 
@@ -237,7 +238,7 @@ export function SignedOutNavigation() {
           />
           <NativeStack.Screen
             name="OnboardingEphemeral"
-            component={OnboardingEphemeraScreen}
+            component={OnboardingEphemeralScreen}
           />
         </NativeStack.Group>
       </NativeStack.Group>
@@ -291,7 +292,11 @@ const NewAccountNavigator = memo(function NewAccountNavigator() {
         />
         <NewAccountStack.Screen
           name="NewAccountEphemera"
-          component={NewAccountEphemeraScreen}
+          component={NewAccountEphemeralScreen}
+        />
+        <NewAccountStack.Screen
+          name="NewAccountPasskey"
+          component={NewAccountPasskeyScreen}
         />
       </NewAccountStack.Group>
     </NewAccountStack.Navigator>

screens/NewAccount/NewAccountEphemeraScreen.tsx → screens/NewAccount/NewAccountEphemeralScreen.tsx

@@ -18,7 +18,7 @@ import { sentryTrackError } from "../../utils/sentry";
 import { NavigationParamList } from "../Navigation/Navigation";
 import { isMissingConverseProfile } from "../Onboarding/Onboarding.utils";
 
-export function NewAccountEphemeraScreen(
+export function NewAccountEphemeralScreen(
   props: NativeStackScreenProps<NavigationParamList, "NewAccountEphemera">
 ) {
   const router = useRouter();