feat: start of using updateOurProfileDisplayName in onboarding

ts/components/registration/stages/CreateAccount.tsx

@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
 import { SettingsKey } from '../../../data/settings-key';
 import { mnDecode } from '../../../session/crypto/mnemonic';
+import { ProfileManager } from '../../../session/profile_manager/ProfileManager';
 import { StringUtils } from '../../../session/utils';
 import { fromHex } from '../../../session/utils/String';
 import { trigger } from '../../../shims/events';
@@ -12,11 +13,13 @@ import {
   setDisplayName,
   setDisplayNameError,
   setHexGeneratedPubKey,
+  setPrivateKeyBytes,
   setRecoveryPassword,
 } from '../../../state/onboarding/ducks/registration';
 import {
   useDisplayName,
   useDisplayNameError,
+  useOnboardPrivateKeyBytes,
   useRecoveryPassword,
 } from '../../../state/onboarding/selectors/registration';
 import {
@@ -25,6 +28,7 @@ import {
   sessionGenerateKeyPair,
 } from '../../../util/accountManager';
 import { Storage, setSignWithRecoveryPhrase } from '../../../util/storage';
+import { UserConfigWrapperActions } from '../../../webworker/workers/browser/libsession_worker_interface';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
 import { SessionInput } from '../../inputs';
@@ -55,6 +59,7 @@ async function signUp(signUpDetails: AccountDetails) {
 }
 
 export const CreateAccount = () => {
+  const privateKeyBytes = useOnboardPrivateKeyBytes();
   const recoveryPassword = useRecoveryPassword();
   const displayName = useDisplayName();
   const displayNameError = useDisplayNameError();
@@ -77,6 +82,7 @@ export const CreateAccount = () => {
       const newHexPubKey = StringUtils.decode(keyPair.pubKey, 'hex');
 
       dispatch(setRecoveryPassword(mnemonic));
+      dispatch(setPrivateKeyBytes(keyPair.ed25519KeyPair.privateKey));
       dispatch(setHexGeneratedPubKey(newHexPubKey)); // our 'frontend' account ID
     }
   };
@@ -91,18 +97,35 @@ export const CreateAccount = () => {
     }
 
     try {
+      if (!privateKeyBytes) {
+        throw new Error('Private key not found');
+      }
+      // validate display name using libsession
+      // eslint-disable-next-line max-len
+      // TODO [libsession validation] if we try and use a different display name after entering one that is already too long we get an error because the user config has been initialised. I call .free() in the finally but that doesn't help
+      await UserConfigWrapperActions.init(privateKeyBytes, null);
+
+      const validName = await ProfileManager.updateOurProfileDisplayName(displayName, true);
+
       await signUp({
-        displayName,
+        displayName: validName,
         recoveryPassword,
       });
 
       dispatch(setAccountCreationStep(AccountCreation.Done));
-    } catch (e) {
+    } catch (err) {
+      let errorString = err.message || String(err);
+      // Note error substring is taken from libsession-util
+      if (err.message && err.message.includes('exceeds maximum length')) {
+        errorString = window.i18n('displayNameTooLong');
+      }
       window.log.error(
-        `[onboarding] create account: signUpWithDetails failed! Error: ${e.message || e}`
+        `[onboarding] create account: signUpWithDetails failed! Error: ${errorString}`
       );
       dispatch(setAccountCreationStep(AccountCreation.DisplayName));
-      dispatch(setDisplayNameError(e.message || String(e)));
+      dispatch(setDisplayNameError(errorString));
+    } finally {
+      await UserConfigWrapperActions.free();
     }
   };
 

ts/components/registration/stages/RestoreAccount.tsx

@@ -3,6 +3,7 @@ import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 import { ONBOARDING_TIMES } from '../../../session/constants';
 import { InvalidWordsError, NotEnoughWordsError } from '../../../session/crypto/mnemonic';
+import { ProfileManager } from '../../../session/profile_manager/ProfileManager';
 import { PromiseUtils } from '../../../session/utils';
 import { TaskTimedOutError } from '../../../session/utils/Promise';
 import { NotFoundError } from '../../../session/utils/errors';
@@ -175,17 +176,26 @@ export const RestoreAccount = () => {
     }
 
     try {
+      // validate display name using libsession
+      // TODO [libsession validation] once you have it working in CreateAccount.tsx you will need to do it here
+      const validName = await ProfileManager.updateOurProfileDisplayName(displayName, true);
+
       await signInWithNewDisplayName({
-        displayName,
+        displayName: validName,
         recoveryPassword,
         dispatch,
       });
-    } catch (e) {
+    } catch (err) {
+      let errorString = err.message || String(err);
+      // Note error substring is taken from libsession-util
+      if (err.message && err.message.includes('exceeds maximum length')) {
+        errorString = window.i18n('displayNameTooLong');
+      }
       window.log.error(
-        `[onboarding] restore account: Failed with new display name! Error: ${e.message || e}`
+        `[onboarding] restore account: Failed with new display name! Error: ${errorString}`
       );
       dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
-      dispatch(setDisplayNameError(e.message || String(e)));
+      dispatch(setDisplayNameError(errorString));
     }
   };
 

ts/state/onboarding/ducks/registration.ts

@@ -41,6 +41,7 @@ export type OnboardingState = {
   progress: number;
   recoveryPassword: string;
   recoveryPasswordError: string | undefined;
+  privateKeyBytes: Uint8Array | undefined;
   hexGeneratedPubKey: string;
   displayName: string;
   displayNameError: string | undefined;
@@ -54,6 +55,7 @@ const initialState: OnboardingState = {
   progress: 0,
   recoveryPassword: '',
   recoveryPasswordError: undefined,
+  privateKeyBytes: undefined,
   hexGeneratedPubKey: '',
   displayName: '',
   displayNameError: undefined,
@@ -90,6 +92,9 @@ export const registrationSlice = createSlice({
     setHexGeneratedPubKey(state, action: PayloadAction<string>) {
       return { ...state, hexGeneratedPubKey: action.payload };
     },
+    setPrivateKeyBytes(state, action: PayloadAction<Uint8Array>) {
+      return { ...state, privateKeyBytes: action.payload };
+    },
     setDisplayName(state, action: PayloadAction<string>) {
       return { ...state, displayName: action.payload };
     },
@@ -109,6 +114,7 @@ export const {
   setRecoveryPassword,
   setRecoveryPasswordError,
   setHexGeneratedPubKey,
+  setPrivateKeyBytes,
   setDisplayName,
   setDisplayNameError,
 } = registrationSlice.actions;

ts/state/onboarding/selectors/registration.ts

@@ -54,6 +54,11 @@ const getHexGeneratedPubKey = createSelector(
   (state: OnboardingState): string => state.hexGeneratedPubKey
 );
 
+const getPrivateKeyBytes = createSelector(
+  getRegistration,
+  (state: OnboardingState): Uint8Array | undefined => state.privateKeyBytes
+);
+
 const getDisplayName = createSelector(
   getRegistration,
   (state: OnboardingState): string => state.displayName
@@ -98,6 +103,10 @@ export const useOnboardHexGeneratedPubKey = () => {
   return useSelector(getHexGeneratedPubKey);
 };
 
+export const useOnboardPrivateKeyBytes = () => {
+  return useSelector(getPrivateKeyBytes);
+};
+
 export const useDisplayName = () => {
   return useSelector(getDisplayName);
 };