Address title: second line updates

Fixes #1537

icons/dots.svg

+<svg viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="2" cy="2" r="2" fill="currentColor"/>
+  <circle cx="10" cy="2" r="2" fill="currentColor"/>
+  <circle cx="18" cy="2" r="2" fill="currentColor"/>
+</svg>

icons/vertical_dots.svg

-<svg viewBox="2 2 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.667 3.75c0-.688-.563-1.25-1.25-1.25-.688 0-1.25.563-1.25 1.25 0 .688.562 1.25 1.25 1.25.687 0 1.25-.563 1.25-1.25Zm0 12.5c0-.688-.563-1.25-1.25-1.25-.688 0-1.25.563-1.25 1.25 0 .688.562 1.25 1.25 1.25.687 0 1.25-.563 1.25-1.25Zm0-6.25c0-.688-.563-1.25-1.25-1.25-.688 0-1.25.563-1.25 1.25 0 .688.562 1.25 1.25 1.25.687 0 1.25-.563 1.25-1.25Z" fill="currentColor" fill-opacity=".8"/>
-</svg>

public/icons/name.d.ts

@@ -27,6 +27,7 @@
 	| "discussions"
 	| "docs"
 	| "donate"
+	| "dots"
 	| "edit"
 	| "email-sent"
 	| "email"
@@ -126,7 +127,6 @@
 	| "verified_token"
 	| "verified"
 	| "verify-contract"
-	| "vertical_dots"
 	| "wallet"
 	| "wallets/coinbase"
 	| "wallets/metamask"

ui/address/SolidityscanReport.tsx

@@ -112,7 +112,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton isLoaded={ !isPlaceholderData } borderRadius="base">
           <Button
             className={ className }
             color={ scoreColor }
@@ -122,7 +122,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
             onClick={ onToggle }
             aria-label="SolidityScan score"
             fontWeight={ 500 }
-            px={ 2 }
+            px="6px"
             h="32px"
             flexShrink={ 0 }
           >

ui/address/ensDomains/AddressEnsDomains.tsx

-import { Button, chakra, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
@@ -50,7 +50,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   }
 
   if (isPending) {
-    return <Skeleton h={ 8 } w={{ base: '60px', lg: '120px' }} borderRadius="base"/>;
+    return <Skeleton h={ 8 } w={{ base: '50px', xl: '120px' }} borderRadius="base"/>;
   }
 
   if (data.items.length === 0) {
@@ -102,8 +102,12 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           flexShrink={ 0 }
         >
           <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
-          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <Show above="xl">
+            <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
+          </Show>
+          <Hide above="xl">
+            <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
+          </Hide>
         </Button>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>

ui/shared/AccountActionsMenu/AccountActionsMenu.tsx

-import { Button, Menu, MenuButton, MenuList, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import { IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -37,16 +37,14 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
     <Menu>
       <Skeleton isLoaded={ !isLoading } borderRadius="base" className={ className }>
         <MenuButton
-          as={ Button }
+          as={ IconButton }
           size="sm"
           variant="outline"
+          colorScheme="gray"
+          px="6px"
           onClick={ handleButtonClick }
-        >
-          <Flex alignItems="center">
-            <span>More</span>
-            <IconSvg name="arrows/east-mini" transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
-          </Flex>
-        </MenuButton>
+          icon={ <IconSvg name="dots" boxSize={ 5 }/> }
+        />
       </Skeleton>
       <MenuList minWidth="180px" zIndex="popover">
         { isTokenPage && config.features.addressVerification.isEnabled &&

ui/shared/NetworkExplorers.tsx

-import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
+import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Show, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
@@ -46,7 +46,12 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
           flexShrink={ 0 }
         >
           <IconSvg name="explorer" boxSize={ 5 }/>
-          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <Show above="xl">
+            <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
+          </Show>
+          <Hide above="xl">
+            <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
+          </Hide>
         </Button>
       </PopoverTrigger>
       <PopoverContent w="240px">

ui/shared/address/AddressAddToWallet.tsx

@@ -96,7 +96,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
           aria-label="Add token to wallet"
           variant="outline"
           size="sm"
-          px="6px"
+          px={ 1 }
           onClick={ handleClick }
           icon={ <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 6 }/> }
           flexShrink={ 0 }

ui/shared/chart/ChartWidget.tsx

@@ -207,7 +207,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                   <MenuButton
                     w="36px"
                     h="32px"
-                    icon={ <IconSvg name="vertical_dots" w={ 4 } h={ 4 }/> }
+                    icon={ <IconSvg name="dots" boxSize={ 4 } transform="rotate(-90deg)"/> }
                     colorScheme="gray"
                     variant="ghost"
                     as={ IconButton }

ui/token/TokenProjectInfo.tsx

@@ -27,7 +27,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   if (isMobile) {
     return (
       <>
-        <TriggerButton isOpen={ isOpen } onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle }/>
         <Modal isOpen={ isOpen } onClose={ onClose } size="full">
           <ModalContent>
             <ModalCloseButton/>
@@ -41,7 +41,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <TriggerButton isOpen={ isOpen } onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle }/>
       </PopoverTrigger>
       <PopoverContent w="500px">
         <PopoverBody px={ 6 } py={ 5 }>

ui/token/TokenProjectInfo/TriggerButton.tsx

@@ -5,10 +5,9 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClick: () => void;
-  isOpen: boolean;
 }
 
-const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <Button
       ref={ ref }
@@ -23,7 +22,6 @@ const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLB
     >
       <IconSvg name="rocket" boxSize={ 5 } mr={ 1 }/>
       <span>Info</span>
-      <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 1 }/>
     </Button>
   );
 };

ui/token/TokenVerifiedInfo.tsx

@@ -28,7 +28,7 @@ const TokenVerifiedInfo = ({ verifiedInfoQuery }: Props) => {
         <>
           <Skeleton w="100px" h="30px" borderRadius="base"/>
           <Skeleton w="100px" h="30px" borderRadius="base"/>
-          <Skeleton w="80px" h="30px" borderRadius="base"/>
+          <Skeleton w="70px" h="30px" borderRadius="base"/>
         </>
       );
     }