From 688c31741e69d6a57a3bcdee6dcd0e3c076eb563 Mon Sep 17 00:00:00 2001 From: katspaugh Date: Wed, 20 Nov 2024 16:25:52 +0100 Subject: [PATCH] Refactor: rm unnecessary tx decoding --- .../tx-flow/flows/SuccessScreen/index.tsx | 13 ++++------ src/components/tx/ConfirmationOrder/index.tsx | 23 ------------------ .../tx/SignOrExecuteForm/ExecuteForm.tsx | 2 +- src/components/tx/SignOrExecuteForm/hooks.ts | 10 ++------ .../tx/confirmation-views/StakingTx/index.tsx | 13 ++++++++++ .../tx/confirmation-views/SwapOrder/index.tsx | 16 +++++++++++++ .../tx/confirmation-views/index.tsx | 24 ++++++++----------- .../StakingConfirmationTx/Deposit.tsx | 10 ++++---- .../components/StakingConfirmationTx/Exit.tsx | 6 ++--- .../StakingConfirmationTx/index.tsx | 16 +++++-------- .../StakingTxDepositDetails/index.tsx | 2 +- 11 files changed, 61 insertions(+), 74 deletions(-) delete mode 100644 src/components/tx/ConfirmationOrder/index.tsx create mode 100644 src/components/tx/confirmation-views/StakingTx/index.tsx create mode 100644 src/components/tx/confirmation-views/SwapOrder/index.tsx diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx index 88e31e4461..b70605ac20 100644 --- a/src/components/tx-flow/flows/SuccessScreen/index.tsx +++ b/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(txHash) const [error, setError] = useState() 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 diff --git a/src/components/tx/ConfirmationOrder/index.tsx b/src/components/tx/ConfirmationOrder/index.tsx deleted file mode 100644 index 33142de06f..0000000000 --- a/src/components/tx/ConfirmationOrder/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import StrakingConfirmationTx from '@/features/stake/components/StakingConfirmationTx' -import SwapOrderConfirmationView from '@/features/swap/components/SwapOrderConfirmationView' -import type useDecodeTx from '@/hooks/useDecodeTx' -import { isAnyStakingConfirmationView, isAnySwapConfirmationViewOrder } from '@/utils/transaction-guards' - -type OrderConfirmationViewProps = { - decodedData: ReturnType[0] - toAddress: string -} - -const ConfirmationOrder = ({ decodedData, toAddress }: OrderConfirmationViewProps) => { - if (isAnySwapConfirmationViewOrder(decodedData)) { - return - } - - if (isAnyStakingConfirmationView(decodedData)) { - return - } - - return null -} - -export default ConfirmationOrder diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx index 55d67a6b05..daaa6f09b4 100644 --- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx +++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx @@ -114,7 +114,7 @@ export const ExecuteForm = ({ // On success onSubmit?.(executedTxId, true) - setTxFlow(, undefined, false) + setTxFlow(, undefined, false) } const walletCanPay = useWalletCanPay({ diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts index 5d899cc3a0..f8ba8dfaf8 100644 --- a/src/components/tx/SignOrExecuteForm/hooks.ts +++ b/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") diff --git a/src/components/tx/confirmation-views/StakingTx/index.tsx b/src/components/tx/confirmation-views/StakingTx/index.tsx new file mode 100644 index 0000000000..2a101c565a --- /dev/null +++ b/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 +} + +export default StakingTx diff --git a/src/components/tx/confirmation-views/SwapOrder/index.tsx b/src/components/tx/confirmation-views/SwapOrder/index.tsx new file mode 100644 index 0000000000..bb969ae49a --- /dev/null +++ b/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 ( + + ) +} + +export default SwapOrder diff --git a/src/components/tx/confirmation-views/index.tsx b/src/components/tx/confirmation-views/index.tsx index 39f99518d7..3a219fe3ff 100644 --- a/src/components/tx/confirmation-views/index.tsx +++ b/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 + if (isSwapOrderTxInfo(txInfo)) return + + if (isAnyStakingTxInfo(txInfo)) return + 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 && )} - {decodedData && } - {props.children} ) diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx index ecb42bd615..c1505e0c33 100644 --- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx +++ b/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) diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx index 34e55eafcc..5c774f09d4 100644 --- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx +++ b/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', }, diff --git a/src/features/stake/components/StakingConfirmationTx/index.tsx b/src/features/stake/components/StakingConfirmationTx/index.tsx index c1309fccb4..35b2c5f4aa 100644 --- a/src/features/stake/components/StakingConfirmationTx/index.tsx +++ b/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 } - if (isExit) { + if (isStakingTxExitInfo(order)) { return } - if (isWithdraw) { + if (isStakingTxWithdrawInfo(order)) { return } diff --git a/src/features/stake/components/StakingTxDepositDetails/index.tsx b/src/features/stake/components/StakingTxDepositDetails/index.tsx index 6165bfa729..e2ce845d7e 100644 --- a/src/features/stake/components/StakingTxDepositDetails/index.tsx +++ b/src/features/stake/components/StakingTxDepositDetails/index.tsx @@ -19,7 +19,7 @@ const StakingTxDepositDetails = ({ info, txData }: { info: StakingTxDepositInfo; )} {info.annualNrr.toFixed(3)}% - + ) }