fix: add tracking

KyberNetwork · Nov 6, 2023 · b42cf0c · b42cf0c
1 parent d2acde1
commit b42cf0c
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 5 deletions.
diff --git 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
               </Overlay>
 
               <Flex sx={{ gap: '1rem' }} marginTop="1.25rem">
-                <ButtonOutlined onClick={onDismiss}>
+                <ButtonOutlined
+                  onClick={() => {
+                    mixpanel.track('Zap - Canceled', {
+                      source: tokenId ? 'my_pool_page' : 'pool_page',
+                      token0: pool?.token0.symbol,
+                      token1: pool?.token1.symbol,
+                      zap_token: selectedCurrency?.symbol,
+                    })
+                    onDismiss()
+                  }}
+                >
                   <Trans>Cancel</Trans>
                 </ButtonOutlined>
 

diff --git 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
@@ -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
@@ -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
@@ -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({
                 </Text>
               </ButtonPrimary>
 
-              <QuickZapButton onClick={() => setShowQuickZap(true)} />
+              <QuickZapButton
+                onClick={() => {
+                  setShowQuickZap(true)
+                  mixpanel.track('Zap - Click Quick Zap', {
+                    token0: token0?.symbol || '',
+                    token1: token1?.symbol || '',
+                    source: 'my_pool_page',
+                  })
+                }}
+              />
             </ButtonGroup>
           )}
           <Divider sx={{ marginBottom: '20px' }} />

diff --git 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
           </Text>
         </ButtonLight>
 
-        <QuickZapButton onClick={() => setShowQuickZap(true)} />
+        <QuickZapButton
+          onClick={() => {
+            setShowQuickZap(true)
+            mixpanel.track('Zap - Click Quick Zap', {
+              token0: token0?.symbol || '',
+              token1: token1?.symbol || '',
+              source: 'pool_page',
+            })
+          }}
+        />
       </Flex>
     </Wrapper>
   )

diff --git 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
       </DataText>
       <DataText alignItems="flex-end">{myLiquidity ? formatDollarAmount(Number(myLiquidity)) : '-'}</DataText>
       <ButtonWrapper>
-        <QuickZapButton onClick={() => setShowQuickZap(true)} size="small" />
+        <QuickZapButton
+          onClick={() => {
+            mixpanel.track('Zap - Click Quick Zap', {
+              token0: token0?.symbol || '',
+              token1: token1?.symbol || '',
+              source: 'pool_page',
+            })
+            setShowQuickZap(true)
+          }}
+          size="small"
+        />
         <MouseoverTooltip text={<Trans> Add liquidity </Trans>} placement={'top'} width={'fit-content'}>
           <ButtonEmpty
             padding="0"