Page title updates (#1265)

* block page title * tx page title * address page title * token page title * NFT page title * [skip ci] update envs for review * update title for NFT instance page * update screenshots
blockscout · Oct 16, 2023 · 1db67c5 · 1db67c5
1 parent 973d949
commit 1db67c5
Show file tree

Hide file tree

Showing 44 changed files with 429 additions and 363 deletions.
diff --git a/ui/address/AddressDetails.tsx b/ui/address/AddressDetails.tsx
@@ -10,7 +10,6 @@ import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ADDRESS_COUNTERS } from 'stubs/address';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
-import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
@@ -83,62 +82,76 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   }
 
   return (
-    <Box>
-      <AddressHeadingInfo address={ data } token={ data.token } isLoading={ addressQuery.isPlaceholderData } isLinkDisabled/>
-      <Grid
-        mt={ 8 }
-        columnGap={ 8 }
-        rowGap={{ base: 1, lg: 3 }}
-        templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
-      >
-        <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-        { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
-          <DetailsInfoItem
-            title="Creator"
-            hint="Transaction and address of creation"
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 1, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
+    >
+      <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+      { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
+        <DetailsInfoItem
+          title="Creator"
+          hint="Transaction and address of creation"
+          isLoading={ addressQuery.isPlaceholderData }
+        >
+          <AddressEntity
+            address={{ hash: data.creator_address_hash }}
+            truncation="constant"
+            noIcon
+          />
+          <Text whiteSpace="pre"> at txn </Text>
+          <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
+        </DetailsInfoItem>
+      ) }
+      { data.is_contract && data.implementation_address && (
+        <DetailsInfoItem
+          title="Implementation"
+          hint="Implementation address of the proxy contract"
+          columnGap={ 1 }
+        >
+          <AddressEntity
+            address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
             isLoading={ addressQuery.isPlaceholderData }
-          >
-            <AddressEntity
-              address={{ hash: data.creator_address_hash }}
-              truncation="constant"
-              noIcon
-            />
-            <Text whiteSpace="pre"> at txn </Text>
-            <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
-          </DetailsInfoItem>
-        ) }
-        { data.is_contract && data.implementation_address && (
-          <DetailsInfoItem
-            title="Implementation"
-            hint="Implementation address of the proxy contract"
-            columnGap={ 1 }
-          >
-            <AddressEntity
-              address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
-              isLoading={ addressQuery.isPlaceholderData }
-              noIcon
-            />
-          </DetailsInfoItem>
-        ) }
-        <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-        { data.has_tokens && (
-          <DetailsInfoItem
-            title="Tokens"
-            hint="All tokens in the account and total value"
-            alignSelf="center"
-            py={ 0 }
-          >
-            { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
-          </DetailsInfoItem>
-        ) }
+            noIcon
+          />
+        </DetailsInfoItem>
+      ) }
+      <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+      { data.has_tokens && (
         <DetailsInfoItem
-          title="Transactions"
-          hint="Number of transactions related to this address"
+          title="Tokens"
+          hint="All tokens in the account and total value"
+          alignSelf="center"
+          py={ 0 }
+        >
+          { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
+        </DetailsInfoItem>
+      ) }
+      <DetailsInfoItem
+        title="Transactions"
+        hint="Number of transactions related to this address"
+        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+      >
+        { addressQuery.data ? (
+          <AddressCounterItem
+            prop="transactions_count"
+            query={ countersQuery }
+            address={ data.hash }
+            onClick={ handleCounterItemClick }
+            isAddressQueryLoading={ addressQuery.isPlaceholderData }
+          />
+        ) :
+          0 }
+      </DetailsInfoItem>
+      { data.has_token_transfers && (
+        <DetailsInfoItem
+          title="Transfers"
+          hint="Number of transfers to/from this address"
           isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
         >
           { addressQuery.data ? (
             <AddressCounterItem
-              prop="transactions_count"
+              prop="token_transfers_count"
               query={ countersQuery }
               address={ data.hash }
               onClick={ handleCounterItemClick }
@@ -147,32 +160,32 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
           ) :
             0 }
         </DetailsInfoItem>
-        { data.has_token_transfers && (
-          <DetailsInfoItem
-            title="Transfers"
-            hint="Number of transfers to/from this address"
-            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-          >
-            { addressQuery.data ? (
-              <AddressCounterItem
-                prop="token_transfers_count"
-                query={ countersQuery }
-                address={ data.hash }
-                onClick={ handleCounterItemClick }
-                isAddressQueryLoading={ addressQuery.isPlaceholderData }
-              />
-            ) :
-              0 }
-          </DetailsInfoItem>
-        ) }
+      ) }
+      <DetailsInfoItem
+        title="Gas used"
+        hint="Gas used by the address"
+        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+      >
+        { addressQuery.data ? (
+          <AddressCounterItem
+            prop="gas_usage_count"
+            query={ countersQuery }
+            address={ data.hash }
+            onClick={ handleCounterItemClick }
+            isAddressQueryLoading={ addressQuery.isPlaceholderData }
+          />
+        ) :
+          0 }
+      </DetailsInfoItem>
+      { data.has_validated_blocks && (
         <DetailsInfoItem
-          title="Gas used"
-          hint="Gas used by the address"
+          title="Blocks validated"
+          hint="Number of blocks validated by this validator"
           isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
         >
           { addressQuery.data ? (
             <AddressCounterItem
-              prop="gas_usage_count"
+              prop="validations_count"
               query={ countersQuery }
               address={ data.hash }
               onClick={ handleCounterItemClick }
@@ -181,41 +194,23 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
           ) :
             0 }
         </DetailsInfoItem>
-        { data.has_validated_blocks && (
-          <DetailsInfoItem
-            title="Blocks validated"
-            hint="Number of blocks validated by this validator"
-            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-          >
-            { addressQuery.data ? (
-              <AddressCounterItem
-                prop="validations_count"
-                query={ countersQuery }
-                address={ data.hash }
-                onClick={ handleCounterItemClick }
-                isAddressQueryLoading={ addressQuery.isPlaceholderData }
-              />
-            ) :
-              0 }
-          </DetailsInfoItem>
-        ) }
-        { data.block_number_balance_updated_at && (
-          <DetailsInfoItem
-            title="Last balance update"
-            hint="Block number in which the address was updated"
-            alignSelf="center"
-            py={{ base: '2px', lg: 1 }}
+      ) }
+      { data.block_number_balance_updated_at && (
+        <DetailsInfoItem
+          title="Last balance update"
+          hint="Block number in which the address was updated"
+          alignSelf="center"
+          py={{ base: '2px', lg: 1 }}
+          isLoading={ addressQuery.isPlaceholderData }
+        >
+          <BlockEntity
+            number={ data.block_number_balance_updated_at }
             isLoading={ addressQuery.isPlaceholderData }
-          >
-            <BlockEntity
-              number={ data.block_number_balance_updated_at }
-              isLoading={ addressQuery.isPlaceholderData }
-            />
-          </DetailsInfoItem>
-        ) }
-        <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
-      </Grid>
-    </Box>
+          />
+        </DetailsInfoItem>
+      ) }
+      <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
+    </Grid>
   );
 };
 

diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png
diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import config from 'configs/app';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
@@ -15,7 +16,7 @@ import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 interface Props {
   className?: string;
   hash: string;
-  watchListId: number | null;
+  watchListId: number | null | undefined;
 }
 
 const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
@@ -24,6 +25,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   const queryClient = useQueryClient();
   const router = useRouter();
   const isAccountActionAllowed = useIsAccountActionAllowed();
+  const onFocusCapture = usePreventFocusAfterModalClosing();
 
   const handleClick = React.useCallback(() => {
     if (!isAccountActionAllowed()) {
@@ -54,6 +56,10 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
     };
   }, [ hash, watchListId ]);
 
+  if (!config.features.account.isEnabled) {
+    return null;
+  }
+
   return (
     <>
       <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
@@ -68,7 +74,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
           flexShrink={ 0 }
           onClick={ handleClick }
           icon={ <Icon as={ watchListId ? starFilledIcon : starOutlineIcon } boxSize={ 5 }/> }
-          onFocusCapture={ usePreventFocusAfterModalClosing() }
+          onFocusCapture={ onFocusCapture }
         />
       </Tooltip>
       <WatchlistAddModal

diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -79,6 +79,7 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
           pr="6px"
           onClick={ onOpen }
           icon={ <Icon as={ qrCodeIcon } boxSize={ 5 }/> }
+          flexShrink={ 0 }
         />
       </Tooltip>
 

diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon } from '@chakra-ui/react';
+import { Box, Flex, Icon } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,7 +10,6 @@ import iconSuccess from 'icons/status/success.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ADDRESS_INFO, ADDRESS_TABS_COUNTERS } from 'stubs/address';
@@ -24,7 +23,12 @@ import AddressTokens from 'ui/address/AddressTokens';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import AddressWithdrawals from 'ui/address/AddressWithdrawals';
+import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
+import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
 import TextAd from 'ui/shared/ad/TextAd';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -41,7 +45,6 @@ const TOKEN_TABS = Object.values(tokenTabsByType);
 
 const AddressPageContent = () => {
   const router = useRouter();
-  const isMobile = useIsMobile();
   const appProps = useAppContext();
 
   const tabsScrollRef = React.useRef<HTMLDivElement>(null);
@@ -148,14 +151,11 @@ const AddressPageContent = () => {
       data={ addressQuery.data }
       isLoading={ addressQuery.isPlaceholderData }
       tagsBefore={ [
-        addressQuery.data?.is_contract ? { label: 'contract', display_name: 'Contract' } : { label: 'eoa', display_name: 'EOA' },
+        !addressQuery.data?.is_contract ? { label: 'eoa', display_name: 'EOA' } : undefined,
         addressQuery.data?.implementation_address ? { label: 'proxy', display_name: 'Proxy' } : undefined,
         addressQuery.data?.token ? { label: 'token', display_name: 'Token' } : undefined,
         isSafeAddress ? { label: 'safe', display_name: 'Multisig: Safe' } : undefined,
       ] }
-      contentAfter={
-        <NetworkExplorers type="address" pathParam={ hash } ml="auto" hideText={ isMobile }/>
-      }
     />
   );
 
@@ -174,14 +174,39 @@ const AddressPageContent = () => {
     };
   }, [ appProps.referrer ]);
 
+  const isLoading = addressQuery.isPlaceholderData;
+
+  const titleSecondRow = (
+    <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
+      <AddressEntity
+        address={{ ...addressQuery.data, name: '' }}
+        isLoading={ isLoading }
+        fontFamily="heading"
+        fontSize="lg"
+        fontWeight={ 500 }
+        noLink
+        isSafeAddress={ isSafeAddress }
+      />
+      { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
+        <AddressAddToWallet token={ addressQuery.data.token } variant="button"/> }
+      { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && (
+        <AddressFavoriteButton hash={ hash } watchListId={ addressQuery.data?.watchlist_address_id }/>
+      ) }
+      <AddressQrCode address={ addressQuery.data } isLoading={ isLoading }/>
+      <AccountActionsMenu isLoading={ isLoading }/>
+      <NetworkExplorers type="address" pathParam={ hash } ml="auto"/>
+    </Flex>
+  );
+
   return (
     <>
       <TextAd mb={ 6 }/>
       <PageTitle
         title={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
         backLink={ backLink }
         contentAfter={ tags }
-        isLoading={ addressQuery.isPlaceholderData }
+        secondRow={ titleSecondRow }
+        isLoading={ isLoading }
       />
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }