Marketplace improvements

lib/mixpanel/utils.ts

@@ -61,6 +61,7 @@ Type extends EventTypes.VERIFY_TOKEN ? {
   'Action': 'Form opened' | 'Submit';
 } :
 Type extends EventTypes.WALLET_CONNECT ? {
+  'Source': 'Header' | 'Smart contracts';
   'Status': 'Started' | 'Connected';
 } :
 Type extends EventTypes.CONTRACT_INTERACTION ? {

pages/_app.tsx

@@ -17,6 +17,7 @@ import theme from 'theme';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import Layout from 'ui/shared/layout/Layout';
+import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 import 'lib/setLocale';
 
@@ -52,17 +53,19 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         { ...ERROR_SCREEN_STYLES }
         onError={ handleError }
       >
-        <AppContextProvider pageProps={ pageProps }>
-          <QueryClientProvider client={ queryClient }>
-            <ScrollDirectionProvider>
-              <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
-                { getLayout(<Component { ...pageProps }/>) }
-              </SocketProvider>
-            </ScrollDirectionProvider>
-            <ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
-            <GoogleAnalytics/>
-          </QueryClientProvider>
-        </AppContextProvider>
+        <Web3ModalProvider>
+          <AppContextProvider pageProps={ pageProps }>
+            <QueryClientProvider client={ queryClient }>
+              <ScrollDirectionProvider>
+                <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
+                  { getLayout(<Component { ...pageProps }/>) }
+                </SocketProvider>
+              </ScrollDirectionProvider>
+              <ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
+              <GoogleAnalytics/>
+            </QueryClientProvider>
+          </AppContextProvider>
+        </Web3ModalProvider>
       </AppErrorBoundary>
     </ChakraProvider>
   );

pages/apps/[id].tsx

@@ -6,6 +6,8 @@ import type { NextPageWithLayout } from 'nextjs/types';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
+import LayoutApp from 'ui/shared/layout/LayoutApp';
+
 const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
@@ -16,6 +18,14 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   );
 };
 
+Page.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <LayoutApp>
+      { page }
+    </LayoutApp>
+  );
+};
+
 export default Page;
 
 export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';

ui/address/contract/ContractConnectWallet.tsx

@@ -17,11 +17,11 @@ const ContractConnectWallet = () => {
     setIsModalOpening(true);
     await open();
     setIsModalOpening(false);
-    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Started' });
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Smart contracts', Status: 'Started' });
   }, [ open ]);
 
   const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
