loginUi: Add ChangeUsernameScene

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- added: `ChangeUsernameScene` and `ChangeUsernameScreen` components
+
 ## 3.27.1 (2025-05-28)
 
 - fixed: Fix PIN changes being blocked by duress mode PIN check.

src/components/navigation/Router.tsx

@@ -16,6 +16,7 @@ import {
   ResecurePinScene
 } from '../scenes/ChangePinScene'
 import { ChangeRecoveryScene } from '../scenes/existingAccout/ChangeRecoveryScene'
+import { ChangeUsernameScene } from '../scenes/existingAccout/ChangeUsernameScene'
 import { OtpRepairScene } from '../scenes/existingAccout/OtpRepairScene'
 import { SecurityAlertsScene } from '../scenes/existingAccout/SecurityAlertsScene'
 import { LandingScene } from '../scenes/LandingScene'
@@ -100,6 +101,8 @@ export function Router(props: Props) {
         return <UpgradeTosScene branding={props.branding} route={route} />
       case 'upgradeUsername':
         return <UpgradeUsernameScene branding={props.branding} route={route} />
+      case 'changeUsername':
+        return <ChangeUsernameScene branding={props.branding} route={route} />
     }
   }
 

src/components/publicApi/ChangeUsernameScreen.tsx

@@ -0,0 +1,53 @@
+import { EdgeAccount, EdgeContext } from 'edge-core-js'
+import * as React from 'react'
+
+import { Router } from '../navigation/Router'
+import { ReduxStore } from '../services/ReduxStore'
+import { asExperimentConfig, OnLogEvent, OnPerfEvent } from './publicTypes'
+
+interface Props {
+  account: EdgeAccount
+  context: EdgeContext
+  password: string
+  onComplete: () => void
+  onLogEvent?: OnLogEvent
+  onPerfEvent?: OnPerfEvent
+}
+
+/**
+ * A standalone screen for changing a username that can be mounted independently.
+ * This component handles the username availability check and completes immediately
+ * after username change.
+ */
+export function ChangeUsernameScreen(props: Props): JSX.Element {
+  const {
+    account,
+    context,
+    password,
+    onComplete,
+    onLogEvent,
+    onPerfEvent = () => {}
+  } = props
+
+  return (
+    <ReduxStore
+      imports={{
+        accountOptions: {},
+        context,
+        onComplete,
+        onLogEvent,
+        onPerfEvent,
+        experimentConfig: asExperimentConfig({})
+      }}
+      initialAction={{
+        type: 'NAVIGATE',
+        data: {
+          name: 'changeUsername',
+          params: { account, password }
+        }
+      }}
+    >
+      <Router branding={{}} />
+    </ReduxStore>
+  )
+}

src/components/scenes/existingAccout/ChangeUsernameScene.tsx

@@ -0,0 +1,40 @@
+import { EdgeAccount } from 'edge-core-js'
+import * as React from 'react'
+
+import { useHandler } from '../../../hooks/useHandler'
+import { useImports } from '../../../hooks/useImports'
+import { Branding } from '../../../types/Branding'
+import { SceneProps } from '../../../types/routerTypes'
+import { ChangeUsernameComponent } from '../newAccount/NewAccountUsernameScene'
+
+export interface ChangeUsernameParams {
+  account: EdgeAccount
+  password: string
+}
+
+interface ChangeUsernameProps extends SceneProps<'changeUsername'> {
+  branding: Branding
+}
+
+/**
+ * The standalone username change scene that completes immediately.
+ */
+export const ChangeUsernameScene = (props: ChangeUsernameProps) => {
+  const { branding, route } = props
+  const { onComplete = () => {} } = useImports()
+  const account: EdgeAccount = route.params.account
+  const password = route.params.password
+
+  const handleNext = useHandler(async (newUsername: string) => {
+    await account.changeUsername({ username: newUsername, password })
+    onComplete()
+  })
+
+  return (
+    <ChangeUsernameComponent
+      initUsername={account.username ?? ''}
+      branding={branding}
+      onNext={handleNext}
+    />
+  )
+}

