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())} + /> +
= ({ 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 ? ( + <> + + {realtoken.shortName} + {realtoken.tokenPrice} + {yamPriceValue} + + {yamDifferenceValue} ( + {tNumbers('percent', { value: yamDifferencePercent })}) + + {volumeValue} + + + + + + + + + ) : 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( + realtokensWithYam.map(() => { + return { + quantity: 0, + volume: 0, + days: [], + } + }), + ) + const [page, setPage] = useState(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 = 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
Loading...
+ } + + return ( + +
+ + router.push('/')}>{t('home')} + {t('title')} + +

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

+ +
+ + + + + + + + + {paginationYamStatistics.map((statistics, index) => ( + + ))} +
TokenToken PriceYam PriceYam Difference (30 days)Yam Volume
+ + + +
+
+
+ ) +} + +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)