clean up

Author: deodad

apps/connect/src/routes/_remote/rpc/-frames/connect/WelcomeBack.tsx

@@ -1,13 +1,13 @@
 import { Button } from '#/ui/Button.js'
 import { Frame } from '#/ui/Frame.js'
 import { Identicon } from '#/ui/Identicon.js'
-import ChevronRight from '~icons/lucide/chevron-right'
 import Fingerprint from '~icons/lucide/fingerprint'
 import LogIn from '~icons/lucide/log-in'
+import UserPlus from '~icons/lucide/user-plus'
 
 /** Returning user with a connected wallet — sign in with existing passkey or switch account. */
 export function WelcomeBack(props: WelcomeBack.Props) {
-  const { address, error, host, label, loading, onContinue, onCreateNew, onSwitchAccount } = props
+  const { address, error, host, label, loading, onContinue, onCreateNew, onSignIn } = props
 
   return (
     <form
@@ -32,17 +32,12 @@ export function WelcomeBack(props: WelcomeBack.Props) {
         />
         <Frame.Footer>
           <div className="flex flex-col gap-4">
-            <button
-              className="flex h-[38px] w-full cursor-pointer items-center gap-3 rounded-lg bg-mute px-3 transition-colors hover:bg-mute-hover"
-              onClick={onSwitchAccount}
-              type="button"
-            >
+            <div className="flex h-[38px] w-full items-center gap-3 rounded-lg bg-mute px-3">
               {address && (
                 <Identicon address={address} className="size-6 shrink-0 rounded-full" size={24} />
               )}
               <p className="min-w-0 flex-1 truncate text-left text-label-13">{label}</p>
-              <ChevronRight className="size-4 shrink-0 text-foreground-secondary" />
-            </button>
+            </div>
             <Button
               loading={loading}
               prefix={<Fingerprint className="size-4" />}
@@ -52,12 +47,30 @@ export function WelcomeBack(props: WelcomeBack.Props) {
               Continue with passkey
             </Button>
             {error && <p className="text-label-13 text-red-9">{error}</p>}
+
+            <div className="flex items-center gap-3">
+              <div className="h-px flex-1 bg-border" />
+              <p className="text-label-12 text-foreground-secondary">or</p>
+              <div className="h-px flex-1 bg-border" />
+            </div>
+
+            <Button
+              onClick={onSignIn}
+              prefix={<Fingerprint className="size-4" />}
+              type="button"
+              variant="muted"
+            >
+              Sign in with another account
+            </Button>
             <button
               className="cursor-pointer text-label-13 text-foreground-secondary transition-colors hover:text-foreground"
               onClick={onCreateNew}
               type="button"
             >
-              Create another account
+              <span className="inline-flex items-center gap-1.5">
+                <UserPlus className="size-3.5" />
+                Create a new account
+              </span>
             </button>
           </div>
         </Frame.Footer>
@@ -78,11 +91,11 @@ export declare namespace WelcomeBack {
     label?: string | undefined
     /** Whether the passkey action is in progress. */
     loading?: boolean | undefined
-    /** Called when the user clicks "Continue with passkey". */
+    /** Called when the user clicks "Continue with passkey" for the displayed account. */
     onContinue?: (() => void) | undefined
-    /** Called when the user clicks "Create another account". */
+    /** Called when the user clicks "Create a new account". */
     onCreateNew?: (() => void) | undefined
-    /** Called when the user clicks the account row to switch. */
-    onSwitchAccount?: (() => void) | undefined
+    /** Called when the user clicks "Sign in with another account" — prompts all passkeys. */
+    onSignIn?: (() => void) | undefined
   }
 }

apps/connect/src/routes/_remote/rpc/wallet_connect.tsx

@@ -90,7 +90,7 @@ function WelcomeBack(props: { onSignUp: () => void; submit: Submit }) {
       loading={submit.isPending}
       onContinue={() => submit.mutate({})}
       onCreateNew={onSignUp}
-      onSwitchAccount={() => submit.mutate({ selectAccount: true })}
+      onSignIn={() => submit.mutate({ selectAccount: true })}
     />
   )
 }
@@ -105,7 +105,7 @@ function SignIn(props: { submit: Submit }) {
     <Frames.SignIn
       error={submit.error?.message}
       host={host}
-      onPasskey={() => submit.mutate({ method: 'login' })}
+      onPasskey={() => submit.mutate({ method: 'login', selectAccount: true })}
       onSubmit={(email) => submit.mutate({ method: 'register', name: email })}
       passkeyLoading={submit.isPending}
       registerLoading={submit.isPending}