Add Recipient toggle (#2013)

* switcher added * simplify workflow * add toggle recipient state * tooltip txt upd * decrease label top padding * block recipient toggle on expert mode * always cleanup recipient when toggling visibility * add missing dep * disable recipient toggle in expert mode * hide and remove recipient value when toggles are off * add padding to ouput Co-authored-by: Ramiro Vazquez <[email protected]> Co-authored-by: Agustín Longoni <[email protected]>
gnosis · Jan 24, 2022 · 2ffd5fe · 2ffd5fe
1 parent 0073200
commit 2ffd5fe
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 14 deletions.
diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx
@@ -10,8 +10,8 @@ import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useModalOpen, useToggleSettingsMenu } from 'state/application/hooks'
+import { useExpertModeManager, useRecipientToggleManager } from 'state/user/hooks'
 import { ApplicationModal } from 'state/application/reducer'
-import { /* useClientSideRouter, */ useExpertModeManager } from 'state/user/hooks'
 import { TYPE } from 'theme'
 import { ButtonError } from 'components/Button'
 import { AutoColumn } from 'components/Column'
@@ -127,6 +127,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
   const theme = useContext(ThemeContext)
 
   const [expertMode, toggleExpertMode] = useExpertModeManager()
+  const [recipientToggleVisible, toggleRecipientVisibility] = useRecipientToggleManager()
 
   // const [clientSideRouter, setClientSideRouter] = useClientSideRouter()
 
@@ -244,15 +245,38 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
                   expertMode
                     ? () => {
                         toggleExpertMode()
+                        toggleRecipientVisibility(false)
                         setShowConfirmation(false)
                       }
                     : () => {
                         toggle()
+                        toggleRecipientVisibility(true)
                         setShowConfirmation(true)
                       }
                 }
               />
             </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>Allows you to choose a destination address for the swap other than the connected one.</Trans>
+                  }
+                />
+              </RowFixed>
+              <Toggle
+                id="toggle-recipient-mode-button"
+                isActive={recipientToggleVisible || expertMode}
+                toggle={() => (expertMode ? null : toggleRecipientVisibility())}
+                className={expertMode ? 'disabled' : ''}
+              />
+            </RowBetween>
           </AutoColumn>
         </MenuFlyout>
       )}

diff --git a/src/custom/components/Toggle/index.tsx b/src/custom/components/Toggle/index.tsx
@@ -16,9 +16,17 @@ const WrappedToggle = styled(ToggleUni)`
       border: 2px solid ${({ theme }) => theme.text1};
     }
   }
-  .disabled {
-    background: ${({ theme }) => theme.primary1};
-    color: ${({ theme }) => theme.text2};
+
+  &.disabled {
+    cursor: default;
+
+    ${ToggleElement} {
+      opacity: 0.5;
+
+      &:hover {
+        border: 2px solid transparent;
+      }
+    }
   }
 `
 

diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
@@ -280,8 +280,8 @@ SwapModalHeaderProps) {
         )}
       </AutoColumn>
       {recipient !== null ? (
-        <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
-          <TYPE.main>
+        <AutoColumn justify="flex-start" gap="sm">
+          <TYPE.main style={{ padding: '0.75rem 1rem' }}>
             <Trans>
               Output will be sent to{' '}
               <b title={recipient}>{isAddress(recipient) ? shortenAddress(recipient) : recipient}</b>

diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
@@ -63,7 +63,7 @@ import {
   useHighFeeWarning,
   useUnknownImpactWarning,
 } from 'state/swap/hooks'
-import { useExpertModeManager } from 'state/user/hooks'
+import { useExpertModeManager, useRecipientToggleManager } from 'state/user/hooks'
 import { /* HideSmall, */ LinkStyledButton, TYPE, ButtonSize } from 'theme'
 // import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 // import { getTradeVersion } from 'utils/getTradeVersion'
@@ -170,6 +170,8 @@ export default function Swap({
   // for expert mode
   const [isExpertMode] = useExpertModeManager()
 
+  const [recipientToggleVisible] = useRecipientToggleManager()
+
   // get version from the url
   // const toggledVersion = useToggledVersion()
 
@@ -530,7 +532,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}
@@ -592,13 +594,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>

diff --git a/src/state/user/actions.ts b/src/state/user/actions.ts
@@ -23,6 +23,8 @@ export const updateOptimismAlphaAcknowledged = createAction<{ optimismAlphaAckno
 )
 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 updateUserClientSideRouter = createAction<{ userClientSideRouter: boolean }>(
   'user/updateUserClientSideRouter'

diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
@@ -21,6 +21,7 @@ import {
   SerializedToken,
   updateArbitrumAlphaAcknowledged,
   updateHideClosedPositions,
+  updateRecipientToggleVisible,
   updateOptimismAlphaAcknowledged,
   updateUserClientSideRouter,
   updateUserDarkMode,
@@ -29,6 +30,7 @@ import {
   updateUserLocale,
   updateUserSlippageTolerance,
 } from './actions'
+import { useSwapActionHandlers } from '../swap/hooks'
 
 export function serializeToken(token: Token): SerializedToken {
   return {
@@ -106,6 +108,29 @@ export function useExpertModeManager(): [boolean, () => void] {
   return [expertMode, toggleSetExpertMode]
 }
 
+export function useIsRecipientToggleVisible(): boolean {
+  return useAppSelector((state) => state.user.recipientToggleVisible)
+}
+
+export function useRecipientToggleManager(): [boolean, (value?: boolean) => void] {
+  const dispatch = useAppDispatch()
+  const recipientToggleVisible = useIsRecipientToggleVisible()
+  const { onChangeRecipient } = useSwapActionHandlers()
+
+  const toggleRecipientVisibility = useCallback(
+    (value?: boolean) => {
+      const newRecipientToggleVisibilityValue = value ?? !recipientToggleVisible
+      dispatch(updateRecipientToggleVisible({ recipientToggleVisible: newRecipientToggleVisibilityValue }))
+      if (!newRecipientToggleVisibilityValue) {
+        onChangeRecipient(null)
+      }
+    },
+    [recipientToggleVisible, dispatch, onChangeRecipient]
+  )
+
+  return [recipientToggleVisible, toggleRecipientVisibility]
+}
+
 export function useClientSideRouter(): [boolean, (userClientSideRouter: boolean) => void] {
   const dispatch = useAppDispatch()
 

diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts
@@ -10,17 +10,18 @@ import {
   removeSerializedToken,
   SerializedPair,
   SerializedToken,
-  updateArbitrumAlphaAcknowledged,
-  updateHideClosedPositions,
   updateMatchesDarkMode,
   updateOptimismAlphaAcknowledged,
   updateUserClientSideRouter,
   updateUserDarkMode,
   updateUserDeadline,
   updateUserExpertMode,
-  updateUserLocale,
   updateUserSlippageTolerance,
   toggleURLWarning,
+  updateHideClosedPositions,
+  updateUserLocale,
+  updateArbitrumAlphaAcknowledged,
+  updateRecipientToggleVisible,
 } from './actions'
 
 const currentTimestamp = () => new Date().getTime()
@@ -40,6 +41,8 @@ export interface UserState {
 
   userExpertMode: boolean
 
+  recipientToggleVisible: boolean
+
   userClientSideRouter: boolean // whether routes should be calculated with the client side router only
 
   // hides closed (inactive) positions across the app
@@ -79,6 +82,7 @@ export const initialState: UserState = {
   optimismAlphaAcknowledged: false,
   userDarkMode: null,
   userExpertMode: false,
+  recipientToggleVisible: false,
   userLocale: null,
   userClientSideRouter: false,
   userHideClosedPositions: false,
@@ -144,6 +148,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()