feat: Display all testnet tokens (#783)

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

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>

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>

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

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>

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>

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()

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}`"

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">

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,

src/stores/tokens.js

@@ -5,15 +5,15 @@ 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)
   const selectedTokenName = ref(null)
   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

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()
   }