Show errors in runtime events

.changelog/1278.bugfix.md

@@ -0,0 +1 @@
+Show errors in runtime events

src/app/components/RuntimeEvents/EventError.tsx

@@ -0,0 +1,58 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import CancelIcon from '@mui/icons-material/Cancel'
+import { RuntimeEvent } from '../../../oasis-nexus/api'
+import { ErrorBox, StyledBox } from '../StatusIcon'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { RuntimeEventType } from '../../../oasis-nexus/api'
+
+/**
+ * https://github.com/oasisprotocol/oasis-sdk/blob/9fb148a/client-sdk/go/modules/consensusaccounts/types.go#L145-L217
+ *
+ * Can appear in:
+ * - {@link RuntimeEventType.consensus_accountsdeposit}
+ * - {@link RuntimeEventType.consensus_accountswithdraw}
+ * - {@link RuntimeEventType.consensus_accountsdelegate}
+ * - {@link RuntimeEventType.consensus_accountsundelegate_start}
+ */
+type ConsensusError = {
+  module: string
+  code: number
+}
+
+type EventErrorProps = {
+  event: RuntimeEvent
+}
+
+export const EventError: FC<EventErrorProps> = ({ event }) => {
+  const { t } = useTranslation()
+  const error: ConsensusError | undefined = event.body.error
+  if (!error) return null
+
+  const errorMessage = `${t('errors.code')} ${error.code}, ${t('errors.module')}: ${error.module}`
+  return (
+    <>
+      <StyledBox success={false} error={undefined} withText={true}>
+        {t('common.failed')}
+        &nbsp;
+        <CancelIcon color="error" fontSize="inherit" />
+      </StyledBox>
+      <ErrorBox>{errorMessage}</ErrorBox>
+    </>
+  )
+}
+
+export const MaybeEventErrorLine: FC<EventErrorProps> = ({ event }) => {
+  const { t } = useTranslation()
+  return (
+    event.body.error && (
+      <>
+        <dt>{t('common.status')}</dt>
+        <dd style={{ flexWrap: 'wrap', gap: '10px' }}>
+          <EventError event={event} />
+        </dd>
+      </>
+    )
+  )
+}

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -28,6 +28,7 @@ import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
 import { UndelegateFinishIcon } from '../CustomIcons/UndelegateFinish'
 import { DelegateIcon } from '../CustomIcons/Delegate'
+import { MaybeEventErrorLine } from './EventError'
 
 export const EventTypeIcon: FC<{
   eventType: RuntimeEventType
@@ -244,6 +245,7 @@ export const RuntimeEventDetails: FC<{
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <MaybeEventErrorLine event={event} />
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLink
@@ -279,6 +281,7 @@ export const RuntimeEventDetails: FC<{
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <MaybeEventErrorLine event={event} />
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLink
@@ -314,6 +317,7 @@ export const RuntimeEventDetails: FC<{
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <MaybeEventErrorLine event={event} />
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLink
@@ -348,6 +352,7 @@ export const RuntimeEventDetails: FC<{
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <MaybeEventErrorLine event={event} />
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLink

src/app/components/StatusIcon/index.tsx

@@ -50,7 +50,7 @@ export const StyledBox = styled(Box, {
   }
 })
 
-const ErrorBox = styled(Box)(() => ({
+export const ErrorBox = styled(Box)(() => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

src/locales/en/translation.json

@@ -201,6 +201,7 @@
   },
   "errors": {
     "code": "error code",
+    "module": "module",
     "error": "Error",
     "loadFirstPage": "load the first page",
     "unknown": "Unknown error",