feat: track zap in/out usage

wBanano · Jan 22, 2023 · 2293a44 · 2293a44
1 parent 17a12a0
commit 2293a44
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/frontend/src/utils/dialogs/FarmDepositDialog.vue b/frontend/src/utils/dialogs/FarmDepositDialog.vue
@@ -89,6 +89,7 @@ import i18n from '@/i18n'
 import { getDexUrl } from '@/config/constants/dex'
 import { openURL } from 'quasar'
 import TokensUtil from '@/utils/TokensUtil'
+import plausible from '@/store/modules/plausible'
 
 const benisStore = namespace('benis')
 const accountsStore = namespace('accounts')
@@ -113,7 +114,7 @@ export default class FarmDepositDialog extends Vue {
 	account!: string
 
 	@accountsStore.State('network')
-	currentBlockchain!: Network
+	network!: Network
 
 	token = { symbol: '', address: '', zap: false }
 	balance = ethers.constants.Zero
@@ -155,7 +156,8 @@ export default class FarmDepositDialog extends Vue {
 		} else {
 			txnHash = await this.benisUtils.deposit(this.farm.pid, this.amount, this.farm.lpSymbol, this.benis)
 		}
-		const blockExplorerUrl = this.currentBlockchain.blockExplorerUrls[0]
+		this.trackEventInPlausible('Farms: Deposit')
+		const blockExplorerUrl = this.network.blockExplorerUrls[0]
 		Dialogs.confirmFarmDeposit(this.amount, this.farm.lpSymbol, txnHash, `${blockExplorerUrl}/tx/${txnHash}`)
 		this.hide()
 		this.$emit('farm-supply', txnHash)
@@ -223,9 +225,12 @@ export default class FarmDepositDialog extends Vue {
 					swapAmountOut //swapAmountOut.mul(9998).div(1000), // 0.2% slippage
 				)
 			}
+			this.trackEventInPlausible('Farms: Zap in', {
+				from: this.token.address ? this.token.symbol : this.network.nativeCurrency,
+			})
 			Dialogs.startFarmZapProgress(this.amount, this.token.symbol)
 			await tx.wait()
