diff --git a/components/ActiveStream/index.tsx b/components/ActiveStream/index.tsx index 48f945067..e8d93d0b3 100644 --- a/components/ActiveStream/index.tsx +++ b/components/ActiveStream/index.tsx @@ -335,20 +335,6 @@ const ActiveStream: FC = ({ } }, [escrowedEXA, opts, refetch, tokenId]); - const withdraw = useCallback(async () => { - if (!escrowedEXA || !opts) return; - setLoading(true); - try { - const tx = await escrowedEXA.write.withdrawMax([[BigInt(tokenId)]], opts); - await waitForTransaction({ hash: tx }); - } catch { - // if request fails, don't do anything - } finally { - setLoading(false); - refetch(); - } - }, [escrowedEXA, opts, refetch, tokenId]); - const elapsed = useMemo(() => { const now = Math.floor(Date.now() / 1000); return now - startTime; @@ -363,6 +349,37 @@ const ActiveStream: FC = ({ return (elapsed / duration) * 100; }, [elapsed, duration]); + const handleWithdrawClick = useCallback(async () => { + track('Button Clicked', { + name: 'withdraw', + location: 'Active Stream', + value: progress, + }); + + if (!escrowedEXA || !opts) return; + setLoading(true); + try { + const tx = await escrowedEXA.write.withdrawMax([[BigInt(tokenId)]], opts); + track('TX Signed', { + contractName: 'EscrowedEXA', + method: 'withdrawMax', + hash: tx, + }); + const { status } = await waitForTransaction({ hash: tx }); + track('TX Completed', { + contractName: 'EscrowedEXA', + method: 'withdrawMax', + hash: tx, + status, + }); + } catch { + // if request fails, don't do anything + } finally { + setLoading(false); + refetch(); + } + }, [escrowedEXA, opts, progress, refetch, tokenId]); + const timeLeft = useMemo(() => { const now = Math.floor(Date.now() / 1000); const secondsLeft = endTime - now; @@ -455,7 +472,7 @@ const ActiveStream: FC = ({ data-testid={ progress === 100 ? `vesting-stream-${tokenId}-withdraw` : `vesting-stream-${tokenId}-cancel` } - onClick={() => (progress === 100 ? withdraw() : setCancelModalOpen(true))} + onClick={() => (progress === 100 ? handleWithdrawClick() : setCancelModalOpen(true))} sx={{ cursor: 'pointer' }} > @@ -519,7 +536,7 @@ const ActiveStream: FC = ({ diff --git a/components/VestingInput/index.tsx b/components/VestingInput/index.tsx index 3ecb7c8c3..278ea4583 100644 --- a/components/VestingInput/index.tsx +++ b/components/VestingInput/index.tsx @@ -279,10 +279,15 @@ function VestingInput({ refetch }: Props) { } }, [walletAddress, reserveRatio, vestingPeriod, escrowedEXA, exa, opts, qty, isContract, sign]); - const setMaxBalance = useCallback(() => { + const handleMaxClick = useCallback(() => { if (balance) { setQty(formatEther(balance)); } + track('Button Clicked', { + location: 'Vesting', + name: 'max', + value: formatNumber(formatEther(balance || 0n)), + }); }, [balance]); const onClose = useCallback(() => { @@ -358,7 +363,7 @@ function VestingInput({ refetch }: Props) { {t('Available')}: {formatNumber(formatEther(balance || 0n))} ) : displayNetwork.id !== chain?.id ? ( @@ -448,7 +468,14 @@ function VestingInput({ refetch }: Props) { fullWidth variant="contained" loading={switchIsLoading} - onClick={() => switchNetwork?.(displayNetwork.id)} + onClick={() => { + switchNetwork?.(displayNetwork.id); + track('Button Clicked', { + location: 'Vesting', + name: 'switch network', + value: displayNetwork.name, + }); + }} > {t('Please switch to {{network}} network', { network: displayNetwork.name })} @@ -457,7 +484,15 @@ function VestingInput({ refetch }: Props) { fullWidth variant="contained" loading={isLoading} - onClick={submit} + onClick={() => { + submit(); + track('Button Clicked', { + location: 'Vesting', + name: 'vest', + value: qty, + text: insufficientFunds ? t('Insufficient esEXA balance') : t('Vest esEXA'), + }); + }} data-testid="vesting-submit" disabled={insufficientFunds} > diff --git a/pages/vesting.tsx b/pages/vesting.tsx index 59d1cc29a..4bb37d385 100644 --- a/pages/vesting.tsx +++ b/pages/vesting.tsx @@ -15,6 +15,7 @@ import { useModal } from 'contexts/ModalContext'; import formatNumber from 'utils/formatNumber'; import { formatEther } from 'viem'; import { toPercentage } from 'utils/utils'; +import { track } from 'utils/segment'; const Vesting: NextPage = () => { const { t } = useTranslation(); @@ -36,11 +37,27 @@ const Vesting: NextPage = () => { }, [rewards]); const handleClaimAll = useCallback(async () => { + track('Button Clicked', { + location: 'Vesting', + name: 'withdraw all', + value: activeStreams.length, + }); if (!activeStreams || !escrowedEXA || !opts) return; setLoading(true); try { const tx = await escrowedEXA.write.withdrawMax([activeStreams.map(({ tokenId }) => BigInt(tokenId))], opts); - await waitForTransaction({ hash: tx }); + track('TX Signed', { + contractName: 'EscrowedEXA', + method: 'withdrawMax', + hash: tx, + }); + const { status } = await waitForTransaction({ hash: tx }); + track('TX Completed', { + contractName: 'EscrowedEXA', + method: 'withdrawMax', + hash: tx, + status, + }); } catch { // if request fails, don't do anything } finally { @@ -66,6 +83,13 @@ const Vesting: NextPage = () => { target="_blank" rel="noreferrer noopener" href="https://docs.exact.ly/governance/exactly-token-exa/escrowedexa-esexa" + onClick={() => + track('Button Clicked', { + location: 'Vesting', + name: 'learn more ', + href: 'https://docs.exact.ly/governance/exactly-token-exa/escrowedexa-esexa', + }) + } > {t('Learn more about the esEXA Vesting Program.')} @@ -115,7 +139,13 @@ const Vesting: NextPage = () => { components={{ 1: (