From 27b22fffef75b61bfa76f102091cf4953e488d77 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 28 Aug 2020 13:42:08 -0300 Subject: [PATCH 1/4] Track GA for safe actions --- .../safe/components/AddressBook/index.tsx | 6 + src/routes/safe/components/Apps/index.tsx | 12 +- .../safe/components/Balances/Coins/index.tsx | 8 +- .../Balances/Collectibles/index.tsx | 8 +- .../components/Settings/Advanced/index.tsx | 9 +- .../ManageOwners/EditOwnerModal/index.tsx | 2 +- .../Settings/ManageOwners/index.tsx | 313 +++++++++--------- .../components/Settings/ManageOwners/style.ts | 3 +- .../components/Settings/SafeDetails/index.tsx | 8 +- .../Settings/ThresholdSettings/index.tsx | 9 +- .../Transactions/TxsTable/index.tsx | 8 +- src/utils/googleAnalytics.ts | 16 +- 12 files changed, 236 insertions(+), 166 deletions(-) diff --git a/src/routes/safe/components/AddressBook/index.tsx b/src/routes/safe/components/AddressBook/index.tsx index a467479762..7fae89254f 100644 --- a/src/routes/safe/components/AddressBook/index.tsx +++ b/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 { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'AddressBook' }) + }, [trackPageEvent]) useEffect(() => { if (entryAddressToEditOrCreateNew) { diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx index 2cd3031543..6a695d0089 100644 --- a/src/routes/safe/components/Apps/index.tsx +++ b/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() + const { trackPageEvent } = 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, trackPageEvent]) + + // track GA + useEffect(() => { + if (selectedApp) { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Apps', label: selectedApp.name }) + } + }, [selectedApp, trackPageEvent]) const handleIframeLoad = useCallback(() => { const iframe = iframeRef.current diff --git a/src/routes/safe/components/Balances/Coins/index.tsx b/src/routes/safe/components/Balances/Coins/index.tsx index ac2feaa48e..5c603000d4 100644 --- a/src/routes/safe/components/Balances/Coins/index.tsx +++ b/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()) + const { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Coins' }) + }, [trackPageEvent]) React.useMemo(() => { setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate)) diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx index f8153d6d94..7571871b85 100644 --- a/src/routes/safe/components/Balances/Collectibles/index.tsx +++ b/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: { @@ -81,6 +82,11 @@ const Collectibles = () => { const { address, ethBalance, name } = useSelector(safeSelector) const nftTokens = useSelector(nftTokensSelector) const activeAssetsList = useSelector(activeNftAssetsListSelector) + const { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Collectibles' }) + }, [trackPageEvent]) const handleItemSend = (nftToken) => { setSelectedToken(nftToken) diff --git a/src/routes/safe/components/Settings/Advanced/index.tsx b/src/routes/safe/components/Settings/Advanced/index.tsx index 9628ec7ed7..7822a6f9d7 100644 --- a/src/routes/safe/components/Settings/Advanced/index.tsx +++ b/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 { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Advanced' }) + }, [trackPageEvent]) return ( <> diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx index 984b061221..9bf77dab0c 100644 --- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx +++ b/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 diff --git a/src/routes/safe/components/Settings/ManageOwners/index.tsx b/src/routes/safe/components/Settings/ManageOwners/index.tsx index 437d4632f4..7ba36f444c 100644 --- a/src/routes/safe/components/Settings/ManageOwners/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/index.tsx @@ -1,9 +1,10 @@ +import React, { useState, 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 { withStyles } from '@material-ui/core/styles' +import { makeStyles } from '@material-ui/core/styles' import cn from 'classnames' -import React from 'react' +import { List } from 'immutable' import RemoveOwnerIcon from '../assets/icons/bin.svg' @@ -28,6 +29,9 @@ import Img from 'src/components/layout/Img' import Paragraph from 'src/components/layout/Paragraph/index' import Row from 'src/components/layout/Row' import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils' +import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics' +import { AddressBookEntryProps } from 'src/logic/addressBook/model/addressBook' +import { SafeOwner } from 'src/logic/safe/store/models/safe' export const RENAME_OWNER_BTN_TEST_ID = 'rename-owner-btn' export const REMOVE_OWNER_BTN_TEST_ID = 'remove-owner-btn' @@ -35,166 +39,167 @@ export const ADD_OWNER_BTN_TEST_ID = 'add-owner-btn' export const REPLACE_OWNER_BTN_TEST_ID = 'replace-owner-btn' export const OWNERS_ROW_TEST_ID = 'owners-row' -class ManageOwners extends React.Component { - constructor(props) { - super(props) +const useStyles = makeStyles(styles) - this.state = { - selectedOwnerAddress: undefined, - selectedOwnerName: undefined, - showAddOwner: false, - showRemoveOwner: false, - showReplaceOwner: false, - showEditOwner: false, - } - } +type Props = { + addressBook: unknown + granted: boolean + owners: List +} + +const ManageOwners = ({ addressBook, granted, owners }: Props): React.ReactElement => { + const { trackPageEvent } = useAnalytics() + const classes = useStyles() - onShow = (action, row?: any) => () => { - this.setState({ - [`show${action}`]: true, - selectedOwnerAddress: row && row.address, - selectedOwnerName: row && row.name, - }) + const [selectedOwnerAddress, setSelectedOwnerAddress] = useState() + const [selectedOwnerName, setSelectedOwnerName] = useState() + const [modalsStatus, setModalStatus] = useState({ + showAddOwner: false, + showRemoveOwner: false, + showReplaceOwner: false, + showEditOwner: false, + }) + + const onShow = (action, row?: any) => () => { + setModalStatus((prevState) => ({ + ...prevState, + [`show${action}`]: !prevState[`show${action}`], + })) + setSelectedOwnerAddress(row && row.address) + setSelectedOwnerName(row && row.name) } - onHide = (action) => () => { - this.setState({ - [`show${action}`]: false, - selectedOwnerAddress: undefined, - selectedOwnerName: undefined, - }) + const onHide = (action) => () => { + setModalStatus((prevState) => ({ + ...prevState, + [`show${action}`]: !Boolean(prevState[`show${action}`]), + })) + setSelectedOwnerAddress(undefined) + setSelectedOwnerName(undefined) } - render() { - const { addressBook, classes, granted, owners } = this.props - const { - selectedOwnerAddress, - selectedOwnerName, - showAddOwner, - showEditOwner, - showRemoveOwner, - showReplaceOwner, - } = this.state - const columns = generateColumns() - const autoColumns = columns.filter((c) => !c.custom) - const ownersAdbk = getOwnersWithNameFromAddressBook(addressBook, owners) - const ownerData = getOwnerData(ownersAdbk) + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Owners' }) + }, [trackPageEvent]) + + const columns = generateColumns() + const autoColumns = columns.filter((c) => !c.custom) + const ownersAdbk = getOwnersWithNameFromAddressBook(addressBook as AddressBookEntryProps, owners) + const ownerData = getOwnerData(ownersAdbk) - return ( - <> - - - Manage Safe Owners - - - Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never - shared with Gnosis or any third parties. - - - - {(sortedData) => - sortedData.map((row, index) => ( - = 3 && index === sortedData.size - 1 && classes.noBorderBottom)} - data-testid={OWNERS_ROW_TEST_ID} - key={index} - tabIndex={-1} - > - {autoColumns.map((column: any) => ( - - {column.id === OWNERS_TABLE_ADDRESS_ID ? ( - - ) : ( - row[column.id] - )} - - ))} - - - Edit owner - {granted && ( - <> + return ( + <> + + + Manage Safe Owners + + + Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never shared + with Gnosis or any third parties. + + +
+ {(sortedData) => + sortedData.map((row, index) => ( + = 3 && index === sortedData.size - 1 && classes.noBorderBottom)} + data-testid={OWNERS_ROW_TEST_ID} + key={index} + > + {autoColumns.map((column: any) => ( + + {column.id === OWNERS_TABLE_ADDRESS_ID ? ( + + ) : ( + row[column.id] + )} + + ))} + + + Edit owner + {granted && ( + <> + Replace owner + {ownerData.size > 1 && ( Replace owner - {ownerData.size > 1 && ( - Remove owner - )} - - )} - - - - )) - } -
- - - {granted && ( - <> - - - - - - - - )} - - - - - - ) - } + )} + + )} + + + + )) + } + + + + {granted && ( + <> + + + + + + + + )} + + + + + + ) } -export default withStyles(styles as any)(ManageOwners) +export default ManageOwners diff --git a/src/routes/safe/components/Settings/ManageOwners/style.ts b/src/routes/safe/components/Settings/ManageOwners/style.ts index 21cb5f9ebb..957a20d016 100644 --- a/src/routes/safe/components/Settings/ManageOwners/style.ts +++ b/src/routes/safe/components/Settings/ManageOwners/style.ts @@ -1,6 +1,7 @@ import { lg, sm } from 'src/theme/variables' +import { createStyles } from '@material-ui/core' -export const styles = () => ({ +export const styles = createStyles({ formContainer: { minHeight: '420px', }, diff --git a/src/routes/safe/components/Settings/SafeDetails/index.tsx b/src/routes/safe/components/Settings/SafeDetails/index.tsx index 14a7b11dca..cf85bf4b7e 100644 --- a/src/routes/safe/components/Settings/SafeDetails/index.tsx +++ b/src/routes/safe/components/Settings/SafeDetails/index.tsx @@ -1,5 +1,5 @@ import { makeStyles } from '@material-ui/core/styles' -import React from 'react' +import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { styles } from './style' @@ -29,6 +29,7 @@ import { safeNeedsUpdateSelector, safeParamAddressFromStateSelector, } from 'src/logic/safe/store/selectors' +import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics' export const SAFE_NAME_INPUT_TEST_ID = 'safe-name-input' export const SAFE_NAME_SUBMIT_BTN_TEST_ID = 'change-safe-name-btn' @@ -44,6 +45,7 @@ const SafeDetails = (): React.ReactElement => { const safeName = useSelector(safeNameSelector) const safeNeedsUpdate = useSelector(safeNeedsUpdateSelector) const safeCurrentVersion = useSelector(safeCurrentVersionSelector) + const { trackPageEvent } = useAnalytics() const [isModalOpen, setModalOpen] = React.useState(false) const safeAddress = useSelector(safeParamAddressFromStateSelector) @@ -63,6 +65,10 @@ const SafeDetails = (): React.ReactElement => { setModalOpen(true) } + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Details' }) + }, [trackPageEvent]) + return ( <> diff --git a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx index 36ae420a9d..f9ece7d8ce 100644 --- a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx +++ b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx @@ -1,6 +1,6 @@ import { withStyles } from '@material-ui/core/styles' import { withSnackbar } from 'notistack' -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import ChangeThreshold from './ChangeThreshold' @@ -22,6 +22,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector, } from 'src/logic/safe/store/selectors' +import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics' const ThresholdSettings = ({ classes, closeSnackbar, enqueueSnackbar }) => { const [isModalOpen, setModalOpen] = useState(false) @@ -52,6 +53,12 @@ const ThresholdSettings = ({ classes, closeSnackbar, enqueueSnackbar }) => { ) } + const { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Owners' }) + }, [trackPageEvent]) + return ( <> diff --git a/src/routes/safe/components/Transactions/TxsTable/index.tsx b/src/routes/safe/components/Transactions/TxsTable/index.tsx index 57033ba43e..5963cd6ec8 100644 --- a/src/routes/safe/components/Transactions/TxsTable/index.tsx +++ b/src/routes/safe/components/Transactions/TxsTable/index.tsx @@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles' import ExpandLess from '@material-ui/icons/ExpandLess' import ExpandMore from '@material-ui/icons/ExpandMore' import cn from 'classnames' -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { useSelector } from 'react-redux' import ExpandedTxComponent from './ExpandedTx' @@ -21,6 +21,7 @@ import Block from 'src/components/layout/Block' import Row from 'src/components/layout/Row' import { safeCancellationTransactionsSelector } from 'src/logic/safe/store/selectors' import { extendedTransactionsSelector } from 'src/logic/safe/store/selectors/transactions' +import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics' export const TRANSACTION_ROW_TEST_ID = 'transaction-row' @@ -28,6 +29,11 @@ const TxsTable = ({ classes }) => { const [expandedTx, setExpandedTx] = useState(null) const cancellationTransactions = useSelector(safeCancellationTransactionsSelector) const transactions = useSelector(extendedTransactionsSelector) + const { trackPageEvent } = useAnalytics() + + useEffect(() => { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Transactions' }) + }, [trackPageEvent]) const handleTxExpand = (safeTxHash) => { setExpandedTx((prevTx) => (prevTx === safeTxHash ? null : safeTxHash)) diff --git a/src/utils/googleAnalytics.ts b/src/utils/googleAnalytics.ts index d66c860260..4ee16ec965 100644 --- a/src/utils/googleAnalytics.ts +++ b/src/utils/googleAnalytics.ts @@ -1,10 +1,12 @@ import { useCallback, useEffect, useState } from 'react' -import GoogleAnalytics from 'react-ga' +import GoogleAnalytics, { EventArgs } from 'react-ga' import { getGoogleAnalyticsTrackingID } from 'src/config' import { COOKIES_KEY } from 'src/logic/cookies/model/cookie' import { loadFromCookie } from 'src/logic/cookies/utils' +export const SAFE_NAVIGATION_EVENT = 'SafeNavigation' + let analyticsLoaded = false export const loadGoogleAnalytics = () => { if (analyticsLoaded) { @@ -50,5 +52,15 @@ export const useAnalytics = () => { [analyticsAllowed], ) - return { trackPage } + const trackPageEvent = useCallback( + (event: EventArgs) => { + if (!analyticsAllowed || !analyticsLoaded) { + return + } + GoogleAnalytics.event(event) + }, + [analyticsAllowed], + ) + + return { trackPage, trackPageEvent } } From 71202d0d84137c05018c80decfa84fd153de4eea Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 28 Aug 2020 16:42:56 -0300 Subject: [PATCH 2/4] Add tracking for safeListSidebar --- src/components/SafeListSidebar/index.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/SafeListSidebar/index.tsx b/src/components/SafeListSidebar/index.tsx index 19fe5ff58f..c45b57e438 100644 --- a/src/components/SafeListSidebar/index.tsx +++ b/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 { trackPageEvent } = useAnalytics() const searchClasses = { input: classes.searchInput, @@ -54,6 +48,9 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault } const toggleSidebar = () => { + if (!isOpen) { + trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'SafeListSidebar' }) + } 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 ( Date: Mon, 31 Aug 2020 09:52:17 -0300 Subject: [PATCH 3/4] review changes --- .../components/Balances/Collectibles/index.tsx | 2 +- src/utils/googleAnalytics.ts | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx index 7571871b85..d07937defe 100644 --- a/src/routes/safe/components/Balances/Collectibles/index.tsx +++ b/src/routes/safe/components/Balances/Collectibles/index.tsx @@ -75,7 +75,7 @@ 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) diff --git a/src/utils/googleAnalytics.ts b/src/utils/googleAnalytics.ts index 4ee16ec965..0c145e6133 100644 --- a/src/utils/googleAnalytics.ts +++ b/src/utils/googleAnalytics.ts @@ -8,7 +8,7 @@ import { loadFromCookie } from 'src/logic/cookies/utils' export const SAFE_NAVIGATION_EVENT = 'SafeNavigation' let analyticsLoaded = false -export const loadGoogleAnalytics = () => { +export const loadGoogleAnalytics = (): void => { if (analyticsLoaded) { return } @@ -24,7 +24,12 @@ export const loadGoogleAnalytics = () => { } } -export const useAnalytics = () => { +type UseAnalyticsResponse = { + trackPage: (path: string) => void + trackPageEvent: (event: EventArgs) => void +} + +export const useAnalytics = (): UseAnalyticsResponse => { const [analyticsAllowed, setAnalyticsAllowed] = useState(false) useEffect(() => { @@ -39,14 +44,10 @@ export const useAnalytics = () => { }, []) const trackPage = useCallback( - (page, options = {}) => { + (page) => { if (!analyticsAllowed || !analyticsLoaded) { return } - GoogleAnalytics.set({ - page, - ...options, - }) GoogleAnalytics.pageview(page) }, [analyticsAllowed], From e9cdf7a3a57e64b8659b69cb5921e314012e97dc Mon Sep 17 00:00:00 2001 From: nicosampler Date: Mon, 31 Aug 2020 11:02:11 -0300 Subject: [PATCH 4/4] review changes v2 --- src/components/SafeListSidebar/index.tsx | 4 ++-- src/routes/safe/components/AddressBook/index.tsx | 6 +++--- src/routes/safe/components/Apps/index.tsx | 8 ++++---- src/routes/safe/components/Balances/Coins/index.tsx | 6 +++--- .../safe/components/Balances/Collectibles/index.tsx | 6 +++--- src/routes/safe/components/Settings/Advanced/index.tsx | 6 +++--- .../safe/components/Settings/ManageOwners/index.tsx | 6 +++--- src/routes/safe/components/Settings/SafeDetails/index.tsx | 6 +++--- .../safe/components/Settings/ThresholdSettings/index.tsx | 6 +++--- .../safe/components/Transactions/TxsTable/index.tsx | 6 +++--- src/utils/googleAnalytics.ts | 8 ++++---- 11 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/components/SafeListSidebar/index.tsx b/src/components/SafeListSidebar/index.tsx index c45b57e438..8aeeb77b3f 100644 --- a/src/components/SafeListSidebar/index.tsx +++ b/src/components/SafeListSidebar/index.tsx @@ -38,7 +38,7 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault const [isOpen, setIsOpen] = useState(false) const [filter, setFilter] = useState('') const classes = useSidebarStyles() - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() const searchClasses = { input: classes.searchInput, @@ -49,7 +49,7 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault const toggleSidebar = () => { if (!isOpen) { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'SafeListSidebar' }) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Safe List Sidebar' }) } setIsOpen((prevIsOpen) => !prevIsOpen) } diff --git a/src/routes/safe/components/AddressBook/index.tsx b/src/routes/safe/components/AddressBook/index.tsx index 7fae89254f..8239f4a124 100644 --- a/src/routes/safe/components/AddressBook/index.tsx +++ b/src/routes/safe/components/AddressBook/index.tsx @@ -54,11 +54,11 @@ const AddressBookTable = ({ classes }) => { const [editCreateEntryModalOpen, setEditCreateEntryModalOpen] = useState(false) const [deleteEntryModalOpen, setDeleteEntryModalOpen] = useState(false) const [sendFundsModalOpen, setSendFundsModalOpen] = useState(false) - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'AddressBook' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'AddressBook' }) + }, [trackEvent]) useEffect(() => { if (entryAddressToEditOrCreateNew) { diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx index 6a695d0089..d54dd1b02d 100644 --- a/src/routes/safe/components/Apps/index.tsx +++ b/src/routes/safe/components/Apps/index.tsx @@ -65,7 +65,7 @@ const Apps = (): React.ReactElement => { ) const iframeRef = useRef() - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() const granted = useSelector(grantedSelector) const safeAddress = useSelector(safeParamAddressFromStateSelector) const safeName = useSelector(safeNameSelector) @@ -127,14 +127,14 @@ const Apps = (): React.ReactElement => { if (initialSelect || currentAppWasDisabled) { selectFirstEnabledApp() } - }, [appList, selectedApp, selectedAppId, trackPageEvent]) + }, [appList, selectedApp, selectedAppId, trackEvent]) // track GA useEffect(() => { if (selectedApp) { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Apps', label: selectedApp.name }) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: selectedApp.name }) } - }, [selectedApp, trackPageEvent]) + }, [selectedApp, trackEvent]) const handleIframeLoad = useCallback(() => { const iframe = iframeRef.current diff --git a/src/routes/safe/components/Balances/Coins/index.tsx b/src/routes/safe/components/Balances/Coins/index.tsx index 5c603000d4..d9b1bc6328 100644 --- a/src/routes/safe/components/Balances/Coins/index.tsx +++ b/src/routes/safe/components/Balances/Coins/index.tsx @@ -62,11 +62,11 @@ const Coins = (props: Props): React.ReactElement => { const currencyValues = useSelector(safeFiatBalancesListSelector) const granted = useSelector(grantedSelector) const [filteredData, setFilteredData] = React.useState>(List()) - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Coins' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Coins' }) + }, [trackEvent]) React.useMemo(() => { setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate)) diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx index d07937defe..d3a88e2364 100644 --- a/src/routes/safe/components/Balances/Collectibles/index.tsx +++ b/src/routes/safe/components/Balances/Collectibles/index.tsx @@ -82,11 +82,11 @@ const Collectibles = (): React.ReactElement => { const { address, ethBalance, name } = useSelector(safeSelector) const nftTokens = useSelector(nftTokensSelector) const activeAssetsList = useSelector(activeNftAssetsListSelector) - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Collectibles' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Collectibles' }) + }, [trackEvent]) const handleItemSend = (nftToken) => { setSelectedToken(nftToken) diff --git a/src/routes/safe/components/Settings/Advanced/index.tsx b/src/routes/safe/components/Settings/Advanced/index.tsx index 7822a6f9d7..4f3bafa3ad 100644 --- a/src/routes/safe/components/Settings/Advanced/index.tsx +++ b/src/routes/safe/components/Settings/Advanced/index.tsx @@ -43,11 +43,11 @@ const Advanced = (): React.ReactElement => { const nonce = useSelector(safeNonceSelector) const modules = useSelector(safeModulesSelector) const moduleData = getModuleData(modules) ?? null - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Advanced' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Advanced' }) + }, [trackEvent]) return ( <> diff --git a/src/routes/safe/components/Settings/ManageOwners/index.tsx b/src/routes/safe/components/Settings/ManageOwners/index.tsx index 7ba36f444c..461ed4a81f 100644 --- a/src/routes/safe/components/Settings/ManageOwners/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/index.tsx @@ -48,7 +48,7 @@ type Props = { } const ManageOwners = ({ addressBook, granted, owners }: Props): React.ReactElement => { - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() const classes = useStyles() const [selectedOwnerAddress, setSelectedOwnerAddress] = useState() @@ -79,8 +79,8 @@ const ManageOwners = ({ addressBook, granted, owners }: Props): React.ReactEleme } useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Owners' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Owners' }) + }, [trackEvent]) const columns = generateColumns() const autoColumns = columns.filter((c) => !c.custom) diff --git a/src/routes/safe/components/Settings/SafeDetails/index.tsx b/src/routes/safe/components/Settings/SafeDetails/index.tsx index cf85bf4b7e..c04ed03a6b 100644 --- a/src/routes/safe/components/Settings/SafeDetails/index.tsx +++ b/src/routes/safe/components/Settings/SafeDetails/index.tsx @@ -45,7 +45,7 @@ const SafeDetails = (): React.ReactElement => { const safeName = useSelector(safeNameSelector) const safeNeedsUpdate = useSelector(safeNeedsUpdateSelector) const safeCurrentVersion = useSelector(safeCurrentVersionSelector) - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() const [isModalOpen, setModalOpen] = React.useState(false) const safeAddress = useSelector(safeParamAddressFromStateSelector) @@ -66,8 +66,8 @@ const SafeDetails = (): React.ReactElement => { } useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Details' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Details' }) + }, [trackEvent]) return ( <> diff --git a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx index f9ece7d8ce..c6bcccf472 100644 --- a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx +++ b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx @@ -53,11 +53,11 @@ const ThresholdSettings = ({ classes, closeSnackbar, enqueueSnackbar }) => { ) } - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Settings', label: 'Owners' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Settings', label: 'Owners' }) + }, [trackEvent]) return ( <> diff --git a/src/routes/safe/components/Transactions/TxsTable/index.tsx b/src/routes/safe/components/Transactions/TxsTable/index.tsx index 5963cd6ec8..e7e43cdc43 100644 --- a/src/routes/safe/components/Transactions/TxsTable/index.tsx +++ b/src/routes/safe/components/Transactions/TxsTable/index.tsx @@ -29,11 +29,11 @@ const TxsTable = ({ classes }) => { const [expandedTx, setExpandedTx] = useState(null) const cancellationTransactions = useSelector(safeCancellationTransactionsSelector) const transactions = useSelector(extendedTransactionsSelector) - const { trackPageEvent } = useAnalytics() + const { trackEvent } = useAnalytics() useEffect(() => { - trackPageEvent({ action: SAFE_NAVIGATION_EVENT, category: 'Transactions' }) - }, [trackPageEvent]) + trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Transactions' }) + }, [trackEvent]) const handleTxExpand = (safeTxHash) => { setExpandedTx((prevTx) => (prevTx === safeTxHash ? null : safeTxHash)) diff --git a/src/utils/googleAnalytics.ts b/src/utils/googleAnalytics.ts index 0c145e6133..091f6a40bb 100644 --- a/src/utils/googleAnalytics.ts +++ b/src/utils/googleAnalytics.ts @@ -5,7 +5,7 @@ import { getGoogleAnalyticsTrackingID } from 'src/config' import { COOKIES_KEY } from 'src/logic/cookies/model/cookie' import { loadFromCookie } from 'src/logic/cookies/utils' -export const SAFE_NAVIGATION_EVENT = 'SafeNavigation' +export const SAFE_NAVIGATION_EVENT = 'Safe Navigation' let analyticsLoaded = false export const loadGoogleAnalytics = (): void => { @@ -26,7 +26,7 @@ export const loadGoogleAnalytics = (): void => { type UseAnalyticsResponse = { trackPage: (path: string) => void - trackPageEvent: (event: EventArgs) => void + trackEvent: (event: EventArgs) => void } export const useAnalytics = (): UseAnalyticsResponse => { @@ -53,7 +53,7 @@ export const useAnalytics = (): UseAnalyticsResponse => { [analyticsAllowed], ) - const trackPageEvent = useCallback( + const trackEvent = useCallback( (event: EventArgs) => { if (!analyticsAllowed || !analyticsLoaded) { return @@ -63,5 +63,5 @@ export const useAnalytics = (): UseAnalyticsResponse => { [analyticsAllowed], ) - return { trackPage, trackPageEvent } + return { trackPage, trackEvent } }