add analytics events DAO-97 (#1567)

* implement analytics events

* clean up

* add dao address to created event

* clean up

* only emit event if creating a DAO

* pass address or ens

* bug fixing

Author: Rekard0

src/analytics.js

@@ -7,6 +7,9 @@ const methods = {
 export const events = {
   TEMPLATE_SELECTED: 'template_selected',
   WALLET_DISCONNECTED: 'wallet_disconnected',
+  DAO_CREATEBTN_CLICKED: 'dao_createBtn_clicked',
+  DAO_CREATED: 'dao_created',
+  DAO_CREATIONFAILED: 'dao_creationFailed',
 }
 
 /**

src/check-domain.js

@@ -64,4 +64,5 @@ export {
   DOMAIN_LOADING,
   DOMAIN_NONE,
   useCheckDomain,
+  completeDomain,
 }

src/onboarding/Create/Create.js

@@ -4,6 +4,7 @@ import { Button } from '@aragon/ui'
 import {
   fetchApmArtifact,
   getRecommendedGasLimit,
+  resolveEnsDomain,
 } from '../../aragonjs-wrapper'
 import { EthereumAddressType } from '../../prop-types'
 import {
@@ -27,6 +28,9 @@ import {
   STATUS_TEMPLATE_SCREENS,
   STATUS_DEPLOYMENT,
 } from './create-statuses'
+import { useWallet } from '../../wallet'
+import { trackEvent, events } from '../../analytics'
+import { completeDomain } from '../../check-domain'
 
 // Used during the template selection phase, since we don’t know yet what are
 // going to be the configuration steps.
@@ -225,6 +229,8 @@ function useDeploymentState(
   templateData,
   walletWeb3
 ) {
+  const { networkName } = useWallet()
+
   const [transactionProgress, setTransactionProgress] = useState({
     signing: 0,
     error: -1,
@@ -276,13 +282,45 @@ function useDeploymentState(
               await walletWeb3.eth.sendTransaction(transaction)
 
               if (!cancelled) {
+                // analytics
+                // we are only interested in the first tx of creating a DAO
+                if (
+                  transaction?.data ===
+                    deployTransactions[0]?.transaction?.data &&
+                  transactionProgress.signed === 0
+                ) {
+                  const daoEns = completeDomain(templateData.domain)
+                  const daoAddress = (await resolveEnsDomain(daoEns)) || daoEns
+
+                  trackEvent(events.DAO_CREATED, {
+                    network: networkName,
+                    template: template.name,
+                    dao_identifier: templateData.domain,
+                    dao_address: daoAddress,
+                  })
+                }
+
                 setTransactionProgress(({ signed, errored }) => ({
                   signed: signed + 1,
                   errored,
                 }))
               }
             } catch (err) {
               log('Failed onboarding transaction', err)
+
+              if (
+                transaction?.data ===
+                  deployTransactions[0]?.transaction?.data &&
+                transactionProgress.signed === 0
+              ) {
+                // analytics
+                trackEvent(events.DAO_CREATIONFAILED, {
+                  network: networkName,
+                  template: template.name,
+                  error: err.message || err.reason,
+                })
+              }
+
               if (!cancelled) {
                 setTransactionProgress(({ signed, errored }) => ({
                   errored: signed,
@@ -426,6 +464,12 @@ const Create = React.memo(function Create({
     walletWeb3
   )
 
+  // useEffect(() => {
+  //   if (condition) {
+
+  //   }
+  // }, [transactionsStatus])
+
   const handleUseTemplate = useCallback(
     (id, optionalApps) => {
       selectTemplate(id, optionalApps)

src/templates/kit/screens/ReviewScreen.js

@@ -10,6 +10,8 @@ import {
   useTheme,
 } from '@aragon/ui'
 import { Header, Navigation, ScreenPropsType } from '..'
+import { trackEvent, events } from '../../../analytics'
+import { useWallet } from '../../../wallet'
 
 function ReviewScreen({
   items,
@@ -18,10 +20,17 @@ function ReviewScreen({
   screenTitle,
 }) {
   const theme = useTheme()
+  const { networkName } = useWallet()
 
   const handleNext = useCallback(() => {
+    // analytics
+    trackEvent(events.DAO_CREATEBTN_CLICKED, {
+      network: networkName,
+      template: items[0].fields[0][1],
+    })
+
     next(data)
-  }, [data, next])
+  }, [data, next, items, networkName])
 
   const containerRef = useRef()
   const prevNextRef = useRef()