diff --git a/index.html b/index.html index 1800b44d37..b285d88016 100644 --- a/index.html +++ b/index.html @@ -58,6 +58,65 @@ s.parentNode.insertBefore(g, s) })() + + @@ -220,64 +279,6 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> - 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/components/ElasticZap/ZapDetail.tsx b/src/components/ElasticZap/ZapDetail.tsx index 8c50a502e5..af17ee0b78 100644 --- a/src/components/ElasticZap/ZapDetail.tsx +++ b/src/components/ElasticZap/ZapDetail.tsx @@ -123,6 +123,15 @@ export const useZapDetail = ({ newPooledAmount1 = newPooledAmount1.add(position.amount1) } + const remainAmount0 = + pool?.token0 && + result?.remainingAmount0 && + CurrencyAmount.fromRawAmount(pool.token0, result.remainingAmount0.toString()) + const remainAmount1 = + pool?.token1 && + result?.remainingAmount1 && + CurrencyAmount.fromRawAmount(pool.token1, result.remainingAmount1.toString()) + const prices = useTokenPrices( [WETH[chainId].address, currency0?.wrapped.address, currency1?.wrapped.address].filter(Boolean) as string[], ) @@ -137,16 +146,22 @@ export const useZapDetail = ({ const amountInUsd = +(amountIn?.toExact() || '0') * (prices[amountIn?.currency?.wrapped.address || ''] || 0) - const amountUSDAfterSwap = + const remainAmountUsd = currency0 && currency1 + ? +(remainAmount0?.toExact() || 0) * (prices[currency0.wrapped.address] || 0) + + +(remainAmount1?.toExact() || 0) * (prices[currency1.wrapped.address] || 0) + : 0 + + const amountUsdAfterSwap = + (currency0 && currency1 ? +(newPooledAmount0?.toExact() || 0) * (prices[currency0.wrapped.address] || 0) + +(newPooledAmount1?.toExact() || 0) * (prices[currency1.wrapped.address] || 0) - : 0 + : 0) + remainAmountUsd const priceImpact = !prices[currency0?.wrapped?.address || ''] || !prices[currency1?.wrapped?.address || ''] ? NaN - : ((amountInUsd - amountUSDAfterSwap) * 100) / amountInUsd + : ((amountInUsd - amountUsdAfterSwap) * 100) / amountInUsd const priceImpactRes = checkPriceImpact(priceImpact) const [gas, setGas] = useState('') // GWei diff --git a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx index 3ce858bc41..392a7ce743 100644 --- a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx +++ b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx @@ -109,6 +109,8 @@ export default function SwapDetails({ const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP) + const feeAmount = routeSummary?.extraFee?.feeAmount + return ( <> )} - {!!routeSummary?.extraFee?.feeAmount && ( + {!!feeAmount && feeAmount !== '0' && ( diff --git a/src/components/SwapForm/hooks/useBuildRoute.tsx b/src/components/SwapForm/hooks/useBuildRoute.tsx index 4dcf21405e..5bb65c84f3 100644 --- a/src/components/SwapForm/hooks/useBuildRoute.tsx +++ b/src/components/SwapForm/hooks/useBuildRoute.tsx @@ -61,7 +61,7 @@ const useBuildRoute = (args: Args) => { slippageTolerance: slippage, sender: account, recipient: to || account, - source: clientId || 'kyberswap-ui', + source: clientId || 'kyberswap', skipSimulateTx: false, permit, } diff --git a/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx b/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx index 86b92ce6a4..da59ae8b83 100644 --- a/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx +++ b/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx @@ -21,6 +21,7 @@ import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag' import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index' import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2' import { useActiveWeb3React } from 'hooks' +import { useAllTokens } from 'hooks/Tokens' import useTheme from 'hooks/useTheme' import { useShareFarmAddress } from 'state/farms/classic/hooks' import { FarmingPool, NFTPosition } from 'state/farms/elastic/types' @@ -73,6 +74,7 @@ const FarmCard = ({ targetPercent, targetPercentByNFT, }: Props) => { + const allTokens = useAllTokens() const { chainId, networkInfo } = useActiveWeb3React() const [isRevertPrice, setIsRevertPrice] = useState(false) const theme = useTheme() @@ -104,8 +106,16 @@ const FarmCard = ({ pos => pos.pool.tickCurrent >= pos.tickLower && pos.pool.tickCurrent < pos.tickUpper, ).length - const token0Symbol = getTokenSymbolWithHardcode(chainId, pool?.token0?.wrapped?.address, pool.token0.symbol) - const token1Symbol = getTokenSymbolWithHardcode(chainId, pool?.token1?.wrapped?.address, pool.token1.symbol) + const token0Symbol = getTokenSymbolWithHardcode( + chainId, + pool?.token0?.wrapped?.address, + pool.token0.isNative ? pool.token0.symbol : allTokens[pool.token0.wrapped.address].symbol, + ) + const token1Symbol = getTokenSymbolWithHardcode( + chainId, + pool?.token1?.wrapped?.address, + pool.token1.isNative ? pool.token1.symbol : allTokens[pool.token1.wrapped.address].symbol, + ) return ( diff --git a/src/components/YieldPools/ElasticFarmGroup/Row.tsx b/src/components/YieldPools/ElasticFarmGroup/Row.tsx index 585adb9a74..1141ed3295 100644 --- a/src/components/YieldPools/ElasticFarmGroup/Row.tsx +++ b/src/components/YieldPools/ElasticFarmGroup/Row.tsx @@ -21,6 +21,7 @@ import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag' import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index' import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2' import { useActiveWeb3React } from 'hooks' +import { useAllTokens } from 'hooks/Tokens' import { useProMMFarmReadingContract } from 'hooks/useContract' import { useProAmmPositions } from 'hooks/useProAmmPositions' import useTheme from 'hooks/useTheme' @@ -66,6 +67,7 @@ const Row = ({ onHarvest: () => void tokenPrices: { [key: string]: number } }) => { + const allTokens = useAllTokens() const { chainId, networkInfo, account } = useActiveWeb3React() const theme = useTheme() const currentTimestamp = Math.floor(Date.now() / 1000) @@ -306,8 +308,16 @@ const Row = ({ ) - const symbol0 = getTokenSymbolWithHardcode(chainId, farmingPool.token0.wrapped.address, farmingPool.token0.symbol) - const symbol1 = getTokenSymbolWithHardcode(chainId, farmingPool.token1.wrapped.address, farmingPool.token1.symbol) + const symbol0 = getTokenSymbolWithHardcode( + chainId, + farmingPool.token0.wrapped.address, + farmingPool.token0.isNative ? farmingPool.token0.symbol : allTokens[farmingPool.token0.wrapped.address].symbol, + ) + const symbol1 = getTokenSymbolWithHardcode( + chainId, + farmingPool.token1.wrapped.address, + farmingPool.token1.isNative ? farmingPool.token1.symbol : allTokens[farmingPool.token1.wrapped.address].symbol, + ) return ( diff --git a/src/constants/index.ts b/src/constants/index.ts index de1867f189..fa340712f7 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -131,7 +131,7 @@ export const CAMPAIGN_LEADERBOARD_ITEM_PER_PAGE = 10 export const CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE = 10000 export const ELASTIC_BASE_FEE_UNIT = 100_000 -export const KYBERSWAP_SOURCE = '{"source":"kyberswap-ui"}' +export const KYBERSWAP_SOURCE = '{"source":"kyberswap"}' export const SWR_KEYS = { getGrantProgramLeaderBoard: (id: number | string) => `${CAMPAIGN_BASE_URL}/api/v1/competitions/${id}/leaderboard`, 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..b26eaf62d3 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) @@ -1225,7 +1247,13 @@ export default function AddLiquidity() { setShowZapConfirmation(true) }} - color={zapDetail.priceImpact?.isVeryHigh ? theme.text : undefined} + color={ + zapApprovalState !== ApprovalState.APPROVED + ? theme.textReverse + : zapDetail.priceImpact?.isVeryHigh + ? theme.text + : undefined + } backgroundColor={ zapApprovalState !== ApprovalState.APPROVED ? undefined 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'}>