From 65a49c22eb0a01d388c4cd99c0dccfcaf26894ac Mon Sep 17 00:00:00 2001 From: Majorfi Date: Tue, 6 Aug 2024 15:58:36 +0200 Subject: [PATCH] feat: plausible --- apps/common/utils/plausible.ts | 4 + .../details/actions/QuickActionsButtons.tsx | 125 ++++++++++++------ 2 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 apps/common/utils/plausible.ts diff --git a/apps/common/utils/plausible.ts b/apps/common/utils/plausible.ts new file mode 100644 index 000000000..e8762fe03 --- /dev/null +++ b/apps/common/utils/plausible.ts @@ -0,0 +1,4 @@ +export const PLAUSIBLE_EVENTS = { + DEPOSIT: 'deposit', + WITHDRAW: 'withdraw' +}; diff --git a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx index bd311e402..e915a7610 100644 --- a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx +++ b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx @@ -1,5 +1,6 @@ import {useCallback, useState} from 'react'; import {useRouter} from 'next/router'; +import {usePlausible} from 'next-plausible'; import {useWeb3} from '@builtbymom/web3/contexts/useWeb3'; import {useAsyncTrigger} from '@builtbymom/web3/hooks/useAsyncTrigger'; import {isZero, toAddress, toBigInt, zeroNormalizedBN} from '@builtbymom/web3/utils'; @@ -10,12 +11,14 @@ import {Solver} from '@vaults/types/solvers'; import {Button} from '@yearn-finance/web-lib/components/Button'; import {ETH_TOKEN_ADDRESS, MAX_UINT_256} from '@yearn-finance/web-lib/utils/constants'; import {useYearn} from '@common/contexts/useYearn'; +import {PLAUSIBLE_EVENTS} from '@common/utils/plausible'; import type {ReactElement} from 'react'; import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas'; import type {TNormalizedBN} from '@builtbymom/web3/types'; export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: TYDaemonVault}): ReactElement { + const plausible = usePlausible(); const {onRefresh, isAutoStakingEnabled} = useYearn(); const {address, provider} = useWeb3(); const [txStatusApprove, set_txStatusApprove] = useState(defaultTxStatus); @@ -50,49 +53,79 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T ** refreshes the vaults, the staking contract if available and the user's wallet balances ** on the from and to tokens. *********************************************************************************************/ - const onSuccess = useCallback(async (): Promise => { - const {chainID} = currentVault; - onChangeAmount(zeroNormalizedBN); - if ( - Solver.enum.Vanilla === currentSolver || - Solver.enum.PartnerContract === currentSolver || - Solver.enum.OptimismBooster === currentSolver || - Solver.enum.GaugeStakingBooster === currentSolver || - Solver.enum.JuicedStakingBooster === currentSolver || - Solver.enum.V3StakingBooster === currentSolver || - Solver.enum.InternalMigration === currentSolver - ) { - const toRefresh = [ - {address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}, - {address: toAddress(actionParams?.selectedOptionTo?.value), chainID}, - {address: toAddress(currentVault.address), chainID} - ]; - if (currentVault.staking.available) { - toRefresh.push({address: toAddress(currentVault.staking.address), chainID}); + const onSuccess = useCallback( + async (isDeposit: boolean): Promise => { + const {chainID} = currentVault; + if (isDeposit) { + plausible(PLAUSIBLE_EVENTS.DEPOSIT, { + props: { + vaultAddress: currentVault.address, + vaultSymbol: currentVault.symbol, + amountToDeposit: actionParams.amount?.display, + tokenAddress: actionParams?.selectedOptionFrom?.value, + tokenSymbol: actionParams?.selectedOptionFrom?.symbol, + isZap: Solver.enum.Cowswap === currentSolver || Solver.enum.Portals === currentSolver + } + }); + } else { + plausible(PLAUSIBLE_EVENTS.WITHDRAW, { + props: { + vaultAddress: currentVault.address, + vaultSymbol: currentVault.symbol, + sharesToWithdraw: actionParams.amount?.display, + tokenAddress: actionParams?.selectedOptionFrom?.value, + tokenSymbol: actionParams?.selectedOptionFrom?.symbol, + isZap: Solver.enum.Cowswap === currentSolver || Solver.enum.Portals === currentSolver + } + }); } - await onRefresh(toRefresh); - } else if (Solver.enum.Cowswap === currentSolver || Solver.enum.Portals === currentSolver) { - if (isDepositing) { - onRefresh([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}]); + + if ( + Solver.enum.Vanilla === currentSolver || + Solver.enum.PartnerContract === currentSolver || + Solver.enum.OptimismBooster === currentSolver || + Solver.enum.GaugeStakingBooster === currentSolver || + Solver.enum.JuicedStakingBooster === currentSolver || + Solver.enum.V3StakingBooster === currentSolver || + Solver.enum.InternalMigration === currentSolver + ) { + const toRefresh = [ + {address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}, + {address: toAddress(actionParams?.selectedOptionTo?.value), chainID}, + {address: toAddress(currentVault.address), chainID} + ]; + if (currentVault.staking.available) { + toRefresh.push({address: toAddress(currentVault.staking.address), chainID}); + } + await onRefresh(toRefresh); + } else if (Solver.enum.Cowswap === currentSolver || Solver.enum.Portals === currentSolver) { + if (isDepositing) { + onRefresh([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}]); + } else { + onRefresh([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}]); + } } else { - onRefresh([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}]); + onRefresh([ + {address: toAddress(ETH_TOKEN_ADDRESS), chainID}, + {address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}, + {address: toAddress(actionParams?.selectedOptionTo?.value), chainID} + ]); } - } else { - onRefresh([ - {address: toAddress(ETH_TOKEN_ADDRESS), chainID}, - {address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}, - {address: toAddress(actionParams?.selectedOptionTo?.value), chainID} - ]); - } - }, [ - currentVault, - onChangeAmount, - currentSolver, - actionParams?.selectedOptionFrom?.value, - actionParams?.selectedOptionTo?.value, - onRefresh, - isDepositing - ]); + onChangeAmount(zeroNormalizedBN); + }, + [ + currentVault, + onChangeAmount, + currentSolver, + plausible, + actionParams.amount?.display, + actionParams?.selectedOptionFrom?.value, + actionParams?.selectedOptionFrom?.symbol, + actionParams?.selectedOptionTo?.value, + onRefresh, + isDepositing + ] + ); /********************************************************************************************** ** Trigger an approve web3 action, simply trying to approve `amount` tokens to be used by the @@ -171,7 +204,9 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T return (