fix(idea/frontend): hide message name on error (#1700)

gear-tech · Dec 9, 2024 · dccbd65 · dccbd65
1 parent ecdaad7
commit dccbd65
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/idea/frontend/src/features/message/index.ts b/idea/frontend/src/features/message/index.ts
@@ -1,12 +1,13 @@
 import { useMessageToProgram, useMessageFromProgram } from './api';
-import { isMessageWithError, getDecodedMessagePayload } from './utils';
+import { isMessageFromProgramWithError, isMessageWithError, getDecodedMessagePayload } from './utils';
 import { ProgramMessages } from './ui';
 import { MESSAGE_TYPE } from './consts';
 import { Message } from './types';
 
 export {
   useMessageToProgram,
   useMessageFromProgram,
+  isMessageFromProgramWithError,
   isMessageWithError,
   getDecodedMessagePayload,
   ProgramMessages,

diff --git a/idea/frontend/src/features/message/ui/message-card/message-card.tsx b/idea/frontend/src/features/message/ui/message-card/message-card.tsx
@@ -8,7 +8,7 @@ import { routes } from '@/shared/config';
 import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
 
 import { MessageFromProgram, MessageToProgram } from '../../api';
-import { isMessageWithError } from '../../utils';
+import { isMessageFromProgramWithError, isMessageWithError } from '../../utils';
 import styles from './message-card.module.scss';
 
 type Props = {
@@ -19,7 +19,7 @@ type Props = {
 const MessageCard = ({ isToDirection, message }: Props) => {
   const { id, timestamp, service, fn } = message;
 
-  const hasName = Boolean(service || fn);
+  const hasName = Boolean(service || fn) && !isMessageFromProgramWithError(message);
   const to = generatePath(routes.message, { messageId: id });
 
   return (

diff --git a/idea/frontend/src/features/message/utils.ts b/idea/frontend/src/features/message/utils.ts
@@ -7,9 +7,11 @@ import { isNullOrUndefined } from '@/shared/helpers';
 import { MessageToProgram, MessageFromProgram } from './api';
 import { MESSAGE_ENTRY_POINT } from './consts';
 
+const isMessageFromProgramWithError = (message?: MessageToProgram | MessageFromProgram) =>
+  message && 'exitCode' in message && Boolean(message.exitCode);
+
 const isMessageWithError = (message: MessageToProgram | MessageFromProgram) =>
-  ('exitCode' in message && Boolean(message.exitCode)) ||
-  ('processedWithPanic' in message && message.processedWithPanic);
+  isMessageFromProgramWithError(message) || ('processedWithPanic' in message && message.processedWithPanic);
 
 const getPayload = ({ payload }: MessageToProgram | MessageFromProgram) => payload || '0x';
 
@@ -108,4 +110,4 @@ const getDecodedMessagePayload = (
   }
 };
 
-export { isMessageWithError, getDecodedMessagePayload };
+export { isMessageFromProgramWithError, isMessageWithError, getDecodedMessagePayload };
diff --git a/idea/frontend/src/pages/message/message.tsx b/idea/frontend/src/pages/message/message.tsx
@@ -7,6 +7,7 @@ import cx from 'clsx';
 
 import {
   getDecodedMessagePayload,
+  isMessageFromProgramWithError,
   isMessageWithError,
   useMessageFromProgram,
   useMessageToProgram,
@@ -34,7 +35,9 @@ const Message = () => {
 
   const message = messageToProgram.data || messageFromProgram.data;
   const isLoading = messageToProgram.isLoading || messageFromProgram.isLoading;
+  const isToDirection = Boolean(messageToProgram.data);
   const { timestamp, id, source, value, destination, replyToMessageId, blockHash, service, fn } = message || {};
+  const showServiceAndFn = !isMessageFromProgramWithError(message);
 
   const { data: program } = useProgram(messageToProgram.data ? destination : source);
   const { metadata, isMetadataReady } = useMetadata(program?.metahash);
@@ -45,7 +48,7 @@ const Message = () => {
     () =>
       message && !isPayloadLoading
         ? // eslint-disable-next-line @typescript-eslint/unbound-method
-          getDecodedMessagePayload(message, Boolean(messageToProgram.data), metadata, sails, alert.error)
+          getDecodedMessagePayload(message, isToDirection, metadata, sails, alert.error)
         : undefined,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [message, metadata, sails, isPayloadLoading],
@@ -76,8 +79,10 @@ const Message = () => {
         <Input value={destination} label="Destination" gap="1/6" className={inputClassName} readOnly />
         <Input value={value} label="Value" gap="1/6" className={inputClassName} readOnly />
 
-        {service && <Input value={service} label="Service" gap="1/6" className={inputClassName} readOnly />}
-        {fn && <Input value={fn} label="Function" gap="1/6" className={inputClassName} readOnly />}
+        {service && showServiceAndFn && (
+          <Input value={service} label="Service" gap="1/6" className={inputClassName} readOnly />
+        )}
+        {fn && showServiceAndFn && <Input value={fn} label="Function" gap="1/6" className={inputClassName} readOnly />}
 
         <Textarea
           value={decodedPayload ? getPreformattedText(decodedPayload) : '-'}