Files
explore/ui/address/contract/useContractDetailsTabs.tsx
tom goriunovandGitHub 7505f154e6 OP Superchain: local views for chains in the cluster (#2864)
* update styles for chain widgets on home page

* update latest txs styles and slug creation algorithm

* list of local txs

* list of local blocks

* local view for address internal tx tab

* local view for address coin history

* local view for address logs

* local view for address token transfers

* address details, kind of

* [wip] local view for address contract tab

* user ops views

* chain popover

* csv-export page

* advanced filter page

* block countdown pages

* fixes for contract tab

* refactor address txs and transfers tabs

* refactor getServerSideProps

* internal txs page

* tokens and token transfers pages

* simple tag for address page and details info placeholders

* add chain icon to the local lists

* show creator in contract tab

* OP Superchain: local views for chains in the cluster

Fixes #2827

* highlight current chain in the title of local entities

* tokens nfts tab for address

* allow entity icon to be an image

* adjust cross-chain txs table and add placeholder to home page

* cross-chain txs for address

* fetch multichain config from microservice

* fix skeleton in token transfers table

* tests, pt.1

* wtf with gh

* verified contracts page

* change chain info in block and token page header

* fix some tests

* update styles for token icon with chain logo in header

* fix links and address internal txs tab

* update screenshots

* fix margins for tx info button and chain icon in tx tables

* add some tests

* fix screenshots
2025-08-15 15:32:47 +02:00

89 lines
2.6 KiB
TypeScript

import { Flex } from '@chakra-ui/react';
import React from 'react';
import type { Address } from 'types/api/address';
import type { SmartContract } from 'types/api/contract';
import CodeViewSnippet from 'ui/shared/CodeViewSnippet';
import ContractDetailsByteCode from './ContractDetailsByteCode';
import ContractDetailsConstructorArgs from './ContractDetailsConstructorArgs';
import ContractSourceCode from './ContractSourceCode';
import type { CONTRACT_DETAILS_TAB_IDS } from './utils';
interface Tab {
id: typeof CONTRACT_DETAILS_TAB_IDS[number];
title: string;
component: React.ReactNode;
}
interface Props {
data: SmartContract | undefined;
isLoading: boolean;
addressData: Address;
sourceAddress: string | undefined;
}
export default function useContractDetailsTabs({ data, isLoading, addressData, sourceAddress }: Props): Array<Tab> {
return React.useMemo(() => {
if (!sourceAddress) {
return [];
}
return [
(data?.constructor_args || data?.source_code) ? {
id: 'contract_source_code' as const,
title: 'Code',
component: (
<Flex flexDir="column" rowGap={ 6 }>
<ContractDetailsConstructorArgs data={ data } isLoading={ isLoading }/>
{ data?.source_code && (
<ContractSourceCode
data={ data }
isLoading={ isLoading }
sourceAddress={ sourceAddress }
/>
) }
</Flex>
),
} : undefined,
data?.compiler_settings ? {
id: 'contract_compiler' as const,
title: 'Compiler',
component: (
<CodeViewSnippet
data={ JSON.stringify(data.compiler_settings, undefined, 2) }
language="json"
title="Compiler Settings"
copyData={ JSON.stringify(data.compiler_settings) }
isLoading={ isLoading }
/>
),
} : undefined,
data?.abi ? {
id: 'contract_abi' as const,
title: 'ABI',
component: (
<CodeViewSnippet
data={ JSON.stringify(data.abi, undefined, 2) }
language="json"
title="Contract ABI"
copyData={ JSON.stringify(data.abi) }
isLoading={ isLoading }
/>
),
} : undefined,
(data?.creation_bytecode || data?.deployed_bytecode) ? {
id: 'contract_bytecode' as const,
title: 'Bytecode',
component: <ContractDetailsByteCode data={ data } isLoading={ isLoading } addressData={ addressData }/>,
} : undefined,
].filter(Boolean);
}, [ isLoading, addressData, data, sourceAddress ]);
}