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 ? {

package.json

@@ -60,6 +60,7 @@
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.1.1",
     "d3": "^7.6.1",
+    "dappscout-iframe": "^0.1.0",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
     "framer-motion": "^6.5.1",

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';

pages/apps/index.tsx

@@ -12,7 +12,7 @@ const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/apps">
       <>
-        <PageTitle title="Marketplace"/>
+        <PageTitle title="DAppscout"/>
         <Marketplace/>
       </>
     </PageNextJs>

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/marketplace/useMarketplaceWallet.tsx

@@ -0,0 +1,64 @@
+import type { TypedData } from 'abitype';
+import { useCallback } from 'react';
+import type { Account, SignTypedDataParameters } from 'viem';
+import { useAccount, useSendTransaction, useSwitchNetwork, useNetwork, useSignMessage, useSignTypedData } from 'wagmi';
+
+import config from 'configs/app';
+
+type SendTransactionArgs = {
+  chainId?: number;
+  mode?: 'prepared';
+  to: string;
+};
+
+export type SignTypedDataArgs<
+  TTypedData extends
+  | TypedData
+  | {
+    [key: string]: unknown;
+  } = TypedData,
+  TPrimaryType extends string = string,
+> = SignTypedDataParameters<TTypedData, TPrimaryType, Account>;
+
+export default function useMarketplaceWallet() {
+  const { address } = useAccount();
+  const { chain } = useNetwork();
+  const { sendTransactionAsync } = useSendTransaction();
+  const { signMessageAsync } = useSignMessage();
+  const { signTypedDataAsync } = useSignTypedData();
+  const { switchNetworkAsync } = useSwitchNetwork({ chainId: Number(config.chain.id) });
+
+  const switchNetwork = useCallback(async() => {
+    if (Number(config.chain.id) !== chain?.id) {
+      await switchNetworkAsync?.();
+    }
+  }, [ chain, switchNetworkAsync ]);
+
+  const sendTransaction = useCallback(async(transaction: SendTransactionArgs) => {
+    await switchNetwork();
+    const tx = await sendTransactionAsync(transaction);
+    return tx.hash;
+  }, [ sendTransactionAsync, switchNetwork ]);
+
+  const signMessage = useCallback(async(message: string) => {
+    await switchNetwork();
+    const signature = await signMessageAsync({ message });
+    return signature;
+  }, [ signMessageAsync, switchNetwork ]);
+
+  const signTypedData = useCallback(async(typedData: SignTypedDataArgs) => {
+    await switchNetwork();
+    if (typedData.domain) {
+      typedData.domain.chainId = Number(typedData.domain.chainId);
+    }
+    const signature = await signTypedDataAsync(typedData);
+    return signature;
+  }, [ signTypedDataAsync, switchNetwork ]);
+
+  return {
+    address,
+    sendTransaction,
+    signMessage,
+    signTypedData,
+  };
+}