feat: batch transaciton method toggle

src/components/transactions/FlowCommons/ApprovalMethodToggleButton.tsx

@@ -1,5 +1,4 @@
-import { CheckIcon } from '@heroicons/react/outline';
-import { CogIcon } from '@heroicons/react/solid';
+import { SwitchHorizontalIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import {
   Box,
@@ -10,19 +9,21 @@ import {
   SvgIcon,
   Typography,
 } from '@mui/material';
-import * as React from 'react';
+import { useState } from 'react';
 import { ApprovalMethod } from 'src/store/walletSlice';
 
 interface ApprovalMethodToggleButtonProps {
   currentMethod: ApprovalMethod;
-  setMethod: (newMethod: ApprovalMethod) => void;
+  setMethod: (method: ApprovalMethod) => void;
+  showBatchOption?: boolean;
 }
 
 export const ApprovalMethodToggleButton = ({
   currentMethod,
   setMethod,
+  showBatchOption = false,
 }: ApprovalMethodToggleButtonProps) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     setAnchorEl(event.currentTarget);
@@ -34,64 +35,99 @@ export const ApprovalMethodToggleButton = ({
   return (
     <>
       <Box
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+          '&:hover': {
+            opacity: 0.7,
+          },
+        }}
         onClick={handleClick}
-        sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
-        data-cy={`approveButtonChange`}
       >
-        <Typography variant="subheader2" color="info.main">
-          <Trans>{currentMethod}</Trans>
+        <Typography variant="subheader2" color="text.secondary">
+          {currentMethod === ApprovalMethod.BATCH && <Trans>Batch Transaction</Trans>}
+          {currentMethod === ApprovalMethod.PERMIT && <Trans>Signature</Trans>}
+          {currentMethod === ApprovalMethod.APPROVE && <Trans>Transaction</Trans>}
         </Typography>
-        <SvgIcon sx={{ fontSize: 16, ml: 1, color: 'info.main' }}>
-          <CogIcon />
+        <SvgIcon sx={{ ml: '2px', fontSize: '11px' }}>
+          <SwitchHorizontalIcon />
         </SvgIcon>
       </Box>
-
       <Menu
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-        MenuListProps={{
-          'aria-labelledby': 'basic-button',
+        onClick={handleClose}
+        PaperProps={{
+          elevation: 0,
+          sx: {
+            overflow: 'visible',
+            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+            mt: 1.5,
+            '& .MuiAvatar-root': {
+              width: 32,
+              height: 32,
+              ml: -0.5,
+              mr: 1,
+            },
+            '&:before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              top: 0,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: 'background.paper',
+              transform: 'translateY(-50%) rotate(45deg)',
+              zIndex: 0,
+            },
+          },
         }}
-        keepMounted={true}
-        data-cy={`approveMenu_${currentMethod}`}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
+        {showBatchOption && (
+          <MenuItem
+            onClick={() => setMethod(ApprovalMethod.BATCH)}
+            selected={currentMethod === ApprovalMethod.BATCH}
+          >
+            <ListItemIcon>
+              <SvgIcon sx={{ fontSize: 20 }}>
+                <SwitchHorizontalIcon />
+              </SvgIcon>
+            </ListItemIcon>
+            <ListItemText>
+              <Trans>Batch Transaction</Trans>
+            </ListItemText>
+          </MenuItem>
+        )}
         <MenuItem
-          data-cy={`approveOption_${ApprovalMethod.PERMIT}`}
+          onClick={() => setMethod(ApprovalMethod.PERMIT)}
           selected={currentMethod === ApprovalMethod.PERMIT}
-          value={ApprovalMethod.PERMIT}
-          onClick={() => {
-            if (currentMethod === ApprovalMethod.APPROVE) {
-              setMethod(ApprovalMethod.PERMIT);
-            }
-            handleClose();
-          }}
         >
-          <ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
-            <Trans>{ApprovalMethod.PERMIT}</Trans>
-          </ListItemText>
           <ListItemIcon>
-            <SvgIcon>{currentMethod === ApprovalMethod.PERMIT && <CheckIcon />}</SvgIcon>
+            <SvgIcon sx={{ fontSize: 20 }}>
+              <SwitchHorizontalIcon />
+            </SvgIcon>
           </ListItemIcon>
+          <ListItemText>
+            <Trans>Signature</Trans>
+          </ListItemText>
         </MenuItem>
-
         <MenuItem
-          data-cy={`approveOption_${ApprovalMethod.APPROVE}`}
+          onClick={() => setMethod(ApprovalMethod.APPROVE)}
           selected={currentMethod === ApprovalMethod.APPROVE}
-          value={ApprovalMethod.APPROVE}
-          onClick={() => {
-            if (currentMethod === ApprovalMethod.PERMIT) {
-              setMethod(ApprovalMethod.APPROVE);
-            }
-            handleClose();
-          }}
         >
-          <ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
-            <Trans>{ApprovalMethod.APPROVE}</Trans>
-          </ListItemText>
           <ListItemIcon>
-            <SvgIcon>{currentMethod === ApprovalMethod.APPROVE && <CheckIcon />}</SvgIcon>
+            <SvgIcon sx={{ fontSize: 20 }}>
+              <SwitchHorizontalIcon />
+            </SvgIcon>
           </ListItemIcon>
+          <ListItemText>
+            <Trans>Transaction</Trans>
+          </ListItemText>
         </MenuItem>
       </Menu>
     </>

src/components/transactions/FlowCommons/RightHelperText.tsx

@@ -12,6 +12,7 @@ import { useShallow } from 'zustand/shallow';
 export type RightHelperTextProps = {
   approvalHash?: string;
   tryPermit?: boolean;
+  showBatchOption?: boolean;
 };
 
 const ExtLinkIcon = () => (
@@ -20,7 +21,11 @@ const ExtLinkIcon = () => (
   </SvgIcon>
 );
 
-export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProps) => {
+export const RightHelperText = ({
+  approvalHash,
+  tryPermit,
+  showBatchOption = false,
+}: RightHelperTextProps) => {
   const [
     account,
     walletApprovalMethodPreference,
@@ -46,7 +51,7 @@ export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProp
     if (isContractAddress && walletApprovalMethodPreference === ApprovalMethod.PERMIT) {
       setWalletApprovalMethodPreference(ApprovalMethod.APPROVE);
     }
-  }, [isContractAddress]);
+  }, [isContractAddress, walletApprovalMethodPreference, setWalletApprovalMethodPreference]);
 
   // a signature is not submitted on-chain so there is no link to review
   if (!approvalHash && !isSigned && tryPermit)
@@ -58,6 +63,7 @@ export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProp
         <ApprovalMethodToggleButton
           currentMethod={walletApprovalMethodPreference}
           setMethod={(method: ApprovalMethod) => setWalletApprovalMethodPreference(method)}
+          showBatchOption={showBatchOption}
         />
       </Box>
     );

src/components/transactions/TxActionsWrapper.tsx

@@ -33,6 +33,7 @@ interface TxActionsWrapperProps extends BoxProps {
   };
   tryPermit?: boolean;
   event?: TrackEventProps;
+  showBatchOption?: boolean;
 }
 
 export const TxActionsWrapper = ({
@@ -54,6 +55,7 @@ export const TxActionsWrapper = ({
   errorParams,
   tryPermit,
   event,
+  showBatchOption = false,
   ...rest
 }: TxActionsWrapperProps) => {
   const { txError } = useModalContext();
@@ -127,9 +129,13 @@ export const TxActionsWrapper = ({
   const approvalParams = getApprovalParams();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12, ...sx }} {...rest}>
-      {approvalParams && !readOnlyModeAddress && (
+      {(approvalParams || showBatchOption) && !readOnlyModeAddress && (
         <Box sx={{ display: 'flex', justifyContent: 'end', alignItems: 'center' }}>
-          <RightHelperText approvalHash={approvalTxState?.txHash} tryPermit={tryPermit} />
+          <RightHelperText
+            approvalHash={approvalTxState?.txHash}
+            tryPermit={tryPermit}
+            showBatchOption={showBatchOption}
+          />
         </Box>
       )}