fix: refine ripple effect usage and colors

packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx

@@ -57,7 +57,7 @@ export const ActiveSwapItem: React.FC<{
   const ListItemComponent = dense ? ListItem : ListItemButton;
 
   return (
-    <ListItemComponent onClick={handleClick} dense disableRipple>
+    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
       <ListItemAvatar>
         <TokenAvatarGroup total={2}>
           <TokenAvatar token={route.fromToken} />

packages/widget/src/components/ActiveSwaps/ActiveSwaps.style.ts

@@ -13,7 +13,7 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
   paddingRight: theme.spacing(1.5),
   height: 64,
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme, '4%'),
+    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
   },
 }));
 

packages/widget/src/components/Card/Card.tsx

@@ -9,7 +9,6 @@ type CardVariant = 'default' | 'selected' | 'error';
 export type CardProps = {
   variant?: CardVariant;
   selectionColor?: 'primary' | 'secondary';
-  dense?: boolean;
   indented?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
   pointerEvents?: 'auto' | 'none';
@@ -33,19 +32,14 @@ const getBackgroundColor = (
 
 export const Card = styled(Box, {
   shouldForwardProp: (prop) =>
-    ![
-      'dense',
-      'variant',
-      'indented',
-      'selectionColor',
-      'pointerEvents',
-    ].includes(prop as string),
+    !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
+      prop as string,
+    ),
 })<CardProps>(
   ({
     theme,
     variant,
     selectionColor = 'primary',
-    dense,
     indented,
     pointerEvents,
     onClick,

packages/widget/src/components/Header/WalletHeader.tsx

@@ -102,7 +102,7 @@ const ConnectedButton = () => {
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        <MenuItem onClick={handleCopyAddress} disableRipple>
+        <MenuItem onClick={handleCopyAddress}>
           <ContentCopyIcon />
           {t(`button.copyAddress`)}
         </MenuItem>
@@ -111,7 +111,6 @@ const ConnectedButton = () => {
           onClick={handleClose}
           href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
           target="_blank"
-          disableRipple
         >
           <OpenInNewOutlinedIcon />
           {t(`button.viewOnExplorer`)}

packages/widget/src/components/ListItemButton.tsx

@@ -7,6 +7,6 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
   paddingLeft: theme.spacing(1.5),
   height: 56,
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme, '4%'),
+    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
   },
 }));

packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx

@@ -83,7 +83,6 @@ export const SwapRouteCard: React.FC<
     cardContent
   ) : (
     <Card
-      dense={variant === 'dense'}
       variant={active ? 'selected' : 'default'}
       selectionColor="secondary"
       indented

packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx

@@ -81,7 +81,7 @@ export const SwapRouteCardSkeleton: React.FC<
   return widgetVariant === 'refuel' ? (
     cardContent
   ) : (
-    <Card dense={variant === 'dense'} indented {...other}>
+    <Card indented {...other}>
       {cardContent}
     </Card>
   );

packages/widget/src/components/TokenList/TokenListItem.tsx

@@ -54,7 +54,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   const { t } = useTranslation();
   const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
   return (
-    <ListItemButton onClick={onClick} dense disableRipple>
+    <ListItemButton onClick={onClick} dense>
       <ListItemAvatar>
         <Avatar src={token.logoURI} alt={token.symbol}>
           {token.symbol[0]}

packages/widget/src/config/theme.ts

@@ -1,5 +1,6 @@
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import type { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+import { touchRippleClasses } from '@mui/material/ButtonBase';
 import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import {
@@ -9,6 +10,7 @@ import {
   getContrastRatio,
   lighten,
 } from '@mui/material/styles';
+import { keyframes } from '@mui/system';
 import type { ThemeConfig } from '../types';
 
 // https://mui.com/customization/palette/
@@ -89,6 +91,17 @@ const shape = {
   borderRadiusSecondary: 8,
 };
 
+const enterKeyframe = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
+
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
   const primaryMainColor =
     (theme.palette?.primary as SimplePaletteColorOptions)?.main ??
@@ -168,6 +181,21 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
           },
         },
       },
+      MuiButtonBase: {
+        styleOverrides: {
+          root: {
+            [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
+              {
+                animationName: `${enterKeyframe}`,
+              },
+            [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
+              {
+                opacity: 0.1,
+                animationName: `${enterKeyframe}`,
+              },
+          },
+        },
+      },
       MuiButton: {
         defaultProps: {
           disableElevation: true,

packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -33,11 +33,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
         }}
       >
         {chains?.map((chain) => (
-          <ListItemButton
-            key={chain.id}
-            onClick={() => handleClick(chain)}
-            disableRipple
-          >
+          <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
             <ListItemAvatar>
               <Avatar src={chain.logoURI} alt={chain.name}>
                 {chain.name[0]}

packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -81,11 +81,7 @@ export const SelectEnabledToolsPage: React.FC<{
         }}
       >
         {tools?.[typeKey].map((tool) => (
-          <ListItemButton
-            key={tool.name}
-            onClick={() => handleClick(tool.key)}
-            disableRipple
-          >
+          <ListItemButton key={tool.name} onClick={() => handleClick(tool.key)}>
             <ListItemAvatar>
               <Avatar src={tool.logoURI} alt={tool.name}>
                 {tool.name[0]}

packages/widget/src/pages/SelectNativeTokenPage/SelectNativeTokenPage.tsx

@@ -27,7 +27,6 @@ export const SelectNativeTokenPage: React.FC<SwapFormTypeProps> = ({
           <ListItemButton
             key={chain.id}
             onClick={() => selectToken(chain.nativeToken.address, chain.id)}
-            disableRipple
           >
             <ListItemAvatar>
               <TokenAvatar token={chain.nativeToken} chain={chain} />

packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -65,7 +65,6 @@ export const SelectWalletPage = () => {
           <ListItemButton
             key={wallet.name}
             onClick={() => handleConnect(wallet)}
-            disableRipple
           >
             <ListItemAvatar>
               <Avatar

packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx

@@ -22,7 +22,7 @@ export const EnabledToolsButton: React.FC<{
   };
 
   return (
-    <ListItemButton onClick={handleClick} disableRipple>
+    <ListItemButton onClick={handleClick}>
       <ListItemText primary={t(`settings.enabled${type}`)} />
       <Box display="flex" alignItems="center">
         <ListItemText primary={`${enabledTools}/${tools}`} />

packages/widget/src/utils/colors.ts

@@ -1,11 +1,12 @@
-import type { Theme } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
 import { common } from '@mui/material/colors';
 import { getContrastRatio } from '@mui/material/styles';
 
-export const getContrastAlphaColor = (theme: Theme, alpha: string | number) =>
-  theme.palette.mode === 'light'
-    ? `rgb(0 0 0 / ${alpha})`
-    : `rgb(255 255 255 / ${alpha})`;
+export const getContrastAlphaColor = (
+  mode: PaletteMode,
+  alpha: string | number,
+) =>
+  mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
 
 export const getContrastTextColor = (theme: Theme, background?: string) =>
   getContrastRatio(common.white, background ?? theme.palette.primary.main) >= 3