verified tick and balance history fixes

ui/address/AddressContract.tsx

@@ -19,10 +19,6 @@ interface Props {
   tabs: Array<RoutedSubTab>;
 }
 
-const TAB_LIST_PROPS = {
-  columnGap: 3,
-};
-
 export const currentChain: Chain = {
   id: Number(appConfig.network.id),
   name: appConfig.network.name || '',
@@ -58,9 +54,12 @@ const wagmiClient = createClient({
   provider,
 });
 
-// Web3Modal Ethereum Client
 const ethereumClient = new EthereumClient(wagmiClient, chains);
 
+const TAB_LIST_PROPS = {
+  columnGap: 3,
+};
+
 const AddressContract = ({ tabs }: Props) => {
   const modalZIndex = useToken<string>('zIndices', 'modal');
 

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -49,11 +49,11 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
           <Table variant="simple" size="sm">
             <Thead top={ 80 }>
               <Tr>
-                <Th width="25%">Block</Th>
-                <Th width="25%">Txn</Th>
-                <Th width="25%">Age</Th>
-                <Th width="25%" isNumeric pr={ 1 }/>
-                <Th width="120px" isNumeric>Balance { appConfig.network.currency.symbol }</Th>
+                <Th width="20%">Block</Th>
+                <Th width="20%">Txn</Th>
+                <Th width="20%">Age</Th>
+                <Th width="20%" isNumeric pr={ 1 }>Balance { appConfig.network.currency.symbol }</Th>
+                <Th width="20%" isNumeric>Delta</Th>
               </Tr>
             </Thead>
             <Tbody>

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -30,7 +30,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFixed(8) }
+              { deltaBn.toFormat() }
             </Text>
           </StatHelpText>
         </Stat>

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -46,7 +46,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFixed(8) }
+              { deltaBn.toFormat() }
             </Text>
           </StatHelpText>
         </Stat>

ui/pages/Address.tsx

-import { Flex, Skeleton, Tag, Box } from '@chakra-ui/react';
+import { Flex, Skeleton, Tag, Box, Icon } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import iconSuccess from 'icons/status/success.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import notEmpty from 'lib/notEmpty';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
@@ -81,7 +82,18 @@ const AddressPageContent = () => {
       addressQuery.data?.has_logs ? { id: 'logs', title: 'Logs', component: <AddressLogs scrollRef={ tabsScrollRef }/> } : undefined,
       addressQuery.data?.is_contract ? {
         id: 'contract',
-        title: 'Contract',
+        title: () => {
+          if (addressQuery.data.is_verified) {
+            return (
+              <>
+                <span>Contract</span>
+                <Icon as={ iconSuccess } boxSize="14px" color="green.500" ml={ 1 }/>
+              </>
+            );
+          }
+
+          return 'Contract';
+        },
         component: <AddressContract tabs={ contractTabs }/>,
         subTabs: contractTabs,
       } : undefined,

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -31,7 +31,7 @@ const hiddenItemStyles: StyleProps = {
 
 interface Props extends ThemingProps<'Tabs'> {
   tabs: Array<RoutedTab>;
-  tabListProps?: ChakraProps;
+  tabListProps?: ChakraProps | (({ isSticky }: { isSticky: boolean }) => ChakraProps);
   rightSlot?: React.ReactNode;
   stickyEnabled?: boolean;
   className?: string;
@@ -130,7 +130,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
             zIndex: { base: 'sticky2', lg: 'docked' },
           } : { })
         }
-        { ...tabListProps }
+        { ...(typeof tabListProps === 'function' ? tabListProps({ isSticky }) : tabListProps) }
       >
         { tabsList.map((tab, index) => {
           if (!tab.id) {
@@ -162,7 +162,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
               scrollSnapAlign="start"
               flexShrink={ 0 }
             >
-              { tab.title }
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
             </Tab>
           );
         }) }

ui/shared/RoutedTabs/types.ts

+import type React from 'react';
+
 export interface RoutedTab {
   id: string;
-  title: string;
+  title: string | (() => React.ReactNode);
   component: React.ReactNode;
   subTabs?: Array<RoutedSubTab>;
 }