feat: improved error messaging when starting a new message

ts/components/inputs/SessionInput.tsx

@@ -229,6 +229,10 @@ export const SessionInput = (props: Props) => {
     },
     onKeyDown: (event: KeyboardEvent) => {
       if (event.key === 'Enter' && onEnterPressed) {
+        if (isSpecial && event.shiftKey) {
+          return;
+        }
+        event.preventDefault();
         onEnterPressed(inputValue);
         setErrorString('');
       }

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -13,6 +13,7 @@ import { SessionButton } from '../../basic/SessionButton';
 import { SessionSpinner } from '../../loading';
 
 import { ONSResolve } from '../../../session/apis/snode_api/onsResolve';
+import { NotFoundError, SnodeResponseError } from '../../../session/utils/errors';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerMD } from '../../basic/Text';
 import { YourSessionIDPill, YourSessionIDSelectable } from '../../basic/YourSessionIDPill';
@@ -28,6 +29,21 @@ const SessionIDDescription = styled.div`
   text-align: center;
 `;
 
+const StyledLeftPaneOverlay = styled(Flex)`
+  background: var(--background-primary-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: var(--margins-md);
+
+  .session-button {
+    min-width: 160px;
+    width: fit-content;
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+    flex-shrink: 0;
+  }
+`;
+
 function copyOurSessionID() {
   const ourSessionId = UserUtils.getOurPubKeyStrFromCache();
   if (!ourSessionId) {
@@ -46,11 +62,9 @@ export const OverlayMessage = () => {
 
   useKey('Escape', closeOverlay);
   const [pubkeyOrOns, setPubkeyOrOns] = useState('');
+  const [pubkeyOrOnsError, setPubkeyOrOnsError] = useState<string | undefined>(undefined);
   const [loading, setLoading] = useState(false);
 
-  const buttonText = window.i18n('next');
-  const placeholder = window.i18n('accountIdOrOnsEnter');
-
   const disableNextButton = !pubkeyOrOns || loading;
 
   async function openConvoOnceResolved(resolvedSessionID: string) {
@@ -76,41 +90,65 @@ export const OverlayMessage = () => {
   }
 
   async function handleMessageButtonClick() {
+    setPubkeyOrOnsError(undefined);
+
     if ((!pubkeyOrOns && !pubkeyOrOns.length) || !pubkeyOrOns.trim().length) {
-      ToastUtils.pushToastError('invalidPubKey', window.i18n('onsErrorNotRecognised')); // or ons name
+      setPubkeyOrOnsError(window.i18n('accountIdErrorInvalid'));
       return;
     }
+
     const pubkeyorOnsTrimmed = pubkeyOrOns.trim();
+    const validationError = PubKey.validateWithErrorNoBlinding(pubkeyorOnsTrimmed);
 
-    if (!PubKey.validateWithErrorNoBlinding(pubkeyorOnsTrimmed)) {
+    if (!validationError) {
       await openConvoOnceResolved(pubkeyorOnsTrimmed);
       return;
     }
 
+    const isPubkey = PubKey.validate(pubkeyorOnsTrimmed);
+    if (isPubkey && validationError) {
+      setPubkeyOrOnsError(validationError);
+      return;
+    }
+
     // this might be an ONS, validate the regex first
     const mightBeOnsName = new RegExp(ONSResolve.onsNameRegex, 'g').test(pubkeyorOnsTrimmed);
     if (!mightBeOnsName) {
-      ToastUtils.pushToastError('invalidPubKey', window.i18n('onsErrorNotRecognised'));
+      setPubkeyOrOnsError(window.i18n('onsErrorNotRecognised'));
       return;
     }
+
     setLoading(true);
     try {
       const resolvedSessionID = await ONSResolve.getSessionIDForOnsName(pubkeyorOnsTrimmed);
-      if (PubKey.validateWithErrorNoBlinding(resolvedSessionID)) {
-        throw new Error('Got a resolved ONS but the returned entry is not a valid SessionID');
+      const idValidationError = PubKey.validateWithErrorNoBlinding(resolvedSessionID);
+
+      if (idValidationError) {
+        setPubkeyOrOnsError(window.i18n('onsErrorNotRecognised'));
+        return;
       }
-      // this is a pubkey
+
       await openConvoOnceResolved(resolvedSessionID);
     } catch (e) {
-      window?.log?.warn('failed to resolve ons name', pubkeyorOnsTrimmed, e);
-      ToastUtils.pushToastError('invalidPubKey', window.i18n('failedResolveOns'));
+      setPubkeyOrOnsError(
+        e instanceof SnodeResponseError
+          ? window.i18n('onsErrorUnableToSearch')
+          : e instanceof NotFoundError
+            ? window.i18n('onsErrorNotRecognised')
+            : window.i18n('failedResolveOns')
+      );
     } finally {
       setLoading(false);
     }
   }
 
   return (
-    <div className="module-left-pane-overlay">
+    <StyledLeftPaneOverlay
+      container={true}
+      flexDirection={'column'}
+      flexGrow={1}
+      alignItems={'center'}
+    >
       {/* TODO[epic=893] Replace everywhere and test new error handling */}
       {/* <SessionIdEditable
         editable={!loading}
@@ -124,13 +162,14 @@ export const OverlayMessage = () => {
         <SessionInput
           autoFocus={true}
           type="text"
-          placeholder={placeholder}
+          placeholder={window.i18n('accountIdOrOnsEnter')}
           value={pubkeyOrOns}
           onValueChanged={setPubkeyOrOns}
           onEnterPressed={handleMessageButtonClick}
-          inputDataTestId="new-session-conversation"
+          error={pubkeyOrOnsError}
           isSpecial={true}
           centerText={true}
+          inputDataTestId="new-session-conversation"
         />
       </div>
       <SpacerLG />
@@ -155,11 +194,11 @@ export const OverlayMessage = () => {
         <SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
       </Flex>
       <SessionButton
-        text={buttonText}
+        text={window.i18n('next')}
         disabled={disableNextButton}
         onClick={handleMessageButtonClick}
         dataTestId="next-new-conversation-button"
       />
-    </div>
+    </StyledLeftPaneOverlay>
   );
 };

ts/session/apis/snode_api/batchRequest.ts

@@ -1,5 +1,6 @@
 import { isArray } from 'lodash';
 import { Snode } from '../../../data/data';
+import { SnodeResponseError } from '../../utils/errors';
 import { processOnionRequestErrorAtDestination, SnodeResponse } from './onions';
 import { snodeRpc } from './sessionRpc';
 import {
@@ -44,7 +45,7 @@ export async function doSnodeBatchRequest(
     window?.log?.warn(
       `doSnodeBatchRequest - sessionRpc could not talk to ${targetNode.ip}:${targetNode.port}`
     );
-    throw new Error(
+    throw new SnodeResponseError(
       `doSnodeBatchRequest - sessionRpc could not talk to ${targetNode.ip}:${targetNode.port}`
     );
   }

ts/session/apis/snode_api/onions.ts

@@ -17,6 +17,7 @@ import { toHex } from '../../utils/String';
 import { Snode } from '../../../data/data';
 import { callUtilsWorker } from '../../../webworker/workers/browser/util_worker_interface';
 import { encodeV4Request } from '../../onions/onionv4';
+import { SnodeResponseError } from '../../utils/errors';
 import { fileServerHost } from '../file_server_api/FileServerApi';
 import { hrefPnServerProd } from '../push_notification_api/PnServer';
 import { ERROR_CODE_NO_CONNECT } from './SNodeAPI';
@@ -1158,7 +1159,7 @@ async function lokiOnionFetch({
     window?.log?.warn('onionFetchRetryable failed ', e.message);
     if (e?.errno === 'ENETUNREACH') {
       // better handle the no connection state
-      throw new Error(ERROR_CODE_NO_CONNECT);
+      throw new SnodeResponseError(ERROR_CODE_NO_CONNECT);
     }
     if (e?.message === CLOCK_OUT_OF_SYNC_MESSAGE_ERROR) {
       window?.log?.warn('Its a clock out of sync error ');

ts/session/apis/snode_api/onsResolve.ts

@@ -7,6 +7,7 @@ import {
   stringToUint8Array,
   toHex,
 } from '../../utils/String';
+import { NotFoundError } from '../../utils/errors';
 import { OnsResolveSubRequest } from './SnodeRequestTypes';
 import { doSnodeBatchRequest } from './batchRequest';
 import { GetNetworkTime } from './getNetworkTime';
@@ -57,7 +58,7 @@ async function getSessionIDForOnsName(onsNameCase: string) {
     const intermediate = parsedBody?.result;
 
     if (!intermediate || !intermediate?.encrypted_value) {
-      throw new Error('ONSresolve: no encrypted_value');
+      throw new NotFoundError('ONSresolve: no encrypted_value');
     }
     const hexEncodedCipherText = intermediate?.encrypted_value;
 

ts/session/apis/snode_api/retrieveRequest.ts

@@ -8,6 +8,7 @@ import { SnodeNamespace, SnodeNamespaces } from './namespaces';
 import { TTL_DEFAULT } from '../../constants';
 import { UserUtils } from '../../utils';
 import { sleepFor } from '../../utils/Promise';
+import { SnodeResponseError } from '../../utils/errors';
 import {
   RetrieveLegacyClosedGroupSubRequestType,
   RetrieveSubRequestType,
@@ -136,7 +137,7 @@ async function retrieveNextMessages(
       window?.log?.warn(
         `_retrieveNextMessages - sessionRpc could not talk to ${targetNode.ip}:${targetNode.port}`
       );
-      throw new Error(
+      throw new SnodeResponseError(
         `_retrieveNextMessages - sessionRpc could not talk to ${targetNode.ip}:${targetNode.port}`
       );
     }

ts/session/types/PubKey.ts

@@ -145,7 +145,7 @@ export class PubKey {
 
     // dev pubkey on testnet are now 66 chars too with the prefix, so every sessionID needs 66 chars and the prefix to be valid
     if (!isProdOrDevValid) {
-      return window.i18n('invalidPubkeyFormat');
+      return window.i18n('accountIdErrorInvalid');
     }
     return undefined;
   }

ts/session/utils/errors.ts

@@ -66,3 +66,11 @@ export class HTTPError extends Error {
     }
   }
 }
+
+export class SnodeResponseError extends Error {
+  constructor(message = 'sessionRpc could not talk to node') {
+    super(message);
+    // restore prototype chain
+    Object.setPrototypeOf(this, SnodeResponseError.prototype);
+  }
+}

ts/types/LocalizerKeys.ts

@@ -103,6 +103,7 @@ export type LocalizerKeys =
   | 'contactsHeader'
   | 'contextMenuNoSuggestions'
   | 'continue'
+  | 'conversationId'
   | 'conversationsHeader'
   | 'conversationsNone'
   | 'conversationsSettingsTitle'