diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx
index 17b08dd0659..f50744a2b55 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx
@@ -133,7 +133,6 @@ export const StepperStep = ({
{button}
- {/* {!isLastStep && } */}
)
}
diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
index 624a48824b4..c724cca2d8f 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
@@ -8,14 +8,16 @@ import {
StepStatus,
Tag,
Tooltip,
+ usePrevious,
VStack,
} from '@chakra-ui/react'
import type { TradeQuote, TradeRate } from '@shapeshiftoss/swapper'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
import { FaInfoCircle } from 'react-icons/fa'
import { useTranslate } from 'react-polyglot'
import { RawText, Text } from 'components/Text'
import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
+import { useModal } from 'hooks/useModal/useModal'
import {
selectFirstHopSellAccountId,
selectSecondHopSellAccountId,
@@ -44,6 +46,7 @@ type ExpandedStepperStepsProps = {
export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsProps) => {
const translate = useTranslate()
+ const rateChanged = useModal('rateChanged')
// this is the account we're selling from - assume this is the AccountId of the approval Tx
const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId)
const lastHopSellAccountId = useAppSelector(selectSecondHopSellAccountId)
@@ -248,6 +251,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
)}
{firstHopSwap.buyTxHash && firstHopSwap.buyTxHash !== firstHopSwap.sellTxHash && (
tradeQuoteFirstHop.buyAmountAfterFeesCryptoBaseUnit,
+ [tradeQuoteFirstHop.buyAmountAfterFeesCryptoBaseUnit],
+ )
+ const prevFirstHopAmountCryptoBaseUnit = usePrevious(firstHopAmountCryptoBaseUnit)
+
+ useEffect(() => {
+ if (currentTradeStep !== StepperStep.FirstHopSwap) return
+
+ if (
+ !(
+ firstHopAmountCryptoBaseUnit &&
+ prevFirstHopAmountCryptoBaseUnit &&
+ firstHopAmountCryptoBaseUnit !== '0' &&
+ prevFirstHopAmountCryptoBaseUnit !== '0'
+ )
+ )
+ return
+ if (firstHopAmountCryptoBaseUnit === prevFirstHopAmountCryptoBaseUnit) return
+
+ rateChanged.open({ prevAmountCryptoBaseUnit: prevFirstHopAmountCryptoBaseUnit })
+ }, [
+ currentTradeStep,
+ firstHopAmountCryptoBaseUnit,
+ prevFirstHopAmountCryptoBaseUnit,
+ rateChanged,
+ ])
+
const isError = activeQuoteError || transactionExecutionStateError
return (
diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TxLabel.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TxLabel.tsx
index d8202fab49f..1a94dff907c 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/TxLabel.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/TxLabel.tsx
@@ -10,11 +10,13 @@ export const TxLabel = ({
explorerBaseUrl,
accountId,
swapperName,
+ isBuyTxHash,
}: {
txHash: string
explorerBaseUrl: string
accountId: AccountId
swapperName: SwapSource | undefined
+ isBuyTxHash?: boolean
}) => {
const { data: maybeSafeTx } = useSafeTxQuery({
maybeSafeTxHash: txHash,
@@ -24,9 +26,9 @@ export const TxLabel = ({
const txLink = getTxLink({
defaultExplorerBaseUrl: explorerBaseUrl,
maybeSafeTx,
- tradeId: txHash,
accountId,
name: swapperName,
+ ...(isBuyTxHash ? { txId: txHash } : { tradeId: txHash }),
})
return txLink ? (