fix: fix payment released asset symbol, refactor

Author: kemuru

web/src/components/TransactionCard/index.tsx

@@ -72,6 +72,7 @@ const TransactionCard: React.FC<ITransactionCard> = ({
   const nativeTokenSymbol = useNativeTokenSymbol();
   const { tokenMetadata } = useTokenMetadata(token);
   const erc20TokenSymbol = tokenMetadata?.symbol;
+  const assetSymbol = token ? erc20TokenSymbol : nativeTokenSymbol;
   const title = transactionInfo?.title;
   const navigateAndScrollTop = useNavigateAndScrollTop();
 
@@ -86,11 +87,11 @@ const TransactionCard: React.FC<ITransactionCard> = ({
             {!isUndefined(title) ? <StyledTitle>{title}</StyledTitle> : <StyledSkeleton />}
             <TransactionInfo
               amount={formatEther(amount)}
-              assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol}
               buyerAddress={buyer}
               sellerAddress={seller}
               deadlineDate={new Date(deadline * 1000).toLocaleString()}
               isPreview={false}
+              {...{ assetSymbol }}
             />
           </CardContainer>
         </StyledCard>
@@ -107,11 +108,11 @@ const TransactionCard: React.FC<ITransactionCard> = ({
             )}
             <TransactionInfo
               amount={formatEther(amount)}
-              assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol}
               buyerAddress={buyer}
               sellerAddress={seller}
               deadlineDate={new Date(deadline * 1000).toLocaleString()}
               isPreview={false}
+              {...{ assetSymbol }}
             />
           </ListContainer>
         </StyledListItem>

web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import { formatEther } from "viem";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
-import { useNativeTokenSymbol } from "hooks/useNativeTokenSymbol";
 
 const StyledHeader = styled.h1`
   margin: 0;
@@ -11,12 +10,11 @@ const StyledHeader = styled.h1`
 `;
 
 const Header: React.FC = () => {
-  const { amount, token } = useTransactionDetailsContext();
-  const nativeTokenSymbol = useNativeTokenSymbol();
+  const { amount, assetSymbol } = useTransactionDetailsContext();
 
   return (
     <StyledHeader>
-      Full payment released: {formatEther(amount)} {!token ? nativeTokenSymbol : token}
+      Full payment released: {formatEther(amount)} {assetSymbol}
     </StyledHeader>
   );
 };

web/src/pages/MyTransactions/TransactionDetails/index.tsx

@@ -54,12 +54,13 @@ const TransactionDetails: React.FC = () => {
   } = useTransactionDetailsContext();
 
   const transactionInfo = useFetchIpfsJson(transactionUri);
+  const assetSymbol = token ? erc20TokenSymbol : nativeTokenSymbol;
 
   useEffect(() => {
     if (transactionDetails?.escrow) {
       const detailsWithSymbol = {
         ...transactionDetails.escrow,
-        erc20TokenSymbol: token ? erc20TokenSymbol : nativeTokenSymbol,
+        assetSymbol,
       };
       setTransactionDetails(detailsWithSymbol);
     }
@@ -80,7 +81,6 @@ const TransactionDetails: React.FC = () => {
           transactionCreationTimestamp={timestamp}
           sendingQuantity={!isUndefined(amount) ? formatEther(amount) : ""}
           deadline={deadline * 1000}
-          assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol}
           overrideIsList={false}
           amount={!isUndefined(amount) ? formatEther(amount) : ""}
           isPreview={false}
@@ -95,6 +95,7 @@ const TransactionDetails: React.FC = () => {
             disputeRequest,
             resolvedEvents,
             arbitrationCost,
+            assetSymbol,
           }}
         />
         {status === "NoDispute" && payments?.length === 0 ? <WasItFulfilled /> : null}