feat: New safe app card design

src/routes/CreateSafePage/components/SafeCreationProcess.tsx

@@ -45,6 +45,7 @@ import Track from 'src/components/Track'
 import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
 import { useQuery } from 'src/logic/hooks/useQuery'
 import { ADDRESSED_ROUTE } from 'src/routes/routes'
+import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
 
 export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
   display: inline-flex;
@@ -181,6 +182,8 @@ const pollSafeInfo = async (safeAddress: string): Promise<SafeInfo> => {
   })
 }
 
+const APP_URL_QUERY_PARAM = 'appUrl'
+
 function SafeCreationProcess(): ReactElement {
   const [safeCreationTxHash, setSafeCreationTxHash] = useState<string | undefined>()
   const [creationTxPromise, setCreationTxPromise] = useState<Promise<TransactionReceipt>>()
@@ -293,6 +296,10 @@ function SafeCreationProcess(): ReactElement {
         })
       }
 
+      if (redirect.includes(APP_URL_QUERY_PARAM)) {
+        trackEvent({ ...SAFE_APPS_EVENTS.SHARED_APP_OPEN_AFTER_SAFE_CREATION })
+      }
+
       return
     }
 

src/routes/SafeAppLandingPage/SafeAppLandingPage.tsx

@@ -11,6 +11,8 @@ import { getAppInfoFromUrl } from 'src/routes/safe/components/Apps/utils'
 import { setChainId } from 'src/logic/config/utils'
 import { useQuery } from 'src/logic/hooks/useQuery'
 import useAsync from 'src/logic/hooks/useAsync'
+import { trackEvent } from 'src/utils/googleTagManager'
+import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
 import SafeAppDetails from 'src/routes/SafeAppLandingPage/components/SafeAppsDetails'
 import TryDemoSafe from 'src/routes/SafeAppLandingPage/components/TryDemoSafe'
 import UserSafe from './components/UserSafe'
@@ -56,6 +58,19 @@ const SafeAppLandingPage = (): ReactElement => {
 
   const showLoader = isLoading || !safeAppDetails
 
+  useEffect(() => {
+    if (!isLoading && safeAppDetails) {
+      trackEvent({
+        ...SAFE_APPS_EVENTS.SHARED_APP_LANDING,
+        label: safeAppDetails?.name,
+      })
+      trackEvent({
+        ...SAFE_APPS_EVENTS.SHARED_APP_CHAIN_ID,
+        label: safeAppChainId,
+      })
+    }
+  }, [isLoading, safeAppDetails, safeAppChainId])
+
   if (!safeAppUrl || !isValidChain || isSafeAppMissing) {
     return <Redirect to={WELCOME_ROUTE} />
   }

src/routes/SafeAppLandingPage/components/TryDemoSafe.tsx

@@ -1,13 +1,25 @@
-import { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
+import { MouseEvent, ReactElement } from 'react'
+import { Link, useHistory } from 'react-router-dom'
 import styled from 'styled-components'
 import { Title, Button } from '@gnosis.pm/safe-react-components'
 
 import { demoSafeRoute } from 'src/routes/routes'
 import { secondary } from 'src/theme/variables'
 import DemoSvg from 'src/assets/icons/demo.svg'
+import { trackEvent } from 'src/utils/googleTagManager'
+import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
 
 const TryDemoSafe = ({ safeAppUrl }: { safeAppUrl: string | null }): ReactElement => {
+  const history = useHistory()
+  const demoSafeUrl = `${demoSafeRoute}?appUrl=${encodeURI(safeAppUrl || '')}`
+
+  const handleDemoSafeClick = (event: MouseEvent) => {
+    event.preventDefault()
+
+    trackEvent({ ...SAFE_APPS_EVENTS.SHARED_APP_OPEN_DEMO, label: safeAppUrl })
+    history.push(demoSafeUrl)
+  }
+
   return (
     <SafeDemoContainer>
       <Title size="xs">Want to try the app before using it?</Title>
@@ -16,9 +28,10 @@ const TryDemoSafe = ({ safeAppUrl }: { safeAppUrl: string | null }): ReactElemen
 
       {safeAppUrl && (
         <StyledDemoButton
+          onClick={handleDemoSafeClick}
+          to={demoSafeUrl}
           color="primary"
           component={Link}
-          to={`${demoSafeRoute}?appUrl=${encodeURI(safeAppUrl)}`}
           size="lg"
           variant="outlined"
         >

src/routes/safe/components/Apps/components/AppsList.test.tsx

@@ -237,17 +237,21 @@ describe('Safe Apps -> AppsList -> Pinning apps', () => {
     })
 
     const allAppsContainer = screen.getByTestId(ALL_APPS_LIST_TEST_ID)
-    const compoundAppPinBtn = within(allAppsContainer).getByLabelText('Pin Compound')
+    const compoundAppPinBtn = within(allAppsContainer).getByLabelText('Pin Compound Safe App')
     act(() => {
       fireEvent.click(compoundAppPinBtn)
     })
 
     await waitFor(() => {
       expect(within(screen.getByTestId(PINNED_APPS_LIST_TEST_ID)).getByText('Compound')).toBeInTheDocument()
-      expect(within(screen.getByTestId(PINNED_APPS_LIST_TEST_ID)).getByLabelText('Unpin Compound')).toBeInTheDocument()
+      expect(
+        within(screen.getByTestId(PINNED_APPS_LIST_TEST_ID)).getByLabelText('Unpin Compound Safe App'),
+      ).toBeInTheDocument()
     })
 
-    const compoundAppUnpinBtn = within(screen.getByTestId(PINNED_APPS_LIST_TEST_ID)).getByLabelText('Unpin Compound')
+    const compoundAppUnpinBtn = within(screen.getByTestId(PINNED_APPS_LIST_TEST_ID)).getByLabelText(
+      'Unpin Compound Safe App',
+    )
     act(() => {
       fireEvent.click(compoundAppUnpinBtn)
     })
@@ -287,7 +291,9 @@ describe('Safe Apps -> AppsList -> Share Safe Apps', () => {
 
     await waitFor(() => {
       const allAppsContainer = screen.getByTestId(ALL_APPS_LIST_TEST_ID)
-      const compoundAppShareBtn = within(allAppsContainer).getByLabelText('Share Compound Safe App')
+      const compoundAppShareBtn = within(allAppsContainer).getByLabelText(
+        'copy Compound Safe App share link to clipboard',
+      )
 
       expect(compoundAppShareBtn).toBeInTheDocument()
     })
@@ -302,7 +308,9 @@ describe('Safe Apps -> AppsList -> Share Safe Apps', () => {
 
     await waitFor(() => {
       const allAppsContainer = screen.getByTestId(ALL_APPS_LIST_TEST_ID)
-      const compoundAppShareBtn = within(allAppsContainer).getByLabelText('Share Compound Safe App')
+      const compoundAppShareBtn = within(allAppsContainer).getByLabelText(
+        'copy Compound Safe App share link to clipboard',
+      )
 
       // snackbar is not present
       expect(screen.queryByText('Safe App URL copied to clipboard!')).not.toBeInTheDocument()