diff --git a/dapp-oeth/src/components/GetOUSD.js b/dapp-oeth/src/components/GetOUSD.js index e295aef8cb..0c66c36030 100644 --- a/dapp-oeth/src/components/GetOUSD.js +++ b/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]) diff --git a/dapp-oeth/src/components/buySell/_PillArrow.js b/dapp-oeth/src/components/buySell/_PillArrow.js index 3e9f8cfffa..9c6c8bbf5d 100644 --- a/dapp-oeth/src/components/buySell/_PillArrow.js +++ b/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' diff --git a/dapp/src/components/AccountStatusDropdown.js b/dapp/src/components/AccountStatusDropdown.js index f48e412b1e..ff285936c0 100644 --- a/dapp/src/components/AccountStatusDropdown.js +++ b/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', + }) }} > { 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'}`} diff --git a/dapp/src/components/GetOUSD.js b/dapp/src/components/GetOUSD.js index d46dab7a53..2ec1fa92dc 100644 --- a/dapp/src/components/GetOUSD.js +++ b/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' }) } }} /> diff --git a/dapp/src/components/buySell/ApproveSwap.js b/dapp/src/components/buySell/ApproveSwap.js index a5d95daf9c..e1a46097e4 100644 --- a/dapp/src/components/buySell/ApproveSwap.js +++ b/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, + }) } } } diff --git a/dapp/src/components/buySell/ContractsTable.js b/dapp/src/components/buySell/ContractsTable.js index 1b33e8f7fd..9f7b96f0e5 100644 --- a/dapp/src/components/buySell/ContractsTable.js +++ b/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, + }) }} >
@@ -430,6 +435,9 @@ const ContractsTable = () => { ContractStore.update((s) => { s.showAllContracts = !showAllContracts }) + if (!showAllContracts) { + event({ event: 'show_swap_routes' }) + } }} > {showAllContracts diff --git a/dapp/src/components/buySell/SettingsDropdown.js b/dapp/src/components/buySell/SettingsDropdown.js index 5fc8b4f46b..efcce9328e 100644 --- a/dapp/src/components/buySell/SettingsDropdown.js +++ b/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', + }) + } }} /> diff --git a/dapp/src/components/buySell/SwapCurrencyPill.js b/dapp/src/components/buySell/SwapCurrencyPill.js index 346a2414a2..3902709137 100644 --- a/dapp/src/components/buySell/SwapCurrencyPill.js +++ b/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} /> diff --git a/dapp/src/components/buySell/SwapHomepage.js b/dapp/src/components/buySell/SwapHomepage.js index 31556c0e82..9d0c557269 100644 --- a/dapp/src/components/buySell/SwapHomepage.js +++ b/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' diff --git a/dapp/src/components/buySell/_PillArrow.js b/dapp/src/components/buySell/_PillArrow.js index 1dddc3d668..233224a5bb 100644 --- a/dapp/src/components/buySell/_PillArrow.js +++ b/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' }) }} > diff --git a/dapp/src/components/wrap/WrapHomepage.js b/dapp/src/components/wrap/WrapHomepage.js index d6005b7a79..ac2910a234 100644 --- a/dapp/src/components/wrap/WrapHomepage.js +++ b/dapp/src/components/wrap/WrapHomepage.js @@ -12,8 +12,8 @@ import withIsMobile from 'hoc/withIsMobile' import usePrevious from 'utils/usePrevious' import ApproveSwap from 'components/buySell/ApproveSwap' import { useAccount, useSigner } from 'wagmi' -import analytics from 'utils/analytics' import { displayCurrency, calculateSwapAmounts } from '../../utils/math' +import { event } from '../../../lib/gtm' const lastSelectedSwapModeKey = 'last_user_selected_wrap_mode' @@ -151,14 +151,14 @@ const WrapHomepage = ({ } const onWrapOusd = async () => { - analytics.track( - swapMode === 'mint' ? 'On Wrap to wOUSD' : 'On Unwrap from wOUSD', - { - category: 'wrap', - label: swapMetadata.coinUsed, - value: swapMetadata.swapAmount, - } - ) + const wrapTokenUsed = swapMode === 'mint' ? 'wousd' : 'ousd' + const wrapTokenAmount = swapMode === 'mint' ? inputAmount : wrapEstimate + // mint = wrap + event({ + event: 'wrap_started', + wrap_token: wrapTokenUsed, + wrap_amount: wrapTokenAmount, + }) const metadata = swapMetadata() @@ -190,23 +190,29 @@ const WrapHomepage = ({ setInputAmount('') await rpcProvider.waitForTransaction(result.hash) - analytics.track('Wrap succeeded', { - category: 'wrap', - label: metadata.coinUsed, - value: metadata.swapAmount, + event({ + event: 'wrap_complete', + wrap_type: swapMode, + wrap_token: wrapTokenUsed, + wrap_amount: wrapTokenAmount, }) } catch (e) { const metadata = swapMetadata() // 4001 code happens when a user rejects the transaction if (e.code !== 4001) { await storeTransactionError(swapMode, 'ousd') - analytics.track('Wrap failed', { - category: 'wrap', - label: e.message, + event({ + event: 'wrap_failed', + wrap_type: swapMode, + wrap_token: wrapTokenUsed, + wrap_amount: wrapTokenAmount, }) } else { - analytics.track('Wrap canceled', { - category: 'wrap', + event({ + event: 'wrap_rejected', + wrap_type: swapMode, + wrap_token: wrapTokenUsed, + wrap_amount: wrapTokenAmount, }) }