From 6beb363162e26b37c96bdf9dde410f709a15472b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 18:02:44 +0200 Subject: [PATCH 1/7] feat: create yam statics stics page --- src/components/layouts/Header.tsx | 6 ++++++ src/pages/yamStatistics.tsx | 36 +++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/pages/yamStatistics.tsx diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx index 0fedc02..c76fc3c 100644 --- a/src/components/layouts/Header.tsx +++ b/src/components/layouts/Header.tsx @@ -78,6 +78,12 @@ export const Header: FC = () => { onClick={() => router.push('/histories').then(() => close())} /> + } + onClick={() => router.push('/yamStatistics').then(() => close())} + /> +
{ + return ( +
+

Yam Statistics

+ + + + + + + + + + + + + + + + + + + + + + +
Token PriceYam PriceYam Difference (30 days)Yam Volume
Token PriceYam PriceYam DifferenceYam Volume
+ +
Token PriceYam PriceYam DifferenceYam Volume
+
+ ) +} + +export default YamStatistics From 0b29e7deda53b739446ba12e3b0c0627dcc18802 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 19:32:06 +0200 Subject: [PATCH 2/7] feat: add yam statistics for all RealT Tokens on Gnosis (who have Gnosis chain contract prop) --- src/pages/yamStatistics.tsx | 111 +++++++++++++++---- src/repositories/yamStatistics.repository.ts | 13 ++- 2 files changed, 103 insertions(+), 21 deletions(-) diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index c0a4118..4532dde 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -1,6 +1,88 @@ +import { useEffect, useMemo, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' + import { Divider } from '@mantine/core' -const YamStatistics = () => { +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 yamPriceValue = useCurrencyValue(yamPrice) + const yamDifferenceValue = useCurrencyValue(yamDifference) + const volumeValue = useCurrencyValue(statistics.volume) + + return ( + <> + + {realtoken.tokenPrice} + {yamPriceValue} + + {yamDifferenceValue} ( + {tNumbers('percent', { value: yamDifferencePercent })}) + + {volumeValue} + + + + + + + + + ) +} + +const YamStatisticsPage = () => { + const realtokens = useSelector(selectAllUserRealtokens) + + const [yamStatistics, setYamStatistics] = useState( + realtokens.map(() => { + return { + quantity: 0, + volume: 0, + days: [], + } + }), + ) + + const [isLoading, setIsLoading] = useState(true) + + const yamStatisticsPromise: Promise = useMemo(async () => { + console.log({ realtokens }) + if (!realtokens.length) return Promise.resolve([]) + const statsPromises = realtokens.map((realtoken) => + GetYamStatistics({ realtoken }), + ) + const data = await Promise.all(statsPromises) + return data + }, [realtokens]) + + useEffect(() => { + setIsLoading(true) + yamStatisticsPromise.then((data) => { + setYamStatistics(data) + setIsLoading(false) + console.log({ data }) + }) + }, [yamStatisticsPromise]) + + if (isLoading) { + return
Loading...
+ } + return (

Yam Statistics

@@ -11,26 +93,17 @@ const YamStatistics = () => { Yam Difference (30 days) Yam Volume - - Token Price - Yam Price - Yam Difference - Yam Volume - - - - - - - - Token Price - Yam Price - Yam Difference - Yam Volume - + {yamStatistics && + yamStatistics.map((statistics, index) => ( + + ))}
) } -export default YamStatistics +export default YamStatisticsPage diff --git a/src/repositories/yamStatistics.repository.ts b/src/repositories/yamStatistics.repository.ts index bb4bdea..260e735 100644 --- a/src/repositories/yamStatistics.repository.ts +++ b/src/repositories/yamStatistics.repository.ts @@ -18,8 +18,17 @@ export interface YamStatistics { export async function GetYamStatistics(params: { realtoken: APIRealToken }): Promise { - 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) From 7568a40a893b8931d1324f09fb857268172b6d8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 19:37:52 +0200 Subject: [PATCH 3/7] feat: mask tokens with no volume --- src/pages/yamStatistics.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index 4532dde..e9b35f2 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -20,11 +20,12 @@ const YamStatisticsRow: React.FC<{ const yamDifference = yamPrice - realtoken.tokenPrice const yamDifferencePercent = (yamDifference / realtoken.tokenPrice) * 100 - const yamPriceValue = useCurrencyValue(yamPrice) - const yamDifferenceValue = useCurrencyValue(yamDifference) - const volumeValue = useCurrencyValue(statistics.volume) + const fallback = '-' + const yamPriceValue = useCurrencyValue(yamPrice, fallback) + const yamDifferenceValue = useCurrencyValue(yamDifference, fallback) + const volumeValue = useCurrencyValue(statistics.volume, fallback) - return ( + return yamPriceValue !== fallback ? ( <> {realtoken.tokenPrice} @@ -42,7 +43,7 @@ const YamStatisticsRow: React.FC<{ - ) + ) : null } const YamStatisticsPage = () => { From e3c048df8ee27bea3a04d6084c9bcc07bc5e4098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 19:39:19 +0200 Subject: [PATCH 4/7] fix: add token name --- src/pages/yamStatistics.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index e9b35f2..9c023fd 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -28,6 +28,7 @@ const YamStatisticsRow: React.FC<{ return yamPriceValue !== fallback ? ( <> + {realtoken.shortName} {realtoken.tokenPrice} {yamPriceValue} @@ -89,6 +90,7 @@ const YamStatisticsPage = () => {

Yam Statistics

+ From 31bf8c922e5a79632146ee980eb0657f50a17a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 19:56:11 +0200 Subject: [PATCH 5/7] feat: add pagination --- src/pages/yamStatistics.tsx | 52 +++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index 9c023fd..4c7dd7e 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' -import { Divider } from '@mantine/core' +import { Divider, Pagination } from '@mantine/core' import { useCurrencyValue } from 'src/hooks/useCurrencyValue' import { GetYamStatistics, YamStatistics } from 'src/repositories' @@ -49,9 +49,14 @@ const YamStatisticsRow: React.FC<{ const YamStatisticsPage = () => { const realtokens = useSelector(selectAllUserRealtokens) + const realtokensWithYam = useMemo(() => { + return realtokens.filter( + (realtoken) => realtoken.blockchainAddresses.xDai.contract, + ) + }, [realtokens]) const [yamStatistics, setYamStatistics] = useState( - realtokens.map(() => { + realtokensWithYam.map(() => { return { quantity: 0, volume: 0, @@ -59,18 +64,26 @@ const YamStatisticsPage = () => { } }), ) + const [page, setPage] = useState(1) + const pageSize = 25 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 = useMemo(async () => { console.log({ realtokens }) - if (!realtokens.length) return Promise.resolve([]) - const statsPromises = realtokens.map((realtoken) => + if (!realtokensWithYam.length) return Promise.resolve([]) + const statsPromises = realtokensWithYam.map((realtoken) => GetYamStatistics({ realtoken }), ) const data = await Promise.all(statsPromises) return data - }, [realtokens]) + }, [realtokensWithYam]) useEffect(() => { setIsLoading(true) @@ -81,6 +94,12 @@ const YamStatisticsPage = () => { }) }, [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
Loading...
} @@ -96,15 +115,22 @@ const YamStatisticsPage = () => { - {yamStatistics && - yamStatistics.map((statistics, index) => ( - - ))} + {paginationYamStatistics.map((statistics, index) => ( + + ))}
Token Token Price Yam Price Yam Difference (30 days)Yam Difference (30 days) Yam Volume
+
) } From 0a3d7e812e2329408a712a57f81d268bb3a549b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 20:05:44 +0200 Subject: [PATCH 6/7] feat: improve style --- src/i18next/locales/en/common.json | 4 ++ src/i18next/locales/fr/common.json | 4 ++ src/pages/yamStatistics.tsx | 87 ++++++++++++++++++++---------- 3 files changed, 67 insertions(+), 28 deletions(-) diff --git a/src/i18next/locales/en/common.json b/src/i18next/locales/en/common.json index 87059e2..d344a87 100644 --- 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 index e7fb852..961ed5c 100644 --- 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 index 4c7dd7e..8955b15 100644 --- 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 ( -
-

Yam Statistics

- - - - - - - - - {paginationYamStatistics.map((statistics, index) => ( - - ))} -
TokenToken PriceYam PriceYam Difference (30 days)Yam Volume
- -
+ +
+ + router.push('/')}>{t('home')} + {t('title')} + +

{`${t('title')}`}

+ +
+ + + + + + + + + {paginationYamStatistics.map((statistics, index) => ( + + ))} +
TokenToken PriceYam PriceYam Difference (30 days)Yam Volume
+ + + +
+
+ ) } From ddfc70a29a02763391abb07ddff8443da01519a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nandy=20B=C3=A2?= Date: Sat, 17 Aug 2024 20:07:06 +0200 Subject: [PATCH 7/7] feat: change token per page to 100 --- src/pages/yamStatistics.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index 8955b15..e130f6b 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -76,7 +76,7 @@ const YamStatisticsPage = () => { }), ) const [page, setPage] = useState(1) - const pageSize = 25 + const pageSize = 100 const [isLoading, setIsLoading] = useState(true)