Yam statistics

src/components/layouts/Header.tsx

@@ -78,6 +78,12 @@ export const Header: FC = () => {
           onClick={() => router.push('/histories').then(() => close())}
         />
 
+        <NavLink
+          label={t('yamStatistics')}
+          leftSection={<IconFilePencil size={'1rem'} stroke={1.5} />}
+          onClick={() => router.push('/yamStatistics').then(() => close())}
+        />
+
         <div style={{ marginTop: '20px' }} />
         <NavLink
           component={'a'}

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."

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."

src/pages/yamStatistics.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+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'
+import {
+  UserRealtoken,
+  selectAllUserRealtokens,
+} from 'src/store/features/wallets/walletsSelector'
+
+const YamStatisticsRow: React.FC<{
+  statistics: YamStatistics
+  realtoken: UserRealtoken
+}> = ({ statistics, realtoken }) => {
+  const { t: tNumbers } = useTranslation('common', { keyPrefix: 'numbers' })
+  const yamPrice = statistics.volume / statistics.quantity
+  const yamDifference = yamPrice - realtoken.tokenPrice
+  const yamDifferencePercent = (yamDifference / realtoken.tokenPrice) * 100
+
+  const fallback = '-'
+  const yamPriceValue = useCurrencyValue(yamPrice, fallback)
+  const yamDifferenceValue = useCurrencyValue(yamDifference, fallback)
+  const volumeValue = useCurrencyValue(statistics.volume, fallback)
+
+  return yamPriceValue !== fallback ? (
+    <>
+      <tr key={realtoken.id}>
+        <td>{realtoken.shortName}</td>
+        <td>{realtoken.tokenPrice}</td>
+        <td>{yamPriceValue}</td>
+        <td>
+          {yamDifferenceValue} (
+          {tNumbers('percent', { value: yamDifferencePercent })})
+        </td>
+        <td>{volumeValue}</td>
+      </tr>
+
+      <tr>
+        <td colSpan={4}>
+          <Divider my={'xs'} />
+        </td>
+      </tr>
+    </>
+  ) : null
+}
+
+const YamStatisticsPage = () => {
+  const { t } = useTranslation('common', { keyPrefix: 'yamStatisticsPage' })
+  const router = useRouter()
+  const realtokens = useSelector(selectAllUserRealtokens)
+  const realtokensWithYam = useMemo(() => {
+    return realtokens.filter(
+      (realtoken) => realtoken.blockchainAddresses.xDai.contract,
+    )
+  }, [realtokens])
+
+  const [yamStatistics, setYamStatistics] = useState<YamStatistics[]>(
+    realtokensWithYam.map(() => {
+      return {
+        quantity: 0,
+        volume: 0,
+        days: [],
+      }
+    }),
+  )
+  const [page, setPage] = useState<number>(1)
+  const pageSize = 100
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  function onPageChange(page: number) {
+    setPage(page)
+    // Scroll to top of grid
+    document.getElementsByClassName('history-list')[0]?.scrollIntoView()
+  }
+
+  const yamStatisticsPromise: Promise<YamStatistics[]> = useMemo(async () => {
+    console.log({ realtokens })
+    if (!realtokensWithYam.length) return Promise.resolve([])
+    const statsPromises = realtokensWithYam.map((realtoken) =>
+      GetYamStatistics({ realtoken }),
+    )
+    const data = await Promise.all(statsPromises)
+    return data
+  }, [realtokensWithYam])
+
+  useEffect(() => {
+    setIsLoading(true)
+    yamStatisticsPromise.then((data) => {
+      setYamStatistics(data)
+      setIsLoading(false)
+      console.log({ data })
+    })
+  }, [yamStatisticsPromise])
+
+  const paginationYamStatistics: YamStatistics[] = useMemo(() => {
+    const start = (page - 1) * pageSize
+    const end = start + pageSize
+    return yamStatistics.slice(start, end)
+  }, [yamStatistics, page, pageSize])
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <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>
+  )
+}
+
+export default YamStatisticsPage

src/repositories/yamStatistics.repository.ts

@@ -18,8 +18,17 @@ export interface YamStatistics {
 export async function GetYamStatistics(params: {
   realtoken: APIRealToken
 }): Promise<YamStatistics> {
-  const address =
-    params.realtoken.blockchainAddresses.xDai.contract.toLowerCase()
+  const address = params.realtoken.blockchainAddresses.xDai.contract
+    ? params.realtoken.blockchainAddresses.xDai.contract.toLowerCase()
+    : null
+
+  if (!address) {
+    return {
+      quantity: 0,
+      volume: 0,
+      days: [],
+    }
+  }
 
   const volumes = await getRealtokenYamStatistics(address)