feat: improve style

RealToken-Community · Aug 17, 2024 · 0a3d7e8 · 0a3d7e8
1 parent 31bf8c9
commit 0a3d7e8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 28 deletions.
diff --git a/src/i18next/locales/en/common.json b/src/i18next/locales/en/common.json
@@ -370,6 +370,10 @@
       "ownedRent": "My rents"
     }
   },
+  "yamStatisticsPage": {
+    "home": "Home",
+    "title": "Secondary market statistics (Yam)"
+  },
   "initialTransfersLoader": {
     "title": "Initial data loading",
     "description": "Retrieving your transactions in progress. This loading can take some time depending on the number of transactions performed (10-20 seconds / 1000 transactions). On your next visits, only new transactions will be retrieved."

diff --git a/src/i18next/locales/fr/common.json b/src/i18next/locales/fr/common.json
@@ -372,6 +372,10 @@
       "ownedRent": "Mes changements de loyers"
     }
   },
+  "yamStatisticsPage": {
+    "home": "Accueil",
+    "title": "Statistiques marché secondaire (Yam)"
+  },
   "initialTransfersLoader": {
     "title": "Chargement initial des données",
     "description": "Récupération de vos transactions en cours. Ce chargement peut prendre un certain temps en fonction du nombre de transactions effecutées (10-20 secondes / 1000 transactions). Lors de vos prochaines visites, seul les nouvelles transactions seront récupérées."

diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx
@@ -2,7 +2,16 @@ import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Divider, Pagination } from '@mantine/core'
+import { useRouter } from 'next/router'
+
+import {
+  Anchor,
+  Breadcrumbs,
+  Divider,
+  Flex,
+  Group,
+  Pagination,
+} from '@mantine/core'
 
 import { useCurrencyValue } from 'src/hooks/useCurrencyValue'
 import { GetYamStatistics, YamStatistics } from 'src/repositories'
@@ -48,6 +57,8 @@ const YamStatisticsRow: React.FC<{
 }
 
 const YamStatisticsPage = () => {
+  const { t } = useTranslation('common', { keyPrefix: 'yamStatisticsPage' })
+  const router = useRouter()
   const realtokens = useSelector(selectAllUserRealtokens)
   const realtokensWithYam = useMemo(() => {
     return realtokens.filter(
@@ -105,33 +116,53 @@ const YamStatisticsPage = () => {
   }
 
   return (
-    <div>
-      <h1>Yam Statistics</h1>
-      <table style={{ width: '100%' }}>
-        <tr style={{ textAlign: 'left' }}>
-          <th>Token</th>
-          <th>Token Price</th>
-          <th>Yam Price</th>
-          <th>Yam Difference (30 days)</th>
-          <th>Yam Volume</th>
-        </tr>
-        {paginationYamStatistics.map((statistics, index) => (
-          <YamStatisticsRow
-            key={index}
-            statistics={statistics}
-            realtoken={realtokens[index]}
-          />
-        ))}
-      </table>
-      <Pagination
-        value={page}
-        total={Math.ceil(yamStatistics.length / pageSize)}
-        boundaries={1}
-        siblings={1}
-        size={'sm'}
-        onChange={onPageChange}
-      />
-    </div>
+    <Flex my={'lg'} mx={0} direction={'column'} align={'center'}>
+      <div
+        style={{ maxWidth: '900px', width: '100%' }}
+        className={'history-list'}
+      >
+        <Breadcrumbs>
+          <Anchor onClick={() => router.push('/')}>{t('home')}</Anchor>
+          {t('title')}
+        </Breadcrumbs>
+        <h2 style={{ textAlign: 'center' }}>{`${t('title')}`}</h2>
+
+        <div style={{ width: '100%', marginTop: '20px' }}>
+          <table style={{ width: '100%' }}>
+            <tr style={{ textAlign: 'left' }}>
+              <th>Token</th>
+              <th>Token Price</th>
+              <th>Yam Price</th>
+              <th>Yam Difference (30 days)</th>
+              <th>Yam Volume</th>
+            </tr>
+            {paginationYamStatistics.map((statistics, index) => (
+              <YamStatisticsRow
+                key={index}
+                statistics={statistics}
+                realtoken={realtokens[index]}
+              />
+            ))}
+          </table>
+          <Group
+            justify={'center'}
+            align={'center'}
+            gap={8}
+            py={'xs'}
+            style={{ width: '100%' }}
+          >
+            <Pagination
+              value={page}
+              total={Math.ceil(yamStatistics.length / pageSize)}
+              boundaries={1}
+              siblings={1}
+              size={'sm'}
+              onChange={onPageChange}
+            />
+          </Group>
+        </div>
+      </div>
+    </Flex>
   )
 }