Merge branch 'main' into blocks-mined-api

matter-labs · Oct 12, 2023 · 54f689b · 54f689b
2 parents d9f7c0b + 9f494a5
commit 54f689b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue
@@ -105,15 +105,15 @@
           </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">
             {{ t("transactions.table.tokensTransferredTooltip") }}
           </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
@@ -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
@@ -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
@@ -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",
+      },
+    },
   ],
 };