Fix(Tx notes): fire analytics on tx submit + adjust design

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

@@ -33,7 +33,7 @@ import ConfirmationView from '../confirmation-views'
 import { SignerForm } from './SignerForm'
 import { useSigner } from '@/hooks/wallets/useWallet'
 import { trackTxEvents } from './tracking'
-import { TxNoteForm, encodeTxNote } from '@/features/tx-notes'
+import { TxNoteForm, encodeTxNote, trackAddNote } from '@/features/tx-notes'
 
 export type SubmitCallback = (txId: string, isExecuted?: boolean) => void
 
@@ -112,8 +112,12 @@ export const SignOrExecuteForm = ({
         !!signer?.isSafe,
         customOrigin,
       )
+
+      if (customOrigin !== props.origin) {
+        trackAddNote()
+      }
     },
-    [chainId, isCreation, onSubmit, trigger, signer?.isSafe, customOrigin],
+    [chainId, isCreation, onSubmit, trigger, signer?.isSafe, customOrigin, props.origin],
   )
 
   const onRoleExecutionSubmit = useCallback<typeof onFormSubmit>(
@@ -126,7 +130,7 @@ export const SignOrExecuteForm = ({
     [onFormSubmit],
   )
 
-  const onNoteSubmit = useCallback(
+  const onNoteChange = useCallback(
     (note: string) => {
       setCustomOrigin(encodeTxNote(note, props.origin))
     },
@@ -194,7 +198,7 @@ export const SignOrExecuteForm = ({
 
       {!isCounterfactualSafe && !props.isRejection && <TxChecks />}
 
-      <TxNoteForm isCreation={isCreation ?? false} onSubmit={onNoteSubmit} txDetails={props.txDetails} />
+      <TxNoteForm isCreation={isCreation ?? false} onChange={onNoteChange} txDetails={props.txDetails} />
 
       <SignerForm willExecute={willExecute} />
 

apps/web/src/features/tx-notes/TxNoteForm.tsx

@@ -6,11 +6,16 @@ import { TxNoteInput } from './TxNoteInput'
 export function TxNoteForm({
   isCreation,
   txDetails,
-  onSubmit,
+  onChange,
 }: {
   isCreation: boolean
   txDetails?: TransactionDetails
-  onSubmit: (note: string) => void
+  onChange: (note: string) => void
 }) {
-  return <TxCard>{isCreation ? <TxNoteInput onSubmit={onSubmit} /> : <TxNote txDetails={txDetails} />}</TxCard>
+  // @FIXME: update CGW types to include note
+  const note = (txDetails as TransactionDetails & { note: string | null })?.note
+
+  if (!isCreation && !note) return null
+
+  return <TxCard>{isCreation ? <TxNoteInput onChange={onChange} /> : <TxNote txDetails={txDetails} />}</TxCard>
 }

apps/web/src/features/tx-notes/TxNoteInput.tsx

@@ -1,37 +1,38 @@
 import { useCallback, useState } from 'react'
-import { InputAdornment, Stack, TextField, Typography } from '@mui/material'
-import InfoIcon from '@/public/images/notifications/info.svg'
-import { MODALS_EVENTS, trackEvent } from '@/services/analytics'
+import { InputAdornment, Stack, TextField, Typography, Alert } from '@mui/material'
 
-const MAX_NOTE_LENGTH = 120
+const MAX_NOTE_LENGTH = 60
 
-export const TxNoteInput = ({ onSubmit }: { onSubmit: (note: string) => void }) => {
+export const TxNoteInput = ({ onChange }: { onChange: (note: string) => void }) => {
   const [note, setNote] = useState('')
 
   const onInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setNote(e.target.value)
   }, [])
 
-  const onChange = useCallback(
+  const onInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      onSubmit(e.target.value.slice(0, MAX_NOTE_LENGTH))
-      trackEvent(MODALS_EVENTS.ADD_TX_NOTE)
+      onChange(e.target.value.slice(0, MAX_NOTE_LENGTH))
     },
-    [onSubmit],
+    [onChange],
   )
 
   return (
     <>
       <Stack direction="row" alignItems="flex-end" gap={1}>
-        <Typography variant="h5">What does this transaction do?</Typography>
+        <Typography variant="h5">Optional note</Typography>
         <Typography variant="body2" color="text.secondary">
-          Optional
+          Experimental
         </Typography>
       </Stack>
 
+      <Alert severity="info">
+        The notes are <b>publicly visible</b>, do not share any private or sensitive details.
+      </Alert>
+
       <TextField
         name="note"
-        label="Add note"
+        label="Note"
         fullWidth
         slotProps={{
           htmlInput: { maxLength: MAX_NOTE_LENGTH },
@@ -46,13 +47,8 @@ export const TxNoteInput = ({ onSubmit }: { onSubmit: (note: string) => void })
           },
         }}
         onInput={onInput}
-        onChange={onChange}
+        onChange={onInputChange}
       />
-
-      <Typography variant="caption" color="text.secondary" display="flex" alignItems="center">
-        <InfoIcon height="1.2em" />
-        This note will be publicly visible and accessible to anyone.
-      </Typography>
     </>
   )
 }

apps/web/src/features/tx-notes/encodeTxNote.ts

@@ -1,7 +1,5 @@
 const MAX_ORIGIN_LENGTH = 200
 
-const stringifyOrigin = (origin: Record<string, string>): string => JSON.stringify(origin, null, 0)
-
 export function encodeTxNote(note: string, origin = ''): string {
   let originalOrigin = {}
 
@@ -13,13 +11,13 @@ export function encodeTxNote(note: string, origin = ''): string {
     }
   }
 
-  let result = stringifyOrigin({
+  let result = JSON.stringify({
     ...originalOrigin,
     note,
   })
 
   if (result.length > MAX_ORIGIN_LENGTH) {
-    result = stringifyOrigin({
+    result = JSON.stringify({
       ...originalOrigin,
       note: note.slice(0, MAX_ORIGIN_LENGTH - origin.length),
     })

apps/web/src/features/tx-notes/index.tsx

@@ -1,7 +1,12 @@
 import { featureToggled, FEATURES } from '@/utils/featureToggled'
 import { TxNote as TxNoteComponent } from './TxNote'
 import { TxNoteForm as TxNoteFormComponent } from './TxNoteForm'
+import { MODALS_EVENTS, trackEvent } from '@/services/analytics'
 
 export const TxNote = featureToggled(TxNoteComponent, FEATURES.TX_NOTES)
 export const TxNoteForm = featureToggled(TxNoteFormComponent, FEATURES.TX_NOTES)
 export * from './encodeTxNote'
+
+export function trackAddNote() {
+  trackEvent(MODALS_EVENTS.SUBMIT_TX_NOTE)
+}

apps/web/src/services/analytics/events/modals.ts

@@ -87,8 +87,8 @@ export const MODALS_EVENTS = {
     category: MODALS_CATEGORY,
     event: EventType.CLICK,
   },
-  ADD_TX_NOTE: {
-    action: 'Add tx note',
+  SUBMIT_TX_NOTE: {
+    action: 'Submit tx note',
     category: MODALS_CATEGORY,
     event: EventType.CLICK,
   },