contracts counters

lib/api/resources.ts

@@ -17,7 +17,7 @@ import type { AddressesResponse } from 'types/api/addresses';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
 import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig } from 'types/api/contract';
-import type { VerifiedContractsResponse, VerifiedContractsFilters } from 'types/api/contracts';
+import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
@@ -264,6 +264,9 @@ export const RESOURCES = {
     paginationFields: [ 'items_count' as const, 'smart_contract_id' as const ],
     filterFields: [ 'q' as const, 'filter' as const ],
   },
+  verified_contracts_counters: {
+    path: '/api/v2/smart-contracts/counters',
+  },
 
   // TOKEN
   token: {
@@ -476,6 +479,7 @@ Q extends 'contract_methods_read_proxy' ? Array<SmartContractReadMethod> :
 Q extends 'contract_methods_write' ? Array<SmartContractWriteMethod> :
 Q extends 'contract_methods_write_proxy' ? Array<SmartContractWriteMethod> :
 Q extends 'verified_contracts' ? VerifiedContractsResponse :
+Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
 Q extends 'visualize_sol2uml' ? VisualizedContract :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
 never;

mocks/contracts/counters.ts

+import type { VerifiedContractsCounters } from 'types/api/contracts';
+
+export const verifiedContractsCountersMock: VerifiedContractsCounters = {
+  smart_contracts: '123456789',
+  new_smart_contracts_24h: '12345',
+  verified_smart_contracts: '654321',
+  new_verified_smart_contracts_24h: '0',
+};

types/api/contracts.ts

@@ -24,3 +24,10 @@ export interface VerifiedContractsFilters {
   q: string | undefined;
   filter: 'vyper' | 'solidity' | undefined;
 }
+
+export type VerifiedContractsCounters = {
+  new_smart_contracts_24h: string;
+  new_verified_smart_contracts_24h: string;
+  smart_contracts: string;
+  verified_smart_contracts: string;
+}

ui/pages/VerifiedContracts.pw.tsx

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as textAdMock from 'mocks/ad/textAd';
+import { verifiedContractsCountersMock } from 'mocks/contracts/counters';
 import * as verifiedContractsMock from 'mocks/contracts/index';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
@@ -9,6 +10,7 @@ import buildApiUrl from 'playwright/utils/buildApiUrl';
 import VerifiedContracts from './VerifiedContracts';
 
 const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
+const VERIFIED_CONTRACTS_COUNTERS_API_URL = buildApiUrl('verified_contracts_counters');
 
 test.beforeEach(async({ page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
@@ -28,6 +30,10 @@ test('base view +@mobile', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(verifiedContractsMock.baseResponse),
   }));
+  await page.route(VERIFIED_CONTRACTS_COUNTERS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(verifiedContractsCountersMock),
+  }));
 
   const component = await mount(
     <TestApp>

ui/pages/VerifiedContracts.tsx

-import { Box, Flex, Hide, Show } from '@chakra-ui/react';
+import { Box, Hide, HStack, Show } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -16,6 +16,7 @@ import Pagination from 'ui/shared/Pagination';
 import Sort from 'ui/shared/sort/Sort';
 import type { SortField, Sort as TSort } from 'ui/verifiedContracts/utils';
 import { SORT_OPTIONS, sortFn, getNextSortValue } from 'ui/verifiedContracts/utils';
+import VerifiedContractsCounters from 'ui/verifiedContracts/VerifiedContractsCounters';
 import VerifiedContractsFilter from 'ui/verifiedContracts/VerifiedContractsFilter';
 import VerifiedContractsList from 'ui/verifiedContracts/VerifiedContractsList';
 import VerifiedContractsTable from 'ui/verifiedContracts/VerifiedContractsTable';
@@ -33,6 +34,8 @@ const VerifiedContracts = () => {
     filters: { q: debouncedSearchTerm, filter: type },
   });
 
+  // const counters = useQuery
+
   const handleSearchTermChange = React.useCallback((value: string) => {
     onFilterChange({ q: value, filter: type });
     setSearchTerm(value);
@@ -81,20 +84,16 @@ const VerifiedContracts = () => {
 
   const actionBar = (
     <>
-      <Show below="lg" ssr={ false }>
-        <Flex columnGap={ 3 } mb={ 6 }>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { typeFilter }
+        { sortButton }
+        { filterInput }
+      </HStack>
+      <ActionBar mt={ -6 }>
+        <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
           { typeFilter }
-          { sortButton }
           { filterInput }
-        </Flex>
-      </Show>
-      <ActionBar mt={ -6 }>
-        <Hide below="lg" ssr={ false }>
-          <Flex columnGap={ 3 }>
-            { typeFilter }
-            { filterInput }
-          </Flex>
-        </Hide>
+        </HStack>
         { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
@@ -116,6 +115,7 @@ const VerifiedContracts = () => {
   return (
     <Box>
       <PageTitle text="Verified contracts" withTextAd/>
+      <VerifiedContractsCounters/>
       <DataListDisplay
         isError={ isError }
         isLoading={ isLoading }

ui/verifiedContracts/VerifiedContractsCounters.tsx

+import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+
+const VerifiedContractsCounters = () => {
+  const countersQuery = useApiQuery('verified_contracts_counters');
+
+  const itemBgColor = useColorModeValue('blue.50', 'blue.800');
+  const renderItem = (name: string, total: string, new24: string) => {
+    return (
+      <Box
+        w={{ base: '100%', lg: 'calc((100% - 12px)/2)' }}
+        borderRadius="12px"
+        backgroundColor={ itemBgColor }
+        p={ 3 }
+      >
+        <Text variant="secondary" fontSize="xs">{ name }</Text>
+        <Flex alignItems="baseline">
+          <Text fontWeight={ 600 } mr={ 2 } fontSize="lg">{ Number(total).toLocaleString('en') }</Text>
+          <Text fontWeight={ 600 } mr={ 1 } fontSize="lg" color="green.500">+{ new24 }</Text>
+          <Text variant="secondary" fontSize="sm">(24h)</Text>
+        </Flex>
+      </Box>
+    );
+  };
+
+  if (countersQuery.isError) {
+    return null;
+  }
+
+  const content = (() => {
+    if (countersQuery.isLoading) {
+      const item = <Skeleton w={{ base: '100%', lg: 'calc((100% - 12px)/2)' }} h="69px" borderRadius="12px"/>;
+      return (
+        <>
+          { item }
+          { item }
+        </>
+      );
+    }
+
+    return (
+      <>
+        { renderItem('Total contracts', countersQuery.data.smart_contracts, countersQuery.data.new_smart_contracts_24h) }
+        { renderItem('Verified contracts', countersQuery.data.verified_smart_contracts, countersQuery.data.new_verified_smart_contracts_24h) }
+      </>
+    );
+  })();
+
+  return (
+    <Flex columnGap={ 3 } rowGap={ 3 } flexDirection={{ base: 'column', lg: 'row' }} mb={ 6 }>
+      { content }
+    </Flex>
+  );
+};
+
+export default VerifiedContractsCounters;