Update GA (#577)

* add updated GA

* update swap/send events

* add custom variable for device type

* cleanup

src/components/ContextualInfo/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
+import ReactGA from 'react-ga'
 import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
 import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
 
@@ -94,11 +95,17 @@ class ContextualInfo extends Component {
     return (
       <>
         <SummaryWrapperContainer
-          onClick={() =>
+          onClick={() => {
+            !this.state.showDetails &&
+              ReactGA.event({
+                category: 'Advanced Interaction',
+                action: 'Open Advanced Details',
+                label: 'Pool Page Details'
+              })
             this.setState(prevState => {
               return { showDetails: !prevState.showDetails }
             })
-          }
+          }}
         >
           {!this.state.showDetails ? (
             <>

src/components/ContextualInfoNew/index.js

 import React, { useState } from 'react'
 import styled, { css } from 'styled-components'
 import { transparentize } from 'polished'
-
+import ReactGA from 'react-ga'
 import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
 import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
 
@@ -99,7 +99,17 @@ export default function ContextualInfo({
     <SummaryWrapper>{contextualInfo}</SummaryWrapper>
   ) : (
     <>
-      <SummaryWrapperContainer onClick={() => setShowDetails(s => !s)}>
+      <SummaryWrapperContainer
+        onClick={() => {
+          !showDetails &&
+            ReactGA.event({
+              category: 'Advanced Interaction',
+              action: 'Open Advanced Details',
+              label: 'Swap/Send Page Details'
+            })
+          setShowDetails(s => !s)
+        }}
+      >
         <>
           <ErrorSpan isError={isError} slippageWarning={slippageWarning} highSlippageWarning={highSlippageWarning}>
             {(slippageWarning || highSlippageWarning) && (

src/components/ExchangePage/index.jsx

@@ -19,6 +19,7 @@ import { useTransactionAdder } from '../../contexts/Transactions'
 import { useAddressBalance, useExchangeReserves } from '../../contexts/Balances'
 import { useAddressAllowance } from '../../contexts/Allowances'
 import { useWalletModalToggle } from '../../contexts/Application'
+import { useETHPriceInUSD } from '../../contexts/Balances'
 
 const INPUT = 0
 const OUTPUT = 1
@@ -246,6 +247,9 @@ export default function ExchangePage({ initialCurrency, sending = false, params
   const { t } = useTranslation()
   const { account, error } = useWeb3React()
 
+  // BigNumber.js instance
+  const ethPrice = useETHPriceInUSD()
+
   const addTransaction = useTransactionAdder()
 
   // check if URL specifies valid slippage, if so use as default
@@ -564,13 +568,51 @@ export default function ExchangePage({ initialCurrency, sending = false, params
   }
 
   async function onSwap() {
+    //if user changed deadline, log new one in minutes
+    if (deadlineFromNow !== DEFAULT_DEADLINE_FROM_NOW) {
+      ReactGA.event({
+        category: 'Advanced Interaction',
+        action: 'Set Custom Deadline',
+        value: deadlineFromNow / 60
+      })
+    }
+
     const deadline = Math.ceil(Date.now() / 1000) + deadlineFromNow
 
+    // if user has changed slippage, log
+    if (swapType === TOKEN_TO_TOKEN) {
+      if (parseInt(tokenAllowedSlippageBig.toString()) !== TOKEN_ALLOWED_SLIPPAGE_DEFAULT) {
+        ReactGA.event({
+          category: 'Advanced Interaction',
+          action: 'Set Custom Slippage',
+          value: parseInt(tokenAllowedSlippageBig.toString())
+        })
+      }
+    } else {
+      if (parseInt(allowedSlippageBig.toString()) !== ALLOWED_SLIPPAGE_DEFAULT) {
+        ReactGA.event({
+          category: 'Advanced Interaction',
+          action: 'Set Custom Slippage',
+          value: parseInt(allowedSlippageBig.toString())
+        })
+      }
+    }
+
     let estimate, method, args, value
+
+    let inputEthPerToken = 1
+    if (inputCurrency !== 'ETH') {
+      inputEthPerToken = inputReserveToken && inputReserveETH ? inputReserveETH / inputReserveToken : null
+    }
+    let usdTransactionSize = ethPrice * inputEthPerToken * inputValueFormatted
+
     if (independentField === INPUT) {
+      // general details about transaction
       ReactGA.event({
-        category: `${swapType}`,
-        action: sending ? 'TransferInput' : 'SwapInput'
+        category: 'Transaction',
+        action: sending ? 'SendInput' : 'SwapInput',
+        label: outputCurrency,
+        value: usdTransactionSize
       })
 
       if (swapType === ETH_TO_TOKEN) {
@@ -601,9 +643,12 @@ export default function ExchangePage({ initialCurrency, sending = false, params
         value = ethers.constants.Zero
       }
     } else if (independentField === OUTPUT) {
+      // general details about transaction
       ReactGA.event({
-        category: `${swapType}`,
-        action: sending ? 'TransferOutput' : 'SwapOutput'
+        category: 'Transaction',
+        action: sending ? 'SendOutput' : 'SwapOutput',
+        label: outputCurrency,
+        value: usdTransactionSize
       })
 
       if (swapType === ETH_TO_TOKEN) {

src/components/Footer/index.js

 import React from 'react'
+import ReactGA from 'react-ga'
 import styled from 'styled-components'
 import { darken, transparentize } from 'polished'
 import Toggle from 'react-switch'
@@ -103,7 +104,14 @@ export default function Footer() {
             {'☀️'}
           </EmojiToggle>
         }
-        onChange={() => toggleDarkMode()}
+        onChange={() => {
+          ReactGA.event({
+            category: 'Advanced Interaction',
+            action: 'Toggle Theme',
+            label: isDark ? 'Light' : 'Dark'
+          })
+          toggleDarkMode()
+        }}
       />
     </FooterFrame>
   )

src/components/TransactionDetails/index.js

 import React, { useState, useEffect, useRef, useCallback } from 'react'
-import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'
 import styled, { css, keyframes } from 'styled-components'
 import { darken, lighten } from 'polished'
@@ -81,7 +80,7 @@ const Popup = styled(Flex)`
   position: absolute;
   width: 228px;
   left: -78px;
-  top: -124px;
+  top: -94px;
   flex-direction: column;
   align-items: center;
   padding: 0.6rem 1rem;
@@ -642,11 +641,6 @@ export default function TransactionDetails(props) {
   const b = text => <Bold>{text}</Bold>
 
   const renderTransactionDetails = () => {
-    ReactGA.event({
-      category: 'TransactionDetail',
-      action: 'Open'
-    })
-
     if (props.independentField === props.INPUT) {
       return props.sending ? (
         <TransactionInfo>

src/components/WalletModal/index.js

 import React, { useState, useEffect } from 'react'
+import ReactGA from 'react-ga'
 import styled from 'styled-components'
 import { isMobile } from 'react-device-detect'
 import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
@@ -155,6 +156,19 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
   }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
 
   const tryActivation = async connector => {
+    let name = ''
+    Object.keys(SUPPORTED_WALLETS).map(key => {
+      if (connector === SUPPORTED_WALLETS[key].connector) {
+        return (name = SUPPORTED_WALLETS[key].name)
+      }
+      return true
+    })
+    // log selected wallet
+    ReactGA.event({
+      category: 'Wallet',
+      action: 'Change Wallet',
+      label: name
+    })
     setPendingWallet(connector) // set wallet for pending view
     setWalletView(WALLET_VIEWS.PENDING)
     activate(connector, undefined, true).catch(e => {

src/index.js

@@ -5,6 +5,7 @@ import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core'
 import { ethers } from 'ethers'
 
 import { NetworkContextName } from './constants'
+import { isMobile } from 'react-device-detect'
 import LocalStorageContextProvider, { Updater as LocalStorageContextUpdater } from './contexts/LocalStorage'
 import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from './contexts/Application'
 import TransactionContextProvider, { Updater as TransactionContextUpdater } from './contexts/Transactions'
@@ -25,9 +26,13 @@ function getLibrary(provider) {
 
 if (process.env.NODE_ENV === 'production') {
   ReactGA.initialize('UA-128182339-1')
+  ReactGA.set({
+    customBrowserType: !isMobile ? 'desktop' : window.web3 || window.ethereum ? 'mobileWeb3' : 'mobileRegular'
+  })
 } else {
   ReactGA.initialize('test', { testMode: true })
 }
+
 ReactGA.pageview(window.location.pathname + window.location.search)
 
 function ContextProviders({ children }) {

src/pages/Pool/AddLiquidity.js

@@ -15,7 +15,7 @@ import { brokenTokens } from '../../constants'
 import { amountFormatter, calculateGasMargin } from '../../utils'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenDetails } from '../../contexts/Tokens'
-import { useAddressBalance, useExchangeReserves } from '../../contexts/Balances'
+import { useAddressBalance, useExchangeReserves, useETHPriceInUSD } from '../../contexts/Balances'
 import { useAddressAllowance } from '../../contexts/Allowances'
 
 const INPUT = 0
@@ -200,6 +200,9 @@ export default function AddLiquidity({ params }) {
   const { t } = useTranslation()
   const { library, account, active } = useWeb3React()
 
+  // BigNumber.js instance
+  const ethPrice = useETHPriceInUSD()
+
   // clear url of query
   useEffect(() => {
     const history = createBrowserHistory()
@@ -296,11 +299,6 @@ export default function AddLiquidity({ params }) {
   }, [reserveETH, reserveToken, decimals])
 
   function renderTransactionDetails() {
-    ReactGA.event({
-      category: 'TransactionDetail',
-      action: 'Open'
-    })
-
     const b = text => <BlueSpan>{text}</BlueSpan>
 
     if (isNewExchange) {
@@ -381,9 +379,15 @@ export default function AddLiquidity({ params }) {
   const addTransaction = useTransactionAdder()
 
   async function onAddLiquidity() {
+    // take ETH amount, multiplied by ETH rate and 2 for total tx size
+    let usdTransactionSize = ethPrice * (inputValueParsed / 1e18) * 2
+
+    // log pool added to and total usd amount
     ReactGA.event({
-      category: 'Pool',
-      action: 'AddLiquidity'
+      category: 'Transaction',
+      action: 'Add Liquidity',
+      label: outputCurrency,
+      value: usdTransactionSize
     })
 
     const deadline = Math.ceil(Date.now() / 1000) + DEADLINE_FROM_NOW

src/pages/Pool/CreateExchange.js

@@ -104,8 +104,8 @@ function CreateExchange({ location, params }) {
 
     factory.createExchange(tokenAddress.address, { gasLimit: estimatedGasLimit }).then(response => {
       ReactGA.event({
-        category: 'Pool',
-        action: 'CreateExchange'
+        category: 'Transaction',
+        action: 'Create Exchange'
       })
 
       addTransaction(response)

src/pages/Pool/RemoveLiquidity.js

@@ -13,7 +13,7 @@ import OversizedPanel from '../../components/OversizedPanel'
 import ArrowDown from '../../assets/svg/SVGArrowDown'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenDetails } from '../../contexts/Tokens'
-import { useAddressBalance } from '../../contexts/Balances'
+import { useAddressBalance, useETHPriceInUSD } from '../../contexts/Balances'
 import { calculateGasMargin, amountFormatter } from '../../utils'
 
 // denominated in bips
@@ -244,10 +244,17 @@ export default function RemoveLiquidity({ params }) {
     }
   }, [fetchPoolTokens, library])
 
+  // BigNumber.js instance
+  const ethPrice = useETHPriceInUSD()
+
   async function onRemoveLiquidity() {
+    // take ETH amount, multiplied by ETH rate and 2 for total tx size
+    let usdTransactionSize = ethPrice * (ethWithdrawn / 1e18) * 2
     ReactGA.event({
-      category: 'Pool',
-      action: 'RemoveLiquidity'
+      category: 'Transaction',
+      action: 'Remove Liquidity',
+      label: outputCurrency,
+      value: usdTransactionSize
     })
 
     const deadline = Math.ceil(Date.now() / 1000) + DEADLINE_FROM_NOW
@@ -271,11 +278,6 @@ export default function RemoveLiquidity({ params }) {
   const b = text => <BlueSpan>{text}</BlueSpan>
 
   function renderTransactionDetails() {
-    ReactGA.event({
-      category: 'TransactionDetail',
-      action: 'Open'
-    })
-
     return (
       <div>
         <div>