From bea3425dd33ef6a0e6516a6692e78ec3cb9d56fb Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 27 Oct 2023 11:05:37 +0700 Subject: [PATCH 1/3] update gas fee note --- src/components/SwapForm/GasPriceNote.tsx | 41 ++++++++++++++++-------- src/components/SwapForm/index.tsx | 11 ++++--- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/components/SwapForm/GasPriceNote.tsx b/src/components/SwapForm/GasPriceNote.tsx index d2a22dbf6e..db227fa227 100644 --- a/src/components/SwapForm/GasPriceNote.tsx +++ b/src/components/SwapForm/GasPriceNote.tsx @@ -1,41 +1,54 @@ import { ChainId } from '@kyberswap/ks-sdk-core' -import { Trans, t } from '@lingui/macro' +import { Trans } from '@lingui/macro' import { FC } from 'react' import { Text } from 'rebass' +import PriceImpactNote from 'components/SwapForm/PriceImpactNote' import WarningNote from 'components/WarningNote' import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' import { useSwitchPairToLimitOrder } from 'state/swap/hooks' +import { checkPriceImpact } from 'utils/prices' type Props = { gasUsd?: string + priceImpact?: number + isDegenMode: boolean } const GAS_USD_THRESHOLD = 20 -const GasPriceNote: FC = ({ gasUsd = 0 }) => { +const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenMode }) => { const theme = useTheme() - const { chainId } = useActiveWeb3React() const switchToLimitOrder = useSwitchPairToLimitOrder() - if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) return null + const { isHigh, isVeryHigh } = checkPriceImpact(priceImpact) + + if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) + return + const limitOrderLink = ( + + Do you want to make a{' '} + + Limit Order + {' '} + instead? + + ) return ( - - Do you want to make a{' '} - - Limit Order - {' '} - instead? - + {isHigh || isVeryHigh ? ( + Gas fees and Price Impact are very high. You will lose your funds. + ) : ( + Gas fees is very high. You will lose your funds. + )}{' '} + {limitOrderLink} } /> ) } -export default GasPriceNote +export default GasFeeAndPriceImpactNote diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index ead77a20ae..cf2b33be39 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -13,7 +13,7 @@ import AddressInputPanel from 'components/AddressInputPanel' import { Clock } from 'components/Icons' import { AutoRow } from 'components/Row' import SlippageWarningNote from 'components/SlippageWarningNote' -import GasPriceNote from 'components/SwapForm/GasPriceNote' +import GasFeeAndPriceImpactNote from 'components/SwapForm/GasPriceNote' import InputCurrencyPanel from 'components/SwapForm/InputCurrencyPanel' import OutputCurrencyPanel from 'components/SwapForm/OutputCurrencyPanel' import SlippageSettingGroup from 'components/SwapForm/SlippageSettingGroup' @@ -37,7 +37,6 @@ import { MEDIA_WIDTHS } from 'theme' import { DetailedRouteSummary } from 'types/route' import { currencyId } from 'utils/currencyId' -import PriceImpactNote from './PriceImpactNote' import RefreshButton from './RefreshButton' import ReverseTokenSelectionButton from './ReverseTokenSelectionButton' import SwapActionButton from './SwapActionButton' @@ -260,9 +259,11 @@ const SwapForm: React.FC = props => { {!isWrapOrUnwrap && } - - - + Date: Sat, 28 Oct 2023 11:01:28 +0700 Subject: [PATCH 2/3] add tracking --- .nvmrc | 2 +- src/components/SwapForm/GasPriceNote.tsx | 12 +++++++++++- src/components/SwapForm/PriceImpactNote.tsx | 14 ++++++++++++-- src/hooks/useMixpanel.ts | 5 +++++ 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/.nvmrc b/.nvmrc index 2f3b977c5b..c946e1df49 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.15.0 \ No newline at end of file +v20.9.0 \ No newline at end of file diff --git a/src/components/SwapForm/GasPriceNote.tsx b/src/components/SwapForm/GasPriceNote.tsx index db227fa227..a5aff7143a 100644 --- a/src/components/SwapForm/GasPriceNote.tsx +++ b/src/components/SwapForm/GasPriceNote.tsx @@ -6,6 +6,7 @@ import { Text } from 'rebass' import PriceImpactNote from 'components/SwapForm/PriceImpactNote' import WarningNote from 'components/WarningNote' import { useActiveWeb3React } from 'hooks' +import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { useSwitchPairToLimitOrder } from 'state/swap/hooks' import { checkPriceImpact } from 'utils/prices' @@ -22,6 +23,7 @@ const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenM const { chainId } = useActiveWeb3React() const switchToLimitOrder = useSwitchPairToLimitOrder() const { isHigh, isVeryHigh } = checkPriceImpact(priceImpact) + const { mixpanelHandler } = useMixpanel() if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) return @@ -29,7 +31,15 @@ const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenM const limitOrderLink = ( Do you want to make a{' '} - + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > Limit Order {' '} instead? diff --git a/src/components/SwapForm/PriceImpactNote.tsx b/src/components/SwapForm/PriceImpactNote.tsx index 00921740ed..87c3b4350e 100644 --- a/src/components/SwapForm/PriceImpactNote.tsx +++ b/src/components/SwapForm/PriceImpactNote.tsx @@ -6,6 +6,7 @@ import styled from 'styled-components' import Column from 'components/Column' import Row from 'components/Row' import WarningNote from 'components/WarningNote' +import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { useSwitchPairToLimitOrder } from 'state/swap/hooks' import { checkPriceImpact } from 'utils/prices' @@ -38,6 +39,7 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi const priceImpactResult = checkPriceImpact(priceImpact) const theme = useTheme() const switchToLimitOrder = useSwitchPairToLimitOrder() + const { mixpanelHandler } = useMixpanel() if (typeof priceImpact !== 'number') { return null @@ -81,7 +83,15 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi Do you want to make a{' '} - + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > Limit Order {' '} instead? @@ -108,6 +118,7 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi } longText={ + {limitOrderNote} {isDegenMode ? ( @@ -120,7 +131,6 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi )} - {limitOrderNote} } /> diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts index 9a01ed4a96..6a319c0b11 100644 --- a/src/hooks/useMixpanel.ts +++ b/src/hooks/useMixpanel.ts @@ -206,6 +206,7 @@ export enum MIXPANEL_TYPE { LO_CLICK_CANCEL_TYPE, LO_CLICK_UPDATE_TYPE, LO_CLICK_GET_STARTED, + LO_CLICK_WARNING_IN_SWAP, // Wallet UI WUI_WALLET_CLICK, @@ -1138,6 +1139,10 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } mixpanel.track('Limit Order - Get Started Click', payload) break } + case MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP: { + mixpanel.track('Limit Order - Warning in Swap Click', payload) + break + } case MIXPANEL_TYPE.WUI_WALLET_CLICK: { mixpanel.track('Wallet UI - Wallet Click') From 63c522dedd6869e4459877360786b5a788eaba8c Mon Sep 17 00:00:00 2001 From: Danh Date: Sat, 28 Oct 2023 13:38:30 +0700 Subject: [PATCH 3/3] update note --- src/components/SwapForm/GasPriceNote.tsx | 36 +++++++++++++----------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/SwapForm/GasPriceNote.tsx b/src/components/SwapForm/GasPriceNote.tsx index a5aff7143a..1ba62568cd 100644 --- a/src/components/SwapForm/GasPriceNote.tsx +++ b/src/components/SwapForm/GasPriceNote.tsx @@ -29,21 +29,23 @@ const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenM return const limitOrderLink = ( - - Do you want to make a{' '} - { - mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) - switchToLimitOrder() - }} - > - Limit Order - {' '} - instead? - + + + Do you want to make a{' '} + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > + Limit Order + {' '} + instead? + + ) return ( = ({ gasUsd = 0, priceImpact, isDegenM Gas fees and Price Impact are very high. You will lose your funds. ) : ( Gas fees is very high. You will lose your funds. - )}{' '} - {limitOrderLink} + )} } + longText={limitOrderLink} /> ) }