fix(ui-ux): display of transaction type for contract creation (#336)

* fix(ui-ux): display of transaction type for contract creation * fix(ui-ux): display of name and symbol * fix(ui-ux): display of name and symbol
BirthdayResearch · Sep 22, 2023 · 4fa5313 · 4fa5313
1 parent 37b2cfb
commit 4fa5313
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/api/LatestDataApi.ts b/src/api/LatestDataApi.ts
@@ -49,7 +49,6 @@ export default {
     const txnRows = Math.min(responseTxnData.length, MAX_ROW);
 
     return responseTxnData.slice(0, txnRows).map((data) => {
-      const toHash = data.to?.hash ?? BURN_ADDRESS_HASH;
       const isFromContract = data.from.is_contract;
       const isToContract = data.to?.is_contract ?? false;
       const tokenTransfers =
@@ -58,7 +57,6 @@ export default {
           : [];
 
       const transactionType = getTransactionType({
-        toHash,
         tokenTransfers,
         isFromContract,
         isToContract,

diff --git a/src/pages/tokens/_components/TokenRow.tsx b/src/pages/tokens/_components/TokenRow.tsx
@@ -3,6 +3,7 @@ import LinkText from "@components/commons/LinkText";
 import NumericFormat from "@components/commons/NumericFormat";
 import { RawTokenI } from "@api/types";
 import { formatUnits } from "viem";
+import { useMemo } from "react";
 
 const transformTokenData = (rawToken: RawTokenI) => ({
   address: rawToken.address,
@@ -160,15 +161,37 @@ function TokenName({
   name: string;
   symbol: string;
 }) {
+  const { displayedLabel, displayedSymbol } = useMemo(() => {
+    let label = "N/A";
+    let tokenSymbol: string | undefined = symbol;
+
+    if (name !== null) {
+      label = name;
+    } else if (name === null && symbol !== null) {
+      label = symbol;
+    }
+
+    if (name !== null && symbol !== null) {
+      tokenSymbol = symbol;
+    } else {
+      tokenSymbol = undefined;
+    }
+
+    return {
+      displayedLabel: label,
+      displayedSymbol: tokenSymbol,
+    };
+  }, [name, symbol]);
+
   return (
-    <div>
+    <div className="flex items-center">
       <LinkText
         href={`/token/${address}`}
         customStyle="font-semibold"
-        label={name ?? "N/A"}
+        label={displayedLabel}
       />
       <span className="text-sm text-white-700 ml-1">
-        {symbol ? `(${symbol})` : ""}
+        {displayedSymbol ? `(${displayedSymbol})` : ""}
       </span>
     </div>
   );

diff --git a/src/shared/transactionDataHelper.ts b/src/shared/transactionDataHelper.ts
@@ -38,7 +38,6 @@ export const transformTransactionData = (tx: RawTransactionI): TransactionI => {
   const tokenTransfers =
     tx.token_transfers?.length > 0 ? getTokenTransfers(tx.token_transfers) : [];
   const transactionType = getTransactionType({
-    toHash,
     tokenTransfers,
     isFromContract,
     isToContract,
@@ -135,14 +134,12 @@ export const getTransactionStatus = ({
   Equivalent logic of transaction_display_type from blockscout
 */
 export const getTransactionType = ({
-  toHash,
   tokenTransfers,
   isFromContract,
   isToContract,
   txTypes,
   createdContract,
 }: {
-  toHash: string | null;
   tokenTransfers: TxTokenTransferProps[];
   isFromContract: boolean;
   isToContract: boolean;
@@ -164,7 +161,7 @@ export const getTransactionType = ({
 
   if (involvesTokenTransfers) {
     transactionType = getTransactionTypeFromTokenTransfers(tokenTransfers);
-  } else if (toHash === BURN_ADDRESS_HASH) {
+  } else if (createdContract?.hash !== undefined) {
     transactionType = TransactionType.ContractCreation;
   } else if (involvesContract) {
     transactionType = TransactionType.ContractCall;