subtabs for contract tab

theme/components/Tabs.ts

@@ -6,6 +6,8 @@ import { mode } from '@chakra-ui/theme-tools';
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
+import Button from './Button/Button';
+
 const variantSoftRounded = definePartsStyle((props) => {
   return {
     tab: {
@@ -26,11 +28,32 @@ const variantSoftRounded = definePartsStyle((props) => {
   };
 });
 
+const variantOutline = definePartsStyle((props) => {
+  return {
+    tab: {
+      ...Button.variants?.outline(props),
+      ...Button.baseStyle,
+      _selected: Button.variants?.outline(props)._active,
+    },
+  };
+});
+
+const sizes = {
+  sm: definePartsStyle({
+    tab: Button.sizes?.sm,
+  }),
+  md: definePartsStyle({
+    tab: Button.sizes?.md,
+  }),
+};
+
 const variants = {
   'soft-rounded': variantSoftRounded,
+  outline: variantOutline,
 };
 
 const Tabs = defineMultiStyleConfig({
+  sizes,
   variants,
 });
 

ui/address/AddressContract.tsx

+import React from 'react';
+
+import type { RoutedSubTab } from 'ui/shared/RoutedTabs/types';
+
+import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
+
+interface Props {
+  tabs: Array<RoutedSubTab>;
+}
+
+const AddressContract = ({ tabs }: Props) => {
+  return <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={{ columnGap: 3 }}/>;
+};
+
+export default AddressContract;

ui/pages/Address.tsx

@@ -8,17 +8,27 @@ import useApiQuery from 'lib/api/useApiQuery';
 import notEmpty from 'lib/notEmpty';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
+import AddressContract from 'ui/address/AddressContract';
 import AddressDetails from 'ui/address/AddressDetails';
 import AddressInternalTxs from 'ui/address/AddressInternalTxs';
+import AddressLogs from 'ui/address/AddressLogs';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
-import AddressLogs from 'ui/address/logs/AddressLogs';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 
+const CONTRACT_TABS = [
+  { id: 'contact_code', title: 'Code', component: <div>Code</div> },
+  { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> },
+  { id: 'read_contract', title: 'Read contract', component: <div>Read contract</div> },
+  { id: 'read_proxy', title: 'Read proxy', component: <div>Read proxy</div> },
+  { id: 'write_contract', title: 'Write contract', component: <div>Write contract</div> },
+  { id: 'write_proxy', title: 'Write proxy', component: <div>Write proxy</div> },
+];
+
 const AddressPageContent = () => {
   const router = useRouter();
 
@@ -46,6 +56,12 @@ const AddressPageContent = () => {
       // later api will return info about available tabs
       { id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated/> },
       isContract ? { id: 'logs', title: 'Logs', component: <AddressLogs/> } : undefined,
+      isContract ? {
+        id: 'contract',
+        title: 'Contract',
+        component: <AddressContract tabs={ CONTRACT_TABS }/>,
+        subTabs: CONTRACT_TABS,
+      } : undefined,
     ].filter(notEmpty);
   }, [ isContract ]);
 

ui/shared/RoutedTabs/RoutedTabs.tsx

-import type { ChakraProps } from '@chakra-ui/react';
+import type { ChakraProps, ThemingProps } from '@chakra-ui/react';
 import {
   Tab,
   Tabs,
@@ -7,6 +7,7 @@ import {
   TabPanels,
   Box,
   useColorModeValue,
+  chakra,
 } from '@chakra-ui/react';
 import type { StyleProps } from '@chakra-ui/styled-system';
 import { useRouter } from 'next/router';
@@ -28,14 +29,15 @@ const hiddenItemStyles: StyleProps = {
   visibility: 'hidden',
 };
 
-interface Props {
+interface Props extends ThemingProps<'Tabs'> {
   tabs: Array<RoutedTab>;
   tabListProps?: ChakraProps;
   rightSlot?: React.ReactNode;
   stickyEnabled?: boolean;
+  className?: string;
 }
 
-const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) => {
+const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, ...themeProps }: Props) => {
   const router = useRouter();
   const scrollDirection = useScrollDirection();
   const [ activeTabIndex, setActiveTabIndex ] = useState<number>(tabs.length + 1);
@@ -58,8 +60,9 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
   useEffect(() => {
     if (router.isReady) {
       let tabIndex = 0;
-      if (router.query.tab) {
-        tabIndex = tabs.findIndex(({ id }) => id === router.query.tab);
+      const tabFromRoute = router.query.tab;
+      if (tabFromRoute) {
+        tabIndex = tabs.findIndex(({ id, subTabs }) => id === tabFromRoute || subTabs?.some(({ id }) => id === tabFromRoute));
         if (tabIndex < 0) {
           tabIndex = 0;
         }
@@ -89,12 +92,14 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
 
   return (
     <Tabs
-      variant="soft-rounded"
-      colorScheme="blue"
+      className={ className }
+      variant={ themeProps.variant || 'soft-rounded' }
+      colorScheme={ themeProps.colorScheme || 'blue' }
       isLazy
       onChange={ handleTabChange }
       index={ activeTabIndex }
       position="relative"
+      size={ themeProps.size || 'md' }
     >
       <TabList
         marginBottom={{ base: 6, lg: 8 }}
@@ -155,6 +160,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
               ref={ tabsRefs[index] }
               { ...(index < tabsCut ? {} : hiddenItemStyles) }
               scrollSnapAlign="start"
+              flexShrink={ 0 }
             >
               { tab.title }
             </Tab>
@@ -169,4 +175,4 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
   );
 };
 
-export default React.memo(RoutedTabs);
+export default React.memo(chakra(RoutedTabs));

ui/shared/RoutedTabs/types.ts

@@ -2,8 +2,11 @@ export interface RoutedTab {
   id: string;
   title: string;
   component: React.ReactNode;
+  subTabs?: Array<RoutedSubTab>;
 }
 
+export type RoutedSubTab = Omit<RoutedTab, 'subTabs'>;
+
 export interface MenuButton {
   id: null;
   title: string;