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