Update OUSD events and connect events.

dapp-oeth/src/components/GetOUSD.js

@@ -95,7 +95,7 @@ const CustomConnectButton = ({ id, buttonText, className, onClick, style }) => {
 }
 
 const GetOUSD = ({ id, buttonText, className, style }) => {
-  const { isConnected: active } = useAccount()
+  const { isConnected: active, address, connector } = useAccount()
   const [userAlreadyConnectedWallet, setUserAlreadyConnectedWallet] =
     useState(false)
 
@@ -109,6 +109,11 @@ const GetOUSD = ({ id, buttonText, className, style }) => {
 
     if (!userAlreadyConnectedWallet && active) {
       localStorage.setItem('userConnectedWallet', 'true')
+      event({
+        event: 'connect',
+        connect_address: address?.slice(2),
+        connect_wallet: connector?.name.toLowerCase(),
+      })
     }
   }, [active])
 

dapp-oeth/src/components/buySell/_PillArrow.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import { useStoreState } from 'pullstate'
 
 import { usePrevious } from 'utils/hooks'
-import analytics from 'utils/analytics'
 import { event } from '../../../lib/gtm'
 import { assetRootPath } from '../../utils/image'
 

dapp/src/components/AccountStatusDropdown.js

@@ -5,6 +5,7 @@ import GetOUSD from 'components/GetOUSD'
 import { isCorrectNetwork } from 'utils/web3'
 import Content from './_AccountStatusContent'
 import AccountStatusIndicator from './_AccountStatusIndicator'
+import { event } from '../../lib/gtm'
 
 const AccountStatusDropdown = ({ className }) => {
   const { chain } = useNetwork()
@@ -43,6 +44,9 @@ const AccountStatusDropdown = ({ className }) => {
                 await switchNetwork(correctNetwork)
               }
               setOpen(true)
+              event({
+                event: 'open_account',
+              })
             }}
           >
             <AccountStatusIndicator

dapp/src/components/ApySelect.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import Dropdown from 'components/Dropdown'
 import DownCaret from 'components/DownCaret'
+import { event } from '../../lib/gtm'
 
 const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
   const [open, setOpen] = useState(false)
@@ -18,6 +19,10 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
                     e.preventDefault()
                     setApyDays(days)
                     setOpen(false)
+                    event({
+                      event: 'change_apy',
+                      change_apy_to: days,
+                    })
                   }}
                 >
                   {`${days}${homepage ? ' days' : 'd'}`}

