chore: new swapper tweaks (#8489)

shapeshift · Jan 7, 2025 · f380ad1 · f380ad1
1 parent 37c764e
commit f380ad1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git 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}
       />
-      <Collapse in={props.isExpanded ?? isExpanded} style={collapseStyle}>
+      <Collapse in={isExpanded} style={collapseStyle}>
         <Box py={4} pl={0}>
           {activeTradeQuote && <ExpandedStepperSteps activeTradeQuote={activeTradeQuote} />}
         </Box>

diff --git 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,16 +60,16 @@ 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(
     () => tradeQuoteFirstHop?.buyAsset.chainId !== tradeQuoteFirstHop?.sellAsset.chainId,
     [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 (
       <Flex alignItems='center' justifyContent='space-between' flex={1}>
         <Text translation='trade.resetTitle' />
-        {lastHopAllowanceReset.txHash && tradeQuoteLastHop && lastHopSellAccountId && (
+        {lastHopAllowanceReset.txHash && tradeQuoteSecondHop && lastHopSellAccountId && (
           <TxLabel
             txHash={lastHopAllowanceReset.txHash}
-            explorerBaseUrl={tradeQuoteLastHop.sellAsset.explorerTxLink}
+            explorerBaseUrl={tradeQuoteSecondHop.sellAsset.explorerTxLink}
             accountId={lastHopSellAccountId}
             swapperName={undefined} // no swapper base URL here, this is an allowance Tx
           />
         )}
       </Flex>
     )
-  }, [lastHopAllowanceReset.txHash, lastHopSellAccountId, tradeQuoteLastHop])
+  }, [lastHopAllowanceReset.txHash, lastHopSellAccountId, tradeQuoteSecondHop])
 
   const lastHopAllowanceApprovalTitle = useMemo(() => {
     return (
@@ -299,10 +299,10 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
         ) : (
           <>
             <Text translation='trade.approvalTitle' />
-            {lastHopAllowanceApproval.txHash && tradeQuoteLastHop && lastHopSellAccountId && (
+            {lastHopAllowanceApproval.txHash && tradeQuoteSecondHop && lastHopSellAccountId && (
               <TxLabel
                 txHash={lastHopAllowanceApproval.txHash}
-                explorerBaseUrl={tradeQuoteLastHop.sellAsset.explorerTxLink}
+                explorerBaseUrl={tradeQuoteSecondHop.sellAsset.explorerTxLink}
                 accountId={lastHopSellAccountId}
                 swapperName={undefined} // no swapper base URL here, this is an allowance Tx
               />
@@ -315,7 +315,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
     lastHopAllowanceApproval.txHash,
     lastHopPermit2.isRequired,
     lastHopSellAccountId,
-    tradeQuoteLastHop,
+    tradeQuoteSecondHop,
     translate,
   ])
 
@@ -330,20 +330,20 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
             </Tag>
           )}
         </HStack>
-        {tradeQuoteLastHop && lastHopSellAccountId && (
+        {tradeQuoteSecondHop && lastHopSellAccountId && (
           <VStack>
             {lastHopSwap.sellTxHash && (
               <TxLabel
                 txHash={lastHopSwap.sellTxHash}
-                explorerBaseUrl={tradeQuoteLastHop.sellAsset.explorerTxLink}
+                explorerBaseUrl={tradeQuoteSecondHop.sellAsset.explorerTxLink}
                 accountId={lastHopSellAccountId}
                 swapperName={swapperName}
               />
             )}
             {lastHopSwap.buyTxHash && lastHopSwap.buyTxHash !== lastHopSwap.sellTxHash && (
               <TxLabel
                 txHash={lastHopSwap.buyTxHash}
-                explorerBaseUrl={tradeQuoteLastHop.buyAsset.explorerTxLink}
+                explorerBaseUrl={tradeQuoteSecondHop.buyAsset.explorerTxLink}
                 accountId={lastHopSellAccountId}
                 swapperName={swapperName}
               />
@@ -359,7 +359,7 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
     lastHopSwap.sellTxHash,
     secondHopStreamingProgress,
     swapperName,
-    tradeQuoteLastHop,
+    tradeQuoteSecondHop,
   ])
 
   const { tradeSteps, currentTradeStep } = useStepperSteps()

diff --git a/...s/MultiHopTrade/components/TradeConfirm/TradeConfirmFooterContent/TradeConfirmSummary.tsx b/...s/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 <Text color='text.subtle' translation={'trade.tooltip.protocolFee'} />
@@ -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