mobile view

lib/hooks/useNavItems.tsx

@@ -62,7 +62,7 @@ export default function useNavItems(): ReturnType {
     const txs = { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true };
     const verifiedContracts =
     // eslint-disable-next-line max-len
-     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: false, isNewUi: false };
+     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified-contracts', isNewUi: true };
 
     if (appConfig.L2.isL2Network) {
       blockchainNavItems = [

ui/pages/VerifiedContracts.tsx

@@ -19,6 +19,8 @@ import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import type { Sort, SortField } from 'ui/verifiedContracts/utils';
 import VerifiedContractsFilter from 'ui/verifiedContracts/VerifiedContractsFilter';
+import VerifiedContractsList from 'ui/verifiedContracts/VerifiedContractsList';
+import VerifiedContractsSort from 'ui/verifiedContracts/VerifiedContractsSort';
 import VerifiedContractsTable from 'ui/verifiedContracts/VerifiedContractsTable';
 
 const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
@@ -111,10 +113,19 @@ const VerifiedContracts = () => {
     />
   );
 
+  const sortButton = (
+    <VerifiedContractsSort
+      sort={ sort }
+      setSort={ setSort }
+      isActive={ Boolean(sort) }
+    />
+  );
+
   const bar = (
     <>
       <Flex columnGap={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
         { typeFilter }
+        { sortButton }
         { filterInput }
       </Flex>
       <ActionBar mt={ -6 }>
@@ -139,7 +150,7 @@ const VerifiedContracts = () => {
             <SkeletonList/>
           </Show>
           <Hide below="lg" ssr={ false }>
-            <SkeletonTable columns={ [ '50%', '130px', '130px', '50%', '80px', '110px', '120px' ] }/>
+            <SkeletonTable columns={ [ '50%', '130px', '130px', '50%', '80px', '110px' ] }/>
           </Hide>
         </>
       );
@@ -158,7 +169,7 @@ const VerifiedContracts = () => {
     return (
       <>
         <Show below="lg" ssr={ false }>
-          { '<AddressIntTxsList data={ data.items } currentAddress={ hash }/>' }
+          <VerifiedContractsList data={ sortedData }/>
         </Show>
         <Hide below="lg" ssr={ false }>
           <VerifiedContractsTable data={ sortedData } sort={ sort } onSortToggle={ handleSortToggle }/>

ui/verifiedContracts/VerifiedContractsFilter.tsx

@@ -30,7 +30,7 @@ const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) =>
           as="div"
         />
       </MenuButton>
-      <MenuList zIndex={ 2 }>
+      <MenuList zIndex="popover">
         <MenuOptionGroup defaultValue={ defaultValue || 'all' } title="Filter" type="radio" onChange={ onChange }>
           <MenuItemOption value="all">All</MenuItemOption>
           <MenuItemOption value="solidity">Solidity</MenuItemOption>

ui/verifiedContracts/VerifiedContractsList.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { VerifiedContract } from 'types/api/contracts';
+
+import VerifiedContractsListItem from './VerifiedContractsListItem';
+
+const VerifiedContractsList = ({ data }: { data: Array<VerifiedContract>}) => {
+  return (
+    <Box>
+      { data.map((item) => <VerifiedContractsListItem key={ item.address.hash } data={ item }/>) }
+    </Box>
+  );
+};
+
+export default React.memo(VerifiedContractsList);

ui/verifiedContracts/VerifiedContractsListItem.tsx

+import { Box, Flex, Icon } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { VerifiedContract } from 'types/api/contracts';
+
+import appConfig from 'configs/app/config';
+import iconCheck from 'icons/check.svg';
+import iconCross from 'icons/cross.svg';
+import iconSuccess from 'icons/status/success.svg';
+import dayjs from 'lib/date/dayjs';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import ListItemMobile from 'ui/shared/ListItemMobile';
+
+interface Props {
+  data: VerifiedContract;
+}
+
+const VerifiedContractsListItem = ({ data }: Props) => {
+  const balance = data.coin_balance && data.coin_balance !== '0' ?
+    BigNumber(data.coin_balance).div(10 ** appConfig.network.currency.decimals).dp(6).toFormat() :
+    '0';
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <Address columnGap={ 2 } overflow="hidden" w="100%">
+        <AddressIcon address={ data.address }/>
+        <AddressLink hash={ data.address.hash } type="address" alias={ data.address.name }/>
+        <Box color="text_secondary" ml="auto">
+          <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
+        </Box>
+      </Address>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Balance { appConfig.network.currency.symbol }</Box>
+        <Box color="text_secondary">
+          { balance }
+        </Box>
+      </Flex>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Txs count</Box>
+        <Box color="text_secondary">
+          { data.tx_count ? data.tx_count.toLocaleString() : '0' }
+        </Box>
+      </Flex>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 } flexShrink="0">Compiler</Box>
+        <Flex flexWrap="wrap">
+          <Box textTransform="capitalize">{ data.language }</Box>
+          <Box color="text_secondary" wordBreak="break-all" whiteSpace="pre-wrap"> ({ data.compiler_version })</Box>
+        </Flex>
+      </Flex>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Optimization</Box>
+        { data.optimization_enabled ?
+          <Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer"/> :
+          <Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer"/> }
+      </Flex>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Constructor args</Box>
+        { data.has_constructor_args ?
+          <Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer"/> :
+          <Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer"/> }
+      </Flex>
+      <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Verified</Box>
+        <Flex alignItems="center" columnGap={ 2 }>
+          <Icon as={ iconSuccess } boxSize={ 4 } color="green.500"/>
+          <Box color="text_secondary">
+            { dayjs(data.verified_at).fromNow() }
+          </Box>
+        </Flex>
+      </Flex>
+      { /* <Flex columnGap={ 3 }>
+        <Box fontWeight={ 500 }>Market cap</Box>
+        <Box color="text_secondary">
+          N/A
+        </Box>
+      </Flex> */ }
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(VerifiedContractsListItem);

ui/verifiedContracts/VerifiedContractsSort.tsx

+import {
+  chakra,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import SortButton from 'ui/shared/SortButton';
+
+import type { Sort } from './utils';
+
+interface Props {
+  isActive: boolean;
+  sort: Sort | undefined;
+  setSort: (val: Sort | undefined) => void;
+}
+
+const SORT_OPTIONS = [
+  { title: 'Default', id: undefined },
+  { title: 'Balance ascending', id: 'balance-asc' },
+  { title: 'Balance descending', id: 'balance-desc' },
+  { title: 'Txs count ascending', id: 'txs-asc' },
+  { title: 'Txs count descending', id: 'txs-desc' },
+];
+
+const VerifiedContractSorting = ({ isActive, sort, setSort }: Props) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  const setSortingFromMenu = React.useCallback((val: string | Array<string>) => {
+    const value = val as Sort | Array<Sort>;
+    setSort(Array.isArray(value) ? value[0] : value);
+  }, [ setSort ]);
+
+  return (
+    <Menu>
+      <MenuButton>
+        <SortButton
+          isActive={ isOpen || isActive }
+          onClick={ onToggle }
+        />
+      </MenuButton>
+      <MenuList minWidth="240px" zIndex="popover">
+        <MenuOptionGroup value={ sort } title="Sort by" type="radio" onChange={ setSortingFromMenu }>
+          { SORT_OPTIONS.map((option) => (
+            <MenuItemOption
+              key={ option.id || 'default' }
+              value={ option.id }
+            >
+              { option.title }
+            </MenuItemOption>
+          )) }
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default React.memo(chakra(VerifiedContractSorting));

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -36,10 +36,10 @@ const VerifiedContractsTable = ({ data, sort, onSortToggle }: Props) => {
                 Txs
             </Link>
           </Th>
-          <Th width="50%">Compiler/version</Th>
+          <Th width="50%">Compiler / version</Th>
           <Th width="80px">Settings</Th>
           <Th width="110px">Verified</Th>
-          <Th width="120px">Market cap</Th>
+          { /* <Th width="120px">Market cap</Th> */ }
         </Tr>
       </Thead>
       <Tbody>

ui/verifiedContracts/VerifiedContractsTableItem.tsx

@@ -19,7 +19,7 @@ interface Props {
 
 const VerifiedContractsTableItem = ({ data }: Props) => {
   const balance = data.coin_balance && data.coin_balance !== '0' ?
-    BigNumber(data.coin_balance).div(10 ** appConfig.network.currency.decimals).toFormat(2) :
+    BigNumber(data.coin_balance).div(10 ** appConfig.network.currency.decimals).dp(6).toFormat() :
     '0';
 
   return (
@@ -71,9 +71,9 @@ const VerifiedContractsTableItem = ({ data }: Props) => {
           </chakra.span>
         </Flex>
       </Td>
-      <Td lineHeight={ 6 }>
+      { /* <Td lineHeight={ 6 }>
         N/A
-      </Td>
+      </Td> */ }
     </Tr>
   );
 };