From 921229274da991621f5a7bf124038f593b323b23 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 14 May 2024 10:06:14 +0200
Subject: [PATCH 1/4] improve printing holder percentage

---
 src/components/TokenHoldersTable.vue          | 20 ++++++++++++-------
 src/components/TokenHoldersTableCondensed.vue | 20 ++++++++++++-------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/TokenHoldersTable.vue b/src/components/TokenHoldersTable.vue
index a451cd2df..d84b9198e 100644
--- a/src/components/TokenHoldersTable.vue
+++ b/src/components/TokenHoldersTable.vue
@@ -35,13 +35,7 @@
           {{ formatNumber(holder.amount, 0, tokenDetails.decimals) }} {{ tokenDetails.symbol }}
         </td>
         <td>
-          <template v-if="Math.abs(holder.percentage) >= 0.00001">
-            {{ formatNumber(Math.abs(holder.percentage)) }}
-          </template>
-          <template v-else>
-            ~0
-          </template>
-          %
+          {{ formatPercentage(holder.percentage) }}
         </td>
       </tr>
     </tbody>
@@ -62,4 +56,16 @@ defineProps({
     required: true,
   },
 })
+
+function formatPercentage(percentage) {
+  if (percentage >= 0.00001) {
+    return `${formatNumber(percentage)} %`
+  }
+  if (percentage === 0) {
+    return '0 %'
+  }
+  if (percentage < 0.00001) {
+    return '~0 %'
+  }
+}
 </script>
diff --git a/src/components/TokenHoldersTableCondensed.vue b/src/components/TokenHoldersTableCondensed.vue
index 058ce7556..218ee0bef 100644
--- a/src/components/TokenHoldersTableCondensed.vue
+++ b/src/components/TokenHoldersTableCondensed.vue
@@ -42,13 +42,7 @@
           </app-tooltip>
         </th>
         <td class="token-holders-table-condensed__data">
-          <template v-if="Math.abs(holder.percentage) >= 0.00001">
-            {{ formatNumber(Math.abs(holder.percentage)) }}
-          </template>
-          <template v-else>
-            ~0
-          </template>
-          %
+          {{ formatPercentage(holder.percentage) }}
         </td>
       </tr>
     </table>
@@ -69,6 +63,18 @@ defineProps({
     required: true,
   },
 })
+
+function formatPercentage(percentage) {
+  if (percentage >= 0.00001) {
+    return `${formatNumber(percentage)} %`
+  }
+  if (percentage === 0) {
+    return '0 %'
+  }
+  if (percentage < 0.00001) {
+    return '~0 %'
+  }
+}
 </script>
 
 <style scoped>

From 761e968bdfa0caa00cadcf6ba76161fef6b69ff6 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 14 May 2024 10:25:19 +0200
Subject: [PATCH 2/4] list all tokens on testnet

---
 src/components/TokensPanel.vue | 6 +++++-
 src/stores/tokens.js           | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/TokensPanel.vue b/src/components/TokensPanel.vue
index 538ac5ef1..f435b2ede 100644
--- a/src/components/TokensPanel.vue
+++ b/src/components/TokensPanel.vue
@@ -8,7 +8,9 @@
       @prev-clicked="loadPrevTokens"
       @next-clicked="loadNextTokens">
       <template #header>
-        <token-select v-model="selectedTokenName"/>
+        <token-select
+          v-if="NETWORK_NAME !== 'TESTNET'"
+          v-model="selectedTokenName"/>
       </template>
       <tokens-table
         v-if="selectedTokens"
@@ -32,6 +34,8 @@ import TokenSelect from '@/components/TokenSelect'
 import PaginatedContent from '@/components/PaginatedContent'
 import { isDesktop } from '@/utils/screen'
 
+const { NETWORK_NAME } = useRuntimeConfig().public
+
 const tokensStore = useTokensStore()
 const { selectedTokens, selectedTokenName, selectedTokensCount } = storeToRefs(tokensStore)
 const { fetchTokens, fetchTokensCount } = useTokensStore()
