Design updates (#1767)

* update blob icon

* fix tags on token transfer

* update address tx filter styles

* page padding fixes

* update twitter icon

* updat screenshots

* fix test

* update back arrow color in the modals

* update solidityscan text

* update stats widget bg color

configs/envs/.env.sepolia

@@ -58,6 +58,7 @@ NEXT_PUBLIC_HAS_BEACON_CHAIN=true
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_AD_BANNER_PROVIDER=getit
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png

public/icons/name.d.ts

@@ -119,8 +119,8 @@
 	| "social/stats"
 	| "social/telega"
 	| "social/telegram_filled"
-	| "social/tweet"
 	| "social/twitter_filled"
+	| "social/twitter"
 	| "star_filled"
 	| "star_outline"
 	| "stats"

theme/components/Menu.ts

@@ -25,15 +25,15 @@ const baseStyleList = defineStyle({
 
 const baseStyleItem = defineStyle({
   _focus: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'transparent',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'transparent',
     },
   },
   _hover: {
     [$bg.variable]: 'colors.blue.50',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'colors.whiteAlpha.100',
     },
   },
   bg: $bg.reference,

theme/foundations/colors.ts

@@ -55,7 +55,7 @@ const colors = {
   linkedin: '#1564BA',
   discord: '#9747FF',
   slack: '#1BA27A',
-  twitter: '#63B3ED',
+  twitter: '#000000',
   opensea: '#2081E2',
   facebook: '#4460A0',
   medium: '#231F20',

ui/address/AddressTokens.tsx

@@ -28,7 +28,8 @@ import TokenBalances from './tokens/TokenBalances';
 type TNftDisplayType = 'collection' | 'list';
 
 const TAB_LIST_PROPS = {
-  my: 3,
+  mt: 1,
+  mb: { base: 6, lg: 1 },
   py: 5,
   columnGap: 3,
 };

ui/address/AddressTxsFilter.tsx

@@ -36,7 +36,7 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
         />
       </MenuButton>
       <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
+        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } type="radio" onChange={ onFilterChange }>
           <MenuItemOption value="all">All</MenuItemOption>
           <MenuItemOption value="from">Outgoing transactions</MenuItemOption>
           <MenuItemOption value="to">Incoming transactions</MenuItemOption>

ui/address/SolidityscanReport.tsx

@@ -51,7 +51,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
           <Box mb={ 5 } lineHeight="25px">
-            Contract analyzed for 140+ vulnerability patterns by
+            Contract analyzed for 160+ vulnerability patterns by
             <Icon as={ solidityScanIcon } mr={ 1 } ml="6px" w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
             <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
           </Box>

ui/address/tokens/AddressCollections.tsx

@@ -64,7 +64,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
         </Flex>
         <Grid
           w="100%"
-          mb={ 7 }
+          mb={ 6 }
           columnGap={{ base: 3, lg: 6 }}
           rowGap={{ base: 3, lg: 6 }}
           gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}

ui/addressVerification/AddressVerificationModal.tsx

@@ -100,7 +100,7 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
         <ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }>
           { stepIndex !== 0 && (
             <Link mr={ 3 } onClick={ handleGoToPrevStep }>
-              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/>
+              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle" color="gray.400"/>
             </Link>
           ) }
           <span>{ step.title }</span>

ui/home/StatsItem.tsx

