refactor: add SellNativeWarningBanner non-pure

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 && <SmallVolumeWarningBanner feeAmount={feeAmount} feePercentage={feePercentage} />}
       {showApprovalBundlingBanner && <BundleTxApprovalBanner />}
       {showSafeWcBundlingBanner && <BundleTxSafeWcBanner />}
-      {showNativeSellWarning && (
-        <SellNativeWarningBanner
-          nativeSymbol={native.symbol}
-          wrappedNativeSymbol={wrapped.symbol}
-          sellWrapped={() => navigateOnCurrencySelection(Field.INPUT, wrapped)}
-          wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)}
-        />
-      )}
+      {showNativeSellWarning && <SellNativeWarningBanner />}
     </Wrapper>
   ) : null
 }

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 (
+    <Pure
+      nativeSymbol={native.symbol}
+      wrappedNativeSymbol={wrapped.symbol}
+      sellWrapped={() => navigateOnCurrencySelection(Field.INPUT, wrapped)}
+      wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)}
+    />
+  )
+}

apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx

@@ -4,25 +4,22 @@ 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'
 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 (
-            <SellNativeWarningBanner
-              nativeSymbol={native.symbol}
-              wrappedNativeSymbol={wrapped.symbol}
-              sellWrapped={() => navigateOnCurrencySelection(Field.INPUT, wrapped)}
-              wrapNative={() => navigateOnCurrencySelection(Field.OUTPUT, wrapped)}
-            />
-          )
+          return <SellNativeWarningBanner />
         }
 
         if (localFormValidation === TwapFormState.SELL_AMOUNT_TOO_SMALL) {