From b42cf0c94815321617c295b7160c3b08e36e76e1 Mon Sep 17 00:00:00 2001 From: viet-nv Date: Mon, 6 Nov 2023 13:46:37 +0700 Subject: [PATCH] fix: add tracking --- src/components/ElasticZap/QuickZap.tsx | 36 +++++++++++++++++++++-- src/hooks/elasticZap/index.ts | 1 + src/pages/AddLiquidityV2/index.tsx | 22 ++++++++++++++ src/pages/IncreaseLiquidity/index.tsx | 22 ++++++++++++++ src/pages/ProAmmPool/PositionListItem.tsx | 12 +++++++- src/pages/ProAmmPools/CardItem.tsx | 12 +++++++- src/pages/ProAmmPools/ListItem.tsx | 13 +++++++- 7 files changed, 113 insertions(+), 5 deletions(-) diff --git a/src/components/ElasticZap/QuickZap.tsx b/src/components/ElasticZap/QuickZap.tsx index 85958d91d5..ec2cb13c42 100644 --- a/src/components/ElasticZap/QuickZap.tsx +++ b/src/components/ElasticZap/QuickZap.tsx @@ -1,8 +1,9 @@ import { FeeAmount, Pool, Position } from '@kyberswap/ks-sdk-elastic' import { Trans } from '@lingui/macro' import { BigNumber } from 'ethers' +import mixpanel from 'mixpanel-browser' import { rgba } from 'polished' -import { ReactElement, useMemo, useState } from 'react' +import { ReactElement, useEffect, useMemo, useState } from 'react' import { Flex, Text } from 'rebass' import styled from 'styled-components' @@ -231,6 +232,20 @@ function QuickZapModal({ isOpen, onDismiss, poolAddress, tokenId, expectedChainI const debouncedValue = useDebounce(typedValue, 300) const amountIn = useParsedAmount(selectedCurrency, debouncedValue) + + useEffect(() => { + if (amountIn?.toExact()) { + mixpanel.track('Zap - Input detailed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: tokenId ? 'my_pool_page' : 'pool_page', + }) + } + // eslint-disable-next-line + }, [amountIn?.toExact(), selectedCurrency]) + const equivalentQuoteAmount = amountIn && pool && selectedCurrency && amountIn.multiply(pool.priceOf(selectedCurrency.wrapped)) @@ -376,6 +391,13 @@ function QuickZapModal({ isOpen, onDismiss, poolAddress, tokenId, expectedChainI }) setAttempingTx(false) + mixpanel.track('Zap - Confirmed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: tokenId ? 'my_pool_page' : 'pool_page', + }) } catch (e) { setAttempingTx(false) setError(e?.message || JSON.stringify(e)) @@ -545,7 +567,17 @@ function QuickZapModal({ isOpen, onDismiss, poolAddress, tokenId, expectedChainI - + { + mixpanel.track('Zap - Canceled', { + source: tokenId ? 'my_pool_page' : 'pool_page', + token0: pool?.token0.symbol, + token1: pool?.token1.symbol, + zap_token: selectedCurrency?.symbol, + }) + onDismiss() + }} + > Cancel diff --git a/src/hooks/elasticZap/index.ts b/src/hooks/elasticZap/index.ts index 83a3fd6a3e..29450bc701 100644 --- a/src/hooks/elasticZap/index.ts +++ b/src/hooks/elasticZap/index.ts @@ -172,6 +172,7 @@ export function useZapInPoolResult(params?: { } }, [data, loadingAggregator, aggregatorOutputs, params]) + console.debug('Zap: best return from zap helper ', bestRes) return bestRes } diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index 2ce9bff4db..c0d94c5238 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/src/pages/AddLiquidityV2/index.tsx @@ -12,6 +12,7 @@ import { import { Trans, t } from '@lingui/macro' import { BigNumber } from 'ethers' import JSBI from 'jsbi' +import mixpanel from 'mixpanel-browser' import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { AlertTriangle, Repeat } from 'react-feather' import { Navigate, useNavigate, useParams, useSearchParams } from 'react-router-dom' @@ -1044,6 +1045,19 @@ export default function AddLiquidity() { const debouncedValue = useDebounce(zapValue, 300) const amountIn = useParsedAmount(selectedCurrency, debouncedValue) + useEffect(() => { + if (amountIn?.toExact()) { + mixpanel.track('Zap - Input detailed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: 'add_liquidity_page', + }) + } + // eslint-disable-next-line + }, [amountIn?.toExact(), selectedCurrency]) + const equivalentQuoteAmount = amountIn && pool && selectedCurrency && amountIn.multiply(pool.priceOf(selectedCurrency.wrapped)) @@ -1187,6 +1201,14 @@ export default function AddLiquidity() { }, }, }) + + mixpanel.track('Zap - Confirmed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: 'add_liquidity_page', + }) } catch (e) { console.error('zap error', e) setAttemptingTxn(false) diff --git a/src/pages/IncreaseLiquidity/index.tsx b/src/pages/IncreaseLiquidity/index.tsx index 231891ae24..c5da486433 100644 --- a/src/pages/IncreaseLiquidity/index.tsx +++ b/src/pages/IncreaseLiquidity/index.tsx @@ -4,6 +4,7 @@ import { FeeAmount, NonfungiblePositionManager } from '@kyberswap/ks-sdk-elastic import { Trans, t } from '@lingui/macro' import { BigNumber } from 'ethers' import JSBI from 'jsbi' +import mixpanel from 'mixpanel-browser' import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react' import { AlertTriangle } from 'react-feather' import { Link, Navigate, useNavigate, useParams } from 'react-router-dom' @@ -473,6 +474,19 @@ export default function IncreaseLiquidity() { const debouncedValue = useDebounce(value, 300) const amountIn = useParsedAmount(selectedCurrency, debouncedValue) + useEffect(() => { + if (amountIn?.toExact()) { + mixpanel.track('Zap - Input detailed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: 'increase_liquidity_page', + }) + } + // eslint-disable-next-line + }, [amountIn?.toExact(), selectedCurrency]) + const equivalentQuoteAmount = amountIn && pool && selectedCurrency && amountIn.multiply(pool.priceOf(selectedCurrency.wrapped)) @@ -598,6 +612,14 @@ export default function IncreaseLiquidity() { }, }, }) + + mixpanel.track('Zap - Confirmed', { + token0: selectedCurrency?.symbol, + token1: quoteCurrency?.symbol, + zap_token: selectedCurrency?.symbol, + token_amount: amountIn.toExact(), + source: 'increase_liquidity_page', + }) } catch (e) { console.error('zap error', e) setAttemptingTxn(false) diff --git a/src/pages/ProAmmPool/PositionListItem.tsx b/src/pages/ProAmmPool/PositionListItem.tsx index 10366542d4..f6fcdbd202 100644 --- a/src/pages/ProAmmPool/PositionListItem.tsx +++ b/src/pages/ProAmmPool/PositionListItem.tsx @@ -2,6 +2,7 @@ import { Currency, CurrencyAmount, Price, Token } from '@kyberswap/ks-sdk-core' import { Position } from '@kyberswap/ks-sdk-elastic' import { Trans, t } from '@lingui/macro' import { BigNumber } from 'ethers' +import mixpanel from 'mixpanel-browser' import { stringify } from 'querystring' import React, { useEffect, useMemo, useState } from 'react' import { Link } from 'react-router-dom' @@ -483,7 +484,16 @@ function PositionListItem({ - setShowQuickZap(true)} /> + { + setShowQuickZap(true) + mixpanel.track('Zap - Click Quick Zap', { + token0: token0?.symbol || '', + token1: token1?.symbol || '', + source: 'my_pool_page', + }) + }} + /> )} diff --git a/src/pages/ProAmmPools/CardItem.tsx b/src/pages/ProAmmPools/CardItem.tsx index 7c782d5ab9..f9a3b55e48 100644 --- a/src/pages/ProAmmPools/CardItem.tsx +++ b/src/pages/ProAmmPools/CardItem.tsx @@ -1,5 +1,6 @@ import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' +import mixpanel from 'mixpanel-browser' import { useMemo, useState } from 'react' import { BarChart2, MoreHorizontal, Plus, Share2 } from 'react-feather' import { Link, useNavigate } from 'react-router-dom' @@ -271,7 +272,16 @@ export default function ProAmmPoolCardItem({ pool, onShared, userPositions }: Li - setShowQuickZap(true)} /> + { + setShowQuickZap(true) + mixpanel.track('Zap - Click Quick Zap', { + token0: token0?.symbol || '', + token1: token1?.symbol || '', + source: 'pool_page', + }) + }} + /> ) diff --git a/src/pages/ProAmmPools/ListItem.tsx b/src/pages/ProAmmPools/ListItem.tsx index 57f44cb10b..f1dde78c50 100644 --- a/src/pages/ProAmmPools/ListItem.tsx +++ b/src/pages/ProAmmPools/ListItem.tsx @@ -1,5 +1,6 @@ import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core' import { Trans, t } from '@lingui/macro' +import mixpanel from 'mixpanel-browser' import { rgba } from 'polished' import { useState } from 'react' import { BarChart2, Plus, Share2 } from 'react-feather' @@ -232,7 +233,17 @@ export default function ProAmmPoolListItem({ pool, onShared, userPositions }: Li {myLiquidity ? formatDollarAmount(Number(myLiquidity)) : '-'} - setShowQuickZap(true)} size="small" /> + { + mixpanel.track('Zap - Click Quick Zap', { + token0: token0?.symbol || '', + token1: token1?.symbol || '', + source: 'pool_page', + }) + setShowQuickZap(true) + }} + size="small" + /> Add liquidity } placement={'top'} width={'fit-content'}>