|
-
+
|
diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx
index 25b5370a9e..7024498b39 100644
--- a/ui/pages/Marketplace.tsx
+++ b/ui/pages/Marketplace.tsx
@@ -1,4 +1,4 @@
-import { Box, Link, Skeleton } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
@@ -7,7 +7,6 @@ import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu'
import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
import MarketplaceList from 'ui/marketplace/MarketplaceList';
import FilterInput from 'ui/shared/filters/FilterInput';
-import IconSvg from 'ui/shared/IconSvg';
import useMarketplace from '../marketplace/useMarketplace';
const feature = config.features.marketplace;
@@ -91,29 +90,6 @@ const Marketplace = () => {
appId={ selectedApp.id }
/>
) }
-
-
-
-
-
- Submit an app
-
-
);
};
diff --git a/ui/shared/address/AddressAddToWallet.tsx b/ui/shared/address/AddressAddToWallet.tsx
index 119b4419ec..144e21101f 100644
--- a/ui/shared/address/AddressAddToWallet.tsx
+++ b/ui/shared/address/AddressAddToWallet.tsx
@@ -107,7 +107,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
return (
-
+
diff --git a/ui/shared/layout/LayoutApp.tsx b/ui/shared/layout/LayoutApp.tsx
index 469ef3b536..e2a169de9e 100644
--- a/ui/shared/layout/LayoutApp.tsx
+++ b/ui/shared/layout/LayoutApp.tsx
@@ -12,10 +12,11 @@ import * as Layout from './components';
const LayoutDefault = ({ children }: Props) => {
return (
+
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
index 9592758040..90e445ec47 100644
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
@@ -76,7 +76,7 @@ const ProfileMenuDesktop = ({ isHomePage }: Props) => {
textAlign="center"
padding={ 2 }
isDisabled={ hasMenu }
- openDelay={ 300 }
+ openDelay={ 500 }
>
diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
index 1e1dfadb35..f8b07afe1e 100644
--- a/ui/snippets/searchBar/SearchBar.tsx
+++ b/ui/snippets/searchBar/SearchBar.tsx
@@ -1,7 +1,7 @@
-import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter } from '@chakra-ui/react';
+import { Box, Portal, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter, useOutsideClick } from '@chakra-ui/react';
import _debounce from 'lodash/debounce';
import { useRouter } from 'next/router';
-import type { FormEvent, FocusEvent } from 'react';
+import type { FormEvent } from 'react';
import React from 'react';
import { Element } from 'react-scroll';
@@ -59,13 +59,15 @@ const SearchBar = ({ isHomepage }: Props) => {
inputRef.current?.querySelector('input')?.blur();
}, [ onClose ]);
- const handleBlur = React.useCallback((event: FocusEvent) => {
- const isFocusInMenu = menuRef.current?.contains(event.relatedTarget);
- const isFocusInInput = inputRef.current?.contains(event.relatedTarget);
- if (!isFocusInMenu && !isFocusInInput) {
- onClose();
+ const handleOutsideClick = React.useCallback((event: Event) => {
+ const isFocusInInput = inputRef.current?.contains(event.target as Node);
+
+ if (!isFocusInInput) {
+ handelHide();
}
- }, [ onClose ]);
+ }, [ handelHide ]);
+
+ useOutsideClick({ ref: menuRef, handler: handleOutsideClick });
const handleClear = React.useCallback(() => {
handleSearchTermChange('');
@@ -118,53 +120,54 @@ const SearchBar = ({ isHomepage }: Props) => {
onChange={ handleSearchTermChange }
onSubmit={ handleSubmit }
onFocus={ handleFocus }
- onBlur={ handleBlur }
onHide={ handelHide }
onClear={ handleClear }
isHomepage={ isHomepage }
value={ searchTerm }
/>
-
-
+
-
- { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
-
- ) }
- { searchTerm.trim().length > 0 && (
-
- ) }
-
-
- { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
-
-
+ { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
+
+ ) }
+ { searchTerm.trim().length > 0 && (
+
+ ) }
+
+
+ { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
+
+
View all results
-
-
- ) }
-
+
+
+ ) }
+
+
);
};
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index a7ea26d2e7..c8c9d30265 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -20,25 +20,33 @@ interface Props {
}
const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, onClear, value }: Props, ref: React.ForwardedRef) => {
+ const innerRef = React.useRef(null);
+ React.useImperativeHandle(ref, () => innerRef.current as HTMLFormElement, []);
const [ isSticky, setIsSticky ] = React.useState(false);
const scrollDirection = useScrollDirection();
const isMobile = useIsMobile();
const handleScroll = React.useCallback(() => {
const TOP_BAR_HEIGHT = 36;
- if (window.pageYOffset >= TOP_BAR_HEIGHT) {
- setIsSticky(true);
- } else {
- setIsSticky(false);
+ if (!isHomepage) {
+ if (window.scrollY >= TOP_BAR_HEIGHT) {
+ setIsSticky(true);
+ } else {
+ setIsSticky(false);
+ }
}
- }, [ ]);
+ const clientRect = isMobile && innerRef?.current?.getBoundingClientRect();
+ if (clientRect && clientRect.y < TOP_BAR_HEIGHT) {
+ onHide?.();
+ }
+ }, [ isMobile, onHide, isHomepage ]);
const handleChange = React.useCallback((event: ChangeEvent) => {
onChange(event.target.value);
}, [ onChange ]);
React.useEffect(() => {
- if (!isMobile || isHomepage) {
+ if (!isMobile) {
return;
}
const throttledHandleScroll = throttle(handleScroll, 300);
@@ -48,22 +56,14 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
return () => {
window.removeEventListener('scroll', throttledHandleScroll);
};
- // replicate componentDidMount
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ isMobile ]);
+ }, [ isMobile, handleScroll ]);
const bgColor = useColorModeValue('white', 'black');
const transformMobile = scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)';
- React.useEffect(() => {
- if (isMobile && scrollDirection === 'down') {
- onHide?.();
- }
- }, [ scrollDirection, onHide, isMobile ]);
-
return (
{
const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
+ const isMobile = useIsMobile();
const variant = React.useMemo(() => {
if (isWalletConnected) {
@@ -55,7 +57,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
isOpen={ isPopoverOpen }
onClose={ setIsPopoverOpen.off }
>
-
+
|