diff --git a/package.json b/package.json index b7290070ac..7b6c3d4fb9 100644 --- a/package.json +++ b/package.json @@ -152,5 +152,6 @@ "budget": null, "budgetPercentIncreaseRed": 20, "showDetails": true - } + }, + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" } diff --git a/src/components/primitives/BasicModal.tsx b/src/components/primitives/BasicModal.tsx index 1d486351f7..6474f539e7 100644 --- a/src/components/primitives/BasicModal.tsx +++ b/src/components/primitives/BasicModal.tsx @@ -8,8 +8,10 @@ export interface BasicModalProps { setOpen: (value: boolean) => void; withCloseButton?: boolean; contentMaxWidth?: number; + contentHeight?: number; closeCallback?: () => void; disableEnforceFocus?: boolean; + BackdropProps?: object; } export const BasicModal = ({ @@ -17,9 +19,11 @@ export const BasicModal = ({ setOpen, withCloseButton = true, contentMaxWidth = 420, + contentHeight, children, closeCallback, disableEnforceFocus, + BackdropProps, ...props }: BasicModalProps) => { const handleClose = () => { @@ -32,6 +36,7 @@ export const BasicModal = ({ open={open} onClose={handleClose} disableEnforceFocus={disableEnforceFocus} // Used for wallet modal connection + BackdropProps={BackdropProps} sx={{ display: 'flex', flexDirection: 'column', @@ -54,7 +59,8 @@ export const BasicModal = ({ overflowY: 'auto', width: '100%', maxWidth: { xs: '359px', xsm: `${contentMaxWidth}px` }, - maxHeight: 'calc(100vh - 20px)', + height: contentHeight ? `${contentHeight}px` : 'auto', + maxHeight: contentHeight ? `${contentHeight}px` : 'calc(100vh - 20px)', p: 6, }} > diff --git a/src/components/transactions/GasStation/GasStation.tsx b/src/components/transactions/GasStation/GasStation.tsx index a118402650..76f0885d2e 100644 --- a/src/components/transactions/GasStation/GasStation.tsx +++ b/src/components/transactions/GasStation/GasStation.tsx @@ -1,7 +1,8 @@ import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { normalize } from '@aave/math-utils'; +import { Trans } from '@lingui/macro'; import LocalGasStationIcon from '@mui/icons-material/LocalGasStation'; -import { Box, CircularProgress, Stack } from '@mui/material'; +import { Box, CircularProgress, Stack, Typography } from '@mui/material'; import { BigNumber } from 'ethers/lib/ethers'; import { formatUnits, parseUnits } from 'ethers/lib/utils'; import React, { ReactNode } from 'react'; @@ -102,7 +103,9 @@ export const GasStation: React.FC = ({ ) : ( - '-' + + This action does not require gas. + )} {rightComponent} diff --git a/src/components/transactions/Switch/SwitchAssetInput.tsx b/src/components/transactions/Switch/SwitchAssetInput.tsx index 0ab66e3816..509faaace9 100644 --- a/src/components/transactions/Switch/SwitchAssetInput.tsx +++ b/src/components/transactions/Switch/SwitchAssetInput.tsx @@ -3,7 +3,7 @@ import { formatUnits } from '@ethersproject/units'; import { ExclamationIcon } from '@heroicons/react/outline'; import { XCircleIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { ExpandLess, ExpandMore } from '@mui/icons-material'; +import { ExpandMore } from '@mui/icons-material'; import { Box, Button, @@ -11,7 +11,6 @@ import { IconButton, InputBase, ListItemText, - Menu, MenuItem, SvgIcon, Typography, @@ -24,6 +23,7 @@ import { useRootStore } from 'src/store/root'; import { useSharedDependencies } from 'src/ui-config/SharedDependenciesProvider'; import { COMMON_SWAPS } from '../../../ui-config/TokenList'; +import { BasicModal } from '../../primitives/BasicModal'; import { FormattedNumber } from '../../primitives/FormattedNumber'; import { ExternalTokenIcon } from '../../primitives/TokenIcon'; import { SearchInput } from '../../SearchInput'; @@ -99,15 +99,15 @@ export const SwitchAssetInput = ({ const { erc20Service } = useSharedDependencies(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [openModal, setOpenModal] = useState(false); const inputRef = useRef(null); - const open = Boolean(anchorEl); const handleClick = () => { - setAnchorEl(inputRef.current); + setOpenModal(true); }; + const handleClose = () => { - setAnchorEl(null); + setOpenModal(false); handleCleanSearch(); }; @@ -157,17 +157,17 @@ export const SwitchAssetInput = ({ ({ - p: '8px 12px', + p: '12px 16px', border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', + borderRadius: '8px', width: '100%', - mb: 1, + mb: 1.5, })} > - + {loading ? ( - + ) : ( - + )} - + + Switch tokens + + {popularAssets.map((asset) => ( @@ -304,6 +308,7 @@ export const SwitchAssetInput = ({ border: '1px solid', borderColor: theme.palette.divider, cursor: 'pointer', + transition: 'all 0.2s ease', '&:hover': { backgroundColor: theme.palette.divider, }, @@ -323,15 +328,15 @@ export const SwitchAssetInput = ({ )} - + {loadingNewAsset ? ( @@ -344,13 +349,34 @@ export const SwitchAssetInput = ({ data-cy={`assetsSelectOption_${asset.symbol.toUpperCase()}`} sx={{ backgroundColor: theme.palette.background.paper, + py: 1.5, + px: 3, + borderRadius: '8px', + my: 0.5, + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? 'rgba(255, 255, 255, 0.05)' + : 'rgba(0, 0, 0, 0.03)', + }, }} onClick={() => handleSelect(asset)} > - - {asset.symbol} + + + {asset.symbol} + + } + /> {asset.extensions?.isUserCustom && ( - + )} @@ -371,10 +397,10 @@ export const SwitchAssetInput = ({ )} - + - + {loading ? ( ) : ( @@ -405,7 +431,24 @@ export const SwitchAssetInput = ({ {!disableInput && (