From 13295ab54e0e768480ba1531cc9b0c2493d81e8d Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Tue, 7 Jan 2025 08:43:57 +1100 Subject: [PATCH 1/3] fix: make inner steps collapsable on trade complete --- .../components/TradeConfirm/ExpandableStepperSteps.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 && } From 5159b435d2d0152036bc7fd87909111953876bbf Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Tue, 7 Jan 2025 14:48:17 +1100 Subject: [PATCH 2/3] refactor: use "second hop" vernacular --- .../TradeConfirm/ExpandedStepperSteps.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx index bd48748f8c2..a6c6ea30eee 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx @@ -47,7 +47,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 @@ -59,7 +59,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( @@ -67,8 +67,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) @@ -92,8 +92,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() @@ -104,8 +104,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(() => { @@ -247,17 +247,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 ( @@ -274,10 +274,10 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP ) : ( <> - {lastHopAllowanceApproval.txHash && tradeQuoteLastHop && lastHopSellAccountId && ( + {lastHopAllowanceApproval.txHash && tradeQuoteSecondHop && lastHopSellAccountId && ( @@ -290,7 +290,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP lastHopAllowanceApproval.txHash, lastHopPermit2.isRequired, lastHopSellAccountId, - tradeQuoteLastHop, + tradeQuoteSecondHop, translate, ]) @@ -305,12 +305,12 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP )} - {tradeQuoteLastHop && lastHopSellAccountId && ( + {tradeQuoteSecondHop && lastHopSellAccountId && ( {lastHopSwap.sellTxHash && ( @@ -318,7 +318,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP {lastHopSwap.buyTxHash && lastHopSwap.buyTxHash !== lastHopSwap.sellTxHash && ( @@ -334,7 +334,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP lastHopSwap.sellTxHash, secondHopStreamingProgress, swapperName, - tradeQuoteLastHop, + tradeQuoteSecondHop, ]) const { tradeSteps, currentTradeStep } = useStepperSteps() From 18f2f75f1eaae6672bba6992f9b2c08cdfee61c9 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:47:22 +1100 Subject: [PATCH 3/3] chore: use receive address from quote --- .../TradeConfirmFooterContent/TradeConfirmSummary.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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