Move Typography into AccountLink

oasisprotocol · Mar 17, 2023 · 1c1563e · 1c1563e
1 parent e1368b6
commit 1c1563e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/app/components/Account/AccountLink.tsx b/src/app/components/Account/AccountLink.tsx
@@ -6,16 +6,22 @@ import Link from '@mui/material/Link'
 import { TrimLinkLabel } from '../TrimLinkLabel'
 import { RouteUtils } from '../../utils/route-utils'
 import { Layer } from '../../../oasis-indexer/api'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
 
 export const AccountLink: FC<{ address: string; layer: Layer }> = ({ address, layer }) => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const to = RouteUtils.getAccountRoute(address, layer)
-  return isMobile ? (
-    <TrimLinkLabel label={address} to={to} />
-  ) : (
-    <Link component={RouterLink} to={to}>
-      {address}
-    </Link>
+  return (
+    <Typography variant="mono" component="span" sx={{ color: COLORS.brandDark, fontWeight: 700 }}>
+      {isMobile ? (
+        <TrimLinkLabel label={address} to={to} />
+      ) : (
+        <Link component={RouterLink} to={to}>
+          {address}
+        </Link>
+      )}
+    </Typography>
   )
 }
diff --git a/src/app/pages/TransactionDetailPage/index.tsx b/src/app/pages/TransactionDetailPage/index.tsx
@@ -182,19 +182,15 @@ export const TransactionDetailView: FC<{
 
           <dt>{t('common.from')}</dt>
           <dd>
-            <Typography variant="mono" component="span" sx={{ color: COLORS.brandDark, fontWeight: 700 }}>
-              <AccountLink address={transaction.sender_0} layer={transaction.layer} />
-            </Typography>
+            <AccountLink address={transaction.sender_0} layer={transaction.layer} />
             <CopyToClipboard value={transaction.sender_0} label={' '} />
           </dd>
 
           {transaction.to && (
             <>
               <dt>{t('common.to')}</dt>
               <dd>
-                <Typography variant="mono" component="span" sx={{ color: COLORS.brandDark, fontWeight: 700 }}>
-                  <AccountLink address={transaction.to} layer={transaction.layer} />
-                </Typography>
+                <AccountLink address={transaction.to} layer={transaction.layer} />
                 <CopyToClipboard value={transaction.to} label={' '} />
               </dd>
             </>