From 2f216dc2073d621bc3adc2154b2cac6a88da0395 Mon Sep 17 00:00:00 2001 From: Diogo Soares Date: Thu, 29 Dec 2022 13:01:38 +0000 Subject: [PATCH 1/3] fix: update signers confirmations --- .../transactions/TxSigners/index.tsx | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/transactions/TxSigners/index.tsx b/src/components/transactions/TxSigners/index.tsx index e494ec843d..9e5c5368cb 100644 --- a/src/components/transactions/TxSigners/index.tsx +++ b/src/components/transactions/TxSigners/index.tsx @@ -1,4 +1,4 @@ -import { useState, type ReactElement } from 'react' +import { useEffect, useState, type ReactElement } from 'react' import type { Palette } from '@mui/material' import { Box, Link, Step, StepConnector, StepContent, StepLabel, Stepper, type StepProps } from '@mui/material' import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' @@ -9,9 +9,11 @@ import CancelIcon from '@mui/icons-material/Cancel' import type { AddressEx, DetailedExecutionInfo, + MultisigConfirmation, TransactionDetails, TransactionSummary, } from '@safe-global/safe-gateway-typescript-sdk' +import { getTransactionDetails } from '@safe-global/safe-gateway-typescript-sdk' import useWallet from '@/hooks/wallets/useWallet' import useIsPending from '@/hooks/useIsPending' @@ -20,6 +22,8 @@ import EthHashInfo from '@/components/common/EthHashInfo' import css from './styles.module.css' import useSafeInfo from '@/hooks/useSafeInfo' +import useChainId from '@/hooks/useChainId' +import { TxEvent, txSubscribe } from '@/services/tx/txEvents' // Icons @@ -102,6 +106,22 @@ export const TxSigners = ({ const isPending = useIsPending(txId) const wallet = useWallet() const { safe } = useSafeInfo() + const chainId = useChainId() + const [confirmations, setConfirmations] = useState([]) + + useEffect(() => { + if (isMultisigDetailedExecutionInfo(detailedExecutionInfo)) { + setConfirmations(detailedExecutionInfo.confirmations) + } + }, [detailedExecutionInfo]) + + txSubscribe(TxEvent.SIGNATURE_INDEXED, ({ txId }) => { + getTransactionDetails(chainId, txId).then(({ detailedExecutionInfo }) => { + if (isMultisigDetailedExecutionInfo(detailedExecutionInfo)) { + setConfirmations(detailedExecutionInfo.confirmations) + } + }) + }) const toggleHide = () => { setHideConfirmations((prev) => !prev) @@ -111,7 +131,7 @@ export const TxSigners = ({ return null } - const { confirmations, confirmationsRequired, executor } = detailedExecutionInfo + const { confirmationsRequired, executor } = detailedExecutionInfo const confirmationsCount = confirmations.length const canExecute = wallet?.address ? isExecutable(txSummary, wallet.address, safe) : false @@ -137,9 +157,7 @@ export const TxSigners = ({ : }> Confirmations{' '} - - ({`${confirmationsCount} of ${detailedExecutionInfo.confirmationsRequired}`}) - + ({`${confirmationsCount} of ${confirmationsRequired}`}) {!hideConfirmations && confirmations.map(({ signer }) => getConfirmationStep(signer, signer.value))} From 84b243d66f082f547de6afc6d279a5e134acb254 Mon Sep 17 00:00:00 2001 From: Diogo Soares Date: Thu, 29 Dec 2022 17:17:25 +0000 Subject: [PATCH 2/3] fetch txDetails when txQueueTag changes --- .../transactions/TxDetails/index.tsx | 4 +++- .../transactions/TxSigners/index.tsx | 24 ++----------------- 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx index 005bbf049f..236b57c57d 100644 --- a/src/components/transactions/TxDetails/index.tsx +++ b/src/components/transactions/TxDetails/index.tsx @@ -30,6 +30,7 @@ import useWallet from '@/hooks/wallets/useWallet' import useIsWrongChain from '@/hooks/useIsWrongChain' import { DelegateCallWarning, UnsignedWarning } from '@/components/transactions/Warning' import Multisend from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend' +import useSafeInfo from '@/hooks/useSafeInfo' export const NOT_AVAILABLE = 'n/a' @@ -122,10 +123,11 @@ const TxDetails = ({ txDetails?: TransactionDetails // optional }): ReactElement => { const chainId = useChainId() + const { safe } = useSafeInfo() const [txDetailsData, error, loading] = useAsync(async () => { return txDetails || getTransactionDetails(chainId, txSummary.id) - }, [txDetails, chainId, txSummary.id]) + }, [txDetails, chainId, txSummary.id, safe.txQueuedTag]) return (
diff --git a/src/components/transactions/TxSigners/index.tsx b/src/components/transactions/TxSigners/index.tsx index 9e5c5368cb..43b44387da 100644 --- a/src/components/transactions/TxSigners/index.tsx +++ b/src/components/transactions/TxSigners/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, type ReactElement } from 'react' +import { useState, type ReactElement } from 'react' import type { Palette } from '@mui/material' import { Box, Link, Step, StepConnector, StepContent, StepLabel, Stepper, type StepProps } from '@mui/material' import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' @@ -9,11 +9,9 @@ import CancelIcon from '@mui/icons-material/Cancel' import type { AddressEx, DetailedExecutionInfo, - MultisigConfirmation, TransactionDetails, TransactionSummary, } from '@safe-global/safe-gateway-typescript-sdk' -import { getTransactionDetails } from '@safe-global/safe-gateway-typescript-sdk' import useWallet from '@/hooks/wallets/useWallet' import useIsPending from '@/hooks/useIsPending' @@ -22,8 +20,6 @@ import EthHashInfo from '@/components/common/EthHashInfo' import css from './styles.module.css' import useSafeInfo from '@/hooks/useSafeInfo' -import useChainId from '@/hooks/useChainId' -import { TxEvent, txSubscribe } from '@/services/tx/txEvents' // Icons @@ -106,22 +102,6 @@ export const TxSigners = ({ const isPending = useIsPending(txId) const wallet = useWallet() const { safe } = useSafeInfo() - const chainId = useChainId() - const [confirmations, setConfirmations] = useState([]) - - useEffect(() => { - if (isMultisigDetailedExecutionInfo(detailedExecutionInfo)) { - setConfirmations(detailedExecutionInfo.confirmations) - } - }, [detailedExecutionInfo]) - - txSubscribe(TxEvent.SIGNATURE_INDEXED, ({ txId }) => { - getTransactionDetails(chainId, txId).then(({ detailedExecutionInfo }) => { - if (isMultisigDetailedExecutionInfo(detailedExecutionInfo)) { - setConfirmations(detailedExecutionInfo.confirmations) - } - }) - }) const toggleHide = () => { setHideConfirmations((prev) => !prev) @@ -131,7 +111,7 @@ export const TxSigners = ({ return null } - const { confirmationsRequired, executor } = detailedExecutionInfo + const { confirmations, confirmationsRequired, executor } = detailedExecutionInfo const confirmationsCount = confirmations.length const canExecute = wallet?.address ? isExecutable(txSummary, wallet.address, safe) : false From 4f3140219c9a981a22b808d91067334531b0d4eb Mon Sep 17 00:00:00 2001 From: schmanu Date: Mon, 2 Jan 2023 09:55:26 +0100 Subject: [PATCH 3/3] fix: flickering when reloading the tx details --- src/components/transactions/TxDetails/index.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx index 236b57c57d..25cb46e68f 100644 --- a/src/components/transactions/TxDetails/index.tsx +++ b/src/components/transactions/TxDetails/index.tsx @@ -125,9 +125,13 @@ const TxDetails = ({ const chainId = useChainId() const { safe } = useSafeInfo() - const [txDetailsData, error, loading] = useAsync(async () => { - return txDetails || getTransactionDetails(chainId, txSummary.id) - }, [txDetails, chainId, txSummary.id, safe.txQueuedTag]) + const [txDetailsData, error, loading] = useAsync( + async () => { + return txDetails || getTransactionDetails(chainId, txSummary.id) + }, + [txDetails, chainId, txSummary.id, safe.txQueuedTag], + false, + ) return (