Merge pull request #494 from threshold-network/posthog-improvements

r-czajkowski · web-flow · commit b3e8cbadbe3f · 2023-04-18T15:24:40.000+02:00
Posthog improvements Refs: #479 Enables posthog tracking by default and adds additional posthog events to some of the buttons related to tbtc deposit flow.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "formik": "^2.2.9",
     "framer-motion": "^4",
     "numeral": "^2.0.6",
-    "posthog-js": "^1.32.2",
+    "posthog-js": "^1.53.1",
     "random-gradient": "^0.0.2",
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",
diff --git a/src/components/Modal/SelectWalletModal/ConnectCoinbase.tsx b/src/components/Modal/SelectWalletModal/ConnectCoinbase.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import { useWeb3React } from "@web3-react/core"
 import { WalletConnectionModalBase } from "./components"
-import { ConnectionError } from "../../../enums"
+import { ConnectionError, WalletType } from "../../../enums"
 import { coinbaseConnector } from "../../../web3/connectors"
 import CoinbaseStatusAlert from "./components/CoinbaseStatusAlert"
 import { CoinbaseWallet } from "../../../static/icons/CoinbaseWallet"
@@ -34,6 +34,7 @@ const ConnectCoinbase: FC<{ goBack: () => void; closeModal: () => void }> = ({
       tryAgain={
         connectionRejected ? () => activate(coinbaseConnector) : undefined
       }
+      walletType={WalletType.Coinbase}
     >
       <CoinbaseStatusAlert
         connectionRejected={connectionRejected}
diff --git a/src/components/Modal/SelectWalletModal/ConnectLedger/SelectDerivationPath.tsx b/src/components/Modal/SelectWalletModal/ConnectLedger/SelectDerivationPath.tsx
@@ -15,6 +15,7 @@ import { Ledger } from "../../../../static/icons/Ledger"
 import { LEDGER_DERIVATION_PATHS } from "../../../../web3/connectors/ledger_subprovider"
 import { WalletConnectionModalBase } from "../components"
 import { WalletConnectionModalProps } from "../../../../types"
+import { WalletType } from "../../../../enums"
 
 interface SelectDerivationPathProps extends WalletConnectionModalProps {
   derivationPath: string
@@ -46,6 +47,7 @@ const SelectDerivationPath: FC<SelectDerivationPathProps> = ({
       title="Ledger"
       subTitle="Plug in Ledger device and unlock. Choose one of the following:"
       onContinue={onContinue}
+      walletType={WalletType.Ledger}
     >
       <RadioGroup
         onChange={setDerivationPath}
diff --git a/src/components/Modal/SelectWalletModal/ConnectLedger/index.tsx b/src/components/Modal/SelectWalletModal/ConnectLedger/index.tsx
@@ -3,7 +3,7 @@ import { Icon, useColorModeValue } from "@chakra-ui/react"
 import { useWeb3React } from "@web3-react/core"
 import { LEDGER_DERIVATION_PATHS } from "../../../../web3/connectors/ledger_subprovider"
 import { WalletConnectionModalProps } from "../../../../types"
-import { LedgerConnectionStage } from "../../../../enums"
+import { LedgerConnectionStage, WalletType } from "../../../../enums"
 import {
   LedgerConnector,
   ledgerLegacyConnectorFactory,
@@ -102,6 +102,7 @@ const ConnectLedger: FC<WalletConnectionModalProps> = ({
           )}
           title="Ledger"
           eagerFetch
+          walletType={WalletType.Ledger}
         />
       )
 
@@ -119,6 +120,7 @@ const ConnectLedger: FC<WalletConnectionModalProps> = ({
           )}
           title="Ledger"
           message="Your Ledger wallet is connected"
+          walletType={WalletType.Ledger}
         />
       )
 
diff --git a/src/components/Modal/SelectWalletModal/ConnectMetamask.tsx b/src/components/Modal/SelectWalletModal/ConnectMetamask.tsx
@@ -6,7 +6,7 @@ import {
   metamask,
 } from "../../../web3/connectors"
 import { MetamaskStatusAlert, WalletConnectionModalBase } from "./components"
-import { ConnectionError } from "../../../enums"
+import { ConnectionError, WalletType } from "../../../enums"
 import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
 
 const ConnectMetamask: FC<{ goBack: () => void; closeModal: () => void }> = ({
@@ -38,6 +38,7 @@ const ConnectMetamask: FC<{ goBack: () => void; closeModal: () => void }> = ({
         !error ? "The MetaMask extension will open in an external window." : ""
       }
       tryAgain={connectionRejected ? () => activate(metamask) : undefined}
+      walletType={WalletType.Metamask}
     >
       <MetamaskStatusAlert
         metamaskNotInstalled={metamaskNotInstalled}
diff --git a/src/components/Modal/SelectWalletModal/ConnectTaho.tsx b/src/components/Modal/SelectWalletModal/ConnectTaho.tsx
@@ -18,7 +18,7 @@ import {
   WalletInitializeAlert,
   WalletRejectedAlert,
 } from "./components"
-import { ExternalHref } from "../../../enums"
+import { ExternalHref, WalletType } from "../../../enums"
 import Link from "../../Link"
 
 const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({
@@ -59,6 +59,7 @@ const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({
             }
           : undefined
       }
+      walletType={WalletType.TAHO}
     >
       {isTahoNotInstalled && <InstallTaho />}
       {isTahoNotDefaultWallet && <TahoIsNotSetAsDefaultWallet />}
diff --git a/src/components/Modal/SelectWalletModal/ConnectTrezor/index.tsx b/src/components/Modal/SelectWalletModal/ConnectTrezor/index.tsx
@@ -2,7 +2,11 @@ import { FC, useEffect, useMemo, useState } from "react"
 import { Icon, useColorModeValue } from "@chakra-ui/react"
 import { useWeb3React } from "@web3-react/core"
 import { WalletConnectionModalProps } from "../../../../types"
-import { ConnectionError, TrezorConnectionStage } from "../../../../enums"
+import {
+  ConnectionError,
+  TrezorConnectionStage,
+  WalletType,
+} from "../../../../enums"
 import HardwareAccountSelection from "../components/HardwareAccountSelection"
 import ConfirmConnectedAddress from "../components/ConfirmConnectedAddress"
 import trezorConnector from "../../../../web3/connectors/trezor"
@@ -69,6 +73,7 @@ const ConnectTrezor: FC<WalletConnectionModalProps> = ({
           tryAgain={
             connectionRejected ? () => fetchAddresses(10, 0) : undefined
           }
+          walletType={WalletType.Trezor}
         >
           <TrezorStatusAlert connectionRejected={connectionRejected} />
         </WalletConnectionModalBase>
@@ -92,6 +97,7 @@ const ConnectTrezor: FC<WalletConnectionModalProps> = ({
           )}
           title="Trezor"
           eagerFetch={false}
+          walletType={WalletType.Trezor}
         />
       )
 
@@ -102,6 +108,7 @@ const ConnectTrezor: FC<WalletConnectionModalProps> = ({
           icon={() => <Icon h="40px" w="40px" mr={4} />}
           title="Trezor"
           message="Your Trezor wallet is connected"
+          walletType={WalletType.Ledger}
         />
       )
 
diff --git a/src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx b/src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx
@@ -6,7 +6,7 @@ import {
   WalletConnectionModalBase,
   WalletConnectStatusAlert,
 } from "./components"
-import { ConnectionError } from "../../../enums"
+import { ConnectionError, WalletType } from "../../../enums"
 import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
 
 const ConnectWalletConnect: FC<{
@@ -35,6 +35,7 @@ const ConnectWalletConnect: FC<{
         walletconnect.walletConnectProvider = undefined
         activate(walletconnect)
       }}
+      walletType={WalletType.WalletConnect}
     >
       <WalletConnectStatusAlert
         connectionRejected={connectionRejected}
diff --git a/src/components/Modal/SelectWalletModal/components/ConfirmConnectedAddress.tsx b/src/components/Modal/SelectWalletModal/components/ConfirmConnectedAddress.tsx
@@ -1,11 +1,13 @@
 import { FC } from "react"
 import { AccountSuccessAlert, WalletConnectionModalBase } from "./index"
 import { WalletConnectionModalProps } from "../../../../types"
+import { WalletType } from "../../../../enums"
 
 interface Props {
   icon: any
   title: string
   message: string
+  walletType: WalletType
 }
 
 const ConfirmConnectedAddress: FC<Props & WalletConnectionModalProps> = ({
@@ -14,13 +16,15 @@ const ConfirmConnectedAddress: FC<Props & WalletConnectionModalProps> = ({
   icon: WalletIcon,
   title,
   message,
+  walletType,
 }) => {
   return (
     <WalletConnectionModalBase
       goBack={goBack}
       closeModal={closeModal}
       WalletIcon={<WalletIcon />}
       title={title}
+      walletType={walletType}
     >
       <AccountSuccessAlert message={message} />
     </WalletConnectionModalBase>
diff --git a/src/components/Modal/SelectWalletModal/components/HardwareAccountSelection.tsx b/src/components/Modal/SelectWalletModal/components/HardwareAccountSelection.tsx
@@ -18,6 +18,7 @@ import { HiChevronLeft, HiChevronRight } from "react-icons/all"
 import createEtherscanLink, {
   ExplorerDataType,
 } from "../../../../utils/createEtherscanLink"
+import { WalletType } from "../../../../enums"
 
 interface HardwareAccountSelectionProps extends WalletConnectionModalProps {
   selectedAddress: string
@@ -28,6 +29,7 @@ interface HardwareAccountSelectionProps extends WalletConnectionModalProps {
   icon: any
   title: string
   eagerFetch: boolean
+  walletType: WalletType
 }
 
 const HARDWARE_LOADING_TIMEOUT_MS = 60000
@@ -43,6 +45,7 @@ const HardwareAccountSelection: FC<HardwareAccountSelectionProps> = ({
   icon: WalletIcon,
   title,
   eagerFetch,
+  walletType,
 }) => {
   const [loadingCountDown, setCounter] = useState(HARDWARE_LOADING_TIMEOUT_MS)
 
@@ -105,6 +108,7 @@ const HardwareAccountSelection: FC<HardwareAccountSelectionProps> = ({
       title={title}
       subTitle="Choose an address below."
       onContinue={confirmAddress}
+      walletType={walletType}
     >
       {loading ? (
         Array.from(Array(ROWS_PER_PAGE).keys()).map((address) => (
diff --git a/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx b/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx
@@ -14,6 +14,9 @@ import { useWeb3React } from "@web3-react/core"
 import { WalletConnectionModalProps } from "../../../../types"
 import { BodyMd, H4 } from "@threshold-network/components"
 import { AbstractConnector } from "../../../../web3/connectors"
+import { WalletType } from "../../../../enums"
+import { useCapture } from "../../../../hooks/posthog"
+import { PosthogEvent } from "../../../../types/posthog"
 
 interface Props extends WalletConnectionModalProps {
   WalletIcon: any
@@ -22,6 +25,7 @@ interface Props extends WalletConnectionModalProps {
   tryAgain?: () => void
   onContinue?: () => void
   connector?: AbstractConnector
+  walletType: WalletType
 }
 
 const WalletConnectionModalBase: FC<Props> = ({
@@ -34,14 +38,17 @@ const WalletConnectionModalBase: FC<Props> = ({
   tryAgain,
   onContinue,
   connector,
+  walletType,
 }) => {
   const { activate, active, account } = useWeb3React()
+  const captureWalletConnected = useCapture(PosthogEvent.WalletConnected)
 
   useEffect(() => {
     if (!connector) return
 
+    captureWalletConnected({ walletType })
     activate(connector)
-  }, [activate, connector])
+  }, [activate, connector, captureWalletConnected, walletType])
 
   return (
     <>
diff --git a/src/components/Modal/TbtcMintingConfirmationModal/index.tsx b/src/components/Modal/TbtcMintingConfirmationModal/index.tsx
@@ -117,12 +117,22 @@ const TbtcMintingConfirmationModal: FC<TbtcMintingConfirmationModalProps> = ({
         </BodySm>
       </ModalBody>
       <ModalFooter>
-        <Button onClick={closeModal} variant="outline" mr={2}>
+        <Button
+          onClick={closeModal}
+          variant="outline"
+          mr={2}
+          data-ph-capture-attribute-button-name={
+            "Cancel (TBTC Minting Confirmation Modal)"
+          }
+        >
           Cancel
         </Button>
         <Button
           disabled={!tBTCMintAmount || !mintingFee || !thresholdNetworkFee}
           onClick={initiateMintTransaction}
+          data-ph-capture-attribute-button-name={
+            "Start minting (TBTC Minting Confirmation Modal)"
+          }
         >
           Start minting
         </Button>
diff --git a/src/components/Modal/TbtcRecoveryFileModal/index.tsx b/src/components/Modal/TbtcRecoveryFileModal/index.tsx
@@ -108,15 +108,32 @@ const TbtcRecoveryFileModalModal: FC<
       </ModalBody>
       <ModalFooter>
         {isOnConfirmStep ? (
-          <Button onClick={handleDoubleReject} variant="outline" mr={2}>
+          <Button
+            onClick={handleDoubleReject}
+            variant="outline"
+            mr={2}
+            data-ph-capture-attribute-button-name={
+              "Dismiss Anyway [JSON download]"
+            }
+          >
             Dismiss Anyway
           </Button>
         ) : (
-          <Button onClick={setIsOnConfirmStep} variant="outline" mr={2}>
+          <Button
+            onClick={setIsOnConfirmStep}
+            variant="outline"
+            mr={2}
+            data-ph-capture-attribute-button-name={"Cancel [JSON download]"}
+          >
             Cancel
           </Button>
         )}
-        <Button onClick={handleDownloadClick}>Download</Button>
+        <Button
+          onClick={handleDownloadClick}
+          data-ph-capture-attribute-button-name={"Download JSON"}
+        >
+          Download
+        </Button>
       </ModalFooter>
     </>
   )
diff --git a/src/components/Modal/tBTC/NewTBTCApp.tsx b/src/components/Modal/tBTC/NewTBTCApp.tsx
@@ -49,6 +49,7 @@ const NewTBTCAppBase: FC<BaseModalProps> = ({ closeModal }) => {
             accept()
             closeModal()
           }}
+          data-ph-capture-attribute-button-name={`I Agree, Let's Go! (New tBTC app)`}
         >
           I Agree, Let's Go!
         </Button>
diff --git a/src/components/tBTC/Links.tsx b/src/components/tBTC/Links.tsx
@@ -22,6 +22,7 @@ export const BridgeContractLink: FC<Props> = ({
       type={ExplorerDataType.ADDRESS}
       text={text}
       {...props}
+      data-ph-capture-attribute-button-name={`Bridge contract link (Deposit flow)`}
     />
   )
 }
diff --git a/src/enums/web3.ts b/src/enums/web3.ts
@@ -30,4 +30,6 @@ export enum WalletType {
   Metamask = "METAMASK",
   WalletConnect = "WALLET_CONNECT",
   Coinbase = "COINBASE",
+  Trezor = "TREZOR",
+  Ledger = "Ledger",
 }
diff --git a/src/hooks/posthog/useCapture.ts b/src/hooks/posthog/useCapture.ts
@@ -2,17 +2,13 @@ import { useCallback } from "react"
 import { PosthogEvent } from "../../types/posthog"
 import { featureFlags } from "../../constants"
 import * as posthog from "../../posthog"
-import { useAnalytics } from "../useAnalytics"
 
 export const useCapture = (eventName: PosthogEvent) => {
-  const { isAnalyticsEnabled } = useAnalytics()
-
   return useCallback(
     (params) => {
       if (!featureFlags.POSTHOG) return
-      if (!isAnalyticsEnabled) return
       posthog.capture(eventName, params)
     },
-    [eventName, isAnalyticsEnabled]
+    [eventName]
   )
 }
diff --git a/src/hooks/posthog/useCapturePageview.ts b/src/hooks/posthog/useCapturePageview.ts
@@ -2,13 +2,11 @@ import { useEffect } from "react"
 import { useLocation } from "react-router-dom"
 import * as posthog from "../../posthog"
 import { featureFlags } from "../../constants"
-import { useAnalytics } from "../useAnalytics"
 
 export const useCapturePageview = () => {
   const location = useLocation()
-  const { isAnalyticsEnabled } = useAnalytics()
 
   useEffect(() => {
-    if (featureFlags.POSTHOG && isAnalyticsEnabled) posthog.capturePageview()
-  }, [location, isAnalyticsEnabled])
+    if (featureFlags.POSTHOG) posthog.capturePageview()
+  }, [location])
 }
diff --git a/src/hooks/posthog/useIdentify.ts b/src/hooks/posthog/useIdentify.ts
diff --git a/src/hooks/posthog/usePosthog.ts b/src/hooks/posthog/usePosthog.ts
diff --git a/src/pages/Overview/AnalyticsBanner.tsx b/src/pages/Overview/AnalyticsBanner.tsx
diff --git a/src/pages/tBTC/Bridge/MintingCard/InitiateMinting.tsx b/src/pages/tBTC/Bridge/MintingCard/InitiateMinting.tsx
diff --git a/src/pages/tBTC/Bridge/MintingCard/ProvideData.tsx b/src/pages/tBTC/Bridge/MintingCard/ProvideData.tsx
diff --git a/src/types/posthog.ts b/src/types/posthog.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ import {`
`18`	`18`	`WalletInitializeAlert,`
`19`	`19`	`WalletRejectedAlert,`
`20`	`20`	`} from "./components"`
`21`		`-import { ExternalHref } from "../../../enums"`
	`21`	`+import { ExternalHref, WalletType } from "../../../enums"`
`22`	`22`	`import Link from "../../Link"`
`23`	`23`
`24`	`24`	`const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({`
`@@ -59,6 +59,7 @@ const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({`
`59`	`59`	`}`
`60`	`60`	`: undefined`
`61`	`61`	`}`
	`62`	`+ walletType={WalletType.TAHO}`
`62`	`63`	`>`
`63`	`64`	`{isTahoNotInstalled && <InstallTaho />}`
`64`	`65`	`{isTahoNotDefaultWallet && <TahoIsNotSetAsDefaultWallet />}`