Usernames: Create/update/delete in profile editor

ts/state/smart/GlobalModalContainer.tsx

@@ -12,10 +12,8 @@ import { SmartSafetyNumberModal } from './SafetyNumberModal';
 
 import { getIntl } from '../selectors/user';
 
-const FilteredSmartProfileEditorModal = SmartProfileEditorModal;
-
 function renderProfileEditor(): JSX.Element {
-  return <FilteredSmartProfileEditorModal />;
+  return <SmartProfileEditorModal />;
 }
 
 function renderContactModal(): JSX.Element {

ts/state/smart/LeftPane.tsx

@@ -10,7 +10,7 @@ import { LeftPane, LeftPaneMode } from '../../components/LeftPane';
 import type { StateType } from '../reducer';
 import { missingCaseError } from '../../util/missingCaseError';
 
-import { ComposerStep, OneTimeModalState } from '../ducks/conversations';
+import { ComposerStep, OneTimeModalState } from '../ducks/conversationsEnums';
 import {
   getIsSearchingInAConversation,
   getQuery,
@@ -53,8 +53,6 @@ import { SmartRelinkDialog } from './RelinkDialog';
 import { SmartUpdateDialog } from './UpdateDialog';
 import { SmartCaptchaDialog } from './CaptchaDialog';
 
-const FilteredSmartMessageSearchResult = SmartMessageSearchResult;
-
 function renderExpiredBuildDialog(
   props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
 ): JSX.Element {
@@ -64,7 +62,7 @@ function renderMainHeader(): JSX.Element {
   return <SmartMainHeader />;
 }
 function renderMessageSearchResult(id: string): JSX.Element {
-  return <FilteredSmartMessageSearchResult id={id} />;
+  return <SmartMessageSearchResult id={id} />;
 }
 function renderNetworkStatus(
   props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>

ts/state/smart/ProfileEditorModal.ts

@@ -8,8 +8,8 @@ import { ProfileEditorModal } from '../../components/ProfileEditorModal';
 import type { PropsDataType } from '../../components/ProfileEditor';
 import type { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
-import { getEmojiSkinTone } from '../selectors/items';
-import { getMe } from '../selectors/conversations';
+import { getEmojiSkinTone, getUsernamesEnabled } from '../selectors/items';
+import { getMe, getUsernameSaveState } from '../selectors/conversations';
 import { selectRecentEmojis } from '../selectors/emojis';
 
 function mapStateToProps(
@@ -25,9 +25,11 @@ function mapStateToProps(
     firstName,
     familyName,
     id: conversationId,
+    username,
   } = getMe(state);
   const recentEmojis = selectRecentEmojis(state);
   const skinTone = getEmojiSkinTone(state);
+  const isUsernameFlagEnabled = getUsernamesEnabled(state);
 
   return {
     aboutEmoji,
@@ -39,9 +41,12 @@ function mapStateToProps(
     firstName: String(firstName),
     hasError: state.globalModals.profileEditorHasError,
     i18n: getIntl(state),
+    isUsernameFlagEnabled,
     recentEmojis,
     skinTone,
     userAvatarData,
+    username,
+    usernameSaveState: getUsernameSaveState(state),
   };
 }
 

ts/state/smart/TimelineItem.tsx

@@ -27,10 +27,8 @@ type ExternalProps = {
   previousMessageId: undefined | string;
 };
 
-const FilteredSmartContactName = SmartContactName;
-
 function renderContact(conversationId: string): JSX.Element {
-  return <FilteredSmartContactName conversationId={conversationId} />;
+  return <SmartContactName conversationId={conversationId} />;
 }
 
 function renderUniversalTimerNotification(): JSX.Element {