diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx index f8a3852ca92..163072e2e57 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx @@ -24,8 +24,10 @@ type ExpandableStepperStepsProps = { isExpanded?: boolean } -export const ExpandableStepperSteps = (props: ExpandableStepperStepsProps) => { - const [isExpanded, setIsExpanded] = useState(false) +export const ExpandableStepperSteps = ({ + isExpanded: initialIsExpanded = false, +}: ExpandableStepperStepsProps) => { + const [isExpanded, setIsExpanded] = useState(initialIsExpanded) const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState) const summaryStepProps = useMemo( () => ({ @@ -104,7 +106,7 @@ export const ExpandableStepperSteps = (props: ExpandableStepperStepsProps) => { stepProps={summaryStepProps} useSpacer={false} /> - + {activeTradeQuote && } diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx index 469a29a5e30..9b49edaaeca 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx @@ -48,7 +48,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId) const lastHopSellAccountId = useAppSelector(selectSecondHopSellAccountId) const tradeQuoteFirstHop = activeTradeQuote.steps[0] - const tradeQuoteLastHop = activeTradeQuote.steps[1] + const tradeQuoteSecondHop = activeTradeQuote.steps[1] const activeTradeId = activeTradeQuote.id const swapperName = tradeQuoteFirstHop?.source @@ -60,7 +60,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP hopIndex: 1, // If we don't have a second hop this hook will return undefined anyway. Satisfy the rules of hooks with tradeQuoteFirstHop, which // will always be defined. - tradeQuoteStep: tradeQuoteLastHop ?? tradeQuoteFirstHop, + tradeQuoteStep: tradeQuoteSecondHop ?? tradeQuoteFirstHop, }) const isFirstHopBridge = useMemo( @@ -68,8 +68,8 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP [tradeQuoteFirstHop?.buyAsset.chainId, tradeQuoteFirstHop?.sellAsset.chainId], ) const isLastHopBridge = useMemo( - () => tradeQuoteLastHop?.buyAsset.chainId !== tradeQuoteLastHop?.sellAsset.chainId, - [tradeQuoteLastHop?.buyAsset.chainId, tradeQuoteLastHop?.sellAsset.chainId], + () => tradeQuoteSecondHop?.buyAsset.chainId !== tradeQuoteSecondHop?.sellAsset.chainId, + [tradeQuoteSecondHop?.buyAsset.chainId, tradeQuoteSecondHop?.sellAsset.chainId], ) const chainAdapterManager = getChainAdapterManager() const activeQuoteErrors = useAppSelector(selectActiveQuoteErrors) @@ -93,8 +93,8 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP translate, ]) const lastHopActionTitleText = useMemo(() => { - const sellAssetChainId = tradeQuoteLastHop?.sellAsset.chainId - const buyAssetChainId = tradeQuoteLastHop?.buyAsset.chainId + const sellAssetChainId = tradeQuoteSecondHop?.sellAsset.chainId + const buyAssetChainId = tradeQuoteSecondHop?.buyAsset.chainId if (!sellAssetChainId || !buyAssetChainId) return undefined const sellChainName = chainAdapterManager.get(sellAssetChainId)?.getDisplayName() const buyChainName = chainAdapterManager.get(buyAssetChainId)?.getDisplayName() @@ -105,8 +105,8 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP chainAdapterManager, isLastHopBridge, swapperName, - tradeQuoteLastHop?.buyAsset.chainId, - tradeQuoteLastHop?.sellAsset.chainId, + tradeQuoteSecondHop?.buyAsset.chainId, + tradeQuoteSecondHop?.sellAsset.chainId, translate, ]) const firstHopExecutionMetadataFilter = useMemo(() => { @@ -272,17 +272,17 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP return ( - {lastHopAllowanceReset.txHash && tradeQuoteLastHop && lastHopSellAccountId && ( + {lastHopAllowanceReset.txHash && tradeQuoteSecondHop && lastHopSellAccountId && ( )} ) - }, [lastHopAllowanceReset.txHash, lastHopSellAccountId, tradeQuoteLastHop]) + }, [lastHopAllowanceReset.txHash, lastHopSellAccountId, tradeQuoteSecondHop]) const lastHopAllowanceApprovalTitle = useMemo(() => { return ( @@ -299,10 +299,10 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP ) : ( <> - {lastHopAllowanceApproval.txHash && tradeQuoteLastHop && lastHopSellAccountId && ( + {lastHopAllowanceApproval.txHash && tradeQuoteSecondHop && lastHopSellAccountId && ( @@ -315,7 +315,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP lastHopAllowanceApproval.txHash, lastHopPermit2.isRequired, lastHopSellAccountId, - tradeQuoteLastHop, + tradeQuoteSecondHop, translate, ]) @@ -330,12 +330,12 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP )} - {tradeQuoteLastHop && lastHopSellAccountId && ( + {tradeQuoteSecondHop && lastHopSellAccountId && ( {lastHopSwap.sellTxHash && ( @@ -343,7 +343,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP {lastHopSwap.buyTxHash && lastHopSwap.buyTxHash !== lastHopSwap.sellTxHash && ( @@ -359,7 +359,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP lastHopSwap.sellTxHash, secondHopStreamingProgress, swapperName, - tradeQuoteLastHop, + tradeQuoteSecondHop, ]) const { tradeSteps, currentTradeStep } = useStepperSteps() diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooterContent/TradeConfirmSummary.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooterContent/TradeConfirmSummary.tsx index 45b2c7d60ba..f8810218466 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooterContent/TradeConfirmSummary.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooterContent/TradeConfirmSummary.tsx @@ -53,7 +53,6 @@ import { useIsApprovalInitiallyNeeded } from '../../MultiHopTradeConfirm/hooks/u import { PriceImpact } from '../../PriceImpact' import { MaxSlippage } from '../../TradeInput/components/MaxSlippage' import { SwapperIcon } from '../../TradeInput/components/SwapperIcon/SwapperIcon' -import { useTradeReceiveAddress } from '../../TradeInput/hooks/useTradeReceiveAddress' const ProtocolFeeToolTip = () => { return @@ -117,10 +116,9 @@ export const TradeConfirmSummary = () => { const { priceImpactPercentage } = usePriceImpact(activeQuote) const { isLoading } = useIsApprovalInitiallyNeeded() const greenColor = useColorModeValue('green.600', 'green.200') - const { manualReceiveAddress, walletReceiveAddress } = useTradeReceiveAddress() const [showFeeModal, setShowFeeModal] = useState(false) const thorVotingPower = useAppSelector(selectThorVotingPower) - const receiveAddress = manualReceiveAddress ?? walletReceiveAddress + const receiveAddress = activeQuote?.receiveAddress const swapSource = tradeQuoteFirstHop?.source const rate = tradeQuoteFirstHop?.rate const sellAssetSymbol = sellAsset.symbol