From 2278bdb08db98f7a7b0fa31d423e1de8f6b64159 Mon Sep 17 00:00:00 2001 From: Manuel Calavera Date: Mon, 22 Jul 2019 13:05:37 -0700 Subject: [PATCH] feat: mixpanel and ga integration --- package.json | 1 + public/index.html | 7 +++++++ src/v2/components/Footer/Newsletter/index.jsx | 9 +++++++- .../components/Footer/Partnership/index.jsx | 10 +++++++-- src/v2/components/NavBar/index.jsx | 12 +++++++++++ src/v2/components/Social/index.jsx | 11 +++++++++- src/v2/components/TourDeSol/Cards/index.jsx | 6 +++--- src/v2/components/TourDeSol/Ranking/index.jsx | 8 +++---- src/v2/components/Validators/Detail/index.jsx | 9 +++++++- src/v2/components/Validators/index.jsx | 4 ++++ src/v2/mixpanel.js | 21 +++++++++++++++++++ yarn.lock | 5 +++++ 12 files changed, 90 insertions(+), 13 deletions(-) create mode 100644 src/v2/mixpanel.js diff --git a/package.json b/package.json index 980151b5..9c1ba1e1 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "ip": "^1.1.5", "localforage": "^1.7.3", "lodash": "^4.17.15", + "mixpanel-browser": "^2.29.0", "mobx": "^5.13.0", "mobx-react-lite": "^1.4.1", "nocache": "^2.1.0", diff --git a/public/index.html b/public/index.html index b48a586e..97acdab3 100755 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,13 @@ + + { const classes = useStyles(); + + const handleSubmit = e => { + e.preventDefault(); + Mixpanel.track('Clicked Partner with us'); + }; + return (
@@ -13,7 +20,7 @@ const Newsletter = () => { Stay up to date with the latest Solana news. -
+ { const classes = useStyles(); + + const handlePartner = () => Mixpanel.track('Clicked Partner with us'); + + const handleDiscuss = () => Mixpanel.track('Clicked Discuss on Forums'); + return (
@@ -17,11 +23,11 @@ const Partnership = () => {
Let’s build something together. -
- + Discuss on forums diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx index 8a35c79b..d17958f7 100644 --- a/src/v2/components/NavBar/index.jsx +++ b/src/v2/components/NavBar/index.jsx @@ -14,6 +14,7 @@ import CloseIcon from '@material-ui/icons/Close'; import {RouterHistory, withRouter} from 'react-router-dom'; import React from 'react'; import {map, propEq, eq} from 'lodash/fp'; +import Mixpanel from 'v2/mixpanel'; import {ReactComponent as dashboard} from './assets/dashboard.svg'; import {ReactComponent as transactions} from './assets/transactions.svg'; @@ -34,6 +35,16 @@ const icons = { favorites, }; +const navTracks = { + dashboard: 'Clicked Overview', + transactions: 'Clicked Transactions Page', + validators: 'Clicked Transactions Page', + 'tour-de-sol': 'Clicked Transactions Page', + applications: 'Clicked Applications page', + blocks: 'Clicked Applications page', + favorites: 'Clicked Applications page', +}; + const NavBar = ({ location, history, @@ -64,6 +75,7 @@ const NavBar = ({ location.pathname.includes(link) || (propEq('pathname', '/rc/')(location) && isDashboard); const changeRoute = () => { + Mixpanel.track(navTracks[link]); history.push(`/rc/${isDashboard ? '' : link}`); toggleDrawer(false)(); }; diff --git a/src/v2/components/Social/index.jsx b/src/v2/components/Social/index.jsx index 8d3d4a07..86412cf0 100644 --- a/src/v2/components/Social/index.jsx +++ b/src/v2/components/Social/index.jsx @@ -1,6 +1,7 @@ // @flow import React from 'react'; import {map} from 'lodash/fp'; +import Mixpanel from 'v2/mixpanel'; import {ReactComponent as discord} from './assets/discord.svg'; import {ReactComponent as medium} from './assets/medium.svg'; @@ -44,8 +45,16 @@ const links: Link[] = [ ]; const Social = () => { const classes = useStyles(); + + const handleLink = () => social => Mixpanel.track(`Visit ${social}`); + const renderLink = ({name, link, icon: Icon}: Link) => ( - + ); diff --git a/src/v2/components/TourDeSol/Cards/index.jsx b/src/v2/components/TourDeSol/Cards/index.jsx index cbd16065..ecd3973c 100644 --- a/src/v2/components/TourDeSol/Cards/index.jsx +++ b/src/v2/components/TourDeSol/Cards/index.jsx @@ -9,8 +9,8 @@ import useStyles from './styles'; const Cards = () => { const classes = useStyles(); - const {cluster} = NodesStore; - const {nodes} = cluster; + const {cluster, validators} = NodesStore; + const cards = [ { title: 'Stage Duration Blocks', @@ -44,7 +44,7 @@ const Cards = () => { }, { title: '# of Active Validators', - value: nodes.length, + value: validators.length, changes: '', period: 'since yesterday', }, diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx index 53425ca2..04046bac 100644 --- a/src/v2/components/TourDeSol/Ranking/index.jsx +++ b/src/v2/components/TourDeSol/Ranking/index.jsx @@ -9,14 +9,12 @@ import useStyles from './styles'; const Ranking = () => { const classes = useStyles(); - const { - cluster: {voting}, - } = NodesStore; + const {validators} = NodesStore; const maxVal = compose( get('stake'), maxBy('stake'), - )(voting); + )(validators); const renderNode = node => { const position = (node.stake * 100) / maxVal; @@ -41,7 +39,7 @@ const Ranking = () => { Top Validator Ranking
-
    {map(renderNode)(voting)}
+
    {map(renderNode)(validators)}
); }; diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx index 8be5cda3..30b850ec 100644 --- a/src/v2/components/Validators/Detail/index.jsx +++ b/src/v2/components/Validators/Detail/index.jsx @@ -2,7 +2,7 @@ import {Container, useTheme} from '@material-ui/core'; import {observer} from 'mobx-react-lite'; import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery'; -import React from 'react'; +import React, {useEffect} from 'react'; import {map, find, compose, mergeWith} from 'lodash/fp'; import {Match} from 'react-router-dom'; import {CopyToClipboard} from 'react-copy-to-clipboard'; @@ -22,6 +22,7 @@ import HelpLink from 'v2/components/HelpLink'; import getColor from 'v2/utils/getColor'; import {ReactComponent as CopyIcon} from '../../../assets/icons/copy.svg'; +import Mixpanel from '../../../mixpanel'; import useStyles from './styles'; const mapStyles = { @@ -38,10 +39,16 @@ const ValidatorsDetail = ({match}: {match: Match}) => { const { cluster: {voting, cluster}, } = NodesStore; + const classes = useStyles(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const {params} = match; + + useEffect(() => { + Mixpanel.track(`Clicked Validator ${params.id}`); + }, [params.id]); + const currentNode = find({pubkey: params.id})(cluster); if (!currentNode) { return
Loading...
; diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx index 8aa96bd5..36f56dbe 100644 --- a/src/v2/components/Validators/index.jsx +++ b/src/v2/components/Validators/index.jsx @@ -7,6 +7,7 @@ import Card from 'v2/components/UI/StatCard'; import SectionHeader from 'v2/components/UI/SectionHeader'; import NodesStore from 'v2/stores/nodes'; +import Mixpanel from '../../mixpanel'; import Button from '../UI/Button'; import ValidatorsMap from './ValidatorsMap'; import ValidatorsTable from './Table'; @@ -67,12 +68,15 @@ const Validators = () => {
); + const handleValidator = () => Mixpanel.track('Clicked Become a Validator'); + return (