Improve mobile ROFL app instances list

Author: buberdds

src/app/components/Rofl/RoflAppInstanceLink.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+import { RouteUtils } from '../../utils/route-utils'
+import { Network } from '../../../types/network'
+import { Link } from '../Link'
+
+type RoflAppInstanceLinkProps = {
+  alwaysTrim?: boolean
+  id: string
+  network: Network
+  rak: string
+}
+
+export const RoflAppInstanceLink: FC<RoflAppInstanceLinkProps> = ({ alwaysTrim, id, network, rak }) => {
+  const to = RouteUtils.getRoflAppInstanceRoute(network, id, rak)
+
+  return <Link address={rak} to={to} alwaysTrim={alwaysTrim} withSourceIndicator={false} />
+}

src/app/pages/RoflAppDetailsPage/InstancesList.tsx

@@ -2,14 +2,14 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import { RoflInstance } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
 import { COLORS } from '../../../styles/theme/colors'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { trimLongString } from '../../utils/trimLongString'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { TablePaginationProps } from '../../components/Table/TablePagination'
-import { RoflAppInstanceStatusBadge } from 'app/components/Rofl/RoflAppInstanceStatusBadge'
-import { RouteUtils } from 'app/utils/route-utils'
-import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
-import { SearchScope } from '../../../types/searchScope'
+import { RoflAppInstanceStatusBadge } from '../../components/Rofl/RoflAppInstanceStatusBadge'
+import { RoflAppInstanceLink } from '../../components/Rofl/RoflAppInstanceLink'
 
 type InstancesListProps = {
   currentEpoch: number | undefined
@@ -31,37 +31,35 @@ export const InstancesList: FC<InstancesListProps> = ({
   scope,
 }) => {
   const { t } = useTranslation()
+  const { isTablet } = useScreenSize()
+
   const tableColumns: TableColProps[] = [
     { key: 'rak', content: t('rofl.rakAbbreviation') },
     { key: 'node', content: t('rofl.nodeId') },
     { key: 'expirationEpoch', content: t('rofl.expirationEpoch'), align: TableCellAlign.Right },
     { key: 'expirationStatus', content: t('common.status'), align: TableCellAlign.Right },
   ]
-
   const tableRows =
     currentEpoch !== undefined && instances
       ? instances?.map(instance => {
           const isActive = instance.expiration_epoch > currentEpoch
-          const to = RouteUtils.getRoflAppInstanceRoute(scope.network, appId, instance.rak)
 
           return {
             key: instance.rak,
             backgroundColor: isActive ? 'transparent' : COLORS.grayLight,
             data: [
               {
                 key: 'rak',
+                content: <RoflAppInstanceLink id={appId} network={scope.network} rak={instance.rak} />,
+              },
+              {
+                key: 'node',
                 content: (
                   <Typography variant="mono">
-                    <Link component={RouterLink} to={to}>
-                      {instance.rak}
-                    </Link>
+                    {isTablet ? trimLongString(instance.endorsing_node_id) : instance.endorsing_node_id}
                   </Typography>
                 ),
               },
-              {
-                key: 'node',
-                content: <Typography variant="mono">{instance.endorsing_node_id}</Typography>,
-              },
               {
                 key: 'expirationEpoch',
                 content: instance.expiration_epoch.toLocaleString(),