-    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Connected' });
+    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Smart contracts', Status: 'Connected' });
   }, []);
 
   const handleDisconnect = React.useCallback(() => {

ui/marketplace/MarketplaceAppCard.tsx

@@ -15,6 +15,7 @@ interface Props extends MarketplaceAppPreview {
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
   isLoading: boolean;
+  showDisclaimer: (id: string) => void;
 }
 
 const MarketplaceAppCard = ({
@@ -30,9 +31,18 @@ const MarketplaceAppCard = ({
   isFavorite,
   onFavoriteClick,
   isLoading,
+  showDisclaimer,
 }: Props) => {
   const categoriesLabel = categories.join(', ');
 
+  const handleClick = useCallback((event: MouseEvent) => {
+    const isShown = window.localStorage.getItem('marketplace-disclaimer-shown');
+    if (!isShown) {
+      event.preventDefault();
+      showDisclaimer(id);
+    }
+  }, [ showDisclaimer, id ]);
+
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
     onInfoClick(id);
@@ -100,6 +110,7 @@ const MarketplaceAppCard = ({
             url={ url }
             external={ external }
             title={ title }
+            onClick={ handleClick }
           />
         </Skeleton>
 

ui/marketplace/MarketplaceAppCardLink.tsx

@@ -1,22 +1,24 @@
 import { LinkOverlay } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
+import type { MouseEvent } from 'react';
 
 type Props = {
   id: string;
   url: string;
   external?: boolean;
   title: string;
+  onClick?: (event: MouseEvent) => void;
 }
 
-const MarketplaceAppCardLink = ({ url, external, id, title }: Props) => {
+const MarketplaceAppCardLink = ({ url, external, id, title, onClick }: Props) => {
   return external ? (
     <LinkOverlay href={ url } isExternal={ true }>
       { title }
     </LinkOverlay>
   ) : (
     <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
-      <LinkOverlay>
+      <LinkOverlay onClick={ onClick }>
         { title }
       </LinkOverlay>
     </NextLink>

ui/marketplace/MarketplaceDisclaimerModal.tsx

@@ -0,0 +1,81 @@
+import { Heading, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, Button, useColorModeValue } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  appId: string;
+}
+
+const MarketplaceDisclaimerModal = ({ isOpen, onClose, appId }: Props) => {
+
+  const isMobile = useIsMobile();
+
+  const handleContinueClick = React.useCallback(() => {
+    window.localStorage.setItem('marketplace-disclaimer-shown', 'true');
+  }, [ ]);
+
+  return (
+    <Modal
+      isOpen={ isOpen }
+      onClose={ onClose }
+      size={ isMobile ? 'full' : 'md' }
+      isCentered
+    >
+      <ModalOverlay/>
+
+      <ModalContent>
+        <ModalHeader>
+          <Heading
+            as="h2"
+            fontSize="2xl"
+            fontWeight="medium"
+            lineHeight={ 1 }
+            color={ useColorModeValue('blackAlpha.800', 'whiteAlpha.800') }
+          >
+            Disclaimer
+          </Heading>
+        </ModalHeader>
+
+        <ModalBody>
+          <Text color={ useColorModeValue('gray.800', 'whiteAlpha.800') }>
+            You are now accessing a third-party app. Blockscout does not own, control, maintain, or audit 3rd party apps,{ ' ' }
+            and is not liable for any losses associated with these interactions. Please do so at your own risk.
+            <br/><br/>
+            By clicking continue, you agree that you understand the risks and have read the Disclaimer.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <NextLink href={{ pathname: '/apps/[id]', query: { id: appId } }} passHref legacyBehavior>
+            <Button
+              variant="solid"
+              colorScheme="blue"
+              mr={ 6 }
+              py="10px"
+              onClick={ handleContinueClick }
+            >
+              Continue to app
+            </Button>
+          </NextLink>
+          <Button
+            variant="outline"
+            colorScheme="blue"
+            onClick={ onClose }
+          >
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default MarketplaceDisclaimerModal;

ui/marketplace/MarketplaceList.tsx

@@ -14,9 +14,10 @@ type Props = {
   favoriteApps: Array<string>;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
   isLoading: boolean;
+  showDisclaimer: (id: string) => void;
 }
 
-const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading }: Props) => {
+const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading, showDisclaimer }: Props) => {
   return apps.length > 0 ? (
     <Grid
       templateColumns={{
@@ -41,6 +42,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo
           isFavorite={ favoriteApps.includes(app.id) }
           onFavoriteClick={ onFavoriteClick }
           isLoading={ isLoading }
+          showDisclaimer={ showDisclaimer }
         />
       )) }
     </Grid>

ui/marketplace/useMarketplace.tsx

@@ -29,6 +29,8 @@ export default function useMarketplace() {
   const [ selectedCategoryId, setSelectedCategoryId ] = React.useState<string>(MarketplaceCategory.ALL);
   const [ filterQuery, setFilterQuery ] = React.useState(defaultFilterQuery);
   const [ favoriteApps, setFavoriteApps ] = React.useState<Array<string>>([]);
+  const [ isAppInfoModalOpen, setIsAppInfoModalOpen ] = React.useState<boolean>(false);
+  const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
 
   const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean) => {
     const favoriteApps = getFavoriteApps();
@@ -46,10 +48,20 @@ export default function useMarketplace() {
 
   const showAppInfo = React.useCallback((id: string) => {
     setSelectedAppId(id);
+    setIsAppInfoModalOpen(true);
+  }, []);
+
+  const showDisclaimer = React.useCallback((id: string) => {
+    setSelectedAppId(id);
+    setIsDisclaimerModalOpen(true);
   }, []);
 
   const debouncedFilterQuery = useDebounce(filterQuery, 500);
-  const clearSelectedAppId = React.useCallback(() => setSelectedAppId(null), []);
+  const clearSelectedAppId = React.useCallback(() => {
+    setSelectedAppId(null);
+    setIsAppInfoModalOpen(false);
+    setIsDisclaimerModalOpen(false);
+  }, []);
 
   const handleCategoryChange = React.useCallback((newCategory: string) => {
     setSelectedCategoryId(newCategory);
@@ -104,6 +116,9 @@ export default function useMarketplace() {
     clearSelectedAppId,
     favoriteApps,
     onFavoriteClick: handleFavoriteClick,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   }), [
     selectedCategoryId,
     categories,
@@ -118,5 +133,8 @@ export default function useMarketplace() {
     isPlaceholderData,
     showAppInfo,
     debouncedFilterQuery,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   ]);
 }

ui/pages/Home.tsx

@@ -10,6 +10,7 @@ import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 const Home = () => {
   return (
@@ -22,7 +23,7 @@ const Home = () => {
         minW={{ base: 'unset', lg: '900px' }}
         data-label="hero plate"
       >
-        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between">
+        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between" alignItems="center">
           <Heading
             as="h1"
             size={{ base: 'md', lg: 'xl' }}
@@ -32,8 +33,9 @@ const Home = () => {
           >
             Welcome to { config.chain.name } explorer
           </Heading>
-          <Box display={{ base: 'none', lg: 'block' }}>
-            { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+          <Box display={{ base: 'none', lg: 'flex' }}>
+            { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
+            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
           </Box>
         </Flex>
         <LightMode>

ui/pages/Marketplace.tsx

@@ -5,6 +5,7 @@ import config from 'configs/app';
 import PlusIcon from 'icons/plus.svg';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
+import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import FilterInput from 'ui/shared/filters/FilterInput';
 
@@ -27,6 +28,9 @@ const Marketplace = () => {
     clearSelectedAppId,
     favoriteApps,
     onFavoriteClick,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   } = useMarketplace();
 
   if (isError) {
@@ -68,9 +72,10 @@ const Marketplace = () => {
         favoriteApps={ favoriteApps }
         onFavoriteClick={ onFavoriteClick }
         isLoading={ isPlaceholderData }
+        showDisclaimer={ showDisclaimer }
       />
 
-      { selectedApp && (
+      { (selectedApp && isAppInfoModalOpen) && (
         <MarketplaceAppModal
           onClose={ clearSelectedAppId }
           isFavorite={ favoriteApps.includes(selectedApp.id) }
@@ -79,6 +84,14 @@ const Marketplace = () => {
         />
       ) }
 
+      { (selectedApp && isDisclaimerModalOpen) && (
+        <MarketplaceDisclaimerModal
+          isOpen={ isDisclaimerModalOpen }
+          onClose={ clearSelectedAppId }
+          appId={ selectedApp.id }
+        />
+      ) }
+
       <Skeleton
         isLoaded={ !isPlaceholderData }
         marginTop={{ base: 8, sm: 16 }}