Fix: status widget for 1271 messages (#2415)

safe-global · Aug 17, 2023 · 1d5838c · 1d5838c
1 parent 916edcf
commit 1d5838c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -57,6 +57,7 @@ type TxLayoutProps = {
   hideNonce?: boolean
   isBatch?: boolean
   isReplacement?: boolean
+  isMessage?: boolean
 }
 
 const TxLayout = ({
@@ -70,6 +71,7 @@ const TxLayout = ({
   hideNonce = false,
   isBatch = false,
   isReplacement = false,
+  isMessage = false,
 }: TxLayoutProps): ReactElement => {
   const [statusVisible, setStatusVisible] = useState<boolean>(true)
 
@@ -142,6 +144,7 @@ const TxLayout = ({
                       handleClose={() => setStatusVisible(false)}
                       isReplacement={isReplacement}
                       isBatch={isBatch}
+                      isMessage={isMessage}
                     />
                   )}
 

diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -1,3 +1,4 @@
+import { useContext } from 'react'
 import { Divider, IconButton, List, ListItem, ListItemIcon, ListItemText, Paper, Typography } from '@mui/material'
 import CreatedIcon from '@/public/images/messages/created.svg'
 import SignedIcon from '@/public/images/messages/signed.svg'
@@ -9,29 +10,22 @@ import css from './styles.module.css'
 import CloseIcon from '@mui/icons-material/Close'
 import useWallet from '@/hooks/wallets/useWallet'
 import SafeLogo from '@/public/images/logo-no-text.svg'
-import { useContext } from 'react'
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
 
-const confirmedMessage = (threshold: number, confirmations: number) => {
-  return (
-    <>
-      Confirmed ({confirmations} of {threshold})
-    </>
-  )
-}
-
 const TxStatusWidget = ({
   step,
   txSummary,
   handleClose,
   isReplacement = false,
   isBatch = false,
+  isMessage = false,
 }: {
   step: number
   txSummary?: TransactionSummary
   handleClose: () => void
   isReplacement?: boolean
   isBatch?: boolean
+  isMessage?: boolean
 }) => {
   const wallet = useWallet()
   const { safe } = useSafeInfo()
@@ -49,8 +43,9 @@ const TxStatusWidget = ({
       <div className={css.header}>
         <Typography fontWeight="700" display="flex" alignItems="center" gap={1}>
           <SafeLogo width={16} height={16} className={css.logo} />
-          Transaction status
+          {isMessage ? 'Message' : 'Transaction'} status
         </Typography>
+
         <IconButton className={css.close} aria-label="close" onClick={handleClose} size="small">
           <CloseIcon />
         </IconButton>
@@ -64,6 +59,7 @@ const TxStatusWidget = ({
             <ListItemIcon>
               <CreatedIcon />
             </ListItemIcon>
+
             <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
               {isReplacement ? 'Create replacement transaction' : isBatch ? 'Queue transactions' : 'Create'}
             </ListItemText>
@@ -73,14 +69,17 @@ const TxStatusWidget = ({
             <ListItemIcon>
               <SignedIcon />
             </ListItemIcon>
+
             <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
               {isBatch ? (
                 'Create batch'
               ) : !nonceNeeded ? (
                 'Confirmed'
+              ) : isMessage ? (
+                'Collect signatures'
               ) : (
                 <>
-                  {confirmedMessage(threshold, confirmationsSubmitted)}
+                  Confirmed ({confirmationsSubmitted} of {threshold})
                   {canSign && (
                     <Typography variant="body2" component="span" className={css.badge}>
                       +1
@@ -95,14 +94,16 @@ const TxStatusWidget = ({
             <ListItemIcon>
               <SignedIcon />
             </ListItemIcon>
-            <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Execute</ListItemText>
+
+            <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>{isMessage ? 'Done' : 'Execute'}</ListItemText>
           </ListItem>
 
           {isReplacement && (
             <ListItem className={css.incomplete}>
               <ListItemIcon>
                 <SignedIcon />
               </ListItemIcon>
+
               <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Transaction is replaced</ListItemText>
             </ListItem>
           )}

diff --git a/src/components/tx-flow/flows/SignMessage/index.tsx b/src/components/tx-flow/flows/SignMessage/index.tsx
@@ -26,6 +26,7 @@ const SignMessageFlow = ({ ...props }: ProposeProps | ConfirmProps) => {
       subtitle={<AppTitle name={props.name} logoUri={props.logoUri} />}
       step={0}
       hideNonce
+      isMessage
     >
       <SignMessage {...props} />
     </TxLayout>