Merge pull request #2057 from blockscout/tom2drum/issue-1977

Update gutter between popover and anchor

.eslintrc.js

@@ -5,9 +5,19 @@ 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', 'Menu', 'useToast' ],
+      message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
+    },
+    {
+      name: 'lodash',
+      message: 'Please use `import [package] from \'lodash/[package]\'` instead.',
+    },
   ],
   patterns: [
     'icons/*',
+    '!lodash/*',
   ],
 };
 

lib/hooks/useToast.tsx

@@ -2,7 +2,7 @@ import type { UseToastOptions, ToastProps } from '@chakra-ui/react';
 import { createToastFn, useChakra } from '@chakra-ui/react';
 import React from 'react';
 
-import Toast from 'ui/shared/Toast';
+import Toast from 'ui/shared/chakra/Toast';
 
 // there is no toastComponent prop in UseToastOptions type
 // but these options will be passed to createRenderToast under the hood

lib/recentSearchKeywords.ts

-import { uniq } from 'lodash';
+import _uniq from 'lodash/uniq';
 
 import isBrowser from './isBrowser';
 
@@ -27,7 +27,7 @@ export function saveToRecentKeywords(value: string) {
   }
 
   const keywordsArr = getRecentSearchKeywords();
-  const result = uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
+  const result = _uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
   window.localStorage.setItem(RECENT_KEYWORDS_LS_KEY, JSON.stringify(result));
 }
 

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/pages/Marketplace.tsx

-import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
+import { Box, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -14,6 +14,7 @@ import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import { SORT_OPTIONS } from 'ui/marketplace/utils';
+import Menu from 'ui/shared/chakra/Menu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
 import type { IconName } from 'ui/shared/IconSvg';

ui/pages/UserOp.tsx

-import { inRange } from 'lodash';
+import _inRange from 'lodash/inRange';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -43,7 +43,11 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(Number(tt.log_index), userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(
+        Number(tt.log_index),
+        userOpQuery.data?.user_logs_start_index,
+        userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count,
+      )) {
         return true;
       }
       return false;
@@ -54,7 +58,7 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
         return true;
       }
       return false;

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/AccountActionsMenu/AccountActionsMenu.tsx

