From 9f494a5f00d8f9ca37a7ef8cfb4751f8e8c5ec55 Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Wed, 11 Oct 2023 20:40:43 +0300
Subject: [PATCH] fix: do not show tokens transferred component for
 transactions with no transfers having amount (#49)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔

If transaction doesn't have at least one transfer with amount - we don't
show tokens transferred component on transaction page.

## Why ❔

We can't show such transfers properly atm.
---
 .../transactions/infoTable/GeneralInfo.vue       | 13 +++++++++----
 .../transactions/infoTable/TransferTableCell.vue |  2 +-
 packages/app/src/composables/useTransaction.ts   |  4 ++--
 .../components/transactions/GeneralInfo.spec.ts  | 16 ++++++++++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
index f3446f6dba..ef84402e10 100644
--- a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
+++ b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
@@ -105,7 +105,7 @@
           </div>
         </TableBodyColumn>
       </tr>
-      <tr v-if="transaction?.transfers.length">
+      <tr v-if="tokenTransfers.length">
         <TableBodyColumn class="transaction-table-label transaction-token-transferred">
           <span class="transaction-info-field-label">{{ t("transactions.table.tokensTransferred") }}</span>
           <InfoTooltip class="transaction-info-field-tooltip">
@@ -113,7 +113,7 @@
           </InfoTooltip>
         </TableBodyColumn>
         <TableBodyColumn class="transaction-table-value">
-          <div v-for="transfer in transaction.transfers" :key="transfer.to + transfer.from">
+          <div v-for="transfer in tokenTransfers" :key="transfer.to + transfer.from">
             <TransferTableCell :transfer="transfer" />
           </div>
         </TableBodyColumn>
@@ -189,6 +189,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, type PropType } from "vue";
 import { useI18n } from "vue-i18n";
 
 import AddressLink from "@/components/AddressLink.vue";
@@ -207,11 +208,10 @@ import TransactionData from "@/components/transactions/infoTable/TransactionData
 import TransferTableCell from "@/components/transactions/infoTable/TransferTableCell.vue";
 
 import type { TransactionItem } from "@/composables/useTransaction";
-import type { PropType } from "vue";
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
   transaction: {
     type: Object as PropType<TransactionItem | null>,
     default: null,
@@ -224,6 +224,11 @@ defineProps({
     type: String,
   },
 });
+
+const tokenTransfers = computed(() => {
+  // exclude transfers with no amount, such as NFT until we fully support them
+  return props.transaction?.transfers.filter((transfer) => transfer.amount) || [];
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/app/src/components/transactions/infoTable/TransferTableCell.vue b/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
index a699ec1eb8..d17fa00505 100644
--- a/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
+++ b/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
@@ -38,7 +38,7 @@ const props = defineProps({
 });
 
 const transferAmount = computed(() =>
-  props.transfer.tokenInfo ? formatBigNumberish(props.transfer.amount, props.transfer.tokenInfo?.decimals) : ""
+  props.transfer.tokenInfo ? formatBigNumberish(props.transfer.amount || 0, props.transfer.tokenInfo?.decimals) : ""
 );
 </script>
 
diff --git a/packages/app/src/composables/useTransaction.ts b/packages/app/src/composables/useTransaction.ts
index 5bf813ee78..1fbd4ba858 100644
--- a/packages/app/src/composables/useTransaction.ts
+++ b/packages/app/src/composables/useTransaction.ts
@@ -19,7 +19,7 @@ type TokenInfo = {
 };
 
 export type TokenTransfer = {
-  amount: Hash;
+  amount: Hash | null;
   from: Hash;
   to: Hash;
   type: "fee" | "transfer" | "withdrawal" | "deposit" | "refund" | "mint";
@@ -244,7 +244,7 @@ function mapTransfers(transfers: Api.Response.Transfer[]): TokenTransfer[] {
 }
 
 function sumAmounts(balanceChanges: TokenTransfer[]) {
-  const total = balanceChanges.reduce((acc, cur) => acc.add(cur.amount), BigNumber.from(0));
+  const total = balanceChanges.reduce((acc, cur) => acc.add(cur.amount || 0), BigNumber.from(0));
   return total.toHexString() as Hash;
 }
 
diff --git a/packages/app/tests/components/transactions/GeneralInfo.spec.ts b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
index 8bdd10d6b0..022c223d04 100644
--- a/packages/app/tests/components/transactions/GeneralInfo.spec.ts
+++ b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
@@ -150,6 +150,22 @@ const transaction: TransactionItem = {
         symbol: "YourTokenSymbol",
       },
     },
+    {
+      amount: null,
+      from: "0x08d211E22dB19741FF25838A22e4e696FeE7eD36",
+      to: "0x08d211E22dB19741FF25838A22e4e696FeE7eD36",
+      fromNetwork: "L2",
+      toNetwork: "L2",
+      type: "transfer",
+      tokenInfo: {
+        address: "0x1bAbcaeA2e4BE1f1e1A149c454806F2D21d7f47C",
+        l1Address: undefined,
+        l2Address: "0x1bAbcaeA2e4BE1f1e1A149c454806F2D21d7f47C",
+        decimals: 18,
+        name: "Your Token Name",
+        symbol: "NoAmountTransfer",
+      },
+    },
   ],
 };