From 2697501b96aba29150686016ec15d3244533fe53 Mon Sep 17 00:00:00 2001
From: Varun Guleria <varunguleria01@gmail.com>
Date: Thu, 2 Jan 2025 01:13:51 +0530
Subject: [PATCH] feat: dapp_modal_complete

---
 .../MarketplaceAppInfo/SocialLink.tsx         |  18 +-
 ui/snippets/searchBar/SearchBar.tsx           |  28 +-
 .../SearchBarSuggest/SearchBarSuggest.tsx     |  10 +-
 .../SearchBarSuggest/SearchBarSuggestApp.tsx  |  18 +-
 .../SearchBarSuggestExternalAppModal.tsx      | 253 +++++++++++-------
 .../SearchBarSuggestItemButton.tsx            |  40 +--
 6 files changed, 220 insertions(+), 147 deletions(-)

diff --git a/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx b/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx
index da3464f6d6..3d657b82df 100644
--- 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
index 320c283407..3f0b271c58 100644
--- 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
index 11db405969..e5c52146fd 100644
--- 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
index 16397bb4dc..474d014c06 100644
--- 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>
     );
   }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx
index 814128255a..bca38b361c 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx
@@ -2,14 +2,11 @@ import {
   Modal,
   ModalOverlay,
   ModalContent,
-  ModalHeader,
   ModalFooter,
   ModalBody,
   ModalCloseButton,
   Button,
-  useDisclosure,
   Box,
-  useColorModeValue,
   HStack,
   Image,
   VStack,
@@ -17,27 +14,35 @@ import {
   Text,
   Tag,
   TagLabel,
-  IconButton
+  Flex,
+  Link,
 } from '@chakra-ui/react';
-import Stars from '../../../marketplace/Rating/Stars';
-import React, { useEffect } from 'react';
-import { MarketplaceAppOverview, MarketplaceAppSocialInfo } from 'types/client/marketplace';
+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 WebsiteLink from '../../../marketplace/MarketplaceAppInfo/WebsiteLink';
+
+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' },
+  { 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 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];
@@ -49,97 +54,151 @@ const SearchBarSuggestExternalAppModal =({isModalOpen, onModalClose, dappDetails
       }
     }
   });
-    return (
-      <Modal isOpen={isModalOpen} onClose={onModalClose} isCentered size="sm">
-        <ModalOverlay />
-        <ModalContent>
-          {/* <ModalHeader></ModalHeader> */}
-          <ModalBody>
-            {dappDetails ? (
-              <Box>
-                {/* App Header Section */}
-                <HStack spacing={4} align="start" mb={4}>
-                  <Image
-                    src={dappDetails.logo || "https://via.placeholder.com/50"}
-                    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>
+  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="link_external"
-                    color="icon_link_external"
+                    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>
-                   <Text fontSize="xs" color="gray.500">
-                      By {dappDetails.author}
-                   </Text>
-                  </VStack>
-                  <HStack spacing={2}>
-                  {2
-                  && 
-                  (<>
-                  <Stars filledIndex={2 }/>
-                  <Text fontSize="sm" color="gray.500">
-                    {2}(5) 
-                  </Text>
-                  <Text fontSize="sm" color="blue.500">
-                    Rate it!
-                  </Text>
-                  </>
-                  )}
-                  </HStack>
-                  </VStack>
-                  <HStack>
-                  <Button colorScheme="blue" size="sm" mt={4}>
-                   Launch App
-                  </Button>
-                  </HStack>
-                  </VStack>
-                  <ModalCloseButton />
-                </HStack>                
-               
-                {/* Description Section */}
-                <Text fontSize="sm" color="gray.700" mt={4}>
-                  {dappDetails.description || "No description available."}
-                </Text>
+                </VStack>
+                <ModalCloseButton/>
+              </HStack>
 
-                {/* Tags Section */}
-                {/* <HStack spacing={2} mt={4}>
-                  {dappDetails.tags?.map((tag, index) => (
-                    <Tag key={index} size="sm" variant="subtle" colorScheme="blue">
-                      <TagLabel>{tag}</TagLabel>
-                    </Tag>
-                  ))}
-                </HStack> */}
-              </Box>
-            ) : (
-              <Text>No details available for the selected app.</Text>
-            )}
-          </ModalBody>
-          <ModalFooter>
-              <HStack spacing={2} mt={4}>
-                  {dappDetails?.categories?.map((category, index) => (
-                    <Tag key={index} size="sm" variant="subtle" colorScheme="blue">
-                      <TagLabel>{category}</TagLabel>
-                    </Tag>
-                  ))}
+              <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>
-              <HStack spacing={2} mt={4}>
-              (dappDetails && <WebsiteLink url={ dappDetails?.site }/>)
-              (dappDetails && { socialLinks.map((link, index) => <SocialLink key={ index } { ...link }/>) })
+            </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>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>   
-    );
-  
-}
+              <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);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx
index d7c8e5886c..80b9b1276c 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx
@@ -1,42 +1,46 @@
-import { chakra, useColorModeValue,Box } from '@chakra-ui/react';
-import React from 'react';
-import { MarketplaceAppOverview } from 'types/client/marketplace';
+import { useColorModeValue, Box } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
 type Props = {
-  data: any;
+  data: MarketplaceAppOverview;
   children: React.ReactNode;
   handleData: (data: MarketplaceAppOverview) => void;
 };
 
-const SearchBarSuggestItemButton = ({ data, children,handleData }: Props) => {
-    const handleClick = () => {
-        handleData(data);
-      };
-    return(
-      <Box
-      py={3}
-      px={1}
+const SearchBarSuggestItemButton = ({ data, children, handleData }: Props) => {
+  const handleClick = useCallback(() => {
+    handleData(data);
+  }, [ data, handleData ]);
+
+  const hoverBgColor = useColorModeValue('blue.50', 'gray.800');
+
+  return (
+    <Box
+      py={ 3 }
+      px={ 1 }
       display="flex"
       flexDir="column"
-      rowGap={2}
+      rowGap={ 2 }
       borderColor="divider"
       borderBottomWidth="1px"
-      cursor="pointer" 
+      cursor="pointer"
       _last={{
         borderBottomWidth: '0',
       }}
       _hover={{
-        bgColor: useColorModeValue('blue.50', 'gray.800'),
+        bgColor: hoverBgColor,
       }}
       fontSize="sm"
       _first={{
         mt: 2,
       }}
       className="cursor-pointer"
-      onClick={handleClick}
+      onClick={ handleClick }
     >
-      {children}
+      { children }
     </Box>
-    )
+  );
 };
 
 export default SearchBarSuggestItemButton;