chore: show pending and bridge amount for STX in tx details

MetaMask · Nov 20, 2024 · 67de92a · 67de92a
1 parent 1fec9ee
commit 67de92a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/ui/helpers/utils/token-util.js b/ui/helpers/utils/token-util.js
@@ -217,7 +217,8 @@ export function getTokenFiatAmount(
   if (
     conversionRate <= 0 ||
     !contractExchangeRate ||
-    tokenAmount === undefined
+    tokenAmount === undefined ||
+    tokenAmount === false
   ) {
     return undefined;
   }

diff --git a/ui/pages/bridge/hooks/useHandleBridgeTx.ts b/ui/pages/bridge/hooks/useHandleBridgeTx.ts
@@ -33,10 +33,17 @@ export default function useHandleBridgeTx() {
           // estimatedBaseFee: decEstimatedBaseFee,
           // swapMetaData,
           type: TransactionType.bridge,
+
+          sourceTokenAmount: quoteResponse.quote.srcTokenAmount,
           sourceTokenSymbol: quoteResponse.quote.srcAsset.symbol,
+          sourceTokenDecimals: quoteResponse.quote.srcAsset.decimals,
+          sourceTokenAddress: quoteResponse.quote.srcAsset.address,
+
+          destinationTokenAmount: quoteResponse.quote.destTokenAmount,
           destinationTokenSymbol: quoteResponse.quote.destAsset.symbol,
           destinationTokenDecimals: quoteResponse.quote.destAsset.decimals,
           destinationTokenAddress: quoteResponse.quote.destAsset.address,
+
           approvalTxId,
           // this is the decimal (non atomic) amount (not USD value) of source token to swap
           swapTokenValue: sentAmountDec,

diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx
@@ -26,7 +26,10 @@ import UserPreferencedCurrencyDisplay from '../../../components/app/user-prefere
 import { EtherDenomination } from '../../../../shared/constants/common';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import CurrencyDisplay from '../../../components/ui/currency-display/currency-display.component';
-import { StatusTypes } from '../../../../shared/types/bridge-status';
+import {
+  BridgeHistoryItem,
+  StatusTypes,
+} from '../../../../shared/types/bridge-status';
 import {
   AlignItems,
   Display,
@@ -63,6 +66,51 @@ const getBlockExplorerUrl = (
   return `${rootUrl}/tx/${txHash}`;
 };
 
+const getBridgeHistoryItem = (
+  srcTxHashOrTxId: string | undefined,
+  bridgeHistory: Record<string, BridgeHistoryItem>,
+  srcChainTxMeta: TransactionMeta | undefined,
+) => {
+  if (!srcTxHashOrTxId) {
+    return undefined;
+  }
+
+  const historyItemFromUrlParamHash = bridgeHistory[srcTxHashOrTxId];
+  const historyItemFromTxMetaHash = srcChainTxMeta?.hash
+    ? bridgeHistory[srcChainTxMeta?.hash]
+    : undefined;
+
+  return historyItemFromUrlParamHash || historyItemFromTxMetaHash;
+};
+
+const getBridgeAmount = ({
+  bridgeHistoryItem,
+  srcChainTxMeta,
+}: {
+  bridgeHistoryItem?: BridgeHistoryItem;
+  srcChainTxMeta?: TransactionMeta;
+}) => {
+  if (bridgeHistoryItem) {
+    return `${calcTokenAmount(
+      bridgeHistoryItem.quote.srcTokenAmount,
+      bridgeHistoryItem.quote.srcAsset.decimals,
+    ).toFixed()} ${bridgeHistoryItem.quote.srcAsset.symbol}`;
+  }
+
+  if (
+    srcChainTxMeta &&
+    srcChainTxMeta.sourceTokenAmount &&
+    srcChainTxMeta.sourceTokenDecimals
+  ) {
+    return `${calcTokenAmount(
+      srcChainTxMeta.sourceTokenAmount,
+      srcChainTxMeta.sourceTokenDecimals,
+    ).toFixed()} ${srcChainTxMeta.sourceTokenSymbol}`;
+  }
+
+  return undefined;
+};
+
 const StatusToColorMap: Record<StatusTypes, TextColor> = {
   [StatusTypes.PENDING]: TextColor.warningDefault,
   [StatusTypes.COMPLETE]: TextColor.successDefault,
@@ -81,16 +129,19 @@ const CrossChainSwapTxDetails = () => {
     selectedAddressTxListSelector,
   ) as TransactionMeta[];
 
-  const bridgeHistoryItem = srcTxHashOrTxId
-    ? bridgeHistory[srcTxHashOrTxId]
-    : undefined;
   const networkConfigurationsByChainId = useSelector(
     getNetworkConfigurationsByChainId,
   );
 
   const srcChainTxMeta = selectedAddressTxList.find(
     (tx) => tx.hash === srcTxHashOrTxId || tx.id === srcTxHashOrTxId,
   );
+  // Even if user is still on /tx-details/txMetaId, we want to be able to show the bridge history item
+  const bridgeHistoryItem = getBridgeHistoryItem(
+    srcTxHashOrTxId,
+    bridgeHistory,
+    srcChainTxMeta,
+  );
 
   const { srcNetworkConfiguration, destNetworkConfiguration } =
     useBridgeChainInfo({
@@ -109,7 +160,9 @@ const CrossChainSwapTxDetails = () => {
     destTxHash,
   );
 
-  const status = bridgeHistoryItem?.status.status;
+  const status = bridgeHistoryItem
+    ? bridgeHistoryItem?.status.status
+    : StatusTypes.PENDING;
 
   const destChainIconUrl = destNetworkConfiguration
     ? CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
@@ -127,12 +180,7 @@ const CrossChainSwapTxDetails = () => {
       })
     : undefined;
 
-  const bridgeAmount = bridgeHistoryItem
-    ? `${calcTokenAmount(
-        bridgeHistoryItem.quote.srcTokenAmount,
-        bridgeHistoryItem.quote.srcAsset.decimals,
-      ).toFixed()} ${bridgeHistoryItem.quote.srcAsset.symbol}`
-    : undefined;
+  const bridgeAmount = getBridgeAmount({ bridgeHistoryItem, srcChainTxMeta });
 
   return (
     <div className="bridge">