Skip to content

Commit db50d1e

Browse files
authored
Update OUSD events and connect events. (#1713)
1 parent b238232 commit db50d1e

File tree

12 files changed

+129
-48
lines changed

12 files changed

+129
-48
lines changed

dapp-oeth/src/components/GetOUSD.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const CustomConnectButton = ({ id, buttonText, className, onClick, style }) => {
9595
}
9696

9797
const GetOUSD = ({ id, buttonText, className, style }) => {
98-
const { isConnected: active } = useAccount()
98+
const { isConnected: active, address, connector } = useAccount()
9999
const [userAlreadyConnectedWallet, setUserAlreadyConnectedWallet] =
100100
useState(false)
101101

@@ -109,6 +109,11 @@ const GetOUSD = ({ id, buttonText, className, style }) => {
109109

110110
if (!userAlreadyConnectedWallet && active) {
111111
localStorage.setItem('userConnectedWallet', 'true')
112+
event({
113+
event: 'connect',
114+
connect_address: address?.slice(2),
115+
connect_wallet: connector?.name.toLowerCase(),
116+
})
112117
}
113118
}, [active])
114119

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
22
import { useStoreState } from 'pullstate'
33

44
import { usePrevious } from 'utils/hooks'
5-
import analytics from 'utils/analytics'
65
import { event } from '../../../lib/gtm'
76
import { assetRootPath } from '../../utils/image'
87

dapp/src/components/AccountStatusDropdown.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import GetOUSD from 'components/GetOUSD'
55
import { isCorrectNetwork } from 'utils/web3'
66
import Content from './_AccountStatusContent'
77
import AccountStatusIndicator from './_AccountStatusIndicator'
8+
import { event } from '../../lib/gtm'
89

910
const AccountStatusDropdown = ({ className }) => {
1011
const { chain } = useNetwork()
@@ -43,6 +44,9 @@ const AccountStatusDropdown = ({ className }) => {
4344
await switchNetwork(correctNetwork)
4445
}
4546
setOpen(true)
47+
event({
48+
event: 'open_account',
49+
})
4650
}}
4751
>
4852
<AccountStatusIndicator

dapp/src/components/ApySelect.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect } from 'react'
22
import Dropdown from 'components/Dropdown'
33
import DownCaret from 'components/DownCaret'
4+
import { event } from '../../lib/gtm'
45

56
const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
67
const [open, setOpen] = useState(false)
@@ -18,6 +19,10 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
1819
e.preventDefault()
1920
setApyDays(days)
2021
setOpen(false)
22+
event({
23+
event: 'change_apy',
24+
change_apy_to: days,
25+
})
2126
}}
2227
>
2328
{`${days}${homepage ? ' days' : 'd'}`}

dapp/src/components/GetOUSD.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import classnames from 'classnames'
33
import { fbt } from 'fbt-runtime'
44
import { ConnectButton } from '@rainbow-me/rainbowkit'
55
import { useAccount } from 'wagmi'
6-
import analytics from 'utils/analytics'
6+
import { event } from '../../lib/gtm'
77

