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..de3ad5b704 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 ? ( - + ) : ( - + )} - - - - {assets.length > 3 && ( - - {popularAssets.map((asset) => ( - + + Switch tokens + + + + + {assets.length > 3 && ( + + {popularAssets.map((asset) => ( + handleSelect(asset)} + > + + + {asset.symbol} + + + ))} + + )} + + + {loadingNewAsset ? ( + + + + ) : filteredAssets.length > 0 ? ( + filteredAssets.map((asset) => ( + handleSelect(asset)} > - - {asset.symbol} - - - ))} - - )} - - - {loadingNewAsset ? ( - - - - ) : filteredAssets.length > 0 ? ( - filteredAssets.map((asset) => ( - handleSelect(asset)} + + {asset.symbol} + + } + /> + {asset.extensions?.isUserCustom && ( + + + + )} + {asset.balance && ( + + )} + + )) + ) : ( + - - {asset.symbol} - {asset.extensions?.isUserCustom && ( - - - - )} - {asset.balance && ( - - )} - - )) - ) : ( - - - No results found. You can import a custom token with a contract address - - - )} + + No results found. You can import a custom token with a contract address + + + )} + - + - + {loading ? ( ) : ( @@ -405,7 +442,24 @@ export const SwitchAssetInput = ({ {!disableInput && (