Address widget improvements (#2932)

Author: maxaleks

ui/address/AddressDetails.tsx

@@ -43,7 +43,8 @@ const AddressDetails = ({ addressQuery, countersQuery, isLoading }: Props) => {
 
   const addressHash = getQueryParamString(router.query.hash);
 
-  const address3rdPartyWidgets = useAddress3rdPartyWidgets(addressQuery.data?.is_contract ? 'contract' : 'eoa', addressQuery.isPlaceholderData);
+  const addressType = addressQuery.data?.is_contract && addressQuery.data?.proxy_type !== 'eip7702' ? 'contract' : 'eoa';
+  const address3rdPartyWidgets = useAddress3rdPartyWidgets(addressType, addressQuery.isPlaceholderData);
 
   const error404Data = React.useMemo(() => ({
     hash: addressHash || '',
@@ -317,7 +318,7 @@ const AddressDetails = ({ addressQuery, countersQuery, isLoading }: Props) => {
             </DetailedInfo.ItemLabel>
             <DetailedInfo.ItemValue>
               <Address3rdPartyWidgets
-                addressType={ data.is_contract ? 'contract' : 'eoa' }
+                addressType={ addressType }
                 isLoading={ addressQuery.isPlaceholderData }
               />
             </DetailedInfo.ItemValue>

ui/address/__screenshots__/Address3rdPartyWidgets.pw.tsx_dark-color-mode_base-view-dark-mode-1.png

@@ -1,4 +1,4 @@
-import { Flex, Text, chakra, Separator } from '@chakra-ui/react';
+import { Flex, Text, chakra, Separator, Box } from '@chakra-ui/react';
 import { useCallback } from 'react';
 
 import type { Address3rdPartyWidget } from 'types/views/address';
@@ -27,10 +27,8 @@ function formatUrl(tpl: string, ctx: Record<string, string>) {
   return tpl.replace(/\{\s*(\w+)\s*\}/g, (_, key) => ctx[key] ?? '');
 }
 
-const Address3rdPartyWidgetCard = ({ name, config, address, ...props }: Props) => {
-  const { data, isLoading: isDataLoading } = useWidgetData(name, config?.valuePath, address, props.isLoading);
-
-  const isLoading = props.isLoading || isDataLoading;
+const Address3rdPartyWidgetCard = ({ name, config, address, isLoading }: Props) => {
+  const { data, isLoading: isDataLoading } = useWidgetData(name, config?.valuePath, address, isLoading);
 
   const handleClick = useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.ADDRESS_WIDGET, { Name: name });
@@ -61,27 +59,29 @@ const Address3rdPartyWidgetCard = ({ name, config, address, ...props }: Props) =
   ) : (
     <>
       <LinkOverlay href={ url } external onClick={ handleClick }/>
-      { data ? (
-        <Text
-          textStyle="heading.xl"
-          color={ integer === '0' && !decimal ? 'text.secondary' : 'text.primary' }
-          textOverflow="ellipsis"
-          whiteSpace="nowrap"
-          overflow="hidden"
-        >
-          { integer }
-          { decimal && (
-            <>
-              .
-              <chakra.span color="text.secondary">
-                { decimal }
-              </chakra.span>
-            </>
-          ) }
-        </Text>
-      ) : (
-        <Text textStyle="heading.xl" color="gray.500" opacity={ 0.2 }>{ ndash }</Text>
-      ) }
+      <Skeleton loading={ isDataLoading } minW="88px" alignSelf="flex-start">
+        { data ? (
+          <Text
+            textStyle="heading.xl"
+            color={ integer === '0' && !decimal ? 'text.secondary' : 'text.primary' }
+            textOverflow="ellipsis"
+            whiteSpace="nowrap"
+            overflow="hidden"
+          >
+            { integer }
+            { decimal && (
+              <>
+                .
+                <chakra.span color="text.secondary">
+                  { decimal }
+                </chakra.span>
+              </>
+            ) }
+          </Text>
+        ) : (
+          <Text textStyle="heading.xl" color="text.secondary" opacity={ 0.2 }>{ ndash }</Text>
+        ) }
+      </Skeleton>
       <Flex alignItems="center" gap={ 1 } mt={ 1 }>
         <Text textStyle="sm">{ config.title }</Text>
         { config.hint && (
@@ -119,24 +119,31 @@ const Address3rdPartyWidgetCard = ({ name, config, address, ...props }: Props) =
   );
 
   return (
-    <LinkBox className="group">
-      <Flex
-        flexDirection="column"
-        p={ 3 }
-        bgColor={ isLoading ? 'transparent' : { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } }
+    <LinkBox
+      as={ Flex }
+      className="group"
+      flexDirection="column"
+      p={ 3 }
+      cursor={ isLoading ? 'default' : 'pointer' }
+      position="relative"
+    >
+      <Box
+        aria-hidden
+        position="absolute"
+        inset={ 0 }
         borderRadius="md"
         border="1px solid"
         borderColor={ isLoading ? { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } : 'transparent' }
+        bgColor={ isLoading ? 'transparent' : { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } }
+        transform="scale(1)"
+        transition="transform 0.2s ease-in-out, border-color 0.2s ease-in-out"
+        zIndex={ 0 }
         _groupHover={{
-          borderColor: isLoading ? 'default' : { _light: 'blackAlpha.50', _dark: 'whiteAlpha.100' },
-          scale: 1.02,
+          transform: 'scale(1.02)',
+          borderColor: { _light: 'blackAlpha.50', _dark: 'whiteAlpha.100' },
         }}
-        transition="all 0.2s ease-in-out"
-        scale={ 1 }
-        cursor={ isLoading ? 'default' : 'pointer' }
-      >
-        { content }
-      </Flex>
+      />
+      { content }
     </LinkBox>
   );
 };

ui/address/__screenshots__/Address3rdPartyWidgets.pw.tsx_default_base-view-dark-mode-1.png

@@ -131,11 +131,8 @@ const AddressPageContent = () => {
     addressEnsDomainsQuery.data?.items.find((domain) => domain.name === addressQuery.data?.ens_domain_name) :
     undefined;
 
-  const address3rdPartyWidgets = useAddress3rdPartyWidgets(
-    addressQuery.data?.is_contract ? 'contract' : 'eoa',
-    addressQuery.isPlaceholderData,
-    areQueriesEnabled,
-  );
+  const addressType = addressQuery.data?.is_contract && addressQuery.data?.proxy_type !== 'eip7702' ? 'contract' : 'eoa';
+  const address3rdPartyWidgets = useAddress3rdPartyWidgets(addressType, addressQuery.isPlaceholderData, areQueriesEnabled);
 
   const isLoading = addressQuery.isPlaceholderData;
   const isTabsLoading =
@@ -288,7 +285,7 @@ const AddressPageContent = () => {
         count: address3rdPartyWidgets.items.length,
         component: (
           <Address3rdPartyWidgets
-            addressType={ addressQuery.data?.is_contract ? 'contract' : 'eoa' }
+            addressType={ addressType }
             isLoading={ addressQuery.isPlaceholderData }
             shouldRender={ !isTabsLoading }
             isQueryEnabled={ areQueriesEnabled }
@@ -306,6 +303,7 @@ const AddressPageContent = () => {
     areQueriesEnabled,
     mudTablesCountQuery.data,
     address3rdPartyWidgets,
+    addressType,
   ]);
 
   const usernameApiTag = userPropfileApiQuery.data?.user_profile?.username;