main -> develop

apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx

@@ -56,7 +56,11 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean }>`
   margin: auto;
 
   &:hover {
-    transform: translateY(-2px);
+    ${({ isLoading }) =>
+      !isLoading &&
+      css`
+        transform: translateY(-2px);
+      `}
   }
 
   ${({ isLoading }) => isLoading && loadingAnimationMixin}

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx

@@ -45,6 +45,11 @@ export const CurrencyInputBox = styled.div<{ isInvalid?: boolean }>`
     gap: 8px;
   }
 
+  ${Media.upToTiny()} {
+    grid-template-columns: repeat(1, auto);
+    grid-template-rows: max-content;
+  }
+
   > div {
     display: flex;
     align-items: center;

apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsx

@@ -75,7 +75,7 @@ export function ApprovalAmountInput({
   return (
     <styledEl.EditWrapper>
       <styledEl.InputHeader>
-        Approval amount: <styledEl.ResetBtn onClick={onReset}>{resetLabel}</styledEl.ResetBtn>
+        Approval amount <styledEl.ResetBtn onClick={onReset}>{resetLabel}</styledEl.ResetBtn>
       </styledEl.InputHeader>
       <CurrencyInputPanel
         className={'custom-input-panel'}

apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.ts

@@ -7,7 +7,7 @@ export const EditWrapper = styled.div`
   flex-direction: column;
   background: var(${UI.COLOR_PAPER_DARKER});
   padding: 14px;
-  margin: 15px;
+  margin: 10px;
   border-radius: 14px;
   border: 2px solid var(${UI.COLOR_PAPER_DARKEST});
 
@@ -21,6 +21,7 @@ export const InputHeader = styled.div`
   display: flex;
   font-size: 13px;
   color: var(${UI.COLOR_TEXT_OPACITY_70});
+  gap: 5px;
 `
 
 export const ResetBtn = styled.button`
@@ -31,6 +32,13 @@ export const ResetBtn = styled.button`
   font-weight: 500;
   color: var(${UI.COLOR_TEXT_OPACITY_70});
   background: var(${UI.COLOR_PAPER});
-  line-height: 100%;
-  margin-left: 5px;
+  line-height: 1;
+  transition:
+    background var(${UI.ANIMATION_DURATION}) ease-in-out,
+    color var(${UI.ANIMATION_DURATION}) ease-in-out;
+
+  &:hover {
+    color: var(${UI.COLOR_PAPER});
+    background: var(${UI.COLOR_PRIMARY_LIGHTER});
+  }
 `

apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsx

@@ -39,7 +39,7 @@ export function ChangeApproveAmountModalPure({
         </styledEl.Title>
       </ModalHeader>
       <styledEl.SwapInfo>
-        <TokenLogo token={inputToken} size={55} />
+        <TokenLogo token={inputToken} size={54} />
         <styledEl.SetTitle>Set approval amount</styledEl.SetTitle>
         <SwapAmountPreview />
       </styledEl.SwapInfo>

apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts

@@ -1,4 +1,4 @@
-import { ButtonPrimary, UI } from '@cowprotocol/ui'
+import { ButtonPrimary, Media, UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -7,20 +7,26 @@ export const Wrapper = styled.div`
   width: 100%;
   overflow: auto;
   background: var(${UI.COLOR_PAPER});
-  border-radius: 20px;
+  border-radius: 21px;
 `
 
 export const SwapInfo = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 21px;
   align-items: center;
-  margin: 48px 0 19px 0;
+  margin: 24px 0;
+  font-size: 13px;
 `
 
 export const SetTitle = styled.div`
   font-size: 23px;
-  margin: 16px 0;
+  text-align: center;
+
+  ${Media.upToSmall()} {
+    font-size: 18px;
+  }
 `
 
 export const Title = styled.div`
@@ -30,6 +36,6 @@ export const Title = styled.div`
 `
 
 export const BtnWrapper = styled.div`
-  margin: 15px;
+  margin: 0 10px 10px;
 `
 export const ActionButton = styled(ButtonPrimary)``

apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsx

@@ -13,7 +13,9 @@ import { useDerivedTradeState } from 'modules/trade'
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
+  flex-flow: row wrap;
   gap: 4px;
+  padding: 0 10px;
 `
 
 const CapitalizedFirst = styled.span`

apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
 
+import { useIsTxBundlingSupported } from '@cowprotocol/wallet'
+
 import {
   ApproveRequiredReason,
   useGetAmountToSignApprove,
@@ -13,8 +15,9 @@ import { ActiveOrdersWithAffectedPermit } from '../ActiveOrdersWithAffectedPermi
 import { TradeApproveToggle } from '../TradeApproveToggle'
 
 export function TradeApproveWithAffectedOrderList(): ReactNode {
+  const isBundlingSupported = useIsTxBundlingSupported()
   const { reason: isApproveRequired } = useIsApprovalOrPermitRequired({
-    isBundlingSupportedOrEnabledForContext: false,
+    isBundlingSupportedOrEnabledForContext: isBundlingSupported,
   })
   const isPartialApprovalEnabledInSettings = useIsPartialApprovalModeSelected()
 
@@ -28,7 +31,8 @@ export function TradeApproveWithAffectedOrderList(): ReactNode {
 
   const isApproveOrPartialPermitRequired =
     isApproveRequired === ApproveRequiredReason.Required ||
-    isApproveRequired === ApproveRequiredReason.Eip2612PermitRequired
+    isApproveRequired === ApproveRequiredReason.Eip2612PermitRequired ||
+    isApproveRequired === ApproveRequiredReason.BundleApproveRequired
 
   if (!partialAmountToApprove || !isPartialApprovalEnabledInSettings) return null