add conditions for tabs

types/api/address.ts

@@ -12,8 +12,18 @@ export interface Address {
   creator_address_hash: string | null;
   creation_tx_hash: string | null;
   exchange_rate: string | null;
-  hash: string;
+  has_custom_methods_read: boolean;
+  has_custom_methods_write: boolean;
+  has_decompiled_code: boolean;
+  has_logs: boolean;
+  has_methods_read: boolean;
+  has_methods_read_proxy: boolean;
+  has_methods_write: boolean;
+  has_methods_write_proxy: boolean;
+  has_token_transfers: boolean;
+  has_tokens: boolean;
   has_validated_blocks: boolean;
+  hash: string;
   implementation_address: string | null;
   implementation_name: string | null;
   is_contract: boolean;

ui/pages/Address.tsx

@@ -21,15 +21,6 @@ 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: <ContractCode/> },
-  { 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();
 
@@ -44,27 +35,54 @@ const AddressPageContent = () => {
     ...(addressQuery.data?.watchlist_names || []),
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
-  const isContract = addressQuery.data?.is_contract;
+  const contractTabs = React.useMemo(() => {
+    return [
+      { id: 'contact_code', title: 'Code', component: <ContractCode/> },
+      addressQuery.data?.has_decompiled_code ?
+        { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
+        undefined,
+      addressQuery.data?.has_methods_read ?
+        { id: 'read_contract', title: 'Read contract', component: <div>Read contract</div> } :
+        undefined,
+      addressQuery.data?.has_methods_read_proxy ?
+        { id: 'read_proxy', title: 'Read proxy', component: <div>Read proxy</div> } :
+        undefined,
+      addressQuery.data?.has_custom_methods_read ?
+        { id: 'read_custom_methods', title: 'Read custom methods', component: <div>Read custom methods</div> } :
+        undefined,
+      addressQuery.data?.has_methods_write ?
+        { id: 'write_contract', title: 'Write contract', component: <div>Write contract</div> } :
+        undefined,
+      addressQuery.data?.has_methods_write_proxy ?
+        { id: 'write_proxy', title: 'Write proxy', component: <div>Write proxy</div> } :
+        undefined,
+      addressQuery.data?.has_custom_methods_write ?
+        { id: 'write_custom_methods', title: 'Write custom methods', component: <div>Write custom methods</div> } :
+        undefined,
+    ].filter(notEmpty);
+  }, [ addressQuery.data ]);
 
   const tabs: Array<RoutedTab> = React.useMemo(() => {
     return [
       { id: 'txs', title: 'Transactions', component: <AddressTxs/> },
-      { id: 'token_transfers', title: 'Token transfers', component: <AddressTokenTransfers/> },
-      { id: 'tokens', title: 'Tokens', component: null },
+      addressQuery.data?.has_token_transfers ?
+        { id: 'token_transfers', title: 'Token transfers', component: <AddressTokenTransfers/> } :
+        undefined,
+      addressQuery.data?.has_tokens ? { id: 'tokens', title: 'Tokens', component: null } : undefined,
       { id: 'internal_txns', title: 'Internal txns', component: <AddressInternalTxs/> },
       { id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance/> },
-      // temporary show this tab in all address
-      // 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 ? {
+      addressQuery.data?.has_validated_blocks ?
+        { id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated/> } :
+        undefined,
+      addressQuery.data?.has_logs ? { id: 'logs', title: 'Logs', component: <AddressLogs/> } : undefined,
+      addressQuery.data?.is_contract ? {
         id: 'contract',
         title: 'Contract',
-        component: <AddressContract tabs={ CONTRACT_TABS }/>,
-        subTabs: CONTRACT_TABS,
+        component: <AddressContract tabs={ contractTabs }/>,
+        subTabs: contractTabs,
       } : undefined,
     ].filter(notEmpty);
-  }, [ isContract ]);
+  }, [ addressQuery.data, contractTabs ]);
 
   const tagsNode = tags.length > 0 ? <Flex columnGap={ 2 }>{ tags }</Flex> : null;