-			const blockExplorerUrl = this.currentBlockchain.blockExplorerUrls[0]
+			const blockExplorerUrl = this.network.blockExplorerUrls[0]
 			Dialogs.confirmFarmZapIn(this.amount, this.token.symbol, tx.hash, `${blockExplorerUrl}/tx/${tx.hash}`)
 		} else {
 			const tx = await zap.zapInFromETH(swapAmountOut, { value: amountToZap })
@@ -240,15 +245,15 @@ export default class FarmDepositDialog extends Vue {
 		if (this.farm.quoteToken.address) {
 			const otherToken = this.farm.quoteToken.address[FarmDepositDialog.ENV_NAME as keyof Address]
 			if (getDexUrl() === 'https://app.sushi.com/legacy' || getDexUrl() === 'https://pancakeswap.finance') {
-				openURL(`${getDexUrl()}/add/${this.wbanAddress}/${otherToken}?chainId=${this.currentBlockchain.chainIdNumber}`)
+				openURL(`${getDexUrl()}/add/${this.wbanAddress}/${otherToken}?chainId=${this.network.chainIdNumber}`)
 			} else if (getDexUrl() === 'https://app.uniswap.org') {
 				openURL(`${getDexUrl()}/#/add/v2/${this.wbanAddress}/${otherToken}`)
 			} else {
 				openURL(`${getDexUrl()}/#/add/${this.wbanAddress}/${otherToken}`)
 			}
 		} else {
 			if (getDexUrl() === 'https://app.sushi.com/legacy' || getDexUrl() === 'https://pancakeswap.finance') {
-				openURL(`${getDexUrl()}/add/${this.wbanAddress}/ETH?chainId=${this.currentBlockchain.chainIdNumber}`)
+				openURL(`${getDexUrl()}/add/${this.wbanAddress}/ETH?chainId=${this.network.chainIdNumber}`)
 			} else if (getDexUrl() === 'https://app.uniswap.org') {
 				openURL(`${getDexUrl()}/#/add/v2/${this.wbanAddress}/ETH`)
 			} else {
@@ -278,6 +283,16 @@ export default class FarmDepositDialog extends Vue {
 		}
 	}
 
+	private trackEventInPlausible(name: string, customProps = {}) {
+		plausible.trackEvent(name, {
+			props: {
+				network: this.network.chainName,
+				farm: `${this.farmTokens[1].symbol}-${this.farmTokens[2].symbol}`,
+				...customProps,
+			},
+		})
+	}
+
 	get submitLabel() {
 		if (this.token.zap) {
 			return i18n.t('components.farm.button-zap-in')
@@ -316,6 +331,8 @@ export default class FarmDepositDialog extends Vue {
 	}
 
 	async mounted() {
+		plausible.init()
+
 		const lpAddress = this.farm.lpAddresses[FarmDepositDialog.ENV_NAME as keyof Address]
 		const tokenAddress = this.farm.token.address
 			? this.farm.token.address[FarmDepositDialog.ENV_NAME as keyof Address]

diff --git a/frontend/src/utils/dialogs/FarmWithdrawDialog.vue b/frontend/src/utils/dialogs/FarmWithdrawDialog.vue
@@ -77,6 +77,7 @@ import { formatEther, parseEther } from 'ethers/lib/utils'
 import PermitUtil from '@/utils/PermitUtil'
 import TokenInput from '@/components/farms/TokenInput.vue'
 import TokensUtil from '@/utils/TokensUtil'
+import plausible from '@/store/modules/plausible'
 
 const benisStore = namespace('benis')
 const accountsStore = namespace('accounts')
@@ -97,7 +98,7 @@ export default class FarmWithdrawDialog extends Vue {
 	account!: string
 
 	@accountsStore.State('network')
-	currentBlockchain!: Network
+	network!: Network
 
 	lpSymbol = ''
 	lpStakedBalance = ethers.constants.Zero
@@ -120,7 +121,8 @@ export default class FarmWithdrawDialog extends Vue {
 
 	async withdraw() {
 		const txnHash = await this.benisUtils.withdraw(this.farm.pid, this.lpStakedAmount, this.farm.lpSymbol, this.benis)
-		const blockExplorerUrl = this.currentBlockchain.blockExplorerUrls[0]
+		this.trackEventInPlausible('Farms: Withdraw')
+		const blockExplorerUrl = this.network.blockExplorerUrls[0]
 		Dialogs.confirmFarmWithdraw(this.lpStakedAmount, this.farm.lpSymbol, txnHash, `${blockExplorerUrl}/tx/${txnHash}`)
 		await this.selectToken()
 		this.$emit('farm-withdraw', txnHash)
@@ -159,9 +161,12 @@ export default class FarmWithdrawDialog extends Vue {
 			sig.r,
 			sig.s
 		)
+		this.trackEventInPlausible('Farms: Zap out', {
+			to: this.token.address ? this.token.symbol : this.network.nativeCurrency,
+		})
 		Dialogs.startFarmZapProgress(this.lpAmount, this.lpSymbol)
 		await tx.wait()
-		const blockExplorerUrl = this.currentBlockchain.blockExplorerUrls[0]
+		const blockExplorerUrl = this.network.blockExplorerUrls[0]
 		Dialogs.confirmFarmZapOut(this.lpAmount, this.lpSymbol, tx.hash, `${blockExplorerUrl}/tx/${tx.hash}`)
 		this.hide()
 	}
@@ -214,7 +219,19 @@ export default class FarmWithdrawDialog extends Vue {
 		}
 	}
 
+	private trackEventInPlausible(name: string, customProps = {}) {
+		plausible.trackEvent(name, {
+			props: {
+				network: this.network.chainName,
+				farm: `${this.token1Symbol}-${this.token2Symbol}`,
+				...customProps,
+			},
+		})
+	}
+
 	async mounted() {
+		plausible.init()
+
 		const tokenAddress = this.farm.token.address
 			? this.farm.token.address[FarmWithdrawDialog.ENV_NAME as keyof Address]
 			: ''