Files
explore/ui/verifiedContracts/VerifiedContractsCounters.tsx
edc54514f1 OP Superchain explorer: aggregated views (#3040)
* 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]>
2025-11-18 09:44:22 +01:00

77 lines
3.1 KiB
TypeScript

import { Box } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import { useMultichainContext } from 'lib/contexts/multichain';
import { VERIFIED_CONTRACTS_COUNTERS, VERIFIED_CONTRACTS_COUNTERS_MICROSERVICE } from 'stubs/contract';
import StatsWidget from 'ui/shared/stats/StatsWidget';
const VerifiedContractsCounters = () => {
const multichainContext = useMultichainContext();
const chainConfig = multichainContext?.chain.app_config || config;
const isStatsFeatureEnabled = chainConfig.features.stats.isEnabled;
const countersStatsQuery = useApiQuery('stats:pages_contracts', {
queryOptions: {
enabled: isStatsFeatureEnabled,
placeholderData: isStatsFeatureEnabled ? VERIFIED_CONTRACTS_COUNTERS_MICROSERVICE : undefined,
},
});
const countersApiQuery = useApiQuery('general:verified_contracts_counters', {
queryOptions: {
enabled: !isStatsFeatureEnabled,
placeholderData: !isStatsFeatureEnabled ? VERIFIED_CONTRACTS_COUNTERS : undefined,
},
});
if (!(isStatsFeatureEnabled ? countersStatsQuery.data : countersApiQuery.data)) {
return null;
}
const isLoading = isStatsFeatureEnabled ? countersStatsQuery.isPlaceholderData : countersApiQuery.isPlaceholderData;
const contractsCount = isStatsFeatureEnabled ? countersStatsQuery.data?.total_contracts?.value : countersApiQuery.data?.smart_contracts;
const newContractsCount = isStatsFeatureEnabled ? countersStatsQuery.data?.new_contracts_24h?.value : countersApiQuery.data?.new_smart_contracts_24h;
const verifiedContractsCount = isStatsFeatureEnabled ?
countersStatsQuery.data?.total_verified_contracts?.value :
countersApiQuery.data?.verified_smart_contracts;
const newVerifiedContractsCount = isStatsFeatureEnabled ?
countersStatsQuery.data?.new_verified_contracts_24h?.value :
countersApiQuery.data?.new_verified_smart_contracts_24h;
return (
<Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
<StatsWidget
label="Total contracts"
value={ Number(contractsCount).toLocaleString() }
diff={ newContractsCount }
diffFormatted={ Number(newContractsCount).toLocaleString() }
isLoading={ isLoading }
// there is no stats for contracts growth for now
// href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'contractsGrowth' } } : undefined }
/>
<StatsWidget
label="Verified contracts"
value={ Number(verifiedContractsCount).toLocaleString() }
diff={ newVerifiedContractsCount }
diffFormatted={ Number(newVerifiedContractsCount).toLocaleString() }
isLoading={ isLoading }
href={
chainConfig.features.stats.isEnabled ?
{
pathname: '/stats/[id]',
query: { id: 'verifiedContractsGrowth', ...(multichainContext?.chain.id ? { chain_id: multichainContext.chain.id } : {}) },
} :
undefined
}
/>
</Box>
);
};
export default VerifiedContractsCounters;