feat: optimize swap ux

package.json

@@ -152,5 +152,6 @@
     "budget": null,
     "budgetPercentIncreaseRed": 20,
     "showDetails": true
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

src/components/primitives/BasicModal.tsx

@@ -8,18 +8,22 @@ export interface BasicModalProps {
   setOpen: (value: boolean) => void;
   withCloseButton?: boolean;
   contentMaxWidth?: number;
+  contentHeight?: number;
   closeCallback?: () => void;
   disableEnforceFocus?: boolean;
+  BackdropProps?: object;
 }
 
 export const BasicModal = ({
   open,
   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,
         }}
       >

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<GasStationProps> = ({
               <GasTooltip />
             </>
           ) : (
-            '-'
+            <Typography variant="caption" color="text.secondary">
+              <Trans>This action does not require gas.</Trans>
+            </Typography>
           )}
         </Box>
         {rightComponent}

src/components/transactions/Switch/SwitchAssetInput.tsx

@@ -3,15 +3,14 @@ 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,
   CircularProgress,
   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 | HTMLElement>(null);
+  const [openModal, setOpenModal] = useState(false);
   const inputRef = useRef<HTMLDivElement>(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 = ({
     <Box
       ref={inputRef}
       sx={(theme) => ({
-        p: '8px 12px',
+        p: '12px 16px',
         border: `1px solid ${theme.palette.divider}`,
-        borderRadius: '6px',
+        borderRadius: '8px',
         width: '100%',
-        mb: 1,
+        mb: 1.5,
       })}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
         {loading ? (
           <Box sx={{ flex: 1 }}>
-            <CircularProgress color="inherit" size="16px" />
+            <CircularProgress color="inherit" size="20px" />
           </Box>
         ) : (
           <InputBase
@@ -187,10 +187,10 @@ export const SwitchAssetInput = ({
             inputProps={{
               'aria-label': 'amount input',
               style: {
-                fontSize: '21px',
-                lineHeight: '28,01px',
+                fontSize: '24px',
+                lineHeight: '32px',
                 padding: 0,
-                height: '28px',
+                height: '32px',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -217,62 +217,66 @@ export const SwitchAssetInput = ({
             }}
             disabled={disabled}
           >
-            <XCircleIcon height={16} />
+            <XCircleIcon height={18} />
           </IconButton>
         )}
         <Button
           disableRipple
           onClick={handleClick}
           data-cy={`assetSelect`}
-          sx={{ p: 0, '&:hover': { backgroundColor: 'transparent' } }}
-          endIcon={open ? <ExpandLess /> : <ExpandMore />}
+          sx={{
+            p: '4px 8px',
+            borderRadius: '6px',
+            transition: 'background-color 0.2s',
+            '&:hover': {
+              backgroundColor:
+                theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
+            },
+          }}
+          endIcon={<ExpandMore />}
         >
           <ExternalTokenIcon
             symbol={selectedAsset.symbol}
             logoURI={selectedAsset.logoURI}
-            sx={{ mr: 2, ml: 3 }}
+            sx={{ mr: 2, ml: 1, width: 28, height: 28 }}
           />
           <Typography
             data-cy={`assetsSelectedOption_${selectedAsset.symbol.toUpperCase()}`}
             variant="main16"
             color="text.primary"
+            sx={{ fontWeight: 500 }}
           >
             {selectedAsset.symbol}
           </Typography>
           {selectedAsset.extensions?.isUserCustom && (
-            <SvgIcon sx={{ fontSize: 14, ml: 1 }} color="warning">
+            <SvgIcon sx={{ fontSize: 16, ml: 1 }} color="warning">
               <ExclamationIcon />
             </SvgIcon>
           )}
         </Button>
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          PaperProps={{
-            sx: {
-              width: inputRef.current?.offsetWidth,
-              border: theme.palette.mode === 'dark' ? '1px solid #EBEBED1F' : 'unset',
-              boxShadow: '0px 2px 10px 0px #0000001A',
-              overflow: 'hidden',
-            },
-          }}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'right',
+
+        <BasicModal
+          BackdropProps={{
+            style: { backgroundColor: 'transparent' },
           }}
+          open={openModal}
+          setOpen={setOpenModal}
+          contentMaxWidth={420}
+          contentHeight={485}
         >
+          <Typography variant="main16" sx={{ fontSize: 18, fontWeight: 600, mb: 3 }}>
+            <Trans>Switch tokens</Trans>
+          </Typography>
+
           <Box
             sx={{
-              p: 2,
-              px: 3,
               borderBottom: `1px solid ${theme.palette.divider}`,
+              position: 'sticky',
               top: 0,
               zIndex: 2,
+              mb: 3,
+              pb: 3,
+              backgroundColor: theme.palette.background.paper,
             }}
           >
             <SearchInput
@@ -285,11 +289,11 @@ export const SwitchAssetInput = ({
                 sx={{
                   display: 'flex',
                   justifyContent: 'flex-start',
-                  overfloyY: 'auto',
+                  overflowY: 'auto',
                   alignItems: 'flex-start',
                   flexWrap: 'wrap',
-                  mt: 2,
-                  gap: 2,
+                  mt: 2.5,
+                  gap: 1.5,
                 }}
               >
                 {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 = ({
               </Box>
             )}
           </Box>
-          <Box sx={{ overflow: 'auto', maxHeight: '200px' }}>
+          <Box sx={{ overflow: 'auto', maxHeight: '355px' }}>
             {loadingNewAsset ? (
               <Box
                 sx={{
-                  maxHeight: '178px',
+                  maxHeight: '220px',
                   overflowY: 'auto',
                   display: 'flex',
                   flexDirection: 'column',
-                  minHeight: '60px',
+                  minHeight: '80px',
                 }}
               >
                 <CircularProgress sx={{ mx: 'auto', my: 'auto' }} />
@@ -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)}
                 >
-                  <ExternalTokenIcon symbol={asset.symbol} logoURI={asset.logoURI} sx={{ mr: 2 }} />
-                  <ListItemText sx={{ flexGrow: 0 }}>{asset.symbol}</ListItemText>
+                  <ExternalTokenIcon
+                    symbol={asset.symbol}
+                    logoURI={asset.logoURI}
+                    sx={{ mr: 2, width: 28, height: 28 }}
+                  />
+                  <ListItemText
+                    sx={{ flexGrow: 0 }}
+                    primary={
+                      <Typography variant="main16" fontWeight={500}>
+                        {asset.symbol}
+                      </Typography>
+                    }
+                  />
                   {asset.extensions?.isUserCustom && (
-                    <SvgIcon sx={{ fontSize: 14, ml: 1 }} color="warning">
+                    <SvgIcon sx={{ fontSize: 16, ml: 1 }} color="warning">
                       <ExclamationIcon />
                     </SvgIcon>
                   )}
@@ -371,10 +397,10 @@ export const SwitchAssetInput = ({
               </Typography>
             )}
           </Box>
-        </Menu>
+        </BasicModal>
       </Box>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', height: '16px' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', height: '20px', mt: 0.5 }}>
         {loading ? (
           <Box sx={{ flex: 1 }} />
         ) : (
@@ -405,7 +431,24 @@ export const SwitchAssetInput = ({
             {!disableInput && (
               <Button
                 size="small"
-                sx={{ minWidth: 0, ml: '7px', p: 0 }}
+                sx={{
+                  minWidth: 0,
+                  ml: '10px',
+                  p: '2px 8px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                  fontWeight: 600,
+                  backgroundColor:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(255, 255, 255, 0.08)'
+                      : 'rgba(0, 0, 0, 0.04)',
+                  '&:hover': {
+                    backgroundColor:
+                      theme.palette.mode === 'dark'
+                        ? 'rgba(255, 255, 255, 0.12)'
+                        : 'rgba(0, 0, 0, 0.08)',
+                  },
+                }}
                 onClick={() => {
                   onChange && onChange('-1');
                 }}

src/locales/en/messages.po

@@ -2609,6 +2609,10 @@ msgstr "We couldn't find any transactions related to your search. Try again with
 msgid "English"
 msgstr "English"
 
+#: src/components/transactions/GasStation/GasStation.tsx
+msgid "This action does not require gas."
+msgstr "This action does not require gas."
+
 #: src/components/isolationMode/IsolatedBadge.tsx
 msgid "Learn more in our <0>FAQ guide</0>"
 msgstr "Learn more in our <0>FAQ guide</0>"
@@ -3056,6 +3060,10 @@ msgstr "for"
 msgid "Confirm transaction"
 msgstr "Confirm transaction"
 
+#: src/components/transactions/Switch/SwitchAssetInput.tsx
+msgid "Switch tokens"
+msgstr "Switch tokens"
+
 #: src/components/infoTooltips/WrappedTokenToolTipContent.tsx
 msgid "Exchange rate"
 msgstr "Exchange rate"