Merge pull request #1861 from oasisprotocol/mz/roflTweaks

ROFL apps minor UI tweaks

Author: buberdds

.changelog/1861.trivial.md

@@ -0,0 +1 @@
+ROFL apps minor UI tweaks

src/app/components/VerticalList/index.tsx

@@ -1,10 +1,9 @@
-import { COLORS } from 'styles/theme/colors'
 import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 
 export const VerticalList = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: `0 ${theme.spacing(2)}`,
-  backgroundColor: COLORS.brandDark,
+  backgroundColor: theme.palette.background.default,
 }))

src/app/pages/RoflAppDetailsPage/GridRow.tsx

@@ -26,15 +26,15 @@ export const GridRow: FC<GridRowProps> = ({ label, children, tooltip }) => {
 
   return (
     <>
-      <StyledGrid item xs={12} md={5}>
+      <StyledGrid item xs={4} md={5}>
         {label}:
         {tooltip && (
           <Tooltip title={tooltip} placement="top">
             <InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
           </Tooltip>
         )}
       </StyledGrid>
-      <StyledGrid item xs={12} md={7}>
+      <StyledGrid item xs={8} md={7}>
         {children ? <strong>{children}</strong> : t('common.missing')}
       </StyledGrid>
     </>

src/app/pages/RoflAppDetailsPage/LastActivity.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatDistanceStrict } from 'date-fns'
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+import { RuntimeTransaction } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
+import { TransactionLink } from '../../components/Transactions/TransactionLink'
+import { useScreenSize } from '../../hooks/useScreensize'
+
+const StyledBox = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 5,
+}))
+
+type LastActivityProps = {
+  transaction: RuntimeTransaction | undefined
+  scope: SearchScope
+}
+
+export const LastActivity: FC<LastActivityProps> = ({ scope, transaction }) => {
+  const { t } = useTranslation()
+  const { isTablet } = useScreenSize()
+
+  return (
+    <>
+      {transaction ? (
+        <StyledBox>
+          <TransactionLink
+            scope={scope}
+            hash={transaction.eth_hash ?? transaction.hash}
+            alwaysTrim={isTablet}
+          />
+          <span>
+            (
+            {formatDistanceStrict(transaction.timestamp, new Date(), {
+              addSuffix: true,
+            })}
+            )
+          </span>
+        </StyledBox>
+      ) : (
+        t('common.missing')
+      )}
+    </>
+  )
+}

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -1,8 +1,6 @@
 import { FC } from 'react'
 import { useHref, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { formatDistanceStrict } from 'date-fns'
-import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Skeleton from '@mui/material/Skeleton'
 import Typography from '@mui/material/Typography'
@@ -21,16 +19,17 @@ import { RoflAppStatusBadge } from '../../components/Rofl/RoflAppStatusBadge'
 import { RoflAppLink } from '../../components/Rofl/RoflAppLink'
 import { AccountLink } from '../../components/Account/AccountLink'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
-import { TransactionLink } from '../../components/Transactions/TransactionLink'
 import { TeeType } from './TeeType'
 import { Endorsement } from './Endorsement'
 import { Enclaves } from './Enclaves'
 import { Secrets } from './Secrets'
 import { RouterTabs } from '../../components/RouterTabs'
+import { TableCellAge } from '../../components/TableCellAge'
 import { instancesContainerId } from '../../utils/tabAnchors'
 import { RoflAppDetailsContext } from '../RoflAppDetailsPage/hooks'
 import { MetaDataCard } from './MetaDataCard'
 import { PolicyCard } from './PolicyCard'
+import { LastActivity } from './LastActivity'
 
 export const RoflAppDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -140,8 +139,12 @@ export const RoflAppDetailsView: FC<{
 
           <dt>{t('rofl.adminAccount')}</dt>
           <dd>
-            <AccountLink scope={{ network: app.network, layer: app.layer }} address={app.admin} />
-            <CopyToClipboard value={app.admin} />
+            <AccountLink
+              scope={{ network: app.network, layer: app.layer }}
+              address={app.admin_eth ?? app.admin}
+              alwaysTrimOnTablet
+            />
+            <CopyToClipboard value={app.admin_eth ?? app.admin} />
           </dd>
 
           <dt>{t('rofl.stakedAmount')}</dt>
@@ -167,6 +170,8 @@ export const RoflAppDetailsView: FC<{
           <dd>
             <RoflAppLink id={app.id} network={app.network} withSourceIndicator={false} />
           </dd>
+          <dt>{t('rofl.instances')}</dt>
+          <dd>{app.num_active_instances.toLocaleString()}</dd>
           <dt>{t('rofl.created')}</dt>
           <dd>
             {t('common.formattedDateTime', {
@@ -181,32 +186,21 @@ export const RoflAppDetailsView: FC<{
             })}
           </dd>
           <dt>{t('rofl.lastActivity')}</dt>
-          <dd>{t('common.missing')}</dd>
+          <dd>{<TableCellAge sinceTimestamp={app.last_activity} />}</dd>
         </>
       )}
 
       {detailsPage && (
         <>
           <dt>{t('rofl.lastActivity')}</dt>
           <dd>
-            {app.last_activity_tx ? (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
-                <TransactionLink
-                  scope={{ network: app.network, layer: app.layer }}
-                  hash={app.last_activity_tx.eth_hash || app.last_activity_tx.hash}
-                />
-                (
-                {formatDistanceStrict(app.last_activity_tx.timestamp, new Date(), {
-                  addSuffix: true,
-                })}
-                )
-              </Box>
-            ) : (
-              t('common.missing')
-            )}
+            <LastActivity
+              scope={{ network: app.network, layer: app.layer }}
+              transaction={app.last_activity_tx}
+            />
           </dd>
 
-          <dt>{t('rofl.instances')}</dt>
+          <dt>{t('rofl.activeInstances')}</dt>
           <dd>{app.num_active_instances.toLocaleString()}</dd>
 
           <dt>{t('rofl.endorsement')}</dt>

src/locales/en/translation.json

@@ -658,6 +658,7 @@
   },
   "rofl": {
     "active": "Active",
+    "activeInstances": "Active instances",
     "inactive": "Inactive",
     "rakAbbreviation": "RAK",
     "rak": "Runtime Attestation Key",