DashboardEModeButton.tsx
1 import { CogIcon, LightningBoltIcon } from '@heroicons/react/solid'; 2 import { Trans } from '@lingui/macro'; 3 import { Box, Button, SvgIcon, Typography } from '@mui/material'; 4 import Menu from '@mui/material/Menu'; 5 import React, { useState } from 'react'; 6 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider'; 7 import { useModalContext } from 'src/hooks/useModal'; 8 import { useRootStore } from 'src/store/root'; 9 import { DASHBOARD, GENERAL } from 'src/utils/mixPanelEvents'; 10 11 import LightningBoltGradient from '/public/lightningBoltGradient.svg'; 12 13 import { Link } from '../../components/primitives/Link'; 14 import { Row } from '../../components/primitives/Row'; 15 import { TypographyGradient } from '../../components/primitives/TypographyGradient'; 16 import { getEmodeMessage } from '../../components/transactions/Emode/EmodeNaming'; 17 18 interface DashboardEModeButtonProps { 19 userEmodeCategoryId: number; 20 } 21 22 export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButtonProps) => { 23 const { openEmode } = useModalContext(); 24 const { eModes: _eModes } = useAppDataContext(); 25 const trackEvent = useRootStore((store) => store.trackEvent); 26 27 const iconButtonSize = 12; 28 29 const [anchorEl, setAnchorEl] = useState<Element | null>(null); 30 const open = Boolean(anchorEl); 31 const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { 32 trackEvent(DASHBOARD.E_MODE_INFO_DASHBOARD, { userEmodeCategoryId }); 33 34 setAnchorEl(event.currentTarget); 35 }; 36 const handleClose = () => { 37 setAnchorEl(null); 38 }; 39 40 const isEModeDisabled = userEmodeCategoryId === 0; 41 42 const EModeLabelMessage = () => ( 43 <Trans>{getEmodeMessage(_eModes[userEmodeCategoryId].label)}</Trans> 44 ); 45 46 return ( 47 <Box 48 sx={{ display: 'inline-flex', alignItems: 'center' }} 49 onClick={(e) => { 50 e.stopPropagation(); 51 }} 52 > 53 <Typography mr={1} variant="description" color="text.secondary"> 54 <Trans>E-Mode</Trans> 55 </Typography> 56 57 <Button 58 onClick={(e) => { 59 e.stopPropagation(); 60 handleClick(e); 61 }} 62 data-cy={`emode-open`} 63 size="small" 64 variant="outlined" 65 sx={(theme) => ({ 66 ml: 1, 67 borderRadius: '4px', 68 p: 0, 69 '&:after': { 70 content: "''", 71 position: 'absolute', 72 left: -1, 73 right: -1, 74 bottom: -1, 75 top: -1, 76 background: isEModeDisabled ? 'transparent' : theme.palette.gradients.aaveGradient, 77 borderRadius: '4px', 78 }, 79 })} 80 > 81 <Box 82 sx={(theme) => ({ 83 display: 'inline-flex', 84 alignItems: 'center', 85 position: 'relative', 86 zIndex: 1, 87 bgcolor: isEModeDisabled 88 ? open 89 ? theme.palette.background.disabled 90 : theme.palette.background.surface 91 : theme.palette.background.paper, 92 px: '4px', 93 borderRadius: '4px', 94 })} 95 > 96 <SvgIcon 97 sx={{ 98 fontSize: iconButtonSize, 99 mr: '4px', 100 color: isEModeDisabled ? 'text.muted' : 'text.primary', 101 }} 102 > 103 {isEModeDisabled ? <LightningBoltIcon /> : <LightningBoltGradient />} 104 </SvgIcon> 105 106 {isEModeDisabled ? ( 107 <Typography variant="buttonS" color="text.secondary"> 108 <EModeLabelMessage /> 109 </Typography> 110 ) : ( 111 <TypographyGradient variant="buttonS"> 112 <EModeLabelMessage /> 113 </TypographyGradient> 114 )} 115 116 <SvgIcon 117 sx={{ 118 fontSize: iconButtonSize, 119 ml: '4px', 120 color: 'primary.light', 121 }} 122 > 123 <CogIcon /> 124 </SvgIcon> 125 </Box> 126 </Button> 127 128 <Menu 129 open={open} 130 anchorEl={anchorEl} 131 sx={{ '.MuiMenu-paper': { maxWidth: '280px' } }} 132 onClose={handleClose} 133 keepMounted={true} 134 > 135 <Box sx={{ px: 4, pt: 2, pb: 3 }}> 136 <Typography variant="subheader1" mb={isEModeDisabled ? 1 : 3}> 137 <Trans>Efficiency mode (E-Mode)</Trans> 138 </Typography> 139 140 {!isEModeDisabled && ( 141 <Box> 142 <Typography mb={1} variant="caption" color="text.secondary"> 143 <Trans>Asset category</Trans> 144 </Typography> 145 146 <Box 147 sx={(theme) => ({ 148 p: 2, 149 mb: 3, 150 borderRadius: '6px', 151 border: `1px solid ${theme.palette.divider}`, 152 })} 153 > 154 <Row 155 caption={ 156 <Box sx={{ display: 'inline-flex', alignItems: 'center' }}> 157 <SvgIcon 158 sx={{ 159 fontSize: iconButtonSize, 160 mr: 1, 161 }} 162 > 163 <LightningBoltGradient /> 164 </SvgIcon> 165 <Typography variant="subheader2" color="text.primary"> 166 <EModeLabelMessage /> 167 </Typography> 168 </Box> 169 } 170 > 171 <Box sx={{ display: 'inline-flex', alignItems: 'center' }}> 172 <Box 173 sx={{ 174 width: '6px', 175 height: '6px', 176 borderRadius: '50%', 177 bgcolor: 'success.main', 178 boxShadow: 179 '0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)', 180 mr: '5px', 181 }} 182 /> 183 <Typography variant="subheader2" color="success.main"> 184 <Trans>Enabled</Trans> 185 </Typography> 186 </Box> 187 </Row> 188 </Box> 189 </Box> 190 )} 191 192 <Typography variant="caption" color="text.secondary" mb={4}> 193 <Trans> 194 E-Mode increases your LTV for a selected category of assets.{' '} 195 <Link 196 href="https://aave.com/help/borrowing/e-mode" 197 sx={{ textDecoration: 'underline' }} 198 variant="caption" 199 color="text.secondary" 200 > 201 Learn more 202 </Link> 203 </Trans> 204 </Typography> 205 206 {isEModeDisabled ? ( 207 <Button 208 fullWidth 209 variant={'gradient'} 210 onClick={() => { 211 trackEvent(GENERAL.OPEN_MODAL, { 212 type: 'Enable E-Mode', 213 data: userEmodeCategoryId, 214 }); 215 216 openEmode(); 217 handleClose(); 218 }} 219 data-cy={'emode-enable'} 220 > 221 <Trans>Enable E-Mode</Trans> 222 </Button> 223 ) : ( 224 <> 225 <Button 226 fullWidth 227 sx={{ mb: '6px' }} 228 variant={'outlined'} 229 onClick={() => { 230 trackEvent(GENERAL.OPEN_MODAL, { 231 modal: 'Switch E-Mode', 232 data: userEmodeCategoryId, 233 }); 234 235 openEmode(); 236 handleClose(); 237 }} 238 data-cy={'emode-switch'} 239 > 240 <Trans>Manage E-Mode</Trans> 241 </Button> 242 </> 243 )} 244 </Box> 245 </Menu> 246 </Box> 247 ); 248 };