Reimplement mono fonts

.changelog/2327.trivial.md

@@ -0,0 +1 @@
+Reimplement mono fonts.

src/app/components/Account/AccountLink.tsx

@@ -103,13 +103,15 @@ const AdaptivelyTrimmedAccountLink: FC<
             />
           </span>
         )}
-        <AdaptiveTrimmer
-          idPrefix="account-address"
-          text={showAccountName ? `(${address})` : address}
-          strategy="middle"
-          tooltipOverride={tooltipTitle}
-          minLength={13}
-        />
+        <span className="font-mono">
+          <AdaptiveTrimmer
+            idPrefix="account-address"
+            text={showAccountName ? `(${address})` : address}
+            strategy="middle"
+            tooltipOverride={tooltipTitle}
+            minLength={13}
+          />
+        </span>
       </div>
     </WithTypographyAndLink>
   )
@@ -128,12 +130,12 @@ const TrimmedAccountLink: FC<
     <WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
       <MaybeWithTooltip title={tooltipTitle}>
         {showAccountName ? (
-          <span className="flex items-center gap-1">
+          <span className="flex items-center gap-1 font-medium">
             <AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
             {trimLongString(accountName, 12, 0)}
           </span>
         ) : (
-          trimLongString(address, 6, 6)
+          <span className="font-mono font-medium">{trimLongString(address, 6, 6)}</span>
         )}
       </MaybeWithTooltip>
     </WithTypographyAndLink>
@@ -155,15 +157,15 @@ const DesktopAccountLink: FC<
     <WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
       <MaybeWithTooltip title={tooltipTitle}>
         {showAccountName ? (
-          <div className="flex items-center flex-wrap gap-1">
+          <div className="flex items-center flex-wrap gap-1 font-medium">
             <span className="inline-flex items-center gap-1">
               <AccountMetadataSourceIndicator source={accountMetadata!.source} />
               <HighlightedText text={accountName} />
             </span>
-            ({address})
+            <span className="font-mono">({address})</span>
           </div>
         ) : (
-          address
+          <span className="font-mono font-medium">{address}</span>
         )}
       </MaybeWithTooltip>
     </WithTypographyAndLink>

src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx

