fix: Add events for export pk (#2766)

safe-global · Nov 8, 2023 · 4fbfa1b · 4fbfa1b
1 parent a299a33
commit 4fbfa1b
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 18 deletions.
diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx b/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx
@@ -1,5 +1,7 @@
 import CopyButton from '@/components/common/CopyButton'
 import ModalDialog from '@/components/common/ModalDialog'
+import { trackEvent } from '@/services/analytics'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
 import { Box, Button, DialogContent, DialogTitle, IconButton, TextField, Typography } from '@mui/material'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -43,9 +45,11 @@ const ExportMPCAccountModal = ({ onClose, open }: { onClose: () => void; open: b
     try {
       setError(undefined)
       const pk = await socialWalletService.exportSignerKey(data[ExportFieldNames.password])
+      trackEvent(MPC_WALLET_EVENTS.EXPORT_PK_SUCCESS)
       setValue(ExportFieldNames.pk, pk)
     } catch (err) {
       logError(ErrorCodes._305, err)
+      trackEvent(MPC_WALLET_EVENTS.EXPORT_PK_ERROR)
       setError(asError(err).message)
     }
   }
@@ -55,13 +59,19 @@ const ExportMPCAccountModal = ({ onClose, open }: { onClose: () => void; open: b
     reset()
     onClose()
   }
+
+  const toggleShowPK = () => {
+    trackEvent(MPC_WALLET_EVENTS.SEE_PK)
+    setShowPassword((prev) => !prev)
+  }
+
+  const onCopy = () => {
+    trackEvent(MPC_WALLET_EVENTS.COPY_PK)
+  }
+
   return (
     <ModalDialog open={open} onClose={handleClose}>
-      <DialogTitle>
-        <Typography variant="h6" fontWeight={700}>
-          Export your account
-        </Typography>
-      </DialogTitle>
+      <DialogTitle fontWeight="bold">Export your account</DialogTitle>
       <IconButton className={css.close} aria-label="close" onClick={handleClose} size="small">
         <Close fontSize="large" />
       </IconButton>
@@ -83,10 +93,10 @@ const ExportMPCAccountModal = ({ onClose, open }: { onClose: () => void; open: b
                     readOnly: true,
                     endAdornment: (
                       <>
-                        <IconButton size="small" onClick={() => setShowPassword((prev) => !prev)}>
+                        <IconButton size="small" onClick={toggleShowPK}>
                           {showPassword ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
                         </IconButton>
-                        <CopyButton text={exportedKey} />
+                        <CopyButton text={exportedKey} onCopy={onCopy} />
                       </>
                     ),
                   }}

diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/index.tsx b/src/components/settings/SecurityLogin/SocialSignerExport/index.tsx
@@ -1,3 +1,5 @@
+import Track from '@/components/common/Track'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
 import { Alert, Box, Button, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'
 import ExportMPCAccountModal from '@/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal'
@@ -20,17 +22,22 @@ const SocialSignerExport = () => {
           Never disclose your keys or seed phrase to anyone. If someone gains access to them, they have full access over
           your social login signer.
         </Alert>
-        <Tooltip title={isPasswordSet ? '' : 'Private key export is only available if you set a recovery password'}>
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ pointerEvents: 'all !important' }}
-            disabled={isModalOpen || !isPasswordSet}
-            onClick={() => setIsModalOpen(true)}
-          >
-            Reveal private key
-          </Button>
-        </Tooltip>
+
+        <Track {...MPC_WALLET_EVENTS.REVEAL_PRIVATE_KEY}>
+          <Tooltip title={isPasswordSet ? '' : 'Private key export is only available if you set a recovery password'}>
+            <span>
+              <Button
+                color="primary"
+                variant="contained"
+                sx={{ pointerEvents: 'all !important' }}
+                disabled={isModalOpen || !isPasswordSet}
+                onClick={() => setIsModalOpen(true)}
+              >
+                Reveal private key
+              </Button>
+            </span>
+          </Tooltip>
+        </Track>
       </Box>
       <ExportMPCAccountModal onClose={() => setIsModalOpen(false)} open={isModalOpen} />
     </>

diff --git a/src/services/analytics/events/mpcWallet.ts b/src/services/analytics/events/mpcWallet.ts
@@ -28,4 +28,29 @@ export const MPC_WALLET_EVENTS = {
     action: 'Enable MFA for account',
     category: MPC_WALLET_CATEGORY,
   },
+  REVEAL_PRIVATE_KEY: {
+    event: EventType.CLICK,
+    action: 'Reveal private key',
+    category: MPC_WALLET_CATEGORY,
+  },
+  EXPORT_PK_SUCCESS: {
+    event: EventType.META,
+    action: 'Export private key successful',
+    category: MPC_WALLET_CATEGORY,
+  },
+  EXPORT_PK_ERROR: {
+    event: EventType.META,
+    action: 'Export private key error',
+    category: MPC_WALLET_CATEGORY,
+  },
+  SEE_PK: {
+    event: EventType.CLICK,
+    action: 'Toggle see private key',
+    category: MPC_WALLET_CATEGORY,
+  },
+  COPY_PK: {
+    event: EventType.CLICK,
+    action: 'Copy private key',
+    category: MPC_WALLET_CATEGORY,
+  },
 }