From 05a347a01dbbe8025261c2c47c51f24e79550041 Mon Sep 17 00:00:00 2001
From: Greg Nazario <greg@gnazar.io>
Date: Tue, 19 Nov 2024 14:22:44 -0500
Subject: [PATCH] [txn] Remove transaction actions in favor of actions section

---
 .../Tabs/Components/TransactionActions.tsx    |  69 -----
 .../Tabs/UserTransactionOverviewTab.tsx       | 269 ++++++++++++++----
 2 files changed, 214 insertions(+), 124 deletions(-)
 delete mode 100644 src/pages/Transaction/Tabs/Components/TransactionActions.tsx

diff --git a/src/pages/Transaction/Tabs/Components/TransactionActions.tsx b/src/pages/Transaction/Tabs/Components/TransactionActions.tsx
deleted file mode 100644
index 88ef6633..00000000
--- a/src/pages/Transaction/Tabs/Components/TransactionActions.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {Types} from "aptos";
-import ContentBox from "../../../../components/IndividualPageContent/ContentBox";
-import ContentRow from "../../../../components/IndividualPageContent/ContentRow";
-import {truncateAddress} from "../../../utils";
-import {Link} from "../../../../routing";
-import {standardizeAddress} from "../../../../utils";
-
-const AddressLink: React.FC<{
-  address: string;
-  type: "account" | "object" | "token";
-}> = ({address, type}) => (
-  <Link to={`/${type}/${standardizeAddress(address)}`}>
-    {truncateAddress(address)}
-  </Link>
-);
-
-const mapEventToTransactionAction = (event: Types.Event) => {
-  if (
-    event.type === "0x4::collection::MintEvent" ||
-    event.type === "0x4::collection::Mint"
-  ) {
-    const {token} = event.data;
-    return (
-      <li>
-        Mint Token <AddressLink address={token} type="token" />
-      </li>
-    );
-  } else if (
-    event.type === "0x4::collection::BurnEvent" ||
-    event.type === "0x4::collection::Burn"
-  ) {
-    const {token} = event.data;
-    return (
-      <li>
-        Burn Token <AddressLink address={token} type="token" />
-      </li>
-    );
-  } else if (event.type === "0x1::object::TransferEvent") {
-    const {from, object, to} = event.data;
-    return (
-      <li>
-        Transfer Object <AddressLink address={object} type="object" /> from{" "}
-        <AddressLink address={from} type="account" /> to{" "}
-        <AddressLink address={to} type="account" />
-      </li>
-    );
-  }
-  return null;
-};
-
-export const TransactionActions: React.FC<{transaction: Types.Transaction}> = ({
-  transaction,
-}) => {
-  const events: Types.Event[] =
-    "events" in transaction ? transaction.events : [];
-  const listItems = events
-    .map((event) => mapEventToTransactionAction(event))
-    .filter((li) => li !== null);
-
-  if (listItems.length === 0) {
-    return null;
-  }
-
-  return (
-    <ContentBox>
-      <ContentRow title="Transaction Actions" value={<ol>{listItems}</ol>} />
-    </ContentBox>
-  );
-};
diff --git a/src/pages/Transaction/Tabs/UserTransactionOverviewTab.tsx b/src/pages/Transaction/Tabs/UserTransactionOverviewTab.tsx
index 070ca56b..8180fe70 100644
--- a/src/pages/Transaction/Tabs/UserTransactionOverviewTab.tsx
+++ b/src/pages/Transaction/Tabs/UserTransactionOverviewTab.tsx
@@ -15,10 +15,12 @@ import TransactionFunction from "./Components/TransactionFunction";
 import TransactionBlockRow from "./Components/TransactionBlockRow";
 import JsonViewCard from "../../../components/IndividualPageContent/JsonViewCard";
 import {parseExpirationTimestamp} from "../../utils";
-import {TransactionActions} from "./Components/TransactionActions";
 import {grey} from "../../../themes/colors/aptosColorPalette";
 import {LearnMoreTooltip} from "../../../components/IndividualPageContent/LearnMoreTooltip";