dapp/src/components/GetOUSD.js

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { fbt } from 'fbt-runtime'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { useAccount } from 'wagmi'
-import analytics from 'utils/analytics'
+import { event } from '../../lib/gtm'
 
 const CustomConnectButton = ({
   id,
@@ -101,8 +101,7 @@ const CustomConnectButton = ({
 }
 
 const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
-  const { isConnected: active } = useAccount()
-
+  const { isConnected: active, address, connector } = useAccount()
   const [userAlreadyConnectedWallet, setUserAlreadyConnectedWallet] =
     useState(false)
 
@@ -116,6 +115,11 @@ const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
 
     if (!userAlreadyConnectedWallet && active) {
       localStorage.setItem('userConnectedWallet', 'true')
+      event({
+        event: 'connect',
+        connect_address: address?.slice(2),
+        connect_wallet: connector?.name.toLowerCase(),
+      })
     }
   }, [active])
 
@@ -128,10 +132,7 @@ const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
         style={style}
         onClick={() => {
           if (process.browser) {
-            analytics.track('On Connect', {
-              category: 'general',
-              label: trackSource,
-            })
+            event({ event: 'connect_click' })
           }
         }}
       />

dapp/src/components/buySell/ApproveSwap.js

@@ -7,6 +7,7 @@ import withRpcProvider from 'hoc/withRpcProvider'
 import { ethers } from 'ethers'
 import withIsMobile from 'hoc/withIsMobile'
 import ConfirmationModal from './ConfirmationModal'
+import { event } from '../../../lib/gtm'
 import GetOUSD from '../GetOUSD'
 
 const ApproveSwap = ({
@@ -224,6 +225,11 @@ const ApproveSwap = ({
 
   const startApprovalProcess = async () => {
     if (stage === 'approve' && contract) {
+      event({
+        event: 'approve_started',
+        approval_type: isWrapped ? 'wrap' : 'swap',
+        approval_token: stableCoinToApprove,
+      })
       setStage('waiting-user')
       try {
         const result = await contract
@@ -243,6 +249,11 @@ const ApproveSwap = ({
           coin: stableCoinToApprove,
         })
         await rpcProvider.waitForTransaction(result.hash)
+        event({
+          event: 'approve_complete',
+          approval_type: isWrapped ? 'wrap' : 'swap',
+          approval_token: stableCoinToApprove,
+        })
         setIsApproving({})
         setStage('done')
       } catch (e) {
@@ -251,6 +262,17 @@ const ApproveSwap = ({
         setStage('approve')
         if (e.code !== 4001) {
           await storeTransactionError('approve', stableCoinToApprove)
+          event({
+            event: 'approve_failed',
+            approval_type: isWrapped ? 'wrap' : 'swap',
+            approval_token: stableCoinToApprove,
+          })
+        } else {
+          event({
+            event: 'approve_rejected',
+            approval_type: isWrapped ? 'wrap' : 'swap',
+            approval_token: stableCoinToApprove,
+          })
         }
       }
     }

dapp/src/components/buySell/ContractsTable.js

@@ -8,6 +8,7 @@ import { assetRootPath } from 'utils/image'
 import ContractStore from 'stores/ContractStore'
 import ConfirmationModal from 'components/buySell/ConfirmationModal'
 import Dropdown from 'components/Dropdown'
+import { event } from '../../../lib/gtm'
 
 const Info = ({ contract }) => {
   const [infoOpen, setInfoOpen] = useState(false)
@@ -372,6 +373,10 @@ const ContractsTable = () => {
                   s.lastOverride = estimation.name
                 })
                 setUserSelectedRoute(estimation.name)
+                event({
+                  event: 'change_swap_route',
+                  change_route_to: estimation.name,
+                })
               }}
             >
               <div className="contract-cell contract-name">
@@ -430,6 +435,9 @@ const ContractsTable = () => {
             ContractStore.update((s) => {
               s.showAllContracts = !showAllContracts
             })
+            if (!showAllContracts) {
+              event({ event: 'show_swap_routes' })
+            }
           }}
         >
           {showAllContracts

dapp/src/components/buySell/SettingsDropdown.js

@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { BigNumber } from 'ethers'
 import Dropdown from 'components/Dropdown'
 import { fbt } from 'fbt-runtime'
-import analytics from 'utils/analytics'
 import ContractStore from 'stores/ContractStore'
 import { useStoreState } from 'pullstate'
 import { assetRootPath } from 'utils/image'
 import { truncateDecimals } from 'utils/math'
+import { event } from '../../../lib/gtm'
 
 const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
   const [settingsOpen, setSettingsOpen] = useState(false)
@@ -102,6 +102,11 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
           onClick={(e) => {
             const newOpenState = !settingsOpen
             setSettingsOpen(newOpenState)
+            if (!settingsOpen) {
+              event({
+                event: 'open_settings',
+              })
+            }
           }}
         />
       </Dropdown>

dapp/src/components/buySell/SwapCurrencyPill.js

@@ -13,6 +13,7 @@ import {
   removeCommas,
 } from 'utils/math'
 import { assetRootPath } from 'utils/image'
+import { event } from '../../../lib/gtm'
 
 const CoinImage = ({ small, coin }) => {
   const className = `coin-image`
@@ -381,6 +382,17 @@ const SwapCurrencyPill = ({
               selected={showOusd ? 'ousd' : selectedCoin}
               onChange={(coin) => {
                 onSelectChange(coin)
+                if (swapMode === 'mint') {
+                  event({
+                    event: 'change_input_currency',
+                    change_input_to: coin,
+                  })
+                } else {
+                  event({
+                    event: 'change_output_currency',
+                    change_output_to: coin,
+                  })
+                }
               }}
               options={coinsSelectOptions}
             />

dapp/src/components/buySell/SwapHomepage.js

@@ -14,8 +14,8 @@ import SettingsDropdown from 'components/buySell/SettingsDropdown'
 import useSwapEstimator from 'hooks/useSwapEstimator'
 import withIsMobile from 'hoc/withIsMobile'
 import ApproveSwap from 'components/buySell/ApproveSwap'
-import analytics from 'utils/analytics'
 import { formatCurrencyMinMaxDecimals, removeCommas } from '../../utils/math'
+import { event } from '../../../lib/gtm'
 
 const lastUserSelectedCoinKey = 'last_user_selected_coin'
 const lastSelectedSwapModeKey = 'last_user_selected_swap_mode'
@@ -205,14 +205,16 @@ const SwapHomepage = ({
   }
 
   const onSwapOusd = async () => {
-    analytics.track(
-      swapMode === 'mint' ? 'On Swap to OUSD' : 'On Swap from OUSD',
-      {
-        category: 'swap',
-        label: swapMetadata.stablecoinUsed,
-        value: swapMetadata.swapAmount,
-      }
-    )
+    const swapTokenUsed =
+      swapMode === 'mint' ? selectedBuyCoin : selectedRedeemCoin
+    const swapTokenAmount =
+      swapMode === 'mint' ? selectedBuyCoinAmount : selectedRedeemCoinAmount
+
+    event({
+      event: 'swap_started',
+      swap_token: swapTokenUsed,
+      swap_amount: swapTokenAmount,
+    })
 
     const metadata = swapMetadata()
 
@@ -255,23 +257,29 @@ const SwapHomepage = ({
       setSelectedRedeemCoinAmount('')
 
       await rpcProvider.waitForTransaction(result.hash)
-      analytics.track('Swap succeeded', {
-        category: 'swap',
-        label: metadata.stablecoinUsed,
-        value: metadata.swapAmount,
+      event({
+        event: 'swap_complete',
+        swap_type: swapMode,
+        swap_token: swapTokenUsed,
+        swap_amount: swapTokenAmount,
       })
     } catch (e) {
       const metadata = swapMetadata()
       // 4001 code happens when a user rejects the transaction
       if (e.code !== 4001) {
         await storeTransactionError(swapMode, selectedBuyCoin)
-        analytics.track('Swap failed', {
-          category: 'swap',
-          label: e.message,
+        event({
+          event: 'swap_failed',
+          swap_type: swapMode,
+          swap_token: swapTokenUsed,
+          swap_amount: swapTokenAmount,
         })
       } else {
-        analytics.track('Swap canceled', {
-          category: 'swap',
+        event({
+          event: 'swap_rejected',
+          swap_type: swapMode,
+          swap_token: swapTokenUsed,
+          swap_amount: swapTokenAmount,
         })
       }
 
@@ -311,6 +319,12 @@ const SwapHomepage = ({
               onAmountChange={async (amount) => {
                 setSelectedBuyCoinAmount(amount)
                 setSelectedRedeemCoinAmount(amount)
+                if (amount > 0) {
+                  event({
+                    event: 'change_input_amount',
+                    change_amount_to: amount,
+                  })
+                }
               }}
               coinValue={
                 swapMode === 'mint'

dapp/src/components/buySell/_PillArrow.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useStoreState } from 'pullstate'
-
 import { usePrevious } from 'utils/hooks'
-import analytics from 'utils/analytics'
+import { event } from '../../../lib/gtm'
 
 const DownCaret = ({ swapMode, disableRotation, color = '#8293a4' }) => {
   return (
@@ -57,6 +56,7 @@ const PillArrow = ({ swapMode, setSwapMode }) => {
           className="caret-background position-absolute d-flex align-items-center justify-content-center"
           onClick={() => {
             setSwapMode(swapMode === 'mint' ? 'redeem' : 'mint')
+            event({ event: 'change_input_output' })
           }}
         >
           <DownCaret disableRotation swapMode={swapMode} />