feat: dapp_modal_complete

blockscout · Jan 1, 2025 · 2697501 · 2697501
1 parent e734aa9
commit 2697501
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 147 deletions.
diff --git a/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx b/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx
@@ -11,9 +11,25 @@ export interface Props {
   icon: IconName;
   title: string;
   href?: string;
+  showIconsOnly?: boolean;
 }
 
-const SocialLink = ({ href, icon, title }: Props) => {
+const SocialLink = ({ href, icon, title, showIconsOnly }: Props) => {
+  if (showIconsOnly) {
+    return (
+      <Link
+        href={ href }
+        aria-label={ title }
+        title={ title }
+        target="_blank"
+        display="inline-flex"
+        alignItems="center"
+        mt={ 3 }
+      >
+        <IconSvg name={ icon } boxSize={ 5 } mr={ 2 } color="text_secondary"/>
+      </Link>
+    );
+  }
   return (
     <Link
       href={ href }

diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
@@ -11,9 +11,11 @@ import {
 import _debounce from 'lodash/debounce';
 import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Element } from 'react-scroll';
 
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
+
 import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
@@ -27,9 +29,8 @@ import SearchBarBackdrop from './SearchBarBackdrop';
 import SearchBarInput from './SearchBarInput';
 import SearchBarRecentKeywords from './SearchBarRecentKeywords';
 import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
-import useQuickSearchQuery from './useQuickSearchQuery';
 import SearchBarSuggestExternalAppModal from './SearchBarSuggest/SearchBarSuggestExternalAppModal';
-import { MarketplaceAppOverview } from 'types/client/marketplace';
+import useQuickSearchQuery from './useQuickSearchQuery';
 type Props = {
   isHomepage?: boolean;
 };
@@ -38,7 +39,7 @@ const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
 const SearchBar = ({ isHomepage }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const modal = useDisclosure(); 
+  const modal = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -98,12 +99,15 @@ const SearchBar = ({ isHomepage }: Props) => {
     saveToRecentKeywords(searchTerm);
     onClose();
   }, [ router.pathname, searchTerm, onClose ]);
-  const [dappDetails, setDappDetails] = React.useState<MarketplaceAppOverview | null>(null);
-  const handleData = (data: MarketplaceAppOverview) => {
-    setDappDetails(data);
-    onClose();
-    modal.onOpen();
-  };
+  const [ dappDetails, setDappDetails ] = React.useState<MarketplaceAppOverview | null>(null);
+  const handleData = useCallback(
+    (data: MarketplaceAppOverview) => {
+      setDappDetails(data);
+      onClose();
+      modal.onOpen();
+    },
+    [ setDappDetails, onClose, modal ], // Dependencies
+  );
 
   const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
@@ -182,7 +186,7 @@ const SearchBar = ({ isHomepage }: Props) => {
                     searchTerm={ debouncedSearchTerm }
                     onItemClick={ handleItemClick }
                     containerId={ SCROLL_CONTAINER_ID }
-                    handleData={handleData}
+                    handleData={ handleData }
                   />
                 ) }
               </Box>
@@ -200,7 +204,7 @@ const SearchBar = ({ isHomepage }: Props) => {
           </PopoverContent>
         </Portal>
       </Popover>
-      <SearchBarSuggestExternalAppModal isModalOpen={modal.isOpen} onModalClose={modal.onClose} dappDetails={dappDetails} />
+      <SearchBarSuggestExternalAppModal isModalOpen={ modal.isOpen } onModalClose={ modal.onClose } dappDetails={ dappDetails }/>
       <SearchBarBackdrop isOpen={ isOpen }/>
     </>
   );

diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import type { SearchResultItem } from 'types/api/search';
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import type { ResourceError } from 'lib/api/resources';
 import { useSettingsContext } from 'lib/contexts/settings';
@@ -19,13 +20,12 @@ import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 import SearchBarSuggestApp from './SearchBarSuggestApp';
 import SearchBarSuggestBlockCountdown from './SearchBarSuggestBlockCountdown';
 import SearchBarSuggestItem from './SearchBarSuggestItem';
-import { MarketplaceAppOverview } from 'types/client/marketplace';
 interface Props {
   query: UseQueryResult<Array<SearchResultItem>, ResourceError<unknown>>;
   searchTerm: string;
   onItemClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   containerId: string;
-  handleData :(data:MarketplaceAppOverview) => void;
+  handleData: (data: MarketplaceAppOverview) => void;
 }
 
 const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId, handleData }: Props) => {
@@ -180,8 +180,10 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId, handleD
                   addressFormat={ settingsContext?.addressFormat }
                 />
               )) }
-              { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) =>
-                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick } handleData={handleData}/>,
+              { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) => (
+                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile }
+                  searchTerm={ searchTerm } onClick={ onItemClick } handleData={ handleData }/>
+              ),
               ) }
             </Element>
           );

diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
@@ -5,11 +5,9 @@ import React from 'react';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import highlightText from 'lib/highlightText';
-import IconSvg from 'ui/shared/IconSvg';
 
-import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
-import SearchBarSuggestExternalAppModal from './SearchBarSuggestExternalAppModal';
 import SearchBarSuggestItemButton from './SearchBarSuggestItemButton';
+import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 interface Props {
   data: MarketplaceAppOverview;
   isMobile: boolean | undefined;
@@ -44,7 +42,6 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick, handleData }
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            {/* { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> } */}
           </Flex>
           <Text
             variant="secondary"
@@ -83,23 +80,14 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick, handleData }
         >
           { data.description }
         </Text>
-        {/* { data.external && (
-          <IconSvg
-            name="link_external"
-            color="icon_link_external"
-            boxSize={ 3 }
-            verticalAlign="middle"
-            flexShrink={ 0 }
-          />
-        ) } */}
       </Flex>
     );
   })();
 
   if (data.external) {
     return (
-      <SearchBarSuggestItemButton data={data} handleData={handleData}>
-         {content}
+      <SearchBarSuggestItemButton data={ data } handleData={ handleData }>
+        { content }
       </SearchBarSuggestItemButton>
     );
   }