diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth
index 9fc1c00433..385f172118 100644
--- a/configs/envs/.env.eth
+++ b/configs/envs/.env.eth
@@ -46,6 +46,11 @@ NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
#meta
NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true
diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx
index a50b82b4e4..3559b1978d 100644
--- a/ui/searchResults/SearchResultsInput.tsx
+++ b/ui/searchResults/SearchResultsInput.tsx
@@ -5,6 +5,7 @@ import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
+import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
@@ -66,33 +67,39 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
};
}, [ calculateMenuWidth ]);
+ const isSuggestOpen = isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0;
+
return (
- 0 && searchTerm.trim().length === 0 }
- autoFocus={ false }
- onClose={ onClose }
- placement="bottom-start"
- offset={ isMobile ? [ 16, -12 ] : undefined }
- isLazy
- >
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ >
);
};
diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
index 362f2e7639..9ceee88101 100644
--- a/ui/snippets/searchBar/SearchBar.tsx
+++ b/ui/snippets/searchBar/SearchBar.tsx
@@ -1,4 +1,14 @@
-import { Box, Portal, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter, useOutsideClick } from '@chakra-ui/react';
+import {
+ Box,
+ Portal,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ PopoverBody,
+ PopoverFooter,
+ useDisclosure,
+ useOutsideClick,
+} from '@chakra-ui/react';
import _debounce from 'lodash/debounce';
import { useRouter } from 'next/router';
import type { FormEvent } from 'react';
@@ -12,6 +22,7 @@ import * as mixpanel from 'lib/mixpanel/index';
import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
import LinkInternal from 'ui/shared/LinkInternal';
+import SearchBarBackdrop from './SearchBarBackdrop';
import SearchBarInput from './SearchBarInput';
import SearchBarRecentKeywords from './SearchBarRecentKeywords';
import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
@@ -106,69 +117,73 @@ const SearchBar = ({ isHomepage }: Props) => {
}, [ calculateMenuWidth ]);
return (
- 0 || recentSearchKeywords.length > 0) }
- autoFocus={ false }
- onClose={ onClose }
- placement="bottom-start"
- offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined }
- isLazy
- >
-
-
-
-
-
-
+ 0 || recentSearchKeywords.length > 0) }
+ autoFocus={ false }
+ onClose={ onClose }
+ placement="bottom-start"
+ offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined }
+ isLazy
+ >
+
+
+
+
+
-
- { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
-
- ) }
- { searchTerm.trim().length > 0 && (
-
- ) }
-
-
- { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
-
-
- View all results
-
-
- ) }
-
-
-
+ { 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/SearchBarBackdrop.tsx b/ui/snippets/searchBar/SearchBarBackdrop.tsx
new file mode 100644
index 0000000000..05d2702fe8
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarBackdrop.tsx
@@ -0,0 +1,25 @@
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+ isOpen: boolean;
+}
+
+const SearchBarBackdrop = ({ isOpen }: Props) => {
+ const backdropBgColor = useColorModeValue('blackAlpha.400', 'blackAlpha.600');
+
+ return (
+
+ );
+};
+
+export default React.memo(SearchBarBackdrop);
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index d1eb066474..d4088e06a8 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -16,10 +16,14 @@ interface Props {
onHide?: () => void;
onClear: () => void;
isHomepage?: boolean;
+ isSuggestOpen?: boolean;
value: string;
}
-const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, onClear, value }: Props, ref: React.ForwardedRef) => {
+const SearchBarInput = (
+ { onChange, onSubmit, isHomepage, isSuggestOpen, 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);
@@ -71,10 +75,10 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
w="100%"
backgroundColor={ bgColor }
borderRadius={{ base: isHomepage ? 'base' : 'none', lg: 'base' }}
- position={{ base: isHomepage ? 'static' : 'absolute', lg: 'static' }}
+ position={{ base: isHomepage ? 'static' : 'absolute', lg: 'relative' }}
top={{ base: isHomepage ? 0 : 55, lg: 0 }}
left="0"
- zIndex={{ base: isHomepage ? 'auto' : '-1', lg: 'auto' }}
+ zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png
index 9cfc914b85..4bf76fee17 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png
index 9017b6762c..97875b4515 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png
index 5943a7308a..cb71b52d02 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png
index 7794b3be18..db793662ce 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png
index 4814677c87..64ff86056f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png
index dae3d9949c..b40ca14719 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png
index 89a811c836..eea4e39708 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png
index 548c9271b4..809aa9e90a 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png
index 486edadb4f..530ed3685f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png
index 2bc3b994c7..4584baf91f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png
index b14c0278b9..02c42937f1 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png
index 73f86b73a5..0a2c600ebc 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png
index bcee42809f..c58de52f87 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png
index 86fa94bf04..dd8fbb7f3a 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png differ