Dapps modals

types/client/marketplace.ts

@@ -24,6 +24,7 @@ export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocia
   author: string;
   description: string;
   site?: string;
+  rating?: number;
 };
 
 export type AppRating = {

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 }

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,8 +29,8 @@ import SearchBarBackdrop from './SearchBarBackdrop';
 import SearchBarInput from './SearchBarInput';
 import SearchBarRecentKeywords from './SearchBarRecentKeywords';
 import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
+import SearchBarSuggestExternalAppModal from './SearchBarSuggest/SearchBarSuggestExternalAppModal';
 import useQuickSearchQuery from './useQuickSearchQuery';
-
 type Props = {
   isHomepage?: boolean;
 };
@@ -37,6 +39,7 @@ const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
 const SearchBar = ({ isHomepage }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
+  const modal = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -96,6 +99,15 @@ const SearchBar = ({ isHomepage }: Props) => {
     saveToRecentKeywords(searchTerm);
     onClose();
   }, [ router.pathname, searchTerm, onClose ]);
+  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(() => {
@@ -174,6 +186,7 @@ const SearchBar = ({ isHomepage }: Props) => {
                     searchTerm={ debouncedSearchTerm }
                     onItemClick={ handleItemClick }
                     containerId={ SCROLL_CONTAINER_ID }
+                    handleData={ handleData }
                   />
                 ) }
               </Box>
@@ -191,6 +204,7 @@ const SearchBar = ({ isHomepage }: Props) => {
           </PopoverContent>
         </Portal>
       </Popover>
+      <SearchBarSuggestExternalAppModal isModalOpen={ modal.isOpen } onModalClose={ modal.onClose } dappDetails={ dappDetails }/>
       <SearchBarBackdrop isOpen={ isOpen }/>
     </>
   );

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,15 +20,15 @@ import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 import SearchBarSuggestApp from './SearchBarSuggestApp';
 import SearchBarSuggestBlockCountdown from './SearchBarSuggestBlockCountdown';
 import SearchBarSuggestItem from './SearchBarSuggestItem';
-
 interface Props {
   query: UseQueryResult<Array<SearchResultItem>, ResourceError<unknown>>;
   searchTerm: string;
   onItemClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   containerId: string;
+  handleData: (data: MarketplaceAppOverview) => void;
 }
 
-const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props) => {
+const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId, handleData }: Props) => {
   const isMobile = useIsMobile();
 
   const marketplaceApps = useMarketplaceApps(searchTerm);
@@ -179,8 +180,10 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
                   addressFormat={ settingsContext?.addressFormat }
                 />
               )) }
-              { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) =>
-                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick }/>,
+              { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) => (
+                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile }
+                  searchTerm={ searchTerm } onClick={ onItemClick } handleData={ handleData }/>
+              ),
               ) }
             </Element>
           );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -5,18 +5,18 @@ import React from 'react';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import highlightText from 'lib/highlightText';
-import IconSvg from 'ui/shared/IconSvg';
 
+import SearchBarSuggestItemButton from './SearchBarSuggestItemButton';
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
-
 interface Props {
   data: MarketplaceAppOverview;
   isMobile: boolean | undefined;
   searchTerm: string;
   onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  handleData: (data: MarketplaceAppOverview) => void;
 }
 
-const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) => {
+const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick, handleData }: Props) => {
 
   const logo = (
     <Image
@@ -42,7 +42,6 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <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"
@@ -81,24 +80,15 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && (
-          <IconSvg
-            name="link_external"
-            color="icon_link_external"
-            boxSize={ 3 }
-            verticalAlign="middle"
-            flexShrink={ 0 }
-          />
-        ) }
       </Flex>
     );
   })();
 
   if (data.external) {
     return (
-      <SearchBarSuggestItemLink onClick={ onClick } href={ data.url } target="_blank">
+      <SearchBarSuggestItemButton data={ data } handleData={ handleData }>
         { content }
-      </SearchBarSuggestItemLink>
+      </SearchBarSuggestItemButton>
     );
   }
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx

