diff --git a/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts b/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts index 6f8e9da738..38d076d423 100644 --- a/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts +++ b/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts @@ -72,19 +72,6 @@ describe('Swap (mod)', () => { cy.get('#add-recipient-button').should('not.exist') }) - describe('expert mode', () => { - beforeEach(() => { - cy.get('#open-settings-dialog-button').click() - cy.get('#toggle-expert-mode-button').click() - cy.get('#confirm-modal-input').type('confirm') - cy.get('#confirm-modal-button').click() - }) - - it('Expert mode is ON', () => { - cy.get(`[aria-label="Expert Mode Turned On"]`).should('be.visible') - }) - }) - describe('recipient', () => { beforeEach(() => { cy.get('#open-settings-dialog-button').click() diff --git a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.cosmos.tsx b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.cosmos.tsx deleted file mode 100644 index 25d04d289c..0000000000 --- a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.cosmos.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ExpertModeModal, ExpertModeModalProps } from './index' - -const defaultProps: ExpertModeModalProps = { - isOpen: true, - onDismiss() { - console.log('Dismiss') - }, - onEnable() { - console.log('Enable') - }, -} - -export default diff --git a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx deleted file mode 100644 index ce071c71e9..0000000000 --- a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { UI } from '@cowprotocol/ui' - -import { Trans } from '@lingui/macro' -import { X } from 'react-feather' -import styled from 'styled-components/macro' - -import { Modal } from 'common/pure/Modal' - -import { ConfirmedButton } from '../ConfirmedButton' - -const ModalContentWrapper = styled.div` - display: flex; - flex-flow: column wrap; - align-items: center; - justify-content: center; - padding: 24px; - color: inherit; - border-radius: var(${UI.BORDER_RADIUS_NORMAL}); - - > p { - line-height: 1.4; - margin: 0 0 24px; - color: inherit; - } - - > p > strong { - color: inherit; - } -` - -const Header = styled.div` - display: flex; - width: 100%; - justify-content: space-between; - padding: 0 0 16px; - margin: 0 0 24px; - border-bottom: 1px solid var(${UI.COLOR_BORDER}); - color: inherit; - - > b { - font-size: 21px; - font-weight: 600; - } -` - -const StyledCloseIcon = styled(X)` - height: 28px; - width: 28px; - color: inherit; - opacity: 0.6; - transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out; - - &:hover { - cursor: pointer; - opacity: 1; - } - - > line { - stroke: currentColor; - } -` - -const ConfirmExpertMode = styled(ConfirmedButton)` - margin: 0 0 15px; -` - -export interface ExpertModeModalProps { - isOpen: boolean - onDismiss(): void - onEnable(): void -} - -export function ExpertModeModal(props: ExpertModeModalProps) { - const { isOpen, onDismiss, onEnable } = props - - return ( - - -
- - Turn on Expert mode? - - -
- -

- - Expert mode turns off the confirm transaction prompt and allows high slippage trades that often result in - bad rates and lost funds. - -

- -

- - ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING! - -

- - - Turn On Expert Mode - - - - ) -} diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx index b477378002..d922e9790b 100644 --- a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx @@ -1,13 +1,8 @@ -import { useCallback, useRef, useState } from 'react' +import { useCallback, useRef } from 'react' -import { - showExpertModeConfirmationAnalytics, - toggleExpertModeAnalytics, - toggleRecepientAddressAnalytics, -} from '@cowprotocol/analytics' +import { toggleRecepientAddressAnalytics } from '@cowprotocol/analytics' import { useOnClickOutside } from '@cowprotocol/common-hooks' -import { RowBetween, RowFixed } from '@cowprotocol/ui' -import { UI } from '@cowprotocol/ui' +import { RowBetween, RowFixed, UI } from '@cowprotocol/ui' import { Trans } from '@lingui/macro' import { Settings } from 'react-feather' @@ -20,11 +15,9 @@ import { Toggle } from 'legacy/components/Toggle' import TransactionSettings from 'legacy/components/TransactionSettings' import { useModalIsOpen, useToggleSettingsMenu } from 'legacy/state/application/hooks' import { ApplicationModal } from 'legacy/state/application/reducer' -import { useExpertModeManager, useRecipientToggleManager } from 'legacy/state/user/hooks' +import { useRecipientToggleManager } from 'legacy/state/user/hooks' import { ThemedText } from 'legacy/theme' -import { ExpertModeModal } from 'common/pure/ExpertModeModal' - import { SettingsTabProp } from './index' export const StyledMenuIcon = styled(Settings)` @@ -98,12 +91,6 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu const open = useModalIsOpen(ApplicationModal.SETTINGS) const toggle = useToggleSettingsMenu() - const [expertMode, toggleExpertModeAux] = useExpertModeManager() - const toggleExpertMode = useCallback(() => { - toggleExpertModeAnalytics(!expertMode) - toggleExpertModeAux() - }, [toggleExpertModeAux, expertMode]) - const [recipientToggleVisible, toggleRecipientVisibilityAux] = useRecipientToggleManager() const toggleRecipientVisibility = useCallback( (value?: boolean) => { @@ -115,32 +102,13 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu ) // show confirmation view before turning on - const [showConfirmation, setShowConfirmationAux] = useState(false) - const setShowConfirmation = useCallback( - (showConfirmation: boolean) => { - if (showConfirmation) { - showExpertModeConfirmationAnalytics() - } - - setShowConfirmationAux(showConfirmation) - }, - [setShowConfirmationAux] - ) useOnClickOutside(node, open ? toggle : undefined) return ( // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 - setShowConfirmation(false)} - onEnable={() => { - toggleExpertMode() - setShowConfirmation(false) - }} - /> - + {open && ( @@ -152,34 +120,6 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu Interface Settings - - - - Expert Mode - - Allow high price impact trades and skip the confirm screen. Use at your own risk. - } - /> - - { - toggleExpertMode() - setShowConfirmation(false) - } - : () => { - toggle() - setShowConfirmation(true) - } - } - /> - - diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx index a6eef010b6..9fe0b98a2e 100644 --- a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx @@ -1,13 +1,12 @@ import { Command } from '@cowprotocol/types' -import { RowFixed } from '@cowprotocol/ui' -import { UI } from '@cowprotocol/ui' +import { RowFixed, UI } from '@cowprotocol/ui' import { Percent } from '@uniswap/sdk-core' import { transparentize } from 'color2k' import styled from 'styled-components/macro' import { WithClassName } from 'types' -import SettingsMod, { StyledMenuButton, MenuFlyout, StyledMenuIcon, EmojiWrapper } from './SettingsMod' +import SettingsMod, { EmojiWrapper, MenuFlyout, StyledMenuButton, StyledMenuIcon } from './SettingsMod' const Settings = styled(SettingsMod)` ${MenuFlyout} { @@ -132,7 +131,6 @@ const Settings = styled(SettingsMod)` export interface SettingsButtonProps { toggleSettings: Command - expertMode: boolean } export interface SettingsTabProp extends WithClassName { @@ -140,17 +138,10 @@ export interface SettingsTabProp extends WithClassName { placeholderSlippage: Percent } -function SettingsButton({ toggleSettings, expertMode }: SettingsButtonProps) { +function SettingsButton({ toggleSettings }: SettingsButtonProps) { return ( - {expertMode ? ( - - - 🥋 - - - ) : null} ) } diff --git a/apps/cowswap-frontend/src/legacy/state/user/hooks.tsx b/apps/cowswap-frontend/src/legacy/state/user/hooks.tsx index 4c822e62f8..c55e414870 100644 --- a/apps/cowswap-frontend/src/legacy/state/user/hooks.tsx +++ b/apps/cowswap-frontend/src/legacy/state/user/hooks.tsx @@ -13,7 +13,6 @@ import { updateRecipientToggleVisible, updateUserDarkMode, updateUserDeadline, - updateUserExpertMode, updateUserLocale, updateUserSlippageTolerance, } from './reducer' @@ -63,21 +62,6 @@ export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: Sup return [locale, setLocale] } -export function useIsExpertMode(): boolean { - return useAppSelector((state) => state.user.userExpertMode) -} - -export function useExpertModeManager(): [boolean, Command] { - const dispatch = useAppDispatch() - const expertMode = useIsExpertMode() - - const toggleSetExpertMode = useCallback(() => { - dispatch(updateUserExpertMode({ userExpertMode: !expertMode })) - }, [expertMode, dispatch]) - - return [expertMode, toggleSetExpertMode] -} - // TODO: mod, move to mod file export function useIsRecipientToggleVisible(): boolean { return useAppSelector((state) => state.user.recipientToggleVisible) diff --git a/apps/cowswap-frontend/src/legacy/state/user/reducer.ts b/apps/cowswap-frontend/src/legacy/state/user/reducer.ts index 1cd9553fbc..0cd2b1d6c0 100644 --- a/apps/cowswap-frontend/src/legacy/state/user/reducer.ts +++ b/apps/cowswap-frontend/src/legacy/state/user/reducer.ts @@ -23,8 +23,6 @@ export interface UserState { userDarkMode: boolean | null // the user's choice for dark mode or light mode userLocale: SupportedLocale | null - userExpertMode: boolean - // TODO: mod, shouldn't be here recipientToggleVisible: boolean @@ -54,7 +52,6 @@ export const initialState: UserState = { selectedWalletBackfilled: false, matchesDarkMode: false, userDarkMode: null, - userExpertMode: false, // TODO: mod, shouldn't be here recipientToggleVisible: false, userLocale: null, @@ -85,10 +82,6 @@ const userSlice = createSlice({ state.matchesDarkMode = action.payload.matchesDarkMode state.timestamp = currentTimestamp() }, - updateUserExpertMode(state, action) { - state.userExpertMode = action.payload.userExpertMode - state.timestamp = currentTimestamp() - }, updateUserLocale(state, action) { state.userLocale = action.payload.userLocale state.timestamp = currentTimestamp() @@ -164,7 +157,6 @@ export const { updateMatchesDarkMode, updateUserDarkMode, updateUserDeadline, - updateUserExpertMode, updateUserLocale, updateUserSlippageTolerance, updateRecipientToggleVisible, diff --git a/apps/cowswap-frontend/src/modules/advancedOrders/containers/AdvancedOrdersWidget/index.tsx b/apps/cowswap-frontend/src/modules/advancedOrders/containers/AdvancedOrdersWidget/index.tsx index 77cf2903cf..7d04794c14 100644 --- a/apps/cowswap-frontend/src/modules/advancedOrders/containers/AdvancedOrdersWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/advancedOrders/containers/AdvancedOrdersWidget/index.tsx @@ -113,7 +113,6 @@ export function AdvancedOrdersWidget({ children, updaters, params, confirmConten showRecipient, isTradePriceUpdating, priceImpact, - isExpertMode: false, // TODO: bind value disablePriceImpact, } 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 b22e5e4aa4..9f21517eca 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx @@ -11,7 +11,6 @@ import { Nullish } from 'types' import { useLimitOrdersDerivedState } from 'modules/limitOrders/hooks/useLimitOrdersDerivedState' import { useLimitOrdersFormState } from 'modules/limitOrders/hooks/useLimitOrdersFormState' import { useRateImpact } from 'modules/limitOrders/hooks/useRateImpact' -import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom' import { limitOrdersWarningsAtom, updateLimitOrdersWarningsAtom, @@ -34,7 +33,7 @@ import { calculatePercentageInRelationToReference } from 'utils/orderUtils/calcu import { RateImpactWarning } from '../../pure/RateImpactWarning' -const FORM_STATES_TO_SHOW_BUNDLE_BANNER = [TradeFormValidation.ExpertApproveAndSwap, TradeFormValidation.ApproveAndSwap] +const FORM_STATES_TO_SHOW_BUNDLE_BANNER = [TradeFormValidation.ApproveAndSwap] export interface LimitOrdersWarningsProps { feeAmount?: Nullish> @@ -60,7 +59,6 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) { const { isPriceImpactAccepted, isRateImpactAccepted } = useAtomValue(limitOrdersWarningsAtom) const updateLimitOrdersWarnings = useSetAtom(updateLimitOrdersWarningsAtom) - const { expertMode } = useAtomValue(limitOrdersSettingsAtom) const localFormValidation = useLimitOrdersFormState() const primaryFormValidation = useGetTradeFormValidation() @@ -74,8 +72,7 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) { const isBundling = primaryFormValidation && FORM_STATES_TO_SHOW_BUNDLE_BANNER.includes(primaryFormValidation) const canTrade = localFormValidation === null && (primaryFormValidation === null || isBundling) && !tradeQuote.error - const showPriceImpactWarning = - canTrade && !expertMode && !!account && !priceImpactParams.loading && !priceImpactParams.priceImpact + const showPriceImpactWarning = canTrade && !!account && !priceImpactParams.loading && !priceImpactParams.priceImpact const showRateImpactWarning = canTrade && inputCurrency && !isFractionFalsy(inputCurrencyAmount) && !isFractionFalsy(outputCurrencyAmount) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/index.tsx index 2354208147..43a22b8d93 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/index.tsx @@ -1,4 +1,4 @@ -import { useAtom, useAtomValue, useSetAtom } from 'jotai' +import { useAtomValue, useSetAtom } from 'jotai' import React, { useMemo } from 'react' import { isSellOrder } from '@cowprotocol/common-utils' @@ -8,7 +8,6 @@ import { Field } from 'legacy/state/types' import { LimitOrdersWarnings } from 'modules/limitOrders/containers/LimitOrdersWarnings' import { useLimitOrdersWidgetActions } from 'modules/limitOrders/containers/LimitOrdersWidget/hooks/useLimitOrdersWidgetActions' import { TradeButtons } from 'modules/limitOrders/containers/TradeButtons' -import { partiallyFillableOverrideAtom } from 'modules/limitOrders/state/partiallyFillableOverride' import { TradeWidget, useTradePriceImpact } from 'modules/trade' import { BulletListItem, UnlockWidgetScreen } from 'modules/trade/pure/UnlockWidgetScreen' import { TradeFormValidation, useGetTradeFormValidation } from 'modules/tradeFormValidation' @@ -76,10 +75,9 @@ export function LimitOrdersWidget() { const { feeAmount } = useAtomValue(limitRateAtom) const { isLoading: isRateLoading } = useTradeQuote() const rateInfoParams = useRateInfoParams(inputCurrencyAmount, outputCurrencyAmount) - const partiallyFillableOverride = useAtom(partiallyFillableOverrideAtom) const widgetActions = useLimitOrdersWidgetActions() - const { showRecipient, expertMode: isExpertMode } = settingsState + const { showRecipient } = settingsState const priceImpact = useTradePriceImpact() const quoteAmount = useMemo( @@ -119,9 +117,7 @@ export function LimitOrdersWidget() { isUnlocked, isRateLoading, showRecipient, - isExpertMode, recipient, - partiallyFillableOverride, rateInfoParams, priceImpact, tradeContext, @@ -142,14 +138,11 @@ const LimitOrders = React.memo((props: LimitOrdersProps) => { isUnlocked, isRateLoading, widgetActions, - partiallyFillableOverride, showRecipient, - isExpertMode, recipient, rateInfoParams, priceImpact, tradeContext, - settingsState, feeAmount, localFormValidation, primaryFormValidation, @@ -164,8 +157,6 @@ const LimitOrders = React.memo((props: LimitOrdersProps) => { return isRateLoading }, [isRateLoading, inputCurrency, outputCurrency]) - const isPartiallyFillable = settingsState.partialFillsEnabled - const updateLimitOrdersState = useSetAtom(updateLimitOrdersRawStateAtom) const inputCurrencyPreviewInfo = { @@ -210,15 +201,6 @@ const LimitOrders = React.memo((props: LimitOrdersProps) => { - {isExpertMode && ( - - - - )} - @@ -237,7 +219,6 @@ const LimitOrders = React.memo((props: LimitOrdersProps) => { const params = { compactView: false, - isExpertMode, recipient, showRecipient, isTradePriceUpdating, diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/limitOrdersPropsChecker.ts b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/limitOrdersPropsChecker.ts index d7b6539211..34f846f7fc 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/limitOrdersPropsChecker.ts +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/limitOrdersPropsChecker.ts @@ -5,7 +5,6 @@ import { PriceImpact } from 'legacy/hooks/usePriceImpact' import { TradeFlowContext } from 'modules/limitOrders/services/types' import { LimitOrdersSettingsState } from 'modules/limitOrders/state/limitOrdersSettingsAtom' -import { PartiallyFillableOverrideDispatcherType } from 'modules/limitOrders/state/partiallyFillableOverride' import { TradeWidgetActions } from 'modules/trade' import { TradeFormValidation } from 'modules/tradeFormValidation' @@ -21,10 +20,7 @@ export interface LimitOrdersProps { isUnlocked: boolean isRateLoading: boolean showRecipient: boolean - isExpertMode: boolean - recipient: string | null - partiallyFillableOverride: PartiallyFillableOverrideDispatcherType rateInfoParams: RateInfoParams priceImpact: PriceImpact @@ -46,7 +42,6 @@ export function limitOrdersPropsChecker(a: LimitOrdersProps, b: LimitOrdersProps a.showRecipient === b.showRecipient && a.recipient === b.recipient && a.widgetActions === b.widgetActions && - a.partiallyFillableOverride[0] === b.partiallyFillableOverride[0] && checkRateInfoParams(a.rateInfoParams, b.rateInfoParams) && checkPriceImpact(a.priceImpact, b.priceImpact) && checkTradeFlowContext(a.tradeContext, b.tradeContext) && diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/SettingsWidget/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/SettingsWidget/index.tsx index 12a9079572..00267f9fb2 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/SettingsWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/SettingsWidget/index.tsx @@ -1,71 +1,29 @@ import { useAtomValue, useSetAtom } from 'jotai' -import React, { useCallback, useState } from 'react' +import React from 'react' import { Menu, MenuItem } from '@reach/menu-button' -import { ExpertModeIndicator, MenuContent, SettingsButton, SettingsIcon } from 'modules/trade/pure/Settings' - -import { ExpertModeModal } from 'common/pure/ExpertModeModal' +import { MenuContent, SettingsButton, SettingsIcon } from 'modules/trade/pure/Settings' import { Settings } from '../../pure/Settings' -import { - limitOrdersSettingsAtom, - LimitOrdersSettingsState, - updateLimitOrdersSettingsAtom, -} from '../../state/limitOrdersSettingsAtom' +import { limitOrdersSettingsAtom, updateLimitOrdersSettingsAtom } from '../../state/limitOrdersSettingsAtom' export function SettingsWidget() { const settingsState = useAtomValue(limitOrdersSettingsAtom) const updateSettingsState = useSetAtom(updateLimitOrdersSettingsAtom) - const [showExpertConfirm, setShowExpertConfirm] = useState(false) - - const onStateChanged = useCallback( - (state: Partial) => { - const { expertMode } = state - - if (expertMode !== undefined) { - const isExpertModeOn = !settingsState.expertMode && expertMode - const isExpertModeOff = settingsState.expertMode && !expertMode - - if (isExpertModeOn) { - setShowExpertConfirm(true) - } else if (isExpertModeOff) { - updateSettingsState({ expertMode: false }) - } - } else { - updateSettingsState(state) - } - }, - [settingsState, updateSettingsState] - ) - const onEnableExpertMode = useCallback(() => { - updateSettingsState({ expertMode: true }) - setShowExpertConfirm(false) - }, [updateSettingsState, setShowExpertConfirm]) return ( <> - {settingsState.expertMode && ( - - 🐮 - 🥋 - - )} void 0}> - + - setShowExpertConfirm(false)} - onEnable={onEnableExpertMode} - /> ) } diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeButtons/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeButtons/index.tsx index 9e08190405..427132504d 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeButtons/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeButtons/index.tsx @@ -21,7 +21,6 @@ import { limitOrdersTradeButtonsMap } from './limitOrdersTradeButtonsMap' import { useLimitOrdersFormState } from '../../hooks/useLimitOrdersFormState' -const DO_TRADE_TEXT = 'Place limit order' const CONFIRM_TEXT = 'Review limit order' export interface TradeButtonsProps { @@ -40,9 +39,8 @@ export function TradeButtons(props: TradeButtonsProps) { const handleTrade = useHandleOrderPlacement(tradeContext, priceImpact, settingsState, tradeConfirmActions) const confirmTrade = tradeConfirmActions.onOpen - const isExpertMode = settingsState.expertMode - const defaultText = isExpertMode ? DO_TRADE_TEXT : CONFIRM_TEXT + const defaultText = CONFIRM_TEXT const tradeFormButtonContext = useTradeFormButtonContext(defaultText, { doTrade: handleTrade, confirmTrade }) @@ -63,11 +61,9 @@ export function TradeButtons(props: TradeButtonsProps) { return ( ) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitOrdersWarningsAccepted.ts b/apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitOrdersWarningsAccepted.ts index 8a3f1bd9bf..70b7df391e 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitOrdersWarningsAccepted.ts +++ b/apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitOrdersWarningsAccepted.ts @@ -1,22 +1,16 @@ import { useAtomValue } from 'jotai' import { useMemo } from 'react' -import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom' import { limitOrdersWarningsAtom } from 'modules/limitOrders/state/limitOrdersWarningsAtom' export function useLimitOrdersWarningsAccepted(isConfirmScreen: boolean): boolean { - const { expertMode } = useAtomValue(limitOrdersSettingsAtom) const { isPriceImpactAccepted, isRateImpactAccepted } = useAtomValue(limitOrdersWarningsAtom) return useMemo(() => { - if (expertMode) { - return true - } - if (isConfirmScreen) { return isRateImpactAccepted } else { return isPriceImpactAccepted } - }, [isConfirmScreen, expertMode, isPriceImpactAccepted, isRateImpactAccepted]) + }, [isConfirmScreen, isPriceImpactAccepted, isRateImpactAccepted]) } diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx index df49f8cc0c..f1d4599a3c 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx @@ -2,7 +2,6 @@ import { Settings, SettingsProps } from './index' const defaultProps: SettingsProps = { state: { - expertMode: true, showRecipient: false, partialFillsEnabled: true, deadlineMilliseconds: 200_000, diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx index 6f5dbe5f3c..a12ec03174 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx @@ -8,17 +8,11 @@ export interface SettingsProps { } export function Settings({ state, onStateChanged }: SettingsProps) { - const { expertMode, showRecipient, partialFillsEnabled } = state + const { showRecipient, partialFillsEnabled } = state return ( Interface Settings - onStateChanged({ expertMode: !expertMode })} - /> approve(): Promise wrap(): Promise swap(): Promise @@ -36,17 +34,11 @@ export function useEthFlowActions(callbacks: EthFlowActionCallbacks): EthFlowAct const { chainId } = useWalletInfo() const { v2Trade: trade } = useDerivedSwapInfo() - const ethFlowContext = useAtomValue(ethFlowContextAtom) const updateEthFlowContext = useSetAtom(updateEthFlowContextAtom) const { onCurrencySelection } = useSwapActionHandlers() const { onOpen: openSwapConfirmModal } = useTradeConfirmActions() - const { - approve: { isNeeded: isApproveNeeded }, - wrap: { isNeeded: isWrapNeeded }, - } = ethFlowContext - return useMemo(() => { function sendTransaction(type: 'approve' | 'wrap', callback: () => Promise): Promise { updateEthFlowContext({ [type]: { inProgress: true } }) @@ -88,13 +80,6 @@ export function useEthFlowActions(callbacks: EthFlowActionCallbacks): EthFlowAct }) } - const expertModeFlow = () => { - return Promise.all([ - isApproveNeeded ? approve(false) : undefined, // - isWrapNeeded ? wrap(false) : undefined, - ]).then(() => void 0) - } - const directSwap = () => { if (!chainId || !trade) return @@ -107,17 +92,7 @@ export function useEthFlowActions(callbacks: EthFlowActionCallbacks): EthFlowAct swap, approve, wrap, - expertModeFlow, directSwap, } - }, [ - callbacks, - isApproveNeeded, - isWrapNeeded, - chainId, - trade, - updateEthFlowContext, - onCurrencySelection, - openSwapConfirmModal, - ]) + }, [callbacks, chainId, trade, updateEthFlowContext, onCurrencySelection, openSwapConfirmModal]) } diff --git a/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/hooks/useSetupEthFlow.ts b/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/hooks/useSetupEthFlow.ts index a9b9713a8d..f6f5fb387f 100644 --- a/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/hooks/useSetupEthFlow.ts +++ b/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/hooks/useSetupEthFlow.ts @@ -1,56 +1,28 @@ -import { useAtomValue, useSetAtom } from 'jotai' -import { useEffect, useState } from 'react' +import { useSetAtom } from 'jotai' +import { useEffect } from 'react' -import { delay } from '@cowprotocol/common-utils' - -import { ActivityDescriptors, ActivityStatus } from 'legacy/hooks/useRecentActivity' +import { ActivityDescriptors } from 'legacy/hooks/useRecentActivity' import { ApprovalState } from 'common/hooks/useApproveState' -import { EthFlowActions } from './useEthFlowActions' - -import { EthFlowState } from '../../../services/ethFlow/types' -import { - ethFlowContextAtom, - resetEthFlowContextAtom, - updateEthFlowContextAtom, -} from '../../../state/EthFlow/ethFlowContextAtom' +import { resetEthFlowContextAtom, updateEthFlowContextAtom } from '../../../state/EthFlow/ethFlowContextAtom' interface EthFlowSetupParams { - state: EthFlowState - ethFlowActions: EthFlowActions approvalState: ApprovalState approveActivity: ActivityDescriptors | null wrapActivity: ActivityDescriptors | null - isExpertMode: boolean hasEnoughWrappedBalanceForSwap: boolean } -// used to avoid jarring UI effect from race between closing modal after successful operation(s) -// and the UI update showing confirmed actions -const MODAL_CLOSE_DELAY = 1000 // 1s - export function useSetupEthFlow({ - state, - ethFlowActions, - isExpertMode, hasEnoughWrappedBalanceForSwap, approvalState, approveActivity, wrapActivity, }: EthFlowSetupParams) { - const ethFlowContext = useAtomValue(ethFlowContextAtom) const updateEthFlowContext = useSetAtom(updateEthFlowContextAtom) const resetEthFlowContext = useSetAtom(resetEthFlowContextAtom) - const [isExpertModeRunning, setExpertModeRunning] = useState(false) - const [isContextInited, setContextInited] = useState(false) - - const { - approve: { isNeeded: isApproveNeeded, txStatus: approveTxStatus }, - wrap: { isNeeded: isWrapNeeded, txStatus: wrapTxStatus }, - } = ethFlowContext - // Reset context once useEffect(() => { resetEthFlowContext() @@ -63,7 +35,6 @@ export function useSetupEthFlow({ wrap: { isNeeded: !hasEnoughWrappedBalanceForSwap }, approve: { isNeeded: approvalState !== ApprovalState.APPROVED }, }) - setContextInited(true) }, [updateEthFlowContext, hasEnoughWrappedBalanceForSwap, approvalState]) // Bind txStatus @@ -73,45 +44,4 @@ export function useSetupEthFlow({ approve: { txStatus: approveActivity?.status || null }, }) }, [updateEthFlowContext, approveActivity?.status, wrapActivity?.status]) - - // Run Expert mode once after context initialization - useEffect(() => { - if (isExpertMode && isContextInited && !isExpertModeRunning) { - if (isWrapNeeded || isApproveNeeded) { - setExpertModeRunning(true) - ethFlowActions.expertModeFlow() - } - } - }, [ - isWrapNeeded, - isApproveNeeded, - ethFlowActions, - isExpertMode, - isContextInited, - isExpertModeRunning, - setExpertModeRunning, - ]) - - // Open swap confirmation modal when Expert mode flow finished - useEffect(() => { - // approve state can be CONFIRMED but the amount approved can be insufficient - const approveInsufficient = state === EthFlowState.ApproveInsufficient - const isApprovePassed = isApproveNeeded - ? !approveInsufficient && approveTxStatus === ActivityStatus.CONFIRMED - : true - const isWrapPassed = isWrapNeeded ? wrapTxStatus === ActivityStatus.CONFIRMED : true - - if (isExpertMode && isExpertModeRunning && isApprovePassed && isWrapPassed) { - delay(MODAL_CLOSE_DELAY).then(ethFlowActions.swap) - } - }, [ - state, - ethFlowActions, - isExpertMode, - isApproveNeeded, - approveTxStatus, - isWrapNeeded, - wrapTxStatus, - isExpertModeRunning, - ]) } diff --git a/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/index.tsx b/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/index.tsx index 091a713bf1..7fa30f2562 100644 --- a/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/index.tsx +++ b/apps/cowswap-frontend/src/modules/swap/containers/EthFlow/index.tsx @@ -9,7 +9,6 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import { useSingleActivityDescriptor } from 'legacy/hooks/useRecentActivity' import { WrapUnwrapCallback } from 'legacy/hooks/useWrapCallback' -import { useIsExpertMode } from 'legacy/state/user/hooks' import { getDerivedEthFlowState } from 'modules/swap/containers/EthFlow/utils/getDerivedEthFlowState' import { EthFlowModalContent } from 'modules/swap/pure/EthFlow/EthFlowModalContent' @@ -25,6 +24,7 @@ import useNativeCurrency from 'lib/hooks/useNativeCurrency' import { useEthFlowActions } from './hooks/useEthFlowActions' import useRemainingNativeTxsAndCosts from './hooks/useRemainingNativeTxsAndCosts' import { useSetupEthFlow } from './hooks/useSetupEthFlow' + export interface EthFlowProps { nativeInput?: CurrencyAmount hasEnoughWrappedBalanceForSwap: boolean @@ -41,7 +41,6 @@ export function EthFlowModal({ hasEnoughWrappedBalanceForSwap, }: EthFlowProps) { const { chainId } = useWalletInfo() - const isExpertMode = useIsExpertMode() const native = useNativeCurrency() const wrapped = useWrappedToken() const { state: approvalState } = useApproveState(nativeInput || null) @@ -71,7 +70,7 @@ export function EthFlowModal({ nativeInput, }) - const state = useMemo(() => getDerivedEthFlowState(ethFlowContext, isExpertMode), [isExpertMode, ethFlowContext]) + const state = useMemo(() => getDerivedEthFlowState(ethFlowContext), [ethFlowContext]) const wrappingPreview: WrappingPreviewProps = { native, @@ -82,9 +81,6 @@ export function EthFlowModal({ } useSetupEthFlow({ - state, - ethFlowActions, - isExpertMode, hasEnoughWrappedBalanceForSwap, approvalState, approveActivity, @@ -96,7 +92,6 @@ export function EthFlowModal({ return ( @@ -29,7 +28,7 @@ interface TradeBasicDetailsProp extends BoxProps { } export function TradeBasicDetails(props: TradeBasicDetailsProp) { - const { trade, allowedSlippage, isExpertMode, allowsOffchainSigning, fee, isReviewSwap, ...boxProps } = props + const { trade, allowedSlippage, allowsOffchainSigning, fee, isReviewSwap, ...boxProps } = props const allowedSlippagePercent = !(allowedSlippage instanceof Percent) ? INITIAL_ALLOWED_SLIPPAGE_PERCENT : allowedSlippage @@ -43,13 +42,10 @@ export function TradeBasicDetails(props: TradeBasicDetailsProp) { const isExactIn = trade?.tradeType === TradeType.EXACT_INPUT const showRowSlippage = - (isReviewSwap || - isEoaEthFlow || - isExpertMode || - !allowedSlippagePercent.equalTo(INITIAL_ALLOWED_SLIPPAGE_PERCENT)) && + (isReviewSwap || isEoaEthFlow || !allowedSlippagePercent.equalTo(INITIAL_ALLOWED_SLIPPAGE_PERCENT)) && !isWrapOrUnwrap - const showRowReceivedAfterSlippage = (isReviewSwap || isExpertMode) && trade + const showRowReceivedAfterSlippage = isReviewSwap && trade return ( diff --git a/apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts b/apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts index 2a029334b2..f1ef7b1ee6 100644 --- a/apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts +++ b/apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts @@ -25,23 +25,18 @@ export enum SwapButtonState { NeedApprove = 'NeedApprove', SwapDisabled = 'SwapDisabled', SwapError = 'SwapError', - ExpertModeSwap = 'ExpertModeSwap', RegularSwap = 'RegularSwap', SwapWithWrappedToken = 'SwapWithWrappedToken', RegularEthFlowSwap = 'EthFlowSwap', - ExpertModeEthFlowSwap = 'ExpertModeEthFlowSwap', ApproveAndSwap = 'ApproveAndSwap', - ExpertApproveAndSwap = 'ExpertApproveAndSwap', WrapAndSwap = 'WrapAndSwap', - ExpertWrapAndSwap = 'ExpertWrapAndSwap', } export interface SwapButtonStateParams { account: string | undefined isSupportedWallet: boolean isReadonlyGnosisSafeUser: boolean - isExpertMode: boolean isSwapUnsupported: boolean isBundlingSupported: boolean quoteError: QuoteError | undefined | null @@ -74,7 +69,7 @@ export function getSwapButtonState(input: SwapButtonStateParams): SwapButtonStat const { quoteError, approvalState, isPermitSupported, amountsForSignature } = input // show approve flow when: no error on inputs, not approved or pending, or approved in current session - // never show if price impact is above threshold in non expert mode + // never show if price impact is above threshold const showApproveFlow = !isPermitSupported && !input.inputError && @@ -111,7 +106,7 @@ export function getSwapButtonState(input: SwapButtonStateParams): SwapButtonStat if (!input.isNativeIn && showApproveFlow) { if (input.isBundlingSupported) { - return input.isExpertMode ? SwapButtonState.ExpertApproveAndSwap : SwapButtonState.ApproveAndSwap + return SwapButtonState.ApproveAndSwap } return SwapButtonState.NeedApprove } @@ -130,17 +125,13 @@ export function getSwapButtonState(input: SwapButtonStateParams): SwapButtonStat if (input.isNativeIn) { if (getEthFlowEnabled(input.isSmartContractWallet === true)) { - return input.isExpertMode ? SwapButtonState.ExpertModeEthFlowSwap : SwapButtonState.RegularEthFlowSwap + return SwapButtonState.RegularEthFlowSwap } else if (input.isBundlingSupported) { - return input.isExpertMode ? SwapButtonState.ExpertWrapAndSwap : SwapButtonState.WrapAndSwap + return SwapButtonState.WrapAndSwap } else { return SwapButtonState.SwapWithWrappedToken } } - if (input.isExpertMode) { - return SwapButtonState.ExpertModeSwap - } - return SwapButtonState.RegularSwap } diff --git a/apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts b/apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts index fc16848810..4796cf66dd 100644 --- a/apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts +++ b/apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts @@ -15,7 +15,6 @@ import { PriceImpact } from 'legacy/hooks/usePriceImpact' import { useToggleWalletModal } from 'legacy/state/application/hooks' import { useGetQuoteAndStatus, useIsBestQuoteLoading } from 'legacy/state/price/hooks' import { Field } from 'legacy/state/types' -import { useExpertModeManager } from 'legacy/state/user/hooks' import { useTokenSupportsPermit } from 'modules/permit' import { getSwapButtonState } from 'modules/swap/helpers/getSwapButtonState' @@ -60,7 +59,6 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext inputError: swapInputError, allowedSlippage, } = useDerivedSwapInfo() - const [isExpertMode] = useExpertModeManager() const toggleWalletModal = useToggleWalletModal() const swapFlowContext = useSwapFlowContext() const ethFlowContext = useEthFlowContext() @@ -131,7 +129,6 @@ export function useSwapButtonContext(input: SwapButtonInput): SwapButtonsContext isSmartContractWallet, isReadonlyGnosisSafeUser, isBundlingSupported, - isExpertMode, isSwapUnsupported, isNativeIn: isNativeInSwap, wrappedToken, diff --git a/apps/cowswap-frontend/src/modules/swap/hooks/useSwapState.tsx b/apps/cowswap-frontend/src/modules/swap/hooks/useSwapState.tsx index 94871d95f8..5f1337fc00 100644 --- a/apps/cowswap-frontend/src/modules/swap/hooks/useSwapState.tsx +++ b/apps/cowswap-frontend/src/modules/swap/hooks/useSwapState.tsx @@ -6,8 +6,7 @@ import { FEE_SIZE_THRESHOLD } from '@cowprotocol/common-const' import { formatSymbol, getIsNativeToken, isAddress, tryParseCurrencyAmount } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' import { useENS } from '@cowprotocol/ens' -import { useTokenBySymbolOrAddress } from '@cowprotocol/tokens' -import { useAreThereTokensWithSameSymbol } from '@cowprotocol/tokens' +import { useAreThereTokensWithSameSymbol, useTokenBySymbolOrAddress } from '@cowprotocol/tokens' import { Command } from '@cowprotocol/types' import { useWalletInfo } from '@cowprotocol/wallet' import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core' @@ -22,7 +21,6 @@ import { stringToCurrency, useTradeExactInWithFee, useTradeExactOutWithFee } fro import TradeGp from 'legacy/state/swap/TradeGp' import { isWrappingTrade } from 'legacy/state/swap/utils' import { Field } from 'legacy/state/types' -import { useIsExpertMode } from 'legacy/state/user/hooks' import { useNavigateOnCurrencySelection } from 'modules/trade/hooks/useNavigateOnCurrencySelection' import { useTradeNavigate } from 'modules/trade/hooks/useTradeNavigate' @@ -115,7 +113,6 @@ export function useSwapActionHandlers(): SwapActions { * @param trade TradeGp param */ export function useHighFeeWarning(trade?: TradeGp) { - const isExpertMode = useIsExpertMode() const { INPUT, OUTPUT, independentField } = useSwapState() const [feeWarningAccepted, setFeeWarningAccepted] = useState(false) // mod - high fee warning disable state @@ -138,7 +135,7 @@ export function useHighFeeWarning(trade?: TradeGp) { isHighFee, feePercentage, // we only care/check about feeWarning being accepted if the fee is actually high.. - feeWarningAccepted: _computeFeeWarningAcceptedState({ feeWarningAccepted, isHighFee, isExpertMode }), + feeWarningAccepted: _computeFeeWarningAcceptedState({ feeWarningAccepted, isHighFee }), setFeeWarningAccepted, } } @@ -146,16 +143,13 @@ export function useHighFeeWarning(trade?: TradeGp) { function _computeFeeWarningAcceptedState({ feeWarningAccepted, isHighFee, - isExpertMode, }: { feeWarningAccepted: boolean isHighFee: boolean - isExpertMode: boolean }) { - // in expert mode there is no fee warning thus it's true - if (isExpertMode || feeWarningAccepted) return true + if (feeWarningAccepted) return true else { - // not expert mode? is the fee high? that's only when we care + // is the fee high? that's only when we care if (isHighFee) { return feeWarningAccepted } else { @@ -165,7 +159,6 @@ function _computeFeeWarningAcceptedState({ } export function useUnknownImpactWarning() { - const isExpertMode = useIsExpertMode() const { INPUT, OUTPUT, independentField } = useSwapState() const [impactWarningAccepted, setImpactWarningAccepted] = useState(false) @@ -176,7 +169,7 @@ export function useUnknownImpactWarning() { }, [INPUT.currencyId, OUTPUT.currencyId, independentField]) return { - impactWarningAccepted: isExpertMode || impactWarningAccepted, + impactWarningAccepted, setImpactWarningAccepted, } } diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalBottomContent.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalBottomContent.tsx index 8c39e63c80..a1ae435f2e 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalBottomContent.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalBottomContent.tsx @@ -12,18 +12,8 @@ import { TradeFormBlankButton } from 'modules/tradeFormValidation' import { EthFlowState } from '../../../services/ethFlow/types' import { WrappingPreview, WrappingPreviewProps } from '../WrappingPreview' -async function runEthFlowAction( - state: EthFlowState, - ethFlowActions: EthFlowActions, - isExpertMode: boolean -): Promise { - if (state === EthFlowState.WrapAndApproveFailed) { - return ethFlowActions.expertModeFlow() - } +async function runEthFlowAction(state: EthFlowState, ethFlowActions: EthFlowActions): Promise { if (state === EthFlowState.SwapReady) { - if (isExpertMode) { - return ethFlowActions.directSwap() - } return ethFlowActions.swap() } if ([EthFlowState.WrapFailed, EthFlowState.WrapNeeded].includes(state)) { @@ -38,7 +28,6 @@ async function runEthFlowAction( export type BottomContentParams = { buttonText: string - isExpertMode: boolean state: EthFlowState ethFlowActions: EthFlowActions ethFlowContext: EthFlowContext @@ -46,30 +35,23 @@ export type BottomContentParams = { } export function EthFlowModalBottomContent(params: BottomContentParams) { - const { state, buttonText, isExpertMode, ethFlowContext, ethFlowActions, wrappingPreview } = params + const { state, buttonText, ethFlowContext, ethFlowActions, wrappingPreview } = params const { approve: { txStatus: approveTxStatus, txHash: approveTxHash }, wrap: { txStatus: wrapTxStatus, txHash: wrapTxHash }, } = ethFlowContext - const isFailedState = [ - EthFlowState.WrapAndApproveFailed, - EthFlowState.WrapFailed, - EthFlowState.ApproveFailed, - EthFlowState.ApproveInsufficient, - ].includes(state) - const showButton = !isExpertMode || isFailedState || state === EthFlowState.SwapReady - const showWrapPreview = isExpertMode || ![EthFlowState.SwapReady, EthFlowState.ApproveNeeded].includes(state) + const showWrapPreview = ![EthFlowState.SwapReady, EthFlowState.ApproveNeeded].includes(state) const [isActionInProgress, setIsActionInProgress] = useState(false) const onClick = useCallback(async () => { setIsActionInProgress(true) try { - await runEthFlowAction(state, ethFlowActions, isExpertMode) + await runEthFlowAction(state, ethFlowActions) } finally { setIsActionInProgress(false) } - }, [state, ethFlowActions, isExpertMode]) + }, [state, ethFlowActions]) const showLoader = useMemo(() => { const approveInProgress = approveTxStatus !== null ? approveTxStatus === ActivityStatus.PENDING : !!approveTxHash @@ -89,11 +71,9 @@ export function EthFlowModalBottomContent(params: BottomContentParams) { <> {showWrapPreview && } - {showButton && ( - - {buttonText} - - )} + + {buttonText} + ) } diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/configs.ts b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/configs.ts index d9105b1298..b5648ccb99 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/configs.ts +++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/configs.ts @@ -6,31 +6,16 @@ export interface EthFlowConfig { descriptions: string[] } -const expertCommonDescription = 'Transaction signature required, please check your connected wallet.' const commonSingularTxProgressDescription = 'Transaction in progress. See below for live status updates.' const commonFailedSingularTxGasLimitDescription = 'Check that you are providing a sufficient gas limit for the transaction in your wallet.' export const ethFlowConfigs: { - [key in EthFlowState]: (context: { - isExpertMode: boolean - nativeSymbol: string - wrappedSymbol: string - }) => EthFlowConfig + [key in EthFlowState]: (context: { nativeSymbol: string; wrappedSymbol: string }) => EthFlowConfig } = { /** * FAILED operations - * wrap/approve/both in expertMode failed */ - [EthFlowState.WrapAndApproveFailed]: () => ({ - title: 'Wrap and Approve failed!', - buttonText: 'Wrap and approve', - descriptions: [ - 'Both wrap and approve operations failed.', - 'Check that you are providing a sufficient gas limit for both transactions in your wallet.', - 'Click "Wrap and approve" to try again.', - ], - }), [EthFlowState.WrapFailed]: ({ nativeSymbol }) => ({ title: `Wrap ${nativeSymbol} failed`, buttonText: `Wrap ${nativeSymbol}`, @@ -51,13 +36,7 @@ export const ethFlowConfigs: { }), /** * PENDING operations - * wrap/approve/both in expertMode */ - [EthFlowState.WrapAndApprovePending]: () => ({ - title: 'Wrap and approve', - buttonText: '', - descriptions: ['Transactions in progress. See below for live status updates of each operation.'], - }), [EthFlowState.WrapPending]: ({ nativeSymbol }) => ({ title: `Swap with Wrapped ${nativeSymbol}`, buttonText: '', @@ -78,31 +57,19 @@ export const ethFlowConfigs: { }), /** * NEEDS operations - * need to wrap/approve/both in expertMode */ - [EthFlowState.WrapAndApproveNeeded]: ({ nativeSymbol }) => ({ - title: 'Wrap and approve', - buttonText: '', - descriptions: [ - `2 pending on-chain transactions: ${nativeSymbol} wrap and approve. Please check your connected wallet for both signature requests.`, - ], - }), - [EthFlowState.WrapNeeded]: ({ isExpertMode, nativeSymbol, wrappedSymbol }) => ({ + [EthFlowState.WrapNeeded]: ({ nativeSymbol, wrappedSymbol }) => ({ title: `Swap with Wrapped ${nativeSymbol}`, buttonText: `Wrap ${nativeSymbol}`, - descriptions: isExpertMode - ? [expertCommonDescription] - : [ - `To continue, click below to wrap your ${nativeSymbol} to ${wrappedSymbol} via an on-chain ERC20 transaction.`, - ], + descriptions: [ + `To continue, click below to wrap your ${nativeSymbol} to ${wrappedSymbol} via an on-chain ERC20 transaction.`, + ], }), - [EthFlowState.ApproveNeeded]: ({ isExpertMode, wrappedSymbol }) => ({ + [EthFlowState.ApproveNeeded]: ({ wrappedSymbol }) => ({ title: `Approve ${wrappedSymbol}`, buttonText: `Approve ${wrappedSymbol}`, descriptions: [ - isExpertMode - ? expertCommonDescription - : `It is required to do a one-time approval of ${wrappedSymbol} via an on-chain ERC20 Approve transaction.`, + `It is required to do a one-time approval of ${wrappedSymbol} via an on-chain ERC20 Approve transaction.`, ], }), [EthFlowState.SwapReady]: ({ wrappedSymbol }) => ({ diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.cosmos.tsx index b90c5a555d..5ff87f80f4 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.cosmos.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.cosmos.tsx @@ -71,7 +71,6 @@ function Custom() { defaultValue: EthFlowState.WrapNeeded, }) const state = getStateFromDescription(stateDescription) - const [isExpertMode] = useValue('isExpertMode', { defaultValue: false }) const balanceChecks = { isLowBalance: useValue('isLowBalance', { defaultValue: false })[0], txsRemaining: useValue('txsRemaining', { defaultValue: '' })[0], @@ -101,7 +100,6 @@ function Custom() { const modalProps = getEthFlowModalContentProps({ state, - isExpertMode, approveAction, wrapAction, balanceChecks, diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.tsx index 47420237e4..96d8c55e58 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/index.tsx @@ -15,7 +15,6 @@ import { NewModal, NewModalContentBottom, NewModalContentTop } from 'common/pure export interface EthFlowModalContentProps { state: EthFlowState - isExpertMode: boolean ethFlowContext: EthFlowContext ethFlowActions: EthFlowActions balanceChecks: BalanceChecks @@ -23,11 +22,11 @@ export interface EthFlowModalContentProps { onDismiss: Command } export function EthFlowModalContent(props: EthFlowModalContentProps) { - const { ethFlowActions, state, isExpertMode, balanceChecks, onDismiss, wrappingPreview, ethFlowContext } = props + const { ethFlowActions, state, balanceChecks, onDismiss, wrappingPreview, ethFlowContext } = props const nativeSymbol = wrappingPreview.native.symbol || '' const wrappedSymbol = wrappingPreview.wrapped.symbol || '' - const { title, descriptions, buttonText } = ethFlowConfigs[state]({ isExpertMode, nativeSymbol, wrappedSymbol }) + const { title, descriptions, buttonText } = ethFlowConfigs[state]({ nativeSymbol, wrappedSymbol }) return ( @@ -43,7 +42,6 @@ export function EthFlowModalContent(props: EthFlowModalContentProps) { {props.swapInputError} ), - [SwapButtonState.ExpertModeSwap]: (props: SwapButtonsContext) => ( - - - Swap - - - ), [SwapButtonState.RegularSwap]: (props: SwapButtonsContext) => ( @@ -162,17 +155,6 @@ const swapButtonStateMap: { [key in SwapButtonState]: (props: SwapButtonsContext ), - [SwapButtonState.ExpertApproveAndSwap]: (props: SwapButtonsContext) => ( - - - - Confirm (Approve{' '} - {' '} - and Swap) - - - - ), [SwapButtonState.WrapAndSwap]: (props: SwapButtonsContext) => ( @@ -180,27 +162,13 @@ const swapButtonStateMap: { [key in SwapButtonState]: (props: SwapButtonsContext ), - [SwapButtonState.ExpertWrapAndSwap]: (props: SwapButtonsContext) => ( - - - - Confirm (Wrap {} and Swap) - - - - ), - [SwapButtonState.RegularEthFlowSwap]: (props: SwapButtonsContext) => ( - - ), - [SwapButtonState.ExpertModeEthFlowSwap]: (props: SwapButtonsContext) => ( - - ), + [SwapButtonState.RegularEthFlowSwap]: (props: SwapButtonsContext) => , } -function EthFlowSwapButton(props: SwapButtonsContext & { isExpertMode: boolean }) { +function EthFlowSwapButton(props: SwapButtonsContext) { return ( <> - + Swap diff --git a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.cosmos.tsx index 5c11862952..c23d86bc0f 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.cosmos.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.cosmos.tsx @@ -34,7 +34,6 @@ const rateInfoParams: RateInfoParams = { } const defaultProps: TradeRatesProps = { trade, - isExpertMode: false, allowsOffchainSigning: true, isFeeGreater: false, discount: 10, diff --git a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.tsx b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.tsx index dabdf9044a..6f313ad09d 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.tsx @@ -17,7 +17,6 @@ import * as styledEl from './styled' export interface TradeRatesProps { trade: TradeGp | undefined - isExpertMode: boolean allowedSlippage: Percent allowsOffchainSigning: boolean userAllowedSlippage: Percent | string @@ -35,7 +34,6 @@ export const TradeRates = React.memo(function (props: TradeRatesProps) { isFeeGreater, fee, trade, - isExpertMode, allowsOffchainSigning, userAllowedSlippage, // discount, @@ -57,7 +55,6 @@ export const TradeRates = React.memo(function (props: TradeRatesProps) { {showTradeBasicDetails && ( setFeeWarningAccepted((state) => !state) : undefined} + acceptWarningCb={account ? () => setFeeWarningAccepted((state) => !state) : undefined} /> {!hideUnknownImpactWarning && ( setImpactWarningAccepted((state) => !state)} /> diff --git a/apps/cowswap-frontend/src/modules/swap/services/ethFlow/mocks.ts b/apps/cowswap-frontend/src/modules/swap/services/ethFlow/mocks.ts index ff0f74e5c6..15f698ecd2 100644 --- a/apps/cowswap-frontend/src/modules/swap/services/ethFlow/mocks.ts +++ b/apps/cowswap-frontend/src/modules/swap/services/ethFlow/mocks.ts @@ -30,10 +30,6 @@ const ethFlowActionsMock: EthFlowActions = { console.log('ETH FLOW: APPROVE') return Promise.resolve(undefined) }, - expertModeFlow(): Promise { - console.log('ETH FLOW: EXPERT MODE FLOW') - return Promise.resolve(undefined) - }, swap(): Promise { console.log('ETH FLOW: SWAP') return Promise.resolve(undefined) @@ -50,7 +46,6 @@ const ethFlowActionsMock: EthFlowActions = { export interface EthParamsCaseParams { state?: EthFlowState - isExpertMode?: boolean approveAction?: EthFlowActionContext wrapAction?: EthFlowActionContext balanceChecks?: BalanceChecks @@ -59,7 +54,6 @@ export interface EthParamsCaseParams { export function getEthFlowModalContentProps(params: EthParamsCaseParams = {}): EthFlowModalContentProps { return { state: params.state || EthFlowState.WrapNeeded, - isExpertMode: params.isExpertMode || false, ethFlowContext: { approve: { ...defaultEthFlowContext.approve, ...params.approveAction }, wrap: { ...defaultEthFlowContext.wrap, ...params.wrapAction }, diff --git a/apps/cowswap-frontend/src/modules/swap/services/ethFlow/types.ts b/apps/cowswap-frontend/src/modules/swap/services/ethFlow/types.ts index cba4d19351..4bb7819999 100644 --- a/apps/cowswap-frontend/src/modules/swap/services/ethFlow/types.ts +++ b/apps/cowswap-frontend/src/modules/swap/services/ethFlow/types.ts @@ -1,16 +1,13 @@ export enum EthFlowState { // Requires action SwapReady = 'SwapReady', - WrapAndApproveNeeded = 'WrapAndApproveNeeded', ApproveNeeded = 'ApproveNeeded', WrapNeeded = 'WrapNeeded', // Error ApproveInsufficient = 'ApproveInsufficient', ApproveFailed = 'ApproveFailed', WrapFailed = 'WrapFailed', - WrapAndApproveFailed = 'WrapAndApproveFailed', // Pending - WrapAndApprovePending = 'WrapAndApprovePending', WrapPending = 'WrapPending', ApprovePending = 'ApprovePending', Loading = 'Loading', diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetUpdaters.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetUpdaters.tsx index e08f444ddc..c2c8c998a8 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetUpdaters.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetUpdaters.tsx @@ -14,12 +14,10 @@ import { RecipientAddressUpdater } from '../../updaters/RecipientAddressUpdater' export function TradeWidgetUpdaters({ disableQuotePolling, - isExpertMode, disableNativeSelling, children, }: { disableQuotePolling: boolean - isExpertMode: boolean disableNativeSelling: boolean children: ReactNode }) { @@ -33,7 +31,7 @@ export function TradeWidgetUpdaters({ {!disableQuotePolling && } - + {disableNativeSelling && } {children} diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx index 86f16c2b32..e46c725f20 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx @@ -10,17 +10,13 @@ export const TradeWidgetContainer = styledEl.Container export function TradeWidget(props: TradeWidgetProps) { const { id, slots, params, children: confirmModal } = props - const { disableQuotePolling = false, isExpertMode, disableNativeSelling = false } = params + const { disableQuotePolling = false, disableNativeSelling = false } = params const modals = TradeWidgetModals(confirmModal) return ( <> - + {slots.updaters} diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts index 733b931ae3..56a2a5f090 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts @@ -19,7 +19,6 @@ interface TradeWidgetParams { compactView: boolean showRecipient: boolean isTradePriceUpdating: boolean - isExpertMode: boolean priceImpact: PriceImpact disableQuotePolling?: boolean disableNativeSelling?: boolean diff --git a/apps/cowswap-frontend/src/modules/trade/containers/WrapFlowActionButton/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/WrapFlowActionButton/index.tsx index bd1466d89d..e0f693cca8 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/WrapFlowActionButton/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/WrapFlowActionButton/index.tsx @@ -15,12 +15,6 @@ export function WrapFlowActionButton() { if (!tradeFormButtonContext) return null return ( - + ) } diff --git a/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts index f903943839..e7a172504b 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts +++ b/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts @@ -64,53 +64,6 @@ export const MenuContent = styled(MenuList)` color: var(${UI.COLOR_TEXT_PAPER}); ` -export const ExpertModeIndicator = styled.div` - display: inline-block; - position: relative; - width: 12px; - height: 24px; - font-size: 20px; - user-select: none; - margin-right: 17px; - animation: expertModeOn 3s normal forwards ease-in-out; - color: inherit; - - > span:first-child { - position: absolute; - top: -10px; - z-index: 1; - } - - > span:last-child { - position: absolute; - top: 2px; - } - - @keyframes expertModeOn { - 0% { - filter: none; - } - 15% { - filter: sepia(1); - } - 30% { - filter: sepia(0); - } - 45% { - filter: sepia(1); - } - 60% { - filter: sepia(0); - } - 75% { - filter: sepia(1); - } - 100% { - filter: sepia(0); - } - } -` - export const SettingsIcon = styled(SettingsIconRaw)` --size: var(${UI.ICON_SIZE_NORMAL}); height: var(--size); diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/index.tsx b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/index.tsx index c94e194a96..8be512c666 100644 --- a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/index.tsx +++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/index.tsx @@ -10,24 +10,18 @@ import { TradeFormBlankButton } from '../TradeFormBlankButton' export interface TradeFormButtonsProps { validation: TradeFormValidation | null context: TradeFormButtonContext - doTradeText: string confirmText: string - isExpertMode: boolean isDisabled?: boolean } export function TradeFormButtons(props: TradeFormButtonsProps) { - const { validation, context, isExpertMode, isDisabled, doTradeText, confirmText } = props + const { validation, context, isDisabled, confirmText } = props // When there are no validation errors if (validation === null) { return ( - (isExpertMode ? context.doTrade() : context.confirmTrade())} - > - {isExpertMode ? doTradeText : confirmText} + context.confirmTrade()}> + {confirmText} ) } diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx index 9a78042853..19dbfa1523 100644 --- a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx +++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx @@ -122,18 +122,6 @@ export const tradeButtonsMap: Record ) }, - [TradeFormValidation.ExpertApproveAndSwap]: (context, isDisabled = false) => { - const currency = context.derivedState.slippageAdjustedSellAmount?.currency - const tokenToApprove = currency && getWrappedToken(currency) - - return ( - - - Confirm (Approve {} and {context.defaultText}) - - - ) - }, [TradeFormValidation.ApproveAndSwap]: (context, isDisabled = false) => { const currency = context.derivedState.slippageAdjustedSellAmount?.currency const tokenToApprove = currency && getWrappedToken(currency) diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts b/apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts index 7286b8af52..9fe854ae6f 100644 --- a/apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts +++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts @@ -10,7 +10,6 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor approvalState, isBundlingSupported, isWrapUnwrap, - isExpertMode, isSupportedWallet, isSafeReadonlyUser, isSwapUnsupported, @@ -84,7 +83,7 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor if (approvalRequired) { if (isBundlingSupported) { - return isExpertMode ? TradeFormValidation.ExpertApproveAndSwap : TradeFormValidation.ApproveAndSwap + return TradeFormValidation.ApproveAndSwap } return TradeFormValidation.ApproveRequired } diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts b/apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts index dcb19f3920..d2cbfad2b9 100644 --- a/apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts +++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts @@ -31,7 +31,6 @@ export enum TradeFormValidation { BalanceInsufficient, // Approve - ExpertApproveAndSwap, ApproveAndSwap, ApproveRequired, @@ -39,10 +38,6 @@ export enum TradeFormValidation { SellNativeToken, } -export interface TradeFormValidationLocalContext { - isExpertMode: boolean -} - export interface TradeFormValidationCommonContext { account: string | undefined derivedTradeState: TradeDerivedState @@ -57,7 +52,7 @@ export interface TradeFormValidationCommonContext { isPermitSupported: boolean } -export interface TradeFormValidationContext extends TradeFormValidationLocalContext, TradeFormValidationCommonContext {} +export interface TradeFormValidationContext extends TradeFormValidationCommonContext {} export interface TradeFormButtonContext { defaultText: string diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/updaters/TradeFormValidationUpdater.ts b/apps/cowswap-frontend/src/modules/tradeFormValidation/updaters/TradeFormValidationUpdater.ts index e23877104c..c8451038e2 100644 --- a/apps/cowswap-frontend/src/modules/tradeFormValidation/updaters/TradeFormValidationUpdater.ts +++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/updaters/TradeFormValidationUpdater.ts @@ -1,12 +1,11 @@ import { useSetAtom } from 'jotai' -import { useEffect, useMemo } from 'react' +import { useEffect } from 'react' import { useTradeFormValidationContext } from '../hooks/useTradeFormValidationContext' import { tradeFormValidationContextAtom } from '../state/tradeFormValidationContextAtom' -export function TradeFormValidationUpdater({ isExpertMode }: { isExpertMode: boolean }) { +export function TradeFormValidationUpdater() { const updateContext = useSetAtom(tradeFormValidationContextAtom) - const localContext = useMemo(() => ({ isExpertMode }), [isExpertMode]) const commonContext = useTradeFormValidationContext() useEffect(() => { @@ -14,9 +13,8 @@ export function TradeFormValidationUpdater({ isExpertMode }: { isExpertMode: boo updateContext({ ...commonContext, - ...localContext, }) - }, [commonContext, localContext, updateContext]) + }, [commonContext, updateContext]) return null } diff --git a/apps/cowswap-frontend/src/modules/twap/containers/ActionButtons/index.tsx b/apps/cowswap-frontend/src/modules/twap/containers/ActionButtons/index.tsx index 7dce3c832c..755b9a5b93 100644 --- a/apps/cowswap-frontend/src/modules/twap/containers/ActionButtons/index.tsx +++ b/apps/cowswap-frontend/src/modules/twap/containers/ActionButtons/index.tsx @@ -3,8 +3,7 @@ import React from 'react' import { twapConversionAnalytics } from '@cowprotocol/analytics' import { useTradeConfirmActions } from 'modules/trade' -import { TradeFormButtons, TradeFormValidation } from 'modules/tradeFormValidation' -import { useTradeFormButtonContext } from 'modules/tradeFormValidation' +import { TradeFormButtons, TradeFormValidation, useTradeFormButtonContext } from 'modules/tradeFormValidation' import { useAreWarningsAccepted } from '../../hooks/useAreWarningsAccepted' import { useTwapWarningsContext } from '../../hooks/useTwapWarningsContext' @@ -47,12 +46,9 @@ export function ActionButtons({ return ( ) 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 27c63d4a71..1e226b389b 100644 --- a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx +++ b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx @@ -37,7 +37,7 @@ import { } from '../../state/twapOrdersSettingsAtom' import { isPriceProtectionNotEnough } from '../../utils/isPriceProtectionNotEnough' -const BUNDLE_APPROVAL_STATES = [TradeFormValidation.ApproveAndSwap, TradeFormValidation.ExpertApproveAndSwap] +const BUNDLE_APPROVAL_STATES = [TradeFormValidation.ApproveAndSwap] interface TwapFormWarningsProps { localFormValidation: TwapFormState | null diff --git a/apps/cowswap-frontend/src/modules/twap/hooks/useTwapWarningsContext.ts b/apps/cowswap-frontend/src/modules/twap/hooks/useTwapWarningsContext.ts index b02275864d..f0736468fe 100644 --- a/apps/cowswap-frontend/src/modules/twap/hooks/useTwapWarningsContext.ts +++ b/apps/cowswap-frontend/src/modules/twap/hooks/useTwapWarningsContext.ts @@ -5,11 +5,7 @@ import { useWalletInfo } from '@cowprotocol/wallet' import { useTradePriceImpact } from 'modules/trade' import { TradeFormValidation, useGetTradeFormValidation } from 'modules/tradeFormValidation' -const NOT_BLOCKING_VALIDATIONS = [ - TradeFormValidation.ExpertApproveAndSwap, - TradeFormValidation.ApproveAndSwap, - TradeFormValidation.ApproveRequired, -] +const NOT_BLOCKING_VALIDATIONS = [TradeFormValidation.ApproveAndSwap, TradeFormValidation.ApproveRequired] export interface TwapWarningsContext { canTrade: boolean @@ -23,11 +19,8 @@ export function useTwapWarningsContext(): TwapWarningsContext { const priceImpactParams = useTradePriceImpact() return useMemo(() => { - // TODO: bind to settings - const expertMode = false const canTrade = !primaryFormValidation || NOT_BLOCKING_VALIDATIONS.includes(primaryFormValidation) - const showPriceImpactWarning = - canTrade && !expertMode && !priceImpactParams.loading && !priceImpactParams.priceImpact + const showPriceImpactWarning = canTrade && !priceImpactParams.loading && !priceImpactParams.priceImpact const walletIsNotConnected = !account return { diff --git a/apps/cowswap-frontend/src/modules/wallet/containers/FollowPendingTxPopup/index.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/FollowPendingTxPopup/index.tsx index dd469ab2d1..aadcb54af8 100644 --- a/apps/cowswap-frontend/src/modules/wallet/containers/FollowPendingTxPopup/index.tsx +++ b/apps/cowswap-frontend/src/modules/wallet/containers/FollowPendingTxPopup/index.tsx @@ -1,22 +1,20 @@ import { useAtomValue, useSetAtom } from 'jotai' import { selectAtom } from 'jotai/utils' -import React, { useEffect, useMemo, useCallback, useRef, PropsWithChildren } from 'react' +import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef } from 'react' import { Command } from '@cowprotocol/types' import { useRecentActivityLastPendingOrder } from 'legacy/hooks/useRecentActivity' import { Order } from 'legacy/state/orders/actions' -import { useIsExpertMode } from 'legacy/state/user/hooks' import { FollowPendingTxPopupUI } from './FollowPendingTxPopupUI' -import { useSetShowFollowPendingTxPopup } from '../../hooks/useSetShowFollowPendingTxPopup' import { + followPendingTxPopupAtom, + handleCloseOrderPopupAtom, handleFollowPendingTxPopupAtom, handleHidePopupPermanentlyAtom, showFollowTxPopupAtom, - followPendingTxPopupAtom, - handleCloseOrderPopupAtom, } from '../../state/followPendingTxPopupAtom' export function useLastPendingOrder(): { lastPendingOrder: Order | null; onClose: Command } { @@ -65,19 +63,9 @@ const useShowingPopupFirstTime = (orderId: string | undefined) => { } export const FollowPendingTxPopup: React.FC = ({ children }): JSX.Element => { - const setShowFollowPendingTxPopup = useSetShowFollowPendingTxPopup() const setHidePendingTxPopupPermanently = useSetAtom(handleHidePopupPermanentlyAtom) - const isExpertMode = useIsExpertMode() const { lastPendingOrder, onClose } = useLastPendingOrder() - const { showPopup: showFollowPendingTxPopup, firstTimePopupOrderAppears } = useShowingPopupFirstTime( - lastPendingOrder?.id - ) - - useEffect(() => { - if (isExpertMode && lastPendingOrder && firstTimePopupOrderAppears) { - setShowFollowPendingTxPopup(true) - } - }, [isExpertMode, lastPendingOrder, firstTimePopupOrderAppears, setShowFollowPendingTxPopup]) + const { showPopup: showFollowPendingTxPopup } = useShowingPopupFirstTime(lastPendingOrder?.id) return (