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 ? (