Refactor: rm unnecessary tx decoding

src/components/tx-flow/flows/SuccessScreen/index.tsx

@@ -14,21 +14,18 @@ import LoadingSpinner, { SpinnerStatus } from '@/components/new-safe/create/step
 import { ProcessingStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus'
 import { IndexingStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus'
 import { DefaultStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus'
-import useDecodeTx from '@/hooks/useDecodeTx'
-import { isSwapConfirmationViewOrder } from '@/utils/transaction-guards'
-import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import { isSwapTransferOrderTxInfo } from '@/utils/transaction-guards'
 import { getTxLink } from '@/utils/tx-link'
+import useTxDetails from '@/hooks/useTxDetails'
 
 interface Props {
   /** The ID assigned to the transaction in the client-gateway */
   txId?: string
   /** For module transaction, pass the transaction hash while the `txId` is not yet available */
   txHash?: string
-  /** The multisig transaction object */
-  safeTx?: SafeTransaction
 }
 
-const SuccessScreen = ({ txId, txHash, safeTx }: Props) => {
+const SuccessScreen = ({ txId, txHash }: Props) => {
   const [localTxHash, setLocalTxHash] = useState<string | undefined>(txHash)
   const [error, setError] = useState<Error>()
   const { setTxFlow } = useContext(TxModalContext)
@@ -38,8 +35,8 @@ const SuccessScreen = ({ txId, txHash, safeTx }: Props) => {
   const status = !txId && txHash ? PendingStatus.INDEXING : pendingTx?.status
   const pendingTxHash = pendingTx && 'txHash' in pendingTx ? pendingTx.txHash : undefined
   const txLink = chain && txId && getTxLink(txId, chain, safeAddress)
-  const [decodedData] = useDecodeTx(safeTx)
-  const isSwapOrder = isSwapConfirmationViewOrder(decodedData)
+  const [txDetails] = useTxDetails(txId)
+  const isSwapOrder = txDetails && isSwapTransferOrderTxInfo(txDetails.txInfo)
 
   useEffect(() => {
     if (!pendingTxHash) return

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -114,7 +114,7 @@ export const ExecuteForm = ({
 
     // On success
     onSubmit?.(executedTxId, true)
-    setTxFlow(<SuccessScreenFlow txId={executedTxId} safeTx={safeTx} />, undefined, false)
+    setTxFlow(<SuccessScreenFlow txId={executedTxId} />, undefined, false)
   }
 
   const walletCanPay = useWalletCanPay({

src/components/tx/SignOrExecuteForm/hooks.ts

@@ -146,14 +146,8 @@ export const useTxActions = (): TxActions => {
       let tx: TransactionDetails | undefined
       // Relayed transactions must be fully signed, so request a final signature if needed
       if (isRelayed && safeTx.signatures.size < safe.threshold) {
-        if (txId) {
-          safeTx = await signRelayedTx(safeTx)
-          tx = await _propose(wallet.address, safeTx, txId, origin)
-        } else {
-          tx = await _propose(wallet.address, safeTx, txId, origin)
-          safeTx = await signRelayedTx(safeTx)
-        }
-        txId = tx.txId
+        safeTx = await signRelayedTx(safeTx)
+        txId = '' // need to propose again with the signature
       }
 
       // Propose the tx if there's no id yet ("immediate execution")

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

@@ -0,0 +1,13 @@
+import StrakingConfirmationTx from '@/features/stake/components/StakingConfirmationTx'
+import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { NarrowConfirmationViewProps } from '../types'
+
+export interface StakingTxProps extends NarrowConfirmationViewProps {
+  txInfo: StakingTxInfo
+}
+
+function StakingTx({ txInfo }: StakingTxProps) {
+  return <StrakingConfirmationTx order={txInfo} />
+}
+
+export default StakingTx

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

@@ -0,0 +1,16 @@
+import SwapOrderConfirmation from '@/features/swap/components/SwapOrderConfirmationView'
+import type { AnySwapOrderConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
+import type { NarrowConfirmationViewProps } from '../types'
+
+interface SwapOrderProps extends NarrowConfirmationViewProps {}
+
+function SwapOrder({ txDetails, txInfo }: SwapOrderProps) {
+  return (
+    <SwapOrderConfirmation
+      order={txInfo as unknown as AnySwapOrderConfirmationView}
+      settlementContract={txDetails?.txData?.to?.value ?? ''}
+    />
+  )
+}
+
+export default SwapOrder

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

@@ -1,15 +1,14 @@
+import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import DecodedTx from '../DecodedTx'
-import ConfirmationOrder from '../ConfirmationOrder'
-import useDecodeTx from '@/hooks/useDecodeTx'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import {
   isAnyStakingTxInfo,
   isCustomTxInfo,
   isExecTxData,
-  isGenericConfirmation,
   isOnChainConfirmationTxData,
   isOrderTxInfo,
+  isSwapOrderTxInfo,
 } from '@/utils/transaction-guards'
 import { type ReactNode, useContext, useMemo } from 'react'
 import TxData from '@/components/transactions/TxDetails/TxData'
@@ -22,6 +21,8 @@ import { isSettingsChangeView, isChangeThresholdView, isConfirmBatchView } from
 import { OnChainConfirmation } from '@/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation'
 import { ExecTransaction } from '@/components/transactions/TxDetails/TxData/NestedTransaction/ExecTransaction'
 import { type ReactElement } from 'react'
+import SwapOrder from './SwapOrder'
+import StakingTx from './StakingTx'
 
 type ConfirmationViewProps = {
   txDetails?: TransactionDetails
@@ -51,12 +52,15 @@ const getConfirmationViewComponent = ({
 
   if (isExecTxData(txDetails.txData)) return <ExecTransaction data={txDetails.txData} isConfirmationView />
 
+  if (isSwapOrderTxInfo(txInfo)) return <SwapOrder txDetails={txDetails} txInfo={txInfo} />
+
+  if (isAnyStakingTxInfo(txInfo)) return <StakingTx txDetails={txDetails} txInfo={txInfo as StakingTxInfo} />
+
   return null
 }
 
 const ConfirmationView = ({ txDetails, ...props }: ConfirmationViewProps) => {
   const { txId } = txDetails || {}
-  const [decodedData] = useDecodeTx(props.safeTx)
   const { txFlow } = useContext(TxModalContext)
 
   const ConfirmationViewComponent = useMemo(
@@ -84,22 +88,14 @@ const ConfirmationView = ({ txDetails, ...props }: ConfirmationViewProps) => {
       {ConfirmationViewComponent ||
         (showTxDetails && txDetails && <TxData txDetails={txDetails} imitation={false} trusted />)}
 
-      {decodedData && <ConfirmationOrder decodedData={decodedData} toAddress={props.safeTx?.data.to ?? ''} />}
-
       {props.children}
 
       <DecodedTx
         tx={props.safeTx}
         txDetails={txDetails}
-        decodedData={decodedData}
+        decodedData={txDetails?.txData?.dataDecoded}
         showMultisend={!props.isBatch}
-        showMethodCall={
-          props.showMethodCall &&
-          !ConfirmationViewComponent &&
-          !showTxDetails &&
-          !props.isApproval &&
-          isGenericConfirmation(decodedData)
-        }
+        showMethodCall={props.showMethodCall && !ConfirmationViewComponent && !showTxDetails && !props.isApproval}
       />
     </>
   )

src/features/stake/components/StakingConfirmationTx/Deposit.tsx

@@ -1,10 +1,7 @@
 import { Box, Stack, Typography } from '@mui/material'
 import FieldsGrid from '@/components/tx/FieldsGrid'
 import type { StakingTxDepositInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import {
-  ConfirmationViewTypes,
-  type NativeStakingDepositConfirmationView,
-} from '@safe-global/safe-gateway-typescript-sdk'
+import { type NativeStakingDepositConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
 import { formatDurationFromMilliseconds, formatVisualAmount } from '@/utils/formatters'
 import { formatCurrency } from '@/utils/formatNumber'
@@ -13,12 +10,13 @@ import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingDepositConfirmationView | StakingTxDepositInfo
+  isTxDetails?: boolean
 }
 
 const CURRENCY = 'USD'
 
-const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewProps) => {
-  const isOrder = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_DEPOSIT
+const StakingConfirmationTxDeposit = ({ order, isTxDetails }: StakingOrderConfirmationViewProps) => {
+  const isOrder = !isTxDetails
 
   // the fee is returned in decimal format, so we multiply by 100 to get the percentage
   const fee = (order.fee * 100).toFixed(2)

src/features/stake/components/StakingConfirmationTx/Exit.tsx

@@ -1,12 +1,12 @@
 import { Alert, Stack, Typography } from '@mui/material'
 import FieldsGrid from '@/components/tx/FieldsGrid'
 import { formatDurationFromMilliseconds } from '@/utils/formatters'
-import { type NativeStakingValidatorsExitConfirmationView } from '@safe-global/safe-gateway-typescript-sdk/dist/types/decoded-data'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
 import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
+import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 type StakingOrderConfirmationViewProps = {
-  order: NativeStakingValidatorsExitConfirmationView
+  order: StakingTxExitInfo
 }
 
 const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps) => {
@@ -28,7 +28,7 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
             label: 'Exit',
           },
           {
-            value: order.value || '0',
+            value: (order as unknown as { value: string }).value || '0',
             tokenInfo: order.tokenInfo,
             label: 'Receive',
           },

src/features/stake/components/StakingConfirmationTx/index.tsx

@@ -1,27 +1,23 @@
-import type { AnyStakingConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
-import { ConfirmationViewTypes, type StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import StakingConfirmationTxDeposit from '@/features/stake/components/StakingConfirmationTx/Deposit'
 import StakingConfirmationTxExit from '@/features/stake/components/StakingConfirmationTx/Exit'
 import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingConfirmationTx/Withdraw'
+import { isStakingTxDepositInfo, isStakingTxExitInfo, isStakingTxWithdrawInfo } from '@/utils/transaction-guards'
 
 type StakingOrderConfirmationViewProps = {
-  order: AnyStakingConfirmationView | StakingTxInfo
+  order: StakingTxInfo
 }
 
 const StrakingConfirmationTx = ({ order }: StakingOrderConfirmationViewProps) => {
-  const isDeposit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_DEPOSIT
-  const isExit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_VALIDATORS_EXIT
-  const isWithdraw = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_WITHDRAW
-
-  if (isDeposit) {
+  if (isStakingTxDepositInfo(order)) {
     return <StakingConfirmationTxDeposit order={order} />
   }
 
-  if (isExit) {
+  if (isStakingTxExitInfo(order)) {
     return <StakingConfirmationTxExit order={order} />
   }
 
-  if (isWithdraw) {
+  if (isStakingTxWithdrawInfo(order)) {
     return <StakingConfirmationTxWithdraw order={order} />
   }
 

src/features/stake/components/StakingTxDepositDetails/index.tsx

@@ -19,7 +19,7 @@ const StakingTxDepositDetails = ({ info, txData }: { info: StakingTxDepositInfo;
         <SendAmountBlock title="Deposit" amountInWei={txData.value?.toString() || '0'} tokenInfo={info.tokenInfo} />
       )}
       <FieldsGrid title="Net reward rate">{info.annualNrr.toFixed(3)}%</FieldsGrid>
-      <StakingConfirmationTxDeposit order={info} />
+      <StakingConfirmationTxDeposit order={info} isTxDetails />
     </Box>
   )
 }