add creation bytecode and deployed bytecode fields

lib/api/resources.ts

@@ -14,6 +14,7 @@ import type {
 } from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
+import type { SmartContract } from 'types/api/contract';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
@@ -162,6 +163,11 @@ export const RESOURCES = {
     filterFields: [ ],
   },
 
+  // CONTRACT
+  contract: {
+    path: '/api/v2/smart-contracts/:id',
+  },
+
   // HOMEPAGE
   homepage_stats: {
     path: '/api/v2/stats',
@@ -259,6 +265,7 @@ Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
 Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
 Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
+Q extends 'contract' ? SmartContract :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

types/api/contract.ts

+export interface SmartContract {
+  deployed_bytecode: string | null;
+  creation_bytecode: string | null;
+  is_self_destructed: boolean;
+}

ui/address/AddressContract.tsx

@@ -12,4 +12,4 @@ const AddressContract = ({ tabs }: Props) => {
   return <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={{ columnGap: 3 }}/>;
 };
 
-export default AddressContract;
+export default React.memo(AddressContract);

ui/address/contract/ContractCode.tsx

+import { Box, Text, Flex, Skeleton, Textarea, Button } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import link from 'lib/link/link';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+const ContractCode = () => {
+  const router = useRouter();
+
+  const { data, isLoading, isError } = useApiQuery('contract', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return (
+      <>
+        <Flex justifyContent="space-between" mb={ 2 }>
+          <Skeleton w="180px" h={ 5 } borderRadius="full"/>
+          <Skeleton w={ 5 } h={ 5 }/>
+        </Flex>
+        <Skeleton w="100%" h="250px" borderRadius="md"/>
+        <Flex justifyContent="space-between" mb={ 2 } mt={ 6 }>
+          <Skeleton w="180px" h={ 5 } borderRadius="full"/>
+          <Skeleton w={ 5 } h={ 5 }/>
+        </Flex>
+        <Skeleton w="100%" h="400px" borderRadius="md"/>
+      </>
+    );
+  }
+
+  return (
+    <>
+      { data.creation_bytecode && (
+        <Box>
+          <Flex alignItems="center" mb={ 3 }>
+            <Text fontWeight={ 500 }>Contract creation code</Text>
+            <Button
+              size="sm"
+              ml="auto"
+              mr={ 3 }
+              as="a"
+              href={ link('address_contract_verification', { id: router.query.id?.toString() }) }
+            >
+                Verify & publish
+            </Button>
+            <CopyToClipboard text={ data.creation_bytecode }/>
+          </Flex>
+          <Textarea
+            variant="filledInactive"
+            p={ 4 }
+            minHeight="400px"
+            value={ data.creation_bytecode }
+            fontSize="sm"
+            borderRadius="md"
+            readOnly
+          />
+        </Box>
+      ) }
+      { data.deployed_bytecode && (
+        <Box mt={ 6 }>
+          <Flex justifyContent="space-between" mb={ 3 }>
+            <Text fontWeight={ 500 }>Deployed ByteCode</Text>
+            <CopyToClipboard text={ data.deployed_bytecode }/>
+          </Flex>
+          <Textarea
+            variant="filledInactive"
+            p={ 4 }
+            minHeight="400px"
+            value={ data.deployed_bytecode }
+            fontSize="sm"
+            borderRadius="md"
+            readOnly
+          />
+        </Box>
+      ) }
+    </>
+  );
+};
+
+export default ContractCode;

ui/pages/Address.tsx

@@ -14,6 +14,7 @@ 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 ContractCode from 'ui/address/contract/ContractCode';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -21,7 +22,7 @@ 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_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> },