-import { Box, IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
+import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem';

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/Menu.tsx

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

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/chart/ChartWidget.tsx

@@ -4,7 +4,6 @@ import {
   chakra,
   Flex,
   IconButton, Link,
-  Menu,
   MenuButton,
   MenuItem,
   MenuList,
@@ -22,6 +21,7 @@ import type { TimeChartItem } from './types';
 import dayjs from 'lib/date/dayjs';
 import { apos } from 'lib/html-entities';
 import saveAsCSV from 'lib/saveAsCSV';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ChartWidgetGraph from './ChartWidgetGraph';

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';
@@ -33,7 +33,6 @@ interface Props {
   placement?: PlacementWithLogical;
 }
 
-const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ];
 const feature = config.features.gasTracker;
 
 const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
@@ -50,7 +49,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
       3 : 2;
 
   return (
-    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen } placement={ placement }>
+    <Popover trigger="hover" isLazy isOpen={ isOpen } placement={ placement }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>

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/stats/StatsDropdownMenu.tsx

-import { Box, Button, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react';
+import { Box, Button, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props<T extends string> = {

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/TxAssetFlows.tsx

 import { Table, Tbody, Tr, Th, Box, Skeleton, Text, Show, Hide } from '@chakra-ui/react';
-import _ from 'lodash';
+import _chunk from 'lodash/chunk';
 import React, { useMemo, useState } from 'react';
 
 import type { PaginationParams } from 'ui/shared/pagination/types';
@@ -33,7 +33,7 @@ export default function TxAssetFlows(props: FlowViewProps) {
   const [ page, setPage ] = useState<number>(1);
 
   const ViewData = useMemo(() => (queryData ? generateFlowViewData(queryData) : []), [ queryData ]);
-  const chunkedViewData = _.chunk(ViewData, 50);
+  const chunkedViewData = _chunk(ViewData, 50);
 
   const paginationProps: PaginationParams = useMemo(() => ({
     onNextPageClick: () => setPage(page + 1),

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/tx/assetFlows/utils/generateFlowViewData.ts

-import _ from 'lodash';
+import _findIndex from 'lodash/findIndex';
 
 import type { NovesNft, NovesResponseData, NovesSentReceived, NovesToken } from 'types/api/noves';
 
@@ -27,7 +27,7 @@ export function generateFlowViewData(data: NovesResponseData): Array<NovesFlowVi
 
   const txItems = [ ...sent, ...received ];
 
-  const paidGasIndex = _.findIndex(txItems, (item) => item.action === 'paidGas');
+  const paidGasIndex = _findIndex(txItems, (item) => item.action === 'paidGas');
   if (paidGasIndex >= 0) {
     const element = txItems.splice(paidGasIndex, 1)[0];
     element.to.name = 'Validators';

ui/tx/assetFlows/utils/getTokensData.ts

-import _ from 'lodash';
+import _groupBy from 'lodash/groupBy';
+import _keysIn from 'lodash/keysIn';
+import _mapValues from 'lodash/mapValues';
 
 import type { NovesResponseData } from 'types/api/noves';
 import type { TokenInfo } from 'types/api/token';
@@ -47,28 +49,28 @@ export function getTokensData(data: NovesResponseData): TokensData {
   });
 
   // Group tokens by property into arrays
-  const tokensGroupByname = _.groupBy(tokens, 'name');
-  const tokensGroupBySymbol = _.groupBy(tokens, 'symbol');
-  const tokensGroupById = _.groupBy(tokens, 'id');
+  const tokensGroupByname = _groupBy(tokens, 'name');
+  const tokensGroupBySymbol = _groupBy(tokens, 'symbol');
+  const tokensGroupById = _groupBy(tokens, 'id');
 
   // Map properties to an object and remove duplicates
-  const mappedNames = _.mapValues(tokensGroupByname, (i) => {
+  const mappedNames = _mapValues(tokensGroupByname, (i) => {
     return i[0];
   });
 
-  const mappedSymbols = _.mapValues(tokensGroupBySymbol, (i) => {
+  const mappedSymbols = _mapValues(tokensGroupBySymbol, (i) => {
     return i[0];
   });
 
-  const mappedIds = _.mapValues(tokensGroupById, (i) => {
+  const mappedIds = _mapValues(tokensGroupById, (i) => {
     return i[0];
   });
 
   const filters = [ 'undefined', 'null' ];
   // Array of keys to match in string
-  const nameList = _.keysIn(mappedNames).filter(i => !filters.includes(i));
-  const symbolList = _.keysIn(mappedSymbols).filter(i => !filters.includes(i));
-  const idList = _.keysIn(mappedIds).filter(i => !filters.includes(i));
+  const nameList = _keysIn(mappedNames).filter(i => !filters.includes(i));
+  const symbolList = _keysIn(mappedSymbols).filter(i => !filters.includes(i));
+  const idList = _keysIn(mappedIds).filter(i => !filters.includes(i));
 
   return {
     nameList,

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';

ui/txs/noves/useDescribeTxs.tsx

 import { useQuery } from '@tanstack/react-query';
-import _ from 'lodash';
+import _chunk from 'lodash/chunk';
+import _uniq from 'lodash/uniq';
 import React from 'react';
 
 import type { NovesDescribeTxsResponse } from 'types/api/noves';
@@ -15,8 +16,8 @@ const translateEnabled = feature.isEnabled && feature.provider === 'noves';
 export default function useDescribeTxs(items: Array<Transaction> | undefined, viewAsAccountAddress: string | undefined, isPlaceholderData: boolean) {
   const apiFetch = useApiFetch();
 
-  const txsHash = _.uniq(items?.map(i => i.hash));
-  const txChunks = _.chunk(txsHash, 10);
+  const txsHash = _uniq(items?.map(i => i.hash));
+  const txChunks = _chunk(txsHash, 10);
 
   const queryKey = {
     viewAsAccountAddress,