@@ -27,7 +27,7 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P
     [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
   };
 
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
+  const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
   const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (

ui/marketplace/MarketplaceAppInfo/Content.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
   { field: 'github', icon: 'social/github_filled', title: 'Github' },
-  { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
   { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
   { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
 ];

ui/marketplace/MarketplaceAppModal.tsx

@@ -55,20 +55,20 @@ const MarketplaceAppModal = ({
 
   const socialLinks = [
     telegram ? {
-      icon: 'social/telega' as IconName,
+      icon: 'social/telegram_filled' as IconName,
       url: telegram,
     } : null,
     twitter ? {
-      icon: 'social/tweet' as IconName,
+      icon: 'social/twitter_filled' as IconName,
       url: twitter,
     } : null,
   ].filter(Boolean);
 
   if (github) {
     if (Array.isArray(github)) {
-      github.forEach((url) => socialLinks.push({ icon: 'social/git', url }));
+      github.forEach((url) => socialLinks.push({ icon: 'social/github_filled', url }));
     } else {
-      socialLinks.push({ icon: 'social/git', url: github });
+      socialLinks.push({ icon: 'social/github_filled', url: github });
     }
   }
 
@@ -289,6 +289,7 @@ const MarketplaceAppModal = ({
                     w="20px"
                     h="20px"
                     display="block"
+                    color="text_secondary"
                   />
                 </Link>
               )) }

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -38,7 +38,7 @@ const TokenTransferTable = ({
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }
-            <Th width="200px">Token</Th>
+            <Th width="230px">Token</Th>
             <Th width="160px">Token ID</Th>
             { showTxInfo && <Th width="200px">Txn hash</Th> }
             <Th width="60%">From/To</Th>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -52,14 +52,14 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <Flex flexDir="column" alignItems="flex-start" my="3px" rowGap={ 2 }>
-          <TokenEntity
-            token={ token }
-            isLoading={ isLoading }
-            noSymbol
-            noCopy
-            my="2px"
-          />
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noSymbol
+          noCopy
+          mt={ 1 }
+        />
+        <Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
           <Tag isLoading={ isLoading }>{ token.type }</Tag>
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>

ui/shared/entities/address/AddressEntity.tsx

@@ -28,8 +28,9 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress' | 'iconColor'> & {
+type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & Pick<EntityProps, 'address' | 'isSafeAddress'> & {
   asProp?: As;
+  name?: EntityBase.IconBaseProps['name'];
 };
 
 const Icon = (props: IconProps) => {
@@ -159,7 +160,7 @@ const AddressEntry = (props: EntityProps) => {
       onMouseLeave={ context?.onMouseLeave }
       position="relative"
     >
-      <Icon { ...partsProps }/>
+      <Icon { ...partsProps } color={ props.iconColor }/>
       <Link { ...linkProps }>
         <Content { ...partsProps }/>
       </Link>

ui/shared/entities/base/components.tsx

@@ -18,6 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no
 export interface EntityBaseProps {
   className?: string;
   href?: string;
+  iconName?: IconName;
   iconSize?: IconSize;
   iconColor?: IconProps['color'];
   isExternal?: boolean;
@@ -80,13 +81,13 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
   );
 });
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon' | 'iconColor'> {
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
   name: IconName;
   color?: IconProps['color'];
   borderRadius?: IconProps['borderRadius'];
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadius }: IconBaseProps) => {
+const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
   if (noIcon) {
@@ -102,7 +103,7 @@ const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadiu
       borderRadius={ borderRadius ?? 'base' }
       display="block"
       mr={ 2 }
-      color={ iconColor ?? color ?? defaultColor }
+      color={ color ?? defaultColor }
       minW={ 0 }
       flexShrink={ 0 }
     />

ui/shared/entities/tx/TxEntity.tsx

@@ -71,7 +71,7 @@ const TxEntity = (props: EntityProps) => {
 
   return (
     <Container className={ props.className }>
-      <Icon { ...partsProps }/>
+      <Icon { ...partsProps } name={ props.iconName } color={ props.iconColor }/>
       <Link { ...linkProps }>
         <Content { ...partsProps }/>
       </Link>

ui/shared/layout/components/Content.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }>
+    <Box pt={{ base: 0, lg: 8 }} as="main" className={ className }>
       { children }
     </Box>
   );

ui/shared/stats/StatsWidget.tsx

@@ -14,7 +14,7 @@ type Props = {
 }
 
 const StatsWidget = ({ label, value, isLoading, hint, diff, diffPeriod = '24h', diffFormatted }: Props) => {
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
+  const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
   const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const hintColor = useColorModeValue('gray.600', 'gray.400');
 

ui/snippets/footer/Footer.tsx

@@ -50,9 +50,9 @@ const Footer = () => {
       url: 'https://github.com/blockscout/blockscout',
     },
     {
-      icon: 'social/tweet' as const,
+      icon: 'social/twitter' as const,
       iconSize: '18px',
-      text: 'Twitter',
+      text: 'X (ex-Twitter)',
       url: 'https://www.twitter.com/blockscoutcom',
     },
     {

ui/token/TokenProjectInfo/Content.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [
   { field: 'github', icon: 'social/github_filled', title: 'Github' },
-  { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
   { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
   { field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' },
   { field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' },

ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx

@@ -21,7 +21,7 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
   linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' },
   discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' },
   slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' },
-  twitter: { label: 'Twitter', icon: 'social/twitter_filled', color: 'twitter' },
+  twitter: { label: 'X (ex-Twitter)', icon: 'social/twitter_filled', color: 'inherit' },
   opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' },
   facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' },
   medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' },

ui/txs/TxsListItem.tsx

@@ -56,6 +56,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           hash={ tx.hash }
           truncation="constant_long"
           fontWeight="700"
+          iconName={ tx.tx_types.includes('blob_transaction') ? 'blob' : undefined }
         />
         { tx.timestamp && (
           <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">