Prepare the TokenGasUsed card

(But disable it for now, since we are lacking the required information)

src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx

@@ -0,0 +1,44 @@
+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 { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { useLoaderData } from 'react-router-dom'
+import { useAccount } from '../AccountDetailsPage/hook'
+
+export const TokenGasUsedCard: FC = () => {
+  const { t } = useTranslation()
+  const scope = useRequiredScopeParam()
+
+  const address = useLoaderData() as string
+
+  const { account, isFetched } = useAccount(scope, address)
+
+  console.log('Account', account)
+
+  return (
+    <SnapshotCard title={t('common.gasUsed')} withConstantHeight>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+        {isFetched && (
+          <>
+            <Typography
+              component="span"
+              sx={{
+                fontSize: '48px',
+                fontWeight: 700,
+                color: COLORS.brandDark,
+              }}
+            >
+              {
+                // TODO: return "gas used" here, when it becomes available
+                account?.stats.num_txns
+              }
+            </Typography>
+          </>
+        )}
+      </Box>
+    </SnapshotCard>
+  )
+}

src/app/pages/TokenDashboardPage/TokenSnapshot.tsx

@@ -53,6 +53,7 @@ export const TokenSnapshot: FC = () => {
         </StyledGrid>
         <StyledGrid item xs={22} md={6}>
           <TokenTypeCard />
+          {/*<TokenGasUsedCard /> TODO: use this when gas used becomes available */}
         </StyledGrid>
       </Grid>
     </>