Merge pull request #413 from blockscout/empty-tabs

empty tabs

ui/pages/Address.tsx

@@ -5,11 +5,13 @@ import React from 'react';
 
 import type { Address } from 'types/api/address';
 import { QueryKeys } from 'types/client/queries';
+import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useFetch from 'lib/hooks/useFetch';
 import AddressDetails from 'ui/address/AddressDetails';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const AddressPageContent = () => {
   const router = useRouter();
@@ -29,6 +31,14 @@ const AddressPageContent = () => {
     ...(addressQuery.data?.watchlist_names || []),
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
+  const tabs: Array<RoutedTab> = [
+    { id: 'txs', title: 'Transactions', component: null },
+    { id: 'token_transfers', title: 'Token transfers', component: null },
+    { id: 'tokens', title: 'Tokens', component: null },
+    { id: 'internal_txn', title: 'Internal txn', component: null },
+    { id: 'coin_balance_history', title: 'Coin balance history', component: null },
+  ];
+
   return (
     <Page>
       <Flex alignItems="center" columnGap={ 3 }>
@@ -40,6 +50,7 @@ const AddressPageContent = () => {
         ) }
       </Flex>
       <AddressDetails addressQuery={ addressQuery }/>
+      <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>
     </Page>
   );
 };