add back button

ui/marketplace/ContractListModal.tsx

 import {
-  Box, Modal, ModalBody,
+  Box, Modal, Text, ModalBody,
   ModalCloseButton, ModalContent, ModalHeader, ModalOverlay,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -10,11 +10,13 @@ import { ContractListTypes } from 'types/client/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ContractSecurityReport from './ContractSecurityReport';
 
 type Props = {
   onClose: () => void;
+  onBack?: () => void;
   type: ContractListTypes;
   contracts?: MarketplaceAppSecurityReport['contractsData'];
 }
@@ -25,7 +27,7 @@ const titles = {
   [ContractListTypes.VERIFIED]: 'Verified contracts',
 };
 
-const ContractListModal = ({ onClose, type, contracts }: Props) => {
+const ContractListModal = ({ onClose, onBack, type, contracts }: Props) => {
   const isMobile = useIsMobile();
 
   const displayedContracts = React.useMemo(() => {
@@ -60,7 +62,23 @@ const ContractListModal = ({ onClose, type, contracts }: Props) => {
     >
       <ModalOverlay/>
       <ModalContent>
-        <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>{ titles[type] }</ModalHeader>
+        <ModalHeader display="flex" alignItems="center" mb={ 4 }>
+          { onBack && (
+            <IconSvg
+              name="arrows/east"
+              boxSize={ 6 }
+              transform="rotate(180deg)"
+              verticalAlign="middle"
+              color="gray.400"
+              mr={ 3 }
+              cursor="pointer"
+              onClick={ onBack }
+            />
+          ) }
+          <Text fontWeight="500" textStyle="h3">
+            { titles[type] }
+          </Text>
+        </ModalHeader>
         <ModalCloseButton/>
         <ModalBody
           maxH={ isMobile ? 'auto' : '352px' }

ui/marketplace/MarketplaceAppModal.tsx

@@ -23,7 +23,7 @@ type Props = {
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean, source: 'App modal') => void;
   data: MarketplaceAppWithSecurityReport;
-  showContractList: (id: string, type: ContractListTypes) => void;
+  showContractList: (id: string, type: ContractListTypes, hasPreviousStep: boolean) => void;
 }
 
 const MarketplaceAppModal = ({
@@ -78,7 +78,7 @@ const MarketplaceAppModal = ({
 
   const showContractList = useCallback((type: ContractListTypes) => {
     onClose();
-    showContractListProp(id, type);
+    showContractListProp(id, type, true);
   }, [ onClose, showContractListProp, id ]);
 
   const showAllContracts = React.useCallback(() => {

ui/marketplace/useMarketplace.tsx

@@ -41,6 +41,7 @@ export default function useMarketplace() {
   const [ isAppInfoModalOpen, setIsAppInfoModalOpen ] = React.useState<boolean>(false);
   const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
   const [ contractListModalType, setContractListModalType ] = React.useState<ContractListTypes | null>(null);
+  const [ hasPreviousStep, setHasPreviousStep ] = React.useState<boolean>(false);
 
   const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean, source: 'Discovery view' | 'Security view' | 'App modal') => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id, Source: source });
@@ -68,9 +69,12 @@ export default function useMarketplace() {
     setIsDisclaimerModalOpen(true);
   }, []);
 
-  const showContractList = React.useCallback((id: string, type: ContractListTypes) => {
+  const showContractList = React.useCallback((id: string, type: ContractListTypes, hasPreviousStep?: boolean) => {
     setSelectedAppId(id);
     setContractListModalType(type);
+    if (hasPreviousStep) {
+      setHasPreviousStep(true);
+    }
   }, []);
 
   const debouncedFilterQuery = useDebounce(filterQuery, 500);
@@ -79,6 +83,7 @@ export default function useMarketplace() {
     setIsAppInfoModalOpen(false);
     setIsDisclaimerModalOpen(false);
     setContractListModalType(null);
+    setHasPreviousStep(false);
   }, []);
 
   const handleCategoryChange = React.useCallback((newCategory: string) => {
@@ -156,6 +161,7 @@ export default function useMarketplace() {
     contractListModalType,
     selectedDisplayType,
     onDisplayTypeChange: handleDisplayTypeChange,
+    hasPreviousStep,
   }), [
     selectedCategoryId,
     categories,
@@ -179,5 +185,6 @@ export default function useMarketplace() {
     contractListModalType,
     selectedDisplayType,
     handleDisplayTypeChange,
+    hasPreviousStep,
   ]);
 }

ui/pages/Marketplace.tsx

@@ -69,6 +69,7 @@ const Marketplace = () => {
     contractListModalType,
     selectedDisplayType,
     onDisplayTypeChange,
+    hasPreviousStep,
   } = useMarketplace();
 
   const isMobile = useIsMobile();
@@ -104,6 +105,8 @@ const Marketplace = () => {
     return index === -1 ? 0 : index;
   }, [ categoryTabs, selectedCategoryId ]);
 
+  const selectedApp = displayedApps.find(app => app.id === selectedAppId);
+
   const handleCategoryChange = React.useCallback((index: number) => {
     onCategoryChange(categoryTabs[index].id);
   }, [ categoryTabs, onCategoryChange ]);
@@ -116,14 +119,19 @@ const Marketplace = () => {
     }
   }, [ showDisclaimer ]);
 
+  const handleGoBackInContractListModal = React.useCallback(() => {
+    clearSelectedAppId();
+    if (selectedApp) {
+      showAppInfo(selectedApp.id);
+    }
+  }, [ clearSelectedAppId, showAppInfo, selectedApp ]);
+
   throwOnResourceLoadError(isError && error ? { isError, error } : { isError: false, error: null });
 
   if (!feature.isEnabled) {
     return null;
   }
 
-  const selectedApp = displayedApps.find(app => app.id === selectedAppId);
-
   return (
     <>
       <PageTitle
@@ -261,6 +269,7 @@ const Marketplace = () => {
           type={ contractListModalType }
           contracts={ selectedApp?.securityReport?.contractsData }
           onClose={ clearSelectedAppId }
+          onBack={ hasPreviousStep ? handleGoBackInContractListModal : undefined }
         />
       ) }
     </>