Fix: track nft send only when enabled (#1626)

* Fix: track nft send only when enabled * Join imports
safe-global · Feb 1, 2023 · eb09108 · eb09108
1 parent aad18d9
commit eb09108
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 25 deletions.
diff --git a/src/components/nfts/NftCollections/index.tsx b/src/components/nfts/NftCollections/index.tsx
@@ -1,5 +1,4 @@
-import type { SyntheticEvent } from 'react'
-import { useEffect, useState } from 'react'
+import { type SyntheticEvent, type ReactElement, useCallback, useEffect, useState } from 'react'
 import { type SafeCollectibleResponse } from '@safe-global/safe-gateway-typescript-sdk'
 import { Box, CircularProgress } from '@mui/material'
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -8,10 +7,12 @@ import NftIcon from '@/public/images/common/nft.svg'
 import NftBatchModal from '@/components/tx/modals/NftBatchModal'
 import useCollectibles from '@/hooks/useCollectibles'
 import InfiniteScroll from '@/components/common/InfiniteScroll'
+import { NFT_EVENTS } from '@/services/analytics/events/nfts'
+import { trackEvent } from '@/services/analytics'
 import NftGrid from '../NftGrid'
 import NftSendForm from '../NftSendForm'
 
-const NftCollections = () => {
+const NftCollections = (): ReactElement => {
   // Track the current NFT page url
   const [pageUrl, setPageUrl] = useState<string>()
   // Load NFTs from the backend
@@ -24,9 +25,24 @@ const NftCollections = () => {
   const [showSendModal, setShowSendModal] = useState<boolean>(false)
 
   // Add or remove NFT from the selected list on row click
-  const onSelect = (token: SafeCollectibleResponse) => {
+  const onSelect = useCallback((token: SafeCollectibleResponse) => {
     setSelectedNfts((prev) => (prev.includes(token) ? prev.filter((t) => t !== token) : prev.concat(token)))
-  }
+  }, [])
+
+  const onSendSubmit = useCallback(
+    (e: SyntheticEvent) => {
+      e.preventDefault()
+
+      if (selectedNfts.length) {
+        // Show the NFT transfer modal
+        setShowSendModal(true)
+
+        // Track how many NFTs are being sent
+        trackEvent({ ...NFT_EVENTS.SEND, label: selectedNfts.length })
+      }
+    },
+    [selectedNfts.length],
+  )
 
   // Add new NFTs to the accumulated list
   useEffect(() => {
@@ -49,11 +65,6 @@ const NftCollections = () => {
     return <PagePlaceholder img={<NftIcon />} text="No NFTs available or none detected" />
   }
 
-  const onSendSubmit = (e: SyntheticEvent) => {
-    e.preventDefault()
-    setShowSendModal(true)
-  }
-
   return (
     <>
       {allNfts?.length > 0 && (

diff --git a/src/components/nfts/NftSendForm/index.tsx b/src/components/nfts/NftSendForm/index.tsx
@@ -2,8 +2,6 @@ import type { ReactElement } from 'react'
 import { Box, Button, Grid, SvgIcon, Typography } from '@mui/material'
 import ArrowIcon from '@/public/images/common/arrow-nw.svg'
 import type { SafeCollectibleResponse } from '@safe-global/safe-gateway-typescript-sdk'
-import Track from '@/components/common/Track'
-import { NFT_EVENTS } from '@/services/analytics/events/nfts'
 import useIsGranted from '@/hooks/useIsGranted'
 
 type NftSendFormProps = {
@@ -54,19 +52,17 @@ const NftSendForm = ({ selectedNfts, onSelectAll }: NftSendFormProps): ReactElem
         </Grid>
 
         <Grid item>
-          <Track {...NFT_EVENTS.SEND} label={selectedNfts.length}>
-            <Button
-              type="submit"
-              variant="contained"
-              size="small"
-              disabled={!isGranted || noSelected}
-              sx={{
-                minWidth: '10em',
-              }}
-            >
-              {noSelected ? 'Send' : `Send ${selectedNfts.length} ${nftsText}`}
-            </Button>
-          </Track>
+          <Button
+            type="submit"
+            variant="contained"
+            size="small"
+            disabled={!isGranted || noSelected}
+            sx={{
+              minWidth: '10em',
+            }}
+          >
+            {noSelected ? 'Send' : `Send ${selectedNfts.length} ${nftsText}`}
+          </Button>
         </Grid>
       </Grid>
     </Sticky>