|
| 1 | +import React, { useRef, useEffect, useContext, useState } from 'react' |
| 2 | +import { Settings, X } from 'react-feather' |
| 3 | +import styled from 'styled-components' |
| 4 | + |
| 5 | +import { |
| 6 | + useUserSlippageTolerance, |
| 7 | + useExpertModeManager, |
| 8 | + useUserDeadline, |
| 9 | + useDarkModeManager |
| 10 | +} from '../../state/user/hooks' |
| 11 | +import SlippageTabs from '../SlippageTabs' |
| 12 | +import { RowFixed, RowBetween } from '../Row' |
| 13 | +import { TYPE } from '../../theme' |
| 14 | +import QuestionHelper from '../QuestionHelper' |
| 15 | +import Toggle from '../Toggle' |
| 16 | +import { ThemeContext } from 'styled-components' |
| 17 | +import { AutoColumn } from '../Column' |
| 18 | +import { ButtonError } from '../Button' |
| 19 | +import { useSettingsMenuOpen, useToggleSettingsMenu } from '../../state/application/hooks' |
| 20 | +import { Text } from 'rebass' |
| 21 | +import Modal from '../Modal' |
| 22 | + |
| 23 | +const StyledMenuIcon = styled(Settings)` |
| 24 | + height: 20px; |
| 25 | + width: 20px; |
| 26 | +
|
| 27 | + > * { |
| 28 | + stroke: ${({ theme }) => theme.text1}; |
| 29 | + } |
| 30 | +` |
| 31 | + |
| 32 | +const StyledCloseIcon = styled(X)` |
| 33 | + height: 20px; |
| 34 | + width: 20px; |
| 35 | + :hover { |
| 36 | + cursor: pointer; |
| 37 | + } |
| 38 | +
|
| 39 | + > * { |
| 40 | + stroke: ${({ theme }) => theme.text1}; |
| 41 | + } |
| 42 | +` |
| 43 | + |
| 44 | +const StyledMenuButton = styled.button` |
| 45 | + position: relative; |
| 46 | + width: 100%; |
| 47 | + height: 100%; |
| 48 | + border: none; |
| 49 | + background-color: transparent; |
| 50 | + margin: 0; |
| 51 | + padding: 0; |
| 52 | + height: 35px; |
| 53 | + background-color: ${({ theme }) => theme.bg3}; |
| 54 | +
|
| 55 | + padding: 0.15rem 0.5rem; |
| 56 | + border-radius: 0.5rem; |
| 57 | +
|
| 58 | + :hover, |
| 59 | + :focus { |
| 60 | + cursor: pointer; |
| 61 | + outline: none; |
| 62 | + background-color: ${({ theme }) => theme.bg4}; |
| 63 | + } |
| 64 | +
|
| 65 | + svg { |
| 66 | + margin-top: 2px; |
| 67 | + } |
| 68 | +` |
| 69 | +const EmojiWrapper = styled.div` |
| 70 | + position: absolute; |
| 71 | + bottom: -6px; |
| 72 | + right: 0px; |
| 73 | + font-size: 14px; |
| 74 | +` |
| 75 | + |
| 76 | +const StyledMenu = styled.div` |
| 77 | + margin-left: 0.5rem; |
| 78 | + display: flex; |
| 79 | + justify-content: center; |
| 80 | + align-items: center; |
| 81 | + position: relative; |
| 82 | + border: none; |
| 83 | + text-align: left; |
| 84 | +` |
| 85 | + |
| 86 | +const MenuFlyout = styled.span` |
| 87 | + min-width: 20.125rem; |
| 88 | + background-color: ${({ theme }) => theme.bg1}; |
| 89 | + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), |
| 90 | + 0px 24px 32px rgba(0, 0, 0, 0.01); |
| 91 | + border-radius: 0.5rem; |
| 92 | + display: flex; |
| 93 | + flex-direction: column; |
| 94 | + font-size: 1rem; |
| 95 | + position: absolute; |
| 96 | + top: 3rem; |
| 97 | + right: 0rem; |
| 98 | + z-index: 100; |
| 99 | +
|
| 100 | + ${({ theme }) => theme.mediaWidth.upToExtraSmall` |
| 101 | + min-width: 18.125rem; |
| 102 | + right: -46px; |
| 103 | + `}; |
| 104 | +` |
| 105 | + |
| 106 | +const Break = styled.div` |
| 107 | + width: 100%; |
| 108 | + height: 1px; |
| 109 | + background-color: ${({ theme }) => theme.bg3}; |
| 110 | +` |
| 111 | + |
| 112 | +const ModalContentWrapper = styled.div` |
| 113 | + display: flex; |
| 114 | + align-items: center; |
| 115 | + justify-content: center; |
| 116 | + padding: 2rem 0; |
| 117 | + background-color: ${({ theme }) => theme.bg2}; |
| 118 | + border-radius: 20px; |
| 119 | +` |
| 120 | + |
| 121 | +export default function SettingsTab() { |
| 122 | + const node = useRef<HTMLDivElement>() |
| 123 | + const open = useSettingsMenuOpen() |
| 124 | + const toggle = useToggleSettingsMenu() |
| 125 | + |
| 126 | + const theme = useContext(ThemeContext) |
| 127 | + const [userSlippageTolerance, setUserslippageTolerance] = useUserSlippageTolerance() |
| 128 | + |
| 129 | + const [deadline, setDeadline] = useUserDeadline() |
| 130 | + |
| 131 | + const [expertMode, toggleExpertMode] = useExpertModeManager() |
| 132 | + |
| 133 | + const [darkMode, toggleDarkMode] = useDarkModeManager() |
| 134 | + |
| 135 | + // show confirmation view before turning on |
| 136 | + const [showConfirmation, setShowConfirmation] = useState(false) |
| 137 | + |
| 138 | + useEffect(() => { |
| 139 | + const handleClickOutside = e => { |
| 140 | + if (node.current?.contains(e.target) ?? false) { |
| 141 | + return |
| 142 | + } |
| 143 | + toggle() |
| 144 | + } |
| 145 | + |
| 146 | + if (open) { |
| 147 | + document.addEventListener('mousedown', handleClickOutside) |
| 148 | + } else { |
| 149 | + document.removeEventListener('mousedown', handleClickOutside) |
| 150 | + } |
| 151 | + |
| 152 | + return () => { |
| 153 | + document.removeEventListener('mousedown', handleClickOutside) |
| 154 | + } |
| 155 | + }, [open, toggle]) |
| 156 | + |
| 157 | + return ( |
| 158 | + <StyledMenu ref={node}> |
| 159 | + <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)}> |
| 160 | + <ModalContentWrapper> |
| 161 | + <AutoColumn gap="lg"> |
| 162 | + <RowBetween style={{ padding: '0 2rem' }}> |
| 163 | + <div /> |
| 164 | + <Text fontWeight={500} fontSize={20}> |
| 165 | + Are you sure? |
| 166 | + </Text> |
| 167 | + <StyledCloseIcon onClick={() => setShowConfirmation(false)} /> |
| 168 | + </RowBetween> |
| 169 | + <Break /> |
| 170 | + <AutoColumn gap="lg" style={{ padding: '0 2rem' }}> |
| 171 | + <Text fontWeight={500} fontSize={20}> |
| 172 | + Expert mode turns off the confirm transaction prompt and allows high slippage trades that often result |
| 173 | + in bad rates and lost funds. |
| 174 | + </Text> |
| 175 | + <Text fontWeight={600} fontSize={20}> |
| 176 | + ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING. |
| 177 | + </Text> |
| 178 | + <ButtonError |
| 179 | + error={true} |
| 180 | + padding={'12px'} |
| 181 | + onClick={() => { |
| 182 | + if (window.prompt(`Please type the word "confirm" to enable expert mode.`) === 'confirm') { |
| 183 | + toggleExpertMode() |
| 184 | + setShowConfirmation(false) |
| 185 | + } |
| 186 | + }} |
| 187 | + > |
| 188 | + <Text fontSize={20} fontWeight={500}> |
| 189 | + Turn On Expert Mode |
| 190 | + </Text> |
| 191 | + </ButtonError> |
| 192 | + </AutoColumn> |
| 193 | + </AutoColumn> |
| 194 | + </ModalContentWrapper> |
| 195 | + </Modal> |
| 196 | + <StyledMenuButton onClick={toggle}> |
| 197 | + <StyledMenuIcon /> |
| 198 | + {expertMode && ( |
| 199 | + <EmojiWrapper> |
| 200 | + <span role="img" aria-label="wizard-icon"> |
| 201 | + 🧙 |
| 202 | + </span> |
| 203 | + </EmojiWrapper> |
| 204 | + )} |
| 205 | + </StyledMenuButton> |
| 206 | + {open && ( |
| 207 | + <MenuFlyout> |
| 208 | + <AutoColumn gap="md" style={{ padding: '1rem' }}> |
| 209 | + <Text fontWeight={600} fontSize={14}> |
| 210 | + Transaction Settings |
| 211 | + </Text> |
| 212 | + <SlippageTabs |
| 213 | + rawSlippage={userSlippageTolerance} |
| 214 | + setRawSlippage={setUserslippageTolerance} |
| 215 | + deadline={deadline} |
| 216 | + setDeadline={setDeadline} |
| 217 | + /> |
| 218 | + <Text fontWeight={600} fontSize={14}> |
| 219 | + Interface Settings |
| 220 | + </Text> |
| 221 | + <RowBetween> |
| 222 | + <RowFixed> |
| 223 | + <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}> |
| 224 | + Toggle Expert Mode |
| 225 | + </TYPE.black> |
| 226 | + <QuestionHelper text="Bypasses confirmation modals and allows high slippage trades. Use at your own risk." /> |
| 227 | + </RowFixed> |
| 228 | + <Toggle |
| 229 | + isActive={expertMode} |
| 230 | + toggle={ |
| 231 | + expertMode |
| 232 | + ? () => { |
| 233 | + toggleExpertMode() |
| 234 | + setShowConfirmation(false) |
| 235 | + } |
| 236 | + : () => setShowConfirmation(true) |
| 237 | + } |
| 238 | + /> |
| 239 | + </RowBetween> |
| 240 | + <RowBetween> |
| 241 | + <RowFixed> |
| 242 | + <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}> |
| 243 | + Toggle Dark Mode |
| 244 | + </TYPE.black> |
| 245 | + </RowFixed> |
| 246 | + <Toggle isActive={darkMode} toggle={toggleDarkMode} /> |
| 247 | + </RowBetween> |
| 248 | + </AutoColumn> |
| 249 | + </MenuFlyout> |
| 250 | + )} |
| 251 | + </StyledMenu> |
| 252 | + ) |
| 253 | +} |
0 commit comments