diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx index af57b5bd20..a67612535d 100644 --- a/ui/address/ensDomains/AddressEnsDomains.tsx +++ b/ui/address/ensDomains/AddressEnsDomains.tsx @@ -1,4 +1,18 @@ -import { Box, Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { + Box, + Button, + Flex, + Grid, + Hide, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, + Show, + Skeleton, + useDisclosure, + chakra, +} from '@chakra-ui/react'; import _clamp from 'lodash/clamp'; import React from 'react'; @@ -12,6 +26,7 @@ import dayjs from 'lib/date/dayjs'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/LinkInternal'; +import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip'; interface Props { addressHash: string; @@ -90,25 +105,27 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => { return ( - + + + diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx index 6671a07274..200341f87e 100644 --- a/ui/shared/NetworkExplorers.tsx +++ b/ui/shared/NetworkExplorers.tsx @@ -20,6 +20,7 @@ import config from 'configs/app'; import stripTrailingSlash from 'lib/stripTrailingSlash'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/LinkExternal'; +import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip'; interface Props { className?: string; @@ -55,26 +56,27 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => { return ( - + + + diff --git a/ui/shared/PopoverTriggerTooltip.tsx b/ui/shared/PopoverTriggerTooltip.tsx new file mode 100644 index 0000000000..b0ed7ab91e --- /dev/null +++ b/ui/shared/PopoverTriggerTooltip.tsx @@ -0,0 +1,30 @@ +import { Skeleton, Tooltip, chakra } from '@chakra-ui/react'; +import React from 'react'; + +import useIsMobile from 'lib/hooks/useIsMobile'; + +type Props = { + label: string; + isLoading?: boolean; + className?: string; + children: React.ReactNode; +} + +const PopoverTriggerTooltip = ({ label, isLoading, className, children }: Props, ref: React.ForwardedRef) => { + const isMobile = useIsMobile(); + return ( + // tooltip need to be wrapped in div for proper popover positioning + + + { children } + + + ); +}; + +export default chakra(React.forwardRef(PopoverTriggerTooltip)); diff --git a/ui/shared/solidityscanReport/SolidityscanReportButton.tsx b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx index d5c43f107f..f8747185e0 100644 --- a/ui/shared/solidityscanReport/SolidityscanReportButton.tsx +++ b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx @@ -1,8 +1,9 @@ -import { Button, Skeleton } from '@chakra-ui/react'; +import { Button } from '@chakra-ui/react'; import React from 'react'; import IconSvg from 'ui/shared/IconSvg'; +import PopoverTriggerTooltip from '../PopoverTriggerTooltip'; import useScoreLevelAndColor from './useScoreLevelAndColor'; interface Props { @@ -21,10 +22,9 @@ const SolidityscanReportButton = ( const { scoreColor } = useScoreLevelAndColor(score); return ( - + - + ); };