mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
edc54514f1
* refactor widgets on home page * coming soon placeholder component * top accounts page * contract data * address ERC-20 tokens list * chain filter for address ERC-20 tokens * token select for address detailed view * address details fields * tokens table * stats widgets on home page * chain indicators graph on the home page * quick search * search results all tab * tabs and chain select on search results page * search results mobile view * add contract info to search and address details * add text filter for tokens and search improvements * load all results inside tab on search results page * token balance info * add support for domains in the full search * Multichain explorer Resolves #2989 * add envs validator for multichain * add some tests * fix search bar on search results page on mobile * home stats fixes * fix ts * optimize amount of queries on address page * add more contract info on address page * add enter key hint to search input * fix tests * fix test * update bg.primary css-variable on color theme change * sitemap for multichain * txs page: render first tab if blob tab is not available on the chain * filter out in active chains from chain select on address page and user ops page * add chain icon to advanced filter table * fix tooltip on entity with shield * fix ts * show contract implementations * fixes * add chain icon to all lists * refactor zetachain chains config type * use chain id as primary option instead of chain slug * refactor chain config type for multichain and essential dapps * refactor chain icon and chain select * rename chain-slug in chain_slug * change default radius of chain icon and update screenshots for multichain tests * change conditions for "isContract" and "isVerified" * test fixes * make shield optional for external chain entities * add chain icon to approvals lists * add stats page for multichain * add chain postfix to chart .png and .csv assets name * fix tests * sync verified contracts language filter and fix loading state in the search results page * fix sol2uml diagram and csv export * regcred from helmfile for review * link fixes * fix state for unknown address * fix incorrect chain in the context during spa transition to the same route on different chain * add links to stats widgets * add mixpanel to L2 demo values * show message of on-demand contract verification * fix screenshots --------- Co-authored-by: Nick Zenchik <[email protected]>
106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import { useRouter } from 'next/router';
|
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
|
|
import type * as stats from '@blockscout/stats-types';
|
|
import type { StatsIntervalIds } from 'types/client/stats';
|
|
import type { ExternalChainExtended } from 'types/externalChains';
|
|
|
|
import useApiQuery from 'lib/api/useApiQuery';
|
|
import getQueryParamString from 'lib/router/getQueryParamString';
|
|
import { STATS_CHARTS } from 'stubs/stats';
|
|
|
|
function isSectionMatches(section: stats.LineChartSection, currentSection: string): boolean {
|
|
return currentSection === 'all' || section.id === currentSection;
|
|
}
|
|
|
|
function isChartNameMatches(q: string, chart: stats.LineChartInfo) {
|
|
return chart.title.toLowerCase().includes(q.toLowerCase());
|
|
}
|
|
|
|
interface Props {
|
|
chain?: ExternalChainExtended;
|
|
}
|
|
|
|
export default function useStats({ chain }: Props = {}) {
|
|
const router = useRouter();
|
|
|
|
const { data, isPlaceholderData, isError } = useApiQuery('stats:lines', {
|
|
queryOptions: {
|
|
placeholderData: STATS_CHARTS,
|
|
},
|
|
chain,
|
|
});
|
|
|
|
const [ currentSection, setCurrentSection ] = useState('all');
|
|
const [ filterQuery, setFilterQuery ] = useState('');
|
|
const [ initialFilterQuery, setInitialFilterQuery ] = React.useState('');
|
|
const [ interval, setInterval ] = useState<StatsIntervalIds>('oneMonth');
|
|
const sectionIds = useMemo(() => data?.sections?.map(({ id }) => id), [ data ]);
|
|
|
|
React.useEffect(() => {
|
|
if (!isPlaceholderData && !isError) {
|
|
const chartId = getQueryParamString(router.query.chartId);
|
|
const chartName = data?.sections.map((section) => section.charts.find((chart) => chart.id === chartId)).filter(Boolean)[0]?.title;
|
|
if (chartName) {
|
|
setInitialFilterQuery(chartName);
|
|
setFilterQuery(chartName);
|
|
router.replace({ pathname: '/stats' }, undefined, { scroll: false });
|
|
}
|
|
}
|
|
// run only when data is loaded
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [ isPlaceholderData ]);
|
|
|
|
const displayedCharts = React.useMemo(() => {
|
|
return data?.sections
|
|
?.map((section) => {
|
|
const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(filterQuery, chart));
|
|
|
|
return {
|
|
...section,
|
|
charts,
|
|
};
|
|
}).filter((section) => section.charts.length > 0);
|
|
}, [ currentSection, data?.sections, filterQuery ]);
|
|
|
|
const handleSectionChange = useCallback((newSection: string) => {
|
|
setCurrentSection(newSection);
|
|
}, []);
|
|
|
|
const handleIntervalChange = useCallback((newInterval: StatsIntervalIds) => {
|
|
setInterval(newInterval);
|
|
}, []);
|
|
|
|
const handleFilterChange = useCallback((q: string) => {
|
|
setFilterQuery(q);
|
|
}, []);
|
|
|
|
return React.useMemo(() => ({
|
|
sections: data?.sections,
|
|
sectionIds,
|
|
isPlaceholderData,
|
|
isError,
|
|
initialFilterQuery,
|
|
filterQuery,
|
|
currentSection,
|
|
handleSectionChange,
|
|
interval,
|
|
handleIntervalChange,
|
|
handleFilterChange,
|
|
displayedCharts,
|
|
}), [
|
|
data,
|
|
sectionIds,
|
|
isPlaceholderData,
|
|
isError,
|
|
initialFilterQuery,
|
|
filterQuery,
|
|
currentSection,
|
|
handleSectionChange,
|
|
interval,
|
|
handleIntervalChange,
|
|
handleFilterChange,
|
|
displayedCharts,
|
|
]);
|
|
}
|