diff --git a/src/stores/tokens.js b/src/stores/tokens.js
index e34575ff3..5cd5fb92a 100644
--- a/src/stores/tokens.js
+++ b/src/stores/tokens.js
@@ -5,7 +5,7 @@ import useAxios from '@/composables/useAxios'
 import { adaptListedTokens } from '@/utils/adapters'
 
 export const useTokensStore = defineStore('tokens', () => {
-  const { MIDDLEWARE_URL, DEX_BACKEND_URL } = useRuntimeConfig().public
+  const { MIDDLEWARE_URL, DEX_BACKEND_URL, NETWORK_NAME } = useRuntimeConfig().public
   const axios = useAxios()
   const rawListedTokens = ref(null)
   const allTokens = ref(null)
@@ -13,7 +13,7 @@ export const useTokensStore = defineStore('tokens', () => {
   const allTokensCount = ref(null)
 
   const selectedTokens = computed(() => {
-    return selectedTokenName.value?.key === 'listedTokens' ? listedTokens.value : allTokens.value
+    return selectedTokenName.value?.key === 'listedTokens' && NETWORK_NAME !== 'TESTNET' ? listedTokens.value : allTokens.value
   })
   const selectedTokensCount = computed(() => {
     return selectedTokenName.value?.key === 'listedTokens' ? listedTokens.value?.data.length : allTokensCount.value

From b83badff3d0ea01de0e1468c1b568aa20ad3b06e Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 14 May 2024 10:39:49 +0200
Subject: [PATCH 3/4] add N/A label

---
 src/components/ContractDetailsPanel.vue |  1 +
 src/components/CopyChip.vue             | 17 ++++++++++++++---
 src/components/NotAvailableLabel.vue    | 16 ++++++++++++++++
 src/components/TokenDetailsPanel.vue    |  6 +++++-
 src/components/TokensTable.vue          |  6 +++++-
 src/components/TokensTableCondensed.vue |  2 ++
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/components/NotAvailableLabel.vue

diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
index c0ae3d963..f56c46bab 100644
--- a/src/components/ContractDetailsPanel.vue
+++ b/src/components/ContractDetailsPanel.vue
@@ -40,6 +40,7 @@
                   :contract-id="contractDetails.id"
                   class="contract-details-panel__icon"/>
                 {{ contractDetails.tokenDetails.symbol }}
+                <not-available-label v-if="!contractDetails.tokenDetails.symbol"/>
               </app-link>
             </div>
             <app-link
diff --git a/src/components/CopyChip.vue b/src/components/CopyChip.vue
index 16dd56562..c1f473326 100644
--- a/src/components/CopyChip.vue
+++ b/src/components/CopyChip.vue
@@ -7,10 +7,14 @@
     <div class="copy-chip__container">
       <div class="copy-chip__text">
         {{ textToDisplay }}
+        <not-available-label
+          v-if="!textToDisplay"
+          class="copy-chip__not-available-label"/>
       </div>
-
       <copy-button
+        v-if="!!textToDisplay"
         v-show="!isCopyAnimationActive"
+        class="copy-chip__copy-button"
         :clipboard-text="clipboardText || label"
         variant="light"
         @copy:started="activateCopyAnimation"
@@ -54,17 +58,24 @@ function deactivateCopyAnimation() {
 
 <style scoped>
 .copy-chip {
-  min-width: 72px;
+  min-width: 39px;
 
   &__container {
     display: flex;
   }
 
   &__text {
-    margin-right: var(--space-1);
     display: flex;
     flex-grow: 1;
     justify-content: center;
   }
+
+  &__not-available-label {
+    color: var(--color-white) !important;
+  }
+
+  &__copy-button {
+    margin-left: var(--space-1);
+  }
 }
 </style>
diff --git a/src/components/NotAvailableLabel.vue b/src/components/NotAvailableLabel.vue
new file mode 100644
index 000000000..64a9c842d
--- /dev/null
+++ b/src/components/NotAvailableLabel.vue
@@ -0,0 +1,16 @@
+<template>
+  <app-tooltip class="not-available-label">
+    N/A
+    <template #tooltip>
+      Value is empty
+    </template>
+  </app-tooltip>
+</template>
+
+<style scoped>
+.not-available-label {
+  display: inline-flex;
+  color: var(--color-midnight-55);
+  font-style: italic;
+}
+</style>
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index d944e700f..46348b9c4 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -23,6 +23,7 @@
           </th>
           <td class="token-details-panel__data">
             {{ tokenDetails.name }}
+            <not-available-label v-if="!tokenDetails.name"/>
           </td>
         </tr>
         <tr
@@ -46,7 +47,10 @@
             </hint-tooltip>
           </th>
           <td class="token-details-panel__data">
-            {{ formatNumber(tokenDetails.totalSupply) }} {{ tokenDetails.symbol }}
+            <template v-if="tokenDetails.totalSupply">
+              {{ formatNumber(tokenDetails.totalSupply) }} {{ tokenDetails.symbol }}
+            </template>
+            <not-available-label v-else/>
           </td>
         </tr>
         <tr class="token-details-panel__row">
diff --git a/src/components/TokensTable.vue b/src/components/TokensTable.vue
index 71754f0c0..4c8b7cd94 100644
--- a/src/components/TokensTable.vue
+++ b/src/components/TokensTable.vue
@@ -34,9 +34,13 @@
               :contract-id="token.contractId"
               class="tokens-table__icon"/>
             {{ token.symbol }}
+            <not-available-label v-if="!token.symbol"/>
           </app-link>
         </td>
-        <td>{{ token.name }}</td>
+        <td>
+          {{ token.name }}
+          <not-available-label v-if="!token.name"/>
+        </td>
         <td>
           <value-hash-ellipsed
             :link-to="`/contracts/${token.contractId}`"
diff --git a/src/components/TokensTableCondensed.vue b/src/components/TokensTableCondensed.vue
index 46e750068..7b4a63b6d 100644
--- a/src/components/TokensTableCondensed.vue
+++ b/src/components/TokensTableCondensed.vue
@@ -22,6 +22,7 @@
                 :contract-id="token.contractId"
                 class="tokens-table-condensed__icon"/>
               {{ token.symbol }}
+              <not-available-label v-if="!token.symbol"/>
             </app-link>
           </td>
         </tr>
@@ -37,6 +38,7 @@
           </th>
           <td class="tokens-table-condensed__data">
             {{ token.name }}
+            <not-available-label v-if="!token.name"/>
           </td>
         </tr>
         <tr class="tokens-table-condensed__row">

From 3f787300726443601846399efe84d5834812708f Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 14 May 2024 11:57:53 +0200
Subject: [PATCH 4/4] fix null condition

---
 src/components/TokenDetailsPanel.vue | 5 +----
 src/stores/tokenDetails.js           | 2 +-
 src/utils/adapters.js                | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index 46348b9c4..4900736ca 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -47,10 +47,7 @@
             </hint-tooltip>
           </th>
           <td class="token-details-panel__data">
-            <template v-if="tokenDetails.totalSupply">
-              {{ formatNumber(tokenDetails.totalSupply) }} {{ tokenDetails.symbol }}
-            </template>
-            <not-available-label v-else/>
+            {{ formatNumber(tokenDetails.totalSupply) }} {{ tokenDetails.symbol }}
           </td>
         </tr>
         <tr class="token-details-panel__row">
diff --git a/src/stores/tokenDetails.js b/src/stores/tokenDetails.js
index 36ae8db9d..9ddd731d9 100644
--- a/src/stores/tokenDetails.js
+++ b/src/stores/tokenDetails.js
@@ -31,7 +31,7 @@ export const useTokenDetailsStore = defineStore('tokenDetails', () => {
   )
 
   const tokenHolders = computed(() =>
-    tokenDetails.value?.totalSupply && rawTokenHolders.value
+    tokenDetails.value && rawTokenHolders.value
       ? adaptTokenHolders(
         rawTokenHolders.value,
         tokenDetails.value,
diff --git a/src/utils/adapters.js b/src/utils/adapters.js
index 860a4e647..a07c83bff 100644
--- a/src/utils/adapters.js
+++ b/src/utils/adapters.js
@@ -396,7 +396,7 @@ export function adaptTokenDetails(token, totalSupply = null, price = null) {
     ...(price && { price }),
   }
 
-  if (token && totalSupply) {
+  if (token && totalSupply !== null) {
     tokenDetails.totalSupply = (new BigNumber(totalSupply)).dividedBy(10 ** token.decimals).toNumber()
   }