hide erc20 transfers when is empty

telosnetwork · Apr 19, 2024 · 1791946 · 1791946
1 parent 9a45a04
commit 1791946
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Transaction/ERCTransferList.vue b/src/components/Transaction/ERCTransferList.vue
@@ -35,7 +35,7 @@ const props = defineProps({
  },
 });
 
-const emit = defineEmits(['highlight']);
+const emit = defineEmits(['highlight', 'transfers-count']);
 
 const erc721_transfers = ref<ERC721Transfer[]>([]);
 const erc1155_transfers = ref<ERC1155Transfer[]>([]);
@@ -136,6 +136,9 @@ const loadTransfers = async () => {
  }
  }
  }
+
+ const count = erc20_transfers.value.length + erc721_transfers.value.length + erc1155_transfers.value.length;
+ emit('transfers-count', count);
 };
 
 function setHighlightAddress(val: string) {

diff --git a/src/components/TransactionOverview.vue b/src/components/TransactionOverview.vue
@@ -38,6 +38,7 @@ const toAddress = ref('');
 const isAContractDeployment = ref(false);
 
 const showMoreDetails = ref(true);
+const showErc20Transfers = ref(true);
 const moreDetailsHeight = ref(0);
 
 const getValueDisplay = (value: string) =>
@@ -69,6 +70,9 @@ function setHighlightAddress(val: string) {
  highlightAddress.value = val;
 }
 
+function setERC20TransfersCount(count: number) {
+ showErc20Transfers.value = count > 0;
+}
 
 watch(() => props.trx, async (newTrx) => {
  if (newTrx) {
@@ -299,7 +303,12 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
  </div>
 
  <!-- ERC20 Token Tranfers -->
- <div v-if="(trx?.logsArray.length ?? 0) > 0" class="c-trx-overview__row">
+ <div
+ :class="{
+ 'c-trx-overview__row': true,
+ 'c-trx-overview__row--hidden': !showErc20Transfers,
+ }"
+ >
  <div class="c-trx-overview__col-att">
  <div class="c-trx-overview__row-tooltip">
  <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
@@ -316,6 +325,7 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
  :type="'erc20'"
  :highlightAddress="highlightAddress"
  @highlight="setHighlightAddress"
+ @transfers-count="setERC20TransfersCount"
  />
  </div>
  </div>
@@ -513,6 +523,9 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
  &--toggle-details {
  cursor: pointer;
  }
+ &--hidden {
+ display: none;
+ }
  }
  &__row-tooltip {
  display: flex;