From 30b63116872ec7285809b0ab072dc119a2c20f2f Mon Sep 17 00:00:00 2001 From: infiniteMajor Date: Sat, 18 Dec 2021 16:34:19 +0300 Subject: [PATCH 01/11] switcher added --- .../components/Settings/SettingsMod.tsx | 49 +++++++++++++++++-- src/custom/components/Settings/index.tsx | 11 ++++- src/custom/pages/Swap/SwapMod.tsx | 2 + 3 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index cb1f1cf59..10b13ee8e 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -122,6 +122,8 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu const theme = useContext(ThemeContext) const [expertMode, toggleExpertMode] = useExpertModeManager() + const [recipientMode, toggleRecipientMode] = useState(false) + const [modeToConfirm, setModeToConfirm] = useState(0) // const [singleHopOnly, setSingleHopOnly] = useUserSingleHopOnly() @@ -130,6 +132,8 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu useOnClickOutside(node, open ? toggle : undefined) + const mods = ['', 'Expert', 'Recipicent'] + console.log('settings mods:', modeToConfirm, mods[modeToConfirm], 'expert:', expertMode, 'recipient:', recipientMode) return ( // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 @@ -147,8 +151,8 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu - Expert mode turns off the confirm transaction prompt and allows high slippage trades that often result - in bad rates and lost funds. + {mods[modeToConfirm]} mode turns off the confirm transaction prompt and allows high slippage trades + that often result in bad rates and lost funds. @@ -160,20 +164,21 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu onClick={() => { const confirmWord = t`confirm` if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) { - toggleExpertMode() + modeToConfirm === 1 && toggleExpertMode() + modeToConfirm === 2 && toggleRecipientMode(true) setShowConfirmation(false) } }} > - Turn On Expert Mode + Turn On {mods[modeToConfirm]} Mode - + {/* {expertMode ? ( @@ -214,10 +219,44 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu expertMode ? () => { toggleExpertMode() + setModeToConfirm(0) setShowConfirmation(false) } : () => { toggle() + setModeToConfirm(1) + setShowConfirmation(true) + } + } + /> + + + + + + Toggle Recipient Mode + + Allow high price impact trades and skip the confirm screen. Use at your own risk. + } + /> + + { + toggleRecipientMode(!recipientMode) + setModeToConfirm(0) + setShowConfirmation(false) + } + : () => { + toggle() + setModeToConfirm(2) setShowConfirmation(true) } } diff --git a/src/custom/components/Settings/index.tsx b/src/custom/components/Settings/index.tsx index d007daace..c05515ac9 100644 --- a/src/custom/components/Settings/index.tsx +++ b/src/custom/components/Settings/index.tsx @@ -112,6 +112,7 @@ const Settings = styled(SettingsMod)` export interface SettingsButtonProps { toggleSettings: () => void expertMode: boolean + recipientMode: boolean } export interface SettingsTabProp extends WithClassName { @@ -119,7 +120,8 @@ export interface SettingsTabProp extends WithClassName { placeholderSlippage: Percent } -function SettingsButton({ toggleSettings, expertMode }: SettingsButtonProps) { +function SettingsButton({ toggleSettings, expertMode, recipientMode }: SettingsButtonProps) { + console.log('mode: ', 'recipient: ', recipientMode, 'expert: ', expertMode) return ( Settings @@ -131,6 +133,13 @@ function SettingsButton({ toggleSettings, expertMode }: SettingsButtonProps) { ) : null} + {recipientMode ? ( + + + 💼 + + + ) : null} ) } diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx index 8c2e782e5..1aa6f268c 100644 --- a/src/custom/pages/Swap/SwapMod.tsx +++ b/src/custom/pages/Swap/SwapMod.tsx @@ -444,6 +444,8 @@ export default function Swap({ singleHopOnly, ]) + console.log('recipient', recipient) + // errors const [showInverted, setShowInverted] = useState(false) From f971dc897ee55bf876b2b285fe3f08898abd467d Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 21 Dec 2021 07:26:42 -0300 Subject: [PATCH 02/11] simplify workflow --- .../components/Settings/SettingsMod.tsx | 36 +++++-------------- src/custom/components/Settings/index.tsx | 11 +----- src/custom/pages/Swap/SwapMod.tsx | 2 -- 3 files changed, 10 insertions(+), 39 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index 10b13ee8e..1974a1af9 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -122,8 +122,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu const theme = useContext(ThemeContext) const [expertMode, toggleExpertMode] = useExpertModeManager() - const [recipientMode, toggleRecipientMode] = useState(false) - const [modeToConfirm, setModeToConfirm] = useState(0) + const [showRecipient, setShowRecipient] = useState(false) // const [singleHopOnly, setSingleHopOnly] = useUserSingleHopOnly() @@ -132,8 +131,6 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu useOnClickOutside(node, open ? toggle : undefined) - const mods = ['', 'Expert', 'Recipicent'] - console.log('settings mods:', modeToConfirm, mods[modeToConfirm], 'expert:', expertMode, 'recipient:', recipientMode) return ( // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 @@ -151,8 +148,8 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu - {mods[modeToConfirm]} mode turns off the confirm transaction prompt and allows high slippage trades - that often result in bad rates and lost funds. + Expert mode turns off the confirm transaction prompt and allows high slippage trades that often result + in bad rates and lost funds. @@ -164,21 +161,20 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu onClick={() => { const confirmWord = t`confirm` if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) { - modeToConfirm === 1 && toggleExpertMode() - modeToConfirm === 2 && toggleRecipientMode(true) + toggleExpertMode() setShowConfirmation(false) } }} > - Turn On {mods[modeToConfirm]} Mode + Turn On Expert Mode - + {/* {expertMode ? ( @@ -219,12 +215,10 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu expertMode ? () => { toggleExpertMode() - setModeToConfirm(0) setShowConfirmation(false) } : () => { toggle() - setModeToConfirm(1) setShowConfirmation(true) } } @@ -234,7 +228,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu - Toggle Recipient Mode + Toggle Recipient { - toggleRecipientMode(!recipientMode) - setModeToConfirm(0) - setShowConfirmation(false) - } - : () => { - toggle() - setModeToConfirm(2) - setShowConfirmation(true) - } - } + isActive={showRecipient} + toggle={() => setShowRecipient((showRecipient) => !showRecipient)} /> {/* diff --git a/src/custom/components/Settings/index.tsx b/src/custom/components/Settings/index.tsx index c05515ac9..d007daace 100644 --- a/src/custom/components/Settings/index.tsx +++ b/src/custom/components/Settings/index.tsx @@ -112,7 +112,6 @@ const Settings = styled(SettingsMod)` export interface SettingsButtonProps { toggleSettings: () => void expertMode: boolean - recipientMode: boolean } export interface SettingsTabProp extends WithClassName { @@ -120,8 +119,7 @@ export interface SettingsTabProp extends WithClassName { placeholderSlippage: Percent } -function SettingsButton({ toggleSettings, expertMode, recipientMode }: SettingsButtonProps) { - console.log('mode: ', 'recipient: ', recipientMode, 'expert: ', expertMode) +function SettingsButton({ toggleSettings, expertMode }: SettingsButtonProps) { return ( Settings @@ -133,13 +131,6 @@ function SettingsButton({ toggleSettings, expertMode, recipientMode }: SettingsB ) : null} - {recipientMode ? ( - - - 💼 - - - ) : null} ) } diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx index 1aa6f268c..8c2e782e5 100644 --- a/src/custom/pages/Swap/SwapMod.tsx +++ b/src/custom/pages/Swap/SwapMod.tsx @@ -444,8 +444,6 @@ export default function Swap({ singleHopOnly, ]) - console.log('recipient', recipient) - // errors const [showInverted, setShowInverted] = useState(false) From 4ead68bccb9bb9b0c9b32c3427736eba547ca19c Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 21 Dec 2021 07:48:33 -0300 Subject: [PATCH 03/11] add toggle recipient state --- src/custom/components/Settings/SettingsMod.tsx | 8 ++++---- src/custom/pages/Swap/SwapMod.tsx | 15 ++++++++++----- src/state/user/actions.ts | 2 ++ src/state/user/hooks.tsx | 16 ++++++++++++++++ src/state/user/reducer.ts | 8 ++++++++ 5 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index 1974a1af9..cec01f02a 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/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,7 +122,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu const theme = useContext(ThemeContext) const [expertMode, toggleExpertMode] = useExpertModeManager() - const [showRecipient, setShowRecipient] = useState(false) + const [recipientToggleVisible, toggleRecipientVisibility] = useRecipientToggleManager() // const [singleHopOnly, setSingleHopOnly] = useUserSingleHopOnly() @@ -240,8 +240,8 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu setShowRecipient((showRecipient) => !showRecipient)} + isActive={recipientToggleVisible} + toggle={toggleRecipientVisibility} /> {/* diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx index 8c2e782e5..934222e3c 100644 --- 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, 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({ - + */} {/* GP ARROW SWITCHER */} - + - {recipient === null && !showWrap && isExpertMode ? ( + {recipient === null && !showWrap && (isExpertMode || recipientToggleVisible) ? ( onChangeRecipient('')}> + Add a send (optional) diff --git a/src/state/user/actions.ts b/src/state/user/actions.ts index 7d1a726c6..97083aab4 100644 --- a/src/state/user/actions.ts +++ b/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') diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 904a51598..951509a47 100644 --- a/src/state/user/hooks.tsx +++ b/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() diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts index 65a9bc1a6..293a220dd 100644 --- a/src/state/user/reducer.ts +++ b/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() From 492de7d9025cd5627984eaa418558b03bcdbebb4 Mon Sep 17 00:00:00 2001 From: infiniteMajor Date: Tue, 21 Dec 2021 17:06:59 +0300 Subject: [PATCH 04/11] tooltip txt upd --- src/custom/components/Settings/SettingsMod.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index cec01f02a..0eff6d706 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -234,7 +234,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu bgColor={theme.bg3} color={theme.text1} text={ - Allow high price impact trades and skip the confirm screen. Use at your own risk. + Allows you to choose a destination address for the swap other than the connected one. } /> From 50e7f4f78e78027e9106be8072e5e18b73557654 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Fri, 14 Jan 2022 17:02:08 -0300 Subject: [PATCH 05/11] decrease label top padding --- .../components/swap/SwapModalHeader/SwapModalHeaderMod.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx index 69ce8f653..326a40474 100644 --- a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx +++ b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx @@ -280,7 +280,7 @@ SwapModalHeaderProps) { )} {recipient !== null ? ( - + Output will be sent to{' '} From b27d969130abfaef443e7fa07bfd752dcde103b0 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Fri, 14 Jan 2022 17:26:05 -0300 Subject: [PATCH 06/11] block recipient toggle on expert mode --- src/custom/components/Settings/SettingsMod.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index 6c53d83e0..0ee2488a8 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -245,6 +245,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu expertMode ? () => { toggleExpertMode() + toggleRecipientVisibility() setShowConfirmation(false) } : () => { @@ -263,15 +264,13 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu Allow high price impact trades and skip the confirm screen. Use at your own risk. - } + text={Enables the add recipient button in the Swap screen} /> (expertMode ? null : toggleRecipientVisibility())} /> From 6df9c1a5b2cea0c2dfc32648cdc1d645f29c47a0 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Fri, 14 Jan 2022 17:37:57 -0300 Subject: [PATCH 07/11] always cleanup recipient when toggling visibility --- src/state/user/hooks.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 4a6d296a1..e408efdcc 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -30,6 +30,7 @@ import { updateUserLocale, updateUserSlippageTolerance, } from './actions' +import { useSwapActionHandlers } from '../swap/hooks' export function serializeToken(token: Token): SerializedToken { return { @@ -114,9 +115,13 @@ export function useIsRecipientToggleVisible(): boolean { export function useRecipientToggleManager(): [boolean, () => void] { const dispatch = useAppDispatch() const recipientToggleVisible = useIsRecipientToggleVisible() + const { onChangeRecipient } = useSwapActionHandlers() const toggleRecipientVisibility = useCallback(() => { dispatch(updateRecipientToggleVisible({ recipientToggleVisible: !recipientToggleVisible })) + if (!recipientToggleVisible) { + onChangeRecipient(null) + } }, [recipientToggleVisible, dispatch]) return [recipientToggleVisible, toggleRecipientVisibility] From 8b943422597b9c5cd80dab3db77606ad65cae2e9 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Fri, 14 Jan 2022 17:53:05 -0300 Subject: [PATCH 08/11] add missing dep --- src/state/user/hooks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index e408efdcc..cafb7f94d 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -122,7 +122,7 @@ export function useRecipientToggleManager(): [boolean, () => void] { if (!recipientToggleVisible) { onChangeRecipient(null) } - }, [recipientToggleVisible, dispatch]) + }, [recipientToggleVisible, dispatch, onChangeRecipient]) return [recipientToggleVisible, toggleRecipientVisibility] } From a643445725a3f4bd1b8f10d02b9a29aba6bb770f Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Mon, 17 Jan 2022 13:19:00 -0300 Subject: [PATCH 09/11] disable recipient toggle in expert mode --- src/custom/components/Settings/SettingsMod.tsx | 1 + src/custom/components/Toggle/index.tsx | 14 +++++++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index 3a8387d45..b5a19abe7 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -273,6 +273,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu id="toggle-recipient-mode-button" isActive={recipientToggleVisible || expertMode} toggle={() => (expertMode ? null : toggleRecipientVisibility())} + className={expertMode ? 'disabled' : ''} /> diff --git a/src/custom/components/Toggle/index.tsx b/src/custom/components/Toggle/index.tsx index 5028727c7..a0f790a43 100644 --- 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; + } + } } ` From 835e32b107a127c9174569a03c39d62b8ecd5f90 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Mon, 17 Jan 2022 13:34:34 -0300 Subject: [PATCH 10/11] hide and remove recipient value when toggles are off --- src/custom/components/Settings/SettingsMod.tsx | 3 ++- src/state/user/hooks.tsx | 18 +++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx index b5a19abe7..a912a7e05 100644 --- a/src/custom/components/Settings/SettingsMod.tsx +++ b/src/custom/components/Settings/SettingsMod.tsx @@ -245,11 +245,12 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu expertMode ? () => { toggleExpertMode() - toggleRecipientVisibility() + toggleRecipientVisibility(false) setShowConfirmation(false) } : () => { toggle() + toggleRecipientVisibility(true) setShowConfirmation(true) } } diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index cafb7f94d..d9a3d0089 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -112,17 +112,21 @@ export function useIsRecipientToggleVisible(): boolean { return useAppSelector((state) => state.user.recipientToggleVisible) } -export function useRecipientToggleManager(): [boolean, () => void] { +export function useRecipientToggleManager(): [boolean, (value?: boolean) => void] { const dispatch = useAppDispatch() const recipientToggleVisible = useIsRecipientToggleVisible() const { onChangeRecipient } = useSwapActionHandlers() - const toggleRecipientVisibility = useCallback(() => { - dispatch(updateRecipientToggleVisible({ recipientToggleVisible: !recipientToggleVisible })) - if (!recipientToggleVisible) { - onChangeRecipient(null) - } - }, [recipientToggleVisible, dispatch, onChangeRecipient]) + const toggleRecipientVisibility = useCallback( + (value?: boolean) => { + const newRecipientToggleVisibilityValue = value ?? !recipientToggleVisible + dispatch(updateRecipientToggleVisible({ recipientToggleVisible: newRecipientToggleVisibilityValue })) + if (!newRecipientToggleVisibilityValue) { + onChangeRecipient(null) + } + }, + [recipientToggleVisible, dispatch, onChangeRecipient] + ) return [recipientToggleVisible, toggleRecipientVisibility] } From ea7c982a1087d31611b8627efb1b5ad531dc0888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 21 Jan 2022 14:18:12 -0300 Subject: [PATCH 11/11] add padding to ouput --- .../components/swap/SwapModalHeader/SwapModalHeaderMod.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx index 326a40474..c12049e01 100644 --- a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx +++ b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx @@ -281,7 +281,7 @@ SwapModalHeaderProps) { {recipient !== null ? ( - + Output will be sent to{' '} {isAddress(recipient) ? shortenAddress(recipient) : recipient}