fix(hooks-store): disable selling eth (#5209)

* fix(hooks-store): disable selling eth

* chore: fix wranings conds

* chore: fix condition

apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx

@@ -55,6 +55,7 @@ import { useRateInfoParams } from 'common/hooks/useRateInfoParams'
 import { CurrencyInfo } from 'common/pure/CurrencyInputPanel/types'
 import { SWAP_QUOTE_CHECK_INTERVAL } from 'common/updaters/FeesUpdater'
 
+import { SwapButtonState } from '../../helpers/getSwapButtonState'
 import { useDerivedSwapInfo, useSwapActionHandlers, useSwapState } from '../../hooks/useSwapState'
 import { useTradeQuoteStateFromLegacy } from '../../hooks/useTradeQuoteStateFromLegacy'
 import { ConfirmSwapModalSetup } from '../ConfirmSwapModalSetup'
@@ -198,6 +199,7 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
     showCowSubsidyModal,
   }
   const showTwapSuggestionBanner = !enabledTradeTypes || enabledTradeTypes.includes(TradeType.ADVANCED)
+  const isNativeSellInHooksStore = swapButtonContext.swapButtonState === SwapButtonState.SellNativeInHooks
 
   const swapWarningsTopProps: SwapWarningsTopProps = useMemo(
     () => ({
@@ -207,8 +209,17 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
       buyingFiatAmount,
       priceImpact: priceImpactParams.priceImpact,
       tradeUrlParams,
+      isNativeSellInHooksStore,
     }),
-    [chainId, trade, showTwapSuggestionBanner, buyingFiatAmount, priceImpactParams.priceImpact, tradeUrlParams],
+    [
+      chainId,
+      trade,
+      showTwapSuggestionBanner,
+      buyingFiatAmount,
+      priceImpactParams.priceImpact,
+      tradeUrlParams,
+      isNativeSellInHooksStore,
+    ],
   )
 
   const swapWarningsBottomProps: SwapWarningsBottomProps = useMemo(

apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts

@@ -29,6 +29,7 @@ export enum SwapButtonState {
   SwapWithWrappedToken = 'SwapWithWrappedToken',
   RegularEthFlowSwap = 'EthFlowSwap',
   ApproveAndSwap = 'ApproveAndSwap',
+  SellNativeInHooks = 'SellNativeInHooks',
 
   WrapAndSwap = 'WrapAndSwap',
 }
@@ -53,6 +54,7 @@ export interface SwapButtonStateParams {
   isBestQuoteLoading: boolean
   wrappedToken: Token
   isPermitSupported: boolean
+  isHooksStore: boolean
   quoteDeadlineParams: QuoteDeadlineParams
 }
 
@@ -140,6 +142,10 @@ export function getSwapButtonState(input: SwapButtonStateParams): SwapButtonStat
   }
 
   if (input.isNativeIn) {
+    if (input.isHooksStore) {
+      return SwapButtonState.SellNativeInHooks
+    }
+
     if (!input.isSmartContractWallet) {
       return SwapButtonState.RegularEthFlowSwap
     } else if (input.isBundlingSupported) {

apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react'
 
-// import { useCurrencyAmountBalance } from '@cowprotocol/balances-and-allowances'
 import { currencyAmountToTokenAmount, getWrappedToken } from '@cowprotocol/common-utils'
 import { useIsTradeUnsupported } from '@cowprotocol/tokens'
 import {
@@ -21,7 +20,13 @@ import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { useTokenSupportsPermit } from 'modules/permit'
 import { getSwapButtonState } from 'modules/swap/helpers/getSwapButtonState'
 import { SwapButtonsContext } from 'modules/swap/pure/SwapButtons'
-import { TradeType, TradeWidgetActions, useTradeConfirmActions, useWrapNativeFlow } from 'modules/trade'
+import {
+  TradeType,
+  TradeWidgetActions,
+  useIsHooksTradeType,
+  useTradeConfirmActions,
+  useWrapNativeFlow,
+} from 'modules/trade'
 import { useIsNativeIn } from 'modules/trade/hooks/useIsNativeInOrOut'
 import { useIsWrappedOut } from 'modules/trade/hooks/useIsWrappedInOrOut'
 import { useWrappedToken } from 'modules/trade/hooks/useWrappedToken'
@@ -57,6 +62,7 @@ export function useSwapButtonContext(input: SwapButtonInput, actions: TradeWidge
   const isBestQuoteLoading = useIsBestQuoteLoading()
   const tradeConfirmActions = useTradeConfirmActions()
   const { standaloneMode } = useInjectedWidgetParams()
+  const isHooksStore = useIsHooksTradeType()
 
   const currencyIn = currencies[Field.INPUT]
   const currencyOut = currencies[Field.OUTPUT]
@@ -118,6 +124,7 @@ export function useSwapButtonContext(input: SwapButtonInput, actions: TradeWidge
     isBestQuoteLoading,
     isPermitSupported,
     quoteDeadlineParams,
+    isHooksStore,
   })
 
   return useSafeMemo(

apps/cowswap-frontend/src/modules/swap/pure/SwapButtons/index.tsx

@@ -173,6 +173,17 @@ const swapButtonStateMap: { [key in SwapButtonState]: (props: SwapButtonsContext
     </ButtonError>
   ),
   [SwapButtonState.RegularEthFlowSwap]: (props: SwapButtonsContext) => <EthFlowSwapButton {...props} />,
+  [SwapButtonState.SellNativeInHooks]: (props: SwapButtonsContext) => {
+    const currency = props.inputAmount?.currency
+
+    return (
+      <ButtonError buttonSize={ButtonSize.BIG} disabled={true}>
+        <styledEl.SwapButtonBox>
+          <Trans>Selling {currency?.symbol} is not supported</Trans>
+        </styledEl.SwapButtonBox>
+      </ButtonError>
+    )
+  },
 }
 
 function EthFlowSwapButton(props: SwapButtonsContext) {

apps/cowswap-frontend/src/modules/swap/pure/warnings.tsx

@@ -6,6 +6,7 @@ import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
 import TradeGp from 'legacy/state/swap/TradeGp'
 
+import { SellNativeWarningBanner } from 'modules/trade/containers/SellNativeWarningBanner'
 import { CompatibilityIssuesWarning } from 'modules/trade/pure/CompatibilityIssuesWarning'
 import { TradeUrlParams } from 'modules/trade/types/TradeRawState'
 import { BundleTxWrapBanner, HighFeeWarning } from 'modules/tradeWidgetAddons'
@@ -19,6 +20,7 @@ export interface SwapWarningsTopProps {
   buyingFiatAmount: CurrencyAmount<Currency> | null
   priceImpact: Percent | undefined
   tradeUrlParams: TradeUrlParams
+  isNativeSellInHooksStore: boolean
 }
 
 export interface SwapWarningsBottomProps {
@@ -29,21 +31,35 @@ export interface SwapWarningsBottomProps {
 }
 
 export const SwapWarningsTop = React.memo(function (props: SwapWarningsTopProps) {
-  const { chainId, trade, showTwapSuggestionBanner, buyingFiatAmount, priceImpact, tradeUrlParams } = props
+  const {
+    chainId,
+    trade,
+    showTwapSuggestionBanner,
+    buyingFiatAmount,
+    priceImpact,
+    tradeUrlParams,
+    isNativeSellInHooksStore,
+  } = props
 
   return (
     <>
-      <HighFeeWarning />
-      <BundleTxWrapBanner />
+      {isNativeSellInHooksStore ? (
+        <SellNativeWarningBanner />
+      ) : (
+        <>
+          <HighFeeWarning />
+          <BundleTxWrapBanner />
 
-      {showTwapSuggestionBanner && (
-        <TwapSuggestionBanner
-          chainId={chainId}
-          priceImpact={priceImpact}
-          buyingFiatAmount={buyingFiatAmount}
-          tradeUrlParams={tradeUrlParams}
-          sellAmount={trade?.inputAmount.toExact()}
-        />
+          {showTwapSuggestionBanner && (
+            <TwapSuggestionBanner
+              chainId={chainId}
+              priceImpact={priceImpact}
+              buyingFiatAmount={buyingFiatAmount}
+              tradeUrlParams={tradeUrlParams}
+              sellAmount={trade?.inputAmount.toExact()}
+            />
+          )}
+        </>
       )}
     </>
   )

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/BundleTxWrapBanner/index.tsx

@@ -1,18 +1,19 @@
 import { InlineBanner } from '@cowprotocol/ui'
 import { useIsBundlingSupported, useIsSmartContractWallet } from '@cowprotocol/wallet'
 
-import { useIsNativeIn, useWrappedToken } from 'modules/trade'
+import { useIsHooksTradeType, useIsNativeIn, useWrappedToken } from 'modules/trade'
 
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 
 export function BundleTxWrapBanner() {
   const nativeCurrencySymbol = useNativeCurrency().symbol || 'ETH'
   const wrappedCurrencySymbol = useWrappedToken().symbol || 'WETH'
 
+  const isHooksStore = useIsHooksTradeType()
   const isBundlingSupported = useIsBundlingSupported()
   const isNativeIn = useIsNativeIn()
   const isSmartContractWallet = useIsSmartContractWallet()
-  const showWrapBundlingBanner = Boolean(isNativeIn && isSmartContractWallet && isBundlingSupported)
+  const showWrapBundlingBanner = Boolean(isNativeIn && isSmartContractWallet && isBundlingSupported) && !isHooksStore
 
   if (!showWrapBundlingBanner) return null