feat(settings): remove expert mode (cowprotocol#3905)

* feat: remove expert mode * fix: show wrap button on classic ethflow * chore: remove more expert mode left overs * fix: remove e2e expert mode tests * fix: remove unused variables * refactor: remove unnecessary useCallback
xyzseer · Feb 26, 2024 · 4f98075 · 4f98075
1 parent 7a5b64d
commit 4f98075
Show file tree

Hide file tree

Showing 53 changed files with 87 additions and 773 deletions.
diff --git 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
diff --git a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx
diff --git 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
     <StyledMenu ref={node as any} className={className}>
-      <ExpertModeModal
-        isOpen={showConfirmation}
-        onDismiss={() => setShowConfirmation(false)}
-        onEnable={() => {
-          toggleExpertMode()
-          setShowConfirmation(false)
-        }}
-      />
-      <SettingsButton expertMode={expertMode} toggleSettings={toggle} />
+      <SettingsButton toggleSettings={toggle} />
       {open && (
         <MenuFlyout>
           <AutoColumn gap="md" style={{ padding: '1rem' }}>
@@ -152,34 +120,6 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
               <Trans>Interface Settings</Trans>
             </Text>
 
-            <RowBetween>
-              <RowFixed>
-                <ThemedText.Black fontWeight={400} fontSize={14}>
-                  <Trans>Expert Mode</Trans>
-                </ThemedText.Black>
-                <QuestionHelper
-                  text={
-                    <Trans>Allow high price impact trades and skip the confirm screen. Use at your own risk.</Trans>
-                  }
-                />
-              </RowFixed>
-              <Toggle
-                id="toggle-expert-mode-button"
-                isActive={expertMode}
-                toggle={
-                  expertMode
-                    ? () => {
-                        toggleExpertMode()
-                        setShowConfirmation(false)
-                      }
-                    : () => {
-                        toggle()
-                        setShowConfirmation(true)
-                      }
-                }
-              />
-            </RowBetween>
-
             <RowBetween>
               <RowFixed>
                 <ThemedText.Black fontWeight={400} fontSize={14}>

diff --git 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,25 +131,17 @@ const Settings = styled(SettingsMod)`
 
 export interface SettingsButtonProps {
   toggleSettings: Command
-  expertMode: boolean
 }
 
 export interface SettingsTabProp extends WithClassName {
   SettingsButton: React.FC<SettingsButtonProps>
   placeholderSlippage: Percent
 }
 
-function SettingsButton({ toggleSettings, expertMode }: SettingsButtonProps) {
+function SettingsButton({ toggleSettings }: SettingsButtonProps) {
   return (
     <StyledMenuButton onClick={toggleSettings} id="open-settings-dialog-button">
       <StyledMenuIcon />
-      {expertMode ? (
-        <EmojiWrapper>
-          <span role="img" aria-label="Expert Mode Turned On">
-            🥋
-          </span>
-        </EmojiWrapper>
-      ) : null}
     </StyledMenuButton>
   )
 }

diff --git 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
@@ -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
@@ -113,7 +113,6 @@ export function AdvancedOrdersWidget({ children, updaters, params, confirmConten
     showRecipient,
     isTradePriceUpdating,
     priceImpact,
-    isExpertMode: false, // TODO: bind value
     disablePriceImpact,
   }