Rebase

apps/web/src/components/transactions/TxDetails/TxNote.tsx

@@ -0,0 +1,44 @@
+import { DataRow } from '@/components/common/Table/DataRow'
+import useAsync from '@/hooks/useAsync'
+import { useCurrentChain } from '@/hooks/useChains'
+import { isMultisigDetailedExecutionInfo } from '@/utils/transaction-guards'
+import { Box, Divider } from '@mui/material'
+import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+
+const TxNote = ({ txDetails }: { txDetails: TransactionDetails }) => {
+  const currentChain = useCurrentChain()
+  const txService = currentChain?.transactionService
+
+  let safeTxHash = ''
+  if (isMultisigDetailedExecutionInfo(txDetails.detailedExecutionInfo)) {
+    safeTxHash = txDetails.detailedExecutionInfo?.safeTxHash
+  }
+
+  const [data] = useAsync(() => {
+    if (!safeTxHash || !txService) return
+    return fetch(`${txService}/api/v1/multisig-transactions/${safeTxHash}`).then((res) => res.json())
+  }, [safeTxHash, txService])
+
+  let note = ''
+  if (data) {
+    try {
+      const origin = JSON.parse(data.origin)
+      const parsedName = JSON.parse(origin.name)
+      note = parsedName.note
+    } catch {
+      // Ignore, no note
+    }
+  }
+
+  return note ? (
+    <>
+      <Box m={2} py={1}>
+        <DataRow title="Proposer note:">{note}</DataRow>
+      </Box>
+
+      <Divider sx={{ mb: 2 }} />
+    </>
+  ) : null
+}
+
+export default TxNote

apps/web/src/components/transactions/TxDetails/index.tsx

@@ -36,6 +36,7 @@ import { FEATURES } from '@/utils/chains'
 import { useGetTransactionDetailsQuery } from '@/store/api/gateway'
 import { asError } from '@/services/exceptions/utils'
 import { POLLING_INTERVAL } from '@/config/constants'
+import TxNote from './TxNote'
 
 export const NOT_AVAILABLE = 'n/a'
 
@@ -82,6 +83,8 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
     <>
       {/* /Details */}
       <div className={`${css.details} ${isUnsigned ? css.noSigners : ''}`}>
+        <TxNote txDetails={txDetails} />
+
         <div className={css.shareLink}>
           <TxShareLink id={txSummary.id} />
         </div>

apps/web/src/components/transactions/TxSummary/styles.module.css

@@ -29,9 +29,9 @@
 }
 
 .gridContainer.conflictGroup {
-  grid-template-columns: var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(--grid-status) var(
-      --grid-actions
-    );
+  grid-template-columns: var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(
+      --grid-status
+    ) var(--grid-actions);
   grid-template-areas: 'type info date confirmations status actions';
 }