Abbreviate transaction table column title on tablet

oasisprotocol · Jun 14, 2023 · 279ebaf · 279ebaf
1 parent a2633cc
commit 279ebaf
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/.changelog/532.bugfix.2.md b/.changelog/532.bugfix.2.md
@@ -0,0 +1 @@
+Abbreviate transaction table column title on laptop
diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx
@@ -6,6 +6,7 @@ import { paraTimesConfig } from '../../../config'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { BlockHashLink, BlockLink } from './BlockLink'
 import { formatDistanceStrict } from '../../utils/dateFormatter'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 export type TableRuntimeBlock = RuntimeBlock & {
   markAsNew?: boolean
@@ -28,12 +29,15 @@ type BlocksProps = {
 export const Blocks = (props: BlocksProps) => {
   const { isLoading, blocks, verbose, pagination, limit } = props
   const { t } = useTranslation()
-
+  const { isLaptop } = useScreenSize()
   const tableColumns: TableColProps[] = [
     { content: t('common.fill') },
     { content: t('common.height'), align: TableCellAlign.Right },
     { content: t('common.age'), align: TableCellAlign.Right },
-    { content: t('common.transactions'), align: TableCellAlign.Right },
+    {
+      content: isLaptop ? t('common.transactionAbbreviation') : t('common.transactions'),
+      align: TableCellAlign.Right,
+    },
     ...(verbose ? [{ content: t('common.hash') }] : []),
     { content: t('common.size'), align: TableCellAlign.Right },
     ...(verbose ? [{ content: t('common.gasUsed'), align: TableCellAlign.Right }] : []),

diff --git a/src/app/hooks/useScreensize.ts b/src/app/hooks/useScreensize.ts
@@ -6,6 +6,7 @@ export const useScreenSize = () => {
   return {
     isMobile: useMediaQuery(theme.breakpoints.down('sm')),
     isTablet: useMediaQuery(theme.breakpoints.down('md')),
-    isDesktop: useMediaQuery(theme.breakpoints.up('md')),
+    isLaptop: useMediaQuery(theme.breakpoints.down('lg')),
+    isDesktop: useMediaQuery(theme.breakpoints.up('lg')),
   }
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -76,6 +76,7 @@
     "to": "To",
     "totalSent": "Total Sent",
     "transactions": "Transactions",
+    "transactionAbbreviation": "Txs",
     "txnFee": "Txn Fee",
     "type": "Type",
     "unknown": "Unknown",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Abbreviate transaction table column title on laptop