Clean up token snapshot cards

oasisprotocol · Dec 2, 2024 · 37a2bc9 · 37a2bc9
1 parent 1b1c8d1
commit 37a2bc9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 83 deletions.
diff --git a/src/app/components/Snapshots/SnapshotCard.tsx b/src/app/components/Snapshots/SnapshotCard.tsx
@@ -82,17 +82,24 @@ type SnapshotTextCardProps = {
   label?: ReactNode
   title: ReactNode
   withContentPadding?: boolean
+  withConstantHeight?: boolean
 }
 
 export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
   children,
   label,
   title,
   withContentPadding,
+  withConstantHeight,
 }) => {
   return (
-    <SnapshotCard title={title} label={label} withContentPadding={withContentPadding}>
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', height: '100%' }}>
+    <SnapshotCard
+      title={title}
+      label={label}
+      withContentPadding={withContentPadding}
+      withConstantHeight={withConstantHeight}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
         <Typography
           component="span"
           sx={{

diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
@@ -1,12 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
-import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { SearchScope } from '../../../types/searchScope'
+import { useTokenInfo } from './hook'
 
 export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   const { t } = useTranslation()
@@ -15,25 +12,12 @@ export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }>
 
   const title = t('tokens.holders')
   return (
-    <SnapshotCard title={title} withConstantHeight>
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-              }}
-            >
-              {t('tokens.holdersValue', { value: token?.num_holders })}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+    <SnapshotTextCard title={title} withConstantHeight>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched && <>{t('tokens.holdersValue', { value: token?.num_holders })}</>
+      )}
+    </SnapshotTextCard>
   )
 }
diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx
@@ -1,49 +1,34 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
 import { SearchScope } from '../../../types/searchScope'
 import { RoundedBalance } from '../../components/RoundedBalance'
 
 export const TokenSupplyCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   const { t } = useTranslation()
-
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotCard
+    <SnapshotTextCard
       title={t('tokens.totalSupply')}
       label={isLoading ? <Skeleton variant="text" sx={{ width: '4em' }} /> : token?.symbol}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched &&
-          token && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-                textAlign: 'center',
-                width: '100%',
-              }}
-            >
-              {token.total_supply ? (
-                <RoundedBalance value={token.total_supply} compactLargeNumbers />
-              ) : (
-                t('common.not_defined')
-              )}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched &&
+        token && (
+          <>
+            {token.total_supply ? (
+              <RoundedBalance value={token.total_supply} compactLargeNumbers />
+            ) : (
+              t('common.not_defined')
+            )}
+          </>
+        )
+      )}
+    </SnapshotTextCard>
   )
 }
diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
@@ -1,10 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
 import Skeleton from '@mui/material/Skeleton'
+import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { useTokenInfo } from './hook'
 import { SearchScope } from '../../../types/searchScope'
 
@@ -16,25 +13,12 @@ export const TokenTotalTransactionsCard: FC<{ scope: SearchScope; address: strin
   const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
-    <SnapshotCard title={t('common.transfers')} withConstantHeight>
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="text" sx={{ width: '50%' }} />
-        ) : (
-          isFetched && (
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '32px',
-                fontWeight: 700,
-                color: COLORS.brandDark,
-              }}
-            >
-              {t('common.valuePair', { value: token?.num_transfers })}
-            </Typography>
-          )
-        )}
-      </Box>
-    </SnapshotCard>
+    <SnapshotTextCard title={t('common.transfers')} withConstantHeight>
+      {isLoading ? (
+        <Skeleton variant="text" />
+      ) : (
+        isFetched && <>{t('common.valuePair', { value: token?.num_transfers })}</>
+      )}
+    </SnapshotTextCard>
   )
 }