Feat: decode native transfers + show Multisend in the tx info block

cypress/e2e/smoke/balances.cy.js

@@ -15,7 +15,7 @@ describe('Assets > Coins', () => {
   before(() => {
     // Open the Safe used for testing
     cy.visit(`/${TEST_SAFE}/balances`, { failOnStatusCode: false })
-    cy.contains('button', 'Accept selection').click()
+    cy.contains('button', 'Accept all').click()
     // Table is loaded
     cy.contains('Görli Ether')
 
@@ -201,6 +201,7 @@ describe('Assets > Coins', () => {
     before(() => {
       // Open the Safe used for testing pagination
       cy.visit(`/${PAGINATION_TEST_SAFE}/balances`, { failOnStatusCode: false })
+      cy.contains('button', 'Accept all').click()
 
       // Table is loaded
       cy.contains('Görli Ether')

cypress/e2e/smoke/nfts.cy.js

@@ -80,9 +80,11 @@ describe('Assets > NFTs', () => {
       cy.contains('button', 'Next').click()
 
       // Review modal appears
-      cy.contains('Review transaction')
+      cy.contains('Review NFT transaction')
       cy.contains('Sending 2 NFTs from')
-      cy.contains('Batched transactions')
+      cy.wait(1000)
+      cy.contains('Action 1')
+      cy.contains('Action 2')
       cy.get('b:contains("safeTransferFrom")').should('have.length', 2)
       cy.contains('button:not([disabled])', 'Submit')
     })

src/components/safe-apps/SafeAppsTxModal/ReviewSafeAppsTx.tsx

@@ -1,15 +1,11 @@
 import { useMemo, useState } from 'react'
 import type { ReactElement } from 'react'
 import type { DecodedDataResponse } from '@safe-global/safe-gateway-typescript-sdk'
-import { getDecodedData, Operation } from '@safe-global/safe-gateway-typescript-sdk'
+import { getDecodedData } from '@safe-global/safe-gateway-typescript-sdk'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
-import { OperationType } from '@safe-global/safe-core-sdk-types'
-import { Box, Typography } from '@mui/material'
 import SendFromBlock from '@/components/tx/SendFromBlock'
-import Multisend from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend'
 import SendToBlock from '@/components/tx/SendToBlock'
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
-import { generateDataRowValue } from '@/components/transactions/TxDetails/Summary/TxDataRow'
 import useAsync from '@/hooks/useAsync'
 import useChainId from '@/hooks/useChainId'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -75,34 +71,10 @@ const ReviewSafeAppsTx = ({
     <SignOrExecuteForm safeTx={safeTx} onSubmit={handleSubmit} error={safeTxError || submitError} origin={origin}>
       <>
         <ApprovalEditor txs={txList} updateTxs={setTxList} />
-        <SendFromBlock />
-        {safeTx && (
-          <>
-            <SendToBlock address={safeTx.data.to} title={getInteractionTitle(safeTx.data.value || '', chain)} />
 
-            <Box pb={2}>
-              <Typography mt={2} color="primary.light">
-                Data (hex encoded)
-              </Typography>
-              {generateDataRowValue(safeTx.data.data, 'rawData')}
-            </Box>
+        <SendFromBlock />
 
-            {isMultiSend && (
-              <Box mb={2} display="flex" flexDirection="column" gap={1}>
-                <Multisend
-                  txData={{
-                    dataDecoded: decodedData,
-                    to: { value: safeTx.data.to },
-                    value: safeTx.data.value,
-                    operation: safeTx.data.operation === OperationType.Call ? Operation.CALL : Operation.DELEGATE,
-                    trustedDelegateCallTarget: false,
-                  }}
-                  variant="outlined"
-                />
-              </Box>
-            )}
-          </>
-        )}
+        {safeTx && <SendToBlock address={safeTx.data.to} title={getInteractionTitle(safeTx.data.value || '', chain)} />}
       </>
     </SignOrExecuteForm>
   )

src/components/transactions/HexEncodedData/index.tsx

@@ -28,7 +28,7 @@ export const HexEncodedData = ({ hexData, title, limit = 20 }: Props): ReactElem
       {showExpandBtn ? (
         <>
           {showTxData ? hexData : shortenText(hexData, 25)}{' '}
-          <Link component="button" onClick={toggleExpanded} type="button">
+          <Link component="button" onClick={toggleExpanded} type="button" sx={{ verticalAlign: 'text-top' }}>
             Show {showTxData ? 'less' : 'more'}
           </Link>
         </>

src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx

@@ -5,14 +5,18 @@ 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 { AccordionSummary, Button, Divider } from '@mui/material'
+import { AccordionSummary, Box, Button, Divider } from '@mui/material'
+import css from './styles.module.css'
 
 type MultisendProps = {
   txData?: TransactionData
   variant?: AccordionProps['variant']
   showDelegateCallWarning?: boolean
+  noHeader?: boolean
 }
 
+const MIN_SCROLL_TXS = 4
+
 const MultisendActionsHeader = ({
   setOpen,
   amount,
@@ -26,14 +30,14 @@ const MultisendActionsHeader = ({
 
   return (
     <AccordionSummary
-      sx={{ borderBottom: ({ palette }) => `1px solid ${palette.border.light}`, cursor: 'auto !important', pr: 0 }}
+      className={css.summary}
       expandIcon={
         <>
-          <Button onClick={onClickAll(true)} variant="text" sx={{ px: '18px' }}>
+          <Button onClick={onClickAll(true)} variant="text">
             Expand all
           </Button>
-          <Divider sx={{ my: '14px', borderColor: 'border.light' }} />
-          <Button onClick={onClickAll(false)} variant="text" sx={{ px: '18px' }}>
+          <Divider className={css.divider} />
+          <Button onClick={onClickAll(false)} variant="text">
             Collapse all
           </Button>
         </>
@@ -48,6 +52,7 @@ export const Multisend = ({
   txData,
   variant = 'elevation',
   showDelegateCallWarning = true,
+  noHeader = false,
 }: MultisendProps): ReactElement | null => {
   const [openMap, setOpenMap] = useState<Record<number, boolean>>()
   const isOpenMapUndefined = openMap == null
@@ -82,34 +87,39 @@ export const Multisend = ({
 
   return (
     <>
-      <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} />
-      {multiSendTransactions.map(({ dataDecoded, data, value, to, operation }, index) => {
-        const onChange: AccordionProps['onChange'] = (_, expanded) => {
-          setOpenMap((prev) => ({
-            ...prev,
-            [index]: expanded,
-          }))
-        }
+      {!noHeader && <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} />}
+
+      <div className={multiSendTransactions.length >= MIN_SCROLL_TXS ? css.scrollWrapper : undefined}>
+        <Box display="flex" flexDirection="column" gap={1}>
+          {multiSendTransactions.map(({ dataDecoded, data, value, to, operation }, index) => {
+            const onChange: AccordionProps['onChange'] = (_, expanded) => {
+              setOpenMap((prev) => ({
+                ...prev,
+                [index]: expanded,
+              }))
+            }
 
-        return (
-          <SingleTxDecoded
-            key={`${data ?? to}-${index}`}
-            tx={{
-              dataDecoded,
-              data,
-              value,
-              to,
-              operation,
-            }}
-            txData={txData}
-            showDelegateCallWarning={showDelegateCallWarning}
-            actionTitle={`Action ${index + 1}`}
-            variant={variant}
-            expanded={openMap?.[index] ?? false}
-            onChange={onChange}
-          />
-        )
-      })}
+            return (
+              <SingleTxDecoded
+                key={`${data ?? to}-${index}`}
+                tx={{
+                  dataDecoded,
+                  data,
+                  value,
+                  to,
+                  operation,
+                }}
+                txData={txData}
+                showDelegateCallWarning={showDelegateCallWarning}
+                actionTitle={`Action ${index + 1}`}
+                variant={variant}
+                expanded={openMap?.[index] ?? false}
+                onChange={onChange}
+              />
+            )
+          })}
+        </Box>
+      </div>
     </>
   )
 }

src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css

@@ -0,0 +1,34 @@
+.scrollWrapper {
+  max-height: 168px;
+  overflow: auto;
+  padding-bottom: 2em;
+}
+
+.scrollWrapper:after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
+  width: 100%;
+  height: 4em;
+}
+
+.summary {
+  border-bottom: 1px solid var(--color-border-light);
+  cursor: auto !important;
+  padding-right: 0;
+}
+
+.summary button {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+.divider {
+  margin-top: 14px;
+  margin-bottom: 14px;
+  border-color: var(--color-border-light);
+}

src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx

@@ -34,7 +34,7 @@ export const SingleTxDecoded = ({
 }: SingleTxDecodedProps) => {
   const chain = useCurrentChain()
   const method = tx.dataDecoded?.method || ''
-  const { decimals, symbol } = chain!.nativeCurrency
+  const { decimals, symbol } = chain?.nativeCurrency || {}
   const amount = tx.value ? formatVisualAmount(tx.value, decimals) : 0
 
   let details