Dapps modals (#2490)

* feat: basic_modal

* feat: dapp_modal_complete

* feat: navigating_apps+popup_open

* feat: removing_not_needed_changes

* feat: removing_not_used_changes_2

* feat: routing_updates+suggestions

* feat: test_update

* feat: router_import_fix

---------
Co-authored-by: Igor Stuev <108066576+isstuev@users.noreply.github.com>

ui/marketplace/Rating/useRatings.tsx

@@ -111,10 +111,11 @@ export default function useRatings() {
   }, [ address, toast ]);
 
   useEffect(() => {
-    const { isPlaceholderData, data } = addressCountersQuery;
-    const canRate = address && !isPlaceholderData && Number(data?.transactions_count) >= MIN_TRANSACTION_COUNT;
+    const isPlaceholderData = addressCountersQuery?.isPlaceholderData;
+    const transactionsCount = addressCountersQuery?.data?.transactions_count;
+    const canRate = address && !isPlaceholderData && Number(transactionsCount || 0) >= MIN_TRANSACTION_COUNT;
     setCanRate(canRate);
-  }, [ address, addressCountersQuery ]);
+  }, [ address, addressCountersQuery?.isPlaceholderData, addressCountersQuery?.data?.transactions_count ]);
 
   const rateApp = useCallback(async(
     appId: string,

ui/marketplace/useMarketplace.tsx

@@ -7,6 +7,7 @@ import { MarketplaceCategory } from 'types/client/marketplace';
 import useDebounce from 'lib/hooks/useDebounce';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
 
 import useRatings from './Rating/useRatings';
 import useMarketplaceApps from './useMarketplaceApps';
@@ -106,6 +107,14 @@ export default function useMarketplace() {
     // run only when data is loaded
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ isPlaceholderData ]);
+  React.useEffect(() => {
+    const selectedAppId = getQueryParamString(router.query.selectedAppId);
+    if (selectedAppId) {
+      setSelectedAppId(selectedAppId);
+      setIsAppInfoModalOpen(true);
+      removeQueryParam(router, 'selectedAppId');
+    }
+  }, [ router.query.selectedAppId, router ]);
 
   React.useEffect(() => {
     if (isPlaceholderData) {

ui/searchResults/SearchResultListItem.tsx

@@ -147,7 +147,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Pr
             />
             { data.app.external ? (
               <LinkExternal
-                href={ data.app.url }
+                href={
+                  route({
+                    pathname: '/apps',
+                    query: {
+                      selectedAppId: data.app.id,
+                    },
+                  })
+                }
                 fontWeight={ 700 }
                 wordBreak="break-all"
                 isLoading={ isLoading }

ui/searchResults/SearchResultTableItem.tsx

@@ -211,7 +211,14 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
                 />
                 { data.app.external ? (
                   <LinkExternal
-                    href={ data.app.url }
+                    href={
+                      route({
+                        pathname: '/apps',
+                        query: {
+                          selectedAppId: data.app.id,
+                        },
+                      })
+                    }
                     fontWeight={ 700 }
                     wordBreak="break-all"
                     isLoading={ isLoading }

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -209,8 +209,12 @@ test.describe('with apps', () => {
     await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
     await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
     await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
-
-    await render(<SearchBar/>);
+    const hooksConfig = {
+      router: {
+        query: { q: 'o' },
+      },
+    };
+    await render(<SearchBar/>, { hooksConfig });
     await page.getByPlaceholder(/search/i).fill('o');
     await page.waitForResponse(apiUrl);
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

 import { Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
@@ -8,7 +9,6 @@ import IconSvg from 'ui/shared/IconSvg';
 import NextLink from 'ui/shared/NextLink';
 
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
-
 interface Props {
   data: MarketplaceAppOverview;
   isMobile: boolean | undefined;
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) => {
-
+  const router = useRouter();
   const logo = (
     <Image
       borderRadius="base"
@@ -96,9 +96,22 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
 
   if (data.external) {
     return (
-      <SearchBarSuggestItemLink onClick={ onClick } href={ data.url } target="_blank">
+      <NextLink
+        href={{
+          pathname: '/apps',
+          query: {
+            selectedAppId: data.id,
+          },
+        }}
+        passHref
+        shallow={ router.pathname === '/apps' }
+        legacyBehavior
+      >
+        <SearchBarSuggestItemLink onClick={ onClick }>
           { content }
         </SearchBarSuggestItemLink>
+      </NextLink>
+
     );
   }