src/components/scenes/newAccount/NewAccountUsernameScene.tsx

@@ -40,12 +40,13 @@ type Timeout = ReturnType<typeof setTimeout>
 interface Props {
   branding: Branding
   initUsername?: string
+  title?: string
   onBack?: () => void
   onNext: (username: string) => void | Promise<void>
 }
 
 export const ChangeUsernameComponent = (props: Props) => {
-  const { branding, initUsername, onBack, onNext } = props
+  const { branding, initUsername, title, onBack, onNext } = props
   const { context } = useImports()
   const theme = useTheme()
   const styles = getStyles(theme)
@@ -119,11 +120,8 @@ export const ChangeUsernameComponent = (props: Props) => {
     timerId != null ||
     username.length === 0
 
-  const handleBack = useHandler(() => {
-    if (onBack != null) onBack()
-  })
   const handleNext = useHandler(async () => {
-    if (!isNextDisabled) onNext(username)
+    if (!isNextDisabled) await onNext(username)
   })
 
   const handleChangeText = useHandler(async (text: string) => {
@@ -200,7 +198,7 @@ export const ChangeUsernameComponent = (props: Props) => {
   })
 
   return (
-    <ThemedScene onBack={handleBack} title={lstrings.choose_title_username}>
+    <ThemedScene onBack={onBack} title={title}>
       <KeyboardAwareScrollView
         contentContainerStyle={[styles.mainScrollView, keyboardPadding]}
         keyboardShouldPersistTaps="handled"
@@ -306,6 +304,7 @@ export const NewAccountUsernameScene = (props: NewAccountUsernameProps) => {
   return (
     <ChangeUsernameComponent
       initUsername={route.params.username}
+      title={lstrings.choose_title_username}
       branding={branding}
       onBack={handleBack}
       onNext={handleNext}
@@ -338,6 +337,7 @@ export const UpgradeUsernameScene = (props: UpgradeUsernameProps) => {
   return (
     <ChangeUsernameComponent
       initUsername=""
+      title={lstrings.choose_title_username}
       branding={branding}
       onBack={onComplete}
       onNext={handleNext}

src/index.ts

@@ -7,6 +7,7 @@ import './util/androidFetch'
 export { LoginUiProvider } from './components/publicApi/LoginUiProvider'
 export { ChangePasswordScreen } from './components/publicApi/ChangePasswordScreen'
 export { ChangePinScreen } from './components/publicApi/ChangePinScreen'
+export { ChangeUsernameScreen } from './components/publicApi/ChangeUsernameScreen'
 export { UpgradeUsernameScreen } from './components/publicApi/UpgradeUsernameScreen'
 export { PasswordRecoveryScreen } from './components/publicApi/ChangeRecoveryScreen'
 export { LoginScreen } from './components/publicApi/LoginScreen'

src/types/routerTypes.ts

@@ -10,6 +10,7 @@ import {
   ResecurePinParams
 } from '../components/scenes/ChangePinScene'
 import { ChangeRecoveryParams } from '../components/scenes/existingAccout/ChangeRecoveryScene'
+import { ChangeUsernameParams } from '../components/scenes/existingAccout/ChangeUsernameScene'
 import { OtpRepairParams } from '../components/scenes/existingAccout/OtpRepairScene'
 import { SecurityAlertParams } from '../components/scenes/existingAccout/SecurityAlertsScene'
 import {
@@ -34,6 +35,7 @@ import { RecoveryLoginParams } from '../components/scenes/RecoveryLoginScene'
  * Defines the acceptable route parameters for each scene key.
  */
 export interface LoginParamList {
+  changeUsername: ChangeUsernameParams
   changePassword: ChangePasswordParams
   changePin: ChangePinParams
   changeRecovery: ChangeRecoveryParams