feat: add replacement to transaction status widget

safe-global · Jun 27, 2023 · 8445209 · 8445209
1 parent df5730d
commit 8445209
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -23,6 +23,7 @@ type TxLayoutProps = {
   txSummary?: TransactionSummary
   onBack?: () => void
   hideNonce?: boolean
+  isReplacement?: boolean
 }
 
 const TxLayout = ({
@@ -34,6 +35,7 @@ const TxLayout = ({
   txSummary,
   onBack,
   hideNonce = false,
+  isReplacement = false,
 }: TxLayoutProps): ReactElement => {
   const [statusVisible, setStatusVisible] = useState<boolean>(true)
 
@@ -110,7 +112,12 @@ const TxLayout = ({
 
                 <Grid item xs={12} md={4} className={classnames(css.widget, { [css.active]: statusVisible })}>
                   {statusVisible && (
-                    <TxStatusWidget step={step} txSummary={txSummary} handleClose={() => setStatusVisible(false)} />
+                    <TxStatusWidget
+                      step={step}
+                      txSummary={txSummary}
+                      handleClose={() => setStatusVisible(false)}
+                      isReplacement={isReplacement}
+                    />
                   )}
 
                   <Box mt={2}>

diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -20,10 +20,12 @@ const TxStatusWidget = ({
   step,
   txSummary,
   handleClose,
+  isReplacement = false,
 }: {
   step: number
   txSummary?: TransactionSummary
   handleClose: () => void
+  isReplacement?: boolean
 }) => {
   const { safe } = useSafeInfo()
   const { threshold } = safe
@@ -53,7 +55,9 @@ const TxStatusWidget = ({
             <ListItemIcon>
               <CreatedIcon />
             </ListItemIcon>
-            <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Created</ListItemText>
+            <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
+              {isReplacement ? 'Create replacement transaction' : 'Create'}
+            </ListItemText>
           </ListItem>
 
           <ListItem className={classnames({ [css.incomplete]: isConfirmedStepIncomplete })}>
@@ -71,6 +75,15 @@ const TxStatusWidget = ({
             </ListItemIcon>
             <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Execute</ListItemText>
           </ListItem>
+
+          {isReplacement && (
+            <ListItem className={css.incomplete}>
+              <ListItemIcon>
+                <SignedIcon />
+              </ListItemIcon>
+              <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Transaction is replaced</ListItemText>
+            </ListItem>
+          )}
         </List>
       </div>
     </Paper>

diff --git a/src/components/tx-flow/flows/ReplaceTx/index.tsx b/src/components/tx-flow/flows/ReplaceTx/index.tsx
@@ -53,7 +53,7 @@ const ReplaceTxMenu = ({ txNonce }: { txNonce: number }) => {
   )
 
   return (
-    <TxLayout title="Replace transaction" step={0} hideNonce>
+    <TxLayout title="Replace transaction" step={0} hideNonce isReplacement>
       <TxCard>
         <Box my={4} textAlign="center">
           <ReplaceTxIcon />