fixes

ui/pages/VerifiedContracts.tsx

@@ -34,8 +34,6 @@ const VerifiedContracts = () => {
     filters: { q: debouncedSearchTerm, filter: type },
   });
 
-  // const counters = useQuery
-
   const handleSearchTermChange = React.useCallback((value: string) => {
     onFilterChange({ q: value, filter: type });
     setSearchTerm(value);

ui/verifiedContracts/VerifiedContractsCounters.tsx

-import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 
+import VerifiedContractsCountersItem from './VerifiedContractsCountersItem';
+
 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;
   }
@@ -42,8 +25,16 @@ const VerifiedContractsCounters = () => {
 
     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) }
+        <VerifiedContractsCountersItem
+          name="Total contracts"
+          total={ countersQuery.data.smart_contracts }
+          new24={ countersQuery.data.new_smart_contracts_24h }
+        />
+        <VerifiedContractsCountersItem
+          name="Verified contracts"
+          total={ countersQuery.data.verified_smart_contracts }
+          new24={ countersQuery.data.new_verified_smart_contracts_24h }
+        />
       </>
     );
   })();

ui/verifiedContracts/VerifiedContractsCountersItem.tsx

+import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  name: string;
+  total: string;
+  new24: string;
+}
+
+const VerifiedContractsCountersItem = ({ name, total, new24 }: Props) => {
+  const itemBgColor = useColorModeValue('blue.50', 'blue.800');
+  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">+{ Number(new24).toLocaleString('en') }</Text>
+        <Text variant="secondary" fontSize="sm">(24h)</Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export default VerifiedContractsCountersItem;