diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js --- a/web/settings/password-change-modal.js +++ b/web/settings/password-change-modal.js @@ -8,11 +8,9 @@ changeUserPassword, } from 'lib/actions/user-actions'; import { useModalContext } from 'lib/components/modal-provider.react'; +import { useStringForUser } from 'lib/hooks/ens-cache'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; -import { - type PasswordUpdate, - type CurrentUserInfo, -} from 'lib/types/user-types'; +import { type PasswordUpdate } from 'lib/types/user-types'; import { type DispatchActionPromise, useDispatchActionPromise, @@ -26,11 +24,11 @@ import css from './password-change-modal.css'; type Props = { - +currentUserInfo: ?CurrentUserInfo, +inputDisabled: boolean, +dispatchActionPromise: DispatchActionPromise, +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise, +popModal: () => void, + +stringForUser: ?string, }; type State = { +newPassword: string, @@ -58,12 +56,6 @@ this.newPasswordInput.focus(); } - get username() { - return this.props.currentUserInfo && !this.props.currentUserInfo.anonymous - ? this.props.currentUserInfo.username - : undefined; - } - render() { let errorMsg; if (this.state.errorMessage) { @@ -80,7 +72,9 @@

{'Logged in as '} - {this.username} + + {this.props.stringForUser} +

= React.memo<{}>( function ConnectedPasswordChangeModal(): React.Node { - const currentUserInfo = useSelector(state => state.currentUserInfo); const inputDisabled = useSelector( state => changeUserPasswordLoadingStatusSelector(state) === 'loading', ); @@ -251,13 +244,16 @@ const modalContext = useModalContext(); + const currentUserInfo = useSelector(state => state.currentUserInfo); + const stringForUser = useStringForUser(currentUserInfo); + return ( ); },