88
const CustomConnectButton = ({
99
id,
@@ -101,8 +101,7 @@ const CustomConnectButton = ({
101101
}
102102

103103
const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
104-
const { isConnected: active } = useAccount()
105-
104+
const { isConnected: active, address, connector } = useAccount()
106105
const [userAlreadyConnectedWallet, setUserAlreadyConnectedWallet] =
107106
useState(false)
108107

@@ -116,6 +115,11 @@ const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
116115

117116
if (!userAlreadyConnectedWallet && active) {
118117
localStorage.setItem('userConnectedWallet', 'true')
118+
event({
119+
event: 'connect',
120+
connect_address: address?.slice(2),
121+
connect_wallet: connector?.name.toLowerCase(),
122+
})
119123
}
120124
}, [active])
121125

@@ -128,10 +132,7 @@ const GetOUSD = ({ id, className, containerClassName, style, trackSource }) => {
128132
style={style}
129133
onClick={() => {
130134
if (process.browser) {
131-
analytics.track('On Connect', {
132-
category: 'general',
133-
label: trackSource,
134-
})
135+
event({ event: 'connect_click' })
135136
}
136137
}}
137138
/>

dapp/src/components/buySell/ApproveSwap.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import withRpcProvider from 'hoc/withRpcProvider'
77
import { ethers } from 'ethers'
88
import withIsMobile from 'hoc/withIsMobile'
99
import ConfirmationModal from './ConfirmationModal'
10+
import { event } from '../../../lib/gtm'
1011
import GetOUSD from '../GetOUSD'
1112

1213
const ApproveSwap = ({
@@ -224,6 +225,11 @@ const ApproveSwap = ({
224225

225226
const startApprovalProcess = async () => {
226227
if (stage === 'approve' && contract) {
228+
event({
229+
event: 'approve_started',
230+
approval_type: isWrapped ? 'wrap' : 'swap',
231+
approval_token: stableCoinToApprove,
232+
})
227233
setStage('waiting-user')
228234
try {
229235
const result = await contract
@@ -243,6 +249,11 @@ const ApproveSwap = ({
243249
coin: stableCoinToApprove,
244250
})
245251
await rpcProvider.waitForTransaction(result.hash)
252+
event({
253+
event: 'approve_complete',
254+
approval_type: isWrapped ? 'wrap' : 'swap',
255+
approval_token: stableCoinToApprove,
256+
})
246257
setIsApproving({})
247258
setStage('done')
248259
} catch (e) {
@@ -251,6 +262,17 @@ const ApproveSwap = ({
251262
setStage('approve')
252263
if (e.code !== 4001) {
253264
await storeTransactionError('approve', stableCoinToApprove)
265+
event({
266+
event: 'approve_failed',
267+
approval_type: isWrapped ? 'wrap' : 'swap',
268+
approval_token: stableCoinToApprove,
269+
})
270+
} else {
271+
event({
272+
event: 'approve_rejected',
273+
approval_type: isWrapped ? 'wrap' : 'swap',
274+
approval_token: stableCoinToApprove,
275+
})
254276
}
255277
}
256278
}

dapp/src/components/buySell/ContractsTable.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { assetRootPath } from 'utils/image'
88
import ContractStore from 'stores/ContractStore'
99
import ConfirmationModal from 'components/buySell/ConfirmationModal'
1010
import Dropdown from 'components/Dropdown'
11+
import { event } from '../../../lib/gtm'
1112

1213
const Info = ({ contract }) => {
1314
const [infoOpen, setInfoOpen] = useState(false)
@@ -372,6 +373,10 @@ const ContractsTable = () => {
372373
s.lastOverride = estimation.name
373374
})
374375
setUserSelectedRoute(estimation.name)
376+
event({
377+
event: 'change_swap_route',
378+
change_route_to: estimation.name,
379+
})
375380
}}
376381
>
377382
<div className="contract-cell contract-name">
@@ -430,6 +435,9 @@ const ContractsTable = () => {
430435
ContractStore.update((s) => {
431436
s.showAllContracts = !showAllContracts
432437
})
438+
if (!showAllContracts) {
439+
event({ event: 'show_swap_routes' })
440+
}
433441
}}
434442
>
435443
{showAllContracts

dapp/src/components/buySell/SettingsDropdown.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react'
22
import { BigNumber } from 'ethers'
33
import Dropdown from 'components/Dropdown'
44
import { fbt } from 'fbt-runtime'
5-
import analytics from 'utils/analytics'
65
import ContractStore from 'stores/ContractStore'
76
import { useStoreState } from 'pullstate'
87
import { assetRootPath } from 'utils/image'
98
import { truncateDecimals } from 'utils/math'
9+
import { event } from '../../../lib/gtm'
1010

1111
const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
1212
const [settingsOpen, setSettingsOpen] = useState(false)
@@ -102,6 +102,11 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
102102
onClick={(e) => {
103103
const newOpenState = !settingsOpen
104104
setSettingsOpen(newOpenState)
105+
if (!settingsOpen) {
106+
event({
107+
event: 'open_settings',
108+
})
109+
}
105110
}}
106111
/>
107112
</Dropdown>

dapp/src/components/buySell/SwapCurrencyPill.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
removeCommas,
1414
} from 'utils/math'
1515
import { assetRootPath } from 'utils/image'
16+
import { event } from '../../../lib/gtm'
1617

1718
const CoinImage = ({ small, coin }) => {
1819
const className = `coin-image`
@@ -381,6 +382,17 @@ const SwapCurrencyPill = ({
381382
selected={showOusd ? 'ousd' : selectedCoin}
382383
onChange={(coin) => {
383384
onSelectChange(coin)
385+
if (swapMode === 'mint') {
386+
event({
387+
event: 'change_input_currency',
388+
change_input_to: coin,
389+
})
390+
} else {
391+
event({
392+
event: 'change_output_currency',
393+
change_output_to: coin,
394+
})
395+
}
384396
}}
385397
options={coinsSelectOptions}
386398
/>

dapp/src/components/buySell/SwapHomepage.js

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import SettingsDropdown from 'components/buySell/SettingsDropdown'
1414
import useSwapEstimator from 'hooks/useSwapEstimator'
1515
import withIsMobile from 'hoc/withIsMobile'
1616
import ApproveSwap from 'components/buySell/ApproveSwap'
17-
import analytics from 'utils/analytics'
1817
import { formatCurrencyMinMaxDecimals, removeCommas } from '../../utils/math'
18+
import { event } from '../../../lib/gtm'
1919

2020
const lastUserSelectedCoinKey = 'last_user_selected_coin'
2121
const lastSelectedSwapModeKey = 'last_user_selected_swap_mode'
@@ -205,14 +205,16 @@ const SwapHomepage = ({
205205
}
206206

207207
const onSwapOusd = async () => {
208-
analytics.track(
209-
swapMode === 'mint' ? 'On Swap to OUSD' : 'On Swap from OUSD',
210-
{
211-
category: 'swap',
212-
label: swapMetadata.stablecoinUsed,
213-
value: swapMetadata.swapAmount,
214-
}
215-
)
208+
const swapTokenUsed =
209+
swapMode === 'mint' ? selectedBuyCoin : selectedRedeemCoin
210+
const swapTokenAmount =
211+
swapMode === 'mint' ? selectedBuyCoinAmount : selectedRedeemCoinAmount
212+
213+
event({
214+
event: 'swap_started',
215+
swap_token: swapTokenUsed,
216+
swap_amount: swapTokenAmount,
217+
})
216218

217219
const metadata = swapMetadata()
218220

@@ -255,23 +257,29 @@ const SwapHomepage = ({
255257
setSelectedRedeemCoinAmount('')
256258

257259
await rpcProvider.waitForTransaction(result.hash)
258-
analytics.track('Swap succeeded', {
259-
category: 'swap',
260-
label: metadata.stablecoinUsed,
261-
value: metadata.swapAmount,
260+
event({
261+
event: 'swap_complete',
262+
swap_type: swapMode,
263+
swap_token: swapTokenUsed,
264+
swap_amount: swapTokenAmount,
262265
})
263266
} catch (e) {
264267
const metadata = swapMetadata()
265268
// 4001 code happens when a user rejects the transaction
266269
if (e.code !== 4001) {
267270
await storeTransactionError(swapMode, selectedBuyCoin)
268-
analytics.track('Swap failed', {
269-
category: 'swap',
270-
label: e.message,
271+
event({
272+
event: 'swap_failed',
273+
swap_type: swapMode,
274+
swap_token: swapTokenUsed,
275+
swap_amount: swapTokenAmount,
271276
})
272277
} else {
273-
analytics.track('Swap canceled', {
274-
category: 'swap',
278+
event({
279+
event: 'swap_rejected',
280+
swap_type: swapMode,
281+
swap_token: swapTokenUsed,
282+
swap_amount: swapTokenAmount,
275283
})
276284
}
277285

@@ -311,6 +319,12 @@ const SwapHomepage = ({
311319
onAmountChange={async (amount) => {
312320
setSelectedBuyCoinAmount(amount)
313321
setSelectedRedeemCoinAmount(amount)
322+
if (amount > 0) {
323+
event({
324+
event: 'change_input_amount',
325+
change_amount_to: amount,
326+
})
327+
}
314328
}}
315329
coinValue={
316330
swapMode === 'mint'

0 commit comments

Comments
 (0)