fix: Align decoded tx ui for batch execute

safe-global · Jul 11, 2023 · 5f65a13 · 5f65a13
1 parent 62c740d
commit 5f65a13
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 48 deletions.
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx
@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react'
 import type { Dispatch, ReactElement, SetStateAction } from 'react'
 import type { AccordionProps } from '@mui/material/Accordion/Accordion'
 import SingleTxDecoded from '@/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded'
-import { Box, Button, Divider, Stack } from '@mui/material'
+import { Button, Divider, Stack } from '@mui/material'
 import css from './styles.module.css'
 import classnames from 'classnames'
 
@@ -15,22 +15,24 @@ type MultisendProps = {
   compact?: boolean
 }
 
-const MultisendActionsHeader = ({
+export const MultisendActionsHeader = ({
   setOpen,
   amount,
   compact = false,
+  title = 'All actions',
 }: {
   setOpen: Dispatch<SetStateAction<Record<number, boolean> | undefined>>
   amount: number
   compact?: boolean
+  title?: string
 }) => {
   const onClickAll = (expanded: boolean) => () => {
     setOpen(Array(amount).fill(expanded))
   }
 
   return (
     <div className={classnames(css.actionsHeader, { [css.compactHeader]: compact })}>
-      All actions
+      {title}
       <Stack direction="row" divider={<Divider className={css.divider} />}>
         <Button onClick={onClickAll(true)} variant="text">
           Expand all
@@ -83,7 +85,7 @@ export const Multisend = ({
     <>
       <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} compact={compact} />
 
-      <Box display="flex" flexDirection="column" className={compact ? css.compact : ''}>
+      <div className={compact ? css.compact : ''}>
         {multiSendTransactions.map(({ dataDecoded, data, value, to, operation }, index) => {
           const onChange: AccordionProps['onChange'] = (_, expanded) => {
             setOpenMap((prev) => ({
@@ -111,7 +113,7 @@ export const Multisend = ({
             />
           )
         })}
-      </Box>
+      </div>
     </>
   )
 }

diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css
@@ -1,7 +1,7 @@
 .actionsHeader {
   border-bottom: 1px solid var(--color-border-light);
   cursor: auto !important;
-  padding-left: 16px;
+  padding-left: 0;
   padding-right: 0;
   display: flex;
   justify-content: space-between;
@@ -23,6 +23,11 @@
   border: 1px solid var(--color-border-light);
 }
 
+.compact {
+  display: flex;
+  flex-direction: column;
+}
+
 .compact > div:first-child {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

diff --git a/src/components/tx-flow/flows/ExecuteBatch/DecodedTxs.tsx b/src/components/tx-flow/flows/ExecuteBatch/DecodedTxs.tsx
@@ -4,51 +4,69 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import extractTxInfo from '@/services/tx/extractTxInfo'
 import { isCustomTxInfo, isNativeTokenTransfer, isTransferTxInfo } from '@/utils/transaction-guards'
 import SingleTxDecoded from '@/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded'
+import css from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css'
+import { useState } from 'react'
+import { MultisendActionsHeader } from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend'
+import { type AccordionProps } from '@mui/material/Accordion/Accordion'
 
 const DecodedTxs = ({ txs }: { txs: TransactionDetails[] | undefined }) => {
+  const [openMap, setOpenMap] = useState<Record<number, boolean>>()
   const { safeAddress } = useSafeInfo()
 
   if (!txs) return null
 
   return (
-    <Box mt={1} display="flex" flexDirection="column" gap={1}>
-      {txs.map((transaction, idx) => {
-        if (!transaction.txData) return null
-
-        const { txParams } = extractTxInfo(transaction, safeAddress)
-
-        let decodedDataParams: DataDecoded = {
-          method: '',
-          parameters: undefined,
-        }
-
-        if (isCustomTxInfo(transaction.txInfo) && transaction.txInfo.isCancellation) {
-          decodedDataParams.method = 'On-chain rejection'
-        }
-
-        if (isTransferTxInfo(transaction.txInfo) && isNativeTokenTransfer(transaction.txInfo.transferInfo)) {
-          decodedDataParams.method = 'transfer'
-        }
-
-        const dataDecoded = transaction.txData.dataDecoded || decodedDataParams
-
-        return (
-          <SingleTxDecoded
-            key={transaction.txId}
-            tx={{
-              dataDecoded,
-              data: txParams.data,
-              value: txParams.value,
-              to: txParams.to,
-              operation: 0,
-            }}
-            txData={transaction.txData}
-            actionTitle={`${idx + 1}`}
-            showDelegateCallWarning={false}
-          />
-        )
-      })}
-    </Box>
+    <>
+      <MultisendActionsHeader title="Batched transactions" setOpen={setOpenMap} amount={txs.length} compact />
+
+      <Box className={css.compact}>
+        {txs.map((transaction, idx) => {
+          if (!transaction.txData) return null
+
+          const onChange: AccordionProps['onChange'] = (_, expanded) => {
+            setOpenMap((prev) => ({
+              ...prev,
+              [idx]: expanded,
+            }))
+          }
+
+          const { txParams } = extractTxInfo(transaction, safeAddress)
+
+          let decodedDataParams: DataDecoded = {
+            method: '',
+            parameters: undefined,
+          }
+
+          if (isCustomTxInfo(transaction.txInfo) && transaction.txInfo.isCancellation) {
+            decodedDataParams.method = 'On-chain rejection'
+          }
+
+          if (isTransferTxInfo(transaction.txInfo) && isNativeTokenTransfer(transaction.txInfo.transferInfo)) {
+            decodedDataParams.method = 'transfer'
+          }
+
+          const dataDecoded = transaction.txData.dataDecoded || decodedDataParams
+
+          return (
+            <SingleTxDecoded
+              key={transaction.txId}
+              tx={{
+                dataDecoded,
+                data: txParams.data,
+                value: txParams.value,
+                to: txParams.to,
+                operation: 0,
+              }}
+              txData={transaction.txData}
+              actionTitle={`${idx + 1}`}
+              showDelegateCallWarning={false}
+              expanded={openMap?.[idx] ?? false}
+              onChange={onChange}
+            />
+          )
+        })}
+      </Box>
+    </>
   )
 }
 

diff --git a/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx b/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx
@@ -145,9 +145,6 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
         )}
 
         <div>
-          <Typography variant="body2" color="text.secondary">
-            Batched transactions:
-          </Typography>
           <DecodedTxs txs={txsWithDetails} />
         </div>
       </TxCard>
@@ -198,7 +195,7 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
             <CheckWallet allowNonOwner={true}>
               {(isOk) => (
                 <Button variant="contained" type="submit" disabled={!isOk || submitDisabled} onClick={handleSubmit}>
-                  Send
+                  Submit
                 </Button>
               )}
             </CheckWallet>