diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx index 60ffff33d18..ad9d63b7ccf 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx @@ -1,33 +1,59 @@ import { Link } from '@chakra-ui/react' import type { TradeQuoteStep } from '@shapeshiftoss/swapper' +import { useMemo } from 'react' import { useTranslate } from 'react-polyglot' import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis' import { Text } from 'components/Text' +import { useSafeTxQuery } from 'hooks/queries/useSafeTx' +import { getTxLink } from 'lib/getTxLink' +import { selectFirstHopSellAccountId } from 'state/slices/selectors' +import { useAppSelector } from 'state/store' -type SharedCompletedApprovalDescriptionProps = { - tradeQuoteStep: TradeQuoteStep +type ErrorMsgProps = { isError: boolean - txHash: string errorTranslation: string } +const ErrorMsg = ({ isError, errorTranslation }: ErrorMsgProps) => { + return isError ? ( + + ) : null +} + +type SharedCompletedApprovalDescriptionProps = { + tradeQuoteStep: TradeQuoteStep + txHash: string +} & ErrorMsgProps + export const SharedCompletedApprovalDescription = ({ tradeQuoteStep, isError, txHash, errorTranslation, }: SharedCompletedApprovalDescriptionProps) => { - const errorMsg = isError ? ( - - ) : null + // this is the account we're selling from - assume this is the AccountId of the approval Tx + const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId) + const { data: maybeSafeTx } = useSafeTxQuery({ + maybeSafeTxHash: txHash, + accountId: firstHopSellAccountId, + }) - const href = `${tradeQuoteStep.sellAsset.explorerTxLink}${txHash}` + const txLink = useMemo( + () => + getTxLink({ + defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink, + maybeSafeTx, + tradeId: txHash ?? '', + accountId: firstHopSellAccountId, + }), + [firstHopSellAccountId, maybeSafeTx, tradeQuoteStep.sellAsset.explorerTxLink, txHash], + ) return ( <> - {errorMsg} - - + + + ) @@ -35,15 +61,13 @@ export const SharedCompletedApprovalDescription = ({ type SharedApprovalDescriptionProps = { tradeQuoteStep: TradeQuoteStep - isError: boolean txHash: string | undefined approvalNetworkFeeCryptoFormatted: string | undefined - errorTranslation: string gasFeeLoadingTranslation: string gasFeeTranslation: string isAwaitingReset?: boolean isLoadingNetworkFee?: boolean -} +} & ErrorMsgProps export const SharedApprovalDescription = ({ tradeQuoteStep, @@ -56,14 +80,11 @@ export const SharedApprovalDescription = ({ isLoadingNetworkFee = false, }: SharedApprovalDescriptionProps) => { const translate = useTranslate() - const errorMsg = isError ? ( - - ) : null if (!txHash) { return ( <> - {errorMsg} + {isLoadingNetworkFee ? translate(gasFeeLoadingTranslation) : translate(gasFeeTranslation, { @@ -73,14 +94,12 @@ export const SharedApprovalDescription = ({ ) } - const href = `${tradeQuoteStep.sellAsset.explorerTxLink}${txHash}` - return ( - <> - {errorMsg} - - - - + ) }