remove code duplication by abstracting tx selection and tx status changes events

[NeOMakinG]

Overview

I noticed reviewing RFox things that we often duplicate a few TX status logic, there are duplicated useEffects managing the tx status changes event that could be abstracted into a single hook. This could lead to errors if the effect is wrongly implemented at one place. We are able to avoid the risks by implementing an abstraction.

We have to discuss the final implementation but I feel like we could implement a useTx hook that could also implement a few callbacks:

type UseTxStatusProps = {
  accountId: AccountId
  txId: string
  onTxStatusConfirmed?: () => Promise<void>
  onTxStatusPending?: () => Promise<void>
  onTxStatusFailed?: () => Promise<void>
  onTxStatusChanged?: (status: TxStatus) => Promise<void>
}

References and additional details

It create a lot of code duplicates :

(

web/src/pages/RFOX/components/ChangeAddress/ChangeAddressStatus.tsx

Lines 37 to 59 in 8c2d276

	const stakingAssetAccountAddress = useMemo(
	() => fromAccountId(confirmedQuote.stakingAssetAccountId).account,
	[confirmedQuote.stakingAssetAccountId],
	)
	const stakingAsset = useAppSelector(state =>
	selectAssetById(state, confirmedQuote.stakingAssetId),
	)
	const serializedTxIndex = useMemo(() => {
	return serializeTxIndex(confirmedQuote.stakingAssetAccountId, txId, stakingAssetAccountAddress)
	}, [confirmedQuote.stakingAssetAccountId, stakingAssetAccountAddress, txId])
	const txLink = useMemo(
	() => getTxLink({ txId, defaultExplorerBaseUrl: stakingAsset?.explorerTxLink ?? '' }),
	[stakingAsset?.explorerTxLink, txId],
	)
	const tx = useAppSelector(state => selectTxById(state, serializedTxIndex))
	useEffect(() => {
	if (tx?.status !== TxStatus.Confirmed) return
	handleTxConfirmed()
	}, [handleTxConfirmed, tx?.status])

)

Acceptance Criteria

• The useTxStatus abstraction has been implemented
• every useEffects running on TxStatus are replaced by the callbacks of this new abstraction
• every tx selection logic have been replaced by this new abstraction

Need By Date

No response

Screenshots/Mockups

No response

Estimated effort

No response

[NeOMakinG]

Here is the POC: #7043

[0xean]

To be addressed post rFOX launch

[0xean]

• where can we use this (outside of rfox also)
• regression testing