fix(staking-tx): Add staking condition back into the confirmation view (

#4463)

* fix(staking-tx): Add staking condition back into the confirmation view

* fix(staking-confirmation): remove typo

src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx

@@ -96,14 +96,6 @@ export const SignOrExecuteForm = ({
   const [shouldExecute, setShouldExecute] = useState<boolean>(transactionExecution)
   const isNewExecutableTx = useImmediatelyExecutable() && isCreation
   const isCorrectNonce = useValidateNonce(safeTx)
-
-  console.log(props.txDetails)
-
-  // TODO: move it to the confirmation view
-  // const showTxDetails =
-  //   !isAnyStakingTxInfo(txDetails.txInfo) &&
-  //   !isOrderTxInfo(txDetails.txInfo)
-
   const isBatchable = props.isBatchable !== false && safeTx && !isDelegateCall(safeTx)
 
   const [trigger] = useLazyGetTransactionDetailsQuery()

src/components/tx/confirmation-views/index.tsx

@@ -3,7 +3,7 @@ import DecodedTx from '../DecodedTx'
 import ConfirmationOrder from '../ConfirmationOrder'
 import useDecodeTx from '@/hooks/useDecodeTx'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
-import { isCustomTxInfo, isGenericConfirmation } from '@/utils/transaction-guards'
+import { isAnyStakingTxInfo, isCustomTxInfo, isGenericConfirmation, isOrderTxInfo } from '@/utils/transaction-guards'
 import { type ReactNode, useContext, useMemo } from 'react'
 import TxData from '@/components/transactions/TxDetails/TxData'
 import type { NarrowConfirmationViewProps } from './types'
@@ -38,36 +38,43 @@ const getConfirmationViewComponent = ({
   return null
 }
 
-const ConfirmationView = (props: ConfirmationViewProps) => {
-  const { txId } = props.txDetails || {}
+const ConfirmationView = ({ txDetails, ...props }: ConfirmationViewProps) => {
+  const { txId } = txDetails || {}
   const [decodedData] = useDecodeTx(props.safeTx)
   const { txFlow } = useContext(TxModalContext)
 
   const ConfirmationViewComponent = useMemo(
     () =>
-      props.txDetails
+      txDetails
         ? getConfirmationViewComponent({
-            txDetails: props.txDetails,
-            txInfo: props.txDetails.txInfo,
+            txDetails,
+            txInfo: txDetails.txInfo,
             txFlow,
           })
         : undefined,
-    [props.txDetails, txFlow],
+    [txDetails, txFlow],
   )
-  const showTxDetails = txId && !props.isCreation && props.txDetails && !isCustomTxInfo(props.txDetails.txInfo)
+
+  const showTxDetails =
+    txId &&
+    !props.isCreation &&
+    txDetails &&
+    !isCustomTxInfo(txDetails.txInfo) &&
+    !isAnyStakingTxInfo(txDetails.txInfo) &&
+    !isOrderTxInfo(txDetails.txInfo)
 
   return (
     <>
       {ConfirmationViewComponent ||
-        (showTxDetails && props.txDetails && <TxData txDetails={props.txDetails} imitation={false} trusted />)}
+        (showTxDetails && txDetails && <TxData txDetails={txDetails} imitation={false} trusted />)}
 
       {decodedData && <ConfirmationOrder decodedData={decodedData} toAddress={props.safeTx?.data.to ?? ''} />}
 
       {props.children}
 
       <DecodedTx
         tx={props.safeTx}
-        txDetails={props.txDetails}
+        txDetails={txDetails}
         decodedData={decodedData}
         showMultisend={!props.isBatch}
         showMethodCall={