diff --git a/src/components/assetsView/views/AssetGrid.tsx b/src/components/assetsView/views/AssetGrid.tsx index 930c9a6..167d124 100644 --- a/src/components/assetsView/views/AssetGrid.tsx +++ b/src/components/assetsView/views/AssetGrid.tsx @@ -40,7 +40,7 @@ export const AssetGrid: FC<{ realtokens: (UserRealtoken | RWARealtoken)[] }> = ( }, [props.realtokens, page, pageSize]) // Go to first page when data changes (e.g. search, filter, order, ...) - // useEffect(() => setPage(1), [props.realtokens]) + useEffect(() => setPage(1), [props.realtokens, pageSize]) const combobox = useCombobox({ onDropdownClose: () => combobox.resetSelectedOption(), diff --git a/src/i18next/locales/en/common.json b/src/i18next/locales/en/common.json index f5facca..32ee90b 100644 --- a/src/i18next/locales/en/common.json +++ b/src/i18next/locales/en/common.json @@ -3,6 +3,7 @@ "title": "Realtoken Dashboard", "transactions": "My transactions", "histories": "Changes history", + "yamStatistics": "Secondary market statistics (Yam)", "documentation": "Community Wiki", "home": "Home", "realt": "RealT", @@ -378,7 +379,15 @@ }, "yamStatisticsPage": { "home": "Home", - "title": "Secondary market statistics (Yam)" + "title": "Secondary market statistics (Yam)", + "filter": { + "field": "Filter", + "all": "All", + "owned": "My properties", + "subsidized": "Subsidized", + "fullySubsidized": "Fully subsidized", + "notSubsidized": "Not subsidized" + } }, "initialTransfersLoader": { "title": "Initial data loading", diff --git a/src/i18next/locales/fr/common.json b/src/i18next/locales/fr/common.json index f5bdbfa..096f2d4 100644 --- a/src/i18next/locales/fr/common.json +++ b/src/i18next/locales/fr/common.json @@ -3,6 +3,7 @@ "title": "Realtoken Dashboard", "transactions": "Mes transactions", "histories": "Historique des changements", + "yamStatistics": "Statistiques marché secondaire (Yam)", "documentation": "Wiki communautaire", "home": "Accueil", "realt": "RealT", @@ -379,7 +380,15 @@ }, "yamStatisticsPage": { "home": "Accueil", - "title": "Statistiques marché secondaire (Yam)" + "title": "Statistiques marché secondaire (Yam)", + "filter": { + "field": "Filtre", + "all": "Toutes les propriétés", + "owned": "Mes propriétés", + "subsidized": "Subventionnés", + "fullySubsidized": "Entièrement subventionnés", + "notSubsidized": "Non subventionnés" + } }, "initialTransfersLoader": { "title": "Chargement initial des données", diff --git a/src/pages/yamStatistics.tsx b/src/pages/yamStatistics.tsx index 86f7cd8..dba6596 100644 --- a/src/pages/yamStatistics.tsx +++ b/src/pages/yamStatistics.tsx @@ -11,8 +11,11 @@ import { Flex, Group, Pagination, + Select, } from '@mantine/core' +import { AssetSubsidyType } from 'src/components/assetsView' +import { useInputStyles } from 'src/components/inputs/useInputStyles' import { useCurrencyValue } from 'src/hooks/useCurrencyValue' import { GetYamStatistics, YamStatistics } from 'src/repositories' import { @@ -22,14 +25,16 @@ import { const YamStatisticsRow: React.FC<{ statistics: YamStatistics - realtoken: UserRealtoken + realtoken: UserRealtoken | null }> = ({ statistics, realtoken }) => { + if (!realtoken) return null 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 tokenPriceValue = useCurrencyValue(realtoken.tokenPrice, fallback) const yamPriceValue = useCurrencyValue(yamPrice, fallback) const yamDifferenceValue = useCurrencyValue(yamDifference, fallback) const volumeValue = useCurrencyValue(statistics.volume, fallback) @@ -38,7 +43,7 @@ const YamStatisticsRow: React.FC<{ <> {realtoken.shortName} - {realtoken.tokenPrice} + {tokenPriceValue} {yamPriceValue} {yamDifferenceValue} ( @@ -78,6 +83,12 @@ const YamStatisticsPage = () => { const [page, setPage] = useState(1) const pageSize = 100 + const [currentFilter, setCurrentFilter] = + useState('owned') + const filteredRealtokens = useMemo(() => { + return getFilteredRealtokens(currentFilter, realtokensWithYam) + }, [realtokensWithYam, currentFilter]) + const [isLoading, setIsLoading] = useState(true) function onPageChange(page: number) { @@ -87,13 +98,14 @@ const YamStatisticsPage = () => { } const yamStatisticsPromise: Promise = useMemo(async () => { - if (!realtokensWithYam.length) return Promise.resolve([]) - const statsPromises = realtokensWithYam.map((realtoken) => + if (!filteredRealtokens.length) return Promise.resolve([]) + + const statsPromises = filteredRealtokens.map((realtoken) => GetYamStatistics({ realtoken }), ) const data = await Promise.all(statsPromises) return data - }, [realtokensWithYam]) + }, [filteredRealtokens, currentFilter]) useEffect(() => { setIsLoading(true) @@ -125,6 +137,8 @@ const YamStatisticsPage = () => {

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

+ +
@@ -138,7 +152,11 @@ const YamStatisticsPage = () => { ))}
@@ -164,4 +182,78 @@ const YamStatisticsPage = () => { ) } +const getFilteredRealtokens = ( + filter: YamStatisticsPageFilterValue, + realtokens: UserRealtoken[], +) => { + switch (filter) { + case 'all': + return realtokens + case 'owned': + return realtokens.filter((realtoken) => realtoken.amount > 0) + case AssetSubsidyType.SUBSIDIZED: + return realtokens.filter((realtoken) => realtoken.subsidyStatus !== 'no') + case AssetSubsidyType.FULLY_SUBSIDIZED: + return realtokens.filter( + (realtoken) => + realtoken.subsidyStatus === 'yes' && !!realtoken.subsidyStatusValue, + ) + default: + return realtokens + } +} + +type YamStatisticsPageFilterValue = + | 'all' + | 'owned' + | AssetSubsidyType.SUBSIDIZED + | AssetSubsidyType.FULLY_SUBSIDIZED + | AssetSubsidyType.NOT_SUBSIDIZED + +const YamStatisticsPageFilter = ({ + currentFilter, + setCurrentFilter, +}: { + currentFilter: YamStatisticsPageFilterValue + setCurrentFilter: (value: YamStatisticsPageFilterValue) => void +}) => { + const { t } = useTranslation('common', { + keyPrefix: 'yamStatisticsPage.filter', + }) + const { classes: inputClasses } = useInputStyles() + + const filterOptions: { + value: YamStatisticsPageFilterValue + label: string + }[] = [ + { value: 'all', label: t('all') }, + { value: 'owned', label: t('owned') }, + { value: AssetSubsidyType.SUBSIDIZED, label: t('subsidized') }, + { value: AssetSubsidyType.FULLY_SUBSIDIZED, label: t('fullySubsidized') }, + { + value: AssetSubsidyType.NOT_SUBSIDIZED, + label: t('notSubsidized'), + }, + ] + + return ( + +
+