create custom Popover component with default gutter prop

.eslintrc.js

@@ -5,6 +5,7 @@ const RESTRICTED_MODULES = {
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
+    { name: '@chakra-ui/react', importNames: [ 'Popover' ], message: 'Please use ui/shared/chakra/Popover.tsx component instead' },
   ],
   patterns: [
     'icons/*',

ui/address/SolidityscanReport.tsx

-import { Box, Text, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { Box, Text, Icon, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 // This icon doesn't work properly when it is in the sprite
@@ -7,6 +7,7 @@ import React from 'react';
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { SOLIDITYSCAN_REPORT } from 'stubs/contract';
+import Popover from 'ui/shared/chakra/Popover';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';

ui/address/contract/ContractCodeIdes.tsx

@@ -2,7 +2,6 @@ import {
   Flex,
   Button,
   chakra,
-  Popover,
   PopoverTrigger,
   PopoverBody,
   PopoverContent,
@@ -14,6 +13,7 @@ import {
 import React from 'react';
 
 import config from 'configs/app';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 

ui/address/contract/ContractExternalLibraries.tsx

@@ -7,7 +7,6 @@ import {
   Modal,
   ModalCloseButton,
   ModalContent,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -22,6 +21,7 @@ import type { SmartContractExternalLibrary } from 'types/api/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx

 import {
   chakra,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -14,6 +13,7 @@ import {
 import React from 'react';
 
 import { times } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   Grid,
   Hide,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -23,6 +22,7 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
+import Popover from 'ui/shared/chakra/Popover';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';

ui/address/tokenSelect/TokenSelectDesktop.tsx

-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TokenSelectButton from './TokenSelectButton';
 import TokenSelectMenu from './TokenSelectMenu';
 import useTokenSelect from './useTokenSelect';

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

 import {
   Link,
   chakra,
-  Popover,
   PopoverTrigger,
   Portal,
   PopoverContent,
@@ -21,6 +20,7 @@ import type { FormFields } from '../types';
 import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 import FancySelect from 'ui/shared/FancySelect/FancySelect';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/marketplace/AppSecurityReport.tsx

-import { Box, Text, Link, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react';
+import { Box, Text, Link, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppSecurityReport } from 'types/client/marketplace';
@@ -11,6 +11,7 @@ import config from 'configs/app';
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import { apos } from 'lib/html-entities';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';

ui/marketplace/ContractSecurityReport.tsx

-import { Box, Text, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react';
+import { Box, Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SolidityscanReport } from 'types/api/contract';
@@ -9,6 +9,7 @@ import config from 'configs/app';
 // eslint-disable-next-line no-restricted-imports
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';

ui/marketplace/MarketplaceAppInfo.tsx

 import {
-  Popover, PopoverTrigger, PopoverContent, PopoverBody,
+  PopoverTrigger, PopoverContent, PopoverBody,
   Modal, ModalContent, ModalCloseButton, useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -7,6 +7,7 @@ import React from 'react';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
 import Content from './MarketplaceAppInfo/Content';
 import TriggerButton from './MarketplaceAppInfo/TriggerButton';

ui/searchResults/SearchResultsInput.tsx

-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
+import Popover from 'ui/shared/chakra/Popover';
 import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
@@ -76,7 +77,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
-        offset={ isMobile ? [ 16, -12 ] : undefined }
+        offset={ isMobile ? [ 16, -12 ] : [ 0, 8 ] }
         isLazy
       >
         <PopoverTrigger>

ui/shared/EntityTags/EntityTagPopover.tsx

-import { chakra, Image, Flex, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react';
+import { chakra, Image, Flex, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EntityTag } from './types';
 
 import makePrettyLink from 'lib/makePrettyLink';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 
 interface Props {
@@ -35,7 +36,7 @@ const EntityTagPopover = ({ data, children }: Props) => {
   }
 
   return (
-    <Popover trigger="hover" isLazy>
+    <Popover trigger="hover" isLazy gutter={ 8 }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>

ui/shared/EntityTags/EntityTags.tsx

-import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react';
+import { Box, Flex, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EntityTag as TEntityTag } from './types';
 
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 import Tag from 'ui/shared/chakra/Tag';
 
 import EntityTag from './EntityTag';

ui/shared/NetworkExplorers.tsx

 import {
   Image,
   Button,
-  Popover,
   PopoverTrigger,
   PopoverBody,
   PopoverContent,
@@ -18,6 +17,7 @@ import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 
 import config from 'configs/app';
 import stripTrailingSlash from 'lib/stripTrailingSlash';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';

ui/shared/Tabs/TabsMenu.tsx

 import type {
   ButtonProps } from '@chakra-ui/react';
-import { Popover,
+import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -12,6 +12,8 @@ import React from 'react';
 
 import type { MenuButton, TabItem } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TabCounter from './TabCounter';
 import { menuButton } from './utils';
 

ui/shared/chakra/Popover.tsx

+import type { PopoverProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Popover as PopoverBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Popover = (props: PopoverProps) => {
+  return <PopoverBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Popover);

ui/shared/entities/ens/EnsEntity.tsx

-import { Box, chakra, Flex, Image, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
+import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
@@ -6,6 +6,7 @@ import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
+import Popover from 'ui/shared/chakra/Popover';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';

ui/shared/filters/PopoverFilter.tsx

 import type { PopoverContentProps } from '@chakra-ui/react';
 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -8,6 +7,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import FilterButton from 'ui/shared/filters/FilterButton';
 
 interface Props {

ui/shared/filters/PopoverFilterRadio.tsx

 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -11,6 +10,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import FilterButton from 'ui/shared/filters/FilterButton';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/shared/gas/GasInfoTooltip.tsx

@@ -5,7 +5,6 @@ import {
   DarkMode,
   Flex,
   Grid,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -20,6 +19,7 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import Popover from 'ui/shared/chakra/Popover';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import GasInfoTooltipRow from './GasInfoTooltipRow';

ui/shared/sort/Sort.tsx

 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -10,6 +9,7 @@ import {
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
 import SortButtonDesktop from './ButtonDesktop';
 import SortButtonMobile from './ButtonMobile';

ui/snippets/footer/IntTxsIndexingStatus.tsx

-import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { IconButton, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { apos, nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 const IntTxsIndexingStatus = () => {

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

-import { HStack, Popover, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react';
+import { HStack, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
@@ -27,6 +28,7 @@ const NavLinkGroup = ({ item }: Props) => {
       trigger="hover"
       placement="bottom-start"
       isLazy
+      gutter={ 8 }
     >
       { ({ isOpen }) => (
         <>

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -3,7 +3,6 @@ import {
   HStack,
   Box,
   Link,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -13,6 +12,7 @@ import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
@@ -39,6 +39,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
         trigger="hover"
         placement="right-start"
         isLazy
+        gutter={ 8 }
       >
         <PopoverTrigger>
           <Link

ui/snippets/networkMenu/NetworkMenu.tsx

-import { Popover, PopoverTrigger } from '@chakra-ui/react';
+import { PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
 import useNetworkMenu from './useNetworkMenu';
@@ -13,7 +15,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
   const menu = useNetworkMenu();
 
   return (
-    <Popover openDelay={ 300 } placement="right-start" gutter={ 8 } isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+    <Popover openDelay={ 300 } placement="right-start" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
       <PopoverTrigger>
         <NetworkMenuButton
           marginLeft="auto"

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

 import type { IconButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box, chakra } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useLoginUrl from 'lib/hooks/useLoginUrl';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 

ui/snippets/searchBar/SearchBar.tsx

 import {
   Box,
   Portal,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -20,6 +19,7 @@ import { route } from 'nextjs-routes';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
+import Popover from 'ui/shared/chakra/Popover';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import SearchBarBackdrop from './SearchBarBackdrop';
@@ -123,7 +123,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
-        offset={ isMobile && !isHomepage ? [ 12, -4 ] : undefined }
+        offset={ isMobile && !isHomepage ? [ 12, -4 ] : [ 0, 8 ] }
         isLazy
       >
         <PopoverTrigger>

ui/snippets/topBar/DeFiDropdown.tsx

-import { Button, Box, Flex, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react';
+import { Button, Box, Flex, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,6 +7,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import DeFiDropdownItem from './DeFiDropdownItem';

ui/snippets/topBar/NetworkMenu.tsx

-import { IconButton, Popover, PopoverTrigger } from '@chakra-ui/react';
+import { IconButton, PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkMenuContentDesktop from 'ui/snippets/networkMenu/NetworkMenuContentDesktop';
 import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';

ui/snippets/topBar/settings/Settings.tsx

-import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
+import { Box, IconButton, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import SettingsColorTheme from './SettingsColorTheme';

ui/snippets/walletMenu/WalletMenuDesktop.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra, useColorModeValue } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
@@ -65,7 +66,6 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
     <Popover
       openDelay={ 300 }
       placement="bottom-end"
-      gutter={ 10 }
       isLazy
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }

ui/token/TokenProjectInfo.tsx

 import {
-  Popover, PopoverTrigger, PopoverContent, PopoverBody,
+  PopoverTrigger, PopoverContent, PopoverBody,
   Modal, ModalContent, ModalCloseButton,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -8,6 +8,7 @@ import React from 'react';
 import type { TokenVerifiedInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
 import Content, { hasContent } from './TokenProjectInfo/Content';
 import TriggerButton from './TokenProjectInfo/TriggerButton';

ui/tx/assetFlows/components/NovesActionSnippet.tsx

-import { Box, Hide, Popover, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import type { FC } from 'react';
 import React from 'react';
 
 import { HEX_REGEXP } from 'lib/regexp';
+import Popover from 'ui/shared/chakra/Popover';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/txs/TxAdditionalInfo.tsx

@@ -3,7 +3,6 @@ import {
   Modal,
   ModalContent,
   ModalCloseButton,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -14,6 +13,7 @@ import React from 'react';
 import type { Transaction } from 'types/api/transaction';
 
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
+import Popover from 'ui/shared/chakra/Popover';
 
 import TxAdditionalInfoContainer from './TxAdditionalInfoContainer';
 import TxAdditionalInfoContent from './TxAdditionalInfoContent';