@@ -0,0 +1,204 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Box,
+  HStack,
+  Image,
+  VStack,
+  Heading,
+  Text,
+  Tag,
+  TagLabel,
+  Flex,
+  Link,
+} from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import IconSvg from 'ui/shared/IconSvg';
+
+import useToast from '../../../../lib/hooks/useToast';
+import SocialLink from '../../../marketplace/MarketplaceAppInfo/SocialLink';
+import type { Props as SocialLinkProps } from '../../../marketplace/MarketplaceAppInfo/SocialLink';
+import WebsiteLink from '../../../marketplace/MarketplaceAppInfo/WebsiteLink';
+import Stars from '../../../marketplace/Rating/Stars';
+type Props = {
+  isModalOpen: boolean;
+  onModalClose: () => void;
+  dappDetails: MarketplaceAppOverview | null;
+};
+const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
+  { field: 'github', icon: 'social/github_filled', title: 'Github' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
+  { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
+  { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
+];
+const SearchBarSuggestExternalAppModal = ({ isModalOpen, onModalClose, dappDetails }: Props) => {
+  const isMobile = Boolean(useIsMobile());
+  const toast = useToast();
+  const socialLinks: Array<SocialLinkProps> = [];
+  SOCIAL_LINKS.forEach((link) => {
+    const href = dappDetails?.[link.field];
+    if (href) {
+      if (Array.isArray(href)) {
+        href.forEach((href) => socialLinks.push({ ...link, href }));
+      } else {
+        socialLinks.push({ ...link, href });
+      }
+    }
+  });
+  const handleCopy = useCallback(() => {
+    const urlToCopy = dappDetails?.site;
+
+    navigator.clipboard
+      .writeText(urlToCopy || '')
+      .then(() => {
+        toast({
+          status: 'success',
+          title: 'Copied to clipboard!',
+        });
+      })
+      .catch(() => {
+        toast({
+          status: 'error',
+          title: 'URL Copy failed',
+        });
+      });
+  }, [ dappDetails?.site, toast ]);
+
+  const launchApp = useCallback(() => {
+    const appUrl = dappDetails?.site;
+    window.open(appUrl, '_blank');
+  }, [ dappDetails?.site ]);
+
+  return (
+    <Modal isOpen={ isModalOpen } onClose={ onModalClose } isCentered size="md">
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalBody>
+          { dappDetails ? (
+            <Box>
+              <HStack spacing={ 4 } align="start" mb={ 4 }>
+                <Image
+                  src={ dappDetails.logo || "" }
+                  alt={ `${ dappDetails.title } Logo` }
+                  boxSize="100px"
+                  borderRadius="md"
+                />
+                <VStack align="start" spacing={ 1 } flex="1">
+                  <VStack align="start" spacing={ 4 }>
+                    <VStack align="start" spacing={ 1 } flex="1">
+                      <HStack spacing={ 2 } alignItems="center">
+                        <Heading size="md">{ dappDetails.title }</Heading>
+                        <Link href={ dappDetails?.site } target="_blank">
+                          <IconSvg
+                            name="link_external"
+                            color="icon_link_external"
+                            boxSize={ 3 }
+                            verticalAlign="middle"
+                            flexShrink={ 0 }
+                          />
+                        </Link>
+                      </HStack>
+                      <Text fontSize="xs" color="gray.500">
+                        By { dappDetails.author }
+                      </Text>
+                    </VStack>
+                    <HStack spacing={ 2 }>
+                      <Stars filledIndex={ dappDetails?.rating ? dappDetails.rating - 1 : -1 }/>
+                      <Text fontSize="sm" color="gray.500">
+                        { dappDetails?.rating ? dappDetails?.rating : 0 }
+                        { /* (5)  */ }
+                      </Text>
+                      { /* <Text fontSize="sm" color="blue.500">
+                    Rate it!
+                  </Text> */ }
+                    </HStack>
+                  </VStack>
+                  <HStack>
+                    <Button colorScheme="blue" size="sm" mt={ 4 } onClick={ launchApp } borderColor="gray.300">
+                      Launch App
+                    </Button>
+                    { /* <Button colorScheme="white" variant="outline" size="sm" mt={4}>
+                  <IconSvg
+                    name="heart_outline"
+                    color="blue.500"
+                    boxSize={3}
+                    verticalAlign="middle"
+                    flexShrink={0}
+                    _dark={{ color: 'blue.400' }}
+                    />
+                  </Button> */ }
+                    <Button colorScheme="white" variant="outline" size="sm" mt={ 4 } onClick={ handleCopy } borderColor="gray.300">
+                      <IconSvg
+                        name="share"
+                        color="blue.500"
+                        boxSize={ 3 }
+                        verticalAlign="middle"
+                        flexShrink={ 0 }
+                        _dark={{ color: 'blue.400' }}
+                      />
+                    </Button>
+
+                  </HStack>
+                </VStack>
+                <ModalCloseButton/>
+              </HStack>
+
+              <Text fontSize="sm" color="gray.700" mt={ 4 }>
+                { dappDetails.description || 'No description available.' }
+              </Text>
+            </Box>
+          ) : (
+            <Text>No details available for the selected app.</Text>
+          ) }
+        </ModalBody>
+        <ModalFooter>
+          { !isMobile && (
+            <Flex justify="space-between" align="center" w="100%">
+              <HStack spacing={ 2 } mt={ 3 }>
+                { dappDetails?.categories?.map((category, index) => (
+                  <Tag key={ index } size="sm" variant="subtle" colorScheme="blue">
+                    <TagLabel>{ category }</TagLabel>
+                  </Tag>
+                )) }
+              </HStack>
+              <HStack spacing={ 4 }>
+                { dappDetails?.site && <WebsiteLink url={ dappDetails.site }/> }
+                { dappDetails && socialLinks?.map((link, index) => (
+                  <SocialLink showIconsOnly={ true } key={ index } { ...link }/>
+                )) }
+              </HStack>
+            </Flex>
+          ) }
+          { isMobile && (
+            <Flex direction="column" align="flex-start" w="100%" mt={ 3 }>
+              <HStack spacing={ 2 } mt={ 3 }>
+                { dappDetails?.categories?.map((category, index) => (
+                  <Tag key={ index } size="sm" variant="subtle" colorScheme="blue">
+                    <TagLabel>{ category }</TagLabel>
+                  </Tag>
+                )) }
+              </HStack>
+              <HStack spacing={ 4 }>
+                { dappDetails?.site && <WebsiteLink url={ dappDetails.site }/> }
+                { dappDetails && socialLinks?.map((link, index) => (
+                  <SocialLink showIconsOnly={ true } key={ index } { ...link }/>
+                )) }
+              </HStack>
+            </Flex>
+          ) }
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+
+};
+export default React.memo(SearchBarSuggestExternalAppModal);