fix: render txids for multi-hop steps

shapeshift · Nov 22, 2023 · 87d5037 · 87d5037
1 parent 1225e8c
commit 87d5037
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx
@@ -6,9 +6,10 @@ import { FaInfoCircle, FaThumbsUp } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis'
 import { Row } from 'components/Row/Row'
-import { RawText, Text } from 'components/Text'
+import { Text } from 'components/Text'
 import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
 import { useToggle } from 'hooks/useToggle/useToggle'
+import { getTxLink } from 'lib/getTxLink'
 import { fromBaseUnit } from 'lib/math'
 import type { TradeQuoteStep } from 'lib/swapper/types'
 import { selectFeeAssetById } from 'state/slices/selectors'
@@ -93,22 +94,38 @@ export const ApprovalStep = ({
 
   const translate = useTranslate()
 
-  const txLink = useMemo(() => {
+  const description = useMemo(() => {
+    if (!txHash) {
+      return translate('trade.approvalGasFee', { fee: approvalNetworkFeeCryptoFormatted })
+    }
+
+    const href = getTxLink({
+      name: tradeQuoteStep.source,
+      defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink,
+      tradeId: txHash,
+    })
+
     return (
-      <Link isExternal href='#' color='text.link'>
-        <MiddleEllipsis value={txHash ?? ''} />
+      <Link isExternal href={href} color='text.link'>
+        <MiddleEllipsis value={txHash} />
       </Link>
     )
-  }, [txHash])
+  }, [
+    approvalNetworkFeeCryptoFormatted,
+    tradeQuoteStep.sellAsset.explorerTxLink,
+    tradeQuoteStep.source,
+    translate,
+    txHash,
+  ])
 
   const leftIcon = useMemo(() => <CheckCircleIcon />, [])
 
   const content = useMemo(
-    () => (
-      <Card p='2' width='full'>
-        {txHash ? (
-          <RawText>TX: {txHash}</RawText>
-        ) : (
+    () =>
+      txHash ? (
+        <></>
+      ) : (
+        <Card p='2' width='full'>
           <VStack width='full'>
             <Row px={2}>
               <Row.Label display='flex' alignItems='center'>
@@ -149,9 +166,8 @@ export const ApprovalStep = ({
               {translate('common.approve')}
             </Button>
           </VStack>
-        )}
-      </Card>
-    ),
+        </Card>
+      ),
     [
       handleSignAllowanceApproval,
       hopExecutionState,
@@ -166,11 +182,7 @@ export const ApprovalStep = ({
   return (
     <StepperStep
       title='Token allowance approval'
-      description={
-        txHash
-          ? txLink
-          : translate('trade.approvalGasFee', { fee: approvalNetworkFeeCryptoFormatted })
-      }
+      description={description}
       stepIndicator={stepIndicator}
       content={content}
       isActive={isActive}

diff --git a/...omponents/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx b/...omponents/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx
@@ -4,6 +4,7 @@ import type { KnownChainIds } from '@shapeshiftoss/types'
 import { TxStatus } from '@shapeshiftoss/unchained-client'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
+import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis'
 import { RawText } from 'components/Text'
 import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
 import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
@@ -69,7 +70,7 @@ export const HopTransactionStep = ({
       return {
         txLink: getTxLink({
           name: tradeQuoteStep.source,
-          defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink ?? '',
+          defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink,
           tradeId: buyTxHash,
         }),
         txHash: buyTxHash,
@@ -78,10 +79,10 @@ export const HopTransactionStep = ({
       return {
         txLink: getTxLink({
           name: tradeQuoteStep.source,
-          defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink ?? '',
+          defaultExplorerBaseUrl: tradeQuoteStep.sellAsset.explorerTxLink,
           tradeId: sellTxHash,
         }),
-        txHash: buyTxHash,
+        txHash: sellTxHash,
       }
 
     return {}
@@ -152,16 +153,10 @@ export const HopTransactionStep = ({
         <RawText>
           {`${sellAmountCryptoFormatted}.${sellChainSymbol} -> ${buyAmountCryptoFormatted}.${buyChainSymbol}`}
         </RawText>
-        {txHash !== undefined && <RawText>TX: {txHash}</RawText>}
         {txLink && (
-          <Card width='full'>
-            <CardBody display='flex' gap={4} justifyContent='space-between' px={4} py={2}>
-              <RawText color='text.subtle'>TX ID</RawText>
-              <Link isExternal color='blue.500' href={txLink}>
-                {txHash}
-              </Link>
-            </CardBody>
-          </Card>
+          <Link isExternal color='text.link' href={txLink}>
+            <MiddleEllipsis value={txHash} />
+          </Link>
         )}
       </VStack>
     )