Indicate encrypted transactions in TX lists

src/app/components/TransactionEncryptionStatus/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import LockIcon from '@mui/icons-material/Lock'
+import { COLORS } from '../../../styles/theme/colors'
+import { RuntimeTransactionEncryptionEnvelope } from '../../../oasis-indexer/api'
+import Tooltip from '@mui/material/Tooltip'
+import { tooltipDelay } from '../../../styles/theme'
+
+type TransactionEncryptionStatusProps = {
+  envelope?: RuntimeTransactionEncryptionEnvelope
+}
+
+export const TransactionEncrypted = () => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      arrow
+      placement="top"
+      title={t('transaction.tooltips.txEncrypted')}
+      enterDelay={tooltipDelay}
+      enterNextDelay={tooltipDelay}
+    >
+      <LockIcon htmlColor={COLORS.eucalyptus} />
+    </Tooltip>
+  )
+}
+
+export const TransactionEncryptionStatus: FC<TransactionEncryptionStatusProps> = ({ envelope }) =>
+  envelope ? <TransactionEncrypted /> : null

src/app/components/Transactions/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import formatDistanceStrict from 'date-fns/formatDistanceStrict'
 import Box from '@mui/material/Box'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import LockIcon from '@mui/icons-material/Lock'
 import { Table, TableCellAlign } from '../../components/Table'
 import { TransactionStatusIcon } from '../../components/TransactionStatusIcon'
 import { RuntimeTransactionLabel } from '../../components/RuntimeTransactionLabel'
@@ -16,6 +17,8 @@ import { AccountLink } from '../Account/AccountLink'
 import { TransactionLink } from './TransactionLink'
 import { trimLongString } from '../../utils/trimLongString'
 import Typography from '@mui/material/Typography'
+import { doesAnyOfTheseLayersSupportEncryptedTransactions } from '../../../types/layers'
+import { TransactionEncryptionStatus } from '../TransactionEncryptionStatus'
 
 const StyledCircle = styled(Box)(({ theme }) => ({
   position: 'absolute',
@@ -59,8 +62,16 @@ export const Transactions: FC<TransactionsProps> = ({
   verbose = true,
 }) => {
   const { t } = useTranslation()
+  // We only want to show encryption status of we are listing transactions
+  // from paratimes that actually support encrypting transactions
+  const canHaveEncryption = doesAnyOfTheseLayersSupportEncryptedTransactions(
+    transactions?.map(tx => tx.layer),
+  )
   const tableColumns = [
     { content: t('common.status') },
+    ...(canHaveEncryption
+      ? [{ content: (<LockIcon htmlColor={COLORS.grayMedium} />) as unknown as string }]
+      : []), // The table does support widgets in the column headers, but the TS definition is unaware of that.
     { content: t('common.hash') },
     ...(verbose ? [{ content: t('common.block') }] : []),
     { content: t('common.age'), align: TableCellAlign.Right },
@@ -77,6 +88,14 @@ export const Transactions: FC<TransactionsProps> = ({
         content: <TransactionStatusIcon success={transaction.success} />,
         key: 'success',
       },
+      ...(canHaveEncryption
+        ? [
+            {
+              content: <TransactionEncryptionStatus envelope={transaction.encryption_envelope} />,
+              key: 'encrypted',
+            },
+          ]
+        : []),
       {
         content: (
           <TransactionLink

src/app/utils/helpers.ts

@@ -57,3 +57,7 @@ export function getEthAccountAddress(preimage: AddressPreimage | undefined): str
   // We need to convert from base64 to hex, add the prefix, and convert to checksum address
   return toChecksumAddress(`0x${Buffer.from(preimage.address_data, 'base64').toString('hex')}`)
 }
+
+export function uniq<T>(input: T[] | undefined): T[] {
+  return input === undefined ? [] : [...new Set(input)]
+}

src/locales/en/translation.json

@@ -185,6 +185,7 @@
       "senderTooltipOasis": "Oasis address for the sender",
       "recipientTooltipOasis": "Oasis address for the recipient",
       "txTooltipHashUnavailable": "Hash not available in selected address format",
+      "txEncrypted": "This transaction is encrypted",
       "senderTooltipUnavailable": "Sender not available in selected address format",
       "recipientTooltipUnavailable": "Recipient not available in selected address format"
     }

src/types/layers.ts

@@ -1,3 +1,5 @@
+import { uniq } from '../app/utils/helpers'
+
 // Here we need to import from the generated code, in order to break
 // a cycle of imports which confuse jest
 // eslint-disable-next-line no-restricted-imports
@@ -26,3 +28,11 @@ const layerOrder: Record<Layer, number> = {
 
 export const orderByLayer = (itemA: HasLayer, itemB: HasLayer): number =>
   layerOrder[itemA.layer] - layerOrder[itemB.layer]
+
+const layersWithEncryptedTransactions: Layer[] = [Layer.sapphire]
+
+export const doesLayerSupportEncryptedTransactions = (layer: Layer): boolean =>
+  layersWithEncryptedTransactions.includes(layer)
+
+export const doesAnyOfTheseLayersSupportEncryptedTransactions = (layers: Layer[] | undefined): boolean =>
+  uniq(layers).some(doesLayerSupportEncryptedTransactions)