From a1ddca2ea74367828211b6a8933149a35dbb2b92 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Fri, 5 Jan 2024 12:36:31 +0000 Subject: [PATCH] refactor: add SellNativeWarningBanner non-pure --- .../containers/LimitOrdersWarnings/index.tsx | 22 +++------------- .../SellNativeWarningBanner/index.tsx | 22 ++++++++++++++++ .../containers/TwapFormWarnings/index.tsx | 26 ++++--------------- 3 files changed, 30 insertions(+), 40 deletions(-) create mode 100644 apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx index de4b72eb7e..4f78a3e441 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx @@ -8,8 +8,6 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import styled from 'styled-components/macro' import { Nullish } from 'types' -import { Field } from 'legacy/state/types' - import { useLimitOrdersDerivedState } from 'modules/limitOrders/hooks/useLimitOrdersDerivedState' import { useLimitOrdersFormState } from 'modules/limitOrders/hooks/useLimitOrdersFormState' import { useRateImpact } from 'modules/limitOrders/hooks/useRateImpact' @@ -19,11 +17,10 @@ import { updateLimitOrdersWarningsAtom, } from 'modules/limitOrders/state/limitOrdersWarningsAtom' import { useTradePriceImpact } from 'modules/trade' +import { SellNativeWarningBanner } from 'modules/trade/containers/SellNativeWarningBanner' import { useDerivedTradeState } from 'modules/trade/hooks/useDerivedTradeState' import { useIsNativeIn } from 'modules/trade/hooks/useIsNativeInOrOut' import { useIsWrappedOut } from 'modules/trade/hooks/useIsWrappedInOrOut' -import { useNavigateOnCurrencySelection } from 'modules/trade/hooks/useNavigateOnCurrencySelection' -import { useWrappedToken } from 'modules/trade/hooks/useWrappedToken' import { NoImpactWarning } from 'modules/trade/pure/NoImpactWarning' import { TradeFormValidation, useGetTradeFormValidation } from 'modules/tradeFormValidation' import { useTradeQuote } from 'modules/tradeQuote' @@ -35,11 +32,9 @@ import { BundleTxApprovalBanner, BundleTxSafeWcBanner, CustomRecipientWarningBanner, - SellNativeWarningBanner, SmallVolumeWarningBanner, } from 'common/pure/InlineBanner/banners' import { ZeroApprovalWarning } from 'common/pure/ZeroApprovalWarning' -import useNativeCurrency from 'lib/hooks/useNativeCurrency' import { calculatePercentageInRelationToReference } from 'utils/orderUtils/calculatePercentageInRelationToReference' import { RateImpactWarning } from '../../pure/RateImpactWarning' @@ -108,15 +103,11 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) { const { state } = useDerivedTradeState() const showRecipientWarning = isConfirmScreen && state?.recipient && account !== state.recipient - const native = useNativeCurrency() - const wrapped = useWrappedToken() const isNativeIn = useIsNativeIn() const isWrappedOut = useIsWrappedOut() // TODO: implement Safe App EthFlow bundling for LIMIT and disable the warning in that case - const showNativeSellWarning = isNativeIn && !isWrappedOut && native && wrapped - - const navigateOnCurrencySelection = useNavigateOnCurrencySelection() + const showNativeSellWarning = isNativeIn && !isWrappedOut const isVisible = showPriceImpactWarning || @@ -175,14 +166,7 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) { {showHighFeeWarning && } {showApprovalBundlingBanner && } {showSafeWcBundlingBanner && } - {showNativeSellWarning && ( - navigateOnCurrencySelection(Field.INPUT, wrapped)} - wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)} - /> - )} + {showNativeSellWarning && } ) : null } diff --git a/apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx new file mode 100644 index 0000000000..9b7e45c907 --- /dev/null +++ b/apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx @@ -0,0 +1,22 @@ +import { Field } from 'legacy/state/types' + +import { SellNativeWarningBanner as Pure } from 'common/pure/InlineBanner/banners' +import useNativeCurrency from 'lib/hooks/useNativeCurrency' + +import { useNavigateOnCurrencySelection } from '../../hooks/useNavigateOnCurrencySelection' +import { useWrappedToken } from '../../hooks/useWrappedToken' + +export function SellNativeWarningBanner() { + const native = useNativeCurrency() + const wrapped = useWrappedToken() + const navigateOnCurrencySelection = useNavigateOnCurrencySelection() + + return ( + navigateOnCurrencySelection(Field.INPUT, wrapped)} + wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)} + /> + ) +} diff --git a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx index a5a6082002..e956fb7472 100644 --- a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx +++ b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx @@ -4,14 +4,13 @@ import { useCallback } from 'react' import { modifySafeHandlerAnalytics } from '@cowprotocol/analytics' import { useIsSafeViaWc, useWalletInfo } from '@cowprotocol/wallet' -import { Field } from 'legacy/state/types' - +import { useAdvancedOrdersDerivedState } from 'modules/advancedOrders' +import { SellNativeWarningBanner } from 'modules/trade/containers/SellNativeWarningBanner' import { useIsNativeIn } from 'modules/trade/hooks/useIsNativeInOrOut' import { useIsWrappedOut } from 'modules/trade/hooks/useIsWrappedInOrOut' -import { useNavigateOnCurrencySelection } from 'modules/trade/hooks/useNavigateOnCurrencySelection' import { useTradeRouteContext } from 'modules/trade/hooks/useTradeRouteContext' -import { useWrappedToken } from 'modules/trade/hooks/useWrappedToken' import { NoImpactWarning } from 'modules/trade/pure/NoImpactWarning' +import { TradeFormValidation, useGetTradeFormValidation } from 'modules/tradeFormValidation' import { useTradeQuoteFeeFiatAmount } from 'modules/tradeQuote' import { useShouldZeroApprove } from 'common/hooks/useShouldZeroApprove' @@ -19,10 +18,8 @@ import { BannerOrientation, BundleTxApprovalBanner, CustomRecipientWarningBanner, - SellNativeWarningBanner, } from 'common/pure/InlineBanner/banners' import { ZeroApprovalWarning } from 'common/pure/ZeroApprovalWarning' -import useNativeCurrency from 'lib/hooks/useNativeCurrency' import { FallbackHandlerWarning, @@ -34,8 +31,6 @@ import { BigPartTimeWarning } from './warnings/BigPartTimeWarning' import { SmallPriceProtectionWarning } from './warnings/SmallPriceProtectionWarning' import { SwapPriceDifferenceWarning } from './warnings/SwapPriceDifferenceWarning' -import { useAdvancedOrdersDerivedState } from '../../../advancedOrders' -import { TradeFormValidation, useGetTradeFormValidation } from '../../../tradeFormValidation' import { useIsFallbackHandlerRequired } from '../../hooks/useFallbackHandlerVerification' import { useTwapWarningsContext } from '../../hooks/useTwapWarningsContext' import { TwapFormState } from '../../pure/PrimaryActionButton/getTwapFormState' @@ -95,16 +90,12 @@ export function TwapFormWarnings({ localFormValidation, isConfirmationModal }: T const showRecipientWarning = isConfirmationModal && twapOrder?.receiver && twapOrder.receiver !== account - const navigateOnCurrencySelection = useNavigateOnCurrencySelection() - - const native = useNativeCurrency() - const wrapped = useWrappedToken() const isNativeIn = useIsNativeIn() const isWrappedOut = useIsWrappedOut() // TODO: implement Safe App EthFlow bundling for TWAP and disable the warning in that case const showNativeSellWarning = - isNativeIn && !isWrappedOut && native && wrapped && primaryFormValidation === TradeFormValidation.SellNativeToken + isNativeIn && !isWrappedOut && primaryFormValidation === TradeFormValidation.SellNativeToken // Don't display any warnings while a wallet is not connected if (walletIsNotConnected) return null @@ -138,14 +129,7 @@ export function TwapFormWarnings({ localFormValidation, isConfirmationModal }: T } if (showNativeSellWarning) { - return ( - navigateOnCurrencySelection(Field.INPUT, wrapped)} - wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)} - /> - ) + return } if (localFormValidation === TwapFormState.SELL_AMOUNT_TOO_SMALL) {