Track GA for safe actions

src/components/SafeListSidebar/index.tsx

@@ -1,7 +1,7 @@
+import React, { useEffect, useMemo, useState } from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import SearchIcon from '@material-ui/icons/Search'
 import SearchBar from 'material-ui-search-bar'
-import * as React from 'react'
 import { connect } from 'react-redux'
 
 import SafeList from './SafeList'
@@ -16,12 +16,11 @@ import Link from 'src/components/layout/Link'
 import Row from 'src/components/layout/Row'
 import { WELCOME_ADDRESS } from 'src/routes/routes'
 import setDefaultSafe from 'src/logic/safe/store/actions/setDefaultSafe'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 import { defaultSafeSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { AppReduxState } from 'src/store'
 
-const { useEffect, useMemo, useState } = React
-
 export const SafeListSidebarContext = React.createContext({
   isOpen: false,
   toggleSidebar: () => {},
@@ -39,12 +38,7 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault
   const [isOpen, setIsOpen] = useState(false)
   const [filter, setFilter] = useState('')
   const classes = useSidebarStyles()
-
-  useEffect(() => {
-    setTimeout(() => {
-      setFilter('')
-    }, 300)
-  }, [isOpen])
+  const { trackEvent } = useAnalytics()
 
   const searchClasses = {
     input: classes.searchInput,
@@ -54,6 +48,9 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault
   }
 
   const toggleSidebar = () => {
+    if (!isOpen) {
+      trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Safe List Sidebar' })
+    }
     setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
@@ -73,6 +70,12 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault
 
   const filteredSafes = useMemo(() => filterBy(filter, safes), [safes, filter])
 
+  useEffect(() => {
+    setTimeout(() => {
+      setFilter('')
+    }, 300)
+  }, [isOpen])
+
   return (
     <SafeListSidebarContext.Provider value={{ isOpen, toggleSidebar }}>
       <Drawer

src/routes/safe/components/AddressBook/index.tsx

@@ -41,6 +41,7 @@ import RemoveOwnerIcon from 'src/routes/safe/components/Settings/assets/icons/bi
 import RemoveOwnerIconDisabled from 'src/routes/safe/components/Settings/assets/icons/disabled-bin.svg'
 import { addressBookQueryParamsSelector, safesListSelector } from 'src/logic/safe/store/selectors'
 import { checksumAddress } from 'src/utils/checksumAddress'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 const AddressBookTable = ({ classes }) => {
   const columns = generateColumns()
@@ -53,6 +54,11 @@ const AddressBookTable = ({ classes }) => {
   const [editCreateEntryModalOpen, setEditCreateEntryModalOpen] = useState(false)
   const [deleteEntryModalOpen, setDeleteEntryModalOpen] = useState(false)
   const [sendFundsModalOpen, setSendFundsModalOpen] = useState(false)
+  const { trackEvent } = useAnalytics()
+
+  useEffect(() => {
+    trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'AddressBook' })
+  }, [trackEvent])
 
   useEffect(() => {
     if (entryAddressToEditOrCreateNew) {

src/routes/safe/components/Apps/index.tsx

@@ -19,6 +19,7 @@ import {
 import { isSameURL } from 'src/utils/url'
 import { useIframeMessageHandler } from './hooks/useIframeMessageHandler'
 import ConfirmTransactionModal from './components/ConfirmTransactionModal'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 const centerCSS = css`
   display: flex;
@@ -64,6 +65,7 @@ const Apps = (): React.ReactElement => {
   )
   const iframeRef = useRef<HTMLIFrameElement>()
 
+  const { trackEvent } = useAnalytics()
   const granted = useSelector(grantedSelector)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
@@ -111,6 +113,7 @@ const Apps = (): React.ReactElement => {
     [selectedAppId],
   )
 
+  // Auto Select app first App
   useEffect(() => {
     const selectFirstEnabledApp = () => {
       const firstEnabledApp = appList.find((a) => !a.disabled)
@@ -124,7 +127,14 @@ const Apps = (): React.ReactElement => {
     if (initialSelect || currentAppWasDisabled) {
       selectFirstEnabledApp()
     }
-  }, [appList, selectedApp, selectedAppId])
+  }, [appList, selectedApp, selectedAppId, trackEvent])
+
+  // track GA
+  useEffect(() => {
+    if (selectedApp) {
+      trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: selectedApp.name })
+    }
+  }, [selectedApp, trackEvent])
 
   const handleIframeLoad = useCallback(() => {
     const iframe = iframeRef.current

src/routes/safe/components/Balances/Coins/index.tsx

@@ -1,9 +1,9 @@
+import React, { useEffect } from 'react'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import { makeStyles } from '@material-ui/core/styles'
 import { List } from 'immutable'
-import React from 'react'
 import { useSelector } from 'react-redux'
 
 import { styles } from './styles'
@@ -29,6 +29,7 @@ import {
 } from 'src/routes/safe/components/Balances/dataFetcher'
 import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
 import { Skeleton } from '@material-ui/lab'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 const useStyles = makeStyles(styles as any)
 
@@ -61,6 +62,11 @@ const Coins = (props: Props): React.ReactElement => {
   const currencyValues = useSelector(safeFiatBalancesListSelector)
   const granted = useSelector(grantedSelector)
   const [filteredData, setFilteredData] = React.useState<List<BalanceData>>(List())
+  const { trackEvent } = useAnalytics()
+
+  useEffect(() => {
+    trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Coins' })
+  }, [trackEvent])
 
   React.useMemo(() => {
     setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate))

src/routes/safe/components/Balances/Collectibles/index.tsx

@@ -1,6 +1,6 @@
+import React, { useEffect } from 'react'
 import Card from '@material-ui/core/Card'
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
 import { useSelector } from 'react-redux'
 
 import Item from './components/Item'
@@ -10,6 +10,7 @@ import { activeNftAssetsListSelector, nftTokensSelector } from 'src/logic/collec
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 const useStyles = makeStyles({
   cardInner: {
@@ -74,13 +75,18 @@ const useStyles = makeStyles({
   },
 } as any)
 
-const Collectibles = () => {
+const Collectibles = (): React.ReactElement => {
   const classes = useStyles()
   const [selectedToken, setSelectedToken] = React.useState({})
   const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false)
   const { address, ethBalance, name } = useSelector(safeSelector)
   const nftTokens = useSelector(nftTokensSelector)
   const activeAssetsList = useSelector(activeNftAssetsListSelector)
+  const { trackEvent } = useAnalytics()
+
+  useEffect(() => {
+    trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Collectibles' })
+  }, [trackEvent])
 
   const handleItemSend = (nftToken) => {
     setSelectedToken(nftToken)

src/routes/safe/components/Settings/Advanced/index.tsx

@@ -1,6 +1,6 @@
 import { Loader, Text, theme, Title } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
@@ -10,6 +10,7 @@ import ModulesTable from './ModulesTable'
 
 import Block from 'src/components/layout/Block'
 import { safeModulesSelector, safeNonceSelector } from 'src/logic/safe/store/selectors'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 const useStyles = makeStyles(styles)
 
@@ -39,10 +40,14 @@ const LoadingModules = (): React.ReactElement => {
 
 const Advanced = (): React.ReactElement => {
   const classes = useStyles()
-
   const nonce = useSelector(safeNonceSelector)
   const modules = useSelector(safeModulesSelector)
   const moduleData = getModuleData(modules) ?? null
+  const { trackEvent } = useAnalytics()
+
+  useEffect(() => {
+    trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Advanced' })
+  }, [trackEvent])
 
   return (
     <>

src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx

@@ -33,7 +33,7 @@ export const SAVE_OWNER_CHANGES_BTN_TEST_ID = 'save-owner-changes-btn'
 const useStyles = makeStyles(styles)
 
 type OwnProps = {
-  isOpen: true
+  isOpen: boolean
   onClose: () => void
   ownerAddress: string
   selectedOwnerName: string