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}
-
-
-
- >
+
)
}