diff --git a/src/analytics.js b/src/analytics.js index 09ad521fb..b92fa728a 100644 --- a/src/analytics.js +++ b/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', } /** diff --git a/src/check-domain.js b/src/check-domain.js index 6503e8a4c..cd9863102 100644 --- a/src/check-domain.js +++ b/src/check-domain.js @@ -64,4 +64,5 @@ export { DOMAIN_LOADING, DOMAIN_NONE, useCheckDomain, + completeDomain, } diff --git a/src/onboarding/Create/Create.js b/src/onboarding/Create/Create.js index 2cd55743b..1a2ac3225 100644 --- a/src/onboarding/Create/Create.js +++ b/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,6 +282,24 @@ 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, @@ -283,6 +307,20 @@ function useDeploymentState( } } 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) diff --git a/src/templates/kit/screens/ReviewScreen.js b/src/templates/kit/screens/ReviewScreen.js index 76d4c2962..9303223fc 100644 --- a/src/templates/kit/screens/ReviewScreen.js +++ b/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()