implementation name in tabs

ui/address/contract/ContractImplementationAddress.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address as TAddress } from 'types/api/address';
+
+import { getResourceKey } from 'lib/api/useApiQuery';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+interface Props {
+  hash: string | undefined;
+}
+
+const ContractImplementationAddress = ({ hash }: Props) => {
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueryData<TAddress>(getResourceKey('address', {
+    pathParams: { id: hash },
+  }));
+
+  if (!data?.implementation_address) {
+    return null;
+  }
+
+  return (
+    <Address whiteSpace="pre-wrap" flexWrap="wrap" mb={ 6 }>
+      <span>Implementation address: </span>
+      <AddressLink hash={ data.implementation_address }/>
+    </Address>
+  );
+};
+
+export default React.memo(ContractImplementationAddress);

ui/address/contract/ContractRead.tsx

@@ -12,6 +12,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import ContractConnectWallet from './ContractConnectWallet';
+import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
 import ContractReadResult from './ContractReadResult';
@@ -80,13 +81,14 @@ const ContractRead = ({ isProxy }: Props) => {
     return <ContentLoader/>;
   }
 
-  if (data.length === 0) {
-    return <span>No public read { isProxy ? 'proxy' : '' } functions were found for this contract.</span>;
+  if (data.length === 0 && !isProxy) {
+    return <span>No public read functions were found for this contract.</span>;
   }
 
   return (
     <>
       <ContractConnectWallet/>
+      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
       <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>
     </>
   );

ui/address/contract/ContractWrite.tsx

@@ -13,6 +13,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import { useContractContext } from './context';
 import ContractConnectWallet from './ContractConnectWallet';
+import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractWriteResult from './ContractWriteResult';
 import { getNativeCoinValue, isExtendedError } from './utils';
@@ -108,13 +109,14 @@ const ContractWrite = ({ isProxy }: Props) => {
     return <ContentLoader/>;
   }
 
-  if (data.length === 0) {
-    return <span>No public write { isProxy ? 'proxy' : '' } functions were found for this contract.</span>;
+  if (data.length === 0 && !isProxy) {
+    return <span>No public write functions were found for this contract.</span>;
   }
 
   return (
     <>
       <ContractConnectWallet/>
+      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
       <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>
     </>
   );