Merge pull request #2329 from oasisprotocol/lw/explain-rofl-keys

Explain SEK, RAK, REK rofl keys

Author: lukaw3d

.changelog/2329.trivial.md

@@ -0,0 +1 @@
+Explain SEK, RAK, REK rofl keys

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -129,9 +129,6 @@ export const RoflAppDetailsView: FC<{
       <DetailsRow title={t('rofl.enclaveId')}>
         <Enclaves policy={app.policy} />
       </DetailsRow>
-      <DetailsRow title={t('rofl.sekPublicKey')}>
-        <span className="font-medium">{app.sek}</span> <CopyToClipboard value={app.sek} />
-      </DetailsRow>
       <AdminAccountRow
         address={app.admin_eth ?? app.admin}
         scope={{ network: app.network, layer: app.layer }}
@@ -151,6 +148,18 @@ export const RoflAppDetailsView: FC<{
           />
         </div>
       </DetailsRow>
+      <DetailsRow
+        title={
+          <div className="flex items-center gap-4">
+            {t('rofl.sekPublicKey')}
+            <Tooltip title={t('rofl.sekPublicKeyTooltip')}>
+              <InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
+            </Tooltip>
+          </div>
+        }
+      >
+        <span className="font-medium">{app.sek}</span> <CopyToClipboard value={app.sek} />
+      </DetailsRow>
       <DetailsRow
         title={
           <div className="flex items-center gap-4">

src/app/pages/RoflAppInstanceDetailsPage/index.tsx

@@ -17,6 +17,9 @@ import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { useRuntimeTxMethodParam } from '../../hooks/useCommonParams'
 import { AccountLink } from '../../components/Account/AccountLink'
 import { SimpleJsonCode } from 'app/components/CodeDisplay/SimpleJsonCode'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
+import InfoIcon from '@mui/icons-material/Info'
+import { COLORS } from '../../../styles/theme/colors'
 
 export const RoflAppInstanceDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -58,13 +61,27 @@ export const RoflAppInstanceDetailsView: FC<{
 
   return (
     <StyledDescriptionList>
-      <dt>{t('rofl.rakAbbreviation')}</dt>
+      <dt>
+        <div className="flex items-center gap-4">
+          {t('rofl.rakAbbreviation')}
+          <Tooltip title={t('rofl.rakAbbreviationTooltip')}>
+            <InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
+          </Tooltip>
+        </div>
+      </dt>
       <dd>
         <span>
           {instance.rak} <CopyToClipboard value={instance.rak} />
         </span>
       </dd>
-      <dt>{t('rofl.rekAbbreviation')}</dt>
+      <dt>
+        <div className="flex items-center gap-4">
+          {t('rofl.rekAbbreviation')}
+          <Tooltip title={t('rofl.rekAbbreviationTooltip')}>
+            <InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
+          </Tooltip>
+        </div>
+      </dt>
       <dd>
         <span>
           {instance.rek} <CopyToClipboard value={instance.rek} />

src/locales/en/translation.json

@@ -769,7 +769,9 @@
     "policy": "Policy",
     "rak": "Runtime Attestation Key",
     "rakAbbreviation": "RAK",
+    "rakAbbreviationTooltip": "Runtime Attestation Key generated inside each ROFL replica used for secure enclave-enclave communication and attestation.",
     "rekAbbreviation": "REK",
+    "rekAbbreviationTooltip": "Runtime Encryption Key generated inside each ROFL replica used to sign blockchain transactions.",
     "removed": "Removed",
     "replicaDetails": "Replica details",
     "replicaPays": "Replica pays",
@@ -782,6 +784,7 @@
     "secrets": "Secrets",
     "secretsTooltip": "These secrets are end-to-end encrypted and can only be read by the app running in ROFL.",
     "sekPublicKey": "SEK Public Key",
+    "sekPublicKeyTooltip": "Secrets Encryption Key for encrypting user secrets and generating the keys.",
     "sgx": "SGX",
     "stakedAmount": "Staked amount",
     "tdx": "TDX",