@@ -89,7 +89,7 @@ export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
   )
 
   return (
-    <span ref={textRef} className="max-w-full overflow-x-hidden">
+    <span ref={textRef} className="max-w-full">
       <MaybeWithTooltip
         title={title}
         spanClassName={cn('whitespace-nowrap', isFinal ? 'opacity-100' : 'opacity-0')}

src/app/components/Blocks/BlockLink.tsx

@@ -27,10 +27,8 @@ export const BlockHashLink: FC<{
     // Table view
     return (
       <MaybeWithTooltip title={hash}>
-        <Link asChild>
-          <RouterLink to={to} className="text-primary font-medium">
-            {trimLongString(hash)}
-          </RouterLink>
+        <Link asChild className="font-mono font-medium">
+          <RouterLink to={to}>{trimLongString(hash)}</RouterLink>
         </Link>
       </MaybeWithTooltip>
     )
@@ -39,7 +37,7 @@ export const BlockHashLink: FC<{
   if (!isTablet) {
     // Desktop view
     return (
-      <Link asChild className="font-medium">
+      <Link asChild className="font-mono font-medium">
         <RouterLink to={to}>{hash}</RouterLink>
       </Link>
     )
@@ -48,8 +46,8 @@ export const BlockHashLink: FC<{
   // Mobile view
   return (
     <span className="max-w-full overflow-x-hidden">
-      <Link asChild>
-        <RouterLink to={to} className="text-primary font-medium">
+      <Link asChild className="font-mono font-medium">
+        <RouterLink to={to}>
           <AdaptiveTrimmer text={hash} strategy="middle" minLength={13} />
         </RouterLink>
       </Link>

src/app/components/Link/index.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { Link as UilLink } from '@oasisprotocol/ui-library/src/components/link'
@@ -86,10 +86,6 @@ type CustomTrimEndLinkLabelProps = {
   trimMode?: TrimMode
 }
 
-const LinkLabel: FC<PropsWithChildren> = ({ children }) => (
-  <span className="text-inherit font-inherit leading-inherit">{children}</span>
-)
-
 const CustomTrimEndLinkLabel: FC<CustomTrimEndLinkLabelProps> = ({ name, to, labelOnly, trimMode }) => {
   const label =
     trimMode === 'adaptive' ? (
@@ -98,7 +94,7 @@ const CustomTrimEndLinkLabel: FC<CustomTrimEndLinkLabelProps> = ({ name, to, lab
       <HighlightedTrimmedText text={name} fragmentLength={14} />
     )
   return labelOnly ? (
-    <LinkLabel>{label}</LinkLabel>
+    <span>{label}</span>
   ) : (
     <UilLink asChild>
       <RouterLink to={to}>{label}</RouterLink>
@@ -119,17 +115,17 @@ const TabletLink: FC<TabletLinkProps> = ({ address, name, to, labelOnly, trimMod
     return <CustomTrimEndLinkLabel name={name} to={to} labelOnly={labelOnly} trimMode={trimMode} />
   }
 
-  const label =
+  const trimmedAddr =
     trimMode === 'adaptive' ? (
       <AdaptiveTrimmer text={address} strategy={'middle'} minLength={13} />
     ) : (
       trimLongString(address)
     )
   return labelOnly ? (
-    <LinkLabel>{label}</LinkLabel>
+    <span className="font-mono">{trimmedAddr}</span>
   ) : (
-    <UilLink asChild>
-      <RouterLink to={to}>{label}</RouterLink>
+    <UilLink className="font-mono" asChild>
+      <RouterLink to={to}>{trimmedAddr}</RouterLink>
     </UilLink>
   )
 }
@@ -146,20 +142,20 @@ const DesktopLink: FC<DesktopLinkProps> = ({ address, name, to, alwaysTrim, trim
         {name ? (
           <CustomTrimEndLinkLabel name={name} to={to} labelOnly={labelOnly} trimMode={trimMode} />
         ) : labelOnly ? (
-          <LinkLabel>{trimLongString(address)}</LinkLabel>
+          <span className="font-mono">{trimLongString(address)}</span>
         ) : (
-          <UilLink asChild>
+          <UilLink className="font-mono" asChild>
             <RouterLink to={to}>{trimLongString(address)}</RouterLink>
           </UilLink>
         )}
       </WithHoverHighlighting>
     )
   }
-  const label = name ? <HighlightedText text={name} /> : address
+  const label = name ? <HighlightedText text={name} /> : <span className="font-mono">{address}</span>
   return (
     <WithHoverHighlighting address={address}>
       {labelOnly ? (
-        <LinkLabel>{label}</LinkLabel>
+        <span>{label}</span>
       ) : (
         <UilLink asChild>
           <RouterLink to={to}>{label}</RouterLink>

src/app/components/LongDataDisplay/index.tsx

@@ -36,11 +36,7 @@ export const LongDataDisplay: FC<{ data: string; fontWeight?: number; collapsedL
     <div>
       <span
         ref={textRef}
-        className="
-    font-medium
-    overflow-hidden
-    whitespace-pre-wrap
-  "
+        className="font-mono font-medium overflow-hidden whitespace-pre-wrap"
         style={{
           display: '-webkit-box',
           WebkitBoxOrient: 'vertical',

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -38,7 +38,7 @@
 import { RoflAppLink } from '../Rofl/RoflAppLink'
 import { RoflAppInstanceLink } from '../Rofl/RoflAppInstanceLink'
 
 export const getRuntimeEventMethodLabel = (t: TFunction, method: RuntimeEventType | undefined) => {
   switch (method) {
     case RuntimeEventType.accountstransfer:
       return t('runtimeEvent.accountstransfer')
@@ -277,7 +277,7 @@
             <b>{eventName}</b>
             <br />
             {t('runtimeEvent.fields.topics')}:
-            <span className="font-medium block whitespace-pre-wrap wrap-break-word">
+            <span className="font-mono font-medium block whitespace-pre-wrap wrap-break-word">
               {event.body.topics
                 /* @ts-expect-error -- Event body is missing types */
                 .map((base64Topic, index) => {

src/app/components/TableCellNode/index.tsx

@@ -23,5 +23,5 @@ export const TableCellNode: FC<TableCellNodeProps> = ({ id, scope }) => {
     return <AccountLink alwaysTrimOnTablet scope={scope} address={getOasisAddressFromBase64PublicKey(id)} />
   }
 
-  return <span className="font-medium">{isTablet ? trimLongString(id) : id}</span>
+  return <span className="font-mono font-medium">{isTablet ? trimLongString(id) : id}</span>
 }

src/app/components/Transactions/TransactionLink.tsx

@@ -15,7 +15,7 @@ const WithTypographyAndLink: FC<{ children: ReactNode; mobile?: boolean; to: str
   mobile,
   to,
 }) => (
-  <Link asChild className={cn('font-medium', mobile && 'max-w-[85%]')}>
+  <Link asChild className={cn('font-mono font-medium', mobile && 'max-w-[85%]')}>
     <RouterLink to={to}>{children}</RouterLink>
   </Link>
 )

src/app/pages/ConsensusBlockDetailPage/index.tsx

@@ -114,11 +114,11 @@ export const ConsensusBlockDetailView: FC<{
           <dt>{t('common.stateRoot')}</dt>
           <dd>
             {isTablet ? (
-              <span className="max-w-full overflow-x-hidden">
+              <span className="font-mono max-w-full overflow-x-hidden">
                 <AdaptiveTrimmer text={block.state_root} strategy="middle" minLength={13} />
               </span>
             ) : (
-              <span>{block.state_root}</span>
+              <span className="font-mono">{block.state_root}</span>
             )}
             <CopyToClipboard value={block.state_root} />
           </dd>

src/app/pages/RoflAppDetailsPage/Enclaves.tsx

@@ -20,7 +20,7 @@ export const Enclaves: FC<EnclavesProps> = ({ policy }) => {
         {policy.enclaves.map((enclave: string) => (
           <tr key={enclave}>
             <td>
-              <span className="font-medium">{enclave}</span>
+              <span className="font-mono font-medium">{enclave}</span>
             </td>
             <td>
               <CopyToClipboard value={enclave} />

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -127,7 +127,7 @@ export const RoflAppDetailsView: FC<{
         <TeeRow policy={app.policy} />
         <DetailsRow title={t('rofl.appId')}>
           <WithHoverHighlighting address={app.id}>
-            <span className="font-medium">{app.id}</span>
+            <span className="font-mono font-medium">{app.id}</span>
           </WithHoverHighlighting>
           <CopyToClipboard value={app.id} />
         </DetailsRow>
@@ -168,7 +168,7 @@ export const RoflAppDetailsView: FC<{
               </div>
             }
           >
-            <span className="font-medium">{app.sek}</span> <CopyToClipboard value={app.sek} />
+            <span className="font-mono font-medium">{app.sek}</span> <CopyToClipboard value={app.sek} />
           </DetailsRow>
           <DetailsRow
             title={

src/app/pages/RoflAppInstanceDetailsPage/index.tsx

@@ -70,7 +70,7 @@ export const RoflAppInstanceDetailsView: FC<{
         </div>
       </dt>
       <dd>
-        <span>
+        <span className="font-mono font-medium text-primary">
           {instance.rak} <CopyToClipboard value={instance.rak} />
         </span>
       </dd>
@@ -83,7 +83,7 @@ export const RoflAppInstanceDetailsView: FC<{
         </div>
       </dt>
       <dd>
-        <span>
+        <span className="font-mono font-medium">
           {instance.rek} <CopyToClipboard value={instance.rek} />
         </span>
       </dd>
@@ -96,7 +96,7 @@ export const RoflAppInstanceDetailsView: FC<{
       </dd>
       <dt>{t('rofl.endorsingNodeId')}</dt>
       <dd>
-        <span>
+        <span className="font-mono font-medium">
           {instance.endorsing_node_id} <CopyToClipboard value={instance.endorsing_node_id} />
         </span>
       </dd>

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -430,7 +430,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.publicKey')}</dt>
                   <dd>
-                    <span className="font-normal">{envelope.public_key}</span>
+                    <span className="font-mono font-normal">{envelope.public_key}</span>
                   </dd>
                 </>
               )}
@@ -439,7 +439,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.dataNonce')}</dt>
                   <dd>
-                    <span className="font-normal">{envelope.data_nonce}</span>
+                    <span className="font-mono font-normal">{envelope.data_nonce}</span>
                   </dd>
                 </>
               )}
@@ -457,7 +457,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.resultNonce')}</dt>
                   <dd>
-                    <span className="font-normal">{envelope.result_nonce}</span>
+                    <span className="font-mono font-normal">{envelope.result_nonce}</span>
                   </dd>
                 </>
               )}

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -262,9 +262,9 @@ export const ValidatorDetailsView: FC<{
               )}
             </dd>
             <dt>{t('validator.entityId')}</dt>
-            <dd>{validator.entity_id}</dd>
+            <dd className="font-mono">{validator.entity_id}</dd>
             <dt>{t('common.nodeId')}</dt>
-            <dd>{validator.node_id}</dd>
+            <dd className="font-mono">{validator.node_id}</dd>
             {validator.node_id && (
               <>
                 <dt>{t('common.nodeAddress')}</dt>

src/styles/tailwind.css

@@ -1,6 +1,7 @@
 @import '@oasisprotocol/ui-library/src/styles/global.css';
 
 @theme {
+  --font-mono: 'Roboto Mono Variable', monospace;
   --color-theme-surface: var(--color-theme-surface);
   --color-theme-accent: var(--color-theme-accent);
   --color-theme-accent-light: var(--color-theme-accent-light);