-import {useGetCoinList} from "../../../api/hooks/useGetCoinList";
+import {
+  CoinDescription,
+  useGetCoinList,
+} from "../../../api/hooks/useGetCoinList";
 import {findCoinData} from "./BalanceChangeTab";
 
 function UserTransferOrInteractionRows({
@@ -89,6 +91,8 @@ function TransactionAmountRow({transaction}: {transaction: Types.Transaction}) {
   );
 }
 
+type EventAction = Swap | TokenMint | TokenBurn | ObjectTransfer;
+
 type Swap = {
   actionType: "swap";
   dex: string;
@@ -98,6 +102,25 @@ type Swap = {
   assetOut: string;
 };
 
+type TokenMint = {
+  actionType: "token mint";
+  collection_address: string;
+  token_address: string;
+};
+type TokenBurn = {
+  actionType: "token burn";
+  previous_owner: string;
+  collection_address: string;
+  token_address: string;
+};
+
+type ObjectTransfer = {
+  actionType: "object transfer";
+  address: string;
+  from: string;
+  to: string;
+};
+
 function TransactionActionsRow({
   transaction,
 }: {
@@ -112,56 +135,18 @@ function TransactionActionsRow({
   return (
     <ContentRow
       title="Actions:"
-      value={actions.map(
-        (action, i) =>
-          action.actionType === "swap" &&
-          (() => {
-            const assetInCoin = findCoinData(
-              coinData?.data ?? [],
-              action.assetIn,
-            );
-            const assetOutCoin = findCoinData(
-              coinData?.data ?? [],
-              action.assetOut,
-            );
-
-            return (
-              <Box
-                key={`action-${i}`}
-                sx={{
-                  marginBottom: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1,
-                }}
-              >
-                🔄 Swapped{" "}
-                {action.amountIn / Math.pow(10, assetInCoin?.decimals ?? 0)}
-                <HashButton
-                  hash={action.assetIn}
-                  type={
-                    action.assetIn.includes("::")
-                      ? HashType.COIN
-                      : HashType.FUNGIBLE_ASSET
-                  }
-                  img={assetInCoin?.logoUrl}
-                />
-                for{" "}
-                {action.amountOut / Math.pow(10, assetOutCoin?.decimals ?? 0)}
-                <HashButton
-                  hash={action.assetOut}
-                  type={
-                    action.assetOut.includes("::")
-                      ? HashType.COIN
-                      : HashType.FUNGIBLE_ASSET
-                  }
-                  img={assetOutCoin?.logoUrl}
-                />
-                on {action.dex}
-              </Box>
-            );
-          })(),
-      )}
+      value={actions.map((action, i) => {
+        switch (action.actionType) {
+          case "swap":
+            return swapAction(coinData, action, i);
+          case "token mint":
+            return nftMintAction(action, i);
+          case "token burn":
+            return nftBurnAction(action, i);
+          case "object transfer":
+            return objectTransferAction(action, i);
+        }
+      })}
       tooltip={
         <LearnMoreTooltip text="Community-curated interpretations of the transaction." />
       }
@@ -357,15 +342,20 @@ export default function UserTransactionOverviewTab({
           tooltip={getLearnMoreTooltip("accumulator_root_hash")}
         />
       </ContentBox>
-      <TransactionActions transaction={transaction} />
     </Box>
   );
 }
 
 // we define parse<...>Event(event: Types.Event) -> string | undefined
 // and getEventAction will simply go over the list of parse functions and return the first non-undefined result
-function getEventAction(event: Types.Event): Swap | undefined {
-  const parsers = [parseThalaSwapV1Event, parseThalaSwapV2Event];
+function getEventAction(event: Types.Event): EventAction | undefined {
+  const parsers = [
+    parseTokenMintEvent,
+    parseTokenBurnEvent,
+    parseObjectTransferEvent,
+    parseThalaSwapV1Event,
+    parseThalaSwapV2Event,
+  ];
 
   for (const parse of parsers) {
     const result = parse(event);
@@ -377,6 +367,175 @@ function getEventAction(event: Types.Event): Swap | undefined {
   return undefined;
 }
 
+const swapAction = (
+  coinData: {data: CoinDescription[]} | undefined,
+  action: Swap,
+  i: number,
+) => {
+  const assetInCoin = findCoinData(coinData?.data ?? [], action.assetIn);
+  const assetOutCoin = findCoinData(coinData?.data ?? [], action.assetOut);
+
+  return (
+    <Box
+      key={`action-${i}`}
+      sx={{
+        marginBottom: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      {"🔄 Swapped "}
+      {action.amountIn / Math.pow(10, assetInCoin?.decimals ?? 0)}
+      <HashButton
+        hash={action.assetIn}
+        type={
+          action.assetIn.includes("::")
+            ? HashType.COIN
+            : HashType.FUNGIBLE_ASSET
+        }
+        img={assetInCoin?.logoUrl}
+      />
+      for {action.amountOut / Math.pow(10, assetOutCoin?.decimals ?? 0)}
+      <HashButton
+        hash={action.assetOut}
+        type={
+          action.assetOut.includes("::")
+            ? HashType.COIN
+            : HashType.FUNGIBLE_ASSET
+        }
+        img={assetOutCoin?.logoUrl}
+      />
+      on {action.dex}
+    </Box>
+  );
+};
+
+const nftMintAction = (action: TokenMint, i: number) => {
+  return (
+    <Box
+      key={`action-${i}`}
+      sx={{
+        marginBottom: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      {"🏗️ Minted "}
+      {<HashButton hash={action.token_address} type={HashType.OBJECT} />}
+      {" in collection "}
+      {<HashButton hash={action.collection_address} type={HashType.OBJECT} />}
+    </Box>
+  );
+};
+
+const nftBurnAction = (action: TokenBurn, i: number) => {
+  return (
+    <Box
+      key={`action-${i}`}
+      sx={{
+        marginBottom: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      {"🔥️ Burned "}
+      {<HashButton hash={action.token_address} type={HashType.OBJECT} />}
+      {" in collection "}
+      {<HashButton hash={action.collection_address} type={HashType.OBJECT} />}
+      {" from "}
+      {<HashButton hash={action.previous_owner} type={HashType.ACCOUNT} />}
+    </Box>
+  );
+};
+
+const objectTransferAction = (action: ObjectTransfer, i: number) => {
+  return (
+    <Box
+      key={`action-${i}`}
+      sx={{
+        marginBottom: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      {"⏩ Transferred "}
+      {<HashButton hash={action.address} type={HashType.OBJECT} />} {" from "}
+      {<HashButton hash={action.from} type={HashType.ACCOUNT} />} {" to "}
+      {<HashButton hash={action.to} type={HashType.ACCOUNT} />}
+    </Box>
+  );
+};
+
+function parseTokenMintEvent(event: Types.Event): TokenMint | undefined {
+  if (
+    !event.type.startsWith("0x4::collection::Mint") &&
+    !event.type.startsWith("0x4::collection::MintEvent")
+  ) {
+    return undefined;
+  }
+
+  const data: {
+    collection: string;
+    token: string;
+  } = event.data;
+
+  return {
+    actionType: "token mint",
+    collection_address: data.collection,
+    token_address: data.token,
+  };
+}
+
+function parseTokenBurnEvent(event: Types.Event): TokenBurn | undefined {
+  if (
+    !event.type.startsWith("0x4::collection::Burn") &&
+    !event.type.startsWith("0x4::collection::BurnEvent")
+  ) {
+    return undefined;
+  }
+
+  const data: {
+    collection: string;
+    token: string;
+    previous_owner: string;
+  } = event.data;
+
+  return {
+    actionType: "token burn",
+    collection_address: data.collection,
+    token_address: data.token,
+    previous_owner: data.previous_owner,
+  };
+}
+
+function parseObjectTransferEvent(
+  event: Types.Event,
+): ObjectTransfer | undefined {
+  if (
+    !event.type.startsWith("0x1::object::Transfer") &&
+    !event.type.startsWith("0x1::object::TransferEvent")
+  ) {
+    return undefined;
+  }
+
+  const data: {
+    from: string;
+    to: string;
+    object: string;
+  } = event.data;
+
+  return {
+    actionType: "object transfer",
+    from: data.from,
+    to: data.to,
+    address: data.object,
+  };
+}
+
 function parseThalaSwapV1Event(event: Types.Event): Swap | undefined {
   if (
     !(