switcher added

src/custom/components/Settings/SettingsMod.tsx

@@ -7,7 +7,7 @@ import styled, { ThemeContext } from 'styled-components/macro'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useToggleSettingsMenu } from 'state/application/hooks'
-import { useExpertModeManager /* , useUserSingleHopOnly */ } from 'state/user/hooks'
+import { useExpertModeManager /* , useUserSingleHopOnly */, useRecipientToggleManager } from 'state/user/hooks'
 import { TYPE } from 'theme'
 import { ButtonError } from 'components/Button'
 import { AutoColumn } from 'components/Column'
@@ -122,6 +122,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
   const theme = useContext(ThemeContext)
 
   const [expertMode, toggleExpertMode] = useExpertModeManager()
+  const [recipientToggleVisible, toggleRecipientVisibility] = useRecipientToggleManager()
 
   // const [singleHopOnly, setSingleHopOnly] = useUserSingleHopOnly()
 
@@ -223,6 +224,26 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
                 }
               />
             </RowBetween>
+
+            <RowBetween>
+              <RowFixed>
+                <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
+                  <Trans>Toggle Recipient</Trans>
+                </TYPE.black>
+                <QuestionHelper
+                  bgColor={theme.bg3}
+                  color={theme.text1}
+                  text={
+                    <Trans>Allow high price impact trades and skip the confirm screen. Use at your own risk.</Trans>
+                  }
+                />
+              </RowFixed>
+              <Toggle
+                id="toggle-recipient-mode-button"
+                isActive={recipientToggleVisible}
+                toggle={toggleRecipientVisibility}
+              />
+            </RowBetween>
             {/* <RowBetween>
               <RowFixed>
                 <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>

src/custom/pages/Swap/SwapMod.tsx

@@ -63,7 +63,7 @@ import {
   useHighFeeWarning,
   useUnknownImpactWarning,
 } from 'state/swap/hooks'
-import { useExpertModeManager, useUserSingleHopOnly } from 'state/user/hooks'
+import { useExpertModeManager, useRecipientToggleManager, useUserSingleHopOnly } from 'state/user/hooks'
 import { /* HideSmall, */ LinkStyledButton, TYPE, ButtonSize } from 'theme'
 // import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 // import { getTradeVersion } from 'utils/getTradeVersion'
@@ -169,6 +169,8 @@ export default function Swap({
   // for expert mode
   const [isExpertMode] = useExpertModeManager()
 
+  const [recipientToggleVisible] = useRecipientToggleManager()
+
   // get version from the url
   // const toggledVersion = useToggledVersion()
 
@@ -539,7 +541,7 @@ export default function Swap({
       <AffiliateStatusCheck />
       <StyledAppBody className={className}>
         <SwapHeader allowedSlippage={allowedSlippage} />
-        <Wrapper id="swap-page" className={isExpertMode ? 'expertMode' : ''}>
+        <Wrapper id="swap-page" className={isExpertMode || recipientToggleVisible ? 'expertMode' : ''}>
           <ConfirmSwapModal
             isOpen={showConfirm}
             trade={trade}
@@ -601,13 +603,16 @@ export default function Swap({
               </ArrowWrapper>
               */}
               {/* GP ARROW SWITCHER */}
-              <AutoColumn justify="space-between" style={{ margin: `${isExpertMode ? 10 : 3}px 0` }}>
+              <AutoColumn
+                justify="space-between"
+                style={{ margin: `${isExpertMode || recipientToggleVisible ? 10 : 3}px 0` }}
+              >
                 <AutoRow
-                  justify={isExpertMode ? 'space-between' : 'center'}
+                  justify={isExpertMode || recipientToggleVisible ? 'space-between' : 'center'}
                   // style={{ padding: '0 1rem' }}
                 >
                   <ArrowWrapperLoader onSwitchTokens={onSwitchTokens} setApprovalSubmitted={setApprovalSubmitted} />
-                  {recipient === null && !showWrap && isExpertMode ? (
+                  {recipient === null && !showWrap && (isExpertMode || recipientToggleVisible) ? (
                     <LinkStyledButton id="add-recipient-button" onClick={() => onChangeRecipient('')}>
                       <Trans>+ Add a send (optional)</Trans>
                     </LinkStyledButton>

src/state/user/actions.ts

@@ -20,6 +20,8 @@ export const updateArbitrumAlphaAcknowledged = createAction<{ arbitrumAlphaAckno
 )
 export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
 export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
+export const updateRecipientToggleVisible =
+  createAction<{ recipientToggleVisible: boolean }>('user/recipientToggleVisible')
 export const updateUserLocale = createAction<{ userLocale: SupportedLocale }>('user/updateUserLocale')
 export const updateUserSingleHopOnly = createAction<{ userSingleHopOnly: boolean }>('user/updateUserSingleHopOnly')
 export const updateHideClosedPositions = createAction<{ userHideClosedPositions: boolean }>('user/hideClosedPositions')

src/state/user/hooks.tsx

@@ -20,6 +20,7 @@ import {
   SerializedToken,
   updateArbitrumAlphaAcknowledged,
   updateHideClosedPositions,
+  updateRecipientToggleVisible,
   updateUserDarkMode,
   updateUserDeadline,
   updateUserExpertMode,
@@ -104,6 +105,21 @@ export function useExpertModeManager(): [boolean, () => void] {
   return [expertMode, toggleSetExpertMode]
 }
 
+export function useIsRecipientToggleVisible(): boolean {
+  return useAppSelector((state) => state.user.recipientToggleVisible)
+}
+
+export function useRecipientToggleManager(): [boolean, () => void] {
+  const dispatch = useAppDispatch()
+  const recipientToggleVisible = useIsRecipientToggleVisible()
+
+  const toggleRecipientVisibility = useCallback(() => {
+    dispatch(updateRecipientToggleVisible({ recipientToggleVisible: !recipientToggleVisible }))
+  }, [recipientToggleVisible, dispatch])
+
+  return [recipientToggleVisible, toggleRecipientVisibility]
+}
+
 export function useUserSingleHopOnly(): [boolean, (newSingleHopOnly: boolean) => void] {
   const dispatch = useAppDispatch()
 

src/state/user/reducer.ts

@@ -18,6 +18,7 @@ import {
   updateHideClosedPositions,
   updateUserLocale,
   updateArbitrumAlphaAcknowledged,
+  updateRecipientToggleVisible,
 } from './actions'
 import { SupportedLocale } from 'constants/locales'
 
@@ -36,6 +37,8 @@ export interface UserState {
 
   userExpertMode: boolean
 
+  recipientToggleVisible: boolean
+
   userSingleHopOnly: boolean // only allow swaps on direct pairs
 
   // hides closed (inactive) positions across the app
@@ -74,6 +77,7 @@ export const initialState: UserState = {
   userDarkMode: null,
   matchesDarkMode: false,
   userExpertMode: false,
+  recipientToggleVisible: false,
   userLocale: null,
   userSingleHopOnly: false,
   userHideClosedPositions: false,
@@ -136,6 +140,10 @@ export default createReducer(initialState, (builder) =>
       state.userExpertMode = action.payload.userExpertMode
       state.timestamp = currentTimestamp()
     })
+    .addCase(updateRecipientToggleVisible, (state, action) => {
+      state.recipientToggleVisible = action.payload.recipientToggleVisible
+      state.timestamp = currentTimestamp()
+    })
     .addCase(updateUserLocale, (state, action) => {
       state.userLocale = action.payload.userLocale
       state.timestamp = currentTimestamp()