Feat: public transaction notes

apps/web/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx

@@ -35,6 +35,7 @@ import { useSigner } from '@/hooks/wallets/useWallet'
 import { trackTxEvents } from './tracking'
 import TxNoteForm from './TxNoteForm'
 import TxNote from '@/components/transactions/TxDetails/TxNote'
+import { encodeTxNote } from '@/utils/transactions'
 
 export type SubmitCallback = (txId: string, isExecuted?: boolean) => void
 
@@ -129,13 +130,7 @@ export const SignOrExecuteForm = ({
 
   const onNoteSubmit = useCallback(
     (note: string) => {
-      const originalOrigin = props.origin ? JSON.parse(props.origin) : { url: location.origin }
-      setCustomOrigin(
-        JSON.stringify({
-          ...originalOrigin,
-          name: JSON.stringify({ note }),
-        }),
-      )
+      setCustomOrigin(encodeTxNote(note, props.origin))
     },
     [setCustomOrigin, props.origin],
   )

apps/web/src/components/tx/SignOrExecuteForm/TxNoteForm.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import { InputAdornment, Stack, TextField, Typography } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
 
-const MAX_NOTE_LENGTH = 120
+const MAX_NOTE_LENGTH = 100
 
 const TxNoteForm = ({ onSubmit }: { onSubmit: (note: string) => void }) => {
   const [note, setNote] = useState('')

apps/web/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap

@@ -130,7 +130,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
             aria-invalid="false"
             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-f423sj-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r1:"
-            maxlength="120"
+            maxlength="100"
             name="note"
             type="text"
           />
@@ -142,7 +142,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
             >
               0
               /
-              120
+              100
             </span>
           </div>
           <fieldset
@@ -543,7 +543,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
             aria-invalid="false"
             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-f423sj-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r6:"
-            maxlength="120"
+            maxlength="100"
             name="note"
             type="text"
           />
@@ -555,7 +555,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
             >
               0
               /
-              120
+              100
             </span>
           </div>
           <fieldset

apps/web/src/utils/__tests__/transactions.test.ts

@@ -7,7 +7,7 @@ import type {
 } from '@safe-global/safe-gateway-typescript-sdk'
 import { TransactionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import { isMultiSendTxInfo } from '../transaction-guards'
-import { getQueuedTransactionCount, getTxOrigin } from '../transactions'
+import { getQueuedTransactionCount, getTxOrigin, encodeTxNote } from '../transactions'
 
 jest.mock('@/services/tx/tx-sender/sdk')
 
@@ -196,4 +196,21 @@ describe('transactions', () => {
       ).toBe(false)
     })
   })
+
+  describe('transactions utils', () => {
+    it('should encode tx note with an existing origin', () => {
+      // Test goes here
+      const note = 'test note'
+      const origin = JSON.stringify({ url: 'http://some.dapp' })
+      const result = encodeTxNote(note, origin)
+      expect(result).toEqual(JSON.stringify({ url: 'http://some.dapp', name: JSON.stringify({ note }) }))
+    })
+
+    it('should encode tx note with an empty origin', () => {
+      // Test goes here
+      const note = 'test note'
+      const result = encodeTxNote(note)
+      expect(result).toEqual(JSON.stringify({ url: 'http://localhost', name: JSON.stringify({ note }) }))
+    })
+  })
 })

apps/web/src/utils/transactions.ts

@@ -240,3 +240,19 @@ export const getSafeTransaction = async (safeTxHash: string, chainId: string, sa
     return undefined
   }
 }
+
+export const encodeTxNote = (note: string, origin?: string): string => {
+  let originalOrigin = { url: '' }
+  if (origin) {
+    try {
+      originalOrigin = JSON.parse(origin)
+    } catch {}
+  }
+  if (!originalOrigin.url) {
+    originalOrigin.url = location.origin
+  }
+  return JSON.stringify({
+    ...originalOrigin,
+    name: JSON.stringify({ note }),
+  })
+}